Lokasi ngalangkungan proxy:   [ UP ]  
[Ngawartoskeun bug]   [Panyetelan cookie]                
Skip to content

Commit 2e6ca3e

Browse files
zombieFoxzombieFox
committed
[refactor] improve controls
1 parent 07483c7 commit 2e6ca3e

8 files changed

Lines changed: 624 additions & 617 deletions

File tree

‎css/base.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,14 @@
103103
--breakpoint-xxl: 1600px;
104104
}
105105

106-
:root.is-bookmarks-style-block {
106+
:root.is-link-style-block {
107107
--link-items-width: 20%;
108108
--link-items-height: 10em;
109109
--url-height: 20%;
110110
--edit-height: 30%;
111111
}
112112

113-
:root.is-bookmarks-style-list {
113+
:root.is-link-style-list {
114114
--link-items-width: 20%;
115115
--link-items-height: 4em;
116116
--url-height: 30%;

‎css/button.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,3 +146,9 @@ button [class*=" button-"]:last-child,
146146
background-color: transparent;
147147
color: transparent;
148148
}
149+
150+
.button-wrap {
151+
padding: 0.5em 0;
152+
position: relative;
153+
width: 100%;
154+
}

‎css/header.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
justify-content: flex-end;
1818
}
1919

20-
.is-bookmarks-show-link .header {
20+
.is-link-show .header {
2121
position: sticky;
2222
top: 0;
2323
left: 0;
@@ -113,12 +113,12 @@
113113
width: var(--header-search-width);
114114
}
115115

116-
.is-header-search-width-auto .header-search {
116+
.is-header-search-width-style-auto .header-search {
117117
flex-grow: 1;
118118
min-width: 10em;
119119
}
120120

121-
.is-header-search-width-custom .header-search {
121+
.is-header-search-width-style-custom .header-search {
122122
width: var(--header-search-width);
123123
}
124124

@@ -136,10 +136,10 @@
136136
.is-header-search-show .header-search,
137137
.is-header-date-show .header-date,
138138
.is-header-clock-show .header-clock,
139-
.is-header-edit-add .header-edit-add,
140-
.is-header-accent .header-accent,
141-
.is-header-greeting .header-greeting,
142-
.is-header-transitional .header-transitional,
139+
.is-header-edit-add-show .header-edit-add,
140+
.is-header-accent-show .header-accent,
141+
.is-header-greeting-show .header-greeting,
142+
.is-header-transitional-show .header-transitional,
143143
.is-menu .header-menu {
144144
display: flex;
145145
}

‎css/link.css‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
z-index: var(--z-index-link);
66
}
77

8-
.is-bookmarks-show-link .link {
8+
.is-link-show .link {
99
display: flex;
1010
}
1111

@@ -29,13 +29,13 @@
2929
width: var(--link-area-width);
3030
}
3131

32-
.is-bookmarks-fit-best .link-area {
32+
.is-link-fit-best .link-area {
3333
display: grid;
3434
grid-auto-rows: 1fr;
3535
grid-gap: calc(var(--gutter) * 2);
3636
}
3737

38-
.is-bookmarks-fit-custom .link-area {
38+
.is-link-fit-custom .link-area {
3939
margin-top: calc(var(--gutter) * -1);
4040
padding-bottom: calc(var(--gutter) * 3);
4141
padding-left: calc(var(--gutter) * 3);
@@ -44,15 +44,15 @@
4444
flex-wrap: wrap;
4545
}
4646

47-
.is-bookmarks-fit-custom.is-link-items-alignment-horizontal-left .link-area {
47+
.is-link-fit-custom.is-link-items-alignment-horizontal-left .link-area {
4848
justify-content: flex-start;
4949
}
5050

51-
.is-bookmarks-fit-custom.is-link-items-alignment-horizontal-center .link-area {
51+
.is-link-fit-custom.is-link-items-alignment-horizontal-center .link-area {
5252
justify-content: center;
5353
}
5454

55-
.is-bookmarks-fit-custom.is-link-items-alignment-horizontal-right .link-area {
55+
.is-link-fit-custom.is-link-items-alignment-horizontal-right .link-area {
5656
justify-content: flex-end;
5757
}
5858

@@ -61,11 +61,11 @@
6161
padding-top: calc(var(--gutter) * 4);
6262
}
6363

64-
.is-bookmarks-fit-best.is-bookmarks-style-block .link-area {
64+
.is-link-fit-best.is-link-style-block .link-area {
6565
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
6666
}
6767

68-
.is-bookmarks-fit-best.is-bookmarks-style-list .link-area {
68+
.is-link-fit-best.is-link-style-list .link-area {
6969
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
7070
}
7171

@@ -89,11 +89,11 @@
8989
transition: none;
9090
}
9191

92-
.is-bookmarks-fit-best .link-item {
92+
.is-link-fit-best .link-item {
9393
height: var(--link-items-height);
9494
}
9595

96-
.is-bookmarks-fit-custom .link-item {
96+
.is-link-fit-custom .link-item {
9797
height: var(--link-items-height);
9898
width: var(--link-items-width);
9999
margin: var(--gutter);
@@ -128,67 +128,67 @@
128128
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
129129
}
130130

131-
.is-bookmarks-style-block .link-panel-front {
131+
.is-link-style-block .link-panel-front {
132132
padding: 1em;
133133
flex-direction: column;
134134
}
135135

136-
.is-bookmarks-style-block.is-link-display-alignment-horizontal-left .link-panel-front {
136+
.is-link-style-block.is-link-display-alignment-horizontal-left .link-panel-front {
137137
align-items: flex-start;
138138
}
139139

140-
.is-bookmarks-style-block.is-link-display-alignment-horizontal-center .link-panel-front {
140+
.is-link-style-block.is-link-display-alignment-horizontal-center .link-panel-front {
141141
align-items: center;
142142
}
143143

144-
.is-bookmarks-style-block.is-link-display-alignment-horizontal-right .link-panel-front {
144+
.is-link-style-block.is-link-display-alignment-horizontal-right .link-panel-front {
145145
align-items: flex-end;
146146
}
147147

148-
.is-bookmarks-style-block.is-link-display-alignment-vertical-top .link-panel-front {
148+
.is-link-style-block.is-link-display-alignment-vertical-top .link-panel-front {
149149
justify-content: flex-start;
150150
}
151151

152-
.is-bookmarks-style-block.is-link-display-alignment-vertical-center .link-panel-front {
152+
.is-link-style-block.is-link-display-alignment-vertical-center .link-panel-front {
153153
justify-content: center;
154154
}
155155

156-
.is-bookmarks-style-block.is-link-display-alignment-vertical-bottom .link-panel-front {
156+
.is-link-style-block.is-link-display-alignment-vertical-bottom .link-panel-front {
157157
justify-content: flex-end;
158158
}
159159

160-
.is-bookmarks-style-list .link-panel-front {
160+
.is-link-style-list .link-panel-front {
161161
padding: 0.5em 1em;
162162
flex-direction: row;
163163
}
164164

165-
.is-bookmarks-style-list.is-link-display-alignment-horizontal-left .link-panel-front {
165+
.is-link-style-list.is-link-display-alignment-horizontal-left .link-panel-front {
166166
justify-content: flex-start;
167167
}
168168

169-
.is-bookmarks-style-list.is-link-display-alignment-horizontal-center .link-panel-front {
169+
.is-link-style-list.is-link-display-alignment-horizontal-center .link-panel-front {
170170
justify-content: center;
171171
}
172172

173-
.is-bookmarks-style-list.is-link-display-alignment-horizontal-right .link-panel-front {
173+
.is-link-style-list.is-link-display-alignment-horizontal-right .link-panel-front {
174174
justify-content: flex-end;
175175
}
176176

177-
.is-bookmarks-style-list.is-link-display-alignment-vertical-top .link-panel-front {
177+
.is-link-style-list.is-link-display-alignment-vertical-top .link-panel-front {
178178
align-items: flex-start;
179179
}
180180

181-
.is-bookmarks-style-list.is-link-display-alignment-vertical-center .link-panel-front {
181+
.is-link-style-list.is-link-display-alignment-vertical-center .link-panel-front {
182182
align-items: center;
183183
}
184184

185-
.is-bookmarks-style-list.is-link-display-alignment-vertical-bottom .link-panel-front {
185+
.is-link-style-list.is-link-display-alignment-vertical-bottom .link-panel-front {
186186
align-items: flex-end;
187187
}
188188

189-
.is-bookmarks-show-url .link-item:focus .link-panel-front,
190-
.is-bookmarks-show-url .link-item:focus-within .link-panel-front,
191-
.is-bookmarks-show-url .link-item:hover .link-panel-front {
189+
.is-link-show-url .link-item:focus .link-panel-front,
190+
.is-link-show-url .link-item:focus-within .link-panel-front,
191+
.is-link-show-url .link-item:hover .link-panel-front {
192192
height: calc(100% - var(--url-height));
193193
}
194194

@@ -270,7 +270,7 @@
270270
transition: all var(--animation-speed-fast) ease-in-out;
271271
}
272272

273-
.is-bookmarks-show-url .link-url {
273+
.is-link-show-url .link-url {
274274
display: flex;
275275
}
276276

@@ -301,11 +301,11 @@
301301
text-overflow: ellipsis;
302302
}
303303

304-
.is-bookmarks-url-dark .link-url-text {
304+
.is-link-url-dark .link-url-text {
305305
color: rgb(var(--black));
306306
}
307307

308-
.is-bookmarks-url-light .link-url-text {
308+
.is-link-url-light .link-url-text {
309309
color: rgb(var(--white));
310310
}
311311

@@ -314,7 +314,7 @@
314314
display: none;
315315
}
316316

317-
.is-bookmarks-show-display .link-display {
317+
.is-link-display-show .link-display {
318318
display: block;
319319
}
320320

@@ -337,21 +337,21 @@
337337
transition: color var(--animation-speed-fast) ease-in-out;
338338
}
339339

340-
.is-bookmarks-style-block .link-display-letter,
341-
.is-bookmarks-style-list .link-display-letter {
340+
.is-link-style-block .link-display-letter,
341+
.is-link-style-list .link-display-letter {
342342
font-size: var(--link-display-letter-size);
343343
}
344344

345-
.is-bookmarks-style-block .link-display-icon,
346-
.is-bookmarks-style-list .link-display-icon {
345+
.is-link-style-block .link-display-icon,
346+
.is-link-style-list .link-display-icon {
347347
font-size: var(--link-display-icon-size);
348348
}
349349

350-
.is-bookmarks-style-block.is-bookmarks-show-name.is-bookmarks-show-display .link-panel-front>*:not(:only-child):not(:last-child) {
350+
.is-link-style-block.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) {
351351
margin-bottom: 0.5em;
352352
}
353353

354-
.is-bookmarks-style-list.is-bookmarks-show-name.is-bookmarks-show-display .link-panel-front>*:not(:only-child):not(:last-child) {
354+
.is-link-style-list.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) {
355355
margin-right: 0.5em
356356
}
357357

@@ -389,7 +389,7 @@
389389
text-align: right;
390390
}
391391

392-
.is-bookmarks-show-name .link-name {
392+
.is-link-name-show .link-name {
393393
display: block;
394394
}
395395

@@ -410,42 +410,42 @@
410410
color: rgb(var(--gray-16));
411411
}
412412

413-
.is-bookmarks-fit-best .link-empty {
413+
.is-link-fit-best .link-empty {
414414
grid-column-start: 1;
415415
grid-column-end: -1;
416416
}
417417

418-
.is-bookmarks-fit-custom .link-empty {
418+
.is-link-fit-custom .link-empty {
419419
margin: 1em;
420420
}
421421

422-
.is-bookmarks-style-list .link-name {
422+
.is-link-style-list .link-name {
423423
white-space: nowrap;
424424
}
425425

426-
.is-bookmarks-edit .link-panel-front,
427-
.is-bookmarks-edit .link-item:hover .link-panel-front,
428-
.is-bookmarks-edit .link-item:focus .link-panel-front {
426+
.is-link-edit .link-panel-front,
427+
.is-link-edit .link-item:hover .link-panel-front,
428+
.is-link-edit .link-item:focus .link-panel-front {
429429
height: calc(100% - var(--edit-height));
430430
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
431431
}
432432

433-
.is-bookmarks-edit.is-bookmarks-show-url .link-item:focus .link-panel-front,
434-
.is-bookmarks-edit.is-bookmarks-show-url .link-item:focus-within .link-panel-front,
435-
.is-bookmarks-edit.is-bookmarks-show-url .link-item:hover .link-panel-front {
433+
.is-link-edit.is-link-show-url .link-item:focus .link-panel-front,
434+
.is-link-edit.is-link-show-url .link-item:focus-within .link-panel-front,
435+
.is-link-edit.is-link-show-url .link-item:hover .link-panel-front {
436436
height: calc(100% - var(--edit-height));
437437
}
438438

439-
.is-bookmarks-edit .link-control {
439+
.is-link-edit .link-control {
440440
height: var(--edit-height);
441441
}
442442

443-
.is-bookmarks-edit .link-item:hover .link-url,
444-
.is-bookmarks-edit .link-item:focus .link-url {
443+
.is-link-edit .link-item:hover .link-url,
444+
.is-link-edit .link-item:focus .link-url {
445445
height: 0;
446446
}
447447

448-
.is-bookmarks-edit .link-control-item {
448+
.is-link-edit .link-control-item {
449449
pointer-events: all;
450450
}
451451

0 commit comments

Comments
 (0)