platformscode-new-react 0.0.4 → 0.0.5

package/src/assets/styles/components/_btns.scss

@@ -1,815 +0,0 @@
-.buttons {
-  .flex-column {
-    align-items: flex-start;
-  }
-}
-
-.btn {
-  -webkit-appearance: none;
-  appearance: none;
-  border-radius: var(--radius-sm);
-  // margin: var(--spacing-xs);
-  cursor: pointer;
-  border: 0;
-  outline: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--buttons-lg-gap);
-  box-sizing: border-box;
-  overflow: hidden;
-
-  &-icon {
-    display: flex;
-    width: 24px;
-    height: 24px;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &--lg {
-    height: 40px;
-    padding-inline: var(--buttons-lg-padding);
-    @extend .text-md-medium;
-
-    span.btn-icon {
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  &--md {
-    height: 32px;
-    padding-inline: var(--buttons-md-padding);
-    @extend .text-sm-medium;
-
-    span.btn-icon {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  &--sm {
-    height: 24px;
-    padding-inline: var(--buttons-sm-padding);
-    // border-radius: var(--radius-sm);
-    @extend .text-xs-medium;
-
-    span.btn-icon {
-      width: 16px;
-      height: 16px;
-    }
-
-    &:focus::after {
-      // border-radius: var(--radius-sm) !important;
-    }
-  }
-
-  &--icon {
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.btn--lg {
-      width: 40px;
-      height: 40px;
-    }
-
-    &-menu.btn--lg {
-      width: auto;
-      padding-inline: var(--buttons-lg-padding);
-    }
-
-    &.btn--md {
-      width: 32px;
-      height: 32px;
-    }
-
-    &-menu.btn--md {
-      width: auto;
-      padding-inline: var(--buttons-md-padding);
-    }
-
-    &.btn--sm {
-      width: 24px;
-      height: 24px;
-    }
-
-    &-menu.btn--sm {
-      width: auto;
-      padding-inline: var(--buttons-sm-padding);
-    }
-  }
-
-  &--primary-neutral {
-    background-color: var(--button-background-black-default);
-    color: var(--text-oncolor-primary);
-
-    &:hover {
-      background-color: var(--button-background-black-hovered);
-    }
-
-    &:visited {
-      background-color: var(--button-background-black-pressed);
-    }
-
-    &:focus {
-      background-color: var(--button-background-black-focused);
-      outline: 2px solid var(--border-black);
-      position: relative;
-
-      &::after {
-        content: '';
-        display: block;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: var(--radius-sm);
-      }
-    }
-
-    &:active {
-      background-color: var(--button-background-black-selected);
-      outline: none;
-
-      &::after {
-        display: none !important;
-      }
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: var(--background-disabled);
-      color: var(--text-default-disabled);
-    }
-
-    &--on-color {
-      background-color: var(--button-background-oncolor-default);
-      color: var(--text-default);
-
-      &:hover {
-        background-color: var(--button-background-oncolor-hovered);
-      }
-
-      &:visited,
-      &.selected {
-        background-color: var(--button-background-oncolor-selected);
-      }
-
-      &:focus {
-        outline-color: var(--border-white);
-
-        &::after {
-          border-color: var(--border-black);
-        }
-      }
-
-      &:active {
-        background-color: var(--button-background-oncolor-pressed);
-      }
-
-      &:disabled,
-      &[disabled] {
-        background-color: var(--button-background-disabled-on-color);
-        color: var(--text-default-oncolor-disabled);
-      }
-    }
-  }
-
-  &--primary-brand {
-    background-color: var(--button-background-primary-default);
-    color: var(--text-oncolor-primary);
-
-    &:hover {
-      background: var(--button-background-primary-hovered);
-    }
-
-    &:visited {
-      background: var(--button-background-primary-pressed);
-    }
-
-    &:focus {
-      background: var(--button-background-primary-focused);
-      outline: 2px solid var(--border-black);
-      position: relative;
-
-      &::after {
-        content: '';
-        display: block;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: var(--radius-sm);
-      }
-    }
-
-    &:active {
-      background: var(--button-background-primary-selected);
-      outline: none;
-
-      &::after {
-        display: none !important;
-      }
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: var(--background-disabled);
-      color: var(--text-default-disabled);
-    }
-
-    &--on-color {
-      background-color: var(--button-background-oncolor-default);
-      color: var(--text-default);
-
-      &:hover {
-        background-color: var(--button-background-oncolor-hovered);
-      }
-
-      &:visited,
-      &.selected {
-        background-color: var(--button-background-oncolor-pressed);
-      }
-
-      &:focus {
-        outline-color: var(--border-white);
-
-        &::after {
-          border-color: var(--border-black);
-        }
-      }
-
-      &:active {
-        background-color: var(--button-background-oncolor-pressed);
-      }
-
-      &:disabled,
-      &[disabled] {
-        background-color: var(--button-background-disabled-on-color);
-        color: var(--text-default-oncolor-disabled);
-      }
-    }
-  }
-
-  &--secondary {
-    background-color: var(--button-background-neutral-default);
-    color: var(--colors-text-primary);
-
-    &:hover {
-      background: var(--button-background-neutral-default-hoverd);
-    }
-
-    &:visited {
-      background: var(--button-background-neutral-default-pressed);
-    }
-
-    &:focus {
-      background: var(--button-background-neutral-default-focused);
-      outline: 2px solid var(--colors-base-black);
-    }
-
-    &:active {
-      background: var(--button-background-neutral-default-selected);
-      outline: none;
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: var(--background-disabled);
-      color: var(--text-default-disabled);
-      // border: 1px solid var(--colors-gray-neutral-200);
-    }
-    &--on-color {
-      background-color: var(--button-background-transparent-hovered);
-      color: var(--text-oncolor-primary);
-
-      &:hover {
-        background-color: var(--button-background-transparent-hovered);
-      }
-
-      &:visited,
-      &.selected {
-        background-color: var(--Button-button-background-transparent-selected);
-      }
-
-      &:focus {
-        outline-color: var(--border-white);
-
-        &::after {
-          display: none;
-        }
-      }
-
-      &:active {
-        background-color: var(--Button-button-background-transparent-pressed);
-        color: var(--text-oncolor-primary);
-      }
-
-      &:disabled,
-      &[disabled] {
-        background-color: var(--button-background-disabled-on-color);
-        color: var(--text-default-oncolor-disabled);
-      }
-    }
-  }
-
-  &--secondary-outline {
-    outline: 1px solid var(--border-neutral-primary);
-    background-color: transparent;
-    color: var(--text-default);
-    mix-blend-mode: multiply;
-
-    &:hover {
-      background: var(--button-background-neutral-default);
-    }
-
-    &:visited {
-      background: var(--button-background-neutral-pressed);
-      outline: 1px solid var(--border-neutral-primary);
-    }
-
-    &:focus {
-      background: transparent;
-      outline: 2px solid var(--border-black);
-    }
-
-    &:active {
-      background: var(--button-background-neutral-selected);
-      outline: 1px solid var(--border-neutral-primary);
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: transparent;
-      color: var(--text-default-disabled);
-      border: 1px solid var(--border-neutral-secondary);
-    }
-
-    &--on-color {
-      outline-color: var(--border-white-40);
-      color: var(--text-oncolor-primary);
-      mix-blend-mode: normal;
-
-      &:hover {
-        background: var(--button-background-transparent-hovered);
-        outline-color: var(--border-white-40);
-      }
-
-      &:visited,
-      &.selected {
-        background: var(--button-background-transparent-hovered);
-        outline-color: var(--border-white-40);
-      }
-
-      &:focus {
-        background: transparent;
-        outline: 2px solid var(--border-white);
-      }
-
-      &:active {
-        background: var(--button-background-transparent-hovered);
-        outline-color: var(--border-white-40);
-      }
-
-      &:disabled,
-      &[disabled] {
-        outline-color: 1px solid var(--icon-default-oncolor-disabled);
-        color: var(--text-default-oncolor-disabled);
-      }
-    }
-  }
-
-  &--subtle,
-  &--close,
-  &--sort {
-    background-color: transparent;
-    color: var(--colors-text-primary);
-    mix-blend-mode: multiply;
-
-    &:hover {
-      background: var(--button-background-neutral-default);
-    }
-
-    &:visited {
-      background: var(--button-background-neutral-pressed);
-    }
-
-    &:focus {
-      background: transparent;
-      outline: 2px solid var(--border-black);
-      position: relative;
-
-      &::after {
-        content: '';
-        display: block;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: var(--radius-sm);
-      }
-    }
-
-    &:active {
-      background: var(--button-background-neutral-selected);
-      outline: none;
-
-      &::after {
-        display: none !important;
-      }
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: transparent;
-      color: var(--text-default-disabled);
-    }
-  }
-
-  &--transparent {
-    background-color: transparent;
-    color: var(--text-default);
-
-    &:hover {
-      background: transparent;
-      color: var(--button-background-primary-hovered);
-    }
-
-    &:visited {
-      color: var(--button-background-primary-pressed);
-    }
-
-    &:focus {
-      background: transparent;
-      outline: 2px solid var(--border-black);
-      position: relative;
-
-      &::after {
-        content: '';
-        display: block;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: var(--radius-sm);
-      }
-    }
-
-    &:active {
-      color: var(--button-background-primary-selected);
-      outline: none;
-
-      &::after {
-        display: none !important;
-      }
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: transparent;
-      color: var(--text-default-disabled);
-    }
-  }
-
-  &--close {
-    display: flex;
-    width: 40px;
-    height: 40px;
-    padding: var(--spacing-md);
-    justify-content: center;
-    align-items: center;
-    border-radius: var(--radius-sm);
-    background-color: transparent;
-    color: var(--icon-default);
-
-    &:hover {
-      background: var(--button-background-neutral-hovered);
-      color: var(--icon-default);
-    }
-
-    &:active {
-      background-color: var(--button-background-neutral-pressed);
-    }
-  }
-
-  &--des-primary {
-    background-color: var(--button-background-danger-primary-default);
-    color: var(--text-oncolor-primary);
-
-    &:hover {
-      background: var(--button-background-danger-primary-hovered);
-    }
-
-    &:visited {
-      background: var(--button-background-danger-primary-pressed);
-    }
-
-    &:focus {
-      background: var(--button-background-danger-primary-focused);
-      outline: 2px solid var(--border-black);
-      position: relative;
-
-      &::after {
-        content: '';
-        display: block;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: var(--radius-sm);
-      }
-    }
-
-    &:active {
-      background: var(--button-background-danger-primary-selected);
-      outline: none;
-
-      &::after {
-        display: none !important;
-      }
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: var(--background-disabled);
-      color: var(--text-default-disabled);
-    }
-  }
-
-  &--des-secondary {
-    background-color: var(--button-background-danger-secondary-default);
-    color: var(--text-error);
-
-    &:hover {
-      background: var(--button-background-danger-secondary-hovered);
-    }
-
-    &:visited {
-      background: var(--button-background-danger-secondary-pressed);
-    }
-
-    &:focus {
-      background: var(--button-background-danger-secondary-focused);
-      outline: 2px solid var(--border-black);
-      position: relative;
-
-      &::after {
-        content: '';
-        display: block;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: var(--radius-sm);
-      }
-    }
-
-    &:active {
-      background: var(--button-background-danger-secondary-selected);
-      outline: none;
-
-      &::after {
-        display: none !important;
-      }
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: var(--background-disabled);
-      color: var(--text-default-disabled);
-    }
-  }
-
-  &--des-secondary-outline {
-    outline: 1px solid var(--border-error-light);
-    background-color: transparent;
-    color: var(--text-error);
-    mix-blend-mode: multiply;
-
-    &:hover {
-      background: var(--button-background-danger-secondary-hovered);
-    }
-
-    &:visited {
-      background: var(--button-background-danger-secondary-pressed);
-    }
-
-    &:focus {
-      background: transparent;
-      outline: 2px solid var(--border-black);
-      position: relative;
-
-      &::after {
-        content: '';
-        display: block;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: var(--radius-sm);
-      }
-    }
-
-    &:active {
-      background: var(--button-background-danger-secondary-selected);
-      outline: 1px solid var(--border-error-light);
-
-      &::after {
-        display: none !important;
-      }
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: transparent;
-      color: var(--text-default-disabled);
-      outline: 1px solid var(--border-neutral-secondary);
-    }
-  }
-
-  &--des-subtle {
-    background-color: transparent;
-    color: var(--text-error);
-
-    &:hover {
-      background: var(--button-background-danger-secondary-hovered);
-    }
-
-    &:visited {
-      background: var(--button-background-danger-secondary-pressed);
-    }
-
-    &:focus {
-      background: transparent;
-      outline: 2px solid var(--border-black);
-      position: relative;
-
-      &::after {
-        content: '';
-        display: block;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: var(--radius-sm);
-      }
-    }
-
-    &:active {
-      background: var(--button-background-danger-secondary-selected);
-      outline: none;
-
-      &::after {
-        display: none !important;
-      }
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: transparent;
-      color: var(--text-default-disabled);
-    }
-  }
-
-  &--des-transparent {
-    background-color: transparent;
-    color: var(--button-background-danger-primary-default);
-
-    &:hover {
-      background: transparent;
-      color: var(--button-background-danger-primary-hovered);
-    }
-
-    &:visited {
-      color: var(--button-background-danger-primary-pressed);
-    }
-
-    &:focus {
-      background: transparent;
-      outline: 2px solid var(--border-black);
-      position: relative;
-      color: var(--button-background-danger-primary-selected);
-
-      &::after {
-        content: '';
-        display: block;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: var(--radius-sm);
-      }
-    }
-
-    &:active {
-      color: var(--button-background-danger-primary-selected);
-      outline: none;
-
-      &::after {
-        display: none !important;
-      }
-    }
-
-    &:disabled,
-    &[disabled] {
-      background: transparent;
-      color: var(--text-default-disabled);
-    }
-  }
-
-  &.btn--subtle-on-color,
-  &.btn--close-on-color {
-    background-color: transparent;
-    color: var(--text-oncolor-primary);
-
-    &:hover {
-      background-color: var(--button-background-transparent-hovered);
-    }
-
-    &:visited,
-    &.selected {
-      background-color: var(--button-background-transparent-selected);
-    }
-
-    &:focus {
-      outline: 2px solid var(--border-white);
-
-      &::after {
-        display: none;
-      }
-    }
-
-    &:active {
-      color: var(--text-oncolor-primary);
-      background-color: var(--button-background-transparent-pressed);
-    }
-
-    &:disabled,
-    &[disabled] {
-      background-color: transparent;
-      color: var(--text-default-oncolor-disabled);
-    }
-  }
-
-  &--transparent-on-color {
-    background-color: transparent;
-    color: var(--text-oncolor-primary);
-
-    &:hover {
-      color: var(--button-label-transparent-hovered-on-color);
-    }
-
-    &:visited,
-    &.selected {
-      color: var(--button-label-transparent-selected-on-color);
-    }
-
-    &:focus {
-      outline: 2px solid var(--colors-base-white);
-
-      &::after {
-        display: none;
-      }
-    }
-
-    &:active {
-      color: var(--button-label-transparent-pressed-on-color);
-    }
-
-    &:disabled,
-    &[disabled] {
-      background-color: transparent;
-      color: var(--text-default-oncolor-disabled);
-    }
-  }
-}