diff options
Diffstat (limited to '_sass/components/_search.scss')
-rw-r--r-- | _sass/components/_search.scss | 186 |
1 files changed, 0 insertions, 186 deletions
diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss deleted file mode 100644 index d28dabc..0000000 --- a/_sass/components/_search.scss +++ /dev/null @@ -1,186 +0,0 @@ -.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; - } -} |