armtek-uikit-react 1.0.266 → 1.0.268

package/assets/Button.scss

@@ -1,751 +0,0 @@
-@use "variables" as v;
-
-.arm-button{
-  outline: none;
-  border:1px solid transparent;
-  border-radius: var(--border-radius);
-  padding: var(--size-step) calc(3 * var(--size-step));
-  cursor: pointer;
-  text-decoration: none;
-  @include v.transition(0.3s);
-  font-weight: 500;
-  font-family: inherit;
-  font-size: 16px;
-  height: var(--size-elarge);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  &.arm-button_disabled,
-  &:disabled{
-    cursor: initial;
-    pointer-events: none;
-  }
-  &_fullWidth{
-    width: 100%;
-  }
-}
-.arm-button__iconWrapper{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  left:0;
-  top:0;
-  //font-size: 0;
-  //& > span{
-  //  font-size: initial;
-  //}
-}
-.arm-button_radius_none{
-  border-radius: 0;
-}
-
-.arm-button_contained {
-  &.arm-button_primary{
-    color: #fff;
-    background: var(--color-primary);
-    &:hover{
-      background: var(--color-primary-dark);
-    }
-    &:active{
-      background: var(--color-blue-800);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      background: var(--color-blue-400);
-    }
-  }
-  &.arm-button_secondary {
-    background: var(--color-secondary);
-    color: #fff;
-    &:hover{
-      background: var(--color-secondary-dark);
-    }
-    &:active{
-      background: var(--color-orange-800);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      background: var(--color-secondary-light);
-    }
-  }
-  &.arm-button_neutral {
-    color: #fff;
-    background: var(--color-neutral);
-    &:hover{
-      background: var(--color-neutral-dark);
-    }
-    &:active{
-      background: var(--color-gray-600);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      background: var(--color-neutral-light);
-    }
-  }
-  &.arm-button_black {
-    color: #fff;
-    background: var(--color-gray-900);
-    &:hover{
-      background: var(--color-neutral-dark);
-    }
-    &:active{
-      background: var(--color-gray-600);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      background: var(--color-neutral-light);
-    }
-  }
-  &.arm-button_green {
-    color: #fff;
-    background: var(--color-success);
-    &:hover{
-      background: var(--color-success-dark);
-    }
-    &:active{
-      background: var(--color-green-800);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      background: var(--color-green-500);
-    }
-  }
-  &.arm-button_red {
-    color: #fff;
-    background: var(--color-error);
-    &:hover{
-      background: var(--color-error-dark);
-    }
-    &:active{
-      background: var(--color-red-800);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      background: var(--color-red-500);
-    }
-  }
-}
-.arm-button_outlined {
-  background: transparent;
-  &.arm-button_primary{
-
-    color: var(--color-primary);
-    border-color: var(--color-primary);
-    background: transparent;
-    &:hover{
-      background: rgba(var(--color-primary), 0.1);
-    }
-    &:active{
-      background: var(--color-blue-a100);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      color: var(--color-primary-light);
-      border-color: var(--color-primary-light);
-    }
-  }
-  &.arm-button_secondary {
-    border-color: var(--color-secondary);
-    color: var(--color-secondary);
-    &:hover{
-      background: var(--color-secondary);
-      opacity: 0.2;
-    }
-    &:active{
-      background: var(--color-orange-100);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      color: var(--color-primary-light);
-      border-color: var(--color-primary-light);
-    }
-  }
-  &.arm-button_neutral,
-  &.arm-button_black {
-    border-color: var(--color-gray-900);
-    color: var(--color-gray-900);
-    &:hover{
-      background-color: rgba(var(--color-neutral-rgba), 0.1);
-    }
-    &:active{
-      background: var(--color-gray-300);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      color: var(--color-neutral-light);
-      border-color: var(--color-neutral-light);
-    }
-  }
-  &.arm-button_green {
-    border-color: var(--color-success);
-    color: var(--color-success);
-    &:hover{
-      background-color: rgba(var(--color-success), 0.2);
-    }
-    &:active{
-      background: var(--color-green-100);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      background-color: transparent;
-      color: var(--color-green-500);
-      border-color: var(--color-green-500);
-    }
-  }
-  &.arm-button_red {
-    border-color: var(--color-error);
-    color: var(--color-error);
-    &:hover{
-      background: rgba(var(--color-error), 0.1);
-    }
-    &:active{
-      background: var(--color-red-100);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      background-color: transparent;
-      border-color: var(--color-red-100);
-      color: var(--color-red-100);
-    }
-  }
-}
-.arm-button_transparent {
-  background: transparent;
-  &.arm-button_primary{
-    color: var(--color-primary);
-    &:hover{
-      background-color: rgba(var(--color-blue-800-rgba), 0.1);
-    }
-    &:active{
-      background-color: rgba(var(--color-blue-800-rgba), 0.2);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      opacity: 0.6;
-      background: transparent;
-    }
-  }
-  &.arm-button_secondary {
-    color: var(--color-secondary);
-    &:hover{
-      background-color: rgba(var(--color-secondary-rgba), 0.1);
-    }
-    &:active{
-      background-color: rgba(var(--color-secondary-light-rgb), 0.2);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      opacity: 0.4;
-    }
-  }
-  &.arm-button_neutral,
-  &.arm-button_black {
-    color: var(--color-gray-900);
-    &:hover{
-      background: rgba(var(--color-neutral-rgba), 0.1);
-    }
-    &:active{
-      background: var(--color-gray-300);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      color: var(--color-neutral-light);
-      background: none;
-    }
-  }
-  &.arm-button_green {
-    color: var(--color-success);
-    &:hover{
-      background-color: rgba(var(--color-success-rgb), 0.1);
-    }
-    &:active{
-      background-color: var(--color-green-100);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      background-color: var(--color-green-500);
-    }
-  }
-  &.arm-button_red {
-    color: var(--color-error);
-    &:hover{
-      background-color: rgba(var(--color-error-rgba), 0.1);
-    }
-    &:active{
-      background-color: var(--color-red-100);
-    }
-    &.arm-button_disabled,
-    &:disabled{
-      color: var(--color-red-500);
-    }
-  }
-}
-
-.arm-theme-dark {
-  .arm-button_contained {
-    &.arm-button_primary{
-      color: var(--color-primary-contrast);
-      background: var(--color-blue-800);
-      &:hover{
-        background: var(--color-primary);
-      }
-      &:active{
-        background: var(--color-primary-light);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        background: rgba(var(--color-blue-800-rgba), 0.2);
-        color: rgba(var(--color-white-rgba), 0.2);
-      }
-    }
-    &.arm-button_secondary {
-      color: var(--color-secondary-contrast);
-      &:active{
-        background: var(--color-secondary-light);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        background: rgba(var(--color-secondary-rgba), 0.1);
-        color: rgba(var(--color-white-rgba), 0.2);
-      }
-    }
-    &.arm-button_neutral {
-      color: var(--color-neutral-contrast);
-      background: rgba(var(--color-gray-500-rgba), 0.3);
-      &:hover{
-        background: var(--color-neutral);
-        opacity: 1;
-      }
-      &:active{
-        background: rgba(var(--color-gray-500-rgba), 0.4);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        background: rgba(var(--color-white-rgba), 0.05);
-        color: rgba(var(--color-white-rgba), 0.2);
-      }
-    }
-    &.arm-button_black {
-      color: var(--color-neutral);
-      background: var(--color-neutral-contrast);
-      &:hover{
-        background: rgba(var(--color-neutral-contrast-rgb), 0.9);
-      }
-      &:active{
-        background: rgba(var(--color-neutral-contrast-rgb), 0.7);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color: rgba(var(--color-neutral-contrast-rgb), 0.1);
-        background: rgba(var(--color-neutral-contrast-rgb), 0.05);
-      }
-    }
-    &.arm-button_green {
-      color: var(--color-success-contrast);
-      background: var(--color-green-800);
-      &:hover{
-        background: var(--color-success);
-      }
-      &:active{
-        background: var(--color-success-light);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        background: rgba(var(--color-green-800-rgba), 0.2);
-        color: rgba(var(--color-gray-900-rgb), 0.4);
-      }
-    }
-    &.arm-button_red {
-      color: var(--color-error-contrast);
-      background: var(--color-red-800);
-      &:hover{
-        background-color: var(--color-error);
-      }
-      &:active{
-        background: var(--color-error-light);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        background: rgba(var(--color-red-800-rgb), 0.15);
-        color: rgba(var(--color-white-rgba), 0.4);
-      }
-    }
-  }
-  .arm-button_outlined {
-    background: transparent;
-    &.arm-button_primary{
-
-      color: var(--color-blue-600);
-      border-color: var(--color-blue-600);
-      background: transparent;
-      &:hover{
-        background: rgba(var(--color-blue-800-rgba), 0.1);
-      }
-      &:active{
-        background: rgba(var(--color-blue-800-rgba), 0.2);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color: rgba(var(--color-blue-800-rgba), 0.6);
-        border-color: rgba(var(--color-blue-800-rgba), 0.6);
-      }
-    }
-    &.arm-button_secondary {
-      border-color: var(--color-secondary);
-      color: var(--color-secondary);
-      &:hover{
-        background: rgba(var(--color-secondary-rgba), 0.1);
-      }
-      &:active{
-        background: rgba(var(--color-secondary-light-rgb), 0.2);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color: rgba(var(--color-secondary-rgba), 0.4);
-        border-color: rgba(var(--color-secondary-rgba), 0.4);
-      }
-    }
-    &.arm-button_neutral {
-      border-color: var(--color-neutral-light);
-      color: var(--color-neutral-light);
-      background: transparent;
-      &:hover{
-        background: var(--color-neutral);
-      }
-      &:active{
-        background: rgba(var(--color-gray-500-rgba), 0.4);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        background: transparent;
-        border-color: rgba(var(--color-white-rgba), 0.1);
-        color: rgba(var(--color-white-rgba), 0.1);
-      }
-    }
-    &.arm-button_black {
-      border-color: var(--color-white);
-      color: var(--color-white);
-      &:hover{
-        background: rgba(var(--color-white-rgba), 0.1);
-      }
-      &:active{
-        background: rgba(var(--color-white-rgba), 0.25);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color:  rgba(var(--color-white-rgba), 0.1);
-        border-color: rgba(var(--color-white-rgba), 0.1);
-      }
-    }
-    &.arm-button_green {
-      border-color: var(--color-green-600);
-      color: var(--color-green-600);
-      &:hover{
-        background-color: rgba(var(--color-green-800-rgba), 0.1);
-      }
-      &:active{
-        background-color: rgba(var(--color-green-800-rgba), 0.2);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color:  rgba(var(--color-green-800-rgba), 0.2);
-        border-color: rgba(var(--color-green-800-rgba), 0.2);
-      }
-    }
-    &.arm-button_red {
-      border-color: var(--color-red-600);
-      color: var(--color-red-600);
-      &:hover{
-        background-color: rgba(var(--color-error-rgba), 0.1);
-      }
-      &:active{
-        background: rgba(var(--color-error-rgba), 0.2);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color:  rgba(var(--color-error-rgba), 0.4);
-        border-color: rgba(var(--color-error-rgba), 0.4);
-      }
-    }
-  }
-  .arm-button_transparent {
-    background: transparent;
-    &.arm-button_primary{
-      color: var(--color-blue-600);
-      background: transparent;
-      &:hover{
-        background: rgba(var(--color-blue-800-rgba), 0.1);
-      }
-      &:active{
-        background: rgba(var(--color-blue-800-rgba), 0.2);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color: rgba(var(--color-blue-800-rgba), 0.6);
-      }
-    }
-    &.arm-button_secondary {
-      color: var(--color-secondary);
-      &:hover{
-        background: rgba(var(--color-secondary-rgba), 0.1);
-      }
-      &:active{
-        background: rgba(var(--color-secondary-light-rgb), 0.2);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color: rgba(var(--color-secondary-rgba), 0.4);
-      }
-    }
-    &.arm-button_neutral {
-      color: var(--color-neutral-light);
-      &:hover{
-        background: var(--color-neutral);
-      }
-      &:active{
-        background-color: rgba(var(--color-gray-500-rgba), 0.4);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color: rgba(var(--color-white-rgba), 0.1);
-      }
-    }
-    &.arm-button_black {
-      color: var(--color-white);
-      &:hover{
-        background: rgba(var(--color-white-rgba), 0.1);
-      }
-      &:active{
-        background: rgba(var(--color-white-rgba), 0.2);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color: rgba(var(--color-white-rgba), 0.1);
-      }
-    }
-    &.arm-button_green {
-      color: var(--color-green-600);
-      &:hover{
-        background-color: rgba(var(--color-green-800-rgba), 0.1);
-      }
-      &:active{
-        background-color: rgba(var(--color-green-800-rgba), 0.2);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color: rgba(var(--color-green-800-rgba), 0.2);
-      }
-    }
-    &.arm-button_red {
-      color: var(--color-red-600);
-      &:hover{
-        background-color: rgba(var(--color-error-rgba), 0.1);
-      }
-      &:active{
-        background-color: rgba(var(--color-error-rgba), 0.2);
-      }
-      &.arm-button_disabled,
-      &:disabled{
-        color: rgba(var(--color-error-rgba), 0.4);
-      }
-    }
-  }
-}
-
-.arm-button__adornment{
-  font-size: 0;
-  & > * {
-    font-size: 20px;
-  }
-}
-.arm-button__adornment_end{
-  margin-left: var(--size-step);
-}
-.arm-button__adornment_start{
-  margin-right: var(--size-step);
-}
-
-.arm-button_large{
-  height: var(--size-large);
-  font-size: 15px;
-}
-.arm-button_medium{
-  height: var(--size-medium);
-  font-size: 14px;
-}
-.arm-button_small{
-  height: var(--size-small);
-  font-size: 13px;
-  padding-left: calc(var(--size-step) * 1.2);
-  padding-right: calc(var(--size-step) * 1.2);
-}
-
-
-
-.arm-button_grouped_inline{
-  &.arm-button_contained{
-    &.arm-button_primary + *{
-      border-left-color: var(--color-primary-light);
-    }
-    &.arm-button_secondary + *{
-      border-left-color: var(--color-secondary-dark);
-    }
-    &.arm-button_neutral + *{
-      border-left-color: var(--color-neutral-dark);
-    }
-    &.arm-button_black + *{
-      border-left-color: var(--color-neutral-dark);
-    }
-    &.arm-button_green + *{
-      border-left-color: var(--color-success-dark);
-    }
-    &.arm-button_red + *{
-      border-left-color: var(--color-error);
-    }
-  }
-  &.arm-button_outlined{
-    &.arm-button_primary + *{
-      border-left-color: var(--color-primary-light);
-    }
-    &.arm-button_primary:not(:last-child){
-      border-right: 0;
-    }
-    &.arm-button_secondary + *{
-      border-left-color: var(--color-secondary);
-    }
-    &.arm-button_secondary:not(:last-child){
-      border-right: 0;
-    }
-    &.arm-button_neutral + *{
-      border-left-color: var(--color-neutral);
-    }
-    &.arm-button_neutral:not(:last-child){
-      border-right: 0;
-    }
-    &.arm-button_black + *{
-      border-left-color: var(--color-neutral);
-    }
-    &.arm-button_black:not(:last-child){
-      border-right: 0;
-    }
-    &.arm-button_green + *{
-      border-left-color: var(--color-success);
-    }
-    &.arm-button_green:not(:last-child){
-      border-right: 0;
-    }
-    &.arm-button_green + *{
-      border-left-color: var(--color-error);
-    }
-    &.arm-button_green:not(:last-child){
-      border-right: 0;
-    }
-  }
-  &.arm-button_transparent{
-    &.arm-button_primary + *{
-      border-left-color: var(--color-gray-200);
-    }
-    &.arm-button_secondary + *{
-      border-left-color: var(--color-gray-200);
-    }
-    &.arm-button_neutral + *{
-      border-left-color: var(--color-gray-200);
-    }
-    &.arm-button_black + *{
-      border-left-color: var(--color-gray-200);
-    }
-    &.arm-button_green + *{
-      border-left-color: var(--color-gray-200);
-    }
-    &.arm-button_red + *{
-      border-left-color: var(--color-gray-200);
-    }
-  }
-}
-.arm-button_grouped_column{
-  &.arm-button_contained{
-    &.arm-button_primary + *{
-      border-top-color: var(--color-primary-light);
-    }
-    &.arm-button_secondary + *{
-      border-top-color: var(--color-secondary-dark);
-    }
-    &.arm-button_neutral + *{
-      border-top-color: var(--color-neutral-dark);
-    }
-    &.arm-button_black + *{
-      border-top-color: var(--color-neutral-dark);
-    }
-    &.arm-button_green + *{
-      border-top-color: var(--color-success-dark);
-    }
-    &.arm-button_red + *{
-      border-top-color: var(--color-error-dark);
-    }
-  }
-  &.arm-button_outlined{
-    &.arm-button_primary + *{
-      border-top-color: var(--color-primary-light);
-    }
-    &.arm-button_primary:not(:last-child){
-      border-bottom: 0;
-    }
-    &.arm-button_secondary + *{
-      border-top-color: var(--color-secondary);
-    }
-    &.arm-button_secondary:not(:last-child){
-      border-bottom: 0;
-    }
-    &.arm-button_neutral + *{
-      border-top-color: var(--color-neutral);
-    }
-    &.arm-button_neutral:not(:last-child){
-      border-bottom: 0;
-    }
-    &.arm-button_black + *{
-      border-top-color: var(--color-neutral);
-    }
-    &.arm-button_black:not(:last-child){
-      border-bottom: 0;
-    }
-    &.arm-button_green + *{
-      border-top-color: var(--color-success);
-    }
-    &.arm-button_green:not(:last-child){
-      border-bottom: 0;
-    }
-    &.arm-button_black + *{
-      border-top-color: var(--color-error);
-    }
-    &.arm-button_black:not(:last-child){
-      border-bottom: 0;
-    }
-  }
-  &.arm-button_transparent{
-    &.arm-button_primary + *{
-      border-top-color: var(--color-gray-200);
-    }
-    &.arm-button_secondary + *{
-      border-top-color: var(--color-gray-200);
-    }
-    &.arm-button_neutral + *{
-      border-top-color: var(--color-gray-200);
-    }
-    &.arm-button_black + *{
-      border-top-color: var(--color-gray-200);
-    }
-    &.arm-button_red + *{
-      border-top-color: var(--color-gray-200);
-    }
-    &.arm-button_green + *{
-      border-top-color: var(--color-gray-200);
-    }
-  }
-}
-.arm-button_disabled img{
-  opacity: 0.5;
-}