srcdev-nuxt-forms 6.1.0 → 6.1.2

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

@@ -0,0 +1,13 @@
+.srcdev-forms-extended {
+  .input-description {
+    .input-description-html {
+      margin-block: 0.4rem 0.8rem;
+    }
+    .input-description-text {
+      color: var(--form-description-color);
+      font-size: var(--step-4);
+      margin-block: 0.4rem 0.8rem;
+      line-height: var(--step-4);
+    }
+  }
+}

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

@@ -1,9 +1,10 @@
-@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';
+@import "./_input-error";
+@import "./_input-select";
+@import "./_input-label";
+@import "./_input-description";
+@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/setup/theming/themes/_default.css

@@ -21,6 +21,9 @@
   --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
   --form-label-color: light-dark(var(--gray-12), var(--gray-1));
 
+  /* Description */
+  --form-description-color: light-dark(var(--gray-12), var(--gray-1));
+
   /* Input Elements */
   --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
   --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-5));

package/app/assets/styles/setup/theming/themes/_error.css

@@ -1,4 +1,4 @@
-[data-theme='error'] {
+[data-theme="error"] {
   --colour-theme-0: var(--red-0);
   --colour-theme-1: var(--red-1);
   --colour-theme-2: var(--red-2);
@@ -20,6 +20,9 @@
   --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
   --form-label-color: light-dark(var(--gray-12), var(--gray-1));
 
+  /* Description */
+  --form-description-color: light-dark(var(--gray-12), var(--gray-1));
+
   /* Input Elements */
   --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
   --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));

package/app/assets/styles/setup/theming/themes/_secondary.css

@@ -1,4 +1,4 @@
-[data-theme='secondary'] {
+[data-theme="secondary"] {
   --colour-theme-0: var(--gray-0);
   --colour-theme-1: var(--gray-1);
   --colour-theme-2: var(--gray-2);
@@ -20,6 +20,9 @@
   --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
   --form-label-color: light-dark(var(--gray-12), var(--gray-1));
 
+  /* Description */
+  --form-description-color: light-dark(var(--gray-12), var(--gray-1));
+
   /* Input Elements */
   --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
   --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));

package/app/assets/styles/setup/theming/themes/_success.css

@@ -1,4 +1,4 @@
-[data-theme='success'] {
+[data-theme="success"] {
   --colour-theme-0: var(--green-0);
   --colour-theme-1: var(--green-1);
   --colour-theme-2: var(--green-2);
@@ -20,6 +20,9 @@
   --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
   --form-label-color: light-dark(var(--gray-12), var(--gray-1));
 
+  /* Description */
+  --form-description-color: light-dark(var(--gray-12), var(--gray-1));
+
   /* Input Elements */
   --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
   --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));

package/app/assets/styles/setup/theming/themes/_warning.css

@@ -1,5 +1,5 @@
 :root {
-  [data-theme='warning'] {
+  [data-theme="warning"] {
     --colour-theme-0: var(--orange-0);
     --colour-theme-1: var(--orange-1);
     --colour-theme-2: var(--orange-2);
@@ -21,6 +21,9 @@
     --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
     --form-label-color: light-dark(var(--gray-12), var(--gray-1));
 
+    /* Description */
+    --form-description-color: light-dark(var(--gray-12), var(--gray-1));
+
     /* Input Elements */
     --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
     --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));

package/app/assets/styles/setup/utility-classes/_margin.css

@@ -0,0 +1,334 @@
+/* Margin */
+.mi-auto {
+  margin-inline: auto;
+}
+.mis-auto {
+  margin-inline-start: auto;
+}
+.mie-auto {
+  margin-inline-end: auto;
+}
+.mb-auto {
+  margin-block: auto;
+}
+.mbs-auto {
+  margin-block-start: auto;
+}
+.mbe-auto {
+  margin-block-end: auto;
+}
+
+.mb-0 {
+  margin-block: 0;
+}
+.mi-0 {
+  margin-inline: 0;
+}
+
+.m-0 {
+  margin: 0;
+}
+.mbs-0 {
+  margin-block-start: 0;
+}
+.mbe-0 {
+  margin-block-end: 0;
+}
+.mis-0 {
+  margin-inline-start: 0;
+}
+.mie-0 {
+  margin-inline-end: 0;
+}
+.mi-0 {
+  margin-inline: 0;
+}
+.mb-0 {
+  margin-block: 0;
+}
+
+.m-1 {
+  margin: 0.1rem;
+}
+.mbs-1 {
+  margin-block-start: 0.1rem;
+}
+.mbe-1 {
+  margin-block-end: 0.1rem;
+}
+.mis-1 {
+  margin-inline-start: 0.1rem;
+}
+.mie-1 {
+  margin-inline-end: 0.1rem;
+}
+.mi-1 {
+  margin-inline: 0.1rem;
+}
+.mb-1 {
+  margin-block: 0.1rem;
+}
+
+.m-2 {
+  margin: 0.2rem;
+}
+.mbs-2 {
+  margin-block-start: 0.2rem;
+}
+.mbe-2 {
+  margin-block-end: 0.2rem;
+}
+.mis-2 {
+  margin-inline-start: 0.2rem;
+}
+.mie-2 {
+  margin-inline-end: 0.2rem;
+}
+.mi-2 {
+  margin-inline: 0.2rem;
+}
+.mb-2 {
+  margin-block: 0.2rem;
+}
+
+.m-4 {
+  margin: 0.4rem;
+}
+.mbs-4 {
+  margin-block-start: 0.4rem;
+}
+.mbe-4 {
+  margin-block-end: 0.4rem;
+}
+.mis-4 {
+  margin-inline-start: 0.4rem;
+}
+.mie-4 {
+  margin-inline-end: 0.4rem;
+}
+.mi-4 {
+  margin-inline: 0.4rem;
+}
+.mb-4 {
+  margin-block: 0.4rem;
+}
+
+.m-6 {
+  margin: 0.6rem;
+}
+.mbs-6 {
+  margin-block-start: 0.6rem;
+}
+.mbe-6 {
+  margin-block-end: 0.6rem;
+}
+.mis-6 {
+  margin-inline-start: 0.6rem;
+}
+.mie-6 {
+  margin-inline-end: 0.6rem;
+}
+.mi-6 {
+  margin-inline: 0.6rem;
+}
+.mb-6 {
+  margin-block: 0.6rem;
+}
+
+.m-8 {
+  margin: 0.8rem;
+}
+.mbs-8 {
+  margin-block-start: 0.8rem;
+}
+.mbe-8 {
+  margin-block-end: 0.8rem;
+}
+.mis-8 {
+  margin-inline-start: 0.8rem;
+}
+.mie-8 {
+  margin-inline-end: 0.8rem;
+}
+.mi-8 {
+  margin-inline: 0.8rem;
+}
+.mb-8 {
+  margin-block: 0.8rem;
+}
+
+.m-10 {
+  margin: 1rem;
+}
+.mbs-10 {
+  margin-block-start: 1rem;
+}
+.mbe-10 {
+  margin-block-end: 1rem;
+}
+.mis-10 {
+  margin-inline-start: 1rem;
+}
+.mie-10 {
+  margin-inline-end: 1rem;
+}
+.mi-10 {
+  margin-inline: 1rem;
+}
+.mb-10 {
+  margin-block: 1rem;
+}
+
+.m-12 {
+  margin: 1.2rem;
+}
+.mbs-12 {
+  margin-block-start: 1.2rem;
+}
+.mbe-12 {
+  margin-block-end: 1.2rem;
+}
+.mis-12 {
+  margin-inline-start: 1.2rem;
+}
+.mie-12 {
+  margin-inline-end: 1.2rem;
+}
+.mi-12 {
+  margin-inline: 1.2rem;
+}
+.mb-12 {
+  margin-block: 1.2rem;
+}
+
+.m-18 {
+  margin: 1.8rem;
+}
+.mbs-18 {
+  margin-block-start: 1.8rem;
+}
+.mbe-18 {
+  margin-block-end: 1.8rem;
+}
+.mis-18 {
+  margin-inline-start: 1.8rem;
+}
+.mie-18 {
+  margin-inline-end: 1.8rem;
+}
+.mi-18 {
+  margin-inline: 1.8rem;
+}
+.mb-18 {
+  margin-block: 1.8rem;
+}
+
+.m-20 {
+  margin: 2rem;
+}
+.mbs-20 {
+  margin-block-start: 2rem;
+}
+.mbe-20 {
+  margin-block-end: 2rem;
+}
+.mis-20 {
+  margin-inline-start: 2rem;
+}
+.mie-20 {
+  margin-inline-end: 2rem;
+}
+.mi-20 {
+  margin-inline: 2rem;
+}
+.mb-20 {
+  margin-block: 2rem;
+}
+
+.m-24 {
+  margin: 2.4rem;
+}
+.mbs-24 {
+  margin-block-start: 2.4rem;
+}
+.mbe-24 {
+  margin-block-end: 2.4rem;
+}
+.mis-24 {
+  margin-inline-start: 2.4rem;
+}
+.mie-24 {
+  margin-inline-end: 2.4rem;
+}
+.mi-24 {
+  margin-inline: 2.4rem;
+}
+.mb-24 {
+  margin-block: 2.4rem;
+}
+
+.m-32 {
+  margin: 3.2rem;
+}
+.mbs-32 {
+  margin-block-start: 3.2rem;
+}
+.mbe-32 {
+  margin-block-end: 3.2rem;
+}
+.mis-32 {
+  margin-inline-start: 3.2rem;
+}
+.mie-32 {
+  margin-inline-end: 3.2rem;
+}
+.mi-32 {
+  margin-inline: 3.2rem;
+}
+.mb-32 {
+  margin-block: 3.2rem;
+}
+
+.m-40 {
+  margin: 4rem;
+}
+.mbs-40 {
+  margin-block-start: 4rem;
+}
+.mbe-40 {
+  margin-block-end: 4rem;
+}
+.mis-40 {
+  margin-inline-start: 4rem;
+}
+.mie-40 {
+  margin-inline-end: 4rem;
+}
+.mi-40 {
+  margin-inline: 4rem;
+}
+.mb-40 {
+  margin-block: 4rem;
+}
+
+.m-60 {
+  margin: 6rem;
+}
+.mbs-60 {
+  margin-block-start: 6rem;
+}
+.mbe-60 {
+  margin-block-end: 6rem;
+}
+.mis-60 {
+  margin-inline-start: 6rem;
+}
+.mie-60 {
+  margin-inline-end: 6rem;
+}
+.mi-60 {
+  margin-inline: 6rem;
+}
+.mb-60 {
+  margin-block: 6rem;
+}