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
Raw
collectplus.scss.liquid
$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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment