armtek-uikit-react 1.0.121 → 1.0.124

package/assets/Accordion.scss

@@ -1,86 +1,86 @@
 @import "variables";
 
-.Accordion_variant_section {
-  & + .Accordion_variant_section{
+.arm-accordion_variant_section {
+  & + .arm-accordion_variant_section{
     border-top: 1px solid var(--color-gray-300);
     //padding-top: calc(var(--size-step) * 3);
     //padding-bottom: calc(var(--size-step) * 3);
   }
 }
 
-.AccordionHead{
+.arm-accordion__head{
   position: relative;
   padding-right: 40px;
 }
-.AccordionContents > *:last-child{
+.arm-accordion__content > *:last-child{
     margin-bottom: 0;
 }
-.AccordionContents > *:first-child{
+.arm-accordion__content > *:first-child{
     margin-top: 0;
 }
 
 
-.Accordion_size_large{
+.arm-accordion_size_large{
   //padding: calc(var(--size-step) * 3) var(--size-step);
 }
-.AccordionToggle{
+.arm-accordion__toggle{
   position: absolute;
   right: var(--size-step);
   top:50%;
   transform: translateY(-50%);
 }
-.Accordion_variant_blockquote{
+.arm-accordion_variant_blockquote{
   padding-left: calc(var(--size-step) * 2);
   border-left: 5px solid transparent;
 }
-.Accordion_color_primary{
+.arm-accordion_color_primary{
   border-color: var(--color-primary);
 }
-.Accordion_color_secondary{
+.arm-accordion_color_secondary{
   border-color: var(--color-secondary);
 }
-.Accordion_color_neutral{
+.arm-accordion_color_neutral{
   border-color: var(--color-neutral);
 }
-.Accordion_color_success{
+.arm-accordion_color_success{
   border-color: var(--color-success);
 }
-.Accordion_color_error{
+.arm-accordion_color_error{
   border-color: var(--color-error);
 }
-.Accordion_color_warning{
+.arm-accordion_color_warning{
   border-color: var(--color-warning);
 }
-.Accordion_color_info{
+.arm-accordion_color_info{
   border-color: var(--color-info);
 }
-.AccordionTitle_variant_alert,
-.AccordionTitle_variant_section{
+.arm-accordion__title_variant_alert,
+.arm-accordion__title_variant_section{
   font-weight: 700;
 }
 
-.Accordion_variant_contained {
+.arm-accordion_variant_contained {
   background-color: var(--color-gray-100);
   padding: calc(var(--size-step) * 2);
-  &.Accordion_color_primary{
+  &.arm-accordion_color_primary{
     background-color: var(--color-primary);
     color: #fff;
   }
-  &.Accordion_color_secondary{
+  &.arm-accordion_color_secondary{
     background-color: var(--color-secondary);
     color: #fff;
   }
-  &.Accordion_color_success{
+  &.arm-accordion_color_success{
     background-color: var(--color-success);
   }
-  &.Accordion_color_error{
+  &.arm-accordion_color_error{
     background-color: var(--color-error);
     color: #fff;
   }
-  &.Accordion_color_warning{
+  &.arm-accordion_color_warning{
     background-color: var(--color-warning);
   }
-  &.Accordion_color_info{
+  &.arm-accordion_color_info{
     background-color: var(--color-info);
     color: #fff;
   }

package/assets/Adornment.scss

@@ -1,22 +1,22 @@
 @import "variables";
 
-.adornment > *{
+.arm-adornment > *{
   display: block;
 }
 
-.adornmentContainer{
+.arm-adornment__container{
   display: flex;
   align-items: center;
 }
-.adornmentContainer_end{
+.arm-adornment__container_end{
   margin-left: auto;
 }
-.adornment_end{
+.arm-adornment_end{
   & + * {
     margin-left: $size-step;
   }
 }
-.adornment_start{
+.arm-adornment_start{
   & + * {
     margin-left: $size-step;
   }

package/assets/Alert.scss

@@ -1,41 +1,38 @@
 @import "variables";
 
-.alert{
+.arm-alert{
   padding: calc($size-step * 2) calc($size-step * 5) calc($size-step * 2) calc($size-step * 7);
   background: $color-gray-300;
   border-radius: $radius;
   position: relative;
 }
-.alert__title{
+.arm-alert__title{
   font-weight: 700;
   margin-bottom: calc($size-step / 2);
 }
-.alert__close{
+.arm-alert__close{
   position: absolute;
   top: calc($size-step / 2);
   right: calc($size-step / 2);
 }
-.alert__icon{
+.arm-alert__icon{
   position: absolute;
   top: calc($size-step * 2);
   left: calc($size-step * 2);
 }
-.alert_success{
+.arm-alert_success{
   color: $color-success-dark;
   background: $color-green-50;
 }
-.alert_warning{
+.arm-alert_warning{
   color: $color-secondary-dark;
   background: $color-orange-50;
 }
-.alert_info{
+.arm-alert_info{
   color: $color-primary-dark;
   background: $color-blue-50;
 }
-.alert_error{
+.arm-alert_error{
   color: $color-error-dark;
   background: $color-red-50;
-}
-.alert__body{
-
 }

package/assets/Avatar.scss

@@ -1,84 +1,86 @@
 @import "variables";
 
-.avatar{
+.arm-avatar{
   width: $size-elarge;
   height: $size-elarge;
   min-width: $size-elarge;
   border-radius: 50%;
-  background: $color-primary;
+  background: var(--color-primary);
   color: #fff;
   position: relative;
 }
-.avatar__photo{
+.arm-avatar__photo{
   background: none;
 }
-.avatar__icon{
-  background: $color-gray-400;
+.arm-avatar__icon{
+  background: var(--color-gray-400);
 }
-.avatar__inner{
+.arm-avatar__inner{
   overflow: hidden;
   border-radius: 50%;
   width: 100%;
   height: 100%;
   @include flex(center);
 }
-.avatar__innerText{
+.arm-avatar__text{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
+  text-decoration: none;
+  color: inherit;
 }
-.avatar_medium{
+.arm-avatar_medium{
   width: 40px;
   height: 40px;
   min-width: 40px;
-  & .avatar__name{
+  & .arm-avatar__name{
     font-size: 16px;
   }
-  & .avatar__icon{
+  & .arm-avatar__icon{
     font-size: 30px;
   }
-  & .avatar__status{
+  & .arm-avatar__status{
     right: -2px;
     bottom: -2px;
   }
 }
-.avatar_small{
+.arm-avatar_small{
   width: 24px;
   height: 24px;
   min-width: 24px;
-  & .avatar__name{
+  & .arm-avatar__name{
     font-size: 12px;
   }
-  & .avatar__icon{
-    font-size: 20px;
+  & .arm-avatar__icon{
+    font-size: 14px;
   }
-  & .avatar__status{
+  & .arm-avatar__status{
     right: -5px;
     bottom: -2px;
   }
 }
-.avatar__inner{
+.arm-avatar__inner{
   font-size: 0;
   width:100%;
   height: 100%;
   display: block;
 }
-.avatar__name{
+.arm-avatar__name{
   font-size: 24px;
 }
-.avatar__icon{
+.arm-avatar__icon{
   font-size: 38px;
 }
-.avatar__img{
+.arm-avatar__img{
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.avatar__status{
+.arm-avatar__status{
   position: absolute;
   width: 14px;
   height: 14px;
@@ -87,12 +89,12 @@
   right: 0;
   bottom: 0;
 }
-.avatar__status_success{
-  background: $color-success;
+.arm-avatar__status_success{
+  background: var(--color-success);
 }
-.avatar__status_error{
-  background: $color-error-dark;
+.arm-avatar__status_error{
+  background: var(--color-error-dark);
 }
-.avatar__status_warning{
-  background: $color-warning;
+.arm-avatar__status_warning{
+  background: var(--color-warning);
 }

package/assets/AvatarGroup.scss

@@ -1,20 +1,18 @@
-@import "variables";
-
-.avatarGroup{
+.arm-avatar-group{
   @include flex(flex-end);
   transform: scale(-1, 1);
 }
-.avatarGroup_medium{
-  & .avatarGroup__item + .avatarGroup__item{
+.arm-avatar-group_medium{
+  & .arm-avatar-group__item + .arm-avatar-group__item{
     margin-left: -12px;
   }
 }
-.avatarGroup_small{
-  & .avatarGroup__item + .avatarGroup__item{
+.arm-avatar-group_small{
+  & .arm-avatar-group__item + .arm-avatar-group__item{
     margin-left: -8px;
   }
 }
-.avatarGroup__remains{
+.arm-avatar-group__remains{
   width: 60px;
   height: 60px;
   min-width: 60px;
@@ -24,25 +22,25 @@
   font-size: 24px;
   color: #fff;
 }
-.avatarGroup__remains_medium{
+.arm-avatar-group__remains_medium{
   width: 44px;
   height: 44px;
   min-width: 44px;
   font-size: 16px;
 }
-.avatarGroup__remains_small{
+.arm-avatar-group__remains_small{
   width: 28px;
   height: 28px;
   min-width: 28px;
   font-size: 12px;
 }
 
-.avatarGroup__item{
+.arm-avatar-group__item{
   position: relative;
   transform: scale(-1, 1);
   border: 2px solid #fff;
   border-radius: 50%;
-  & + .avatarGroup__item{
+  & + .arm-avatar-group__item{
     margin-left: -15px;
   }
 }

package/assets/BackDrop.scss

@@ -1,6 +1,5 @@
-@import "variables";
 
-.BackDropBase {
+.arm-backdrop {
   position: fixed;
   top:0;
   left: 0;
@@ -11,14 +10,14 @@
   align-items: center;
   justify-content: center;
 }
-.BackDropBase__overlay{
+.arm-backdrop__overlay{
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   position: absolute;
 }
-.BackDropBase__inner{
+.arm-backdrop__inner{
   position: relative;
   z-index: 2;
   max-width: 500px;

package/assets/Badge.scss

@@ -1,6 +1,4 @@
-@import "variables";
-
-.badge{
+.arm-badge{
   display: inline-block;
   position: relative;
 }
@@ -8,7 +6,7 @@
 $vertical_offset: calc(100% - 6px);
 $horizontal_offset: calc(100% - 6px);
 
-.badge__item{
+.arm-badge__item{
   background: $color-error;
   color: #fff;
   position: absolute;
@@ -40,15 +38,15 @@ $horizontal_offset: calc(100% - 6px);
     color: $color-gray-900;
   }
 }
-.badge__item_content{
+.arm-badge__item_content{
   width: 20px;
   height: 20px;
   @include flex(center);
   font-size: 12px;
 }
 
-.badge__item_content_circle,
-.badge__item_content_square{
+.arm-badge__item_content_circle,
+.arm-badge__item_content_square{
   width: auto;
   height: auto;
   border-radius: $radius;
@@ -57,38 +55,38 @@ $horizontal_offset: calc(100% - 6px);
   line-height: 20px;
   padding:0 6px;
 }
-.badge__item_content_circle{
+.arm-badge__item_content_circle{
   border-radius: 10px;
 }
 
-.badge__item_top-right{
+.arm-badge__item_top-right{
   bottom: $vertical_offset;
   left: $horizontal_offset;
 }
-.badge__item_top-left{
+.arm-badge__item_top-left{
   bottom: $vertical_offset;
   right: $horizontal_offset;
   left: auto;
 }
-.badge__item_bottom-right{
+.arm-badge__item_bottom-right{
   top: $vertical_offset;
   left: $horizontal_offset;
   bottom: auto;
 }
-.badge__item_bottom-left{
+.arm-badge__item_bottom-left{
   top: $vertical_offset;
   right: $horizontal_offset;
   left: auto;
   bottom: auto;
 }
-.badge__item_center-right{
+.arm-badge__item_center-right{
   top: 50%;
   transform: translateY(-50%);
   left: calc(100%  + 6px);
   right: auto;
   bottom: auto;
 }
-.badge__item_center-left{
+.arm-badge__item_center-left{
   top: 50%;
   transform: translateY(-50%);
   right: calc(100%  + 6px);