Last active
September 17, 2019 13:29
-
-
Save boldsupport/da9edae079fe7f1822a94be893b98442 to your computer and use it in GitHub Desktop.
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
/* | |
------------------------------------ WARNING ------------------------------------ | |
This file will be overwritten and should not be edited directly. | |
In order to edit custom CSS for Bold Product Options you should: | |
- Log into your Shopify Admin Panel | |
- Go to Apps --> Installed --> Product Options | |
- Go to Display Settings | |
------------------------------------ WARNING ------------------------------------ | |
bold-options.css version 6 | |
*/ | |
.bold_options { | |
margin-bottom: 20px; | |
} | |
.bold_options:empty { | |
display:none; | |
} | |
.bold_option_product_info { | |
text-align: center; | |
margin: 0 0 25px; | |
} | |
.bold_option_product_info_title { | |
font-size: 18px; | |
font-weight: bold; | |
} | |
.bold_option_product_info_description { | |
text-align: left; | |
} | |
.bold_option_product_info_image img { | |
max-height: 150px; | |
} | |
.bold_option_set { | |
} | |
.bold_option:not(:empty) { | |
padding-bottom: 5px; | |
margin-bottom: 5px; | |
} | |
.bold_option_product_title { | |
font-size: 16px; | |
font-weight: bold; | |
margin-bottom: 20px; | |
} | |
.bold_option_title, | |
.bold_option_value_price { | |
font-weight: normal; | |
} | |
.bold_option_dropdown .bold_option_element { | |
margin-left: 5px; | |
} | |
.bold_option_value { | |
margin-right: 15px; | |
} | |
.bold_option_value_price, | |
.bold_out_of_stock_message { | |
display: inline; | |
font-size: 80%; | |
} | |
.bold_option_out_of_stock .bold_option_title, | |
.bold_option_out_of_stock .bold_option_value_title, | |
.bold_option_out_of_stock .bold_option_value_price, | |
.bold_option_dropdown_out_of_stock, | |
.bold_option_out_of_stock .bold_option_value_element { | |
opacity: .5; | |
} | |
.bold_option_swatch .bold_option_element, | |
.bold_option_radio .bold_option_element, | |
.bold_option_checkboxmulti .bold_option_element, | |
.bold_option_dropdownmulti .bold_option_element, | |
.bold_option_textarea .bold_option_element { | |
display: block; | |
} | |
.bold_option_textboxmulti .bold_option_value { | |
display: block; | |
margin-left: 0; | |
} | |
.bold_option_displaytext p:last-child { | |
margin-bottom: 0; | |
} | |
.bold_option_displaytext p { | |
white-space:pre-wrap; | |
} | |
.bold_option_element, | |
.bold_option_element input, | |
.bold_option_element select, | |
.bold_option_element textarea { | |
height: auto; | |
} | |
.bold_option_element input[type=radio] { | |
-webkit-appearance: radio; | |
width: auto; | |
} | |
.bold_help_text { | |
font-style: italic; | |
color: #848484; | |
display: block; | |
} | |
/* Bold Tooltips */ | |
.bold_tooltip { | |
position: relative; | |
display: inline-block; | |
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAACR0lEQVR4Ae2Vz0obURTGf4mTiLEbSZhQW/sGRREi8UGEZtGNJOQFWhLzANq6tUjAdqvYQDZF6FsUg6uqLYrdqGmhSvNnM90cDsjMZWbu0ILg7y7Pd893c+79MjxwL0izTIsuR/QZM6bPEV3WKJMmMc/Y5AeeYV3whjmscdlhjBeyRrQpYMFLfuJFXH0qxCLDhzsNfrNLlRJ5smQpUKLGHjd3NG0cIpLjM56ur6wyZdBVOUaVHJCLdnptzx9e4YSoGwxQCxxCea/yY54ThXlO0UGFXq1Kv+ASlSKHuu8FmHH5pad3iUNRf8U1eYzs6OwDh6OnDGKBoVS3janVWL2G2AbQ1Og9IZBNfZiOlUGGE6lvEEBa/3NWwcoAalI/J4WPZU3tFLZMcytdlvDRktIuSdiXLk18dKVUJQl16dLBx5GUSiShLF16+OhLKQ/WlwyuKK7wIRkgm8hgUrPw3w10RIV/NSK9ZFuDkEvWZ1qzNgh5pmtS2ktk8FEUDfOPuyFnbfCIW/Og01xoli0NdEBnpAjgrX7NMlYGWb5JfZ1A5jQLDSuDllSHzGKgLZIB87ENFvWTuYWRgsbtlCJxeMx32XnJDGao6CkPKcZo39N9K4TQVukpC0RhUU/v8Y5QHA5UPqBJBjOQpcVQ9Z+YIAI51AKPE2pMG2JVl4cp7ZkiIo4OStLNPnXKuEwyiUuZOh1JrQ6HCWJR4Rov4rpkBQvybDMKbT5kixmsecoG58bmZ6wzS2LSLNGkQ48rRoy4okeHBiVS3AMe+Asl4wJqmp6/FwAAAABJRU5ErkJggg==); | |
background-repeat:no-repeat; | |
width:16px; height:16px; | |
background-size:16px 16px; | |
top:3px; | |
} | |
.bold_option_swatch_title,.bold_tooltip > :first-child { | |
position: absolute; | |
width: 140px; | |
color: #fff; | |
background: #000; | |
height: 1px; | |
line-height: 1px; | |
padding: 0; | |
text-align: center; | |
opacity: 0; | |
border-radius: 4px; | |
transition: all 0.4s; | |
left: 50%; | |
transform: translateX(-50%); | |
z-index: 999; | |
bottom: 30px; | |
margin-bottom:-.5em; | |
margin-top:0; | |
} | |
.bold_option_swatch_title span { | |
height: 1px; | |
line-height: 1px; | |
} | |
.bold_option_swatch_title:after,.bold_tooltip > :first-child:after { | |
content: ''; | |
position: absolute; | |
left: 50%; | |
margin-left: -4px; | |
width: 0; height: 0; | |
border-right: 4px solid transparent; | |
border-left: 4px solid transparent; | |
border-top: 4px solid #000; | |
top: 100%; | |
} | |
.bold_option_value:hover .bold_option_swatch_title,.bold_tooltip:hover > :first-child { | |
opacity: 0.8; | |
margin-bottom:0; | |
height: auto; | |
line-height: 1em; | |
padding: 1em | |
} | |
.bold_option_value:hover .bold_option_swatch_title span { | |
height: 1em; | |
line-height: 1em; | |
} | |
.bold_tooltip > *:not(a), .bold_option_swatch .bold_option_value .bold_option_swatch_title .bold_option_value_title { | |
pointer-events: none; | |
} | |
.bold_option_title .bold_tooltip img { | |
height: inherit; | |
} | |
.bold_option_swatch .bold_option_value:hover .bold_option_swatch_title .bold_option_value_title, | |
.bold_option_swatch .bold_option_value:hover .bold_option_swatch_title .bold_option_value_title img{ | |
height: initial; | |
} | |
.bold_option_swatch .bold_option_value .bold_option_swatch_title .bold_option_value_title img { | |
height: 1px; | |
} | |
.bold_option label { | |
display: inline; | |
} | |
.bold_option input[name="qty[]"] { | |
width: 50px; | |
padding: 5px; | |
height: auto; | |
} | |
.bold_option input[type="color"] { | |
box-sizing:initial; | |
width:50px; | |
padding: 5px; | |
height: 25px; | |
} | |
/* default styles for the priced options total */ | |
.bold_option_total > div { | |
padding: 5px 12px; | |
background: #fff; | |
text-align: center; | |
} | |
.bold_option_total span { | |
color: #AD0000; | |
font-weight: bold; | |
display: inline-block; | |
margin: 0 5px; | |
} | |
/* custom styles for the priced options total */ | |
.bold_option_total > div { | |
} | |
.bold_option_total span { | |
} | |
/* Swatches styles */ | |
.bold_option_swatch .bold_option_value { | |
margin-bottom:5px; | |
} | |
.bold_option_swatch .bold_option_value_element { | |
box-sizing:border-box; | |
box-shadow:0 0 2px 1px rgba(0,0,0,.2); | |
border:3px solid #fff; | |
} | |
.bold_swatch_selected.bold_option_value_element { | |
box-shadow:0 0 0 1px #B3B3B3; | |
border:3px solid #B3B3B3; | |
} | |
.bold_option_swatch .bold_option_value { | |
vertical-align: top; | |
} | |
.bold_option_value_swatch { | |
box-sizing:border-box; | |
position:relative; | |
border:1px solid #fff; | |
} | |
.bold_option_swatch .bold_option_value { | |
position:relative; | |
display:inline-block; | |
margin-right:5px; | |
} | |
.bold_option_swatch .bold_option_value_element { | |
display:inline-block; | |
} | |
.bold_option_swatch_title { | |
top:auto; | |
bottom:100%; | |
font-size:80%; | |
line-height:1.5; | |
} | |
.bold_option_swatch_title:after { | |
top:100%; | |
bottom:auto; | |
border-top: 4px solid #000; | |
border-bottom: 4px solid transparent; | |
} | |
.bold_option_value:hover .bold_option_swatch_title { | |
margin-bottom:.5em; | |
} | |
.bold_option_swatch_title > * { | |
display:block; | |
} | |
.bold_option_swatch .bold_option_value_quantity { | |
display: block; | |
width: 38px; | |
height: 0px; | |
transition: all 0.32s; | |
} | |
.bold_option_swatch span.bold_option_value_quantity { | |
height: inherit; | |
margin-bottom: 3px; | |
transition: all 0.3s; | |
} | |
.bold_option_swatch input[type='checkbox'] { | |
display: none; | |
} | |
.bold_option_value_swatch > span { | |
display:block; | |
width:100%; height:100%; | |
left:0; top:0; | |
position:absolute; | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: 100%; | |
} | |
.bold_option_value_swatch > span:nth-child(2) { width:50%; left:50%; } | |
.bold_option_value_swatch > span:nth-child(3) { top:50%; height:50%; } | |
.bold_option_value_swatch > span:nth-child(4) { left:50%; top:50%; width:50%; height:50%; } | |
.bold_option_value_swatch { | |
display:block; | |
} | |
.bold_option_value_swatch { width:32px; height:32px; } | |
/* errors */ | |
.bold_option_error, | |
.bold_option_error .bold_option_title, | |
.bold_error_message { | |
color: red; | |
} | |
.bold_option_error .bold_option_value_title.bold_option_not_error { | |
color: initial; | |
} | |
.bold_error_message { | |
display: block; | |
} | |
/* utility classes */ | |
.bold_hidden { | |
display:none !important; | |
} | |
/* ajax loading animation */ | |
.bold_spinner { | |
margin: 0 auto; | |
width: 90px; | |
text-align: center; | |
} | |
.bold_spinner > div { | |
width: 15px; | |
height: 15px; | |
margin:0 5px; | |
background-color: rgba(0,0,0,.25); | |
border-radius: 100%; | |
display: inline-block; | |
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; | |
animation: sk-bouncedelay 1.4s infinite ease-in-out both; | |
} | |
.bold_spinner :nth-child(1) { | |
-webkit-animation-delay: -0.32s; | |
animation-delay: -0.32s; | |
} | |
.bold_spinner :nth-child(2) { | |
-webkit-animation-delay: -0.16s; | |
animation-delay: -0.16s; | |
} | |
@-webkit-keyframes sk-bouncedelay { | |
0%, 80%, 100% { -webkit-transform: scale(0) } | |
40% { -webkit-transform: scale(1.0) } | |
} | |
@keyframes sk-bouncedelay { | |
0%, 80%, 100% { | |
-webkit-transform: scale(0); | |
transform: scale(0); | |
} 40% { | |
-webkit-transform: scale(1.0); | |
transform: scale(1.0); | |
} | |
} | |
/* custom css */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The file doesnt seem to override current Css? What am I doing wrong?