@dolanske/vui 1.0.4 → 1.1.0

package/src/components/Input/input.scss

@@ -1,302 +1,302 @@
-.vui-input-container {
-  // Each component should have its own specification as it allows more granual
-  // modification via CSS variables if needed
-  --input-color-text-red: var(--color-text-red);
-  --input-color-text: var(--color-text);
-  --input-color-text-light: var(--color-text-light);
-  --input-color-text-lighter: var(--color-text-lighter);
-  --input-color-border: var(--color-border);
-  --input-color-border-strong: var(--color-border-strong);
-  --input-color-border-weak: var(--color-border-weak);
-
-  --input-height: var(--interactive-el-height);
-  --input-padding: 8px;
-  --textarea-padding: 8px;
-
-  //
-
-  width: 224px;
-
-  &.disabled {
-    .vui-input label {
-      color: var(--input-color-text-lighter);
-    }
-
-    input,
-    textarea {
-      cursor: not-allowed;
-      resize: none !important;
-    }
-  }
-
-  &.expand {
-    width: 100%;
-  }
-
-  &.required .vui-input > label:after {
-    content: '*';
-    padding-left: 2px;
-    color: var(--input-color-text-red);
-    font-size: var(--font-size-l);
-  }
-
-  &.readonly .vui-input {
-    input,
-    textarea,
-    .vui-input-style {
-      pointer-events: none;
-      color: var(--input-color-text-light);
-      border-color: var(--input-color-border-weak);
-      resize: none !important;
-    }
-  }
-
-  &.has-errors {
-    .vui-input {
-      .vui-input-style,
-      textarea {
-        outline: 1px solid var(--color-text-red) !important;
-      }
-    }
-  }
-
-  &.vui-input-color {
-    .vui-input-style {
-      padding-left: 0 !important;
-      outline: none !important;
-    }
-  }
-
-  .vui-input {
-    label {
-      display: block;
-      text-align: left;
-      margin-bottom: 8px;
-      font-size: var(--font-size-m);
-      color: var(--input-color-text);
-    }
-
-    svg {
-      min-width: 16px;
-      min-height: 16px;
-      // font-size: var(--font-size-l);
-    }
-
-    .vui-input-hint {
-      margin-bottom: 8px;
-      margin-top: -4px;
-      color: var(--input-color-text-lighter);
-      font-size: var(--font-size-s);
-      display: block;
-      text-align: left;
-    }
-
-    ::placeholder {
-      font-weight: 400;
-      color: var(--color-text-lighter);
-      font-family: var(--global-font);
-    }
-
-    .vui-input-style,
-    textarea {
-      display: block;
-      border-radius: var(--border-radius-s);
-      border: 1px solid var(--input-color-border);
-      background: transparent;
-      height: var(--input-height);
-      line-height: var(--input-height);
-      color: var(--color-text-lighter);
-      outline: none;
-      font-size: var(--font-size-m);
-      width: 100%;
-      transition: var(--transition-fast);
-      padding-inline: var(--input-padding);
-      z-index: 1;
-
-      &:has(input:focus),
-      &:focus {
-        // Override error outline
-        outline: 2px solid var(--color-text) !important;
-      }
-
-      .vui-button {
-        border: 1px solid var(--color-border);
-
-        &:first-child {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-          margin-left: calc(calc(var(--input-padding) + 1px) * -1);
-        }
-
-        &:last-child {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-          margin-right: calc(calc(var(--input-padding) + 1px) * -1);
-        }
-      }
-    }
-
-    input,
-    textarea {
-      color: var(--color-text);
-      font-family: var(--global-font);
-      // padding-inline: 3px;
-    }
-
-    input[type='file']::file-selector-button {
-      background-color: var(--color-bg);
-      color: var(--color-text);
-      border: none;
-    }
-
-    input[type='range'] {
-      -webkit-appearance: none; /* Override default CSS styles */
-      appearance: none;
-      height: 4px;
-      border-radius: 2px;
-      background-color: var(--color-border);
-    }
-
-    input[type='color'] {
-      width: 1px;
-      height: 1px;
-      position: absolute;
-      overflow: hidden;
-      outline: none !important;
-      opacity: 0;
-
-      &:focus + label .vui-input-color-indicator {
-        outline: 2px solid var(--color-text);
-      }
-
-      & + label {
-        position: relative;
-        margin: 0;
-        padding-left: var(--input-height);
-
-        input {
-          padding-inline: var(--space-xs);
-          border-radius: var(--border-radius-s);
-
-          &:focus {
-            outline: 2px solid var(--color-text);
-          }
-        }
-
-        .vui-input-color-indicator {
-          position: absolute;
-          inset: 4px;
-          right: unset;
-          width: calc(var(--input-height) - 8px);
-          background-color: var(--color-border);
-          border-radius: var(--border-radius-s);
-          font-size: var(--font-size-l);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          &:hover {
-            opacity: 0.8;
-          }
-        }
-      }
-    }
-
-    ::-moz-range-thumb,
-    ::-webkit-slider-thumb {
-      width: 16px;
-      height: 16px;
-      background-color: var(--color-text-light);
-      border: none;
-    }
-
-    input {
-      display: block;
-      width: 100%;
-      border: none;
-      height: calc(var(--input-height) - 1px);
-      line-height: calc(var(--input-height) - 1px);
-      background: transparent;
-      outline: none;
-      font-size: var(--font-size-m);
-      color: var(--color-text);
-
-      &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px var(--color-bg) inset;
-        -webkit-text-fill-color: var(--color-text);
-      }
-    }
-
-    textarea {
-      line-height: 1.3em;
-      height: auto;
-      min-height: 5lh;
-      field-sizing: content;
-      padding: var(--textarea-padding);
-      transition: none;
-    }
-  }
-
-  .vui-input-limit {
-    display: block;
-    margin-top: 6px;
-    text-align: left;
-    font-size: var(--font-size-xs);
-    color: var(--input-color-text-lighter);
-  }
-
-  .vui-input-errors {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding-top: 6px;
-
-    li {
-      display: block;
-      font-size: var(--font-size-s);
-      color: var(--color-text-red);
-    }
-  }
-
-  &.vui-dropzone {
-    &.dragging .vui-input .vui-input-style {
-      border-color: var(--color-accent);
-
-      &:hover {
-        border-color: var(--color-border);
-      }
-    }
-
-    .vui-input {
-      .vui-input-style {
-        height: unset;
-        border-width: 2px;
-        border-style: dashed;
-        border-radius: var(--border-radius-m);
-        line-height: 1.2em;
-
-        &:hover {
-          border-color: var(--color-accent);
-        }
-
-        input {
-          width: 1px;
-          height: 1px;
-          position: absolute;
-          outline: 0 !important;
-          opacity: 0 !important;
-
-          & + label {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            min-height: 96px;
-            margin: 0;
-            color: var(--color-text-light);
-          }
-        }
-      }
-    }
-  }
-}
+.vui-input-container {
+  // Each component should have its own specification as it allows more granual
+  // modification via CSS variables if needed
+  --input-color-text-red: var(--color-text-red);
+  --input-color-text: var(--color-text);
+  --input-color-text-light: var(--color-text-light);
+  --input-color-text-lighter: var(--color-text-lighter);
+  --input-color-border: var(--color-border);
+  --input-color-border-strong: var(--color-border-strong);
+  --input-color-border-weak: var(--color-border-weak);
+
+  --input-height: var(--interactive-el-height);
+  --input-padding: 8px;
+  --textarea-padding: 8px;
+
+  //
+
+  width: 224px;
+
+  &.disabled {
+    .vui-input label {
+      color: var(--input-color-text-lighter);
+    }
+
+    input,
+    textarea {
+      cursor: not-allowed;
+      resize: none !important;
+    }
+  }
+
+  &.expand {
+    width: 100%;
+  }
+
+  &.required .vui-input > label:after {
+    content: '*';
+    padding-left: 2px;
+    color: var(--input-color-text-red);
+    font-size: var(--font-size-l);
+  }
+
+  &.readonly .vui-input {
+    input,
+    textarea,
+    .vui-input-style {
+      pointer-events: none;
+      color: var(--input-color-text-light);
+      border-color: var(--input-color-border-weak);
+      resize: none !important;
+    }
+  }
+
+  &.has-errors {
+    .vui-input {
+      .vui-input-style,
+      textarea {
+        outline: 1px solid var(--color-text-red) !important;
+      }
+    }
+  }
+
+  &.vui-input-color {
+    .vui-input-style {
+      padding-left: 0 !important;
+      outline: none !important;
+    }
+  }
+
+  .vui-input {
+    label {
+      display: block;
+      text-align: left;
+      margin-bottom: 8px;
+      font-size: var(--font-size-m);
+      color: var(--input-color-text);
+    }
+
+    svg {
+      min-width: 16px;
+      min-height: 16px;
+      // font-size: var(--font-size-l);
+    }
+
+    .vui-input-hint {
+      margin-bottom: 8px;
+      margin-top: -4px;
+      color: var(--input-color-text-lighter);
+      font-size: var(--font-size-s);
+      display: block;
+      text-align: left;
+    }
+
+    ::placeholder {
+      font-weight: 400;
+      color: var(--color-text-lighter);
+      font-family: var(--global-font);
+    }
+
+    .vui-input-style,
+    textarea {
+      display: block;
+      border-radius: var(--border-radius-s);
+      border: 1px solid var(--input-color-border);
+      background: transparent;
+      height: var(--input-height);
+      line-height: var(--input-height);
+      color: var(--color-text-lighter);
+      outline: none;
+      font-size: var(--font-size-m);
+      width: 100%;
+      transition: var(--transition-fast);
+      padding-inline: var(--input-padding);
+      z-index: 1;
+
+      &:has(input:focus),
+      &:focus {
+        // Override error outline
+        outline: 2px solid var(--color-text) !important;
+      }
+
+      .vui-button {
+        border: 1px solid var(--color-border);
+
+        &:first-child {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+          margin-left: calc(calc(var(--input-padding) + 1px) * -1);
+        }
+
+        &:last-child {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+          margin-right: calc(calc(var(--input-padding) + 1px) * -1);
+        }
+      }
+    }
+
+    input,
+    textarea {
+      color: var(--color-text);
+      font-family: var(--global-font);
+      // padding-inline: 3px;
+    }
+
+    input[type='file']::file-selector-button {
+      background-color: var(--color-bg);
+      color: var(--color-text);
+      border: none;
+    }
+
+    input[type='range'] {
+      -webkit-appearance: none; /* Override default CSS styles */
+      appearance: none;
+      height: 4px;
+      border-radius: 2px;
+      background-color: var(--color-border);
+    }
+
+    input[type='color'] {
+      width: 1px;
+      height: 1px;
+      position: absolute;
+      overflow: hidden;
+      outline: none !important;
+      opacity: 0;
+
+      &:focus + label .vui-input-color-indicator {
+        outline: 2px solid var(--color-text);
+      }
+
+      & + label {
+        position: relative;
+        margin: 0;
+        padding-left: var(--input-height);
+
+        input {
+          padding-inline: var(--space-xs);
+          border-radius: var(--border-radius-s);
+
+          &:focus {
+            outline: 2px solid var(--color-text);
+          }
+        }
+
+        .vui-input-color-indicator {
+          position: absolute;
+          inset: 4px;
+          right: unset;
+          width: calc(var(--input-height) - 8px);
+          background-color: var(--color-border);
+          border-radius: var(--border-radius-s);
+          font-size: var(--font-size-l);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &:hover {
+            opacity: 0.8;
+          }
+        }
+      }
+    }
+
+    ::-moz-range-thumb,
+    ::-webkit-slider-thumb {
+      width: 16px;
+      height: 16px;
+      background-color: var(--color-text-light);
+      border: none;
+    }
+
+    input {
+      display: block;
+      width: 100%;
+      border: none;
+      height: calc(var(--input-height) - 1px);
+      line-height: calc(var(--input-height) - 1px);
+      background: transparent;
+      outline: none;
+      font-size: var(--font-size-m);
+      color: var(--color-text);
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px var(--color-bg) inset;
+        -webkit-text-fill-color: var(--color-text);
+      }
+    }
+
+    textarea {
+      line-height: 1.3em;
+      height: auto;
+      min-height: 5lh;
+      field-sizing: content;
+      padding: var(--textarea-padding);
+      transition: none;
+    }
+  }
+
+  .vui-input-limit {
+    display: block;
+    margin-top: 6px;
+    text-align: left;
+    font-size: var(--font-size-xs);
+    color: var(--input-color-text-lighter);
+  }
+
+  .vui-input-errors {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-top: 6px;
+
+    li {
+      display: block;
+      font-size: var(--font-size-s);
+      color: var(--color-text-red);
+    }
+  }
+
+  &.vui-dropzone {
+    &.dragging .vui-input .vui-input-style {
+      border-color: var(--color-accent);
+
+      &:hover {
+        border-color: var(--color-border);
+      }
+    }
+
+    .vui-input {
+      .vui-input-style {
+        height: unset;
+        border-width: 2px;
+        border-style: dashed;
+        border-radius: var(--border-radius-m);
+        line-height: 1.2em;
+
+        &:hover {
+          border-color: var(--color-accent);
+        }
+
+        input {
+          width: 1px;
+          height: 1px;
+          position: absolute;
+          outline: 0 !important;
+          opacity: 0 !important;
+
+          & + label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 96px;
+            margin: 0;
+            color: var(--color-text-light);
+          }
+        }
+      }
+    }
+  }
+}