[design] improve group border controls

zombieFox · zombieFox · commit dfadeded979c · 2019-10-22T08:12:38.000+01:00
diff --git a/src/css/group.css b/src/css/group.css
@@ -6,10 +6,6 @@
 width: var(--link-area-width);
 }
 
-.is-group-border .group:not(:first-child):not(:only-child){
- border-top: calc(var(--layout-line-width) * var(--group-border)) solid rgb(var(--theme-accent));
-}
-
 .group:first-child{
 padding-top: calc(var(--layout-space) * var(--layout-padding));
 }
@@ -18,6 +14,10 @@
 padding-bottom: calc(var(--layout-space) * var(--layout-padding));
 }
 
+.is-group-border .group:not(:last-child):not(:only-child){
+ border-bottom: calc(var(--layout-line-width) * var(--group-border)) solid rgb(var(--theme-accent));
+}
+
 .is-group-border .group{
 padding-top: calc(var(--layout-space) * var(--layout-padding));
 padding-bottom: calc(var(--layout-space) * var(--layout-padding));
diff --git a/src/index.html b/src/index.html
@@ -793,6 +793,7 @@ <h1 class="menu-item-header-text">Border</h1>
 <label for="control-group-border">Between groups</label>
 <input id="control-group-border" class="control-group-border mb-0" type="range" min="0" max="60" value="0" tabindex="-1">
 </div>
+ <p class="control-link-area-width-helper form-helper small">Border between groups may not be visible if there is only one group.</p>
 </div>
 </div>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -6,10 +6,6 @@`
`6`	`6`	`width:var(--link-area-width);`
`7`	`7`	`}`
`8`	`8`
`9`		`-.is-group-border .group:not(:first-child):not(:only-child){`
`10`		`-border-top:calc(var(--layout-line-width) *var(--group-border)) solid rgb(var(--theme-accent));`
`11`		`-}`
`12`		`-`
`13`	`9`	`.group:first-child{`
`14`	`10`	`padding-top:calc(var(--layout-space) *var(--layout-padding));`
`15`	`11`	`}`
`@@ -18,6 +14,10 @@`
`18`	`14`	`padding-bottom:calc(var(--layout-space) *var(--layout-padding));`
`19`	`15`	`}`
`20`	`16`
	`17`	`+.is-group-border .group:not(:last-child):not(:only-child){`
	`18`	`+border-bottom:calc(var(--layout-line-width) *var(--group-border)) solid rgb(var(--theme-accent));`
	`19`	`+}`
	`20`	`+`
`21`	`21`	`.is-group-border .group{`
`22`	`22`	`padding-top:calc(var(--layout-space) *var(--layout-padding));`
`23`	`23`	`padding-bottom:calc(var(--layout-space) *var(--layout-padding));`
-Original file line number
+Diff line change
 <labelfor="control-group-border">Between groups</label>
 <inputid="control-group-border" class="control-group-border mb-0" type="range" min="0" max="60" value="0" tabindex="-1">
 </div>
 +<pclass="control-link-area-width-helper form-helper small">Border between groups may not be visible if there is only one group.</p>
 </div>
 </div>
 </div>