armtek-uikit-react 1.0.121 → 1.0.124

package/assets/StepItemIcon.scss

@@ -1,20 +1,19 @@
-@import "variables";
 
-.stepItemIcon{
+.arm-step-item-icon{
   @include flex(center);
   width: 24px;
   min-width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 1px solid;
-  & .stepItemIcon__number{
+  & .arm-step-item-icon__number{
     font-size: 16px;
   }
   &_small{
     width: 20px;
     min-width: 20px;
     height: 20px;
-    & .stepItemIcon__number{
+    & .arm-step-item-icon__number{
       font-size: 14px;
     }
   }
@@ -23,25 +22,25 @@
   background: #fff;
 }
 
-.stepItemIcon__inner{
+.arm-step-item-icon__inner{
   font-size: 0;
 }
 
-.stepItemIcon_active{
+.arm-step-item-icon_active{
   color: #fff;
   background: $color-primary;
-  &.stepItemIcon_icon{
+  &.arm-step-item-icon_icon{
     background: transparent;
     color: $color-primary;
     border: none;
   }
 }
-.stepItemIcon_complete{
+.arm-step-item-icon_complete{
   color: #fff;
   background: $color-success;
   border-color: $color-success;
 }
-.stepItemIcon_error{
+.arm-step-item-icon_error{
   color: $color-error-dark !important;
   background: transparent;
   border-color: transparent;

package/assets/Stepper.scss

@@ -1,26 +1,23 @@
-@import "variables";
 
-.stepper{
 
-}
-.stepper_horizontal{
+.arm-stepper_horizontal{
   display: flex;
 }
-.stepper__connector{
+.arm-stepper__connector{
   padding-left: 23px;
   border-left: 1px solid #B1BCC6;
   margin-left: 11px;
   height: 25px;
   margin-bottom: 5px;
 }
-.stepper_small{
-  & .stepper__connector{
+.arm-stepper_small{
+  & .arm-stepper__connector{
     padding-left: 19px;
     margin-left: 10px;
   }
 }
-.stepper_horizontal{
-  & .stepper__connector{
+.arm-stepper_horizontal{
+  & .arm-stepper__connector{
     height: 1px;
     width: auto;
     margin-right: 5px;

package/assets/Switch.scss

@@ -1,7 +1,6 @@
-@import "variables";
 
 
-.switch {
+.arm-switch {
   position: relative;
   display: inline-block;
   width: 34px;
@@ -9,14 +8,14 @@
 }
 
 
-.switch__input {
+.arm-switch__input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 
 /* The slider */
-.switch__slider {
+.arm-switch__slider {
   position: absolute;
   cursor: pointer;
   top: 0;
@@ -29,7 +28,7 @@
   border-radius: 7px;
 }
 
-.switch__slider:before {
+.arm-switch__slider:before {
   position: absolute;
   content: "";
   height: 20px;
@@ -43,25 +42,25 @@
   box-shadow: $box-shadow;
 }
 
-.switch__input:checked + .switch__slider {
+.arm-switch__input:checked + .arm-switch__slider {
   background-color: $color-orange-400;
 }
 
-.switch__input:checked + .switch__slider:before {
+.arm-switch__input:checked + .arm-switch__slider:before {
   -webkit-transform: translateX(22px);
   -ms-transform: translateX(22px);
   transform: translateX(22px);
   background: $color-secondary;
 }
 
-.switch_small{
+.arm-switch_small{
   width: 26px;
   height: 10px;
-  & .switch__slider:before{
+  & .arm-switch__slider:before{
     width: 16px;
     height: 16px;
   }
-  & .switch__input:checked + .switch__slider:before {
+  & .arm-switch__input:checked + .arm-switch__slider:before {
     -webkit-transform: translateX(20px);
     -ms-transform: translateX(20px);
     transform: translateX(18px);

package/assets/Table.scss

@@ -1,6 +1,5 @@
-@import "variables";
 
-.table{
+.arm-table{
   width: 100%;
   margin:0;
   padding:0;
@@ -10,31 +9,30 @@
   border-spacing:0;
 }
 
-.tableCell{
+.arm-table-row_click:hover td{
+  background: #F8F9FA;
+}
+
+.arm-table-cell{
   color: $color-gray-800;
   font-size: 14px;
+  border-bottom: 1px solid $color-gray-300;
+  background-color: #fff;
 }
-.tableCellInner{
+.arm-table-cell__inner{
   padding: calc($size-step * 2 ) $size-step;
 }
-.tableCellInner_size_small{
+.arm-table-cell__inner_size_small{
   padding: $size-step calc($size-step / 2 );
 }
-.tableCellInner_variant_outlined{
+.arm-table-cell__inner_variant_outlined{
   padding-left: 0;
   padding-right: 0;
 }
 
-.tableCell_head{
+.arm-table-cell_head{
   color: $color-gray-500
 }
-.tableCell{
-  border-bottom: 1px solid $color-gray-300;
-  background-color: #fff;
-}
-.tableCell_variant_outlined{
+.arm-table-cell_variant_outlined{
   background-color: transparent;
-}
-.tableRowClickable:hover td{
-  background: #F8F9FA;
 }

package/assets/TextArea.scss

@@ -1,19 +1,19 @@
-@import "variables";
 
-.textarea{
+.arm-textarea{
   font-family: $font-family;
   height: auto;
   min-height: $size-elarge;
   line-height: 20px;
-  &.size_small{
-    height: auto;
-    min-height: $size-large;
-  }
   & textarea{
     resize: none;
     appearance: none;
   }
 }
-.textarea__root{
+
+.arm-textarea_size_small{
+  height: auto;
+  min-height: $size-large;
+}
+.arm-textarea__root{
   height: auto;
 }

package/assets/TextField.scss

@@ -1,31 +1,26 @@
-@import "variables";
 
-.textfield_root{
+.arm-textfield_root{
   position: relative;
   overflow: hidden;
   border-radius: $radius;
-  border: 1px solid $color-gray-400;
+  border: 1px solid var(--color-gray-400);
   background-color: #fff;
   height: $size-elarge;
   @include flex();
   &:hover{
-    border-color: $color-gray-600;
+    border-color: var(--color-gray-600);
   }
-  &.textfield_root_focused{
-    border-color: $color-gray-800;
+  &.arm-textfield_root_focused{
+    border-color: var(--color-gray-800);
   }
-  &.textfield_root_disabled{
+  &.arm-textfield_root_disabled{
     pointer-events: none;
     background: $color-gray-100;
     border-color: transparent;
-    & .textfield__label{
+    & .arm-textfield__label{
       color: $color-gray-600;
     }
   }
-  &.size_small{
-    height: $size-large;
-    font-size: 14px;
-  }
   &_outlined{
     border-top:none;
     border-left: none;
@@ -33,35 +28,39 @@
     border-radius: 0;
   }
 }
-.textfield_root_outlined{
-  &.textfield_root_disabled{
+.arm-textfield_root_size_small{
+  height: $size-large;
+  font-size: 14px;
+}
+.arm-textfield_root_outlined{
+  &.arm-textfield_root_disabled{
     background: transparent;
     border-bottom-style: dotted;
     border-bottom-width: 1px;
     border-bottom-color: $color-gray-100;
   }
 }
-.textfield__wrapper{
+.arm-textfield__wrapper{
   cursor: text;
   position: relative;
   padding: 10px 12px 8px;
   width: 100%;
-  &._label{
-    padding: 25px 12px 8px;
-  }
-  &.size_small{
-    &._label{
-      padding: 18px 12px 4px
-    }
+}
+.arm-textfield__wrapper_label{
+  padding: 25px 12px 8px;
+}
+.arm-textfield__wrapper_size_small{
+  & .arm-textfield__wrapper_label{
+    padding: 18px 12px 4px
   }
 }
-.textfield__wrapper_outlined{
+.arm-textfield__wrapper_outlined{
   padding-left: 0 !important;
-  & .textfield__label{
+  & .arm-textfield__label{
     padding-left: 0;
   }
 }
-.textfield__input{
+.arm-textfield__input{
   display: block;
   width: 100%;
   font-size: 16px;
@@ -73,22 +72,22 @@
   &:focus{
     border-color: $color-gray-800;
   }
-  &.size_small{
-    font-size: 14px;
-    height: 20px;
-  }
-  &._label::placeholder{
-    opacity: 0;
-  }
 }
-.textfield_root_error{
+.arm-textfield__input_size_small{
+  font-size: 14px;
+  height: 20px;
+}
+.arm-textfield__input_label::placeholder{
+  opacity: 0;
+}
+.arm-textfield_root_error{
   border-color: var(--color-error-dark) !important;
 }
 
-.textfield__label_small{
+.arm-textfield__label_small{
   font-size: 14px;
 }
-.textfield__label{
+.arm-textfield__label{
   pointer-events: none;
   color: $color-gray-600;
   white-space: nowrap;
@@ -101,20 +100,20 @@
   width: calc(100% - 2px);
   padding-top:8px;
   line-height: 1.2;
-  &_small{
-    top: 4px;
-  }
-  &_focused{
-    font-size: 12px;
-    transform: none;
-    top: 1px;
-    &.textfield__label_small{
-      padding-top:4px
-    }
+}
+.arm-textfield__label_small{
+  top: 4px;
+}
+.arm-textfield__label_focused{
+  font-size: 12px;
+  transform: none;
+  top: 1px;
+  &.arm-textfield__label_small{
+    padding-top:4px
   }
 }
 
-.textfield__input_outlined{
+.arm-textfield__input_outlined{
   border-left:none;
   border-top:none;
   border-right: none;
@@ -126,40 +125,40 @@
     border-right: none;
   }
   border-radius: 0;
-  & + .textfield__label{
+  & + .arm-textfield__label{
     left:0;
   }
   &:disabled{
-    & + .textfield__label{
+    & + .arm-textfield__label{
       color: $color-gray-400;
     }
   }
 }
 
-.textfield__label_error{
+.arm-textfield__label_error{
   color: $color-error-dark;
 }
-.textfield__adornment{
+.arm-textfield__adornment{
   z-index: 5;
   height: 100%;
   padding-right: 10px;
-  & > .Arm-adornment{
+  & > .arm-adornment{
     font-size: 0;
   }
 }
-.textfield__helperText{
+.arm-textfield__helperText{
   margin-top: calc($size-step / 2);
 }
-.textfield_disabled{
-  & + .textfield__helperText{
+.arm-textfield_disabled{
+  & + .arm-textfield__helperText{
     color: $color-gray-600;
   }
-  & .textfield_outlined{
-    & .textfield__helperText{
+  & .arm-textfield_outlined{
+    & .arm-textfield__helperText{
       color: $color-gray-400;
     }
   }
-  & .textfield__icon{
+  & .arm-textfield__icon{
     color: $color-gray-400;
   }
 }

package/assets/Tooltip.scss

@@ -1,10 +1,9 @@
-@import "variables";
 
-.tooltip{
+.arm-tooltip{
   display: inline-block;
   position: relative;
 }
-.tooltip__item{
+.arm-tooltip__item{
   //position: absolute;
   padding: $size-step;
   border-radius: $radius;

package/assets/{global.css → classes.scss}

@@ -1,200 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:wght@400;500;700&display=swap');
-
-body{
-    font-family: 'Roboto';
-}
-
-::-webkit-scrollbar {
-    width: 4px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-::-webkit-scrollbar-thumb {
-    background-color: #DFE2E6;
-    border-radius: 0px;
-}
-:root{
-    --font-family: 'Roboto';
-    --size-elarge: 56px;
-    --size-large: 42px;
-    --size-medium: 36px;
-    --size-small: 30px;
-    --size-step: 8px;
-    --border-radius: 4px;
-    --box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1);
-    --font-weight-regular: 400;
-    --font-weight-medium: 500;
-    --font-weight-bold: 700;
-    --color-primary: #254FE9;
-    --color-primary-rgba: 37, 79, 233;
-    --color-primary-dark: #1D49D5;
-    --color-primary-light: #4277FD;
-    --color-primary-opacity: rgba(37, 79, 233, 0.08);
-    --color-primary-contrast: #ffffff;
-
-    --color-secondary: #FF7F00;
-    --color-secondary-rgba: 255, 127, 0;
-    --color-secondary-light: #FFA140;
-    --color-secondary-light-rgb: 255, 161, 64;
-    --color-secondary-dark: #D96C00;
-    --color-secondary-opacity: rgba(255, 127, 0, 0.08);
-    --color-secondary-contrast: #ffffff;
-
-    --color-neutral: #4D5359;
-    --color-neutral-rgba: 77, 83, 89;
-    --color-neutral-light: #9AA4AE;
-    --color-neutral-dark: #40454A;
-    --color-neutral-opacity: rgba(77, 83, 89, 0.08);
-    --color-neutral-contrast: #ffffff;
-
-    --color-error: #FF3342;
-    --color-error-rgba: 255, 51, 66;
-    --color-error-light: #FA4D56;
-    --color-error-dark: #D92B38;
-    --color-error-opacity: rgba(245, 49, 63, 0.08);
-    --color-error-contrast: #ffffff;
-
-    --color-warning: #FFC61A;
-    --color-warning-light: #FFD249;
-    --color-warning-dark: #E8A915;
-    --color-warning-opacity: rgba(255, 198, 26, 0.08);
-    --color-warning-contrast: #212529;
-
-    --color-info: #254FE9;
-    --color-info-light: #4277FD;
-    --color-info-dark: #1D49D5;
-    --color-info-opacity: rgba(13, 70, 255, 0.08);
-    --color-info-contrast: #ffffff;
-
-    --color-success: #0BD998;
-    --color-success-rgb: 11, 217, 152;
-    --color-success-light: #38E6A4;
-    --color-success-dark: #00A66F;
-    --color-success-opacity: rgba(11, 196, 127, 0.08);
-    --color-success-contrast: #212529;
-
-    --color-orange-a700: #FFA140;
-    --color-orange-a400: #FFC68C;
-    --color-orange-a200: #FFD9B3;
-    --color-orange-a100: #FFE6CC;
-    --color-orange-d2: #BD5E00;
-    --color-orange-d1: #D96C00;
-    --color-orange-900: #FF7F00;
-    --color-orange-800: #FF9426;
-    --color-orange-700: #FFA140;
-    --color-orange-600: #FFAD59;
-    --color-orange-500: #FFBA73;
-    --color-orange-400: #FFC68C;
-    --color-orange-300: #FFD3A6;
-    --color-orange-200: #FFD9B3;
-    --color-orange-100: #FFE6CC;
-    --color-orange-50: #FFF8F0;
-
-    --color-blue-a700: #4277FD;
-    --color-blue-a400: #99C2FF;
-    --color-blue-a200: #CCE4FF;
-    --color-blue-a100: #DFF0FF;
-    --color-blue-d2: #1841BE;
-    --color-blue-d1: #1D49D5;
-    --color-blue-900: #254FE9;
-    --color-blue-800-rgba: 47, 97, 248;
-    --color-blue-800: #2F61F8;
-    --color-blue-700: #4277FD;
-    --color-blue-600: #6092FF;
-    --color-blue-500: #79ACFF;
-    --color-blue-400: #99C2FF;
-    --color-blue-300: #B6D7FF;
-    --color-blue-200: #CCE4FF;
-    --color-blue-100: #DFF0FF;
-    --color-blue-50: #F2F9FF;
-
-    --color-gray-a700: #4D5359;
-    --color-gray-a400: #B1BCC6;
-    --color-gray-a200: #DFE2E6;
-    --color-gray-a100: #212529;
-    --color-gray-900: #212529;
-    --color-gray-800: #40454A;
-    --color-gray-700: #4D5359;
-    --color-gray-600: #6C757D;
-    --color-gray-500: #9AA4AE;
-    --color-gray-500-rgba: 154, 164, 174;
-    --color-gray-400: #B1BCC6;
-    --color-gray-300: #D3DAE1;
-    --color-gray-200: #DFE2E6;
-    --color-gray-100: #E9ECEF;
-    --color-gray-50: #F8F9FA;
-
-    --color-red-a700: #FA4D56;
-    --color-red-a400: #FC9D9E;
-    --color-red-a200: #FCCFCF;
-    --color-red-a100: #FCE1E1;
-    --color-red-d2: #AA2230;
-    --color-red-d1: #D62B39;
-    --color-red-900: #F5313F;
-    --color-red-800: #FA3D46;
-    --color-red-700: #FA4D56;
-    --color-red-600: #FA696D;
-    --color-red-500: #FA8286;
-    --color-red-400: #FC9D9E;
-    --color-red-300: #FCB7B8;
-    --color-red-200: #FCCFCF;
-    --color-red-100: #FCE1E1;
-    --color-red-50: #FFF2F2;
-
-    --color-yellow-a700: #FFD249;
-    --color-yellow-a400: #FFE18F;
-    --color-yellow-a200: #FFEEB8;
-    --color-yellow-a100: #FFF3C8;
-    --color-yellow-d2: #80580F;
-    --color-yellow-d1: #E8A915;
-    --color-yellow-900: #FFC61A;
-    --color-yellow-800: #FFCC31;
-    --color-yellow-700: #FFD249;
-    --color-yellow-600: #FFD45E;
-    --color-yellow-500: #FFDB75;
-    --color-yellow-400: #FFE18F;
-    --color-yellow-300: #FFE8A4;
-    --color-yellow-200: #FFEEB8;
-    --color-yellow-100: #FFF3C8;
-    --color-yellow-50: #FFF8D4;
-
-    --color-green-a700: #38E6A4;
-    --color-green-a400: #90F5C9;
-    --color-green-a200: #C5FAE1;
-    --color-green-a100: #DEFDEE;
-    --color-green-d2: #008059;
-    --color-green-d1: #00A66F;
-    --color-green-900: #0BC47F;
-    --color-green-800: #1FDB93;
-    --color-green-800-rgba: 31, 219, 147;
-    --color-green-700: #38E6A4;
-    --color-green-600: #58EDB1;
-    --color-green-500: #74F2BD;
-    --color-green-400: #90F5C9;
-    --color-green-300: #ACF7D6;
-    --color-green-200: #C5FAE1;
-    --color-green-100: #DEFDEE;
-    --color-green-50: #EEFEF6;
-}
-
-@font-face {
-    font-family: 'Material Symbols Outlined';
-    font-style: normal;
-    font-weight: 400;
-    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v133/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
-}
-
-* {
-    box-sizing: border-box;
-}
-@font-face {
-    font-family: 'Material Symbols Outlined';
-    font-style: normal;
-    font-weight: 700;
-    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v134/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
-}
 
 .border-radius {border-radius: var(--border-radius)}
 
@@ -598,36 +401,3 @@ body{
 .pr-6{padding-right:calc(var(--size-step) * 6)}
 
 .relative{position: relative}
-
-.mi,
-.material_icon {
-    font-family: 'Material Symbols Outlined';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-}
-.mis,
-.material_icon_solid{
-    font-family: 'Material Symbols Outlined';
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-    font-weight: 700;
-}