@onereach/styles 0.1.15 → 0.1.17

package/src/components/_or-textbox.scss

@@ -1,238 +0,0 @@
-@use "sass:list";
-@use "../utils/index" as *;
-@use "../variables/initial";
-
-$textbox-prefix: initial.$base-prefix !default;
-
-$textbox-border-width: 1px !default;
-
-$textbox-placeholder-color: var(--c-neutral-4) !default;
-
-$textbox-color-error: var(--c-error) !default;
-
-$textbox-bg: var(--c-neutral-1) !default;
-$textbox-bg-hover: var(--c-white) !default;
-$textbox-bg-focus: var(--c-white) !default;
-$textbox-bg-disabled: var(--c-neutral-2) !default;
-
-$textbox-border-color: var(--c-neutral-2) !default;
-$textbox-border-color-hover: var(--c-neutral-2-darken-3) !default;
-$textbox-border-color-focus: var(--c-primary) !default;
-$textbox-border-color-active: var(--c-neutral-2-darken-5) !default;
-$textbox-border-color-disabled: var(--c-neutral-2) !default;
-
-$textbox-border-color-error: var(--c-error) !default;
-$textbox-border-color-error-hover: var(--c-error-darken-3) !default;
-$textbox-border-color-error-focus: var(--c-error-darken-5) !default;
-$textbox-border-color-error-disabled: var(--c-error) !default;
-
-$textbox-border-radius: px-to-rem(4) !default;
-
-$textbox-height: px-to-rem(36) !default;
-$textbox-min-width: px-to-rem(114) !default;
-
-$textbox-padding: px-to-rem(10) !default;
-
-$textbox-font-size: var(--fs-1) !default;
-
-$textbox-label-margin: 0 0 px-to-rem(4) !default;
-$textbox-label-color: var(--c-neutral-4) !default;
-
-.#{$textbox-prefix}-textbox {
-  display: flex;
-  align-items: flex-start;
-
-  > div {
-    &:not(.#{$textbox-prefix}-textbox--append, .#{$textbox-prefix}-textbox--prepend) {
-      width: 100%;
-    }
-  }
-
-  &--label {
-    margin: $textbox-label-margin;
-    color: $textbox-label-color;
-
-    .material-icons {
-      font-size: var(--fs-1);
-    }
-  }
-
-  &--append,
-  &--prepend {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    min-height: $textbox-height;
-  }
-
-  &--append {
-    margin-left: px-to-rem(10);
-  }
-
-  &--prepend {
-    margin-right: px-to-rem(10);
-  }
-
-  &--input {
-    display: block;
-    width: 100%;
-    min-width: $textbox-min-width;
-    height: $textbox-height;
-    padding: $textbox-padding;
-    font-family: inherit;
-    font-size: $textbox-font-size;
-    background-color: $textbox-bg;
-    border: $textbox-border-width solid $textbox-border-color;
-    border-radius: $textbox-border-radius;
-    outline: none;
-
-    @include transition(border-color, background-color);
-
-    &[type="password"],
-    &[type="search"] {
-      padding-right: calc(#{$textbox-padding} + #{px-to-rem(26)});
-    }
-
-    &-wr {
-      position: relative;
-      width: 100%;
-    }
-
-    &-toggle-btn {
-      position: absolute;
-      top: 50%;
-      right: 0;
-      z-index: 1;
-      transform: translate(-#{list.nth($textbox-padding, 1)}, -50%);
-    }
-
-    &::placeholder {
-      color: $textbox-placeholder-color;
-
-      @include transition(opacity);
-    }
-
-    @include hover {
-      background-color: $textbox-bg-hover;
-      border-color: $textbox-border-color-hover;
-    }
-
-    @include active {
-      border-color: $textbox-border-color-active;
-    }
-
-    @include focus {
-      background-color: $textbox-bg-focus;
-      border-color: $textbox-border-color-focus;
-
-      &::placeholder {
-        opacity: 0;
-      }
-    }
-
-    @include disabled {
-      background-color: $textbox-bg-disabled;
-      border-color: $textbox-border-color-disabled;
-    }
-  }
-
-  &--textarea {
-    @extend .#{$textbox-prefix}-textbox--input;
-
-    min-height: px-to-rem(79);
-    max-height: px-to-rem(142);
-    overflow-x: hidden;
-    overflow-y: auto;
-    resize: none;
-  }
-
-  &--info {
-    width: 100%;
-    margin: 0;
-
-    @include transition(height, opacity);
-  }
-
-  &--counter {
-    flex-shrink: 0;
-    margin-left: auto;
-    font-size: var(--fs-0);
-    line-height: px-to-rem(14);
-    color: var(--c-neutral-4);
-  }
-
-  &--hint,
-  &-error {
-    flex-shrink: 1;
-
-    @include transition(height, opacity);
-  }
-
-  &.is-small {
-    .#{$textbox-prefix}-textbox {
-      &--input {
-        padding: px-to-rem(8) px-to-rem(10);
-        font-size: var(--fs-0);
-
-        &[type="password"],
-        &[type="search"] {
-          padding-right: calc(#{px-to-rem(10)} + #{px-to-rem(12) * 2});
-        }
-
-        &-toggle-btn {
-          .material-icons {
-            font-size: var(--fs-1);
-          }
-        }
-      }
-    }
-  }
-
-  &.has-counter {
-    .#{$textbox-prefix}-textbox {
-      &--hint,
-      &--error {
-        padding-right: px-to-rem(15);
-      }
-    }
-  }
-
-  &.is-show-info {
-    .#{$textbox-prefix}-textbox {
-      &--info {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        padding-top: px-to-rem(4);
-      }
-    }
-  }
-
-  @include disabled {
-    .#{$textbox-prefix}-textbox {
-      &--input-toggle-btn {
-        pointer-events: none;
-      }
-    }
-  }
-
-  @include has-error {
-    .#{$textbox-prefix}-textbox {
-      &--input {
-        border-color: $textbox-border-color-error;
-
-        @include hover {
-          border-color: $textbox-border-color-error-hover;
-        }
-
-        @include focus {
-          border-color: $textbox-border-color-error-focus;
-        }
-
-        @include disabled {
-          border-color: $textbox-border-color-error-disabled;
-        }
-      }
-    }
-  }
-}

package/src/utils/functions/_get-font-size.scss

@@ -1,19 +0,0 @@
-@use "../../variables/tokens/design-tokens" as *;
-@use "sass:string";
-@use "sass:map";
-@use "px-to-rem" as *;
-
-@function get-font-size($levelIndex: 0, $unit: rem) {
-  $value: map.get($design-tokens, typography, font-sizes, string.quote(level-#{$levelIndex}));
-  $defaultValue: map.get($design-tokens, typography, line-heights, string.quote(level-0));
-
-  @if $value and $unit == rem {
-    @return px-to-rem($value);
-  }
-
-  @else if $value and $unit != rem {
-    @return #{$value + $unit};
-  }
-
-  @return $defaultValue or 0;
-}

package/src/utils/functions/_get-font-weight.scss

@@ -1,14 +0,0 @@
-@use "../../variables/tokens/design-tokens" as *;
-@use "sass:string";
-@use "sass:map";
-
-@function get-font-weight($levelIndex: 0) {
-  $value: map.get($design-tokens, typography, font-weights, string.quote(level-#{$levelIndex}));
-  $defaultValue: map.get($design-tokens, typography, font-weights, string.quote(level-0));
-
-  @if $value {
-    @return $value;
-  }
-
-  @return $defaultValue or normal;
-}

package/src/utils/functions/_get-line-height.scss

@@ -1,19 +0,0 @@
-@use "../../variables/tokens/design-tokens" as *;
-@use "sass:string";
-@use "sass:map";
-@use "px-to-rem" as *;
-
-@function get-line-height($levelIndex: 0, $unit: rem) {
-  $value: map.get($design-tokens, typography, line-heights, string.quote(level-#{$levelIndex}));
-  $defaultValue: map.get($design-tokens, typography, line-heights, string.quote(level-0));
-
-  @if $value and $unit == rem {
-    @return px-to-rem($value);
-  }
-
-  @else if $value and $unit != rem {
-    @return #{$value + $unit};
-  }
-
-  @return $defaultValue or 1;
-}

package/src/utils/functions/_get-spacing.scss

@@ -1,18 +0,0 @@
-@use "../../variables/tokens/design-tokens" as *;
-@use "sass:string";
-@use "sass:map";
-@use "px-to-rem" as *;
-
-@function get-spacing($levelIndex: 0, $unit: rem) {
-  $value: map.get($design-tokens, spacings, string.quote(level-#{$levelIndex}));
-
-  @if $value and $unit == rem {
-    @return px-to-rem($value);
-  }
-
-  @else if $value and $unit != rem {
-    @return #{$value + $unit};
-  }
-
-  @return 0;
-}

package/src/utils/mixins/_height-vh.scss

@@ -1,19 +0,0 @@
-@mixin heightVh($value: 100) {
-  height: #{$value * 1vh};
-  height: calc(var(--vh, 1vh) * #{$value});
-}
-
-@mixin heightVhStatic($value: 100) {
-  height: #{$value * 1vh};
-  height: calc(var(--vh-static, 1vh) * #{$value});
-}
-
-@mixin minHeightVh($value: 100) {
-  min-height: #{$value * 1vh};
-  min-height: calc(var(--vh, 1vh) * #{$value});
-}
-
-@mixin minHeightVhStatic($value: 100) {
-  min-height: #{$value * 1vh};
-  min-height: calc(var(--vh-static, 1vh) * #{$value});
-}