@transferwise/neptune-css 12.1.3 → 12.3.1

package/src/less/forms/checkbox-radio.less

@@ -41,19 +41,19 @@
     color: var(--color-background-screen);
   }
 
-  &:hover,
+  &:not(.disabled, :disabled):hover,
   input[type='checkbox']:hover + &,
   .checkbox:hover & {
     border-color: var(--color-interactive-secondary);
   }
 
-  &:focus,
-  &.focus,
-  &:focus:hover,
-  &.focus:hover,
+  &:not(.disabled, :disabled):focus,
+  &:not(.disabled, :disabled).focus,
+  &:not(.disabled, :disabled):focus:hover,
+  &:not(.disabled, :disabled).focus:hover,
   input[type='checkbox']:focus + &,
-  &:active,
-  &.active,
+  &:not(.disabled, :disabled):active,
+  &:not(.disabled, :disabled).active,
   input[type='checkbox']:active + & {
     border-color: var(--color-interactive-secondary);
     outline: none;
@@ -72,29 +72,18 @@
 
   &[checked]:hover,
   &.checked:hover,
-  input[type='checkbox']:not(:disabled):checked:hover + & {
+  input[type='checkbox']:not(.disabled, :disabled):checked:hover + & {
     border-color: var(--color-interactive-accent-hover) !important;
     background-color: var(--color-interactive-accent-hover);
   }
 
   &[checked]:active,
   &.checked:active,
-  input[type='checkbox']:not(:disabled):checked:active + & {
+  input[type='checkbox']:not(.disabled, :disabled):checked:active + & {
     border-color: var(--color-interactive-accent-active) !important;
     background-color: var(--color-interactive-accent-active);
   }
 
-  &[disabled],
-  input[type='checkbox']:disabled + & {
-    background-color: var(--color-background-neutral);
-    border-color: var(--color-interactive-disabled) !important;
-    cursor: @cursor-disabled;
-
-    .tw-checkbox-check {
-      color: var(--color-content-disabled);
-    }
-  }
-
   .checkbox.has-error &,
   &.has-error {
     border-color: var(--color-interactive-negative) !important;
@@ -103,23 +92,19 @@
     &.checked {
       background-color: var(--color-interactive-negative);
     }
-
-    &[disabled] {
-      background-color: var(--color-background-neutral);
-    }
   }
 
-  .checkbox.has-error input[type='checkbox']:checked + & {
+  .checkbox.has-error input[type='checkbox']:not(.disabled, :disabled):checked + & {
     border-color: var(--color-interactive-negative) !important;
     background-color: var(--color-interactive-negative);
   }
 
-  .checkbox.has-error input[type='checkbox']:checked:hover + & {
+  .checkbox.has-error input[type='checkbox']:not(.disabled, :disabled):checked:hover + & {
     border-color: var(--color-interactive-negative-hover) !important;
     background-color: var(--color-interactive-negative-hover);
   }
 
-  .checkbox.has-error input[type='checkbox']:checked:active + & {
+  .checkbox.has-error input[type='checkbox']:not(.disabled, :disabled):checked:active + & {
     border-color: var(--color-interactive-negative-active) !important;
     background-color: var(--color-interactive-negative-active);
   }
@@ -147,15 +132,15 @@
     transition: all 0.15s ease-in-out;
   }
 
-  .radio:hover &,
-  &:hover {
+  .radio:not(.disabled, :disabled):hover &,
+  &:not(.disabled, :disabled):hover {
     border-color: var(--color-interactive-secondary-hover);
   }
 
-  &:focus,
-  &.focus,
-  &:active,
-  &.active {
+  &:not(.disabled, :disabled):focus,
+  &:not(.disabled, :disabled).focus,
+  &:not(.disabled, :disabled):active,
+  &:not(.disabled, :disabled).active {
     border-color: var(--color-interactive-secondary-active);
     outline: none;
   }
@@ -178,17 +163,6 @@
     }
   }
 
-  &[disabled],
-  &.disabled {
-    background-color: var(--color-background-neutral);
-    border-color: var(--color-interactive-disabled) !important;
-    cursor: @cursor-disabled;
-
-    .tw-radio-check {
-      background-color: var(--color-interactive-disabled);
-    }
-  }
-
   .radio.has-error &,
   &.has-error {
     border-color: var(--color-interactive-negative) !important;
@@ -197,18 +171,6 @@
     &.checked .tw-radio-check {
       background-color: var(--color-interactive-negative);
     }
-
-    &[disabled] .tw-radio-check {
-      background-color: var(--color-interactive-disabled);
-    }
-  }
-}
-
-.checkbox {
-  &.disabled label,
-  &.disabled label:hover {
-    border-color: var(--color-interactive-disabled);
-    color: var(--color-content-disabled) !important;
   }
 }
 
@@ -277,8 +239,4 @@
   .np-radio__avatar {
     pointer-events: none;
   }
-
-  &[disabled] .np-radio__avatar {
-    opacity: 0.5;
-  }
 }

package/src/less/input-groups.less

@@ -49,12 +49,12 @@
 
     border-color: var(--color-interactive-secondary);
 
-    :hover& {
+    :not(.disabled, :disabled):hover& {
       border-color: var(--color-interactive-secondary-hover);
     }
 
-    &:active,
-    &:focus {
+    &:not(.disabled, :disabled):active,
+    &:not(.disabled, :disabled):focus {
       border-color: var(--color-interactive-accent-active);
     }
   }
@@ -77,17 +77,6 @@
       border-color: var(--color-interactive-accent-active);
     }
   }
-
-  &.disabled {
-    .input-group-addon {
-      background-color: var(--color-background-neutral);
-      border-color: var(--color-interactive-disabled);
-    }
-
-    &:active .input-group-addon {
-      border-color: var(--color-interactive-secondary-active);
-    }
-  }
 }
 
 // Sizing options

package/src/less/list-group.less

@@ -86,8 +86,8 @@ a.list-group-item {
   }
 
   // Hover state
-  &:hover,
-  &:focus {
+  &:not(.disabled, :disabled):hover,
+  &:not(.disabled, :disabled):focus {
     text-decoration: none;
     color: var(--color-content-accent-hover);
     background-color: var(--color-background-neutral);
@@ -106,20 +106,6 @@ a.list-group-item {
     }
   }
 
-  // Disabled state
-  &.disabled {
-    color: var(--color-content-disabled);
-
-    .list-group-item-heading,
-    .list-group-item-text,
-    b,
-    strong,
-    .circle,
-    .icon {
-      color: var(--color-content-disabled);
-    }
-  }
-
   // Active class on item itself, not parent
   &.active {
     z-index: 2; // Place active items above their siblings for proper border styling

package/src/less/mixins/_buttons.less

@@ -16,61 +16,40 @@
   transition: all 0.15s ease-in-out;
   transition-property: color, border-color, background-color;
 
-  &:focus,
-  &.focus {
+  &:not(.disabled, :disabled):focus,
+  &:not(.disabled, :disabled).focus {
     color: @color-hover;
     background-color: @background-hover;
     border-color: @border-hover;
   }
 
-  &:hover {
+  &:not(.disabled, :disabled):hover {
     color: @color-hover;
     background-color: @background-hover;
     border-color: @border-hover;
   }
 
-  &:active,
-  &.active,
+  &:not(.disabled, :disabled):active,
+  &:not(.disabled, :disabled).active,
   .open > .dropdown-toggle& {
     color: @color-active;
     background-color: @background-active;
     border-color: @border-active;
 
-    &:hover,
-    &:focus,
-    &.focus {
+    &:not(.disabled, :disabled):hover,
+    &:not(.disabled, :disabled):focus,
+    &:not(.disabled, :disabled).focus {
       color: @color-active;
       background-color: @background-active;
       border-color: @border-active;
     }
   }
 
-  &.active,
+  &:not(.disabled, :disabled).active,
   .open > .dropdown-toggle& {
     background-image: none;
   }
 
-  &.disabled,
-  &[disabled],
-  fieldset[disabled] & {
-    &,
-    &:hover,
-    &:focus,
-    &.focus,
-    &:active,
-    &.active {
-      background-color: var(--color-background-neutral);
-      border-color: var(--color-interactive-disabled);
-      color: var(--color-content-disabled);
-
-      &.btn-priority-2 {
-        background-color: @background;
-        border-color: var(--color-interactive-disabled);
-        color: var(--color-content-disabled);
-      }
-    }
-  }
-
   .badge {
     color: @background;
     background-color: @color;

package/src/less/mixins/_forms.less

@@ -28,11 +28,11 @@
   // Set the border and box shadow on specific inputs to match
   .form-control,
   .btn-input,
-  .btn-input:focus,
-  .btn-input:hover,
+  .btn-input:not(.disabled, :disabled):focus,
+  .btn-input:not(.disabled, :disabled):hover,
   .input-group-addon,
   .alert {
-    border-color: @border-color;
+    border-color: @border-color !important;
   }
 
   &:active,
@@ -49,7 +49,7 @@
     }
   }
 
-  &:hover {
+  &:not(.disabled, :disabled):hover {
     &.radio label,
     &.checkbox label,
     .btn-input,
@@ -66,12 +66,12 @@
   .radio,
   &.checkbox {
     > label {
-      &:not(.disabled) {
+      &:not(.disabled, :disabled) {
         border-color: @border-color;
         color: var(--color-content-primary);
       }
 
-      &:hover,
+      &:not(.disabled, :disabled):hover,
       &:focus-within {
         border-color: @border-hover !important;
 
@@ -102,7 +102,7 @@
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
 .form-control-focus(@color: var(--color-interactive-accent-active)) {
-  &:focus {
+  &:not(.disabled, :disabled):focus {
     border-color: @color;
     outline: 0;
   }

package/src/less/navbar-base.less

@@ -681,15 +681,6 @@
         }
       }
     }
-
-    > .disabled > a {
-      &,
-      &:hover,
-      &:focus {
-        color: var(--color-content-disabled);
-        background-color: transparent;
-      }
-    }
   }
 
   // Dropdown menu items
@@ -731,15 +722,6 @@
             background-color: transparent;
           }
         }
-
-        > .disabled > a {
-          &,
-          &:hover,
-          &:focus {
-            color: var(--color-content-disabled);
-            background-color: transparent;
-          }
-        }
       }
     }
   }
@@ -763,14 +745,6 @@
     &:focus {
       color: var(--color-content-accent-hover);
     }
-
-    &[disabled],
-    fieldset[disabled] & {
-      &:hover,
-      &:focus {
-        color: var(--color-content-disabled);
-      }
-    }
   }
 }
 
@@ -828,15 +802,6 @@
       }
     }
 
-    > .disabled > a {
-      &,
-      &:hover,
-      &:focus {
-        color: var(--color-content-disabled);
-        background-color: transparent;
-      }
-    }
-
     > .open > a,
     .dropdown:focus-within > a {
       &,
@@ -869,14 +834,6 @@
     &:focus {
       color: var(--color-content-accent-hover);
     }
-
-    &[disabled],
-    fieldset[disabled] & {
-      &:hover,
-      &:focus {
-        color: var(--color-content-disabled);
-      }
-    }
   }
 }
 
@@ -1204,16 +1161,16 @@
       }
     }
 
-    .btn-info:not([disabled]),
-    .btn-warning:not([disabled]),
-    .btn-danger:not([disabled]) {
+    .btn-info:not(.disabled, :disabled),
+    .btn-warning:not(.disabled, :disabled),
+    .btn-danger:not(.disabled, :disabled) {
       color: var(--color-content-accent);
       border-color: var(--color-interactive-accent);
     }
 
-    .btn-info:not([disabled]):hover,
-    .btn-warning:not([disabled]):hover,
-    .btn-danger:not([disabled]):hover {
+    .btn-info:not(.disabled, :disabled):hover,
+    .btn-warning:not(.disabled, :disabled):hover,
+    .btn-danger:not(.disabled, :disabled):hover {
       color: @color-navy-content-primary;
     }
 
@@ -1296,9 +1253,9 @@
   .simple-nav .navbar-nav > li > a {
     color: @color-navy-content-primary;
 
-    &:focus,
-    &:hover,
-    &:active {
+    &:not(.disabled, :disabled):focus,
+    &:not(.disabled, :disabled):hover,
+    &:not(.disabled, :disabled):active {
       color: var(--color-content-accent-hover);
     }
   }

package/src/less/navs.less

@@ -64,14 +64,10 @@
   // Disabled state sets text to gray and nukes hover/tab effects
 
   > .disabled > a {
-    color: var(--color-content-disabled);
-
     &:hover,
     &:focus,
     &:active {
       text-decoration: none;
-      background-color: transparent;
-      cursor: @cursor-default;
     }
   }
 

package/src/less/popovers.less

@@ -245,6 +245,7 @@
     color: inherit !important;
     font-weight: inherit !important;
     text-decoration: none !important;
+    border-bottom: 1px dotted var(--color-content-accent) !important;
     cursor: pointer;
 
     &:hover,

package/src/less/process.less

@@ -348,10 +348,6 @@
 }
 
 .btn[disabled] {
-  .process-circle {
-    stroke: var(--color-interactive-disabled);
-  }
-
   .process-icon-horizontal,
   .process-icon-vertical {
     background-color: #fff;

package/src/less/table.less

@@ -27,7 +27,7 @@ table {
 caption {
   padding-top: @table-cell-padding;
   padding-bottom: @table-cell-padding;
-  color: var(--color-content-disabled);
+  color: var(--color-content-secondary);
   .text-align(left);
 }
 

package/src/less/tick.less

@@ -14,15 +14,6 @@
     transform: translateX(0.5px) rotate(-45deg);
     transform-origin: left bottom;
     left: var(--size-8);
-
-    .tw-checkbox-button[disabled] &,
-    input[type='checkbox']:disabled + .tw-checkbox-button & {
-      background-color: var(--color-interactive-disabled);
-    }
-
-    .tw-checkbox-button + .tw-checkbox-button & {
-      background-color: var(--color-interactive-disabled);
-    }
   }
 
   .has-error {