@transferwise/neptune-css 12.1.3 → 12.1.4-beta-ef9e9fd33f.2

package/src/less/footer.less

@@ -70,44 +70,6 @@
     }
   }
 
-  &.footer-inverse {
-    background: @color-navy-background-elevated;
-
-    .footer-link,
-    .link-icon {
-      color: @color-navy-content-primary;
-
-      &:hover,
-      &:active,
-      &:focus {
-        color: @color-navy-content-primary;
-      }
-
-      svg {
-        fill: @color-navy-content-primary;
-
-        &:hover,
-        &:active,
-        &:focus {
-          fill: @color-navy-content-primary;
-        }
-      }
-    }
-
-    .footer-title {
-      color: @color-navy-content-primary;
-    }
-
-    hr {
-      opacity: 0.1;
-    }
-
-    .tiny,
-    .body-3 {
-      color: @color-navy-content-primary;
-    }
-  }
-
   @media (--screen-xs-max) {
     position: relative;
   }

package/src/less/forms/bootstrap-forms.less

@@ -54,10 +54,6 @@ label,
   transition: color ease-in-out 0.15s;
 }
 
-.disabled > label {
-  color: var(--color-content-disabled);
-}
-
 // Normalize form controls
 //
 // While most of our form styles require extra classes, some basic normalization
@@ -161,7 +157,7 @@ output {
   // Remove iOS drop shadow
   background-clip: padding-box;
 
-  &:hover {
+  &:not(.disabled, :disabled):hover {
     border-color: var(--color-interactive-secondary-hover);
   }
 
@@ -172,31 +168,6 @@ output {
     color: var(--color-content-tertiary);
   }
 
-  // Disabled and read-only inputs
-  //
-  // HTML5 says that controls under a fieldset > legend:first-child won't be
-  // disabled if the fieldset is disabled. Due to implementation difficulty, we
-  // don't honor that edge case; we style them as disabled anyway.
-  &[disabled],
-  &[readonly],
-  fieldset[disabled] & {
-    background-color: var(--color-background-neutral);
-    color: var(--color-content-disabled);
-    border-color: var(--color-interactive-disabled);
-
-    &::placeholder {
-      color: var(--color-content-disabled);
-    }
-
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
-    opacity: 1;
-  }
-
-  &[disabled],
-  fieldset[disabled] & {
-    cursor: @cursor-disabled;
-  }
-
   // Reset height for `textarea`s
   textarea& {
     height: 144px;
@@ -376,9 +347,9 @@ input[type='checkbox'] {
   line-height: var(--line-height-control);
   min-height: calc(var(--line-height-control) * 2);
   font-size: var(--font-size-16);
-  color: var(--color-content-disabled);
+  color: var(--color-content-secondary);
   background-color: var(--color-background-neutral);
-  border: 1px solid var(--color-interactive-disabled);
+  border: 1px solid var(--color-interactive-secondary);
   border-radius: @input-border-radius;
   padding: @input-padding;
 
@@ -590,24 +561,24 @@ input[type='checkbox'] {
 .has-success {
   .form-control-validation(
     var(--color-content-positive);
-    var(--color-interactive-secondary);
-    var(--color-interactive-secondary-hover);
+    var(--color-interactive-positive);
+    var(--color-interactive-positive-hover);
   );
 }
 
 .has-info {
   .form-control-validation(
     var(--color-content-accent);
-    var(--color-interactive-secondary);
-    var(--color-interactive-secondary-hover);
+    var(--color-interactive-accent);
+    var(--color-interactive-accent-hover);
   );
 }
 
 .has-warning {
   .form-control-validation(
     var(--color-content-warning);
-    var(--color-interactive-secondary);
-    var(--color-interactive-secondary-hover);
+    var(--color-interactive-warning);
+    var(--color-interactive-warning-hover);
   );
 }
 
@@ -901,31 +872,19 @@ input[type='checkbox'] {
     border-radius: @border-radius-base;
     transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
 
-    &:hover {
+    &:not(.disabled, :disabled):hover {
       border-color: var(--color-interactive-accent-hover);
     }
 
-    &.focus,
-    &.focus:hover,
-    &.has-focus,
-    &.has-focus:hover,
-    &:focus-within {
+    &:not(.disabled, :disabled).focus,
+    &:not(.disabled, :disabled).focus:hover,
+    &:not(.disabled, :disabled).has-focus,
+    &:not(.disabled, :disabled).has-focus:hover,
+    &:not(.disabled, :disabled):focus-within {
       border-color: var(--color-interactive-accent-active);
     }
   }
 
-  &[disabled],
-  &[readonly],
-  fieldset[disabled] &,
-  &.disabled,
-  &.readonly {
-    label {
-      color: var(--color-content-disabled);
-      border-color: var(--color-interactive-disabled);
-      background-color: var(--color-background-neutral);
-    }
-  }
-
   &.checkbox-lg,
   &.radio-lg {
     > label {
@@ -942,23 +901,6 @@ input[type='checkbox'] {
   }
 }
 
-.disabled .checkbox,
-.checkbox.disabled,
-.disabled .radio,
-.radio.disabled {
-  > label,
-  > label:hover {
-    border-color: var(--color-interactive-disabled);
-    color: var(--color-content-disabled);
-
-    small,
-    .small,
-    .body-2 {
-      color: var(--color-content-disabled);
-    }
-  }
-}
-
 .error-messages {
   display: none;
   color: var(--color-content-negative);

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/_alerts.less

@@ -1,4 +1,5 @@
 @import (reference) '../mixins/_logical-properties.less';
+@import (reference) '../mixins/_arrows.less';
 
 .alert-variant(@background; @text-color; @text-hover) {
   background-color: @background;
@@ -23,55 +24,12 @@
   }
 }
 
-.arrow(@size: 10px) {
+.alert-arrow(@size: 10px) {
   position: relative;
   .arrow-pointer(@size);
-  .arrow-positions(@size);
-}
 
-.arrow-pointer(@size: 10px) {
   &::before {
-    content: ' ';
-    position: absolute;
-    display: block;
-    width: @size;
-    height: @size;
-    .left((2 * @size));
-
-    top: (@size / -2);
-    transform: rotate(45deg);
     clip-path: polygon(0% 0%, 0 100%, 100% 0);
-    background-color: inherit;
-  }
-}
-
-.arrow-positions(@size: 10px) {
-  &.arrow-center::before {
-    .left(50%);
-
-    .margin(left, (@size / -2));
-  }
-
-  &.arrow-top::before {
-    top: (@size / -2);
-    bottom: auto;
-  }
-
-  &.arrow-left::before {
-    .left((2 * @size));
-
-    .right(auto);
-  }
-
-  &.arrow-right::before {
-    .left(auto);
-
-    .right((2 * @size));
-  }
-
-  &.arrow-bottom::before {
-    top: auto;
-    bottom: (@size / -2);
-    transform: rotate(225deg);
   }
+  .arrow-positions(@size);
 }

package/src/less/mixins/_buttons.less

@@ -14,63 +14,41 @@
   background-color: @background;
   border-color: @border;
   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;
   }