removing .neon--disabled and !important styles

aotearoan · Nov 15, 2020 · c175cf2 · c175cf2
1 parent 8856a88
commit c175cf2
Show file tree

Hide file tree

Showing 31 changed files with 112 additions and 80 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of VueJS components with minimal dependencies. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [

diff --git a/src/components/navigation/action-menu/NeonActionMenu.spec.ts b/src/components/navigation/action-menu/NeonActionMenu.spec.ts
@@ -44,7 +44,7 @@ describe('NeonActionMenu', () => {
       propsData: { model, value },
     });
     // when / then
-    expect(wrapper.find('.neon-action-menu__link--disabled.neon--disabled').text()).toEqual(model[1].label);
+    expect(wrapper.find('.neon-action-menu__link--disabled').text()).toEqual(model[1].label);
   });
 
   it('emits click event', () => {

diff --git a/src/components/navigation/action-menu/NeonActionMenu.vue b/src/components/navigation/action-menu/NeonActionMenu.vue
@@ -11,7 +11,6 @@
             {
               'neon-action-menu__link--selected': item.key === value,
               'neon-action-menu__link--disabled': item.disabled,
-              'neon--disabled': item.disabled,
             },
             `neon-action-menu__link--${color}`,
           ]"

diff --git a/src/components/navigation/dropdown-menu/NeonDropdownMenu.vue b/src/components/navigation/dropdown-menu/NeonDropdownMenu.vue
@@ -21,7 +21,7 @@
         class="neon-dropdown-menu__item"
         :class="[
           {
-            'neon--disabled neon-dropdown-menu__item--disabled': item.disabled,
+            'neon-dropdown-menu__item--disabled': item.disabled,
             'neon-dropdown-menu__item--separator-before': item.separatorBefore,
             'neon-dropdown-menu__item--group-title': item.isGroup,
             'neon-dropdown-menu__item--grouped': item.grouped,

diff --git a/src/components/user-input/button/NeonButton.ts b/src/components/user-input/button/NeonButton.ts
@@ -111,7 +111,7 @@ export default class NeonButton extends Vue {
       `neon-button--${this.buttonStyle}`,
       `neon-button--state-${this.state}`,
       {
-        'neon--disabled neon-button--disabled': this.disabled,
+        'neon-button--disabled': this.disabled,
         'neon-button--circular': this.circular,
         'neon-button--no-outline': !this.outline,
         'neon-button--full-width': this.fullWidth,

diff --git a/src/components/user-input/drop-zone/NeonDropZone.vue b/src/components/user-input/drop-zone/NeonDropZone.vue
@@ -4,7 +4,7 @@
     ref="dropzone"
     :class="[
       {
-        'neon--disabled neon-drop-zone--disabled': disabled,
+        'neon-drop-zone--disabled': disabled,
         'neon-square neon-drop-zone--circular': circular,
         'neon-drop-zone--active': active,
       },

diff --git a/src/components/user-input/input/NeonInput.vue b/src/components/user-input/input/NeonInput.vue
@@ -26,7 +26,6 @@
       @blur="onBlur"
       @focus="onFocus"
       class="neon-input__textfield neon-input__text"
-      :class="{ 'neon--disabled': disabled }"
       v-bind="sanitizedAttributes"
       v-on="sanitizedListeners"
     />
@@ -41,7 +40,6 @@
       @input="changeValue"
       @blur="onBlur"
       @focus="onFocus"
-      :class="{ 'neon--disabled': disabled }"
       class="neon-input__textfield neon-input__textarea"
       v-bind="sanitizedAttributes"
     ></textarea>

diff --git a/src/components/user-input/select/NeonSelect.vue b/src/components/user-input/select/NeonSelect.vue
@@ -19,7 +19,7 @@
       <ul class="no-style neon-select__options">
         <li
           v-if="placeholderAsOption"
-          class="neon-select__option neon--disabled neon-select__option--disabled"
+          class="neon-select__option neon-select__option--disabled neon-select__option-placeholder"
           :class="`neon-select__option--${size}`"
         >
           <div class="neon-select__option-container">
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -64,6 +64,10 @@
         }
       }
     }
+
+    &--disabled {
+      cursor: not-allowed;
+    }
   }
 }
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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;
     }
   }
 }