beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Lowered specificity of button-group selectors

Browse source 
Under the existing flag, the specificity of button-group selectors was lowered even further using :not(:first-child).
This commit is contained in:
Angelos Chalaris 2017-06-05 18:26:25 +03:00
parent 3bf8a25811
commit 568aea95b4
5 changed files with 14 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
dist/mini-default.css vendored
View file

@ -873,8 +873,8 @@ input[type="file"] {
margin: 0.5rem;
}
.button-group button, .button-group [type="button"], .button-group [type="submit"], .button-group [type="reset"],
.button-group .button, .button-group [role="button"] {
.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
.button-group > .button, .button-group > [role="button"] {
margin: 0;
-webkit-box-flex: 1;
max-width: 100%;
@ -885,8 +885,7 @@ input[type="file"] {
border-radius: 0;
}
.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
.button-group * + .button, .button-group * + [role="button"] {
.button-group > :not(:first-child) {
border-left: 1px solid #bdbdbd;
}
@ -896,8 +895,7 @@ input[type="file"] {
-webkit-flex-direction: column;
flex-direction: column;
}
.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
.button-group * + .button, .button-group * + [role="button"] {
.button-group > :not(:first-child) {
border: 0;
border-top: 1px solid #bdbdbd;
}

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View file

@ -1213,3 +1213,4 @@
- Reworked complex `tab` module selectors to utilize the functionality of `:not(:first-of-type)` on `label` elements.
- Updated `tab` selectors to use new, *loose* definitions, effectively making the module `0.04KB` lighter. Not a huge difference, but good enough due to the maintenance impact it has on the module, plus the consistency fixed for `.stacked`.
- Moved `input_control`'s `disabled` styling to low-specificity behind the existing flag, saved another `0.05KB`, which is quite a big change. Parsing should also be faster than before. Good catch, **hugging cat**!
- Lowered specificity of selectors used in `.button-group` for styling `border`s, cut off another `0.02KB`.

14
src/mini/_input_control.scss
View file

@ -331,8 +331,8 @@ a[role="button"], label[role="button"], [role="button"] {
@if $button-group-box-shadow != none {
box-shadow: $button-group-box-shadow;
}
button, [type="button"], [type="submit"], [type="reset"],
.#{$button-class-name}, [role="button"] {
&> button, [type="button"], & > [type="submit"], & > [type="reset"],
& > .#{$button-class-name}, & > [role="button"] {
margin: 0;
// Old syntax
-webkit-box-flex: 1;
@ -359,15 +359,12 @@ a[role="button"], label[role="button"], [role="button"] {
}
@if not $button-group-high-specificity-selectors {
@if $button-group-border-style != 0 {
* {
+ button, + [type="button"], + [type="submit"], + [type="reset"],
+ .#{$button-class-name}, + [role="button"] {
& > :not(:first-child) {
border-left: $button-group-border-style;
}
}
}
}
}
// Responsiveness for button groups
@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
.#{$button-group-name} {
@ -390,9 +387,7 @@ a[role="button"], label[role="button"], [role="button"] {
}
@else {
@if $button-group-border-style !=0 {
* {
+ button, + [type="button"], + [type="submit"], + [type="reset"],
+ .#{$button-class-name}, + [role="button"] {
& > :not(:first-child) {
border: 0;
border-top: $button-group-border-style;
}
@ -401,7 +396,6 @@ a[role="button"], label[role="button"], [role="button"] {
}
}
}
}
// Definitions for checkboxes and radio button elements.
// Note: both elements are hidden by default and use labels to show their input state.
// Hide both input types - accessible (element is not visible, but screen readers read it normally).