armtek-uikit-react 1.0.267 → 1.0.268

package/assets/Chip.scss

@@ -1,327 +0,0 @@
-@use "variables" as v;
-
-.arm-chip{
-  background-color: var(--color-gray-200);
-  padding: calc(var(--size-step) / 1.5) calc(var(--size-step) * 1.5);
-  border-radius: 20px;
-  font-size: 13px;
-  display: inline-flex;
-  align-items: center;
-}
-
-.arm-chip_square{
-  border-radius: var(--border-radius);
-}
-.arm-chip__text{
-  line-height: 1;
-}
-
-.arm-chip__inner{
-  @include v.flex(center)
-}
-
-.arm-chip__icon{
-  display: inline-block;
-  margin-right: var(--size-step);
-  margin-left: calc(var(--size-step) * -1);
-  font-size: 22px;
-  @include v.flex();
-  overflow: hidden;
-}
-.arm-chip__close{
-  appearance: none;
-  background: transparent;
-  border: none;
-  margin-left: calc(var(--size-step) * 1);
-  padding: 0;
-  line-height: 1;
-  font-size: 20px;
-  color: var(--color-gray-500);
-  cursor: pointer;
-  @include v.transition();
-
-  &:focus-visible{
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled{
-    cursor: default;
-    opacity: 0.6;
-  }
-
-  &:hover{
-    color: var(--color-gray-600);
-  }
-}
-
-.arm-chip__close_primary,
-.arm-chip__close_secondary{
-  color: #fff;
-  &:hover{
-    color: #fff;
-    opacity: 0.6;
-  }
-}
-
-.arm-chip_small{
-  min-height: 24px;
-  padding: 4px var(--size-step);
-}
-.arm-chip_medium{
-  min-height: 32px;
-}
-.arm-chip__icon_small{
-  font-size: 18px;
-  margin-left: 0;
-}
-.arm-chip__close_small{
-  font-size: 15px;
-  margin-right: -2px;
-}
-
-.arm-chip_outlined{
-  background-color: transparent;
-  border: 1px solid var(--color-gray-400);
-}
-a.arm-chip_outlined,
-button.arm-chip_outlined{
-  &:hover{
-    background-color: rgba(var(--color-neutral-rgba), 0.1);
-  }
-}
-
-.arm-chip_secondary{
-  color: #fff;
-  background-color: var(--color-secondary);
-  &.arm-chip_outlined{
-    border-color: var(--color-secondary);
-    background-color: transparent;
-    color: var(--color-secondary);
-  }
-}
-a.arm-chip_secondary,
-button.arm-chip_secondary{
-  &:hover{
-    background-color: var(--color-secondary-rgba);
-  }
-  &.arm-chip_outlined:hover{
-    background-color: var(--color-orange-100);
-  }
-}
-
-.arm-chip_success{
-  background-color: var(--color-success);
-  &.arm-chip_outlined{
-    border-color: var(--color-success);
-    background-color: transparent;
-    color: var(--color-success);
-  }
-}
-a.arm-chip_success,
-button.arm-chip_success{
-  &:hover{
-    background-color: var(--color-success-dark);
-  }
-  &.arm-chip_outlined:hover{
-    background-color: var(--color-green-100);
-  }
-}
-
-.arm-chip_error{
-  background-color: var(--color-error);
-  &.arm-chip_outlined{
-    border-color: var(--color-error);
-    background-color: transparent;
-    color: var(--color-error);
-  }
-}
-a.arm-chip_error,
-button.arm-chip_error{
-  &:hover{
-    background-color: var(--color-error-dark);
-  }
-  &.arm-chip_outlined:hover{
-    background-color: var(--color-red-100);
-  }
-}
-
-.arm-chip_warning{
-  background-color: var(--color-warning);
-  &.arm-chip_outlined{
-    border-color: var(--color-warning);
-    background-color: transparent;
-    color: var(--color-warning);
-  }
-}
-a.arm-chip_warning,
-button.arm-chip_warning{
-  &:hover{
-    background-color: var(--color-warning-dark);
-  }
-  &.arm-chip_outlined:hover{
-    background-color: var(--color-orange-100);
-  }
-}
-
-.arm-chip_info{
-  color: #fff;
-  background-color: var(--color-info);
-  &.arm-chip_outlined{
-    border-color: var(--color-info);
-    background-color: transparent;
-    color: var(--color-info);
-  }
-}
-a.arm-chip_info,
-button.arm-chip_info{
-  &:hover{
-    background-color: var(--color-info-dark);
-  }
-  &.arm-chip_outlined:hover{
-    background-color: var(--color-blue-100);
-  }
-}
-
-.arm-chip_black{
-  color: #fff;
-  background-color: var(--color-neutral);
-  &.arm-chip_outlined{
-    border-color: var(--color-neutral);
-    background-color: transparent;
-    color: var(--color-neutral);
-  }
-}
-a.arm-chip_black,
-button.arm-chip_black{
-  &:hover{
-    background-color: var(--color-neutral-dark);
-  }
-  &.arm-chip_outlined:hover{
-    background-color: var(--color-gray-100);
-  }
-}
-
-.arm-chip_white{
-  background-color: #fff;
-}
-a.arm-chip_white,
-button.arm-chip_white{
-  &:hover{
-    background-color: var(--color-gray-100);
-  }
-}
-
-
-.arm-chip_primary{
-  color: #fff;
-  background-color: var(--color-primary);
-  &.arm-chip_outlined{
-    border-color: var(--color-primary);
-    background-color: transparent;
-    color: var(--color-primary);
-  }
-}
-a.arm-chip_primary,
-button.arm-chip_primary{
-  &:hover{
-    background-color: var(--color-primary-dark);
-  }
-  &.arm-chip_outlined:hover{
-    background-color: var(--color-blue-100);
-  }
-}
-
-.arm-chip_disabled{
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.arm-theme-dark {
-  .arm-chip {
-    background-color: rgba(var(--color-gray-500-rgba), 0.3);
-    color: var(--color-gray-200);
-  }
-  a.arm-chip:hover,
-  button.arm-chip:hover {
-    background-color: var(--color-neutral);
-  }
-
-  .arm-chip.arm-chip_primary {
-    background-color: var(--color-blue-800);
-    color: var(--color-secondary-contrast);
-  }
-  a.arm-chip.arm-chip_primary:hover,
-  button.arm-chip.arm-chip_primary:hover {
-    background-color: var(--color-primary);
-  }
-
-  .arm-chip.arm-chip_secondary {
-    background-color: var(--color-secondary);
-    color: var(--color-secondary-contrast);
-  }
-  a.arm-chip.arm-chip_secondary:hover,
-  button.arm-chip.arm-chip_secondary:hover {
-    background-color: var(--color-secondary-dark);
-  }
-
-  .arm-chip.arm-chip_error {
-    background-color: var(--color-error);
-    color: var(--color-error-contrast);
-  }
-  a.arm-chip.arm-chip_error:hover,
-  button.arm-chip.arm-chip_error:hover {
-    background-color: var(--color-error-dark);
-  }
-  .arm-chip.arm-chip_success {
-    background-color: var(--color-success);
-    color: var(--color-success-contrast);
-  }
-  a.arm-chip.arm-chip_error:hover,
-  button.arm-chip.arm-chip_error:hover {
-    background-color: var(--color-success-dark);
-  }
-  .arm-chip.arm-chip_info {
-    background-color: var(--color-info);
-    color: var(--color-info-contrast);
-  }
-  a.arm-chip.arm-chip_info:hover,
-  button.arm-chip.arm-chip_info:hover {
-    background-color: var(--color-info-dark);
-  }
-  .arm-chip.arm-chip_warning {
-    background-color: var(--color-warning);
-    color: var(--color-warning-contrast);
-  }
-  a.arm-chip.arm-chip_warning:hover,
-  button.arm-chip.arm-chip_warning:hover {
-    background-color: var(--color-warning-dark);
-  }
-
-  .arm-chip_outlined {
-    &.arm-chip {
-      background-color: transparent;
-      color: var(--color-neutral-light);
-      border-color: var(--color-neutral-light);
-    }
-    &.arm-chip.arm-chip_primary {
-      background-color: transparent;
-      color: var(--color-blue-600);
-      border-color: var(--color-blue-600);
-    }
-    &.arm-chip.arm-chip_secondary {
-      color: var(--color-secondary);
-      border-color: var(--color-secondary);
-    }
-  }
-
-  a.arm-chip_outlined.arm-chip.arm-chip_primary:hover,
-  button.arm-chip_outlined.arm-chip.arm-chip_primary:hover {
-    background-color: rgba(var(--color-blue-800-rgba), 0.1);
-  }
-  a.arm-chip_outlined.arm-chip.arm-chip_secondary:hover,
-  button.arm-chip_outlined.arm-chip.arm-chip_secondary:hover {
-    background-color: rgba(var(--color-secondary-rgba), 0.1);
-  }
-
-}

package/assets/DateField.scss

@@ -1,3 +0,0 @@
-.arm-datefield-popper > div{
-  background: none !important;
-}

package/assets/DatePicker.scss

@@ -1,73 +0,0 @@
-@use "variables";
-
-.datepicker{
-  & .react-datepicker{
-    border:none;
-  }
-}
-.react-datepicker__year-wrapper{
-  max-width: 205px;
-}
-.arm-theme-dark{
-  & .react-datepicker{
-    background-color: var(--color-gray-700);
-    border: 1px solid var(--color-gray-500);
-  }
-  & .react-datepicker__current-month,
-  & .react-datepicker-time__header,
-  & .react-datepicker-year-header,
-  & .react-datepicker__day-name,
-  & .react-datepicker__day,
-  & .react-datepicker__time-name{
-    color: var(--color-gray-200);
-  }
-  & .react-datepicker__year-read-view--down-arrow,
-  & .react-datepicker__month-read-view--down-arrow,
-  & .react-datepicker__month-year-read-view--down-arrow,
-  & .react-datepicker__navigation-icon::before{
-    border-color: var(--color-gray-500)
-  }
-  & .react-datepicker__day-name{
-    color:var(--color-gray-500)
-  }
-
-  .react-datepicker__day:hover,
-  .react-datepicker__month-text:hover,
-  .react-datepicker__quarter-text:hover,
-  .react-datepicker__year-text:hover{
-    background-color: var(--color-gray-800);
-  }
-  & .react-datepicker__day--keyboard-selected,
-  & .react-datepicker__month-text--keyboard-selected,
-  & .react-datepicker__quarter-text--keyboard-selected,
-  & .react-datepicker__year-text--keyboard-selected{
-    background-color: var(--color-primary) !important;
-    color: #fff;
-  }
-  .react-datepicker__day--disabled,
-  .react-datepicker__month-text--disabled,
-  .react-datepicker__quarter-text--disabled,
-  .react-datepicker__year-text--disabled{
-    background-color: transparent;
-    color: var(--color-gray-600)
-  }
-}
-.arm-datepicker__select{
-  width: 120px !important;
-}
-.arm-datepicker__select_month{
-  width: 150px !important;
-}
-.arm-datepicker__select-wrapper{
-  padding-top:6px !important;;
-  padding-bottom: 4px !important;;
-}
-.arm-datepicker__select_root{
-  height: 36px !important;;
-}
-.arm-datepicker__select-option{
-  min-height: 30px !important;
-  font-size: 14px !important;;
-  padding-top: 4px !important;;
-  padding-bottom: 4px !important;;
-}

package/assets/Dropdown.scss

@@ -1,43 +0,0 @@
-
-
-.arm-dropdown {
-
-  &__ContentWrapper {
-    &_hidden{
-      display: none;
-    }
-    &Enter {
-      opacity: 0;
-      overflow: hidden;
-      max-height: 0;
-    }
-
-    &EnterActive {
-      opacity: 1;
-      max-height: var(--content-height);
-      transition: opacity 0.3s, max-height 1s cubic-bezier(0, 1, 0, 1);
-    }
-    &Exit {
-      opacity: 1;
-      max-height: var(--content-height);
-    }
-
-    &ExitActive {
-      overflow: hidden;
-      opacity: 0;
-      max-height: 0;
-      transition: opacity 0.3s, max-height 1s cubic-bezier(0, 1, 0, 1);
-    }
-
-    &ExitDone{
-      display: none;
-    }
-  }
-
-  &__Content {
-    overflow: hidden;
-    transition: all 0.3s;
-  }
-
-
-}

package/assets/FormControls.scss

@@ -1,15 +0,0 @@
-
-.arm-form-controls__stack{
-  border-top: 1px solid var(--color-gray-200);
-  padding-top: calc(var(--size-step) * 4);
-  display: flex;
-  gap: var(--size-step);
-}
-.arm-form-controls__btn{
-  width: 100%;
-}
-.arm-theme-dark {
-  .arm-form-controls__stack{
-    border-color: var(--color-gray-700);
-  }
-}

package/assets/HelperText.scss

@@ -1,12 +0,0 @@
-
-.arm-helper-text{
-  color: var(--color-gray-600);
-  font-size: 12px;
-  display: block;
-}
-.arm-helper-text_error{
-  color: var(--color-error-dark);
-}
-.arm-helper-text_success{
-  color: var(--color-success);
-}

package/assets/Icon.scss

@@ -1,31 +0,0 @@
-@use "variables";
-
-.arm-icon_size_small{
-  font-size: 11px;
-}
-.arm-icon_size_medium{
-  font-size: 13px;
-}
-.arm-icon_size_large{
-  font-size: 14px;
-}
-.arm-icon_size_extraLarge{
-  font-size: 16px;
-}
-.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)}
-
-.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,35 +0,0 @@
-@use 'variables' as v;
-
-.arm-interval{
-  @include v.flex();
-  width: 100%;
-  & input{
-    -moz-appearance: textfield;
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-}
-.arm-interval__end{
-  text-align: right;
-  & + span{
-    text-align: right;
-    padding-left: 0;
-    padding-right: 12px;
-  }
-}
-.arm-interval__item{
-  max-width: 50%;
-  flex: 0 0 50%;
-}
-
-.arm-interval__helper{
-  margin-top: calc(var(--size-step) / 2);
-}
-
-.arm-intervalslide__slider{
-  padding: 0 calc(var(--size-step) * 2);
-  margin-top: -7px;
-}

package/assets/Link.scss

@@ -1,97 +0,0 @@
-@use "./../assets/variables";
-
-.arm-link{
-  transition: 0.2s all ease;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  color: var(--color-primary);
-  outline: none;
-  background-color: transparent;
-  padding: 0;
-  font-size: inherit;
-  font-family: inherit;
-  text-decoration: none;
-  border: none;
-  &:hover{
-    color: var(--color-primary-light)
-  }
-}
-.arm-link_size_small{
-  font-size: 13px;
-}
-.arm-link_size_medium{
-  font-size: 16px;
-}
-.arm-link_size_large{
-  font-size: 20px;
-}
-.arm-link_color_secondary{
-  color: var(--color-secondary);
-  &:hover{
-    color: var(--color-secondary-light)
-  }
-}
-.arm-link_color_neutral{
-  color: var(--color-neutral);
-  &:hover{
-    color: var(--color-secondary-light)
-  }
-}
-.arm-link_color_success{
-  color: var(--color-success);
-  &:hover{
-    color: var(--color-success-light)
-  }
-}
-.arm-link_color_error{
-  color: var(--color-error);
-  &:hover{
-    color: var(--color-error-light);
-  }
-}
-.arm-link_color_info{
-  color: var(--color-info);
-  &:hover{
-    color: var(--color-info-light);
-  }
-}
-.arm-link_color_warning{
-  color: var(--color-warning);
-  &:hover{
-    color: var(--color-warning-light);
-  }
-}
-.arm-link_dark{
-  color: #fff;
-}
-.arm-link_disabled{
-  opacity: 0.7;
-  pointer-events: none;
-}
-.arm-link_border{
-  border-color: initial;
-  border-top:0;
-  border-left: 0;
-  border-right: 0;
-  border-bottom-width: 1px;
-  &:hover{
-    border-color: transparent;
-  }
-}
-.arm-link_border_solid{
-  border-style: solid;
-}
-.arm-link_border_dashed{
-  border-style: dashed;
-}
-.arm-link_border_dotted{
-  border-style: dotted;
-}
-
-.arm-theme-dark {
-  .arm-link_color_primary{
-    color: var(--color-gray-400)
-  }
-
-}

package/assets/ListItem.scss

@@ -1,77 +0,0 @@
-@use "variables" as v;
-
-.arm-listitem{
-  outline: none;
-  padding: calc(var(--size-step) * 1.5) calc(var(--size-step) * 2);
-  color: var(--color-neutral);
-  background: #fff;
-  @include v.transition(0.3s, background);
-  @include v.flex();
-  width: 100%;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 1.1;
-  font-family: inherit;
-  min-height: 48px;
-  &:hover{
-    background: var(--color-gray-50);
-  }
-  &.arm-listitem_active,
-  &:active{
-    background: rgba(var(--color-primary-rgba), 0.1);
-  }
-}
-
-.arm-listitem_disabled{
-  pointer-events: none;
-  background: #fff;
-  color: var(--color-gray-400);
-  user-select: none;
-  cursor: default;
-}
-.arm-listitem__content{
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.arm-listitem__content_adornment_left{
-  padding-left: calc(var(--size-step) * 2);
-}
-.arm-listitem_endAdornment .arm-listitem__content{
-  padding-right: calc(var(--size-step) * 2);
-}
-.arm-listitem_divider{
-  border-bottom: 1px solid var(--color-gray-200);
-}
-.arm-listitem__text{
-  display: block;
-}
-.arm-listitem__helper{
-  margin-top: calc(var(--size-step) / 2);
-  display: block;
-  color: var(--color-neutral-light);
-}
-.arm-theme-dark {
-
-  .arm-listitem{
-    background-color: var(--color-gray-700);
-    color: var(--color-gray-200);
-    &:hover{
-      //background-color: rgba(var(--color-white-rgba), 0.1);
-      background-color: var(--color-gray-800)
-    }
-    &.arm-listitem_active,
-    &:active{
-      background-color: rgba(var(--color-gray-900-rgb), 0.9);
-    }
-    &.arm-listitem_disabled{
-      color: var(--color-gray-600);
-      background-color: var(--color-gray-700);
-    }
-  }
-}