Skip to content

Commit 2ed7778

Browse files
mrholekmrholek
committed
docs: update docsearch to v4
1 parent 51e2303 commit 2ed7778

File tree

1 file changed

+161
-167
lines changed

1 file changed

+161
-167
lines changed

‎packages/docs/.vuepress/src/client/styles/_search.scss‎

Lines changed: 161 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -5,170 +5,164 @@
55
* For details, see https://creativecommons.org/licenses/by/3.0/.
66
*/
77

8-
@use "@coreui/coreui/scss/mixins/border-radius" as *;
9-
@use "@coreui/coreui/scss/mixins/box-shadow" as *;
10-
@use "@coreui/coreui/scss/mixins/breakpoints" as *;
11-
@use "@coreui/coreui/scss/mixins/color-mode" as *;
12-
@use "@coreui/coreui/scss/mixins/transition" as *;
13-
@use "@coreui/coreui/scss/vendor/rfs" as *;
14-
@use "@coreui/coreui/scss/variables" as *;
15-
16-
@forward "@docsearch/css/dist/style";
17-
18-
19-
// stylelint-disable selector-class-pattern
20-
:root {
21-
--docsearch-primary-color: var(--cui-primary);
22-
--docsearch-logo-color: var(--cui-primary);
23-
}
24-
25-
@include color-mode(dark, true) {
26-
// From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
27-
// in html[data-theme="dark"] selector
28-
// and are slightly modified for formatting purpose
29-
--docsearch-text-color: #f5f6f7;
30-
--docsearch-container-background: rgba(9, 10, 17, .8);
31-
--docsearch-modal-background: #15172a;
32-
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
33-
--docsearch-searchbox-background: #090a11;
34-
--docsearch-searchbox-focus-background: #000;
35-
--docsearch-hit-color: #bec3c9;
36-
--docsearch-hit-shadow: none;
37-
--docsearch-hit-background: #090a11;
38-
--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
39-
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
40-
--docsearch-footer-background: #1e2136;
41-
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
42-
--docsearch-muted-color: #7f8497;
43-
}
44-
45-
.DocSearch-Container {
46-
--docsearch-muted-color: var(--cui-secondary-color);
47-
--docsearch-hit-shadow: none;
48-
49-
position: fixed;
50-
z-index: 2000; // Make sure to be over all components showcased in the documentation
51-
cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
52-
53-
@include media-breakpoint-up(lg) {
54-
padding-top: 4rem;
55-
}
56-
}
57-
58-
.DocSearch-Button {
59-
--docsearch-searchbox-background: #{rgba($black, .1)};
60-
--docsearch-searchbox-focus-background: #{rgba($black, .25)};
61-
62-
margin: 0;
63-
font-family: $input-font-family;
64-
font-weight: $input-font-weight;
65-
line-height: $input-line-height;
66-
@include font-size($input-font-size);
67-
color: $input-color;
68-
background-color: $input-bg;
69-
background-clip: padding-box;
70-
border: $input-border-width solid $input-border-color;
71-
72-
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
73-
@include border-radius($btn-border-radius);
74-
@include box-shadow($input-box-shadow);
75-
@include transition($input-transition);
76-
77-
&:focus {
78-
color: $input-focus-color;
79-
background-color: $input-focus-bg;
80-
border-color: $input-focus-border-color;
81-
outline: 0;
82-
@if $enable-shadows {
83-
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
84-
} @else {
85-
// Avoid using mixin so we can pass custom focus shadow properly
86-
box-shadow: $input-focus-box-shadow;
87-
}
88-
}
89-
90-
&:hover:not(:disabled):not([readonly])::file-selector-button {
91-
background-color: $form-file-button-hover-bg;
92-
}
93-
94-
@include media-breakpoint-down(md) {
95-
&,
96-
&:hover,
97-
&:focus {
98-
background: transparent;
99-
border: 0;
100-
box-shadow: none;
101-
}
102-
}
103-
104-
.DocSearch-Search-Icon {
105-
opacity: .65;
106-
}
107-
}
108-
109-
.DocSearch-Button-Keys {
110-
min-width: 0;
111-
padding: 0 .25rem;
112-
background: rgba($black, .125);
113-
@include border-radius(.25rem);
114-
}
115-
116-
.DocSearch-Button-Key {
117-
top: 0;
118-
width: auto;
119-
height: 1.5rem;
120-
padding: 0 .125rem;
121-
margin-right: 0;
122-
font-size: .875rem;
123-
background: none;
124-
box-shadow: none;
125-
}
126-
127-
.DocSearch-Commands-Key {
128-
padding-left: 1px;
129-
font-size: .875rem;
130-
background-color: rgba($black, .1);
131-
background-image: none;
132-
box-shadow: none;
133-
}
134-
135-
.DocSearch-Form {
136-
@include border-radius(var(--cui-border-radius));
137-
}
138-
139-
.DocSearch-Hits {
140-
mark {
141-
padding: 0;
142-
}
143-
}
144-
145-
.DocSearch-Hit {
146-
padding-bottom: 0;
147-
@include border-radius(0);
148-
149-
a {
150-
@include border-radius(0);
151-
border: solid var(--cui-border-color);
152-
border-width: 0 1px 1px;
153-
}
154-
155-
&:first-child a {
156-
@include border-top-radius(var(--cui-border-radius));
157-
border-top-width: 1px;
158-
}
159-
&:last-child a {
160-
@include border-bottom-radius(var(--cui-border-radius));
161-
}
162-
}
163-
164-
.DocSearch-Hit-icon {
165-
display: flex;
166-
align-items: center;
167-
}
168-
169-
// Fix --docsearch-logo-color that doesn't do anything
170-
.DocSearch-Logo svg .cls-1,
171-
.DocSearch-Logo svg .cls-2 {
172-
fill: var(--docsearch-logo-color);
173-
}
174-
8+
@use "@coreui/coreui/scss/mixins/border-radius" as *;
9+
@use "@coreui/coreui/scss/mixins/box-shadow" as *;
10+
@use "@coreui/coreui/scss/mixins/breakpoints" as *;
11+
@use "@coreui/coreui/scss/mixins/color-mode" as *;
12+
@use "@coreui/coreui/scss/mixins/transition" as *;
13+
@use "@coreui/coreui/scss/vendor/rfs" as *;
14+
@use "@coreui/coreui/scss/variables" as *;
15+
16+
@forward "@docsearch/css/dist/style";
17+
18+
19+
// stylelint-disable selector-class-pattern
20+
:root {
21+
--docsearch-primary-color: var(--cui-primary);
22+
--docsearch-muted-color: var(--cui-secondary-color);
23+
--docsearch-logo-color: var(--cui-primary);
24+
--docsearch-key-color: var(--cui-secondary-color);
25+
}
26+
27+
@include color-mode(dark, true) {
28+
// From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
29+
// in html[data-theme="dark"] selector
30+
// and are slightly modified for formatting purpose
31+
--docsearch-text-color: #f5f6f7;
32+
--docsearch-container-background: rgba(9, 10, 17, .8);
33+
--docsearch-modal-background: #15172a;
34+
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
35+
--docsearch-searchbox-background: #090a11;
36+
--docsearch-searchbox-focus-background: #000;
37+
--docsearch-hit-color: #bec3c9;
38+
--docsearch-hit-shadow: none;
39+
--docsearch-hit-background: #090a11;
40+
--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
41+
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
42+
--docsearch-footer-background: #1e2136;
43+
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
44+
--docsearch-muted-color: #7f8497;
45+
}
46+
47+
.DocSearch-Container {
48+
--docsearch-hit-shadow: none;
49+
50+
position: fixed;
51+
z-index: 2000; // Make sure to be over all components showcased in the documentation
52+
cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
53+
54+
@include media-breakpoint-up(lg) {
55+
padding-top: 4rem;
56+
}
57+
}
58+
59+
.DocSearch-Button {
60+
--docsearch-searchbox-background: #{rgba($black, .1)};
61+
--docsearch-searchbox-focus-background: #{rgba($black, .25)};
62+
63+
margin: 0;
64+
font-family: $input-font-family;
65+
font-weight: $input-font-weight;
66+
line-height: $input-line-height;
67+
@include font-size($input-font-size);
68+
color: $input-color;
69+
background-color: $input-bg;
70+
background-clip: padding-box;
71+
border: $input-border-width solid $input-border-color;
72+
73+
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
74+
@include border-radius($btn-border-radius);
75+
@include box-shadow($input-box-shadow);
76+
@include transition($input-transition);
77+
78+
&:focus,
79+
&:hover {
80+
color: $input-focus-color;
81+
background-color: $input-focus-bg;
82+
border-color: $input-focus-border-color;
83+
outline: 0;
84+
@if $enable-shadows {
85+
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
86+
} @else {
87+
// Avoid using mixin so we can pass custom focus shadow properly
88+
box-shadow: $input-focus-box-shadow;
89+
}
90+
}
91+
92+
@include media-breakpoint-down(md) {
93+
&,
94+
&:hover,
95+
&:focus {
96+
background: transparent;
97+
border: 0;
98+
box-shadow: none;
99+
}
100+
}
101+
102+
.DocSearch-Search-Icon {
103+
opacity: .65;
104+
}
105+
}
106+
107+
.DocSearch-Button-Keys {
108+
min-width: 0;
109+
padding: 0 .25rem;
110+
background: var(--cui-secondary-bg);
111+
@include border-radius(.25rem);
112+
}
113+
114+
.DocSearch-Button-Key {
115+
width: auto;
116+
padding: 0;
117+
background: none;
118+
border: 0;
119+
box-shadow: none;
120+
121+
&:first-child {
122+
margin-right: 0;
123+
}
124+
}
125+
126+
// .DocSearch-Commands-Key {
127+
// padding-left: 1px;
128+
// font-size: .875rem;
129+
// background-color: rgba($black, .1);
130+
// background-image: none;
131+
// box-shadow: none;
132+
// }
133+
134+
.DocSearch-Hits {
135+
mark {
136+
padding: 0;
137+
}
138+
}
139+
140+
.DocSearch-Hit {
141+
padding-bottom: 0;
142+
@include border-radius(0);
143+
144+
a {
145+
@include border-radius(0);
146+
border: solid var(--cui-border-color);
147+
border-width: 0 1px 1px;
148+
}
149+
150+
&:first-child a {
151+
@include border-top-radius(var(--cui-border-radius));
152+
border-top-width: 1px;
153+
}
154+
&:last-child a {
155+
@include border-bottom-radius(var(--cui-border-radius));
156+
}
157+
}
158+
159+
.DocSearch-Hit-icon {
160+
display: flex;
161+
align-items: center;
162+
}
163+
164+
// Fix --docsearch-logo-color that doesn't do anything
165+
.DocSearch-Logo svg .cls-1,
166+
.DocSearch-Logo svg .cls-2 {
167+
fill: var(--docsearch-logo-color);
168+
}

0 commit comments

Comments
 (0)