@necrolab/dashboard 0.4.61 → 0.4.208

package/src/assets/css/_input.scss

@@ -1,188 +1,143 @@
-/* ==========================================================================
-   INPUT COMPONENTS STYLING
-   ========================================================================== */
-
 .input-default {
-    @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-3 py-2 border-dark-550 border-2 h-10;
-    transition: border-color 0.15s ease;
-
-    &:focus-within {
-        @apply border-dark-700;
-    }
+    @apply h-12 bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border;
+    $border: 2px;
+    @apply border-dark-550 border-2;
+    // border: solid $border transparent;
 
     input {
-        @apply h-full w-full focus:outline-none text-sm text-white;
-        background: transparent;
+        @apply h-full w-full px-4 focus:outline-none text-xs text-white;
+        background-color: transparent;
     }
 
-    .input-incrementer {
-        @apply flex flex-col ml-2 gap-0.5;
-
-        button {
-            @apply w-6 h-4 flex items-center justify-center text-white transition-all duration-200 rounded-sm border border-dark-650;
-            background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
-            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-
-            &:hover {
-                @apply border-dark-700;
-                background: linear-gradient(135deg, #2e2f34 0%, #32333a 100%);
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-                transform: translateY(-0.5px);
-            }
-
-            &:active {
-                @apply border-dark-600;
-                background: linear-gradient(135deg, #26272c 0%, #2a2b30 100%);
-                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-                transform: translateY(0);
-            }
-
-            &:first-child {
-                border-radius: 4px 4px 2px 2px;
-            }
-
-            &:last-child {
-                border-radius: 2px 2px 4px 4px;
-            }
-        }
-
-        svg {
-            @apply w-2.5 h-2.5;
-            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
-        }
-    }
+    // &:before {
+    //     content: "";
+    //     @apply absolute top-0 left-0 right-0 bottom-0 opacity-60;
+    //     z-index: -2;
+    //     margin: -$border;
+    //     border-radius: inherit;
+    //     background: radial-gradient(rgba(96, 66, 255, 0.6), rgba(255, 255, 255, 0));
+    // }
 }
-
-.input-wrapper label {
-    @apply text-white font-medium mb-2 block;
-    font-size: 16px;
+.input-wrapper {
+    @apply z-20;
+    label {
+        @apply text-xs text-light-300 block;
+    }
 }
 
 .button-default {
-    @apply text-white font-medium h-12 rounded-lg duration-150 border border-dark-650 hover:border-dark-700 !important;
+    @apply text-white font-medium h-12 rounded-lg duration-150 #{!important};
 }
 
-/* Remove number input spinners */
 input[type="number"] {
+    -webkit-appearance: textfield;
     -moz-appearance: textfield;
+    appearance: textfield;
 }
-
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
-    margin: 0;
+}
+.input-incrementer {
+    @apply text-white pr-2 #{!important};
+    font-size: 8px;
 }
 
-/* ==========================================================================
-   ANT DESIGN SELECT STYLING
-   ========================================================================== */
-
+@media (max-width: 810px) {
+    .input-default {
+        height: 40px !important;
+        input {
+            font-size: 12px !important;
+        }
+    }
+    .input-wrapper {
+        label {
+            font-size: 15px;
+        }
+    }
+    .ant-select {
+        height: fit-content;
+        min-height: 40px !important;
+        padding: 0 !important;
+    }
+    .ant-select-show-search.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+        font-size: 12px;
+    }
+    .ant-select-multiple .ant-select-selection-item {
+        height: 25px !important;
+    }
+}
 .ant-select-dropdown {
-    z-index: 10000 !important;
+    z-index: 20000000000 !important;
     position: relative;
-    @apply rounded-lg bg-dark-400 !important;
+    @apply rounded-lg #{!important};
 }
 
 .ant-select {
-    @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-1 py-1 border-dark-550 border-2 h-10 !important;
+    @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-1 py-1 #{!important};
+    min-height: 3.45em;
     height: fit-content;
+    $border: 2px;
+    border: solid $border transparent;
 
     .ant-select-selector {
-        @apply h-full w-full focus:outline-none text-xs text-white !important;
+        @apply h-full w-full focus:outline-none text-xs text-white #{!important};
         background: transparent;
         background-color: transparent !important;
         border: 0 !important;
         box-shadow: 0 0 0 !important;
-
-        &:before {
-            content: "";
-            position: absolute;
-            @apply bg-light-400 h-1 w-1 right-1 rounded-full !important;
-        }
     }
+
+    @apply border-dark-550 border-2;
+
+    // &:before {
+    //     content: "";
+    //     @apply absolute top-0 left-0 right-0 bottom-0 opacity-60 #{!important};
+    //     z-index: -2;
+    //     margin: -$border;
+    //     border-radius: inherit;
+    //     background: radial-gradient(rgba(96, 66, 255, 0.6), rgba(255, 255, 255, 0)) !important;
+    // }
 }
 
 .ant-select-multiple .ant-select-selection-item {
-    @apply bg-dark-400 items-center gap-x-4 !important;
+    @apply bg-dark-400 items-center gap-x-4 #{!important};
     padding-inline-end: 15px;
     padding-inline-start: 15px;
     border-radius: 10px;
     height: 40px;
-    border: 0;
-    color: #ffffff;
-
-    &-remove > .anticon {
-        vertical-align: 0.05rem;
-    }
+    border: 0 !important;
 }
-
-.ant-select-selection-item-remove > .anticon svg {
-    color: #fff;
-
-    path {
-        fill: currentColor;
-    }
-}
-
-.ant-select-item-option {
-    &-selected:not(.ant-select-item-option-disabled) {
-        @apply bg-dark-500 text-white !important;
-
-        .ant-select-item-option-state {
-            @apply text-white !important;
-
-            svg {
-                margin-top: -1.5px;
-            }
+.ant-select-multiple .ant-select-selection-item-remove > .anticon {
+    vertical-align: 0.05rem !important;
+    svg {
+        path {
+            fill: #fff !important;
         }
     }
-
-    &-active:not(.ant-select-item-option-disabled) {
-        background-color: transparent;
-    }
-
-    &-content {
-        @apply text-white !important;
-    }
 }
-
-/* ==========================================================================
-   RESPONSIVE ADJUSTMENTS
-   ========================================================================== */
-
-@screen md {
-    .input-default {
-        height: 40px;
-
-        input {
-            font-size: 12px;
-        }
-
-        .input-incrementer button {
-            @apply w-5 h-3;
-
-            svg {
-                @apply w-2 h-2;
-            }
-        }
-    }
-
-    .input-wrapper label {
-        font-size: 15px;
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    @apply bg-dark-500 text-white #{!important};
+}
+.ant-select-dropdown {
+    @apply bg-dark-400 #{!important};
+}
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
+    @apply text-white #{!important};
+    svg {
+        margin-top: -1.5px;
     }
-
-    .ant-select {
-        height: fit-content;
-        min-height: 40px;
-        padding: 0;
-
-        &-show-search:not(.ant-select-customize-input) .ant-select-selector {
-            font-size: 12px;
-        }
-
-        &-multiple .ant-select-selection-item {
-            height: 25px;
-            font-size: 10px;
-        }
+}
+.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+    background-color: transparent;
+}
+.ant-select-item-option-content {
+    @apply text-white #{!important};
+}
+.ant-select-selector {
+    &:before {
+        content: "";
+        position: absolute;
+        @apply bg-light-400 h-1 w-1 right-1 rounded-full #{!important};
     }
 }