js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make button selectors less specific

Browse Source
This commit is contained in:
Cory LaViska
2017-09-02 00:20:13 -04:00
parent d7c2103eea
commit df784b6914
2 changed files with 94 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/shoelace.css vendored
View File

File diff suppressed because one or more lines are too long

129
source/css/buttons.css
View File

@@ -27,9 +27,6 @@ button,
&:hover {
color: var(--button-color);
}
&:hover:not(:disabled, .disabled) {
text-decoration: none;
background-color: color(var(--button-bg-color) shade(10%));
border-color: color(var(--button-bg-color) shade(10%));
@@ -37,21 +34,25 @@ button,
border-bottom-color: color(var(--button-bg-color) shade(20%));
}
&:active:not(:disabled, .disabled),
&.active:not(:disabled, .disabled) {
&:active,
&.active {
background-color: color(var(--button-bg-color) shade(10%));
border-color: color(var(--button-bg-color) shade(10%));
border-top-color: color(var(--button-bg-color) shade(20%));
border-bottom-color: color(var(--button-bg-color) shade(10%));
}
&:focus:not(:disabled, .disabled) {
&:focus {
outline: none;
box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color) alpha(50%));
}
&:disabled,
&.disabled {
background-color: color(var(--button-bg-color) shade(10%));
border-top-color: color(var(--button-bg-color) tint(10%));
border-bottom-color: color(var(--button-bg-color) shade(10%));
box-shadow: none;
text-decoration: none;
opacity: .5;
cursor: not-allowed;
@@ -90,7 +91,7 @@ button,
border-top-color: color(var(--button-bg-color-secondary) tint(10%));
border-bottom-color: color(var(--button-bg-color-secondary) shade(10%));
&:hover:not(:disabled, .disabled) {
&:hover {
color: var(--button-color-secondary);
background-color: color(var(--button-bg-color-secondary) shade(10%));
border-color: color(var(--button-bg-color-secondary) shade(10%));
@@ -98,18 +99,26 @@ button,
border-bottom-color: color(var(--button-bg-color-secondary) shade(20%));
}
&:active:not(:disabled, .disabled),
&.active:not(:disabled, .disabled) {
&:active,
&.active {
background-color: color(var(--button-bg-color-secondary) shade(10%));
border-color: color(var(--button-bg-color-secondary) shade(10%));
border-top-color: color(var(--button-bg-color-secondary) shade(20%));
border-bottom-color: color(var(--button-bg-color-secondary) shade(10%));
}
&:focus:not(:disabled, .disabled) {
&:focus {
outline: none;
box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-secondary) alpha(50%));
}
&:disabled,
&.disabled {
background-color: color(var(--button-bg-color-secondary) shade(10%));
border-top-color: color(var(--button-bg-color-secondary) tint(10%));
border-bottom-color: color(var(--button-bg-color-secondary) shade(10%));
box-shadow: none;
}
}
&.button-success {
@@ -119,7 +128,7 @@ button,
border-top-color: color(var(--button-bg-color-success) tint(10%));
border-bottom-color: color(var(--button-bg-color-success) shade(10%));
&:hover:not(:disabled, .disabled) {
&:hover {
color: var(--button-color-success);
background-color: color(var(--button-bg-color-success) shade(10%));
border-color: color(var(--button-bg-color-success) shade(10%));
@@ -127,18 +136,26 @@ button,
border-bottom-color: color(var(--button-bg-color-success) shade(20%));
}
&:active:not(:disabled, .disabled),
&.active:not(:disabled, .disabled) {
&:active,
&.active {
background-color: color(var(--button-bg-color-success) shade(10%));
border-color: color(var(--button-bg-color-success) shade(10%));
border-top-color: color(var(--button-bg-color-success) shade(20%));
border-bottom-color: color(var(--button-bg-color-success) shade(10%));
}
&:focus:not(:disabled, .disabled) {
&:focus {
outline: none;
box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-success) alpha(50%));
}
&:disabled,
&.disabled {
background-color: color(var(--button-bg-color-success) shade(10%));
border-top-color: color(var(--button-bg-color-success) tint(10%));
border-bottom-color: color(var(--button-bg-color-success) shade(10%));
box-shadow: none;
}
}
&.button-info {
@@ -148,7 +165,7 @@ button,
border-top-color: color(var(--button-bg-color-info) tint(10%));
border-bottom-color: color(var(--button-bg-color-info) shade(10%));
&:hover:not(:disabled, .disabled) {
&:hover {
color: var(--button-color-info);
background-color: color(var(--button-bg-color-info) shade(10%));
border-color: color(var(--button-bg-color-info) shade(10%));
@@ -156,18 +173,26 @@ button,
border-bottom-color: color(var(--button-bg-color-info) shade(20%));
}
&:active:not(:disabled, .disabled),
&.active:not(:disabled, .disabled) {
&:active,
&.active {
background-color: color(var(--button-bg-color-info) shade(10%));
border-color: color(var(--button-bg-color-info) shade(10%));
border-top-color: color(var(--button-bg-color-info) shade(20%));
border-bottom-color: color(var(--button-bg-color-info) shade(10%));
}
&:focus:not(:disabled, .disabled) {
&:focus {
outline: none;
box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-info) alpha(50%));
}
&:disabled,
&.disabled {
background-color: color(var(--button-bg-color-info) shade(10%));
border-top-color: color(var(--button-bg-color-info) tint(10%));
border-bottom-color: color(var(--button-bg-color-info) shade(10%));
box-shadow: none;
}
}
&.button-warning {
@@ -177,7 +202,7 @@ button,
border-top-color: color(var(--button-bg-color-warning) tint(10%));
border-bottom-color: color(var(--button-bg-color-warning) shade(10%));
&:hover:not(:disabled, .disabled) {
&:hover {
color: var(--button-color-warning);
background-color: color(var(--button-bg-color-warning) shade(10%));
border-color: color(var(--button-bg-color-warning) shade(10%));
@@ -185,18 +210,26 @@ button,
border-bottom-color: color(var(--button-bg-color-warning) shade(20%));
}
&:active:not(:disabled, .disabled),
&.active:not(:disabled, .disabled) {
&:active,
&.active {
background-color: color(var(--button-bg-color-warning) shade(10%));
border-color: color(var(--button-bg-color-warning) shade(10%));
border-top-color: color(var(--button-bg-color-warning) shade(20%));
border-bottom-color: color(var(--button-bg-color-warning) shade(10%));
}
&:focus:not(:disabled, .disabled) {
&:focus {
outline: none;
box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-warning) alpha(50%));
}
&:disabled,
&.disabled {
background-color: color(var(--button-bg-color-warning) shade(10%));
border-top-color: color(var(--button-bg-color-warning) tint(10%));
border-bottom-color: color(var(--button-bg-color-warning) shade(10%));
box-shadow: none;
}
}
&.button-danger {
@@ -206,7 +239,7 @@ button,
border-top-color: color(var(--button-bg-color-danger) tint(10%));
border-bottom-color: color(var(--button-bg-color-danger) shade(10%));
&:hover:not(:disabled, .disabled) {
&:hover {
color: var(--button-color-danger);
background-color: color(var(--button-bg-color-danger) shade(10%));
border-color: color(var(--button-bg-color-danger) shade(10%));
@@ -214,18 +247,26 @@ button,
border-bottom-color: color(var(--button-bg-color-danger) shade(20%));
}
&:active:not(:disabled, .disabled),
&.active:not(:disabled, .disabled) {
&:active,
&.active {
background-color: color(var(--button-bg-color-danger) shade(10%));
border-color: color(var(--button-bg-color-danger) shade(10%));
border-top-color: color(var(--button-bg-color-danger) shade(20%));
border-bottom-color: color(var(--button-bg-color-danger) shade(10%));
}
&:focus:not(:disabled, .disabled) {
&:focus {
outline: none;
box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-danger) alpha(50%));
}
&:disabled,
&.disabled {
background-color: color(var(--button-bg-color-danger) shade(10%));
border-top-color: color(var(--button-bg-color-danger) tint(10%));
border-bottom-color: color(var(--button-bg-color-danger) shade(10%));
box-shadow: none;
}
}
&.button-light {
@@ -235,7 +276,7 @@ button,
border-top-color: color(var(--button-bg-color-light) tint(10%));
border-bottom-color: color(var(--button-bg-color-light) shade(10%));
&:hover:not(:disabled, .disabled) {
&:hover {
color: var(--button-color-light);
background-color: color(var(--button-bg-color-light) shade(10%));
border-color: color(var(--button-bg-color-light) shade(10%));
@@ -243,18 +284,26 @@ button,
border-bottom-color: color(var(--button-bg-color-light) shade(20%));
}
&:active:not(:disabled, .disabled),
&.active:not(:disabled, .disabled) {
&:active,
&.active {
background-color: color(var(--button-bg-color-light) shade(10%));
border-color: color(var(--button-bg-color-light) shade(10%));
border-top-color: color(var(--button-bg-color-light) shade(20%));
border-bottom-color: color(var(--button-bg-color-light) shade(10%));
}
&:focus:not(:disabled, .disabled) {
&:focus {
outline: none;
box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-light) alpha(50%));
}
&:disabled,
&.disabled {
background-color: color(var(--button-bg-color-light) shade(10%));
border-top-color: color(var(--button-bg-color-light) tint(10%));
border-bottom-color: color(var(--button-bg-color-light) shade(10%));
box-shadow: none;
}
}
&.button-dark {
@@ -264,7 +313,7 @@ button,
border-top-color: color(var(--button-bg-color-dark) tint(10%));
border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
&:hover:not(:disabled, .disabled) {
&:hover {
color: var(--button-color-dark);
background-color: color(var(--button-bg-color-dark) shade(10%));
border-color: color(var(--button-bg-color-dark) shade(10%));
@@ -272,18 +321,26 @@ button,
border-bottom-color: color(var(--button-bg-color-dark) shade(20%));
}
&:active:not(:disabled, .disabled),
&.active:not(:disabled, .disabled) {
&:active,
&.active {
background-color: color(var(--button-bg-color-dark) shade(10%));
border-color: color(var(--button-bg-color-dark) shade(10%));
border-top-color: color(var(--button-bg-color-dark) shade(20%));
border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
}
&:focus:not(:disabled, .disabled) {
&:focus {
outline: none;
box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-dark) alpha(50%));
}
&:disabled,
&.disabled {
background-color: color(var(--button-bg-color-dark) shade(10%));
border-top-color: color(var(--button-bg-color-dark) tint(10%));
border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
box-shadow: none;
}
}
/* Block buttons */
@@ -301,8 +358,8 @@ button,
box-shadow: none;
}
&.button-link:hover:not(:disabled, .disabled),
&.button-link:focus:not(:disabled, .disabled) {
&.button-link:hover,
&.button-link:focus {
border-color: transparent;
background-color: transparent;
color: var(--link-color-hover);