Created
July 29, 2014 20:10
-
-
Save paulmason/82d2c6e2b2293a6778cf to your computer and use it in GitHub Desktop.
Swatches - Blockshop Theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Swatches Styles | |
*/ | |
{% assign width = '50px' %} | |
{% assign height = '35px' %} | |
.swatch { | |
margin:1em 0; | |
} | |
/* Label */ | |
.swatch .header { | |
margin: 0.5em 0; | |
} | |
/* Hide radio buttons.*/ | |
.swatch input { | |
display:none; | |
} | |
.swatch label { | |
/* Rounded corners */ | |
-webkit-border-radius:2px; | |
-moz-border-radius:2px; | |
border-radius:2px; | |
/* To give width and height */ | |
float:left; | |
/* Color swatches contain no text so they need to have a width. */ | |
min-width:{{ width }} !important; | |
height:{{ height }} !important; | |
/* No extra spacing between them */ | |
margin:0; | |
/* The border when the button is not selected */ | |
border:#ccc 1px solid; | |
/* Background color */ | |
background-color:#ddd; | |
/* Styling text */ | |
font-size:13px; | |
text-align:center; | |
line-height:{{ height }}; | |
white-space:nowrap; | |
text-transform:uppercase; | |
} | |
.swatch-element label { padding:0 10px; } | |
.color.swatch-element label { padding:0; } | |
/* Styling selected swatch */ | |
/* Slightly raised */ | |
.swatch input:checked + label { | |
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.8); | |
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.8); | |
box-shadow:0px 1px 2px rgba(0,0,0,0.8); | |
border-color:transparent; | |
} | |
.swatch .swatch-element { | |
float:left; | |
-webkit-transform:translateZ(0); /* webkit flicker fix */ | |
-webkit-font-smoothing:antialiased; /* webkit text rendering fix */ | |
/* Spacing between buttons */ | |
margin:0px 10px 10px 0; | |
/* To position the sold out graphic and tooltip */ | |
position:relative; | |
} | |
/* Image with the cross in it */ | |
.crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; } | |
.swatch .swatch-element .crossed-out { display:none; } | |
.swatch .swatch-element.soldout .crossed-out { display:block; } | |
.swatch .swatch-element.soldout label { | |
filter: alpha(opacity=60); /* internet explorer */ | |
-khtml-opacity: 0.6; /* khtml, old safari */ | |
-moz-opacity: 0.6; /* mozilla, netscape */ | |
opacity: 0.6; /* fx, safari, opera */ | |
} | |
/* Tooltips */ | |
.swatch .tooltip { | |
text-align:center; | |
background:gray; | |
color:#fff; | |
bottom:100%; | |
padding: 10px; | |
display:block; | |
position:absolute; | |
width:100px; | |
left:{{ width | remove: 'px' | to_number | divided_by: 2 | minus: 50 | plus: 2 }}px; right: auto; | |
margin-bottom:15px; | |
/* Make it invisible by default */ | |
filter:alpha(opacity=0); | |
-khtml-opacity: 0; | |
-moz-opacity: 0; | |
opacity:0; | |
visibility:hidden; | |
/* Animations */ | |
-webkit-transform: translateY(10px); | |
-moz-transform: translateY(10px); | |
-ms-transform: translateY(10px); | |
-o-transform: translateY(10px); | |
transform: translateY(10px); | |
-webkit-transition: all .25s ease-out; | |
-moz-transition: all .25s ease-out; | |
-ms-transition: all .25s ease-out; | |
-o-transition: all .25s ease-out; | |
transition: all .25s ease-out; | |
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | |
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | |
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | |
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | |
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | |
z-index: 10000; | |
-moz-box-sizing:border-box; | |
-webkit-box-sizing:border-box; | |
box-sizing:border-box; | |
} | |
.swatch .tooltip:before { | |
bottom:-20px; top: auto; | |
content:" "; | |
display:block; | |
height:20px; | |
left:0; right: auto; | |
position:absolute; | |
width:100%; | |
} | |
/* CSS triangle */ | |
.swatch .tooltip:after { | |
border-left:solid transparent 10px; | |
border-right:solid transparent 10px; | |
border-top:solid gray 10px; | |
bottom:-10px; top: auto; | |
content:" "; | |
height:0; | |
left:50%; | |
margin-left:-13px; | |
position:absolute; | |
width:0; | |
} | |
.swatch .swatch-element:hover .tooltip { | |
filter:alpha(opacity=100); | |
-khtml-opacity:1; | |
-moz-opacity:1; | |
opacity:1; | |
visibility:visible; | |
-webkit-transform:translateY(0px); | |
-moz-transform:translateY(0px); | |
-ms-transform:translateY(0px); | |
-o-transform:translateY(0px); | |
transform:translateY(0px); | |
} | |
.swatch.error { | |
background-color:#E8D2D2!important; | |
color:#333!important; | |
padding:1em; | |
border-radius:5px; | |
} | |
.swatch.error p { | |
margin:0.7em 0; | |
} | |
.swatch.error p:first-child { | |
margin-top:0; | |
} | |
.swatch.error p:last-child { | |
margin-bottom:0; | |
} | |
.swatch.error code { | |
font-family:monospace; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
jQuery(function(){ | |
jQuery('.swatch :radio').change(function() { | |
var optionIndex = jQuery(this).parents('.swatch').attr('data-option-index'); | |
var optionValue = jQuery(this).val(); | |
var optionsSelector = jQuery('#variant-listbox-option-'+optionIndex).find('option'); | |
optionsSelector.filter(function() { return jQuery(this).text() == optionValue }).parent().val(optionValue).trigger('change'); | |
}); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment