Skip to content

Commit 6c302fb

Browse files
zombieFoxzombieFox
committed
[refactor] [design] improve controls and header padding and border
1 parent d351aa1 commit 6c302fb

File tree

9 files changed

+511
-586
lines changed

9 files changed

+511
-586
lines changed

‎css/base.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@
7171
--header-shade-color: transparent;
7272
--header-shade-opacity: none;
7373
--header-search-width:0%;
74-
--header-shade-padding-top:calc(var(--line-width) *var(--header-shade-padding-multiplier-top));
75-
--header-shade-padding-bottom:calc(var(--line-width) *var(--header-shade-padding-multiplier-bottom));
76-
--header-shade-padding-multiplier-top:4;
77-
--header-shade-padding-multiplier-bottom:4;
74+
--header-padding-top:calc(var(--line-width) *var(--header-padding-multiplier-top));
75+
--header-padding-bottom:calc(var(--line-width) *var(--header-padding-multiplier-bottom));
76+
--header-padding-multiplier-top:4;
77+
--header-padding-multiplier-bottom:4;
7878
--header-border-width-top:calc(var(--line-width) *var(--header-border-width-multiplier-top));
7979
--header-border-width-bottom:calc(var(--line-width) *var(--header-border-width-multiplier-bottom));
8080
--header-border-width-multiplier-top:1;

‎css/header.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,17 +45,17 @@
4545
opacity:var(--header-shade-opacity);
4646
}
4747

48-
.is-header-shade-border-top-show .header-border{
48+
.is-header-border-top-show .header-border{
4949
border-top:var(--header-border-width-top) solid rgb(var(--accent));
5050
}
5151

52-
.is-header-shade-border-bottom-show .header-border{
52+
.is-header-border-bottom-show .header-border{
5353
border-bottom:var(--header-border-width-bottom) solid rgb(var(--accent));
5454
}
5555

5656
.header-area{
57-
padding-top:calc(var(--gutter) *3+var(--header-shade-padding-top));
58-
padding-bottom:calc(var(--gutter) *3+var(--header-shade-padding-bottom));
57+
padding-top:calc(var(--gutter) *3+var(--header-padding-top));
58+
padding-bottom:calc(var(--gutter) *3+var(--header-padding-bottom));
5959
padding-left:calc(var(--gutter) *3);
6060
padding-right:calc(var(--gutter) *3);
6161
position: relative;

‎css/link.css‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
justify-content: flex-end;
5757
}
5858

59-
.is-header-shade-border-bottom-show .link-area,
59+
.is-header-border-bottom-show .link-area,
6060
.is-header-shade-style-always .link-area{
6161
padding-top:calc(var(--gutter) *4);
6262
}
@@ -186,9 +186,9 @@
186186
align-items: flex-end;
187187
}
188188

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{
189+
.is-link-url-show .link-item:focus .link-panel-front,
190+
.is-link-url-show .link-item:focus-within .link-panel-front,
191+
.is-link-url-show .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-link-show-url .link-url{
273+
.is-link-url-show .link-url{
274274
display: flex;
275275
}
276276

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

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

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

@@ -430,9 +430,9 @@
430430
box-shadow:02px4px0rgba(0,0,0,0.4);
431431
}
432432

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

‎index.html‎

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -571,6 +571,50 @@ <h1 class="menu-item-header-text">Buttons</h1>
571571
</div>
572572
</div>
573573
</div>
574+
<divclass="menu-item">
575+
<divclass="menu-item-header">
576+
<h1class="menu-item-header-text">Padding</h1>
577+
</div>
578+
<divclass="menu-item-form">
579+
<divclass="input-wrap">
580+
<labelfor="control-header-padding-top">Top padding</label>
581+
<inputid="control-header-padding-top" class="control-header-padding-top" type="range" min="0" max="50" value="0" tabindex="1">
582+
</div>
583+
<hr>
584+
<divclass="input-wrap">
585+
<labelfor="control-header-padding-bottom">Bottom padding</label>
586+
<inputid="control-header-padding-bottom" class="control-header-padding-bottom" type="range" min="0" max="50" value="0" tabindex="1">
587+
</div>
588+
</div>
589+
</div>
590+
<divclass="menu-item">
591+
<divclass="menu-item-header">
592+
<h1class="menu-item-header-text">Border</h1>
593+
</div>
594+
<divclass="menu-item-form">
595+
<divclass="input-wrap">
596+
<inputid="control-header-border-top-show" class="control-header-border-top-show" type="checkbox" value="always" tabindex="1">
597+
<labelfor="control-header-border-top-show">Top border</label>
598+
</div>
599+
<divclass="form-indent">
600+
<divclass="input-wrap">
601+
<labelfor="control-header-border-top-width">Border width</label>
602+
<inputid="control-header-border-top-width" class="control-header-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
603+
</div>
604+
</div>
605+
<hr>
606+
<divclass="input-wrap">
607+
<inputid="control-header-border-bottom-show" class="control-header-border-bottom-show" type="checkbox" value="always" tabindex="1">
608+
<labelfor="control-header-border-bottom-show">Bottom border</label>
609+
</div>
610+
<divclass="form-indent">
611+
<divclass="input-wrap">
612+
<labelfor="control-header-border-bottom-width">Border width</label>
613+
<inputid="control-header-border-bottom-width" class="control-header-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
614+
</div>
615+
</div>
616+
</div>
617+
</div>
574618
<divclass="menu-item">
575619
<divclass="menu-item-header">
576620
<h1class="menu-item-header-text">Shade</h1>
@@ -597,36 +641,6 @@ <h1 class="menu-item-header-text">Shade</h1>
597641
<labelfor="control-header-shade-opacity">Opacity</label>
598642
<inputid="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
599643
</div>
600-
<divclass="input-wrap">
601-
<labelfor="control-header-shade-padding-top">Top padding</label>
602-
<inputid="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="0" max="50" value="0" tabindex="1">
603-
</div>
604-
<divclass="input-wrap">
605-
<labelfor="control-header-shade-padding-bottom">Bottom padding</label>
606-
<inputid="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom mb-0" type="range" min="0" max="50" value="0" tabindex="1">
607-
</div>
608-
<hr>
609-
<divclass="input-wrap">
610-
<inputid="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
611-
<labelfor="control-header-shade-border-top-show">Top border</label>
612-
</div>
613-
<divclass="form-indent">
614-
<divclass="input-wrap">
615-
<labelfor="control-header-shade-border-top-width">Border width</label>
616-
<inputid="control-header-shade-border-top-width" class="control-header-shade-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
617-
</div>
618-
</div>
619-
<hr>
620-
<divclass="input-wrap">
621-
<inputid="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
622-
<labelfor="control-header-shade-border-bottom-show">Bottom border</label>
623-
</div>
624-
<divclass="form-indent">
625-
<divclass="input-wrap">
626-
<labelfor="control-header-shade-border-bottom-width">Border width</label>
627-
<inputid="control-header-shade-border-bottom-width" class="control-header-shade-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
628-
</div>
629-
</div>
630644
</div>
631645
</div>
632646
</div>

0 commit comments

Comments
(0)