Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2ed7778

Browse files
committed
docs: update docsearch to v4
1 parent51e2303 commit2ed7778

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-
@includecolor-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:inset1px1px00#2c2e40,03px8px0#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:inset0-2px00#282d55,inset001px1px#51577d,02px2px0rgba(3,4,9,.3);
40-
--docsearch-footer-background:#1e2136;
41-
--docsearch-footer-shadow:inset01px00rgba(73,76,106,.5),0-4px8px0rgba(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-
@includemedia-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-
@includefont-size($input-font-size);
67-
color:$input-color;
68-
background-color:$input-bg;
69-
background-clip:padding-box;
70-
border:$input-border-widthsolid$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-
@includeborder-radius($btn-border-radius);
74-
@includebox-shadow($input-box-shadow);
75-
@includetransition($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-
@includebox-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-
@includemedia-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-
@includeborder-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-
@includeborder-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-
@includeborder-radius(0);
148-
149-
a {
150-
@includeborder-radius(0);
151-
border:solidvar(--cui-border-color);
152-
border-width:01px1px;
153-
}
154-
155-
&:first-childa {
156-
@includeborder-top-radius(var(--cui-border-radius));
157-
border-top-width:1px;
158-
}
159-
&:last-childa {
160-
@includeborder-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-Logosvg.cls-1,
171-
.DocSearch-Logosvg.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+
@includecolor-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:inset1px1px00#2c2e40,03px8px0#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:inset0-2px00#282d55,inset001px1px#51577d,02px2px0rgba(3,4,9,.3);
42+
--docsearch-footer-background:#1e2136;
43+
--docsearch-footer-shadow:inset01px00rgba(73,76,106,.5),0-4px8px0rgba(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+
@includemedia-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+
@includefont-size($input-font-size);
68+
color:$input-color;
69+
background-color:$input-bg;
70+
background-clip:padding-box;
71+
border:$input-border-widthsolid$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+
@includeborder-radius($btn-border-radius);
75+
@includebox-shadow($input-box-shadow);
76+
@includetransition($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+
@includebox-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+
@includemedia-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+
@includeborder-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+
@includeborder-radius(0);
143+
144+
a {
145+
@includeborder-radius(0);
146+
border:solidvar(--cui-border-color);
147+
border-width:01px1px;
148+
}
149+
150+
&:first-childa {
151+
@includeborder-top-radius(var(--cui-border-radius));
152+
border-top-width:1px;
153+
}
154+
&:last-childa {
155+
@includeborder-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-Logosvg.cls-1,
166+
.DocSearch-Logosvg.cls-2 {
167+
fill:var(--docsearch-logo-color);
168+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp