.search {
@include overflow(auto);
} .search–google-custom-search-engine {
.main { padding-top: map-get($spacers, 4); padding-bottom: map-get($spacers, 4); @include media-breakpoint-down(md) { position: absolute; padding: 0; } }
}
.search__header {
margin-top: map-get($spacers, 4); font-size: map-get($base, font-size-h1); font-weight: map-get($base, font-weight-bold); color: $text-color-d; .search--light & { color: $text-color-theme-light-d; } .search--dark & { color: $text-color-theme-dark-d; } @include media-breakpoint-down(md) { display: none; }
}
.search-bar {
@include flexbox(); margin: map-get($spacers, 3) 0 map-get($spacers, 4) 0;
}
.search-box {
position: relative; width: 100%; max-width: 22rem; @include media-breakpoint-down(md) { width: 100%; max-width: none; } & > input { display: inline-block; width: 100%; height: $button-height-lg; padding: 0 2rem; margin: 0; line-height: 1 !important; color: $text-color; background-color: transparent; border: 2px solid $border-color; border-radius: map-get($button, pill-radius); -webkit-appearance: none; /* fix iOS don't display box-shadow properly */ @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function)); @include focus { box-shadow: 0 0 0 2px rgba($border-color, .4); } .search--light & { color: $text-color-theme-light; border-color: $text-color-theme-light; @include focus { box-shadow: 0 0 0 2px rgba($text-color-theme-light, .4); } } .search--dark & { color: $text-color-theme-dark; border-color: $text-color-theme-dark; @include focus { box-shadow: 0 0 0 2px rgba($text-color-theme-dark, .4); } } } & > .search-box__icon-search { color: $text-color-l; .search--light & { color: $text-color-theme-light-l; } .search--dark & { color: $text-color-theme-dark-l; } } & > .search-box__icon-clear { & > a { @include link-colors($text-color); .search--light & { @include link-colors($text-color-theme-light); } .search--dark & { @include link-colors($text-color-theme-dark); } cursor: pointer; } } & > .search-box__icon-search, & > .search-box__icon-clear { position: absolute; width: $button-height-lg; height: $button-height-lg; line-height: $button-height-lg; text-align: center; vertical-align: middle; } &.not-empty > .search-box__icon-clear { display: block; } & > .search-box__icon-clear { top: 0; right: 0; display: none; } & > .search-box__icon-search { top: 0; left: 0; }
}
.search__cancel {
margin-left: map-get($spacers, 2); font-weight: map-get($base, font-weight-bold); white-space: nowrap;
}
.search-result {
margin: map-get($spacers, 4) 0; font-size: map-get($base, font-size-sm); line-height: map-get($base, line-height-sm);
}
.search-result__header {
margin: map-get($spacers, 3) 0 map-get($spacers, 2) 0; font-size: map-get($base, font-size-lg); font-weight: map-get($base, font-weight-bold); color: $text-color-l; text-transform: uppercase; .search--light & { color: $text-color-theme-light-l; } .search--dark & { color: $text-color-theme-dark-l; }
}
.search-result__item {
list-style-type: none; a { padding: map-get($spacers, 1) map-get($spacers, 3); @include transition(none); @include clickable($text-color, transparent, $text-color-3, $main-color-3); .search--light & { @include clickable($text-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light); } .search--dark & { @include clickable($text-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark); } } &.active { a { @include plain() { color: $text-color-3; background-color: $main-color-3; .search--light & { color: $text-color-theme-dark; background-color: $main-color-theme-light; } .search--dark & { color: $text-color-theme-light; background-color: $main-color-theme-dark; } } @include active() { @include transition(map-get($clickable, transition)); } } }
}
// google search .gsc-control-cse {
*, ::before, ::after { box-sizing: initial; }
}