@@ -34,7 +34,7 @@
class="neon-select__option"
:class="[
{
- 'neon--disabled neon-select__option--disabled': option.disabled,
+ 'neon-select__option--disabled': option.disabled,
'neon-select__option--separator-before': option.separatorBefore,
'neon-select__option--selected': multiple ? value.indexOf(option.key) >= 0 : option.key === value,
'neon-select__option--highlighted': option.key === highlightedKey,
diff --git a/src/components/user-input/switch/NeonSwitch.vue b/src/components/user-input/switch/NeonSwitch.vue
index 832c38ca..2b6430b3 100644
--- a/src/components/user-input/switch/NeonSwitch.vue
+++ b/src/components/user-input/switch/NeonSwitch.vue
@@ -6,7 +6,7 @@
`neon-switch--${size}`,
`neon-switch--${color}`,
{
- 'neon-switch--disabled neon--disabled': disabled,
+ 'neon-switch--disabled': disabled,
'neon-switch--checked': value,
},
]"
diff --git a/src/components/user-input/toggle-chip/NeonToggleChip.vue b/src/components/user-input/toggle-chip/NeonToggleChip.vue
index 75279397..547bfadb 100644
--- a/src/components/user-input/toggle-chip/NeonToggleChip.vue
+++ b/src/components/user-input/toggle-chip/NeonToggleChip.vue
@@ -5,7 +5,7 @@
`neon-toggle-chip--${size}`,
`neon-toggle-chip--${color}`,
{
- 'neon-toggle-chip--disabled neon--disabled': disabled,
+ 'neon-toggle-chip--disabled': disabled,
'neon-toggle-chip--checked': value,
'neon-toggle-chip--show-check': showCheck,
},
diff --git a/src/components/user-input/toggle/NeonToggle.vue b/src/components/user-input/toggle/NeonToggle.vue
index 5bd1c708..c59470aa 100644
--- a/src/components/user-input/toggle/NeonToggle.vue
+++ b/src/components/user-input/toggle/NeonToggle.vue
@@ -6,7 +6,7 @@
`neon-toggle--${color}`,
`neon-toggle--${orientation}`,
`neon-toggle--${size}`,
- { 'neon-toggle--disabled neon--disabled': disabled },
+ { 'neon-toggle--disabled': disabled },
]"
role="radiogroup"
>
@@ -15,7 +15,7 @@
:key="option.key"
class="neon-toggle__label no-style"
:class="{
- 'neon-toggle__label--disabled neon--disabled': disabled || option.disabled,
+ 'neon-toggle__label--disabled': disabled || option.disabled,
'neon-toggle__label--checked': option.key === value,
'neon-toggle__label--with-icon': option.icon,
}"
diff --git a/src/sass/_action-menu.scss b/src/sass/_action-menu.scss
index 06c5a0b8..1d7a1582 100644
--- a/src/sass/_action-menu.scss
+++ b/src/sass/_action-menu.scss
@@ -1,5 +1,5 @@
.neon-action-menu {
- &__link {
+ .neon-action-menu__link {
display: flex;
width: calc(100% + #{2 * $base-space});
letter-spacing: $letter-spacing-s;
@@ -19,5 +19,9 @@
&:focus {
outline: none;
}
+
+ &.neon-action-menu__link--disabled {
+ cursor: not-allowed;
+ }
}
}
diff --git a/src/sass/_base-html.scss b/src/sass/_base-html.scss
index c80a1d08..c86d0242 100644
--- a/src/sass/_base-html.scss
+++ b/src/sass/_base-html.scss
@@ -85,11 +85,6 @@ p {
}
}
-.neon--disabled {
- cursor: not-allowed;
- box-shadow: none;
-}
-
.neon-monospaced {
font-family: $font-family-monospaced;
font-variant-ligatures: discretionary-ligatures;
diff --git a/src/sass/_button.scss b/src/sass/_button.scss
index bf3d4f0b..5598c4a4 100644
--- a/src/sass/_button.scss
+++ b/src/sass/_button.scss
@@ -124,6 +124,10 @@
display: flex;
justify-content: center;
}
+
+ &--disabled {
+ cursor: not-allowed;
+ }
}
.neon-button-group {
diff --git a/src/sass/_card.scss b/src/sass/_card.scss
index b3e01b79..7e5627df 100644
--- a/src/sass/_card.scss
+++ b/src/sass/_card.scss
@@ -5,7 +5,6 @@
.neon-card-body,
.neon-card-footer {
margin-bottom: 0;
- border-bottom: none !important;
justify-content: center;
&:first-child {
diff --git a/src/sass/_drop-zone.scss b/src/sass/_drop-zone.scss
index 1fdda3bf..feba13ce 100644
--- a/src/sass/_drop-zone.scss
+++ b/src/sass/_drop-zone.scss
@@ -10,6 +10,7 @@
&--disabled {
opacity: 0.5;
+ cursor: not-allowed;
}
&--state-loading {
diff --git a/src/sass/_dropdown-menu.scss b/src/sass/_dropdown-menu.scss
index a5894110..2da2c0ee 100644
--- a/src/sass/_dropdown-menu.scss
+++ b/src/sass/_dropdown-menu.scss
@@ -64,6 +64,10 @@
}
}
}
+
+ &--disabled {
+ cursor: not-allowed;
+ }
}
}
diff --git a/src/sass/_expansion-panel.scss b/src/sass/_expansion-panel.scss
index 1e3edb25..1ff5f72d 100644
--- a/src/sass/_expansion-panel.scss
+++ b/src/sass/_expansion-panel.scss
@@ -105,7 +105,7 @@
&--disabled {
.neon-expansion-panel__header {
- cursor: not-allowed !important;
+ cursor: not-allowed;
}
}
diff --git a/src/sass/_input.scss b/src/sass/_input.scss
index feae7cb9..ad784055 100644
--- a/src/sass/_input.scss
+++ b/src/sass/_input.scss
@@ -32,7 +32,7 @@
}
&.neon-input--with-icon {
- .neon-icon:not(.neon--disabled) {
+ .neon-icon {
cursor: pointer;
&:active {
diff --git a/src/sass/_select.scss b/src/sass/_select.scss
index 8d750f92..1aaf9108 100644
--- a/src/sass/_select.scss
+++ b/src/sass/_select.scss
@@ -18,6 +18,14 @@
user-select: none;
cursor: pointer;
+ &--disabled {
+ cursor: not-allowed;
+ }
+
+ &-placeholder {
+ cursor: default;
+ }
+
&-container {
display: flex;
flex-direction: row;
diff --git a/src/sass/_switch.scss b/src/sass/_switch.scss
index 8d8b984b..3c00f49e 100644
--- a/src/sass/_switch.scss
+++ b/src/sass/_switch.scss
@@ -193,4 +193,8 @@
@include checkbox-style($checkbox-height);
}
}
+
+ &--disabled {
+ cursor: not-allowed;
+ }
}
diff --git a/src/sass/_toggle-chip.scss b/src/sass/_toggle-chip.scss
index 51b23c49..bfb103b3 100644
--- a/src/sass/_toggle-chip.scss
+++ b/src/sass/_toggle-chip.scss
@@ -94,4 +94,8 @@
&:active:not(.neon-toggle-chip--disabled):not(.neon-toggle-chip--show-check) {
transform: scale(0.95);
}
+
+ &--disabled {
+ cursor: not-allowed;
+ }
}
diff --git a/src/sass/_toggle.scss b/src/sass/_toggle.scss
index 4d134329..c349b4b0 100644
--- a/src/sass/_toggle.scss
+++ b/src/sass/_toggle.scss
@@ -8,7 +8,7 @@
display: none;
}
- label {
+ &__label {
user-select: none;
padding: 2 * $base-space 3 * $base-space;
display: flex;
@@ -19,6 +19,10 @@
&:focus {
outline: none;
}
+
+ &--disabled {
+ cursor: not-allowed;
+ }
}
&--toggle {
@@ -32,4 +36,8 @@
&--horizontal {
flex-direction: row;
}
+
+ &--disabled {
+ cursor: not-allowed;
+ }
}
diff --git a/src/sass/colors/_button.scss b/src/sass/colors/_button.scss
index c559d90e..fb3161d7 100644
--- a/src/sass/colors/_button.scss
+++ b/src/sass/colors/_button.scss
@@ -9,7 +9,7 @@
background: darken($to-color, 1);
}
- &:focus:not(:disabled) {
+ &:focus:not(:disabled):not(.neon-button--no-outline) {
@include box-shadow-outline($to-color);
}
}
@@ -32,7 +32,7 @@
border-color: darken($color, 4);
}
- &:focus:not(:disabled) {
+ &:focus:not(:disabled):not(.neon-button--no-outline) {
@include box-shadow-outline($color);
}
}
@@ -106,6 +106,7 @@
&.neon-button--disabled {
color: $color-disabled-light;
background: $color-disabled-dark;
+ box-shadow: none;
}
}
@@ -126,8 +127,4 @@
color: $color-disabled-light;
}
}
-
- &--no-outline {
- box-shadow: none !important;
- }
}
diff --git a/src/sass/colors/_card.scss b/src/sass/colors/_card.scss
index 0aa73936..57a42e50 100644
--- a/src/sass/colors/_card.scss
+++ b/src/sass/colors/_card.scss
@@ -16,10 +16,16 @@
.neon-card-body,
.neon-card-footer {
background-color: $background-color-card;
+ }
- &:not(:last-child):not(.neon-card-body--full-width) {
- border-bottom: $card-section-border;
- border-bottom-color: $border-color;
+ &.neon-card--vertical {
+ .neon-card-header,
+ .neon-card-body,
+ .neon-card-footer {
+ &:not(:last-child):not(.neon-card-body--full-width) {
+ border-bottom: $card-section-border;
+ border-bottom-color: $border-color;
+ }
}
}
diff --git a/src/sass/colors/_expansion-indicator.scss b/src/sass/colors/_expansion-indicator.scss
deleted file mode 100644
index 96833bcf..00000000
--- a/src/sass/colors/_expansion-indicator.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.neon-expansion-indicator {
-}
diff --git a/src/sass/colors/_icon.scss b/src/sass/colors/_icon.scss
index dcefbb88..75034d60 100644
--- a/src/sass/colors/_icon.scss
+++ b/src/sass/colors/_icon.scss
@@ -11,7 +11,7 @@
}
@each $color, $palette in $functional-colors {
- &--#{$color} {
+ &--#{$color}:not(.neon-icon--disabled) {
@include svg-colors(map-get($palette, $color-icon));
}
}
@@ -22,11 +22,11 @@
&--disabled {
.neon-svg--fill {
- fill: $color-disabled-light !important;
+ fill: $color-disabled-light;
}
.neon-svg--stroke {
- stroke: $color-disabled-light !important;
+ stroke: $color-disabled-light;
}
}
}
diff --git a/src/sass/colors/_switch.scss b/src/sass/colors/_switch.scss
index 294b6992..8d1f0a6e 100644
--- a/src/sass/colors/_switch.scss
+++ b/src/sass/colors/_switch.scss
@@ -16,7 +16,7 @@
@each $color, $palette in $functional-colors {
&.neon-switch--#{$color} {
- &.neon-switch--checked {
+ &.neon-switch--checked:not(.neon-switch--disabled) {
.neon-switch__switch {
background-color: map-get($palette, $color-switch-on);
box-shadow: $inset-shadow;
@@ -36,15 +36,15 @@
&.neon-switch--disabled {
.neon-switch__switch,
.neon-switch__indicator {
- box-shadow: none !important;
+ box-shadow: none;
}
.neon-switch__switch {
- background-color: $color-switch-disabled !important;
+ background-color: $color-switch-disabled;
}
.neon-switch__indicator {
- background-color: $color-switch-indicator-disabled !important;
+ background-color: $color-switch-indicator-disabled;
}
}
}
@@ -66,7 +66,7 @@
@each $color, $palette in $functional-colors {
&.neon-switch--#{$color} {
- &.neon-switch--checked {
+ &.neon-switch--checked:not(.neon-switch--disabled) {
.neon-switch__switch {
border-color: map-get($palette, $color-switch-on);
@@ -84,11 +84,11 @@
&.neon-switch--disabled {
.neon-switch__switch {
- border-color: rgba($color-disabled-light, 0.5) !important;
+ border-color: rgba($color-disabled-light, 0.5);
}
.neon-switch__indicator {
- background-color: rgba($color-disabled-light, 0.5) !important;
+ background-color: rgba($color-disabled-light, 0.5);
}
}
}
diff --git a/src/sass/colors/_toggle-color-mixins.scss b/src/sass/colors/_toggle-color-mixins.scss
index e695a9a8..a863328d 100644
--- a/src/sass/colors/_toggle-color-mixins.scss
+++ b/src/sass/colors/_toggle-color-mixins.scss
@@ -2,7 +2,7 @@
&:not(.neon-toggle--disabled).neon-toggle--#{$color} {
color: rgba($color-text, 0.7);
- label {
+ .neon-toggle__label:not(.neon-toggle__label--disabled) {
border: $border-width $border-style $border-color-toggle;
&:first-child {
@@ -24,8 +24,8 @@
background-color: rgba($toggle-color, 0.125);
}
- &:hover:not(.neon-toggle__label--disabled):not(.neon-toggle__label--checked),
- &:focus:not(.neon-toggle__label--disabled):not(.neon-toggle__label--checked) {
+ &:hover:not(.neon-toggle__label--checked),
+ &:focus:not(.neon-toggle__label--checked) {
background-color: rgba($border-color-toggle, 0.375);
}
}
@@ -52,6 +52,12 @@
.neon-toggle__label--disabled {
color: $color-disabled-light;
+ border-top: $border-width $border-style $color-disabled-dark;
+ border-bottom: $border-width $border-style $color-disabled-dark;
+ }
+
+ .neon-toggle__label:not(.neon-toggle__label--disabled) + .neon-toggle__label--disabled {
+ border-left: $border-width $border-style $border-color-toggle;
}
&.neon-toggle--disabled .neon-toggle__label--checked,
diff --git a/src/sass/colors/_toggle.scss b/src/sass/colors/_toggle.scss
index d46ea854..b128a899 100644
--- a/src/sass/colors/_toggle.scss
+++ b/src/sass/colors/_toggle.scss
@@ -6,54 +6,52 @@
}
&--radio-buttons {
- .neon-toggle__label {
- color: $color-radio-button-label;
- }
-
@each $color, $palette in $functional-colors {
- &.neon-toggle--#{$color} {
+ &.neon-toggle--#{$color}:not(.neon-toggle--disabled) {
$toggle-color: map-get($palette, $color-toggle);
- .neon-toggle__radio-button {
- border: $border-width $border-style $border-color-toggle;
- background: $background-radio-button;
- }
+ .neon-toggle__label:not(.neon-toggle__label--disabled) {
+ .neon-toggle__radio-button {
+ border: $border-width $border-style $border-color-toggle;
+ background: $background-radio-button;
+ }
+
+ color: $color-radio-button-label;
- .neon-toggle__label {
- &:hover:not(neon-toggle__label--disabled),
- &:focus:not(neon-toggle__label--disabled) {
+ &:hover,
+ &:focus {
.neon-toggle__radio-button {
background: rgba($border-color-toggle, 0.375);
}
}
- }
- .neon-toggle__label--checked {
- color: $color-text;
+ &.neon-toggle__label--checked {
+ color: $color-text;
- .neon-toggle__radio-button {
- border: $border-width $border-style $toggle-color;
+ .neon-toggle__radio-button {
+ border: $border-width $border-style $toggle-color;
- &-indicator {
- background-color: $toggle-color;
- box-shadow: $box-shadow;
+ &-indicator {
+ background-color: $toggle-color;
+ box-shadow: $box-shadow;
+ }
}
}
}
+ }
+ }
- &.neon-toggle--disabled,
- .neon-toggle__label--disabled {
- color: $color-disabled-light;
+ &.neon-toggle--disabled .neon-toggle__label,
+ .neon-toggle__label--disabled {
+ color: $color-disabled-light;
- .neon-toggle__radio-button {
- background: $color-disabled-dark;
- color: $color-disabled-light;
- border-color: $color-disabled-dark;
+ .neon-toggle__radio-button {
+ background: $color-disabled-dark;
+ color: $color-disabled-light;
+ border-color: $color-disabled-dark;
- &-indicator {
- background-color: $color-disabled-light;
- }
- }
+ &-indicator {
+ background-color: $color-disabled-light;
}
}
}
diff --git a/src/sass/colors/color-components.scss b/src/sass/colors/color-components.scss
index c5d7345f..d7908280 100644
--- a/src/sass/colors/color-components.scss
+++ b/src/sass/colors/color-components.scss
@@ -19,7 +19,6 @@
@import 'input';
@import 'drop-zone';
@import 'alert';
-@import 'expansion-indicator';
@import 'dropdown';
@import 'dropdown-menu';
@import 'table';