armtek-uikit-react 1.0.120 → 1.0.122

package/assets/Checkbox.scss

@@ -1,24 +1,23 @@
-@import "variables";
 
-.checkbox{
+.arm-checkbox{
   position: relative;
   display: flex;
 }
-.checkbox_text{
+.arm-checkbox_text{
   align-items: center;
 }
-.checkbox__input{
+.arm-checkbox__input{
   display: none;
 }
-.checkbox__text{
+.arm-checkbox__text{
   padding-left: calc(var(--size-step));
   font-size: 16px;
   display: block;
 }
-.checkbox__text_size_small{
+.arm-checkbox__text_size_small{
   font-size: 14px;
 }
-.checkbox__label{
+.arm-checkbox__label{
   cursor: pointer;
   text-align: left;
   position: relative;
@@ -53,7 +52,7 @@
   }
 }
 
-.checkbox_medium{
+.arm-checkbox_medium{
   width:18px;
   height: 18px;
   &:after{
@@ -64,7 +63,7 @@
   }
 }
 
-.checkbox_small{
+.arm-checkbox_small{
   font-size: 14px;
   width:16px;
   height: 16px;
@@ -76,7 +75,7 @@
   }
 }
 
-.checkbox__label_intermediate{
+.arm-checkbox__label_intermediate{
   &:after{
     border-left: none;
     width: 14px;
@@ -86,18 +85,18 @@
     left: 4px;
     border-right: none;
   }
-  &.checkbox_medium:after{
+  &.arm-checkbox_medium:after{
     width: 11px;
     top: 8px;
   }
-  &.checkbox_small:after{
+  &.arm-checkbox_small:after{
     width: 9px;
     top: 7px;
   }
 }
 
-.checkbox__label_intermediate,
-.checkbox__label_checked{
+.arm-checkbox__label_intermediate,
+.arm-checkbox__label_checked{
   &:before{
     border-color: transparent;
     background: $color-primary;
@@ -106,42 +105,42 @@
     border-color: #fff;
     display: block;
   }
-  &.checkbox_secondary{
+  &.arm-checkbox_secondary{
     &:before{
       background: $color-secondary;
     }
   }
 
-  &.checkbox_contained{
-    &.checkbox_secondary{
+  &.arm-checkbox_contained{
+    &.arm-checkbox_secondary{
       &:before{
         background: $color-secondary;
       }
     }
-    &.checkbox_neutral{
+    &.arm-checkbox_neutral{
       &:before{
         background: $color-neutral;
       }
     }
-    &.checkbox_success{
+    &.arm-checkbox_success{
       &:before{
         background: $color-success;
       }
     }
-    &.checkbox_error{
+    &.arm-checkbox_error{
       color: $color-error-dark;
       &:before{
         background: $color-error-dark;
       }
     }
-    &.checkbox_warning{
+    &.arm-checkbox_warning{
       &:before{
         background: $color-warning;
       }
     }
   }
 }
-.checkbox_outlined{
+.arm-checkbox_outlined{
   &:before{
     background: transparent;
     border-color: $color-primary;
@@ -149,7 +148,7 @@
   &:after{
     border-color: $color-primary;
   }
-  &.checkbox_secondary{
+  &.arm-checkbox_secondary{
     &:before{
       background: transparent;
       border-color: $color-secondary;
@@ -158,7 +157,7 @@
       border-color: $color-secondary;
     }
   }
-  &.checkbox_neutral{
+  &.arm-checkbox_neutral{
     &:before{
       border-color: $color-neutral;
     }
@@ -166,7 +165,7 @@
       border-color: $color-neutral;
     }
   }
-  &.checkbox_success{
+  &.arm-checkbox_success{
     &:before{
       border-color: $color-success;
     }
@@ -174,7 +173,7 @@
       border-color: $color-success;
     }
   }
-  &.checkbox_error{
+  &.arm-checkbox_error{
     color: $color-error-dark;
     &:before{
       border-color: $color-error-dark;
@@ -183,7 +182,7 @@
       border-color: $color-error-dark;
     }
   }
-  &.checkbox_warning{
+  &.arm-checkbox_warning{
     &:before{
       border-color: $color-warning;
     }
@@ -193,7 +192,7 @@
   }
 }
 
-.checkbox__label_disabled{
+.arm-checkbox__label_disabled{
   color: $color-gray-500 !important;
   pointer-events: none;
   &:before{
@@ -202,7 +201,7 @@
   &:after{
     border-color: $color-gray-200;
   }
-  &.checkbox_outlined{
+  &.arm-checkbox_outlined{
     &:before{
       background-color: transparent;
       border-color: $color-gray-200;
@@ -213,8 +212,8 @@
   }
 }
 
-.radio{
-  & .checkbox__label{
+.arm-radio{
+  & .arm-checkbox__label{
     &:before{
       border-radius: 50%;
     }
@@ -230,63 +229,63 @@
       left:50%;
       transform: translate(-50%, -50%);
     }
-    &.checkbox_medium{
+    &.arm-checkbox_medium{
       &:after{
         width: 8px;
         height: 8px;
         margin-top: -1px;
       }
     }
-    &.checkbox_small{
+    &.arm-checkbox_small{
       &:after{
         width: 6px;
         height: 6px;
         margin-top: -2px;
       }
     }
-    &.checkbox_error:before{
+    &.arm-checkbox_error:before{
       border-color: $color-error-dark;
     }
-    &.checkbox_secondary:before{
+    &.arm-checkbox_secondary:before{
       border-color: $color-secondary;
     }
-    &.checkbox_success:before{
+    &.arm-checkbox_success:before{
       border-color: $color-success;
     }
-    &.checkbox_warning:before{
+    &.arm-checkbox_warning:before{
       border-color: $color-warning;
     }
-    &.checkbox_neutral:before{
+    &.arm-checkbox_neutral:before{
       border-color: $color-neutral;
     }
-    &.checkbox_error:after{
+    &.arm-checkbox_error:after{
       background: $color-error-dark;
     }
-    &.checkbox_secondary:after{
+    &.arm-checkbox_secondary:after{
       background: $color-secondary;
     }
-    &.checkbox_success:after{
+    &.arm-checkbox_success:after{
       background: $color-success;
     }
-    &.checkbox_warning:after{
+    &.arm-checkbox_warning:after{
       background: $color-warning;
     }
-    &.checkbox_neutral:after{
+    &.arm-checkbox_neutral:after{
       background: $color-neutral;
     }
     &_disabled:after{
       background: $color-gray-200 !important;
     }
-    &.checkbox_contained:after{
+    &.arm-checkbox_contained:after{
       background: #fff;
     }
 
-    &.checkbox__label_disabled:before{
+    &.arm-checkbox__label_disabled:before{
       background: transparent !important;
       border-color: $color-gray-400;
     }
     &_checked{
-      &.checkbox__label_disabled:before{
+      &.arm-checkbox__label_disabled:before{
         background: #B1BCC6 !important;
       }
     }

package/assets/Chip.scss

@@ -1,6 +1,5 @@
-@import "variables";
 
-.chip{
+.arm-chip{
   background: $color-gray-200;
   padding: calc($size-step / 1.5) calc($size-step * 1.5);
   border-radius: 20px;
@@ -9,18 +8,18 @@
   align-items: center;
 }
 
-.chip_square{
+.arm-chip_square{
   border-radius: $radius;
 }
 
-.chip__text{
+.arm-chip__text{
   line-height: 1.15;
 }
-.chip__inner{
+.arm-chip__inner{
   @include flex(center)
 }
 
-.chip__icon{
+.arm-chip__icon{
   display: inline-block;
   margin-right: $size-step;
   margin-left: -$size-step;
@@ -28,7 +27,7 @@
   @include flex();
   overflow: hidden;
 }
-.chip__close{
+.arm-chip__close{
   margin-left: $size-step;
   margin-right: -$size-step;
   padding: 0;
@@ -41,8 +40,8 @@
   }
 }
 
-.chip__close_primary,
-.chip__close_secondary{
+.arm-chip__close_primary,
+.arm-chip__close_secondary{
   color: #fff;
   &:hover{
     color: #fff;
@@ -50,153 +49,153 @@
   }
 }
 
-.chip_small{
+.arm-chip_small{
   height: 24px;
   padding: 4px $size-step;
 }
-.chip_medium{
+.arm-chip_medium{
   height: 32px;
 }
-.chip__icon_small{
+.arm-chip__icon_small{
   font-size: 18px;
   margin-left: 0;
 }
-.chip__close_small{
+.arm-chip__close_small{
   font-size: 15px;
   margin-right: -2px;
 }
 
-.chip_outlined{
+.arm-chip_outlined{
   background: transparent;
   border: 1px solid $color-gray-400;
 }
 
 
-a.chip_outlined,
-button.chip_outlined{
+a.arm-chip_outlined,
+button.arm-chip_outlined{
   &:hover{
     background: rgba($color-neutral, 0.1);
   }
 }
 
-.chip_secondary{
+.arm-chip_secondary{
   color: #fff;
   background-color: $color-secondary;
-  &.chip_outlined{
+  &.arm-chip_outlined{
     border-color: $color-secondary;
     background: transparent;
     color: $color-secondary;
   }
 }
-a.chip_secondary,
-button.chip_secondary{
+a.arm-chip_secondary,
+button.arm-chip_secondary{
   &:hover{
     background-color: $color-secondary-dark;
   }
-  &.chip_outlined:hover{
+  &.arm-chip_outlined:hover{
     background-color: $color-orange-100;
   }
 }
 
-.chip_success{
+.arm-chip_success{
   background-color: $color-success;
-  &.chip_outlined{
+  &.arm-chip_outlined{
     border-color: $color-success;
     background: transparent;
     color: $color-success;
   }
 }
-a.chip_success,
-button.chip_success{
+a.arm-chip_success,
+button.arm-chip_success{
   &:hover{
     background-color: $color-success-dark;
   }
-  &.chip_outlined:hover{
+  &.arm-chip_outlined:hover{
     background-color: $color-green-100;
   }
 }
 
 
 
-.chip_error{
+.arm-chip_error{
   background-color: $color-error;
-  &.chip_outlined{
+  &.arm-chip_outlined{
     border-color: $color-error;
     background: transparent;
     color: $color-error;
   }
 }
-a.chip_error,
-button.chip_error{
+a.arm-chip_error,
+button.arm-chip_error{
   &:hover{
     background-color: $color-error-dark;
   }
-  &.chip_outlined:hover{
+  &.arm-chip_outlined:hover{
     background: $color-red-100;
   }
 }
 
-.chip_warning{
+.arm-chip_warning{
   background-color: $color-warning;
-  &.chip_outlined{
+  &.arm-chip_outlined{
     border-color: $color-warning;
     background: transparent;
     color: $color-warning;
   }
 }
-a.chip_warning,
-button.chip_warning{
+a.arm-chip_warning,
+button.arm-chip_warning{
   &:hover{
     background-color: $color-warning-dark;
   }
-  &.chip_outlined:hover{
+  &.arm-chip_outlined:hover{
     background: $color-orange-100;
   }
 }
 
-.chip_info{
+.arm-chip_info{
   color: #fff;
   background-color: $color-info;
-  &.chip_outlined{
+  &.arm-chip_outlined{
     border-color: $color-info;
     background: transparent;
     color: $color-info;
   }
 }
-a.chip_info,
-button.chip_info{
+a.arm-chip_info,
+button.arm-chip_info{
   &:hover{
     background-color: $color-info-dark;
   }
-  &.chip_outlined:hover{
+  &.arm-chip_outlined:hover{
     background: $color-blue-100;
   }
 }
 
-.chip_black{
+.arm-chip_black{
   color: #fff;
   background-color: $color-neutral;
-  &.chip_outlined{
+  &.arm-chip_outlined{
     border-color: $color-neutral;
     background: transparent;
     color: $color-neutral;
   }
 }
-a.chip_black,
-button.chip_black{
+a.arm-chip_black,
+button.arm-chip_black{
   &:hover{
     background-color: $color-neutral-dark;
   }
-  &.chip_outlined:hover{
+  &.arm-chip_outlined:hover{
     background: $color-gray-100;
   }
 }
 
-.chip_white{
+.arm-chip_white{
   background: #fff;
 }
-a.chip_white,
-button.chip_white{
+a.arm-chip_white,
+button.arm-chip_white{
   &:hover{
     background-color: $color-gray-100;
   }
@@ -204,28 +203,28 @@ button.chip_white{
 
 
 
-.chip_primary{
+.arm-chip_primary{
   color: #fff;
   background-color: $color-primary;
-  &.chip_outlined{
+  &.arm-chip_outlined{
     border-color: $color-primary;
     background: transparent;
     color: $color-primary;
   }
 }
 
-a.chip_primary,
-button.chip_primary{
+a.arm-chip_primary,
+button.arm-chip_primary{
   &:hover{
     background-color: $color-primary-dark;
   }
-  &.chip_outlined:hover{
+  &.arm-chip_outlined:hover{
     background: $color-blue-100;
   }
 }
 
 
-.chip_disabled{
+.arm-chip_disabled{
   pointer-events: none;
   opacity: 0.5;
 }

package/assets/Dropdown.scss

@@ -1,7 +1,6 @@
-@import "variables";
 
 
-.Dropdown {
+.arm-dropdown {
 
   &__ContentWrapper {
     &_hidden{

package/assets/FormControls.scss

@@ -1,16 +1,15 @@
-@import "variables";
 
-.FormControls{
+.arm-form-controls{
   border-top: 1px solid $color-gray-200;
   padding-top: calc($size-step * 4);
   display: flex;
   margin:0 (-$size-step);
 }
-.FormControls__button{
+.arm-form-controls__button{
   flex: 0 0 50%;
   max-width: 50%;
   padding:0 $size-step;
 }
-.FormControls__btn{
+.arm-form-controls__btn{
   width: 100%;
 }

package/assets/HelperText.scss

@@ -1,10 +1,9 @@
-@import "variables";
 
-.helperText{
-  color: $color-gray-600;
+.arm-helper-text{
+  color: var(--color-gray-600);
   font-size: 12px;
   display: block;
 }
-.helperText_error{
-  color: $color-error-dark;
+.arm-helper-text_error{
+  color: var(--color-error-dark);
 }

package/assets/Icon.scss

@@ -1,31 +1,31 @@
 @import "variables";
 
-.Icon_size_small{
+.arm-icon_size_small{
   font-size: 11px;
 }
-.Icon_size_medium{
+.arm-icon_size_medium{
   font-size: 13px;
 }
-.Icon_size_large{
+.arm-icon_size_large{
   font-size: 14px;
 }
-.Icon_size_extraLarge{
+.arm-icon_size_extraLarge{
   font-size: 16px;
 }
-.Icon_color_primary{color: var(--color-primary)}
-.Icon_color_secondary{color: var(--color-secondary)}
-.Icon_color_neutral{color: var(--color-neutral)}
-.Icon_color_success{color:var(--color-success)}
-.Icon_color_info{color:var(--color-info)}
-.Icon_color_warning{color:var(--color-warning)}
-.Icon_color_error{color:var(--color-error)}
+.arm-icon_color_primary{color: var(--color-primary)}
+.arm-icon_color_secondary{color: var(--color-secondary)}
+.arm-icon_color_neutral{color: var(--color-neutral)}
+.arm-icon_color_success{color:var(--color-success)}
+.arm-icon_color_info{color:var(--color-info)}
+.arm-icon_color_warning{color:var(--color-warning)}
+.arm-icon_color_error{color:var(--color-error)}
 
-.Icon_theme_dark {
-  //&.Icon_color_primary{color: var(--color-primary-contrast)}
-  //&.Icon_color_secondary{color: var(--color-secondary-contrast)}
-  &.Icon_color_neutral{color: var(--color-neutral-contrast)}
-  //&.Icon_color_success{color:var(--color-success-contrast)}
-  //&.Icon_color_info{color:var(--color-info-contrast)}
-  //&.Icon_color_warning{color:var(--color-warning-contrast)}
-  //&.Icon_color_error{color:var(--color-error-contrast)}
+.arm-icon_theme_dark {
+  //&.arm-icon_color_primary{color: var(--color-primary-contrast)}
+  //&.arm-icon_color_secondary{color: var(--color-secondary-contrast)}
+  &.arm-icon_color_neutral{color: var(--color-neutral-contrast)}
+  //&.arm-icon_color_success{color:var(--color-success-contrast)}
+  //&.arm-icon_color_info{color:var(--color-info-contrast)}
+  //&.arm-icon_color_warning{color:var(--color-warning-contrast)}
+  //&.arm-icon_color_error{color:var(--color-error-contrast)}
 }

package/assets/Interval.scss

@@ -1,6 +1,5 @@
-@import "variables";
 
-.interval{
+.arm-interval{
   @include flex();
   width: 100%;
   & input{
@@ -12,7 +11,7 @@
     }
   }
 }
-.interval__end{
+.arm-interval__end{
   text-align: right;
   & + span{
     text-align: right;
@@ -20,16 +19,16 @@
     padding-right: 12px;
   }
 }
-.interval__item{
+.arm-interval__item{
   max-width: 50%;
   flex: 0 0 50%;
 }
 
-.interval__helperText{
+.arm-interval__helper{
   margin-top: calc($size-step / 2);
 }
 
-.intervalslide__slider{
+.arm-intervalslide__slider{
   padding: 0 calc($size-step * 2);
   margin-top: -7px;
 }