armtek-uikit-react 1.0.120 → 1.0.122

package/assets/Button.scss

@@ -1,6 +1,6 @@
 @import "./../assets/variables";
 
-.button{
+.arm-button{
   outline: none;
   border:1px solid transparent;
   border-radius: var(--border-radius);
@@ -15,14 +15,16 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  user-select: none;
   &:disabled{
     cursor: initial;
+    pointer-events: none;
   }
   &_fullWidth{
     width: 100%;
   }
 }
-.button__iconWrapper{
+.arm-button__iconWrapper{
   position: absolute;
   width: 100%;
   height: 100%;
@@ -36,12 +38,12 @@
   //  font-size: initial;
   //}
 }
-.button_radius_none{
+.arm-button_radius_none{
   border-radius: 0;
 }
 
-.button_contained {
-  &.button_primary{
+.arm-button_contained {
+  &.arm-button_primary{
     color: #fff;
     background: var(--color-primary);
     &:hover{
@@ -54,7 +56,7 @@
       background: var(--color-blue-400);
     }
   }
-  &.button_secondary {
+  &.arm-button_secondary {
     background: var(--color-secondary);
     color: #fff;
     &:hover{
@@ -67,7 +69,7 @@
       background: var(--color-secondary-light);
     }
   }
-  &.button_neutral {
+  &.arm-button_neutral {
     color: #fff;
     background: var(--color-neutral);
     &:hover{
@@ -80,7 +82,7 @@
       background: var(--color-neutral-light);
     }
   }
-  &.button_black {
+  &.arm-button_black {
     color: #fff;
     background: var(--color-gray-900);
     &:hover{
@@ -93,7 +95,7 @@
       background: var(--color-neutral-light);
     }
   }
-  &.button_green {
+  &.arm-button_green {
     color: #fff;
     background: var(--color-success);
     &:hover{
@@ -106,7 +108,7 @@
       background: var(--color-green-500);
     }
   }
-  &.button_red {
+  &.arm-button_red {
     color: #fff;
     background: var(--color-error);
     &:hover{
@@ -120,9 +122,9 @@
     }
   }
 }
-.button_outlined {
+.arm-button_outlined {
   background: transparent;
-  &.button_primary{
+  &.arm-button_primary{
 
     color: var(--color-primary);
     border-color: var(--color-primary);
@@ -138,7 +140,7 @@
       border-color: var(--color-primary-light);
     }
   }
-  &.button_secondary {
+  &.arm-button_secondary {
     border-color: var(--color-secondary);
     color: var(--color-secondary);
     &:hover{
@@ -153,13 +155,12 @@
       border-color: var(--color-primary-light);
     }
   }
-  &.button_neutral,
-  &.button_black {
+  &.arm-button_neutral,
+  &.arm-button_black {
     border-color: var(--color-gray-900);
     color: var(--color-gray-900);
     &:hover{
-      background: var(--color-neutral);
-      opacity: 0.1;
+      background-color: rgba(var(--color-neutral-rgba), 0.1);
     }
     &:active{
       background: var(--color-gray-300);
@@ -169,7 +170,7 @@
       border-color: var(--color-neutral-light);
     }
   }
-  &.button_green {
+  &.arm-button_green {
     border-color: var(--color-success);
     color: var(--color-success);
     &:hover{
@@ -184,7 +185,7 @@
       border-color: var(--color-green-500);
     }
   }
-  &.button_red {
+  &.arm-button_red {
     border-color: var(--color-error);
     color: var(--color-error);
     &:hover{
@@ -200,9 +201,9 @@
     }
   }
 }
-.button_transparent {
+.arm-button_transparent {
   background: transparent;
-  &.button_primary{
+  &.arm-button_primary{
     color: var(--color-primary);
     &:hover{
       background-color: rgba(var(--color-blue-800-rgba), 0.1);
@@ -215,7 +216,7 @@
       background: transparent;
     }
   }
-  &.button_secondary {
+  &.arm-button_secondary {
     color: var(--color-secondary);
     &:hover{
       background-color: rgba(var(--color-secondary-rgba), 0.1);
@@ -227,8 +228,8 @@
       opacity: 0.4;
     }
   }
-  &.button_neutral,
-  &.button_black {
+  &.arm-button_neutral,
+  &.arm-button_black {
     color: var(--color-gray-900);
     &:hover{
       background: rgba(var(--color-neutral-rgba), 0.1);
@@ -241,7 +242,7 @@
       background: none;
     }
   }
-  &.button_green {
+  &.arm-button_green {
     color: var(--color-success);
     &:hover{
       background-color: rgba(var(--color-success-rgb), 0.1);
@@ -253,7 +254,7 @@
       background-color: var(--color-green-500);
     }
   }
-  &.button_red {
+  &.arm-button_red {
     color: var(--color-error);
     &:hover{
       background-color: rgba(var(--color-error-rgba), 0.1);
@@ -268,8 +269,8 @@
 }
 
 
-.button_theme_dark.button_contained {
-  &.button_primary{
+.arm-button_theme_dark.arm-button_contained {
+  &.arm-button_primary{
     color: var(--color-primary-contrast);
     background: var(--color-blue-800);
     &:hover{
@@ -283,7 +284,7 @@
       opacity: 0.2;
     }
   }
-  &.button_secondary {
+  &.arm-button_secondary {
     color: var(--color-secondary-contrast);
     &:active{
       background: var(--color-secondary-light);
@@ -293,7 +294,7 @@
       opacity: 0.1;
     }
   }
-  &.button_neutral {
+  &.arm-button_neutral {
     color: var(--color-neutral-contrast);
     background: var(--color-gray-500);
     opacity: 0.3;
@@ -310,7 +311,7 @@
       opacity: 0.5;
     }
   }
-  &.button_black {
+  &.arm-button_black {
     color: var(--color-neutral);
     background: #fff;
     &:hover{
@@ -323,7 +324,7 @@
       opacity: 0.5;
     }
   }
-  &.button_green {
+  &.arm-button_green {
     color: var(--color-success-contrast);
     background: var(--color-green-800);
     &:hover{
@@ -337,7 +338,7 @@
       opacity: 0.2;
     }
   }
-  &.button_red {
+  &.arm-button_red {
     color: var(--color-error-contrast);
     background: var(--color-red-800);
     &:hover{
@@ -352,9 +353,9 @@
     }
   }
 }
-.button_theme_dark.button_outlined {
+.arm-button_theme_dark.arm-button_outlined {
   background: transparent;
-  &.button_primary{
+  &.arm-button_primary{
 
     color: var(--color-primary);
     border-color: var(--color-primary);
@@ -370,7 +371,7 @@
       border-color: var(--color-primary-light);
     }
   }
-  &.button_secondary {
+  &.arm-button_secondary {
     border-color: var(--color-secondary);
     color: var(--color-secondary);
     &:hover{
@@ -384,7 +385,7 @@
       border-color: var(--color-primary-light);
     }
   }
-  &.button_neutral {
+  &.arm-button_neutral {
     border-color: var(--color-gray-900);
     color: var(--color-gray-900);
     &:hover{
@@ -398,7 +399,7 @@
       border-color: var(--color-neutral-light);
     }
   }
-  &.button_black {
+  &.arm-button_black {
     border-color: #fff;
     color: #fff;
     &:hover{
@@ -412,7 +413,7 @@
       border-color: rgba(255, 255, 255, 0.1);
     }
   }
-  &.button_green {
+  &.arm-button_green {
     border-color: var(--color-green-600);
     color: var(--color-green-600);
     &:hover{
@@ -427,7 +428,7 @@
       opacity: 0.2;
     }
   }
-  &.button_red {
+  &.arm-button_red {
     border-color: var(--color-red-600);
     color: var(--color-red-600);
     &:hover{
@@ -443,9 +444,9 @@
     }
   }
 }
-.button_theme_dark.button_transparent {
+.arm-button_theme_dark.arm-button_transparent {
   background: transparent;
-  &.button_primary{
+  &.arm-button_primary{
     color: var(--color-primary);
     background: transparent;
     &:hover{
@@ -459,7 +460,7 @@
       background: none;
     }
   }
-  &.button_secondary {
+  &.arm-button_secondary {
     color: var(--color-secondary);
     &:hover{
       background: rgba(var(--color-secondary-rgba), 0.1);
@@ -472,7 +473,7 @@
       background: none;
     }
   }
-  &.button_neutral {
+  &.arm-button_neutral {
     color: var(--color-neutral-light);
     &:hover{
       background: var(--color-neutral);
@@ -485,7 +486,7 @@
       opacity: 0.1;
     }
   }
-  &.button_black {
+  &.arm-button_black {
     color: #fff;
     &:hover{
       background: rgba(255, 255, 255, 0.1);
@@ -498,7 +499,7 @@
       opacity: 0.1;
     }
   }
-  &.button_green {
+  &.arm-button_green {
     color: var(--color-green-600);
     &:hover{
       background-color: rgba(var(--color-green-800-rgba), 0.1);
@@ -511,7 +512,7 @@
       opacity: 0.2;
     }
   }
-  &.button_red {
+  &.arm-button_red {
     color: var(--color-red-600);
     &:hover{
       background-color: rgba(var(--color-error-rgba), 0.1);
@@ -526,28 +527,28 @@
   }
 }
 
-.button__adornment{
+.arm-button__adornment{
   font-size: 0;
   & > * {
     font-size: 20px;
   }
 }
-.button__adornment_end{
+.arm-button__adornment_end{
   margin-left: $size-step;
 }
-.button__adornment_start{
+.arm-button__adornment_start{
   margin-right: $size-step;
 }
 
-.button_large{
+.arm-button_large{
   height: $size-large;
   font-size: 15px;
 }
-.button_medium{
+.arm-button_medium{
   height: $size-medium;
   font-size: 14px;
 }
-.button_small{
+.arm-button_small{
   height: $size-small;
   font-size: 13px;
   padding-left: calc(var(--size-step) * 1.2);
@@ -556,162 +557,162 @@
 
 
 
-.button_grouped_inline{
-  &.button_contained{
-    &.button_primary + *{
+.arm-button_grouped_inline{
+  &.arm-button_contained{
+    &.arm-button_primary + *{
       border-left-color: var(--color-primary-light);
     }
-    &.button_secondary + *{
+    &.arm-button_secondary + *{
       border-left-color: var(--color-secondary-dark);
     }
-    &.button_neutral + *{
+    &.arm-button_neutral + *{
       border-left-color: var(--color-neutral-dark);
     }
-    &.button_black + *{
+    &.arm-button_black + *{
       border-left-color: var(--color-neutral-dark);
     }
-    &.button_green + *{
+    &.arm-button_green + *{
       border-left-color: var(--color-success-dark);
     }
-    &.button_red + *{
+    &.arm-button_red + *{
       border-left-color: var(--color-error);
     }
   }
-  &.button_outlined{
-    &.button_primary + *{
+  &.arm-button_outlined{
+    &.arm-button_primary + *{
       border-left-color: var(--color-primary-light);
     }
-    &.button_primary:not(:last-child){
+    &.arm-button_primary:not(:last-child){
       border-right: 0;
     }
-    &.button_secondary + *{
+    &.arm-button_secondary + *{
       border-left-color: var(--color-secondary);
     }
-    &.button_secondary:not(:last-child){
+    &.arm-button_secondary:not(:last-child){
       border-right: 0;
     }
-    &.button_neutral + *{
+    &.arm-button_neutral + *{
       border-left-color: var(--color-neutral);
     }
-    &.button_neutral:not(:last-child){
+    &.arm-button_neutral:not(:last-child){
       border-right: 0;
     }
-    &.button_black + *{
+    &.arm-button_black + *{
       border-left-color: var(--color-neutral);
     }
-    &.button_black:not(:last-child){
+    &.arm-button_black:not(:last-child){
       border-right: 0;
     }
-    &.button_green + *{
+    &.arm-button_green + *{
       border-left-color: var(--color-success);
     }
-    &.button_green:not(:last-child){
+    &.arm-button_green:not(:last-child){
       border-right: 0;
     }
-    &.button_green + *{
+    &.arm-button_green + *{
       border-left-color: var(--color-error);
     }
-    &.button_green:not(:last-child){
+    &.arm-button_green:not(:last-child){
       border-right: 0;
     }
   }
-  &.button_transparent{
-    &.button_primary + *{
+  &.arm-button_transparent{
+    &.arm-button_primary + *{
       border-left-color: var(--color-gray-200);
     }
-    &.button_secondary + *{
+    &.arm-button_secondary + *{
       border-left-color: var(--color-gray-200);
     }
-    &.button_neutral + *{
+    &.arm-button_neutral + *{
       border-left-color: var(--color-gray-200);
     }
-    &.button_black + *{
+    &.arm-button_black + *{
       border-left-color: var(--color-gray-200);
     }
-    &.button_green + *{
+    &.arm-button_green + *{
       border-left-color: var(--color-gray-200);
     }
-    &.button_red + *{
+    &.arm-button_red + *{
       border-left-color: var(--color-gray-200);
     }
   }
 }
-.button_grouped_column{
-  &.button_contained{
-    &.button_primary + *{
+.arm-button_grouped_column{
+  &.arm-button_contained{
+    &.arm-button_primary + *{
       border-top-color: var(--color-primary-light);
     }
-    &.button_secondary + *{
+    &.arm-button_secondary + *{
       border-top-color: var(--color-secondary-dark);
     }
-    &.button_neutral + *{
+    &.arm-button_neutral + *{
       border-top-color: var(--color-neutral-dark);
     }
-    &.button_black + *{
+    &.arm-button_black + *{
       border-top-color: var(--color-neutral-dark);
     }
-    &.button_green + *{
+    &.arm-button_green + *{
       border-top-color: var(--color-success-dark);
     }
-    &.button_red + *{
+    &.arm-button_red + *{
       border-top-color: var(--color-error-dark);
     }
   }
-  &.button_outlined{
-    &.button_primary + *{
+  &.arm-button_outlined{
+    &.arm-button_primary + *{
       border-top-color: var(--color-primary-light);
     }
-    &.button_primary:not(:last-child){
+    &.arm-button_primary:not(:last-child){
       border-bottom: 0;
     }
-    &.button_secondary + *{
+    &.arm-button_secondary + *{
       border-top-color: var(--color-secondary);
     }
-    &.button_secondary:not(:last-child){
+    &.arm-button_secondary:not(:last-child){
       border-bottom: 0;
     }
-    &.button_neutral + *{
+    &.arm-button_neutral + *{
       border-top-color: var(--color-neutral);
     }
-    &.button_neutral:not(:last-child){
+    &.arm-button_neutral:not(:last-child){
       border-bottom: 0;
     }
-    &.button_black + *{
+    &.arm-button_black + *{
       border-top-color: var(--color-neutral);
     }
-    &.button_black:not(:last-child){
+    &.arm-button_black:not(:last-child){
       border-bottom: 0;
     }
-    &.button_green + *{
+    &.arm-button_green + *{
       border-top-color: var(--color-success);
     }
-    &.button_green:not(:last-child){
+    &.arm-button_green:not(:last-child){
       border-bottom: 0;
     }
-    &.button_black + *{
+    &.arm-button_black + *{
       border-top-color: var(--color-error);
     }
-    &.button_black:not(:last-child){
+    &.arm-button_black:not(:last-child){
       border-bottom: 0;
     }
   }
-  &.button_transparent{
-    &.button_primary + *{
+  &.arm-button_transparent{
+    &.arm-button_primary + *{
       border-top-color: var(--color-gray-200);
     }
-    &.button_secondary + *{
+    &.arm-button_secondary + *{
       border-top-color: var(--color-gray-200);
     }
-    &.button_neutral + *{
+    &.arm-button_neutral + *{
       border-top-color: var(--color-gray-200);
     }
-    &.button_black + *{
+    &.arm-button_black + *{
       border-top-color: var(--color-gray-200);
     }
-    &.button_red + *{
+    &.arm-button_red + *{
       border-top-color: var(--color-gray-200);
     }
-    &.button_green + *{
+    &.arm-button_green + *{
       border-top-color: var(--color-gray-200);
     }
   }

package/assets/ButtonGroup.scss

@@ -1,10 +1,9 @@
-@import "./../assets/variables";
 
-.button_group{
+.arm-button-group{
   display: flex;
   align-items: center;
 }
-.button_group_inline{
+.arm-button-group_inline{
   flex-direction: row;
   & > * {
     border-radius: 0;
@@ -18,7 +17,7 @@
     }
   }
 }
-.button_group_column{
+.arm-button-group_column{
   flex-direction: column;
   display: inline-block;
   & > * {

package/assets/ButtonIcon.scss

@@ -1,6 +1,6 @@
 @import "variables";
 
-.button_icon{
+.arm-button-icon{
   padding: $size-step;
   width: $size-elarge;
   border-radius: 50%;
@@ -9,23 +9,24 @@
   justify-content: center;
   font-size: 30px;
   position: relative;
-  &.button_icon_large{
-    width: $size-large;
-    font-size: 24px;
-    & .material_icon {font-size: 24px}
-  }
-  &.button_icon_medium{
-    width: $size-medium;
-    font-size: 20px;
-    & .material_icon {font-size: 20px}
-  }
-  &.button_icon_small{
-    width: $size-small;
-    padding: calc($size-step / 2);
-    font-size: 16px;
-    & .material_icon {font-size: 16px}
-  }
+
+}
+.arm-button-icon_large{
+  width: $size-large;
+  font-size: 24px;
+  & .material_icon {font-size: 24px}
+}
+.arm-button-icon_medium{
+  width: $size-medium;
+  font-size: 20px;
+  & .material_icon {font-size: 20px}
+}
+.arm-button-icon_small{
+  width: $size-small;
+  padding: calc($size-step / 2);
+  font-size: 16px;
+  & .material_icon {font-size: 16px}
 }
-.ButtonIcon_square{
+.arm-button-icon_square{
   border-radius: 0;
 }

package/assets/Card.scss

@@ -1,6 +1,5 @@
-@import "variables";
 
-.card{
+.arm-card{
   padding: $size-step;
   box-shadow: $box-shadow;
   border-radius: $radius;