@itcase/ui 1.0.1

package/dist/css/components/Select/Select.css

@@ -0,0 +1,236 @@
+.select {
+  position: relative;
+  min-width: 240px;
+}
+
+@keyframes selectMenuAnimationOpen {
+  0% {
+    opacity: 0%;
+    visibility: hidden;
+    transform: translate3d(0, 8px, 0);
+  }
+  100% {
+    opacity: 100%;
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes selectMenuAnimationClose {
+  0% {
+    opacity: 100%;
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    opacity: 0%;
+    visibility: hidden;
+    transform: translate3d(0, 8px, 0);
+  }
+}
+
+.select {
+  &__control {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    cursor: default;
+    outline: 0 !important;
+  }
+}
+
+.select {
+  &__control {
+    &_fill {
+      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+        &_$(type) {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            &-$(color) {
+              background: var(--color-$(type)-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.select {
+  &__control {
+    &_shape {
+      &_rounded {
+        border-radius: 6px;
+      }
+      &_circular {
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+.select {
+  &__control {
+    ^&__indicators {
+      display: flex;
+      align-items: center;
+      align-self: center;
+      cursor: pointer;
+      @media (--mobile) {
+        align-items: flex-start;
+      }
+      ^^&__clear-indicator {
+        color: var(--color-surface-text-primary);
+      }
+      ^^&__dropdown-indicator {
+      }
+    }
+  }
+}
+
+.select {
+  &__input-container {
+    @each $sizeText in xs, s, m, l, xl, xxl {
+      &.text_size_$(sizeText) {
+        & input {
+          @mixin text-$(sizeText);
+        }
+      }
+    }
+    @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      &.text-color_$(type) {
+        &-text {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            &-$(color) {
+              & input {;
+                color: var(--color-$(type)-text-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.select {
+  &__menu {
+    &-notice {
+      padding: 10px 48px 10px 20px;
+    }
+  }
+}
+
+.select {
+  &__menu {
+    width: 100%;
+    margin: 0;
+    border-top: none;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    z-index: 100000;
+    &-list {
+      overflow-y: scroll;
+      max-height: 240px;
+      &-item {
+        width: 100%;
+      }
+      &--is-multi {
+        ^^^&__option {
+          &--is-selected {
+          }
+          &--is-focused {
+            background: none !important;
+            /* display: flex;
+            justify-content: center; */
+            &:hover {
+              background: #eee;
+              cursor: pointer;
+            }
+          }
+          &--is-disabled {
+            border: solid 1px red;
+          }
+        }
+      }
+    }
+  }
+}
+
+.select {
+  &__option {
+    display: flex;
+    cursor: pointer;
+    /* &-label {
+      width: 100%;
+      position: relative;
+      display: block;
+      z-index: 100;
+      cursor: pointer;
+    }
+    &-checkbox {
+      opacity: 0%;
+      &:checked {
+        & + .form-select {
+          &__option-state {
+            &::before {
+              width: 8px;
+              height: 8px;
+              border-radius: 50%;
+              position: absolute;
+              content: '';
+              display: block;
+              left: 2px;
+              top: 2px;
+              z-index: 2;
+            }
+          }
+        }
+      }
+    }
+    &-state {
+      width: 14px;
+      height: 14px;
+      background: none;
+      border-radius: 2px;
+      position: absolute;
+      content: '';
+      display: block;
+      left: 0;
+      top: 2px;
+      z-index: 1;
+    }
+    &-text {
+      padding: 0 0 0 8px;
+    } */
+    &--is-selected {
+      /* color: var(--color-surface-text-primary);
+      background: var(--color-surface-primary-hover); */
+    }
+    &--is-focused {
+      /* color: var(--color-surface-text-primary);
+      background: var(--color-surface-primary-hover); */
+    }
+  }
+}
+
+.select {
+  &__single-value {
+    display: flex;
+  }
+}
+
+.select {
+  &__value-container {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    &--is-multi {
+    }
+  }
+}

package/dist/css/components/Select/css/__control/select__control.css

@@ -0,0 +1,11 @@
+.select {
+  &__control {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    cursor: default;
+    outline: 0 !important;
+  }
+}

package/dist/css/components/Select/css/__control/select__control_fill.css

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

package/dist/css/components/Select/css/__control/select__control_shape.css

@@ -0,0 +1,12 @@
+.select {
+  &__control {
+    &_shape {
+      &_rounded {
+        border-radius: 6px;
+      }
+      &_circular {
+        border-radius: 50%;
+      }
+    }
+  }
+}

package/dist/css/components/Select/css/__indicators/select__indicators.css

@@ -0,0 +1,18 @@
+.select {
+  &__control {
+    ^&__indicators {
+      display: flex;
+      align-items: center;
+      align-self: center;
+      cursor: pointer;
+      @media (--mobile) {
+        align-items: flex-start;
+      }
+      ^^&__clear-indicator {
+        color: var(--color-surface-text-primary);
+      }
+      ^^&__dropdown-indicator {
+      }
+    }
+  }
+}

package/dist/css/components/Select/css/__input-container/select__input-container.css

@@ -0,0 +1,24 @@
+.select {
+  &__input-container {
+    @each $sizeText in xs, s, m, l, xl, xxl {
+      &.text_size_$(sizeText) {
+        & input {
+          @mixin text-$(sizeText);
+        }
+      }
+    }
+    @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      &.text-color_$(type) {
+        &-text {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            &-$(color) {
+              & input {;
+                color: var(--color-$(type)-text-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Select/css/__menu/select__menu-notice.css

@@ -0,0 +1,7 @@
+.select {
+  &__menu {
+    &-notice {
+      padding: 10px 48px 10px 20px;
+    }
+  }
+}

package/dist/css/components/Select/css/__menu/select__menu.css

@@ -0,0 +1,36 @@
+.select {
+  &__menu {
+    width: 100%;
+    margin: 0;
+    border-top: none;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    z-index: 100000;
+    &-list {
+      overflow-y: scroll;
+      max-height: 240px;
+      &-item {
+        width: 100%;
+      }
+      &--is-multi {
+        ^^^&__option {
+          &--is-selected {
+          }
+          &--is-focused {
+            background: none !important;
+            /* display: flex;
+            justify-content: center; */
+            &:hover {
+              background: #eee;
+              cursor: pointer;
+            }
+          }
+          &--is-disabled {
+            border: solid 1px red;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Select/css/__option/select__option.css

@@ -0,0 +1,56 @@
+.select {
+  &__option {
+    display: flex;
+    cursor: pointer;
+    /* &-label {
+      width: 100%;
+      position: relative;
+      display: block;
+      z-index: 100;
+      cursor: pointer;
+    }
+    &-checkbox {
+      opacity: 0%;
+      &:checked {
+        & + .form-select {
+          &__option-state {
+            &::before {
+              width: 8px;
+              height: 8px;
+              border-radius: 50%;
+              position: absolute;
+              content: '';
+              display: block;
+              left: 2px;
+              top: 2px;
+              z-index: 2;
+            }
+          }
+        }
+      }
+    }
+    &-state {
+      width: 14px;
+      height: 14px;
+      background: none;
+      border-radius: 2px;
+      position: absolute;
+      content: '';
+      display: block;
+      left: 0;
+      top: 2px;
+      z-index: 1;
+    }
+    &-text {
+      padding: 0 0 0 8px;
+    } */
+    &--is-selected {
+      /* color: var(--color-surface-text-primary);
+      background: var(--color-surface-primary-hover); */
+    }
+    &--is-focused {
+      /* color: var(--color-surface-text-primary);
+      background: var(--color-surface-primary-hover); */
+    }
+  }
+}

package/dist/css/components/Select/css/__single-value/select__single-value.css

@@ -0,0 +1,5 @@
+.select {
+  &__single-value {
+    display: flex;
+  }
+}

package/dist/css/components/Select/css/__value-container/select__value-container.css

@@ -0,0 +1,12 @@
+.select {
+  &__value-container {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    &--is-multi {
+    }
+  }
+}

package/dist/css/components/SiteMenu/SiteMenu.css

@@ -0,0 +1,37 @@
+.site-menu {
+  width: 100%;
+  height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+  position: fixed;
+  display: flex;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  &__wrapper {
+    min-width: 100%;
+    z-index: 10;
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    align-content: center;
+    ^&__close {
+      position: absolute;
+      top: 24px;
+      right: 24px;
+    }
+    ^&__items {
+      padding: 0 24px 48px 24px;
+      width: 100%;
+      height: 100%;
+      overflow: scroll;
+    }
+  }
+  &&_state_visible {
+    transform: translate(0%, 0);
+  }
+  &&_state_hidden {
+    transform: translate(100%, 0);
+  }
+}