@onereach/styles 0.1.15 → 0.1.17

package/src/components/_or-loader.scss

@@ -1,126 +0,0 @@
-@use "../utils/index" as *;
-@use "../base/animation" as *;
-@use "../variables/initial";
-
-$loader-prefix: initial.$base-prefix !default;
-
-$loader-width: px-to-rem(24) !default;
-$loader-height: $loader-width !default;
-
-$loader-border-width: 2px !default;
-$loader-border-color: inherit !default;
-
-@keyframes loaderLinear {
-  0% {
-    transform: translate(-100%, 0);
-  }
-
-  100% {
-    transform: translate(100%, 0);
-  }
-}
-
-// loader types mixins
-@mixin default-type() {
-  &.is-default {
-    &::after {
-      width: $loader-width;
-      height: $loader-height;
-      content: '';
-      border-color: $loader-border-color;
-      border-top: $loader-border-width solid;
-      border-right: $loader-border-width solid;
-      border-bottom: $loader-border-width solid transparent !important;
-      border-left: $loader-border-width solid;
-      border-radius: 50%;
-      animation: spinAround 0.7s linear infinite;
-    }
-  }
-}
-
-@mixin text-type() {
-  &.is-text {
-    > span {
-      display: inline-flex;
-    }
-
-    @for $i from 0 through 3 {
-      .#{$loader-prefix}-loader--dot:nth-child(#{$i}) {
-        animation: fade 1s initial.$transition-function $i * 0.2s infinite;
-      }
-    }
-  }
-}
-
-@mixin linear-type() {
-  &.is-linear {
-    width: 100%;
-    max-width: px-to-rem(432);
-
-    .#{$loader-prefix}-loader {
-      &--linear {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-
-        &-title {
-          margin-bottom: var(--s-4);
-          font-size: initial.$subheading-font-size;
-          font-weight: initial.$subheading-font-weight;
-          line-height: initial.$subheading-line-height;
-          color: var(--c-neutral-6);
-          letter-spacing: px-to-rem(-0.45);
-        }
-
-        &-loader {
-          position: relative;
-          display: block;
-          width: 100%;
-          height: px-to-rem(4);
-          margin-bottom: var(--s-4);
-          overflow: hidden;
-          background-color: var(--c-neutral-2);
-          border-radius: px-to-rem(2);
-
-          > span {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            animation: loaderLinear 1.2s initial.$transition-function infinite;
-
-            &::after {
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              max-width: px-to-rem(112);
-              height: 100%;
-              content: '';
-              background-color: var(--c-primary);
-              border-radius: px-to-rem(2);
-            }
-          }
-        }
-
-        &-desc {
-          color: var(--c-neutral-5);
-        }
-      }
-    }
-  }
-}
-
-.#{$loader-prefix}-loader {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  // types
-  @include default-type;
-  @include text-type;
-  @include linear-type;
-}

package/src/components/_or-radio-group.scss

@@ -1,33 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$radio-group-prefix: initial.$base-prefix !default;
-$radio-group-column-mb: var(--s-4) !default;
-$radio-group-row-mr: var(--s-4) !default;
-
-.#{$radio-group-prefix}-radio-group {
-  &.is-column {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-
-    > * {
-      &:not(:last-child) {
-        margin-bottom: $radio-group-column-mb;
-      }
-    }
-  }
-
-  &.is-row {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-
-    > * {
-      &:not(:last-child) {
-        margin-right: $radio-group-row-mr;
-      }
-    }
-  }
-}

package/src/components/_or-radio.scss

@@ -1,118 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$radio-prefix: initial.$base-prefix !default;
-$radio-icon-size: px-to-rem(16) !default;
-
-$radio-dot-size: $radio-icon-size - px-to-rem(12) !default;
-$radio-dot-bg: var(--c-white) !default;
-
-$radio-icon-border-width: px-to-rem(1) !default;
-$radio-icon-border-color: var(--c-neutral-2) !default;
-$radio-icon-border-color-hover: var(--c-neutral-2-darken-3) !default;
-$radio-icon-border-color-active: var(--c-neutral-2-darken-5) !default;
-
-$radio-icon-bg: var(--c-white) !default;
-$radio-icon-bg-hover: var(--c-white-darken-3) !default;
-$radio-icon-bg-active: var(--c-white-darken-5) !default;
-$radio-icon-bg-checked: var(--c-primary) !default;
-
-$radio-content-spacing: var(--s-3) !default;
-$radio-content-color: var(--c-neutral-6) !default;
-$radio-content-color-disabled: var(--c-neutral-4) !default;
-
-@mixin is-checked() {
-  &.is-checked {
-    .#{$radio-prefix}-radio {
-      &--radio {
-        background-color: $radio-icon-bg-checked;
-        border-color: $radio-icon-bg-checked;
-
-        &::after {
-          transform: translate(-50%, -50%) scale(1);
-        }
-      }
-    }
-  }
-}
-
-.#{$radio-prefix}-radio {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-
-  &--input {
-    @include visually-hidden;
-  }
-
-  &--radio {
-    position: relative;
-    width: $radio-icon-size;
-    min-width: $radio-icon-size;
-    height: $radio-icon-size;
-    min-height: $radio-icon-size;
-    margin-right: $radio-content-spacing;
-    background-color: $radio-icon-bg;
-    border: $radio-icon-border-width solid $radio-icon-border-color;
-    border-radius: initial.$round;
-
-    @include transition(border-color, background-color, opacity);
-
-    &::after {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: $radio-dot-size;
-      height: $radio-dot-size;
-      content: '';
-      background-color: $radio-dot-bg;
-      border-radius: inherit;
-      transition-delay: 0.15s;
-      transform: translate(-50%, -50%) scale(0);
-
-      @include transition(transform);
-    }
-  }
-
-  &--content {
-    color: $radio-content-color;
-
-    @include transition(color);
-  }
-
-  @include is-checked;
-
-  @include hover {
-    &:not(.is-checked) {
-      .#{$radio-prefix}-radio {
-        &--radio {
-          background-color: $radio-icon-bg-hover;
-          border-color: $radio-icon-border-color-hover;
-        }
-      }
-    }
-  }
-
-  @include active {
-    &:not(.is-checked) {
-      .#{$radio-prefix}-radio {
-        &--radio {
-          background-color: $radio-icon-bg-active;
-          border-color: $radio-icon-border-color-active;
-        }
-      }
-    }
-  }
-
-  @include disabled {
-    .#{$radio-prefix}-radio {
-      &--radio {
-        opacity: 0.5;
-      }
-
-      &--content {
-        color: $radio-content-color-disabled;
-      }
-    }
-  }
-}

package/src/components/_or-switch.scss

@@ -1,165 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-// base
-$switch-prefix: initial.$base-prefix !default;
-
-// layer
-$switch-layer-width: px-to-rem(34) !default;
-$switch-layer-height: px-to-rem(14) !default;
-
-$switch-layer-bg: var(--c-neutral-2) !default;
-$switch-layer-bg-hover: var(--c-neutral-2-darken-3) !default;
-$switch-layer-bg-active: var(--c-neutral-2-darken-5) !default;
-
-$switch-layer-bg-checked: var(--c-primary) !default;
-$switch-layer-bg-checked-hover: var(--c-primary-darken-3) !default;
-$switch-layer-bg-checked-active: var(--c-primary-darken-5) !default;
-$switch-layer-bg-checked-disabled: var(--c-primary-lighten-20) !default;
-
-// knob
-$switch-knob-size: px-to-rem(20) !default;
-$switch-knob-bg: var(--c-white) !default;
-$switch-knob-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 1px 0 rgba(0, 0, 0, 0.24) !default;
-$switch-knob-box-shadow-disabled: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 1px 0 rgba(0, 0, 0, 0.24) !default;
-
-$switch-knob-border-width: 1px !default;
-$switch-knob-border-color: var(--c-neutral-1) !default;
-
-$switch-loader-size: calc(#{$switch-knob-size} - #{px-to-rem(5)});
-$switch-loader-color: var(--c-primary) !default;
-
-$switch-content-spacing: var(--s-3) !default;
-$switch-content-color: var(--c-neutral-6) !default;
-$switch-content-color-disabled: var(--c-neutral-4) !default;
-
-@mixin is-checked() {
-  &.is-checked {
-    .#{$switch-prefix}-switch {
-      &--layer {
-        background-color: $switch-layer-bg-checked;
-      }
-
-      &--knob {
-        transform: translate(calc(100% - 3px), -50%);
-      }
-    }
-
-    @include hover {
-      .#{$switch-prefix}-switch {
-        &--layer {
-          background-color: $switch-layer-bg-checked-hover;
-        }
-      }
-    }
-
-    @include active {
-      .#{$switch-prefix}-switch {
-        &--layer {
-          background-color: $switch-layer-bg-checked-active;
-        }
-      }
-    }
-  }
-}
-
-.#{$switch-prefix}-switch {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-
-  &--input {
-    @include visually-hidden;
-  }
-
-  &--switcher {
-    position: relative;
-    display: inline-flex;
-    margin-right: $switch-content-spacing;
-  }
-
-  &--layer {
-    width: $switch-layer-width;
-    min-width: $switch-layer-width;
-    height: $switch-layer-height;
-    min-height: $switch-layer-height;
-    background-color: $switch-layer-bg;
-    border-radius: initial.$round;
-
-    @include transition(background-color, opacity);
-  }
-
-  &--knob {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $switch-knob-size;
-    min-width: $switch-knob-size;
-    height: $switch-knob-size;
-    min-height: $switch-knob-size;
-    background-color: $switch-knob-bg;
-    border-width: $switch-knob-border-width solid $switch-knob-border-color;
-    border-radius: 9999px;
-    box-shadow: $switch-knob-box-shadow;
-    transform: translate(-3px, -50%);
-
-    @include transition(transform, box-shadow);
-  }
-
-  &--content {
-    color: $switch-content-color;
-
-    @include transition(color);
-  }
-
-  &--loader {
-    &.#{$switch-prefix}-loader {
-      &::after {
-        width: $switch-loader-size;
-        min-width: $switch-loader-size;
-        height: $switch-loader-size;
-        min-height: $switch-loader-size;
-        border-color: $switch-loader-color;
-      }
-    }
-  }
-
-  @include hover {
-    .#{$switch-prefix}-switch {
-      &--layer {
-        background-color: $switch-layer-bg-hover;
-      }
-    }
-  }
-
-  @include active {
-    .#{$switch-prefix}-switch {
-      &--layer {
-        background-color: $switch-layer-bg-active;
-      }
-    }
-  }
-
-  @include disabled {
-    .#{$switch-prefix}-switch {
-      &--layer {
-        opacity: 0.5;
-      }
-
-      &--knob {
-        box-shadow: $switch-knob-box-shadow-disabled;
-      }
-
-      &--content {
-        color: $switch-content-color-disabled;
-      }
-    }
-  }
-
-  @include is-checked;
-  @include loading;
-}

package/src/components/_or-tab-header-item.scss

@@ -1,42 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$tab-header-item-prefix: initial.$base-prefix !default;
-$tab-header-item-color: var(--c-neutral-5) !default;
-$tab-header-item-font-weight: var(--fw-2) !default;
-$tab-header-item-font-size: var(--fs-1) !default;
-$tab-header-item-line-height: var(--lh-1) !default;
-
-$tab-header-item-color-hover: var(--c-neutral-6) !default;
-$tab-header-item-color-active: var(--c-neutral-6) !default;
-$tab-header-item-color-disabled: var(--c-neutral-3) !default;
-
-.#{$tab-header-item-prefix}-tab-header-item {
-  padding: 0;
-  font-size: $tab-header-item-font-size;
-  font-weight: $tab-header-item-font-weight;
-  line-height: $tab-header-item-line-height;
-  color: $tab-header-item-color;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-
-  &:not(:last-child) {
-    margin-right: var(--s-6);
-  }
-
-  @include transition(color);
-
-  @include hover {
-    color: $tab-header-item-color-hover;
-  }
-
-  @include disabled {
-    color: $tab-header-item-color-disabled;
-  }
-
-  &.is-active {
-    color: $tab-header-item-color-active;
-    cursor: default;
-  }
-}

package/src/components/_or-tabs.scss

@@ -1,32 +0,0 @@
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$tabs-prefix: initial.$base-prefix !default;
-
-.#{$tabs-prefix}-tabs {
-  width: 100%;
-  overflow: hidden;
-
-  &--header {
-    position: relative;
-    padding: 0 var(--s-4) var(--s-3);
-    border-bottom: 1px solid var(--c-neutral-2);
-  }
-
-  &--tabs {
-    display: flex;
-    width: 100%;
-  }
-
-  &--indicator {
-    position: absolute;
-    bottom: -1px;
-    left: 0;
-    z-index: 1;
-    width: auto;
-    height: px-to-rem(2);
-    background-color: var(--c-neutral-6);
-
-    @include transition(transform, width);
-  }
-}