@itcase/ui 1.0.1

package/dist/css/components/Switch/Switch.css

@@ -0,0 +1,53 @@
+.switch {
+  position: relative;
+  min-width: 52px;
+  height: 100%;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: 0.4s;
+  min-height: 32px;
+  overflow: hidden;
+  display: flex;
+  &__checkbox {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    cursor: pointer;
+    appearance: none;
+    border: 0;
+    margin: 0;
+    z-index: 2;
+    &:checked {
+      & + .switch__bg {
+        background: var(--color-accent-primary);
+      }
+      & ~ .switch__toggle {
+        left: 100%;
+        margin: 0 0 0 -3px;
+        background: var(--color-accent-item-primary);
+        transform: translate(-100%, -50%);
+      }
+    }
+  }
+  &__bg {
+    width: 100%;
+    flex: 1;
+    background: var(--color-surface-tertiary);
+    transition: all 0.25s;
+  }
+  &__toggle {
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    height: calc(100% - 6px);
+    position: absolute;
+    aspect-ratio: 1/1;
+    top: 50%;
+    transform: translate(3px, -50%);
+    left: 0;
+    background: #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    transition: all 0.25s;
+  }
+}

package/dist/css/components/Text/Text.css

@@ -0,0 +1,33 @@
+.text {}
+.text_size {
+  @each $sizeText in xxs, xs, s, m, l, xl, xxl {
+    &_$(sizeText) {
+      padding: 0;
+      margin: 0;
+      @mixin text-$(sizeText);
+    }
+  }
+  @each $size in h1, h2, h3, h4, h5, h6 {
+    &_$(size) {
+      padding: 0;
+      margin: 0;
+      @mixin $(size);
+    }
+  }
+  @each $sizeP in p {
+    &_$(sizeP) {
+      @mixin $(sizeP);
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+.text {
+  &&_type {
+    @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      &_$(type) {
+        color: var(--color-$(type)-text-$(type));
+      }
+    }
+  }
+}

package/dist/css/components/Textarea/Textarea.css

@@ -0,0 +1,40 @@
+.textarea {
+  width: 100%;
+  min-width: 100%;
+  min-height: 160px;
+  max-height: 160px;
+  padding: 16px 16px;
+  z-index: 1;
+  outline: 0;
+  resize: none;
+  border: none;
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  &:read-only {
+    color: var(--color-surface-text-tertiary);
+  }
+  &:focus {
+    background: var(--color-surface-primary-hover);
+  }
+}
+.textarea {
+  &_shape {
+    &_rounded {
+      border-radius: 4px;
+      position: relative;
+    }
+  }
+}
+.textarea {
+  &&_size {
+    @each $sizeValue in xs, s, m, l, xl, xxl {
+      &_$(sizeValue) {
+        padding-top: var(--textarea-size-$(sizeValue)-padding-top);
+        padding-right: var(--textarea-size-$(sizeValue)-padding-right);
+        padding-bottom: var(--textarea-size-$(sizeValue)-padding-bottom);
+        padding-left: var(--textarea-size-$(sizeValue)-padding-left);
+      }
+    }
+  }
+}

package/dist/css/components/Tile/Tile.css

@@ -0,0 +1,23 @@
+.tile {
+
+}
+.tile {
+  &_type {
+    &_icon {
+      padding: 16px;
+      ^^&__icon {
+        margin: 0 0 16px 0;
+      }
+    }
+  }
+}
+.tile {
+  &_shape {
+    &_rounded {
+      border-radius: 12px;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}

package/dist/css/components/Title/Title.css

@@ -0,0 +1,71 @@
+.title {}
+.title {
+  &_size_h1 {
+    @mixin h1;
+    padding: 0;
+    margin: 0;
+  }
+}
+.title {
+  &_size_h2 {
+    @mixin h2;
+    padding: 0;
+    margin: 0;
+  }
+}
+.title {
+  &_size_h3 {
+    @mixin h3;
+    padding: 0;
+    margin: 0;
+  }
+}
+.title {
+  &_size_h4 {
+    @mixin h4;
+    padding: 0;
+    margin: 0;
+  }
+}
+.title {
+  &_size_h5 {
+    @mixin h5;
+    padding: 0;
+    margin: 0;
+  }
+}
+.title {
+  &_size_h6 {
+    @mixin h6;
+    padding: 0;
+    margin: 0;
+  }
+}
+.title {
+  &&_type {
+    &_accent {
+      color: var(--color-accent-text-secondary);
+    }
+  }
+}
+.title {
+  &&_type {
+    &_primary {
+      color: var(--color-primary-text-secondary);
+    }
+  }
+}
+.title {
+  &&_type {
+    &_secondary {
+      color: var(--color-secondary-text-secondary);
+    }
+  }
+}
+.title {
+  &&_type {
+    &_tertiary {
+      color: var(--color-tertiary-text-tertiary);
+    }
+  }
+}

package/dist/css/components/Tooltip/Tooltip.css

@@ -0,0 +1,4 @@
+/* @import './css/tooltip.css';
+
+@import './css/tooltip_size.css';
+@import './css/tooltip_shape.css'; */

package/dist/css/components/Video/Video.css

@@ -0,0 +1,37 @@
+.video {
+}
+.video {
+  &&_position {
+    &_center {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+.video {
+  &&_type_cover {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    ^&__wrapper {
+      min-width: 100%;
+      min-height: 100%;
+    }
+  }
+}
+.video {
+  &&_type_full {
+    position: relative;
+    ^&__wrapper {
+      width: 100%;
+    }
+  }
+}
+.video {
+  &&_type_grid-item {
+    position: relative;
+    overflow: hidden;
+  }
+}

package/dist/css/components/Wrapper/Wrapper.css

@@ -0,0 +1,36 @@
+.wrapper {
+  width: 100%;
+  &__inner {
+    width: 100%;
+    max-width: var(--max);
+    margin: 0 auto;
+  }
+}
+.wrapper {
+  &_resize-horizontal {
+    &_hug {
+      display: inline-flex;
+    }
+    &_fill {
+      min-height: 100%;
+      flex: 1;
+    }
+    &__inner {
+
+    }
+  }
+}
+.wrapper {
+  &_resize-vertical {
+    &_hug {
+      display: inline-flex;
+    }
+    &_fill {
+      flex: 1;
+      display: flex;
+      ^^&__inner {
+        flex: 1;
+      }
+    }
+  }
+}

package/dist/css/styles/align/align_horizontal-reverse.css

@@ -0,0 +1,50 @@
+.align {
+  &_horizontal-reverse {
+    display: flex;
+    flex-direction: row-reverse;
+    &^&_top {
+      &-left {
+        align-items: flex-start;
+      }
+      &-center {
+        justify-content: center;
+        align-items: flex-start;
+        text-align: center;
+      }
+      &-right {
+        justify-content: flex-end;
+        align-items: flex-start;
+        text-align: right;
+      }
+    }
+    &^&_left {
+      align-items: center;
+    }
+    &^&_center {
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+    &^&_right {
+      justify-content: flex-end;
+      align-items: center;
+      text-align: right;
+    }
+    &^&_bottom {
+      &-left {
+        flex-direction: row;
+        align-items: flex-end;
+      }
+      &-center {
+        justify-content: center;
+        align-items: flex-end;
+        text-align: center;
+      }
+      &-right {
+        justify-content: flex-end;
+        align-items: flex-end;
+        text-align: right;
+      }
+    }
+  }
+}

package/dist/css/styles/align/align_horizontal.css

@@ -0,0 +1,67 @@
+.align {
+  &_horizontal {
+    display: flex;
+    flex-direction: row;
+    &^&_top {
+      align-items: flex-start;
+      &-left {
+        align-items: flex-start;
+      }
+      &-center {
+        justify-content: center;
+        align-items: flex-start;
+        text-align: center;
+      }
+      &-right {
+        justify-content: flex-end;
+        align-items: flex-start;
+        text-align: right;
+      }
+      &-auto {
+        align-items: flex-start;
+        text-align: right;
+        justify-content: space-between;
+      }
+    }
+    &^&_left {
+      align-items: center;
+    }
+    &^&_center {
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      &-auto {
+        align-items: center;
+        text-align: center;
+        justify-content: space-between;
+      }
+    }
+    &^&_right {
+      justify-content: flex-end;
+      align-items: center;
+      text-align: right;
+    }
+    &^&_bottom {
+      align-items: flex-end;
+      &-left {
+        flex-direction: row;
+        align-items: flex-end;
+      }
+      &-center {
+        justify-content: center;
+        align-items: flex-end;
+        text-align: center;
+      }
+      &-right {
+        justify-content: flex-end;
+        align-items: flex-end;
+        text-align: right;
+      }
+      &-auto {
+        align-items: flex-end;
+        text-align: right;
+        justify-content: space-between;
+      }
+    }
+  }
+}

package/dist/css/styles/align/align_vertical-reverse.css

@@ -0,0 +1,49 @@
+.align {
+  &_vertical-reverse {
+    display: flex;
+    flex-direction: column;
+    &^&_top {
+      &-left {
+        align-items: flex-start;
+      }
+      &-center {
+        align-items: center;
+        text-align: center;
+      }
+      &-right {
+        align-items: flex-end;
+        text-align: right;
+      }
+    }
+    &^&_left {
+      justify-content: center;
+      align-items: flex-start;
+    }
+    &^&_center {
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+    &^&_right {
+      justify-content: center;
+      align-items: flex-end;
+      text-align: right;
+    }
+    &^&_bottom {
+      &-left {
+        justify-content: flex-end;
+        align-items: flex-start;
+      }
+      &-center {
+        justify-content: flex-end;
+        align-items: center;
+        text-align: center;
+      }
+      &-right {
+        justify-content: flex-end;
+        align-items: flex-end;
+        text-align: right;
+      }
+    }
+  }
+}

package/dist/css/styles/align/align_vertical.css

@@ -0,0 +1,64 @@
+.align {
+  &_vertical {
+    display: flex;
+    flex-direction: column;
+    &^&_top {
+      &-left {
+        align-items: flex-start;
+      }
+      &-center {
+        align-items: center;
+        text-align: center;
+      }
+      &-right {
+        align-items: flex-end;
+        text-align: right;
+      }
+      &-auto {
+        align-items: center;
+        text-align: center;
+        justify-content: space-between;
+      }
+    }
+    &^&_left {
+      justify-content: center;
+      align-items: flex-start;
+    }
+    &^&_center {
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      &-auto {
+      align-items: center;
+      text-align: center;
+        justify-content: space-between;
+      }
+    }
+    &^&_right {
+      justify-content: center;
+      align-items: flex-end;
+      text-align: right;
+    }
+    &^&_bottom {
+      &-left {
+        justify-content: flex-end;
+        align-items: flex-start;
+      }
+      &-center {
+        justify-content: flex-end;
+        align-items: center;
+        text-align: center;
+      }
+      &-right {
+        justify-content: flex-end;
+        align-items: flex-end;
+        text-align: right;
+      }
+      &-auto {
+        align-items: center;
+        text-align: center;
+        justify-content: space-between;
+      }
+    }
+  }
+}

package/dist/css/styles/border/border.css

@@ -0,0 +1,13 @@
+.border {
+  &_type {
+    &_outline {
+      border-style: solid;
+    }
+    &_solid {
+      border-style: solid;
+    }
+    &_none {
+      border: none;
+    }
+  }
+}

package/dist/css/styles/border-color/border-color.css

@@ -0,0 +1,28 @@
+.border-color {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      &-border {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            border-width: 1px;
+            border-style: solid;
+            border-color: var(--color-$(type)-border-$(color));
+          }
+        }
+      }
+    }
+    &_hover {
+      &_$(type) {
+        &-border {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            &-$(color) {
+              &:hover {
+                border-color: var(--color-$(type)-border-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/caret-color/caret-color.css

@@ -0,0 +1,13 @@
+.caret-color {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            caret-color: var(--color-$(type)-item-$(color));
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/constraints/constraints.css

@@ -0,0 +1,59 @@
+.constraints {
+  &_top-left,
+  &_left-top {
+    left: 0;
+    top: 0;
+  }
+  &_bottom-left,
+  &_left-bottom {
+    left: 0;
+    bottom: 0;
+  }
+  &_bottom-right,
+  &_right-bottom {
+    right: 0;
+    bottom: 0;
+  }
+  &_top-right,
+  &_right-top {
+    right: 0;
+    top: 0;
+  }
+  &_left-right-top {
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+
+  &_left-right-bottom {
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  &_left-right-top-bottom {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+  }
+  &_center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  &_center-top {
+    position: absolute;
+    top: 0%;
+    left: 50%;
+    right: 0;
+    transform: translate(-50%, 0);
+  }
+  &_center-bottom {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    right: 0;
+    transform: translate(-50%, 0);
+  }
+}

package/dist/css/styles/cursor/cursor.css

@@ -0,0 +1,9 @@
+.cursor {
+  &_type {
+    @each $val in auto, default, none, pointer {
+      &_$(val) {
+        cursor:  $(val);
+      }
+    }
+  }
+}

package/dist/css/styles/direction/direction.css

@@ -0,0 +1,10 @@
+.direction {
+  &_vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  &_horizontal {
+    display: flex;
+    flex-direction: row;
+  }
+}

package/dist/css/styles/elevation/elevation.css

@@ -0,0 +1,7 @@
+.elevation {
+  @each $val in 1,2,4,6,8,12,16,24 {
+    &_$(val) {
+      @mixin elevation-$(val);
+    }
+  }
+}

package/dist/css/styles/elevation/elevation_hover.css

@@ -0,0 +1,11 @@
+.elevation {
+  &_hover {
+    @each $val in 1,2,4,6,8,12,16,24 {
+      &_$(val) {
+        &:hover {
+          @mixin elevation-$(val);
+        }
+      }
+    }
+  }
+}