nuxt-glorious 2.0.0-develop-1 → 2.0.0-develop-2

package/dist/scss/paginate.scss

@@ -1,28 +0,0 @@
-@use 'variable.scss' as var;
-
-.glorious-paginate {
-    > div {
-        @apply border border-gray-50 rounded-xl h-8 flex items-center px-1 bg-white shadow-md gap-1 w-max;
-        direction: rtl;
-        > div {
-            @apply px-2;
-            &:last-child {
-                @apply rotate-[180deg];
-            }
-        }
-    }
-
-    @each $color in var.$colors {
-        &.#{'color-' + $color} {
-            .paginate.active {
-                @apply #{"bg-" + ($color) + "-500 "};
-            }
-        }
-    }
-}
-.paginate {
-    @apply text-[13px];
-    &.active {
-        @apply bg-green-500 rounded-lg text-white font-bold text-[13px];
-    }
-}

package/dist/scss/radio.scss

@@ -1,59 +0,0 @@
-@use 'variable.scss' as var;
-
-.glorious-radio {
-  @apply block relative cursor-pointer;
-
-  > input {
-    @apply hidden;
-
-    &:checked ~ div {
-      @apply border-none;
-
-      &:after {
-        content: '';
-        @apply block w-1 h-1 bg-white rounded-full;
-      }
-    }
-
-    &:disabled ~ div {
-      @apply cursor-not-allowed;
-    }
-  }
-  > div:last-child {
-    @apply border border-gray-500 rounded-full bg-white left-0 top-0 absolute hover:shadow-lg;
-    > div:first-child {
-      @apply hidden;
-    }
-
-    &:after {
-      @apply absolute hidden right-0 top-0 left-0 bottom-0 m-auto w-10 h-10 bg-white rounded-full;
-    }
-  }
-
-  @each $color in var.$colors {
-    &.#{'' + $color} {
-      > input {
-        &:checked ~ div {
-          @apply #{'bg-'+$color+'-500'};
-        }
-      }
-    }
-  }
-
-  @each $key, $value in var.$sizes {
-    &.size-#{$key} {
-      @apply w-[#{($value - 14)}px] h-[#{($value - 14)}px];
-      > div:last-child {
-        @apply w-[#{($value - 14)}px] h-[#{($value - 14)}px];
-      }
-
-      > input {
-        &:checked ~ div {
-          &:after {
-            @apply w-[#{($value - 24)}px] h-[#{($value - 24)}px];
-          }
-        }
-      }
-    }
-  }
-}

package/dist/scss/select.scss

@@ -1,44 +0,0 @@
-@use 'variable.scss' as var;
-
-%select-size {
-  &.xl {
-    @apply py-[0.657rem];
-  }
-  &.lg {
-    @apply py-[0.532rem];
-  }
-  &.md {
-    @apply py-[0.407rem];
-  }
-  &.sm {
-    @apply py-[0.282rem];
-  }
-  &.xsm {
-    @apply py-[0.157rem];
-  }
-}
-
-%focus {
-  &:focus-visible {
-    @apply outline-none ring-2;
-  }
-}
-
-@each $color in var.$colors {
-  .#{'color-' + $color} {
-    @apply #{'ring-'+$color+'-500'};
-  }
-}
-
-.glorious-select {
-  @apply rounded-md ring-1 px-3 text-gray-500 text-sm h-max;
-  @extend %select-size, %focus;
-
-  &:disabled {
-    @apply cursor-not-allowed;
-  }
-
-  &.validation-error {
-    @apply ring-red-500 bg-red-50 ;
-  }
-}

package/dist/scss/switch.scss

@@ -1,74 +0,0 @@
-@use 'variable.scss' as var;
-
-.switch {
-  direction: ltr;
-  --button-width: 3em;
-  --button-height: 1.5em;
-  --toggle-diameter: 1em;
-  --button-toggle-offset: calc(
-    (var(--button-height) - var(--toggle-diameter)) / 2
-  );
-  --toggle-shadow-offset: 10px;
-  --toggle-wider: 3em;
-
-  &-slider {
-    @apply bg-gray-300;
-    display: inline-block;
-    width: var(--button-width);
-    height: var(--button-height);
-
-    border-radius: calc(var(--button-height) / 2);
-    position: relative;
-    transition: 0.3s all ease-in-out;
-
-    &::after {
-      content: '';
-      display: inline-block;
-      width: var(--toggle-diameter);
-      height: var(--toggle-diameter);
-      background-color: #fff;
-      border-radius: calc(var(--toggle-diameter) / 2);
-      position: absolute;
-      top: var(--button-toggle-offset);
-      transform: translateX(var(--button-toggle-offset));
-      box-shadow: var(--toggle-shadow-offset) 0
-        calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
-      transition: 0.3s all ease-in-out;
-    }
-  }
-
-  @each $color in var.$colors {
-    &#{'.color-' + $color} {
-      input[type='checkbox']:checked + .switch-slider {
-        background-color: #{theme('colors.' + $color + '.500')};
-      }
-    }
-  }
-
-  input[type='checkbox']:checked + .switch-slider::after {
-    transform: translateX(
-      calc(
-        var(--button-width) - var(--toggle-diameter) -
-          var(--button-toggle-offset)
-      )
-    );
-    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0
-      calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
-  }
-
-  input[type='checkbox'] {
-    display: none;
-  }
-
-  input[type='checkbox']:active + .switch-slider::after {
-    width: var(--toggle-wider);
-  }
-
-  input[type='checkbox']:checked:active + .switch-slider::after {
-    transform: translateX(
-      calc(
-        var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)
-      )
-    );
-  }
-}

package/dist/scss/tab.scss

@@ -1,11 +0,0 @@
-.glorious-tab {
-  @apply flex justify-between bg-green-100 rounded-lg gap-3 w-max max-w-full shadow-md;
-
-  div > div > button {
-    @apply text-gray-700 text-sm hover:bg-green-200 hover:text-gray-800 cursor-pointer px-2 py-1 rounded-lg whitespace-nowrap;
-
-    &.active {
-      @apply font-bold text-white bg-green-700;
-    }
-  }
-}

package/dist/scss/table.scss

@@ -1,41 +0,0 @@
-@use 'variable.scss' as var;
-
-.glorious-table {
-  @apply overflow-x-auto;
-  @each $color in var.$colors {
-    &.#{'color-' + $color} {
-      > table > thead {
-        @apply rounded-t-md overflow-hidden;
-        > tr {
-          > th:first-child {
-            @apply rounded-r-lg #{"bg-" + $color + "-400"};
-          }
-          > th {
-            @apply #{"bg-" + $color + "-400"};
-          }
-          > th:last-child {
-            @apply rounded-l-lg #{"bg-" + $color + "-400"};
-          }
-        }
-      }
-
-      > table > tbody {
-        > tr {
-          &:nth-child(even) {
-            @apply #{"bg-" + $color + "-50"};
-          }
-          > td {
-            @apply px-4 py-2 text-center;
-          }
-        }
-      }
-    }
-  }
-  > table {
-    @apply w-full;
-
-    > thead > tr > th {
-      @apply px-4 py-2 text-center;
-    }
-  }
-}

package/dist/scss/textarea.scss

@@ -1,47 +0,0 @@
-@use 'mixin.scss' as mixin;
-@use 'variable.scss' as var;
-
-%textarea-size {
-  &.xl {
-    @apply py-2.5;
-  }
-  &.lg {
-    @apply py-2;
-  }
-  &.md {
-    @apply py-1.5;
-  }
-  &.sm {
-    @apply py-1;
-  }
-  &.xsm {
-    @apply py-0.5;
-  }
-}
-
-@each $color in var.$colors {
-  .#{'glorious-textarea-' + $color} {
-    @apply #{"ring-" + $color + "-500"};
-    @apply rounded-md ring-1 px-3;
-    &:focus-visible {
-      @apply outline-none ring-2;
-    }
-    &:disabled {
-      @apply bg-green-300 cursor-not-allowed;
-    }
-  }
-}
-
-.glorious-textarea {
-  @apply relative w-full flex flex-col;
-  > textarea {
-    @apply w-full p-2;
-
-    &.validation-error{
-        @apply ring-red-500 bg-red-50
-    }
-  }
-  > textarea::placeholder {
-    @apply text-[14px];
-  }
-}

package/dist/scss/timeline.scss

@@ -1,40 +0,0 @@
-@use 'variable.scss' as var;
-
-.glorious-timeline {
-  &-items {
-    @apply relative;
-
-    div {
-      @apply relative;
-
-      &::before {
-        content: '';
-        @apply absolute w-[2px] right-[-15px];
-        &:not(:last-child) {
-          @apply h-[calc(100%+20px)];
-        }
-      }
-    }
-
-    &-count {
-      @apply absolute w-5 h-5 top-0 right-[-24px] rounded-full ;
-      @apply text-white flex justify-center items-center font-medium;
-    }
-
-    @each $color in var.$colors {
-      &.#{'color-' + $color} > div {
-        &::before {
-          @apply #{"bg-" + $color + "-500"};
-        }
-      }
-    }
-
-    @each $color in var.$colors {
-      &.#{'color-' + $color} {
-        .glorious-timeline-items-count {
-          @apply #{"bg-" + $color + "-500"};
-        }
-      }
-    }
-  }
-}

package/dist/scss/tooltip.scss

@@ -1,14 +0,0 @@
-.glorious-tooltip {
-    @apply relative w-max;
-
-    > .tooltip-slot {
-      &:hover {
-        ~ .tooltip-content {
-          @apply opacity-100;
-        }
-      }
-    }
-    > .tooltip-content {
-      @apply bg-white w-max rounded-lg shadow-md pt-2 px-3 flex absolute bottom-10 opacity-0 transition-all duration-100 ease-in;
-    }
-  }

package/dist/scss/variable.scss

@@ -1,19 +0,0 @@
-$colors: orange, blue, gray, red, green;
-$pSize: (
-  'xl': '2.5',
-  'lg': '2',
-  'md': '1.5',
-  'sm': '1',
-  'xs': '0.5',
-);
-$sizes: (
-  '5xl': 54,
-  '4xl': 50,
-  '3xl': 46,
-  '2xl': 42,
-  'xl': 38,
-  'lg': 32,
-  'md': 28,
-  'sm': 24,
-  'xs': 20,
-);