armtek-uikit-react 1.0.121 → 1.0.124

package/assets/Link.scss

@@ -1,6 +1,6 @@
 @import "./../assets/variables";
 
-.link{
+.arm-link{
   transition: 0.2s all ease;
   cursor: pointer;
   display: inline;
@@ -15,59 +15,59 @@
     color: var(--color-primary-light)
   }
 }
-.link_size_small{
+.arm-link_size_small{
   font-size: 13px;
 }
-.link_size_medium{
+.arm-link_size_medium{
   font-size: 16px;
 }
-.link_size_large{
+.arm-link_size_large{
   font-size: 20px;
 }
-.link_color_secondary{
+.arm-link_color_secondary{
   color: var(--color-secondary);
   &:hover{
     color: var(--color-secondary-light)
   }
 }
-.link_color_neutral{
+.arm-link_color_neutral{
   color: var(--color-neutral);
   &:hover{
     color: var(--color-secondary-light)
   }
 }
-.link_color_success{
+.arm-link_color_success{
   color: var(--color-success);
   &:hover{
     color: var(--color-success-light)
   }
 }
-.link_color_error{
+.arm-link_color_error{
   color: var(--color-error);
   &:hover{
     color: var(--color-error-light);
   }
 }
-.link_color_info{
+.arm-link_color_info{
   color: var(--color-info);
   &:hover{
     color: var(--color-info-light);
   }
 }
-.link_color_warning{
+.arm-link_color_warning{
   color: var(--color-warning);
   &:hover{
     color: var(--color-warning-light);
   }
 }
-.link_dark{
+.arm-link_dark{
   color: #fff;
 }
-.link_disabled{
+.arm-link_disabled{
   opacity: 0.7;
   pointer-events: none;
 }
-.link_border{
+.arm-link_border{
   border-color: initial;
   border-top:0;
   border-left: 0;
@@ -77,12 +77,12 @@
     border-color: transparent;
   }
 }
-.link_border_solid{
+.arm-link_border_solid{
   border-style: solid;
 }
-.link_border_dashed{
+.arm-link_border_dashed{
   border-style: dashed;
 }
-.link_border_dotted{
+.arm-link_border_dotted{
   border-style: dotted;
 }

package/assets/ListItem.scss

@@ -1,6 +1,6 @@
 @import "variables";
 
-.listitem{
+.arm-listitem{
   outline: none;
   padding: calc($size-step * 1.5) calc($size-step * 2);
   color: $color-neutral;
@@ -18,51 +18,51 @@
   &:hover{
     background: $color-gray-50;
   }
-  &.listitem_active,
+  &.arm-listitem_active,
   &:active{
     background: rgba($color-primary, 0.1);
   }
 }
 
-.listitem_disabled{
+.arm-listitem_disabled{
   pointer-events: none;
   background: #fff;
   color: $color-gray-400;
   user-select: none;
   cursor: default;
 }
-.listitem__Content{
+.arm-listitem__content{
   display: block;
   margin-right: calc($size-step * 2);
 }
-.listitem__Content_adornment_left{
+.arm-listitem__content_adornment_left{
   margin-left: calc($size-step * 2);
 }
-.listitem_endAdornment{
+.arm-listitem_endAdornment{
 
 }
-.listitem_divider{
+.arm-listitem_divider{
   border-bottom: 1px solid $color-gray-200;
 }
-.listitemText{
+.arm-listitem__text{
   display: block;
 }
-.listitem__helper{
+.arm-listitem__helper{
   margin-top: calc($size-step / 2);
   display: block;
   color: $color-neutral-light;
 }
-.listitem_dark{
+.arm-listitem_dark{
   background-color: var(--color-gray-700);
   color: var(--color-gray-200);
   &:hover{
     background-color: rgba(255, 255, 255, 0.1);
   }
-  &.listitem_active,
+  &.arm-listitem_active,
   &:active{
     background-color: rgba(255, 255, 255, 0.2);
   }
-  &.listitem_disabled{
+  &.arm-listitem_disabled{
     color: var(--color-gray-600);
     background-color: var(--color-gray-700);
   }

package/assets/Loader.scss

@@ -7,7 +7,7 @@
   -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - $size),#000 0);
 }
 
-.loader{
+.arm-loader{
   width: 20px;
   height: 20px;
   aspect-ratio: 1;
@@ -15,26 +15,26 @@
   @include bg();
   animation: s3 1s infinite linear;
 }
-.loader_color_primary{
+.arm-loader_color_primary{
   @include bg(var(--color-primary));
 }
-.loader_color_secondary{
+.arm-loader_color_secondary{
   @include bg(var(--color-secondary));
 }
 
-.loader_size_small{
+.arm-loader_size_small{
   width: 20px;
   height: 20px;
 }
-.loader_size_medium{
+.arm-loader_size_medium{
   width: 23px;
   height: 23px;
 }
-.loader_size_large{
+.arm-loader_size_large{
   width: 25px;
   height: 25px;
 }
-.loader_size_extraLarge{
+.arm-loader_size_extraLarge{
   width: 30px;
   height: 30px;
   background-position: top/6px 6px !important;
@@ -43,8 +43,8 @@
 @keyframes s3{
   100%{transform: rotate(1turn)}
 }
-.loader_theme_dark{
-  &.loader_color_neutral{
+.arm-loader_theme_dark{
+  &.arm-loader_color_neutral{
     @include bg(#fff);
   }
 }

package/assets/Logo.scss

@@ -1,29 +1,29 @@
 @import "variables";
 
-.logo{
+.arm-logo{
   display: inline-block;
 }
-.logo_shape{
+.arm-logo_shape{
   box-shadow: $box-shadow;
   padding: calc($size-step * 2);
   transform: skewX(-10deg);
-  & .logo__inner{
+  & .arm-logo__inner{
     transform: skewX(10deg);
   }
 }
-.logo__inner{
+.arm-logo__inner{
 
 }
 
-.logo__img{
+.arm-logo__img{
   font-size: 0;
 }
-.logo__description{
+.arm-logo__description{
   color: $color-gray-900;
   font-size: 14px;
   font-style: italic;
   margin-top: 2px;
 }
-.logo_inverse .logo__description{
+.arm-logo_inverse .arm-logo__description{
   color: #fff;
 }

package/assets/Modal.scss

@@ -1,11 +1,11 @@
 @import "variables";
 
-.Modal{
+.arm-modal{
   border-radius: $radius;
   width: 100%;
   background-color: #fff;
 }
-.Modal__header{
+.arm-modal__header{
   background: $color-gray-200;
   min-height: 78px;
   display: flex;
@@ -15,23 +15,23 @@
   border-top-right-radius:$radius;
   position: relative;
 }
-.Modal__title{
+.arm-modal__title{
   font-size: 20px;
   color: $color-gray-900;
 }
-.Modal__body{
+.arm-modal__body{
   padding: calc($size-step * 4)
 }
-.Modal__footer{
+.arm-modal__footer{
   margin-top: calc(var(--size-step) * 4);
   padding: 0 calc($size-step * 4) calc($size-step * 4) calc($size-step * 4)
 }
-.Modal__close{
+.arm-modal__close{
   position: absolute;
   right: calc($size-step * 4);
   top: 50%;
   transform: translateY(-50%);
 }
-.Modal__backdrop{
+.arm-modal__backdrop{
   background: rgba(0, 0, 0, 0.25);
 }

package/assets/Paper.scss

@@ -1,20 +1,20 @@
 @import "variables";
 
-.Paper{
+.arm-paper{
   border-radius: var(--border-radius);
   background-color: #fff;
   padding: calc(var(--size-step) * 2);
 }
-.Paper_elevation{
+.arm-paper_elevation{
   box-shadow: var(--box-shadow);
 }
-.Paper_outlined{
+.arm-paper_outlined{
   border: 1px solid var(--color-gray-300)
 }
 
-.Paper_dark{
+.arm-paper_dark{
   background-color: var(--color-gray-700);
-  &.Paper_outlined{
+  &.arm-paper_outlined{
     border: 1px solid rgba(255, 255, 255, 0.2)
   }
 }

package/assets/Period.scss

@@ -1,9 +1,7 @@
-@import "variables";
-
-.dateField{
+.arm-period{
   position: relative;
 }
-.dateField__picker{
+.arm-period__picker{
   position: absolute;
   top: 100%;
   right: 0;

package/assets/Rating.scss

@@ -1,19 +1,18 @@
-@import "variables";
 
-.rating{
+.arm-rating{
   @include flex();
 }
-.rating__item{
+.arm-rating__item{
   cursor: pointer;
   color: #F7B519;
   font-size: 30px;
 }
-.rating_medium{
+.arm-rating__item_medium{
   font-size: 24px;
 }
-.rating_small{
+.arm-rating__item_small{
   font-size: 18px;
 }
-.rating__item_disabled{
+.arm-rating__item_disabled{
   color: $color-gray-400;
 }

package/assets/Select.scss

@@ -1,18 +1,18 @@
 @import "variables";
 
-.select{
+.arm-select{
   position: relative;
 }
-.select__input_wrapper{
+.arm-select__input_wrapper{
 
 }
-.select__input{
+.arm-select__input{
   cursor: pointer;
   & * {
     cursor: pointer;
   }
 }
-.options{
+.arm-options{
   padding: $size-step 0;
   border-radius: $radius;
   box-shadow: $box-shadow;
@@ -25,25 +25,25 @@
   max-height: 400px;
   overflow: auto;
 }
-.options_inline{
+.arm-options_inline{
   position: static;
 }
-.selectSummary__wrapper{
+.arm-selectSummary__wrapper{
   padding: calc($size-step * 2) calc($size-step * 2) $size-step;
-  & .selectSummary{
+  & .arm-selectSummary{
     border-top: 1px solid $color-gray-300;
   }
 }
-.selectSummary{
+.arm-selectSummary{
   background: #fff;
 }
-.selectSummary__row{
+.arm-selectSummary__row{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top:$size-step;
 }
-.selectSummary__check{
+.arm-selectSummary__check{
   margin-right: 60px;
   font-size: 13px;
   color: $color-gray-600;
@@ -52,28 +52,28 @@
     margin-right: auto;
   }
 }
-.selectSummary__check_disabled{
+.arm-selectSummary__check_disabled{
   opacity: 0.5;
   cursor: default;
 }
-.selectSummary__checkLabel{
+.arm-selectSummary__checkLabel{
   border-bottom: 1px dotted $color-gray-600;
 }
-.selectSummary__options{
+.arm-selectSummary__options{
   border-bottom: 1px solid $color-gray-300;
   padding: 0 0 calc($size-step) 0;
   margin-bottom: calc($size-step / 2);
 }
-.selectSummary__optionList{
+.arm-selectSummary__optionList{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.selectSummary__option{
+.arm-selectSummary__option{
   margin-right: $size-step;
   margin-top: $size-step;
 }
-.selectSummary__button{
+.arm-selectSummary__button{
   width: 100px;
   padding-left: 0;
   padding-right: 0;

package/assets/Skeleton.scss

@@ -1,11 +1,11 @@
 @import "variables";
 
-.skeleton{
+.arm-skeleton{
   background-color: $color-gray-100;
   animation: shine-lines 1.6s infinite linear;
   opacity: 0;
 }
-.skeleton_circle{
+.arm-skeleton_circle{
   border-radius: 50%;
 }
 @keyframes shine-lines {

package/assets/Slider.scss

@@ -1,6 +1,6 @@
 @import "variables";
 
-.slider__helperText{
+.arm-slider__text{
   @include flex(space-between);
   margin-top: 8px;
 }

package/assets/Stack.scss

@@ -1,29 +1,28 @@
-@import "./../assets/variables";
 
-.stack{
+.arm-stack{
   display: flex;
 }
-.stack_spacing_small{
+.arm-stack_spacing_small{
   margin: 0 calc(var(--size-step) / 2 * -1)
 }
-.stack_spacing_medium{
+.arm-stack_spacing_medium{
   margin: 0 calc(var(--size-step) / 2 * -2)
 }
-.stack_spacing_large{
+.arm-stack_spacing_large{
   margin: 0 calc(var(--size-step) / 2 * -3)
 }
-.stack_spacing_extraLarge{
+.arm-stack_spacing_extraLarge{
   margin: 0 calc(var(--size-step) / 2 * -4)
 }
-.stackItem_spacing_small{
+.arm-stack-item_spacing_small{
   margin: 0 calc(var(--size-step) / 2 * 1)
 }
-.stackItem_spacing_medium{
+.arm-stack-item_spacing_medium{
   margin: 0 calc(var(--size-step) / 2 * 2)
 }
-.stackItem_spacing_large{
+.arm-stack-item_spacing_large{
   margin: 0 calc(var(--size-step) / 2 * 3)
 }
-.stackItem_spacing_extraLarge{
+.arm-stack-item_spacing_extraLarge{
   margin: 0 calc(var(--size-step) / 2 * 4)
 }

package/assets/Status.scss

@@ -1,6 +1,5 @@
-@import "variables";
 
-.status{
+.arm-status{
   display: inline-flex;
   align-items: center;
   padding: 3px 8px 1px;
@@ -10,43 +9,43 @@
   font-weight: 400;
   font-family: inherit;
 }
-.status_primary{
+.arm-status_primary{
   background: rgba($color-primary-dark, 0.2);
   color: $color-primary-dark;
 }
-.status_secondary{
+.arm-status_secondary{
   background: rgba($color-secondary-dark, 0.2);
   color: $color-secondary-dark;
 }
-.status_neutral{
+.arm-status_neutral{
   background: rgba(#4D5359, 0.2);
   color: rgba(#212529, 0.7);
 }
-.status_error{
+.arm-status_error{
   background: rgba($color-error-dark, 0.2);
   color: $color-error-dark;
 }
-.status_warning{
+.arm-status_warning{
   background: rgba(#FFC61A, 0.2);
   color: $color-secondary-dark;
 }
-.status_info{
+.arm-status_info{
   background: rgba(#0D46FF, 0.2);
   color: $color-primary-dark;
 }
-.status_success{
+.arm-status_success{
   background: rgba(#0BD998, 0.2);
   color: $color-success-dark;
 }
-.status__content{
+.arm-status__content{
   font-size: 14px;
   line-height: 1;
 }
-.status__icon{
+.arm-status__icon{
   margin-left: 4px;
   font-size: 14px;
   line-height: 1.5;
 }
-.status_size_medium{
+.arm-status_size_medium{
   height: 24px;
 }

package/assets/StepItem.scss

@@ -1,62 +1,61 @@
-@import "variables";
 
-.stepItem__inner{
+.arm-step-item__inner{
   @include flex(flex-start, flex-start)
 }
 
-.stepItem__title{
+.arm-step-item__title{
   margin: 2px 0 0 $size-step;
   position: relative;
   background: #fff;
   padding-right: 5px;
 }
-.stepItem__title_with_content{
+.arm-step-item__title_with_content{
   font-weight: 700;
 }
-.stepItem__title_error{
+.arm-step-item__title_error{
   color: $color-error-dark
 }
 
-.stepItem__content{
+.arm-step-item__content{
   padding-left: 23px;
   border-left: 1px solid #B1BCC6;
   margin-left: 11px;
   margin-top:5px;
   position: relative;
 }
-.stepItem__button{
+.arm-step-item__button{
   margin-top: $size-step;
 }
 
 
-.stepItem_small{
-  & .stepItem__content,
-  & .stepItem__title{
+.arm-step-item_small{
+  & .arm-step-item__content,
+  & .arm-step-item__title{
     font-size: 14px;
   }
-  & .stepItem__content{
+  & .arm-step-item__content{
     padding-left: 19px;
     margin-left: 10px;
   }
-  &.stepItem_horizontal{
-    & .stepItem__content:before{
+  &.arm-step-item_horizontal{
+    & .arm-step-item__content:before{
       top: -15px;
     }
   }
 }
-.stepItem_last{
-  & .stepItem__content{
+.arm-step-item_last{
+  & .arm-step-item__content{
     border-color:transparent;
     &:before{
       display: none;
     }
   }
 }
-.stepItem_horizontal{
-  & .stepItem__content{
+.arm-step-item_horizontal{
+  & .arm-step-item__content{
     border-color:transparent;
   }
-  & .stepItem__content:before{
+  & .arm-step-item__content:before{
     display: none;
     content: '';
     position: absolute;
@@ -67,14 +66,14 @@
     background: #B1BCC6;
     z-index: -1;
   }
-  & .stepItem__inner{
+  & .arm-step-item__inner{
     position: relative;
   }
-  & .stepItem__title{
+  & .arm-step-item__title{
     margin-left: 0;
     padding-left: 8px;
   }
-  & .stepItem__inner:before{
+  & .arm-step-item__inner:before{
     content: '';
     position: absolute;
     top: 10px;
@@ -84,7 +83,7 @@
     background: #B1BCC6;
     z-index: -1;
   }
-  &.stepItem_last .stepItem__inner:before{
+  &.arm-step-item_last .arm-step-item__inner:before{
     display: none;
   }
 }