Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Timber Tutorial | Cart and Search Styles
.header-cart-btn {
@extend .btn;
position: relative;
font-size: 19px;
line-height: 19px;
padding-top: 12px;
padding-bottom: 10px;
border: 0 none;
margin-left: $gutter/2;
vertical-align: top;
background-color: $headerButtonAndSearch;
color: color-control($headerButtonAndSearch);
@include at-query ($max, $medium) {
display: none;
}
&:hover,
&:focus {
color: color-control($headerButtonAndSearch);
background-color: darken($headerButtonAndSearch, 5%);
}
}
#cartCount {
display: block;
position: absolute;
top: -5px;
right: -5px;
text-align: center;
background-color: $colorAccent;
color: $headerBackground;
font-weight: 900;
font-size: 13px;
padding: 2px 4px;
min-width: 20px;
height: 20px;
line-height: 20px;
border-radius: 20px;
&.hidden-count {
display: none;
}
}
.search-bar {
position: relative;
max-width: 60%;
width: 100%;
margin: 0 auto $gutter;
@include at-query ($max, $medium) {
display: block;
max-width: 100%;
margin-bottom: $gutter/2;
}
input[type="text"],
input[type="search"] {
width: 100%;
margin-bottom: 0;
padding: 11px 45px 11px 10px; // 45 is same as submit button width
font: {
family: $specialFontStackBold;
size: 19px;
};
line-height: 1;
}
input[type="submit"] {
position: absolute;
top: 0;
right: 0;
width: 45px;
text-indent: -9999px;
margin: 0;
cursor: pointer;
border: 0 none;
background: {
color: transparent;
repeat: no-repeat;
position: center center;
image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNCN0I3QjciIGQ9Ik0xOS42LDE3LjhsLTUuOS01LjljMC45LTEuMiwxLjQtMi43LDEuNC00LjNDMTUsMy40LDExLjYsMCw3LjUsMFMwLDMuNCwwLDcuNUMwLDExLjYsMy40LDE1LDcuNSwxNQ0KCWMxLjYsMCwzLjEtMC41LDQuMy0xLjRsNS45LDUuOWMwLjUsMC41LDEuNCwwLjYsMS45LDAuMUMyMC4xLDE5LjIsMjAuMSwxOC4zLDE5LjYsMTcuOHogTTIuNSw3LjVjMC0yLjgsMi4yLTUsNS01YzIuOCwwLDUsMi4yLDUsNQ0KCXMtMi4yLDUtNSw1QzQuNywxMi41LDIuNSwxMC4zLDIuNSw3LjV6Ii8+DQo8L3N2Zz4NCg==");
// image: url({{ 'search.svg' | asset_url }});
}
}
.site-header & {
display: none;
margin-bottom: 0;
@include at-query ($min, $large) {
display: inline-block;
}
input[type="text"],
input[type="search"] {
border: 0 none;
background-color: $headerButtonAndSearch;
color: color-control($headerButtonAndSearch);
@include transition(background-color 0.2s ease-out);
&:hover, &:focus {
background-color: darken($headerButtonAndSearch, 5%);
@include transition(background-color 0.05s ease-in);
}
&:focus {
outline: 0;
}
}
}
}
.site-header input::-webkit-input-placeholder {
color: color-control($headerButtonAndSearch);
}
.site-header input::-moz-placeholder {
color: color-control($headerButtonAndSearch);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment