• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1.search {
2  @include overflow(auto);
3
4}
5.search--google-custom-search-engine {
6  .main {
7    padding-top: map-get($spacers, 4);
8    padding-bottom: map-get($spacers, 4);
9    @include media-breakpoint-down(md) {
10      position: absolute;
11      padding: 0;
12    }
13  }
14}
15
16.search__header {
17  margin-top: map-get($spacers, 4);
18  font-size: map-get($base, font-size-h1);
19  font-weight: map-get($base, font-weight-bold);
20  color: $text-color-d;
21  .search--light & {
22    color: $text-color-theme-light-d;
23  }
24  .search--dark & {
25    color: $text-color-theme-dark-d;
26  }
27  @include media-breakpoint-down(md) {
28    display: none;
29  }
30}
31
32.search-bar {
33  @include flexbox();
34  margin: map-get($spacers, 3) 0 map-get($spacers, 4) 0;
35}
36
37.search-box {
38  position: relative;
39  width: 100%;
40  max-width: 22rem;
41  @include media-breakpoint-down(md) {
42    width: 100%;
43    max-width: none;
44  }
45  & > input {
46    display: inline-block;
47    width: 100%;
48    height: $button-height-lg;
49    padding: 0 2rem;
50    margin: 0;
51    line-height: 1 !important;
52    color: $text-color;
53    background-color: transparent;
54    border: 2px solid $border-color;
55    border-radius: map-get($button, pill-radius);
56    -webkit-appearance: none; /* fix iOS don't display box-shadow properly */
57    @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
58    @include focus {
59      box-shadow: 0 0 0 2px rgba($border-color, .4);
60    }
61    .search--light & {
62      color: $text-color-theme-light;
63      border-color: $text-color-theme-light;
64      @include focus {
65        box-shadow: 0 0 0 2px rgba($text-color-theme-light, .4);
66      }
67    }
68    .search--dark & {
69      color: $text-color-theme-dark;
70      border-color: $text-color-theme-dark;
71      @include focus {
72        box-shadow: 0 0 0 2px rgba($text-color-theme-dark, .4);
73      }
74    }
75  }
76  & > .search-box__icon-search {
77    color: $text-color-l;
78    .search--light & {
79      color: $text-color-theme-light-l;
80    }
81    .search--dark & {
82      color: $text-color-theme-dark-l;
83    }
84  }
85  & > .search-box__icon-clear {
86    & > a {
87      @include link-colors($text-color);
88      .search--light & {
89        @include link-colors($text-color-theme-light);
90      }
91      .search--dark & {
92        @include link-colors($text-color-theme-dark);
93      }
94      cursor: pointer;
95    }
96  }
97  & > .search-box__icon-search, & > .search-box__icon-clear {
98    position: absolute;
99    width: $button-height-lg;
100    height: $button-height-lg;
101    line-height: $button-height-lg;
102    text-align: center;
103    vertical-align: middle;
104  }
105  &.not-empty > .search-box__icon-clear {
106    display: block;
107  }
108  & > .search-box__icon-clear {
109    top: 0;
110    right: 0;
111    display: none;
112  }
113  & > .search-box__icon-search {
114    top: 0;
115    left: 0;
116  }
117}
118
119.search__cancel {
120  margin-left: map-get($spacers, 2);
121  font-weight: map-get($base, font-weight-bold);
122  white-space: nowrap;
123}
124
125.search-result {
126  margin: map-get($spacers, 4) 0;
127  font-size: map-get($base, font-size-sm);
128  line-height: map-get($base, line-height-sm);
129}
130
131.search-result__header {
132  margin: map-get($spacers, 3) 0 map-get($spacers, 2) 0;
133  font-size: map-get($base, font-size-lg);
134  font-weight: map-get($base, font-weight-bold);
135  color: $text-color-l;
136  text-transform: uppercase;
137  .search--light & {
138    color: $text-color-theme-light-l;
139  }
140  .search--dark & {
141    color: $text-color-theme-dark-l;
142  }
143}
144
145.search-result__item {
146  list-style-type: none;
147  a {
148    padding: map-get($spacers, 1) map-get($spacers, 3);
149    @include transition(none);
150    @include clickable($text-color, transparent, $text-color-3, $main-color-3);
151    .search--light & {
152      @include clickable($text-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light);
153    }
154    .search--dark & {
155      @include clickable($text-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark);
156    }
157  }
158  &.active {
159    a {
160      @include plain() {
161        color: $text-color-3;
162        background-color: $main-color-3;
163        .search--light & {
164          color: $text-color-theme-dark;
165          background-color: $main-color-theme-light;
166        }
167        .search--dark & {
168          color: $text-color-theme-light;
169          background-color: $main-color-theme-dark;
170        }
171      }
172      @include active() {
173        @include transition(map-get($clickable, transition));
174      }
175    }
176  }
177}
178
179// google search
180.gsc-control-cse {
181  *,
182  ::before,
183  ::after {
184    box-sizing: initial;
185  }
186}