@onereach/styles 0.1.15 → 0.1.17

package/src/components/_or-button.scss

@@ -1,400 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$btn-prefix: initial.$base-prefix !default;
-
-$btn-min-width: px-to-rem(96) !default;
-$btn-padding: var(--s-2) var(--s-4) !default;
-$btn-cursor: pointer !default;
-
-$btn-font-size: var(--fs-1) !default;
-$btn-font-weight: var(--fw-1) !default;
-$btn-line-height: px-to-rem(22) !default;
-
-$btn-border-width: px-to-rem(1) !default;
-$btn-border-style: solid !default;
-$btn-border-radius: px-to-rem(4) !default;
-
-$btn-letter-spacing: px-to-rem(-0.15) !default;
-
-$btn-box-shadow: 0 px-to-rem(1) px-to-rem(2) 0 hsla(0, 0%, 0%, 20%) !default;
-$btn-box-shadow-second: 0 px-to-rem(1) px-to-rem(2) 0 hsla(0, 0%, 0%, 10%) !default;
-
-$btn-icon-font-size: calc(#{$btn-font-size} + #{px-to-rem(6)});
-
-$list-of-colors: (primary, error, neutral-3, neutral-4, neutral-5, neutral-6);
-$btn-types: (outline, text, icon, icon-simple);
-
-@mixin default-color-mixin() {
-  @each $key in $list-of-colors {
-    &.is-#{$key}-color {
-      --btn-#{$key}-color: var(--c-white);
-      --btn-#{$key}-bg-color: var(--c-#{$key});
-      --btn-#{$key}-darken-3: var(--c-#{$key}-darken-3);
-      --btn-#{$key}-darken-5: var(--c-#{$key}-darken-5);
-      --btn-#{$key}-lighten-20: var(--c-#{$key}-lighten-20);
-
-      color: var(--btn-#{$key}-color);
-      background-color: var(--btn-#{$key}-bg-color);
-      border-color: var(--c-#{$key});
-
-      .#{$btn-prefix}-button {
-        &--loader {
-          &::after {
-            border-color: var(--btn-#{$key}-color);
-          }
-        }
-      }
-
-      @include hover {
-        background-color: var(--btn-#{$key}-darken-3);
-        border-color: var(--btn-#{$key}-darken-3);
-      }
-
-      @include active {
-        background-color: var(--btn-#{$key}-darken-5);
-        border-color: var(--btn-#{$key}-darken-5);
-      }
-
-      @include disabled {
-        background-color: var(--btn-#{$key}-lighten-20);
-        border-color: var(--btn-#{$key}-lighten-20);
-      }
-
-      @include loading {
-        background-color: var(--btn-#{$key}-lighten-20);
-        border-color: var(--btn-#{$key}-lighten-20);
-      }
-    }
-  }
-}
-
-@mixin outline-type() {
-  &.outline-type {
-    background-color: transparent;
-    box-shadow: none;
-
-    .#{$btn-prefix}-button {
-      &--loader {
-        &::after {
-          border-color: inherit;
-        }
-      }
-    }
-
-    @each $key in $list-of-colors {
-      &.is-#{$key}-color {
-        --btn-#{$key}-color: var(--c-#{$key});
-        --btn-#{$key}-darken-3: var(--c-#{$key}-darken-3);
-        --btn-#{$key}-darken-5: var(--c-#{$key}-darken-5);
-        --btn-#{$key}-lighten-20: var(--c-#{$key}-lighten-20);
-
-        color: var(--btn-#{$key}-color);
-        border-color: var(--btn-#{$key}-color);
-
-        .#{$btn-prefix}-button {
-          &--loader {
-            &::after {
-              border-color: var(--btn-#{$key}-lighten-20);
-            }
-          }
-        }
-
-        @include hover {
-          color: var(--c-white);
-          background-color: var(--btn-#{$key}-darken-3);
-          border-color: var(--btn-#{$key}-darken-3);
-        }
-
-        @include active {
-          color: var(--c-white);
-          background-color: var(--btn-#{$key}-darken-5);
-          border-color: var(--btn-#{$key}-darken-5);
-        }
-
-        @include disabled {
-          color: var(--btn-#{$key}-lighten-20);
-          background-color: transparent;
-          border-color: var(--btn-#{$key}-lighten-20);
-        }
-
-        @include loading {
-          color: var(--btn-#{$key}-lighten-20);
-          background-color: transparent;
-          border-color: var(--btn-#{$key}-lighten-20);
-        }
-      }
-    }
-
-    // states
-    @include hover {
-      box-shadow: $btn-box-shadow;
-    }
-
-    @include active {
-      box-shadow: $btn-box-shadow-second;
-    }
-
-    @include loading {
-      box-shadow: $btn-box-shadow-second;
-    }
-  }
-}
-
-@mixin text-type() {
-  &.text-type {
-    min-width: auto;
-    padding: 0;
-    background-color: transparent;
-    border: 1px solid transparent;
-    box-shadow: none;
-
-    @each $key in $list-of-colors {
-      &.is-#{$key}-color {
-        --btn-#{$key}-color: var(--c-#{$key});
-        --btn-#{$key}-darken-3: var(--c-#{$key}-darken-3);
-        --btn-#{$key}-darken-5: var(--c-#{$key}-darken-5);
-        --btn-#{$key}-lighten-20: var(--c-#{$key}-lighten-20);
-
-        color: var(--btn-#{$key}-color);
-        background-color: transparent;
-        border-color: transparent;
-
-        @include hover {
-          color: var(--btn-#{$key}-darken-3);
-          background-color: transparent;
-          border-color: transparent;
-        }
-
-        @include active {
-          color: var(--btn-#{$key}-darken-5);
-          background-color: transparent;
-          border-color: transparent;
-        }
-
-        @include disabled {
-          color: var(--btn-#{$key}-lighten-20);
-          background-color: transparent;
-          border-color: transparent;
-        }
-
-        @include loading {
-          color: var(--btn-#{$key}-lighten-20);
-          background-color: transparent;
-          border-color: transparent;
-        }
-      }
-    }
-  }
-}
-
-@mixin icon-type() {
-  &.icon-type {
-    min-width: auto;
-    max-width: px-to-rem(54);
-    padding: px-to-rem(14);
-    border-radius: initial.$round;
-
-    .material-icons {
-      font-size: px-to-rem(24);
-    }
-
-    .#{$btn-prefix}-button {
-      &--content {
-        &-append,
-        &-prepend {
-          margin: 0;
-        }
-      }
-    }
-  }
-}
-
-@mixin icon-simple-type() {
-  &.icon-simple-type {
-    $btn-border-radius: 9999px;
-
-    min-width: auto;
-    max-width: px-to-rem(18);
-    padding: 0;
-    background-color: transparent;
-    border-color: transparent;
-    border-radius: $btn-border-radius;
-    box-shadow: none;
-
-    @each $key in $list-of-colors {
-      &.is-#{$key}-color {
-        --btn-#{$key}-color: var(--c-#{$key});
-        --btn-#{$key}-darken-3: var(--c-#{$key}-darken-3);
-        --btn-#{$key}-darken-5: var(--c-#{$key}-darken-5);
-        --btn-#{$key}-lighten-20: var(--c-#{$key}-lighten-20);
-
-        color: var(--btn-#{$key}-color);
-        background-color: transparent;
-        border-color: transparent;
-
-        @include hover {
-          color: var(--btn-#{$key}-darken-3);
-          background-color: transparent;
-          border-color: transparent;
-        }
-
-        @include active {
-          color: var(--btn-#{$key}-darken-5);
-          background-color: transparent;
-          border-color: transparent;
-        }
-
-        @include disabled {
-          color: var(--btn-#{$key}-lighten-20);
-          background-color: transparent;
-          border-color: transparent;
-        }
-
-        @include loading {
-          color: var(--btn-#{$key}-lighten-20);
-          background-color: transparent;
-          border-color: transparent;
-        }
-      }
-    }
-
-    .material-icons {
-      font-size: px-to-rem(16);
-    }
-
-    .#{$btn-prefix}-button {
-      &--loader {
-        &::after {
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      &--content {
-        &-append,
-        &-prepend {
-          margin: 0;
-        }
-      }
-    }
-  }
-}
-
-@mixin is-fullwidth() {
-  &.is-fullwidth {
-    width: 100%;
-  }
-}
-
-@mixin is-block() {
-  &.is-block {
-    display: flex;
-  }
-}
-
-.#{$btn-prefix}-button {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  position: relative;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: $btn-min-width;
-  padding: $btn-padding;
-  font-family: inherit;
-  font-size: $btn-font-size;
-  font-weight: $btn-font-weight;
-  line-height: $btn-line-height;
-  letter-spacing: $btn-letter-spacing;
-  cursor: $btn-cursor;
-  border: $btn-border-width $btn-border-style;
-  border-radius: $btn-border-radius;
-  box-shadow: $btn-box-shadow;
-
-  @include transition(color, background-color, box-shadow, border-color);
-
-  .material-icons {
-    font-size: $btn-icon-font-size;
-  }
-
-  &--loader {
-    position: absolute !important;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    visibility: hidden;
-    opacity: 0;
-
-    @include transition(opacity);
-
-    &::after {
-      border-color: inherit;
-      animation-play-state: paused;
-    }
-  }
-
-  &--content {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    @include transition(opacity);
-
-    &-prepend,
-    &-append {
-      display: inline-flex;
-    }
-
-    &-prepend {
-      margin-right: px-to-rem(8);
-    }
-
-    &-append {
-      margin-left: px-to-rem(8);
-    }
-  }
-
-  // sizes
-  &.is-small {
-    font-size: calc(#{$btn-font-size} - #{px-to-rem(2)});
-    line-height: 1;
-
-    .material-icons {
-      font-size: calc(#{$btn-font-size} - #{px-to-rem(2)} + #{px-to-rem(4)});
-    }
-  }
-
-  @include default-color-mixin;
-  @include outline-type;
-  @include text-type;
-  @include icon-type;
-  @include icon-simple-type;
-  @include is-fullwidth;
-  @include is-block;
-
-  @include loading {
-    .#{$btn-prefix}-button {
-      &--loader {
-        visibility: visible;
-        opacity: 1;
-
-        &::after {
-          animation-play-state: running;
-        }
-      }
-
-      &--content {
-        opacity: 0;
-      }
-    }
-  }
-
-  @include disabled {
-    box-shadow: none;
-  }
-}

package/src/components/_or-checkbox.scss

@@ -1,119 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$checkbox-prefix: initial.$base-prefix !default;
-
-$checkbox-size: px-to-rem(16) !default;
-$checkbox-border-radius: px-to-rem(2) !default;
-$checkbox-border-width: px-to-rem(1) !default;
-$checkbox-border-color: var(--c-neutral-2) !default;
-$checkbox-border-color-hover: var(--c-neutral-2-darken-3) !default;
-$checkbox-border-color-active: var(--c-neutral-2-darken-5) !default;
-$checkbox-bg-color: var(--c-white) !default;
-$checkbox-text-color: inherit !default;
-$checkbox-font-size: inherit !default;
-$checkbox-line-height: inherit !default;
-$checkbox-content-spacing: var(--s-3) !default;
-
-// checked
-$checkbox-icon-color-checked: var(--c-white) !default;
-$checkbox-border-color-checked: var(--c-primary) !default;
-$checkbox-border-color-checked-hover: var(--c-primary-darken-3) !default;
-$checkbox-border-color-checked-active: var(--c-primary-darken-5) !default;
-$checkbox-bg-color-checked: var(--c-primary) !default;
-$checkbox-bg-color-checked-hover: var(--c-primary-darken-3) !default;
-$checkbox-bg-color-checked-active: var(--c-primary-darken-5) !default;
-$checkbox-bg-color-checked-disabled: var(--c-primary-lighten-20) !default;
-
-@mixin is-checked () {
-  &.is-checked {
-    .#{$checkbox-prefix}-checkbox {
-      &--checkbox {
-        background-color: $checkbox-bg-color-checked;
-        border-color: $checkbox-border-color-checked;
-      }
-    }
-
-    @include hover {
-      .#{$checkbox-prefix}-checkbox {
-        &--checkbox {
-          background-color: $checkbox-bg-color-checked-hover;
-          border-color: $checkbox-border-color-checked-hover;
-        }
-      }
-    }
-
-    @include active {
-      .#{$checkbox-prefix}-checkbox {
-        &--checkbox {
-          background-color: $checkbox-bg-color-checked-active;
-          border-color: $checkbox-border-color-checked-active;
-        }
-      }
-    }
-
-    @include disabled {
-      .#{$checkbox-prefix}-checkbox {
-        &--checkbox {
-          background-color: $checkbox-bg-color-checked-disabled;
-          border-color: $checkbox-bg-color-checked-disabled;
-        }
-      }
-    }
-  }
-}
-
-.#{$checkbox-prefix}-checkbox {
-  display: inline-flex;
-  align-items: center;
-  font-size: $checkbox-font-size;
-  line-height: $checkbox-size;
-  color: $checkbox-text-color;
-  cursor: pointer;
-
-  &--input {
-    @include visually-hidden;
-  }
-
-  &--checkbox {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: $checkbox-size;
-    min-width: $checkbox-size;
-    height: $checkbox-size;
-    min-height: $checkbox-size;
-    margin-right: $checkbox-content-spacing;
-    background-color: $checkbox-bg-color;
-    border: $checkbox-border-width solid $checkbox-border-color;
-    border-radius: $checkbox-border-radius;
-
-    @include transition(background-color, border-color);
-  }
-
-  &--icon {
-    font-size: $checkbox-size;
-    color: $checkbox-icon-color-checked;
-
-    @include transition(color);
-  }
-
-  @include hover {
-    .#{$checkbox-prefix}-checkbox {
-      &--checkbox {
-        border-color: $checkbox-border-color-hover;
-      }
-    }
-  }
-
-  @include active {
-    .#{$checkbox-prefix}-checkbox {
-      &--checkbox {
-        border-color: $checkbox-border-color-active;
-      }
-    }
-  }
-
-  @include disabled;
-  @include is-checked;
-}

package/src/components/_or-collapse.scss

@@ -1,11 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$collapse-prefix: initial.$base-prefix !default;
-
-.#{$collapse-prefix}-collapse {
-  padding: 0;
-  overflow: hidden;
-
-  @include transition(height);
-}

package/src/components/_or-error.scss

@@ -1,13 +0,0 @@
-@use "../utils/functions/px-to-rem" as *;
-@use "../variables/initial";
-
-$error-prefix: initial.$base-prefix !default;
-$error-font-size: var(--fs-0) !default;
-$error-line-height: px-to-rem(14) !default;
-$error-color: var(--c-error) !default;
-
-.#{$error-prefix}-error {
-  font-size: $error-font-size;
-  line-height: $error-line-height;
-  color: $error-color;
-}

package/src/components/_or-hint.scss

@@ -1,13 +0,0 @@
-@use "../utils/functions/px-to-rem" as *;
-@use "../variables/initial";
-
-$hint-prefix: initial.$base-prefix !default;
-$hint-font-size: var(--fs-0) !default;
-$hint-line-height: px-to-rem(14) !default;
-$hint-color: var(--c-neutral-4) !default;
-
-.#{$hint-prefix}-hint {
-  font-size: $hint-font-size;
-  line-height: $hint-line-height;
-  color: $hint-color;
-}

package/src/components/_or-icon.scss

@@ -1,32 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$icon-prefix: initial.$base-prefix !default;
-
-$icon-size: px-to-rem(20) !default;
-$icon-color: inherit !default;
-
-$list-of-colors: (neutral-3, neutral-4);
-
-.#{$icon-prefix}-icon {
-  display: inline-flex;
-  font-size: $icon-size;
-  color: $icon-color;
-
-  @each $key in $list-of-colors {
-    &.is-#{$key}-color {
-      color: var(--c-#{$key});
-
-      @include hover {
-        color: var(--c-neutral-5);
-      }
-
-      @include active {
-        color: var(--c-neutral-6);
-      }
-    }
-  }
-
-  @include transition(color);
-  @include disabled;
-}

package/src/components/_or-label.scss

@@ -1,14 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$label-prefix: initial.$base-prefix !default;
-$label-font-size: var(--fs-0) !default;
-$label-line-height: px-to-rem(14) !default;
-$label-color: var(--c-neutral-4) !default;
-
-.#{$label-prefix}-label {
-  width: 100%;
-  font-size: $label-font-size;
-  line-height: $label-line-height;
-  color: $label-color;
-}

package/src/components/_or-list.scss

@@ -1,44 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$list-prefix: initial.$base-prefix !default;
-
-.#{$list-prefix}-list {
-  cursor: default;
-
-  &--header {
-    margin-bottom: var(--s-2);
-  }
-
-  &--handle {
-    margin-right: var(--s-3);
-    cursor: move;
-  }
-
-  &--delete-btn {
-    margin-left: var(--s-3);
-  }
-
-  &--item {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    margin-bottom: var(--s-4);
-
-    //.material-icons {
-    //  color: var(--c-neutral-4);
-    //}
-  }
-
-  &--slot {
-    width: 100%;
-    transition: all initial.$transition-duration initial.$transition-function;
-
-    > * {
-      width: 100%;
-    }
-  }
-
-  @include disabled;
-}