Skip to content

Instantly share code, notes, and snippets.

@charlesemarsh

charlesemarsh/collectplus.scss.liquid

Last active April 25, 2018 10:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save charlesemarsh/548c07863b7262e45415480d9acc07b4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save charlesemarsh/548c07863b7262e45415480d9acc07b4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. charlesemarsh revised this gist Apr 25, 2018. 1 changed file with 145 additions and 73 deletions.
    218 changes: 145 additions & 73 deletions collectplus.scss.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,13 @@
    $light-border-color: #DDDDDD;
    $text-color: #000;
    $primary-color: #000;
    $text-color: #000000;
    $primary-color: #000000;
    $button-text-color: #FFFFFF;
    $content-background-color: #FFFFFF;
    $tab-background-color: #FFFFFF;
    $button-radius: 3px;
    $question_mark_bg_colour: #000000;
    $question_mark_text_colour: #FFFFFF;
    $postcode-input-bg-colour: #F1F1F1;

    #collectplus-widget {
    :focus {
    @@ -13,9 +16,11 @@ $button-radius: 3px;
    }
    #collectplus-widget-inner {
    float: right;
    width: 300px;
    width: 100%;

    #collectplus-header {
    margin-bottom: 10px;

    span {
    font-size: 15px;
    font-weight: 600;
    @@ -40,6 +45,7 @@ $button-radius: 3px;
    a {
    display: block;
    font-size: 14px;
    position:relative;
    background: $tab-background-color;
    width: 100%;
    text-decoration: none;
    @@ -56,6 +62,55 @@ $button-radius: 3px;
    color: $button-text-color;
    border: 1px solid $primary-color;
    }

    .collect-plus-info {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    color: $question_mark_text_colour;
    background-color: $question_mark_bg_colour;
    line-height: 14px;
    font-size: 0.8em;
    font-style: normal;

    &:after {
    position: absolute;
    content: 'Collect your order at your convenience, from your choice of over 7000 CollectPlus points across the UK';
    background-color: rgba(0,0,0,0.8);
    width: 200px;
    padding: 10px;
    border-radius: 5px;
    font-size: 0.9em;
    right: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: .1em;
    font-weight: 500;
    line-height: 1.7em;
    opacity: 0;
    display: none;
    transition: opacity .25s ease-in-out .1s;
    }

    &:hover:after {
    opacity: 1;
    display: block;
    }

    &.selected-shipping-method {
    color: #000;
    background-color: #fff;
    }

    &.selected-shipping-method:hover:after {
    color: #fff;
    }
    }
    }
    &:last-child {
    margin-left: 4%;
    @@ -65,6 +120,10 @@ $button-radius: 3px;

    #tab-content {

    .hidden-cp-content {
    display: none;
    }

    #delivery-content {

    }
    @@ -94,7 +153,7 @@ $button-radius: 3px;
    margin-top: -10px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 1.7em;
    font-size: 19px;
    line-height: 1em;
    letter-spacing: 0.02em;

    @@ -192,47 +251,48 @@ $button-radius: 3px;
    width: 100%;
    }
    .map-actions {
    clear: left;
    float: left;
    margin-bottom: 10px;
    width: 100%;
    display: flex;

    #find-by-location {
    padding-top: 0px;
    display: block;
    position: relative;
    top: 9px;
    width: 10%;
    left: 6px;
    float: left;

    text-align: center;
    &.actively-searching svg path, &:hover svg path {
    fill: #F26D26;
    }
    svg {
    display: inline-block;
    float: left;
    width: 15px;
    height: 15px;
    top: 8px;
    position: relative;
    }
    }

    #postcode {
    width: 79%;
    background: $light-border-color;
    background: $postcode-input-bg-colour;
    float: left;
    margin: 0;
    padding-top: 7px;
    padding-bottom: 6px;
    }

    #postcode-submit {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/search.svg?3109301234218126690') no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    color: #FFF;
    width: 30px;
    width: 10%;
    background-size: 15px 15px;
    padding: 0;
    border: none;
    background-position: center center;
    float: left;
    height: 32px;

    &:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#F26D26' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
    }
    }
    }

    @@ -330,13 +390,13 @@ $button-radius: 3px;
    padding-top: 0;
    line-height: 2em;
    &.cp-opening-times {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/clock.svg?12543779450643973362') left center / 14px no-repeat;
    background: url('https://s3.eu-west-2.amazonaws.com/collectplus/clock.svg') left center / 14px no-repeat;
    }
    &.cp-distance {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/car.svg?12543779450643973362') left center / 14px no-repeat;
    background: url('https://s3.eu-west-2.amazonaws.com/collectplus/car.svg') left center / 14px no-repeat;
    }
    &.cp-disabled {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/wheelchair.svg?12877957459741819234') left center / 14px no-repeat;
    background: url('https://s3.eu-west-2.amazonaws.com/collectplus/wheelchair.svg') left center / 14px no-repeat;
    }
    }

    @@ -353,7 +413,7 @@ $button-radius: 3px;
    }

    ul {
    margin: 0 0 20px;
    margin: 0;
    padding: 0;
    list-style: none;

    @@ -386,6 +446,7 @@ $button-radius: 3px;
    cursor: pointer;
    position: relative;
    zindex: 1;
    font-size: 11px;
    width: 100%;
    text-decoration: none;
    border-radius: $button-radius;
    @@ -461,7 +522,7 @@ $button-radius: 3px;

    .infowindow-select {
    text-decoration: none;
    font-size: 1em;
    font-size: 0.8em;
    font-weight: 600;
    display: block;
    width: 100%;
    @@ -478,6 +539,8 @@ $button-radius: 3px;
    background: #f1f1f1;
    font-weight: 600;
    text-decoration: none;
    pointer-events: none;
    cursor: normal;
    color: #000;
    letter-spacing: 0.06em;
    width: 100%;
    @@ -513,62 +576,71 @@ $button-radius: 3px;
    #collectplus-results > ul >li.selected-collectplus-store-li a {
    color: $button-text-color;
    }
    p.cp-icon.cp-opening-times {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/clock.svg?12543779450643973362') left center no-repeat;
    }

    p.cp-icon.cp-distance {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/car.svg?12543779450643973362') left center no-repeat;
    }

    p.cp-icon.cp-disabled {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/wheelchair.svg?12877957459741819234') left center no-repeat;
    }

    .infoBox-inner {
    overflow: auto;
    height: 210px;
    box-sizing: border-box;
    margin-bottom: 60px;
    padding-bottom: 20px;
    }

    .more-information-container > div {
    padding-top:15px;
    }

    p.cp-icon {
    padding-left: 20px;
    margin-bottom: 10px;
    }

    p.cp-icon.cp-opening-times {
    background: url('https://s3.eu-west-2.amazonaws.com/collectplus/clock.svg') left center no-repeat;
    }

    p.cp-icon.cp-distance {
    background: url('https://s3.eu-west-2.amazonaws.com/collectplus/car.svg') left center no-repeat;
    }

    p.cp-icon.cp-disabled {
    background: url('https://s3.eu-west-2.amazonaws.com/collectplus/wheelchair.svg') left center no-repeat;
    }

    .distance a {
    font-size: 0.9em;
    text-decoration: none;
    color: $primary-color;
    font-weight: 600;
    }

    .infoBox > img {
    max-width: none;
    width: 22px;
    }
    .infoBox > img {
    max-width: none;
    width: 22px;
    }

    .step__footer__continue-btn {
    transition: opacity .25s ease-in-out .1s;
    }
    .step__footer__continue-btn {
    transition: opacity .25s ease-in-out .1s;
    }

    .loading_result {
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .loading_result {
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .loader {
    display: inline-block;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #F26D26;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 20px 0 20px 10px;
    text-align: center;
    animation: spin 2s linear infinite;
    }
    .loader {
    display: inline-block;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #F26D26;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 20px 0 20px 10px;
    text-align: center;
    animation: spin 2s linear infinite;
    }

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

    .infoBox-inner {
    overflow: scroll;
    overflow-y: scroll;
    height:210px;
    padding-bottom:20px;
    padding-bottom:60px;

    ::-webkit-scrollbar {
    width: 0px;
  2. charlesemarsh created this gist Feb 27, 2018.
    600 changes: 600 additions & 0 deletions collectplus.scss.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,600 @@
    $light-border-color: #DDDDDD;
    $text-color: #000;
    $primary-color: #000;
    $button-text-color: #FFFFFF;
    $content-background-color: #FFFFFF;
    $tab-background-color: #FFFFFF;
    $button-radius: 3px;

    #collectplus-widget {
    :focus {
    outline: none!important;
    box-sizing: border-box;
    }
    #collectplus-widget-inner {
    float: right;
    width: 300px;

    #collectplus-header {
    span {
    font-size: 15px;
    font-weight: 600;
    border-bottom: 2px solid $light-border-color;
    text-align: center;
    display: inline-block;
    width: 100%;
    padding-bottom: 10px;
    }
    }

    #collectplus-tabs {
    padding: 0;
    margin-top: 0;
    margin-bottom: 20px;

    li {
    list-style: none;
    display: inline-block;
    width: 48%;

    a {
    display: block;
    font-size: 14px;
    background: $tab-background-color;
    width: 100%;
    text-decoration: none;
    border: 1px solid $light-border-color;
    text-align: center;
    border-radius: $button-radius;
    padding: 5px 5px 5px;
    font-weight: 600;
    color: inherit;
    letter-spacing: 0.02em;

    &.active-tab-header {
    background: $primary-color;
    color: $button-text-color;
    border: 1px solid $primary-color;
    }
    }
    &:last-child {
    margin-left: 4%;
    }
    }
    }

    #tab-content {

    #delivery-content {

    }

    #collectplus-content {

    h3 {
    font-size: 12px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 1px solid $light-border-color;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    }

    > h3 {
    text-align: left;
    padding: 0;
    font-size: 1.3em;
    border: none;
    }

    #selected-explaination {
    text-align: left;
    margin-top: -10px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 1.7em;
    line-height: 1em;
    letter-spacing: 0.02em;

    small {

    }
    }

    #nearest-store-wrapper {
    background: $button-text-color;
    border: 1px solid $primary-color;
    margin-bottom: 10px;
    padding: 10px;
    text-align: left;
    position: relative;
    border-radius: $button-radius;

    ul {
    list-style: none;
    margin: 0;
    font-size: 0.9em;
    padding: 0;
    line-height: 1.3em;
    }

    .result-list-select-store-button {
    display: none;
    }

    .result-logo {
    display: inline-block;
    width: 55px;
    float: left;

    .zoom-in-store {
    img {
    opacity: 1;
    }
    span {
    display:none;
    }
    }
    }

    .result-topline {
    width: calc(100% - 55px);
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
    float: left;
    padding-left: 20px;

    .store-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
    display: block;
    }

    .store-address {
    margin-bottom: 5px;
    }

    .more-information-slide-down {
    text-decoration: none;
    color: $primary-color;
    font-weight: 500;
    font-size: 0.9em;
    }

    > ul {

    > li {

    }
    }
    }

    &:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
    zoom: 1;
    }
    }

    #content-inner {
    background: $content-background-color;
    padding: 5px;
    border: 1px solid $light-border-color;
    #collectplus-checkout {
    width: 100%;
    }
    .map-actions {
    clear: left;
    float: left;
    margin-bottom: 10px;
    width: 100%;

    #find-by-location {
    padding-top: 0px;
    display: block;
    position: relative;
    top: 9px;
    width: 10%;
    left: 6px;
    float: left;

    svg {
    display: inline-block;
    float: left;
    width: 15px;
    height: 15px;
    }
    }

    #postcode {
    width: 79%;
    background: $light-border-color;
    float: left;
    margin: 0;
    padding-top: 7px;
    padding-bottom: 6px;
    }

    #postcode-submit {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/search.svg?3109301234218126690') no-repeat;
    text-indent: -9999px;
    color: #FFF;
    width: 30px;
    background-size: 15px 15px;
    border: none;
    background-position: center center;
    float: left;
    height: 32px;
    }
    }

    #googlemap {
    width:100%;
    height:300px;
    }

    #collectplus-results {
    margin-bottom: 5px;

    > ul {
    list-style: none;
    padding: 0;
    max-height: 300px;
    overflow-y: scroll;

    > li {
    padding: 15px 5px 0;
    border-bottom: 1px solid $light-border-color;
    text-align: left;
    position: relative;

    .result-logo {
    display: inline-block;
    width: 55px;
    float: left;
    padding-left: 2%;

    .zoom-in-store {
    text-align: center;
    text-decoration: none;
    img {
    opacity: 0.5;
    }

    span {
    text-decoration: none;
    font-size: 8px;
    text-transform: uppercase;
    font-weight: 600;
    color: #888;
    line-height: 1.3em;
    display: block;
    text-align: center;
    }
    }
    }

    .result-topline {
    width: calc(100% - 55px);
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    padding-left: 10px;

    a {
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 10px;
    color: $primary-color;
    display: block;
    padding-top: 5px;
    }

    .store-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    display: block;
    }
    .store-address {
    margin-bottom: 10px;

    ul {
    overflow-y: initial;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.4em;
    li {
    margin-bottom: 0;
    }
    }
    }
    .more-information-slide-down {

    }

    .more-information-container {
    padding-bottom: 20px;
    .cp-icon {
    padding-left: 20px;
    padding-top: 0;
    line-height: 2em;
    &.cp-opening-times {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/clock.svg?12543779450643973362') left center / 14px no-repeat;
    }
    &.cp-distance {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/car.svg?12543779450643973362') left center / 14px no-repeat;
    }
    &.cp-disabled {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/wheelchair.svg?12877957459741819234') left center / 14px no-repeat;
    }
    }

    .selected-opening-times {

    p {
    margin-bottom: 10px;
    }

    img {
    width: 16px;
    vertical-align: middle;
    margin-left: 10px;
    }

    ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;

    li {
    margin-bottom: 10px;
    }
    }
    }

    .store-info-icon {

    p {
    margin-bottom: 10px;
    }

    img {
    width: 16px;
    vertical-align: middle;
    margin-left: 10px;
    }
    }
    }
    }
    .result-list-select-store-button {
    margin-bottom: 10px;

    a {
    display: block;
    text-align: center;
    cursor: pointer;
    position: relative;
    zindex: 1;
    width: 100%;
    text-decoration: none;
    border-radius: $button-radius;
    padding: 3px;
    background: $primary-color;
    color: $button-text-color;

    &:hover {
    cursor: pointer;
    }
    }
    }
    }
    &.selected-collectplus-store-li {
    background: $light-border-color;
    color: #555;

    a {
    color: #555;
    }

    .result-logo {

    img {
    opacity: 1;
    }
    }

    div#select-store-button {
    display: none;

    a {
    text-decoration: none;
    border-radius: $button-radius;
    &:hover {
    background: $primary-color;
    color: $button-text-color;
    }
    }
    }

    .result-list-select-store-button {
    text-decoration: none;
    border-radius: $button-radius;
    cursor: pointer;
    position: relative;

    a {
    background-color: $primary-color;
    color: $button-text-color;
    cursor: pointer;
    position: relative;
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }


    .info-actions {
    position: fixed;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: #FFF;
    padding: 0;
    text-transform: uppercase;

    .infowindow-select {
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    background: #F47929;
    color: #FFF;
    }

    .infowindow-selected {
    display: block;
    text-align: center;
    padding: 6px 10px;
    background: #f1f1f1;
    font-weight: 600;
    text-decoration: none;
    color: #000;
    letter-spacing: 0.06em;
    width: 100%;
    }

    .infowindow-checkout {
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    display: block;
    width: 100%;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    background: $primary-color;
    color: $button-text-color;
    }
    }

    .gm-style-iw > div > div {
    margin-bottom: 10px;
    }

    .gm-style-iw {
    text-align: left;
    }

    #collectplus-results > ul >li.selected-collectplus-store-li {
    background: $primary-color;
    color: $button-text-color;
    }

    #collectplus-results > ul >li.selected-collectplus-store-li a {
    color: $button-text-color;
    }
    p.cp-icon.cp-opening-times {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/clock.svg?12543779450643973362') left center no-repeat;
    }

    p.cp-icon.cp-distance {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/car.svg?12543779450643973362') left center no-repeat;
    }

    p.cp-icon.cp-disabled {
    background: url('https://cdn.shopify.com/s/files/1/2354/9181/files/wheelchair.svg?12877957459741819234') left center no-repeat;
    }

    .infoBox-inner {
    overflow: auto;
    height: 210px;
    box-sizing: border-box;
    margin-bottom: 60px;
    padding-bottom: 20px;
    }

    .infoBox > img {
    max-width: none;
    width: 22px;
    }

    .step__footer__continue-btn {
    transition: opacity .25s ease-in-out .1s;
    }

    .loading_result {
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .loader {
    display: inline-block;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #F26D26;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 20px 0 20px 10px;
    text-align: center;
    animation: spin 2s linear infinite;
    }

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

    .infoBox-inner {
    overflow: scroll;
    height:210px;
    padding-bottom:20px;

    ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    }

    ::-webkit-scrollbar-thumb {
    background: $light-border-color;
    }
    p {
    margin-bottom: 5px;
    }

    ul {
    margin: 0 0 10px 0;
    padding: 0;
    width: 100%;

    li {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 0.9em;
    display: block;
    letter-spacing: 0.02em;
    }
    }
    }