yuyeon 0.0.23 → 0.0.24

package/lib/components/switch/YSwitch.scss

@@ -1,198 +1,198 @@
-@use '../../styles/palette';
-@use '../../styles/variables';
-
-.y-switch {
-  --y-switch__color: var(--y-theme-primary);
-  font-size: 1rem;
-
-  &__slot {
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    color: inherit;
-    min-height: inherit;
-    position: relative;
-  }
-
-  &__input {
-    width: 3em;
-    height: 1.5em;
-    position: relative;
-    display: inline-flex;
-    user-select: none;
-    color: inherit;
-    flex: 0 0 auto;
-
-    input[role='switch'] {
-      position: absolute;
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      user-select: none;
-    }
-  }
-  &:not(&--loading) &__input:active &__thumb {
-    width: 1em;
-  }
-
-  &__track {
-    width: 100%;
-    height: 100%;
-    border-radius: 2em;
-    background-color: #e0e0e0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    transition: 300ms;
-  }
-
-  &__thumb {
-    width: 1.1em;
-    height: 1.1em;
-    align-self: center;
-    left: 0.185em;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #fff;
-    pointer-events: none;
-    position: relative;
-    transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
-    will-change: left, transform;
-  }
-
-  &__spinner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    animation: rotate 2s linear infinite;
-    contain: paint;
-
-    @keyframes spinner-blur {
-      0% {
-        filter: blur(4px);
-      }
-      50% {
-        filter: blur(1px);
-      }
-      100% {
-        filter: blur(4px);
-      }
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      right: 2px;
-      bottom: 2px;
-      border-radius: 50%;
-      border-width: 2px 2px 0 0;
-      border-style: solid;
-      border-color: var(--y-switch__color) transparent;
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      background: linear-gradient(0deg, transparent 60%, rgba(var(--y-switch__color), 0.4));
-      filter: blur(4px);
-      animation: spinner-blur 3s infinite;
-    }
-  }
-
-  &--active {
-    .y-switch__track {
-      background-color: var(--y-switch__color);
-    }
-
-    .y-switch__thumb {
-      left: calc(100% - 1.1em - 0.24em);
-    }
-  }
-
-  &--active:not(&--loading):active &__thumb {
-    left: 1.8em;
-  }
-
-  &--focused {
-    .y-switch__thumb:before {
-      content: '';
-      position: absolute;
-      top: 2px;
-      bottom: 2px;
-      left: 2px;
-      right: 2px;
-      border-radius: 50%;
-      background-color: rgba(var(--y-switch__color), 0.4);
-    }
-  }
-
-  &--stick-out {
-    .y-switch__thumb {
-      box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, 0.54), 1px 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
-    }
-
-    .y-switch__track {
-      width: 80%;
-      height: 74%;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      box-shadow: inset 0 0 4px -1px rgba(0, 0, 0, 0.34);
-    }
-  }
-
-  &--disabled {
-    opacity: 0.8;
-    filter: brightness(0.88);
-
-    .y-switch__thumb {
-      opacity: 0.4;
-    }
-  }
-  &--disabled &__slot,
-  &--disabled &__input input {
-    cursor: default;
-  }
-
-  &__state {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    contain: content;
-  }
-
-  &__state-label {
-    font-size: 12px;
-    color: #ffffff;
-    position: absolute;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
-
-    &--on {
-      left: -40px;
-    }
-    &--off {
-      right: 10px;
-    }
-  }
-
-  &--active &__state-label {
-    transform: translateX(50px);
-  }
-
-  &--stick-out &__state-label--off {
-    right: 7px;
-  }
-}
+@use '../../styles/palette';
+@use '../../styles/variables';
+
+.y-switch {
+  --y-switch__color: var(--y-theme-primary);
+  font-size: 1rem;
+
+  &__slot {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    color: inherit;
+    min-height: inherit;
+    position: relative;
+  }
+
+  &__input {
+    width: 3em;
+    height: 1.5em;
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    color: inherit;
+    flex: 0 0 auto;
+
+    input[role='switch'] {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+  &:not(&--loading) &__input:active &__thumb {
+    width: 1em;
+  }
+
+  &__track {
+    width: 100%;
+    height: 100%;
+    border-radius: 2em;
+    background-color: #e0e0e0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: 300ms;
+  }
+
+  &__thumb {
+    width: 1.1em;
+    height: 1.1em;
+    align-self: center;
+    left: 0.185em;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    pointer-events: none;
+    position: relative;
+    transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
+    will-change: left, transform;
+  }
+
+  &__spinner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    animation: rotate 2s linear infinite;
+    contain: paint;
+
+    @keyframes spinner-blur {
+      0% {
+        filter: blur(4px);
+      }
+      50% {
+        filter: blur(1px);
+      }
+      100% {
+        filter: blur(4px);
+      }
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      border-width: 2px 2px 0 0;
+      border-style: solid;
+      border-color: var(--y-switch__color) transparent;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(0deg, transparent 60%, rgba(var(--y-switch__color), 0.4));
+      filter: blur(4px);
+      animation: spinner-blur 3s infinite;
+    }
+  }
+
+  &--active {
+    .y-switch__track {
+      background-color: var(--y-switch__color);
+    }
+
+    .y-switch__thumb {
+      left: calc(100% - 1.1em - 0.24em);
+    }
+  }
+
+  &--active:not(&--loading):active &__thumb {
+    left: 1.8em;
+  }
+
+  &--focused {
+    .y-switch__thumb:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      bottom: 2px;
+      left: 2px;
+      right: 2px;
+      border-radius: 50%;
+      background-color: rgba(var(--y-switch__color), 0.4);
+    }
+  }
+
+  &--stick-out {
+    .y-switch__thumb {
+      box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, 0.54), 1px 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
+    }
+
+    .y-switch__track {
+      width: 80%;
+      height: 74%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      box-shadow: inset 0 0 4px -1px rgba(0, 0, 0, 0.34);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.8;
+    filter: brightness(0.88);
+
+    .y-switch__thumb {
+      opacity: 0.4;
+    }
+  }
+  &--disabled &__slot,
+  &--disabled &__input input {
+    cursor: default;
+  }
+
+  &__state {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    contain: content;
+  }
+
+  &__state-label {
+    font-size: 12px;
+    color: #ffffff;
+    position: absolute;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
+
+    &--on {
+      left: -40px;
+    }
+    &--off {
+      right: 10px;
+    }
+  }
+
+  &--active &__state-label {
+    transform: translateX(50px);
+  }
+
+  &--stick-out &__state-label--off {
+    right: 7px;
+  }
+}

package/lib/components/table/YTable.scss

@@ -1,114 +1,114 @@
-$table-cell-padding: 0 16px !default;
-
-.y-table {
-  display: flex;
-  flex-direction: column;
-
-  &--fixed-height > &__container {
-    overflow-y: auto;
-  }
-
-  &--flex-height {
-    //flex-grow: 1;
-    min-height: 0;
-  }
-
-  &--flex-height > &__container {
-    flex: 1 1;
-  }
-
-  &__container > table {
-    width: 100%;
-    border-spacing: 0;
-  }
-
-  &--fixed-head > &__container > table > thead > tr > th {
-    position: sticky;
-    top: 0;
-  }
-
-  &--fixed-head.y-table > &__container > table > thead > tr > th {
-    z-index: 1;
-    background: var(--y-theme-panel, 250, 250, 250);
-  }
-
-  &__container {
-    > table {
-      font-size: 0.875rem;
-
-      > thead,
-      > tbody,
-      > tfoot {
-        > tr {
-          > th, > td {
-            padding: $table-cell-padding;
-          }
-        }
-      }
-
-      > thead > tr {
-        > th {
-          height: 56px;
-          text-align: left;
-          border-bottom: thin solid rgba(var(--y-theme-outline), var(--y-theme-outline-opacity));
-          user-select: none;
-        }
-      }
-
-      > tbody > tr {
-        &:not(:last-child) {
-          > td {
-            border-bottom: thin solid rgba(var(--y-theme-outline), var(--y-theme-outline-opacity));
-          }
-        }
-        > td {
-          height: 54px;
-        }
-      }
-    }
-  }
-}
-
-.y-data-table-cell {
-  &--align-end {
-    text-align: end;
-
-    .y-data-table-header__content {
-      justify-content: flex-end;
-    }
-  }
-
-}
-
-.y-data-table-header {
-  &__content {
-    display: flex;
-    align-items: center;
-  }
-
-  &__sorting-icon {
-    display: inline-flex;
-    width: 1em;
-    height: 1em;
-    margin-left: 4px;
-    cursor: pointer;
-
-    svg {
-      width: 1em;
-      height: 1em;
-    }
-
-    &--disabled {
-      opacity: 0.08;
-      cursor: default;
-    }
-  }
-}
-
-.y-data-table-header--select, .y-data-table-data--select {
-  > .y-icon-checkbox {
-    &:not(&--disabled) {
-      cursor: pointer;
-    }
-  }
-}
+$table-cell-padding: 0 16px !default;
+
+.y-table {
+  display: flex;
+  flex-direction: column;
+
+  &--fixed-height > &__container {
+    overflow-y: auto;
+  }
+
+  &--flex-height {
+    //flex-grow: 1;
+    min-height: 0;
+  }
+
+  &--flex-height > &__container {
+    flex: 1 1;
+  }
+
+  &__container > table {
+    width: 100%;
+    border-spacing: 0;
+  }
+
+  &--fixed-head > &__container > table > thead > tr > th {
+    position: sticky;
+    top: 0;
+  }
+
+  &--fixed-head.y-table > &__container > table > thead > tr > th {
+    z-index: 1;
+    background: var(--y-theme-panel, 250, 250, 250);
+  }
+
+  &__container {
+    > table {
+      font-size: 0.875rem;
+
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th, > td {
+            padding: $table-cell-padding;
+          }
+        }
+      }
+
+      > thead > tr {
+        > th {
+          height: 56px;
+          text-align: left;
+          border-bottom: thin solid rgba(var(--y-theme-outline), var(--y-theme-outline-opacity));
+          user-select: none;
+        }
+      }
+
+      > tbody > tr {
+        &:not(:last-child) {
+          > td {
+            border-bottom: thin solid rgba(var(--y-theme-outline), var(--y-theme-outline-opacity));
+          }
+        }
+        > td {
+          height: 54px;
+        }
+      }
+    }
+  }
+}
+
+.y-data-table-cell {
+  &--align-end {
+    text-align: end;
+
+    .y-data-table-header__content {
+      justify-content: flex-end;
+    }
+  }
+
+}
+
+.y-data-table-header {
+  &__content {
+    display: flex;
+    align-items: center;
+  }
+
+  &__sorting-icon {
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    margin-left: 4px;
+    cursor: pointer;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    &--disabled {
+      opacity: 0.08;
+      cursor: default;
+    }
+  }
+}
+
+.y-data-table-header--select, .y-data-table-data--select {
+  > .y-icon-checkbox {
+    &:not(&--disabled) {
+      cursor: pointer;
+    }
+  }
+}