srcdev-nuxt-forms 6.1.1 → 6.1.3

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-options-button.css

@@ -1,76 +0,0 @@
-.srcdev-forms-extended {
-  .input-checkbox-radio-options-button {
-    gap: 1rem;
-    border-radius: 1lh;
-
-    /* &.inline {} */
-
-    background-color: var(--theme-input-surface);
-    border: var(--form-element-border-width) solid var(--theme-input-border);
-    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-    box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem transparent;
-    padding-block: var(--input-checkbox-radio-options-padding-block);
-    padding-inline: var(--input-checkbox-radio-options-padding-inline);
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-      border-color: var(--theme-input-border);
-      outline-color: var(--theme-input-outline-hover);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    &:has(.input-checkbox-radio-core:focus-visible) {
-      background-color: var(--theme-input-surface-focus);
-      outline-color: var(--theme-input-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    /* Sizes */
-    &.x-small {
-      padding-block: 0.2rem;
-      padding-inline: 1.6rem;
-      gap: 1rem;
-    }
-    &.small {
-      padding-block: 0.2rem;
-      padding-inline: 1.6rem;
-      gap: 1rem;
-    }
-    &.default {
-      padding-block: 0.4rem;
-      padding-inline: 1.2rem;
-      gap: 1rem;
-    }
-    &.medium {
-      padding-block: 0.4rem;
-      padding-inline: 1.2rem;
-      gap: 1rem;
-    }
-    &.large {
-      padding-block: 0.4rem;
-      padding-inline: 1.2rem;
-      gap: 1rem;
-    }
-
-    .input-checkbox-radio-options-button-label {
-      color: var(--theme-checkbox-label-text-color);
-      font-size: var(--form-element-font-size);
-      min-height: var(--form-element-line-height);
-      padding-block: 0.8rem;
-      padding-inline: 0.8rem;
-
-      &:hover {
-      }
-    }
-
-    .decorator-icon {
-      color: var(--theme-checkbox-symbol-color);
-
-      .icon {
-        height: var(--theme-checkbox-decorator-icon-size);
-        width: var(--theme-checkbox-decorator-icon-size);
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-error.css

@@ -1,54 +0,0 @@
-.srcdev-forms-extended {
-  .input-error-message {
-    color: var(--input-error-color);
-    background-color: var(--theme-error-surface);
-
-    &.show {
-      border: var(--form-element-border-width) solid var(--theme-error-surface);
-      border-bottom-left-radius: var(--form-input-border-radius-underlined);
-      border-bottom-right-radius: var(--form-input-border-radius-underlined);
-
-      &.detached {
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--red-8);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-
-        border-radius: var(--form-input-border-radius);
-      }
-    }
-
-    .inner {
-      .inner-content {
-        .inner-icon {
-          padding-left: 1.2rem;
-
-          .icon {
-            color: white;
-          }
-        }
-
-        .message {
-          font-size: 1.6rem;
-          font-weight: 500;
-          padding-block: 1.2rem 1rem;
-          padding-inline: 1.2rem;
-
-          .message-single {
-            color: white;
-          }
-
-          .message-list {
-            .message-list-item {
-              color: white;
-            }
-
-            .message-list-item + .message-list-item {
-              margin-block-start: 0.6rem;
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-label.css

@@ -1,21 +0,0 @@
-.srcdev-forms-extended {
-  .input-label {
-    &.normal {
-      color: var(--form-label-color);
-      margin-block: 0.8rem;
-      font-size: var(--step-5);
-      font-weight: normal;
-      line-height: 1.5;
-      display: block;
-    }
-
-    &.underlined {
-      color: var(--form-label-color);
-      margin-block: 0.8rem;
-      font-size: var(--step-5);
-      font-weight: normal;
-      line-height: 1.5;
-      display: block;
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-select.css

@@ -1,140 +0,0 @@
-.srcdev-forms-extended {
-  .input-select-wrapper {
-    background-color: var(--theme-input-surface);
-
-    background-color: var(--theme-input-surface);
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-    }
-
-    &:focus-within {
-      background-color: var(--theme-input-surface-hover);
-      outline: var(--theme-focus-visible-outline);
-      box-shadow: var(--theme-focus-visible-shadow);
-    }
-
-    &.normal {
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-      border-top-left-radius: var(--form-input-border-radius);
-      border-top-right-radius: var(--form-input-border-radius);
-      border-bottom-left-radius: var(--form-input-border-radius);
-      border-bottom-right-radius: var(--form-input-border-radius);
-
-      border-top: var(--form-element-border-width) solid var(--theme-input-border);
-      border-right: var(--form-element-border-width) solid var(--theme-input-border);
-      border-bottom: var(--form-element-border-width) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid var(--theme-input-border);
-
-      &:focus-within {
-        outline-color: var(--theme-input-outline-focus);
-        outline-offset: var(--form-element-outline-offset-focus);
-      }
-
-      &.error {
-        border-color: var(--theme-error-surface);
-      }
-    }
-
-    &.underlined {
-      margin-block-start: 0;
-      padding-block: 0;
-
-      outline: var(--form-element-outline-width) solid transparent;
-
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: var(--form-input-border-radius-underlined);
-      border-bottom-right-radius: var(--form-input-border-radius-underlined);
-
-      border-top: var(--form-element-border-width) solid transparent;
-      border-right: var(--form-element-border-width) solid transparent;
-      border-bottom: var(--form-element-border-width-underlined) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid transparent;
-
-      &.error {
-        outline-color: var(--theme-error-surface);
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-      }
-    }
-
-    .input-select-core {
-      appearance: none;
-      background-color: transparent;
-
-      /* For legacy support - eg, Safari */
-      /* &::after {
-      content: '';
-      width: 0.8em;
-      height: 0.5em;
-      background-color: var(--theme-input-border);
-      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-    } */
-
-      /* Start modern Select CSS */
-      &,
-      &::picker(select) {
-        appearance: base-select;
-      }
-
-      &::picker(select) {
-        transition: display allow-discrete var(--theme-form-transition-duration), opacity var(--theme-form-transition-duration), overlay var(--theme-form-transition-duration) allow-discrete;
-      }
-
-      &:not(:open)::picker(select) {
-        opacity: 0;
-      }
-
-      &:open::picker(select) {
-        opacity: 1;
-        border: var(--form-element-border-width) solid var(--theme-input-border);
-        outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
-
-        @starting-style {
-          opacity: 0;
-        }
-      }
-
-      border: none;
-      outline: none;
-      border-radius: 0;
-      width: 100%;
-
-      &:hover {
-        background-color: var(--theme-input-surface-hover);
-      }
-
-      /* END modern Select CSS */
-
-      font-family: var(--font-family);
-      font-size: var(--form-element-font-size);
-      line-height: var(--form-element-line-height);
-      padding-block: 1.5rem;
-      padding-inline: 1rem;
-
-      .input-select-core-option {
-        padding-block: 1rem;
-        padding-inline: 1.75rem;
-        gap: 1.5rem;
-        transition: all var(--theme-form-transition-duration) ease-in-out;
-
-        &:hover {
-          background-color: var(--theme-input-surface-hover);
-        }
-
-        .input-select-core-option-decorator-icon {
-          display: inline-block;
-          width: 1.5rem;
-          height: 1.5rem;
-        }
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-text.css

@@ -1,190 +0,0 @@
-.srcdev-forms-extended {
-  .input-text-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    background-color: var(--theme-input-surface);
-    transition: all var(--theme-form-transition-duration) ease-in-out;
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-    }
-
-    &:focus-within {
-      background-color: var(--theme-input-surface-hover);
-      outline: var(--theme-focus-visible-outline);
-      box-shadow: var(--theme-focus-visible-shadow);
-    }
-
-    &.normal {
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-      border-radius: var(--form-input-border-radius);
-
-      border-top: var(--form-element-border-width) solid var(--theme-input-border);
-      border-right: var(--form-element-border-width) solid var(--theme-input-border);
-      border-bottom: var(--form-element-border-width) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid var(--theme-input-border);
-
-      padding-inline: 1rem;
-
-      &:focus-within {
-        outline-color: var(--theme-input-outline-focus);
-        outline-offset: var(--form-element-outline-offset-focus);
-      }
-
-      &.error {
-        border-color: var(--theme-error-surface);
-        outline-color: var(--theme-error-surface);
-      }
-
-      .slot {
-        display: flex;
-        place-items: center;
-        background-clip: padding-box;
-
-        &.left-slot:not([data-theme='input-action']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-        &.right-slot:not([data-theme='input-action']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-      }
-
-      &[data-inputmode='numeric'] {
-        padding-block: 0rem;
-        padding-inline: 0.75rem;
-
-        .slot {
-          [data-theme='input-action'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-      }
-    }
-
-    &.underlined {
-      margin-block-start: 0;
-      padding-block: 0;
-      padding-inline: 1rem;
-
-      outline: var(--form-element-outline-width) solid transparent;
-
-      border-bottom-left-radius: var(--form-input-border-radius-underlined);
-      border-bottom-right-radius: var(--form-input-border-radius-underlined);
-
-      border-top: none;
-      border-right: none;
-      border-bottom: var(--form-element-border-width-underlined) solid var(--theme-input-border);
-      border-left: none;
-
-      overflow: hidden;
-
-      &.error {
-        outline-color: var(--theme-error-surface);
-        border-bottom-right-radius: var(--form-input-border-radius-underlined);
-        border-bottom-left-radius: var(--form-input-border-radius-underlined);
-
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-      }
-
-      .slot {
-        display: flex;
-        place-items: center;
-        background-clip: padding-box;
-
-        &.left-slot:not([data-theme='input-action-underlined']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action-underlined'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-        &.right-slot:not([data-theme='input-action-underlined']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action-underlined'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-      }
-    }
-
-    .input-text-core {
-      all: unset;
-      flex-grow: 1;
-
-      font-family: var(--font-family);
-      font-size: var(--form-element-font-size);
-      line-height: var(--form-element-line-height);
-      padding-block: var(--input-element-padding-block);
-      padding-inline: 1rem;
-
-      &::placeholder {
-        color: var(--theme-input-placeholder);
-        font-size: var(--theme-input-placeholder-font-size);
-        font-style: italic;
-        line-height: 1;
-        font-weight: normal;
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-textarea.css

@@ -1,96 +0,0 @@
-.srcdev-forms-extended {
-  .input-textarea-wrapper {
-    /* Custom placeholder styles */
-    background-color: var(--theme-input-surface);
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-    }
-
-    &:focus-within {
-      background-color: var(--theme-input-surface-hover);
-      outline: var(--theme-focus-visible-outline);
-      box-shadow: var(--theme-focus-visible-shadow);
-    }
-
-    &.normal {
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-      border-top-left-radius: var(--form-input-border-radius);
-      border-top-right-radius: var(--form-input-border-radius);
-      border-bottom-left-radius: var(--form-input-border-radius);
-      border-bottom-right-radius: var(--form-input-border-radius);
-
-      border-top: var(--form-element-border-width) solid var(--theme-input-border);
-      border-right: var(--form-element-border-width) solid var(--theme-input-border);
-      border-bottom: var(--form-element-border-width) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid var(--theme-input-border);
-
-      padding-inline: 1rem;
-
-      &:focus-within {
-        outline-color: var(--theme-input-outline-focus);
-        outline-offset: var(--form-element-outline-offset-focus);
-      }
-
-      &.error {
-        border-color: var(--theme-error-surface);
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    &:hover {
-      /* Custom placeholder styles */
-    }
-
-    .slot {
-      /* Custom placeholder styles */
-
-      &.left-slot {
-        /* Custom placeholder styles */
-      }
-      &.right-slot {
-        /* Custom placeholder styles */
-      }
-    }
-
-    .input-textarea-core {
-      min-height: 4rem;
-
-      &::placeholder {
-        color: var(--theme-input-placeholder);
-        font-size: var(--theme-input-placeholder-font-size);
-        font-style: italic;
-        line-height: 1;
-        font-weight: normal;
-      }
-    }
-
-    &.underlined {
-      margin-block-start: 0;
-      padding-block: 0;
-      padding-inline: 0.6rem;
-
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: var(--form-input-border-radius);
-      border-bottom-right-radius: var(--form-input-border-radius);
-
-      border-top: var(--form-element-border-width) solid transparent;
-      border-right: var(--form-element-border-width) solid transparent;
-      border-bottom: var(--form-element-border-width-underlined) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid transparent;
-
-      &.error {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/index.css

@@ -1,9 +0,0 @@
-@import './_input-error';
-@import './_input-select';
-@import './_input-label';
-@import './_input-textarea';
-@import './_input-text';
-@import './_input-checkbox-radio-core';
-@import './_input-button';
-@import './_input-checkbox-radio-options-button';
-@import './_form-fieldset';

package/app/assets/styles/extends-layer/srcdev-forms/index.css

@@ -1,2 +0,0 @@
-@import './setup/';
-@import './components/';

package/app/assets/styles/extends-layer/srcdev-forms/setup/_generic.css

@@ -1,21 +0,0 @@
-:root {
-  --theme-form-font-familty: var(--font-family);
-  --theme-error-surface: var(--red-12);
-  --theme-error-text: var(--red-0);
-  --theme-form-button-font-size-normal: var(--form-element-font-size);
-  --theme-form-transition-duration: 0.2s;
-  --theme-input-placeholder-font-size: var(--step-4);
-
-  input:autofill,
-  input:-internal-autofill-selected,
-  input:-webkit-autofill-strong-password,
-  input:-webkit-autofill-strong-password-viewable,
-  input:-webkit-autofill-and-obscured {
-    background-color: var(--theme-button-surface) !important;
-    background-image: none !important;
-    color: var(--_input-text-core-color) !important;
-    -webkit-box-shadow: 0 0 0rem 1000px var(--theme-button-surface) inset;
-    -webkit-text-fill-color: var(--_input-text-core-color);
-    transition: background-color 5000s ease-in-out 0s;
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/setup/index.css

@@ -1,4 +0,0 @@
-/* @import './themes/'; */
-@import './variables';
-@import './variants';
-@import './_generic';