Skip to content

Commit fb30222

Browse files
zombieFoxzombieFox
committed
[design] improve shadows
1 parent 0137d15 commit fb30222

File tree

7 files changed

+61
-19
lines changed

7 files changed

+61
-19
lines changed

‎src/css/auto-suggest.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
border-radius:var(--theme-radius);
1717
overflow-y: auto;
1818
z-index:var(--z-index-auto-suggest);
19-
box-shadow:var(--layout-shadow-large);
19+
box-shadow:var(--layout-shadow-bottom-large);
2020
}
2121

2222
.auto-suggest-list{

‎src/css/form.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1529,7 +1529,7 @@ input[type="range"]:disabled::-moz-range-progress{
15291529
position: absolute;
15301530
width:100%;
15311531
min-width:12em;
1532-
box-shadow:var(--layout-shadow-large);
1532+
box-shadow:var(--layout-shadow-bottom-large);
15331533
z-index:var(--z-index-dropdown);
15341534
overflow: hidden;
15351535
display: none;

‎src/css/link.css‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -183,10 +183,16 @@
183183
background-color:rgb(var(--theme-color-03));
184184
}
185185

186-
.is-link-item-shadow-show .link-item:focus .link-panel-front,
187-
.is-link-item-shadow-show .link-item:focus-within .link-panel-front,
188-
.is-link-item-shadow-show .link-item:hover .link-panel-front{
189-
box-shadow:var(--layout-shadow-large);
186+
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front,
187+
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus-within .link-panel-front,
188+
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:hover .link-panel-front{
189+
box-shadow:var(--layout-shadow-bottom-large);
190+
}
191+
192+
.is-link-item-shadow-show.is-link-orientation-top .link-item:focus .link-panel-front,
193+
.is-link-item-shadow-show.is-link-orientation-top .link-item:focus-within .link-panel-front,
194+
.is-link-item-shadow-show.is-link-orientation-top .link-item:hover .link-panel-front{
195+
box-shadow:var(--layout-shadow-top-large);
190196
}
191197

192198
.is-link-display-alignment-topleft .link-panel-front{
@@ -274,10 +280,16 @@
274280
border-bottom-right-radius:calc(var(--theme-radius) /4);
275281
}
276282

277-
.is-link-item-shadow-show.is-edit .link-panel-front,
278-
.is-link-item-shadow-show.is-edit .link-item:hover .link-panel-front,
279-
.is-link-item-shadow-show.is-edit .link-item:focus .link-panel-front{
280-
box-shadow:var(--layout-shadow-medium);
283+
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-panel-front,
284+
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item:hover .link-panel-front,
285+
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item:focus .link-panel-front{
286+
box-shadow:var(--layout-shadow-bottom-medium);
287+
}
288+
289+
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-panel-front,
290+
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item:hover .link-panel-front,
291+
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item:focus .link-panel-front{
292+
box-shadow:var(--layout-shadow-top-medium);
281293
}
282294

283295
/* link display */

‎src/css/menu.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
width:100%;
2828
max-height:100%;
2929
overflow-y: auto;
30-
box-shadow:var(--layout-shadow-large);
30+
box-shadow:var(--layout-shadow-bottom-large);
3131
pointer-events: all;
3232
transition: background-color var(--layout-timing-extra-fast);
3333
}

‎src/css/modal.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
.modal-wrapper{
2626
background-color:rgb(var(--theme-color-01));
2727
border-radius:var(--theme-radius);
28-
box-shadow:var(--layout-shadow-large);
28+
box-shadow:var(--layout-shadow-bottom-large);
2929
position: relative;
3030
max-height:calc(100vh-2em);
3131
overflow-y: auto;

‎src/css/theme.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454

5555
.is-theme-custom-edit .theme-custom-button{
5656
height:calc(var(--theme-preset-preview-size) -var(--theme-custom-edit-height));
57-
box-shadow:var(--layout-shadow-medium);
57+
box-shadow:var(--layout-shadow-bottom-medium);
5858
}
5959

6060
.is-theme-custom-edit .theme-custom-control{

‎src/css/variables.css‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,42 @@
8686
--layout-timing-medium:var(--layout-duration-06) ease-in-out;
8787
--layout-timing-slow:var(--layout-duration-08) ease-in-out;
8888
--layout-timing-extra-slow:var(--layout-duration-10) ease-in-out;
89-
--layout-shadow-small:000.25emrgba(0,0,0,0.2),
90-
000.5emrgba(0,0,0,0.1);
91-
--layout-shadow-medium:000.5emrgba(0,0,0,0.2),
92-
001emrgba(0,0,0,0.1);
93-
--layout-shadow-large:001emrgba(0,0,0,0.2),
94-
002emrgba(0,0,0,0.1);
89+
--layout-shadow-offset-y:0.02em;
90+
--layout-shadow-blur:0.02em;
91+
--layout-shadow-opacity:0.02;
92+
--layout-shadow-scale-small:1;
93+
--layout-shadow-scale-medium:2;
94+
--layout-shadow-scale-large:3;
95+
--layout-shadow-bottom-small:
96+
0calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-offset-y) *2)) calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-blur) *4)) rgba(0,0,0,calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-opacity) *1))),
97+
0calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-offset-y) *4)) calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-blur) *8)) rgba(0,0,0,calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-opacity) *2))),
98+
0calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-offset-y) *8)) calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-blur) *16)) rgba(0,0,0,calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-opacity) *3))),
99+
0calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-offset-y) *16)) calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-blur) *32)) rgba(0,0,0,calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-opacity) *4)));
100+
--layout-shadow-bottom-medium:
101+
0calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-offset-y) *2)) calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-blur) *4)) rgba(0,0,0,calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-opacity) *1))),
102+
0calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-offset-y) *4)) calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-blur) *8)) rgba(0,0,0,calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-opacity) *2))),
103+
0calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-offset-y) *8)) calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-blur) *16)) rgba(0,0,0,calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-opacity) *3))),
104+
0calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-offset-y) *16)) calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-blur) *32)) rgba(0,0,0,calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-opacity) *4)));
105+
--layout-shadow-bottom-large:
106+
0calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-offset-y) *2)) calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-blur) *4)) rgba(0,0,0,calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-opacity) *1))),
107+
0calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-offset-y) *4)) calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-blur) *8)) rgba(0,0,0,calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-opacity) *2))),
108+
0calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-offset-y) *8)) calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-blur) *16)) rgba(0,0,0,calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-opacity) *3))),
109+
0calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-offset-y) *16)) calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-blur) *32)) rgba(0,0,0,calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-opacity) *4)));
110+
--layout-shadow-top-small:
111+
0calc(var(--layout-shadow-scale-small) *calc(calc(var(--layout-shadow-offset-y) *-1) *2)) calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-blur) *4)) rgba(0,0,0,calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-opacity) *1))),
112+
0calc(var(--layout-shadow-scale-small) *calc(calc(var(--layout-shadow-offset-y) *-1) *4)) calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-blur) *8)) rgba(0,0,0,calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-opacity) *2))),
113+
0calc(var(--layout-shadow-scale-small) *calc(calc(var(--layout-shadow-offset-y) *-1) *8)) calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-blur) *16)) rgba(0,0,0,calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-opacity) *3))),
114+
0calc(var(--layout-shadow-scale-small) *calc(calc(var(--layout-shadow-offset-y) *-1) *16)) calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-blur) *32)) rgba(0,0,0,calc(var(--layout-shadow-scale-small) *calc(var(--layout-shadow-opacity) *4)));
115+
--layout-shadow-top-medium:
116+
0calc(var(--layout-shadow-scale-medium) *calc(calc(var(--layout-shadow-offset-y) *-1) *2)) calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-blur) *4)) rgba(0,0,0,calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-opacity) *1))),
117+
0calc(var(--layout-shadow-scale-medium) *calc(calc(var(--layout-shadow-offset-y) *-1) *4)) calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-blur) *8)) rgba(0,0,0,calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-opacity) *2))),
118+
0calc(var(--layout-shadow-scale-medium) *calc(calc(var(--layout-shadow-offset-y) *-1) *8)) calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-blur) *16)) rgba(0,0,0,calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-opacity) *3))),
119+
0calc(var(--layout-shadow-scale-medium) *calc(calc(var(--layout-shadow-offset-y) *-1) *16)) calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-blur) *32)) rgba(0,0,0,calc(var(--layout-shadow-scale-medium) *calc(var(--layout-shadow-opacity) *4)));
120+
--layout-shadow-top-large:
121+
0calc(var(--layout-shadow-scale-large) *calc(calc(var(--layout-shadow-offset-y) *-1) *2)) calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-blur) *4)) rgba(0,0,0,calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-opacity) *1))),
122+
0calc(var(--layout-shadow-scale-large) *calc(calc(var(--layout-shadow-offset-y) *-1) *4)) calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-blur) *8)) rgba(0,0,0,calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-opacity) *2))),
123+
0calc(var(--layout-shadow-scale-large) *calc(calc(var(--layout-shadow-offset-y) *-1) *8)) calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-blur) *16)) rgba(0,0,0,calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-opacity) *3))),
124+
0calc(var(--layout-shadow-scale-large) *calc(calc(var(--layout-shadow-offset-y) *-1) *16)) calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-blur) *32)) rgba(0,0,0,calc(var(--layout-shadow-scale-large) *calc(var(--layout-shadow-opacity) *4)));
95125
--horizontal-rule:calc(var(--layout-line-width) /2) solid rgb(var(--theme-color-02));
96126
/* background */
97127
--background-color-theme:var(--theme-color-01);

0 commit comments

Comments
(0)