diff options
author | Karl Hallsby <karl@hallsby.com> | 2020-09-27 14:31:36 -0500 |
---|---|---|
committer | Karl Hallsby <karl@hallsby.com> | 2020-09-27 14:32:00 -0500 |
commit | 61b34a5f260db45575d448d766ea29c0fb273ed3 (patch) | |
tree | 4ac84fa917df0c69fb0fc6d587750514e7d0d813 /_sass/components/_search.scss | |
parent | c3cafe3c3817f52d4c588b5b0d6e71e07e06145e (diff) |
Add jekyll-text-theme YAML files
Diffstat (limited to '_sass/components/_search.scss')
-rw-r--r-- | _sass/components/_search.scss | 186 |
1 files changed, 186 insertions, 0 deletions
diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss new file mode 100644 index 0000000..d28dabc --- /dev/null +++ b/_sass/components/_search.scss @@ -0,0 +1,186 @@ +.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; + } +} |