Skip to content

Commit deacbd0

Browse files
ArgoZhangArgoZhang
committed
style: memorial mode
1 parent e837415 commit deacbd0

2 files changed

Lines changed: 128 additions & 120 deletions

File tree

‎src/BootstrapBlazor/wwwroot/scss/meilisearch.scss‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
11
.bb-g-search {
2-
--bb-global-search-input-margin-left: .5rem;
3-
--bb-global-search-border-color: rgba(255,255,255,.5);
4-
--bb-global-search-color: rgba(255,255,255,.5);
5-
--bb-global-search-border-hover-color: rgba(255,255,255);
6-
--bb-global-search-padding: 0.25rem 0.75rem;
7-
--bb-global-search-width: 168px;
8-
display: flex;
9-
align-items: center;
10-
color: var(--bb-global-search-color);
11-
border: var(--bs-border-width) solid var(--bb-global-search-border-color);
12-
border-radius: var(--bs-border-radius);
13-
padding: var(--bb-global-search-padding);
14-
width: var(--bb-global-search-width);
15-
transition: border-color .3s linear;
2+
--bb-global-search-input-margin-left: .5rem;
3+
--bb-global-search-border-color: rgba(255, 255, 255, .5);
4+
--bb-global-search-color: rgba(255, 255, 255, .5);
5+
--bb-global-search-border-hover-color: rgba(255, 255, 255);
6+
--bb-global-search-padding: 0.25rem 0.75rem;
7+
--bb-global-search-width: 168px;
8+
display: flex;
9+
align-items: center;
10+
color: var(--bb-global-search-color);
11+
border: var(--bs-border-width) solid var(--bb-global-search-border-color);
12+
border-radius: var(--bs-border-radius);
13+
padding: var(--bb-global-search-padding);
14+
width: var(--bb-global-search-width);
15+
transition: border-color .3s linear;
1616

17-
&:hover {
18-
border: var(--bs-border-width) solid var(--bb-global-search-border-hover-color);
19-
}
17+
&:hover {
18+
border: var(--bs-border-width) solid var(--bb-global-search-border-hover-color);
19+
}
2020

21-
> input {
22-
width: 100%;
23-
background-color: transparent;
24-
border: none;
25-
line-height: 1.5;
26-
padding: 0;
27-
margin-left: var(--bb-global-search-input-margin-left);
28-
cursor: pointer;
21+
> input {
22+
width: 100%;
23+
background-color: transparent;
24+
border: none;
25+
line-height: 1.5;
26+
padding: 0;
27+
margin-left: var(--bb-global-search-input-margin-left);
28+
cursor: pointer;
2929

30-
&::placeholder {
31-
color: var(--bb-global-search-border-color);
32-
}
30+
&::placeholder {
31+
color: var(--bb-global-search-border-color);
3332
}
33+
}
3434

35-
.search-dialog-icon {
36-
cursor: pointer;
37-
font-size: 18px;
38-
}
35+
.search-dialog-icon {
36+
cursor: pointer;
37+
font-size: 18px;
38+
}
3939
}
4040

4141
.search-dialog-mask {
42-
display: none;
42+
display: none;
4343
}

‎src/BootstrapBlazor/wwwroot/scss/root.scss‎

Lines changed: 95 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,170 @@
11
:root {
2-
--bb-primary-color: #{$bb-primary-color};
3-
--bb-primary-color-rgb: #{$bb-primary-color-rgb};
4-
--bb-border-focus-color: #{$bb-border-focus-color};
5-
--bb-border-hover-color: #{$bb-border-hover-color};
6-
--bb-height: #{$bb-height};
7-
--bb-dropdown-max-height: #{$bb-dropdown-max-height};
8-
--bb-shadow: #{$bb-shadow};
9-
--bb-hover-shadow: #{$bb-hover-shadow};
10-
--bb-font-size: #{$bb-font-size};
2+
--bb-primary-color: #{$bb-primary-color};
3+
--bb-primary-color-rgb: #{$bb-primary-color-rgb};
4+
--bb-border-focus-color: #{$bb-border-focus-color};
5+
--bb-border-hover-color: #{$bb-border-hover-color};
6+
--bb-height: #{$bb-height};
7+
--bb-dropdown-max-height: #{$bb-dropdown-max-height};
8+
--bb-shadow: #{$bb-shadow};
9+
--bb-hover-shadow: #{$bb-hover-shadow};
10+
--bb-font-size: #{$bb-font-size};
1111
}
1212

1313
body,
1414
.form-control,
1515
.dropdown-menu,
1616
.form-select,
1717
.input-group-text {
18-
font-size: var(--bb-font-size);
18+
font-size: var(--bb-font-size);
1919
}
2020

2121
a,
2222
[for] {
23-
cursor: pointer;
23+
cursor: pointer;
2424
}
2525

2626
a, a:hover, a:focus {
27-
text-decoration: none;
27+
text-decoration: none;
2828
}
2929

3030
[disabled],
3131
:disabled,
3232
.disabled,
3333
.disabled > * {
34-
cursor: not-allowed !important;
34+
cursor: not-allowed !important;
3535
}
3636

3737
.disabled .range-separator,
3838
:disabled {
39-
background-color: var(--bs-secondary-bg);
40-
opacity: 1;
39+
background-color: var(--bs-secondary-bg);
40+
opacity: 1;
4141
}
4242

4343
:focus-visible,
4444
:focus {
45-
outline: none;
45+
outline: none;
4646
}
4747

4848
@mixin direction($var, $child) {
49-
> .datetime-picker:not(:#{$child}-child) .form-control,
50-
> .select:not(:#{$child}-child) .form-control,
51-
> .switch:not(:#{$child}-child),
52-
> .multi-select:not(:#{$child}-child) .dropdown-toggle,
53-
> [data-bs-toggle]:not(:#{$child}-child) > .form-control,
54-
> .auto-complete:not(:#{$child}-child) .form-control {
55-
border-top-#{$var}-radius: 0;
56-
border-bottom-#{$var}-radius: 0;
57-
}
49+
> .datetime-picker:not(:#{$child}-child) .form-control,
50+
> .select:not(:#{$child}-child) .form-control,
51+
> .switch:not(:#{$child}-child),
52+
> .multi-select:not(:#{$child}-child) .dropdown-toggle,
53+
> [data-bs-toggle]:not(:#{$child}-child) > .form-control,
54+
> .auto-complete:not(:#{$child}-child) .form-control {
55+
border-top-#{$var}-radius: 0;
56+
border-bottom-#{$var}-radius: 0;
57+
}
5858
}
5959

6060
.input-group {
61-
@include direction(right,last);
62-
@include direction(left,first)
61+
@include direction(right, last);
62+
@include direction(left, first)
6363
}
6464

6565
.btn-group {
66-
@include direction(right,last);
67-
@include direction(left,first)
66+
@include direction(right, last);
67+
@include direction(left, first)
6868
}
6969

7070
.popover.popover-table-column-toolbox {
71-
--bs-popover-min-width: 120px;
72-
--bs-popover-header-font-size: 12px;
73-
--bs-popover-header-padding-x: 0.5rem;
74-
--bs-popover-header-padding-y: 0.5rem;
75-
--bs-popover-body-padding-x: 0.5rem;
76-
--bs-popover-body-padding-y: 0.5rem;
71+
--bs-popover-min-width: 120px;
72+
--bs-popover-header-font-size: 12px;
73+
--bs-popover-header-padding-x: 0.5rem;
74+
--bs-popover-header-padding-y: 0.5rem;
75+
--bs-popover-body-padding-x: 0.5rem;
76+
--bs-popover-body-padding-y: 0.5rem;
7777
}
7878

7979
::view-transition-old(*) {
80-
mix-blend-mode: normal;
81-
animation: none;
82-
z-index: 1;
80+
mix-blend-mode: normal;
81+
animation: none;
82+
z-index: 1;
8383
}
8484

8585
::view-transition-new(*) {
86-
mix-blend-mode: normal;
87-
animation: clip .3s ease-in-out;
88-
z-index: 9999;
86+
mix-blend-mode: normal;
87+
animation: clip .3s ease-in-out;
88+
z-index: 9999;
8989
}
9090

9191
@keyframes clip {
92-
from {
93-
clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
94-
}
92+
from {
93+
clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
94+
}
9595

96-
to {
97-
clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
98-
}
96+
to {
97+
clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
98+
}
9999
}
100100

101101
[data-bs-theme='dark'] {
102-
&::view-transition-old(*) {
103-
animation: clip2 .3s ease-in-out;
104-
z-index: 9999;
105-
}
102+
&::view-transition-old(*) {
103+
animation: clip2 .3s ease-in-out;
104+
z-index: 9999;
105+
}
106106

107-
&::view-transition-new(*) {
108-
animation: none;
109-
z-index: 1;
110-
}
107+
&::view-transition-new(*) {
108+
animation: none;
109+
z-index: 1;
110+
}
111111
}
112112

113113
@keyframes clip2 {
114-
from {
115-
clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
116-
}
114+
from {
115+
clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
116+
}
117+
118+
to {
119+
clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
120+
}
121+
}
117122

118-
to {
119-
clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
120-
}
123+
[data-bs-theme='memorial'] {
124+
&:root {
125+
--bs-body-bg: #000;
126+
--bs-body-color: #b5b5c3;
127+
filter: grayscale(100%);
128+
}
121129
}
122130

123131
body:before {
124-
content: "extraExtraSmall";
125-
display: none;
132+
content: "extraExtraSmall";
133+
display: none;
126134
}
127135

128-
@media (min-width:375px) {
129-
body:before {
130-
content: "extraSmall";
131-
}
136+
@media (min-width: 375px) {
137+
body:before {
138+
content: "extraSmall";
139+
}
132140
}
133141

134-
@media (min-width:576px) {
135-
body:before {
136-
content: "small";
137-
}
142+
@media (min-width: 576px) {
143+
body:before {
144+
content: "small";
145+
}
138146
}
139147

140-
@media (min-width:768px) {
141-
body:before {
142-
content: "medium";
143-
}
148+
@media (min-width: 768px) {
149+
body:before {
150+
content: "medium";
151+
}
144152
}
145153

146-
@media (min-width:992px) {
147-
body:before {
148-
content: "large";
149-
}
154+
@media (min-width: 992px) {
155+
body:before {
156+
content: "large";
157+
}
150158
}
151159

152-
@media (min-width:1200px) {
153-
body:before {
154-
content: "extraLarge";
155-
}
160+
@media (min-width: 1200px) {
161+
body:before {
162+
content: "extraLarge";
163+
}
156164
}
157165

158-
@media (min-width:1400px) {
159-
body:before {
160-
content: "extraExtraLarge";
161-
}
166+
@media (min-width: 1400px) {
167+
body:before {
168+
content: "extraExtraLarge";
169+
}
162170
}

0 commit comments

Comments
 (0)