srcdev-nuxt-forms 3.0.0 → 4.0.0

package/assets/styles/utils/_margin-helpers.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;
+}

package/assets/styles/utils/_padding-helpers.css

@@ -0,0 +1,308 @@
+/* Padding */
+.p-0 {
+  padding: 0;
+}
+.pbs-0 {
+  padding-block-start: 0;
+}
+.pbe-0 {
+  padding-block-end: 0;
+}
+.pis-0 {
+  padding-inline-start: 0;
+}
+.pie-0 {
+  padding-inline-end: 0;
+}
+.pi-0 {
+  padding-inline: 0;
+}
+.pb-0 {
+  padding-block: 0;
+}
+
+.p-1 {
+  padding: 0.1rem;
+}
+.pbs-1 {
+  padding-block-start: 0.1rem;
+}
+.pbe-1 {
+  padding-block-end: 0.1rem;
+}
+.pis-1 {
+  padding-inline-start: 0.1rem;
+}
+.pie-1 {
+  padding-inline-end: 0.1rem;
+}
+.pi-1 {
+  padding-inline: 0.1rem;
+}
+.pb-1 {
+  padding-block: 0.1rem;
+}
+
+.p-2 {
+  padding: 0.2rem;
+}
+.pbs-2 {
+  padding-block-start: 0.2rem;
+}
+.pbe-2 {
+  padding-block-end: 0.2rem;
+}
+.pis-2 {
+  padding-inline-start: 0.2rem;
+}
+.pie-2 {
+  padding-inline-end: 0.2rem;
+}
+.pi-2 {
+  padding-inline: 0.2rem;
+}
+.pb-2 {
+  padding-block: 0.2rem;
+}
+
+.p-4 {
+  padding: 0.4rem;
+}
+.pbs-4 {
+  padding-block-start: 0.4rem;
+}
+.pbe-4 {
+  padding-block-end: 0.4rem;
+}
+.pis-4 {
+  padding-inline-start: 0.4rem;
+}
+.pie-4 {
+  padding-inline-end: 0.4rem;
+}
+.pi-4 {
+  padding-inline: 0.4rem;
+}
+.pb-4 {
+  padding-block: 0.4rem;
+}
+
+.p-6 {
+  padding: 0.6rem;
+}
+.pbs-6 {
+  padding-block-start: 0.6rem;
+}
+.pbe-6 {
+  padding-block-end: 0.6rem;
+}
+.pis-6 {
+  padding-inline-start: 0.6rem;
+}
+.pie-6 {
+  padding-inline-end: 0.6rem;
+}
+.pi-6 {
+  padding-inline: 0.6rem;
+}
+.pb-6 {
+  padding-block: 0.6rem;
+}
+
+.p-8 {
+  padding: 0.8rem;
+}
+.pbs-8 {
+  padding-block-start: 0.8rem;
+}
+.pbe-8 {
+  padding-block-end: 0.8rem;
+}
+.pis-8 {
+  padding-inline-start: 0.8rem;
+}
+.pie-8 {
+  padding-inline-end: 0.8rem;
+}
+.pi-8 {
+  padding-inline: 0.8rem;
+}
+.pb-8 {
+  padding-block: 0.8rem;
+}
+
+.p-10 {
+  padding: 1rem;
+}
+.pbs-10 {
+  padding-block-start: 1rem;
+}
+.pbe-10 {
+  padding-block-end: 1rem;
+}
+.pis-10 {
+  padding-inline-start: 1rem;
+}
+.pie-10 {
+  padding-inline-end: 1rem;
+}
+.pi-10 {
+  padding-inline: 1rem;
+}
+.pb-10 {
+  padding-block: 1rem;
+}
+
+.p-12 {
+  padding: 1.2rem;
+}
+.pbs-12 {
+  padding-block-start: 1.2rem;
+}
+.pbe-12 {
+  padding-block-end: 1.2rem;
+}
+.pis-12 {
+  padding-inline-start: 1.2rem;
+}
+.pie-12 {
+  padding-inline-end: 1.2rem;
+}
+.pi-12 {
+  padding-inline: 1.2rem;
+}
+.pb-12 {
+  padding-block: 1.2rem;
+}
+
+.p-18 {
+  padding: 1.8rem;
+}
+.pbs-18 {
+  padding-block-start: 1.8rem;
+}
+.pbe-18 {
+  padding-block-end: 1.8rem;
+}
+.pis-18 {
+  padding-inline-start: 1.8rem;
+}
+.pie-18 {
+  padding-inline-end: 1.8rem;
+}
+.pi-18 {
+  padding-inline: 1.8rem;
+}
+.pb-18 {
+  padding-block: 1.8rem;
+}
+
+.p-20 {
+  padding: 2rem;
+}
+.pbs-20 {
+  padding-block-start: 2rem;
+}
+.pbe-20 {
+  padding-block-end: 2rem;
+}
+.pis-20 {
+  padding-inline-start: 2rem;
+}
+.pie-20 {
+  padding-inline-end: 2rem;
+}
+.pi-20 {
+  padding-inline: 2rem;
+}
+.pb-20 {
+  padding-block: 2rem;
+}
+
+.p-24 {
+  padding: 2.4rem;
+}
+.pbs-24 {
+  padding-block-start: 2.4rem;
+}
+.pbe-24 {
+  padding-block-end: 2.4rem;
+}
+.pis-24 {
+  padding-inline-start: 2.4rem;
+}
+.pie-24 {
+  padding-inline-end: 2.4rem;
+}
+.pi-24 {
+  padding-inline: 2.4rem;
+}
+.pb-24 {
+  padding-block: 2.4rem;
+}
+
+.p-32 {
+  padding: 3.2rem;
+}
+.pbs-32 {
+  padding-block-start: 3.2rem;
+}
+.pbe-32 {
+  padding-block-end: 3.2rem;
+}
+.pis-32 {
+  padding-inline-start: 3.2rem;
+}
+.pie-32 {
+  padding-inline-end: 3.2rem;
+}
+.pi-32 {
+  padding-inline: 3.2rem;
+}
+.pb-32 {
+  padding-block: 3.2rem;
+}
+
+.p-40 {
+  padding: 4rem;
+}
+.pbs-40 {
+  padding-block-start: 4rem;
+}
+.pbe-40 {
+  padding-block-end: 4rem;
+}
+.pis-40 {
+  padding-inline-start: 4rem;
+}
+.pie-40 {
+  padding-inline-end: 4rem;
+}
+.pi-40 {
+  padding-inline: 4rem;
+}
+.pb-40 {
+  padding-block: 4rem;
+}
+
+.p-60 {
+  padding: 6rem;
+}
+.pbs-60 {
+  padding-block-start: 6rem;
+}
+.pbe-60 {
+  padding-block-end: 6rem;
+}
+.pis-60 {
+  padding-inline-start: 6rem;
+}
+.pie-60 {
+  padding-inline-end: 6rem;
+}
+.pi-60 {
+  padding-inline: 6rem;
+}
+.pb-60 {
+  padding-block: 6rem;
+}

package/assets/styles/utils/_page.css

@@ -0,0 +1,49 @@
+html {
+  color-scheme: light dark;
+
+  &[data-color-scheme='light'] {
+    color-scheme: light;
+  }
+
+  &[data-color-scheme='dark'] {
+    color-scheme: dark;
+  }
+
+  background-color: var(--page-bg);
+
+  font-size: 62.5%;
+
+  transition: background-color 0.4s ease, color 0.4s ease;
+  scrollbar-gutter: stable;
+}
+body,
+p,
+pre,
+code,
+div,
+fieldset,
+legend,
+li,
+a {
+  color: var(--grayscale-text-body);
+  font-family: var(--font-family);
+  font-size: var(--step-1);
+}
+
+body {
+  &.page-theme-grey {
+    background-color: lightseagreen;
+  }
+}
+
+form {
+  input {
+    font: inherit;
+    accent-color: var(--accent-color, red);
+  }
+
+  label {
+    text-box-trim: both;
+    text-box-edge: cap alphabetic;
+  }
+}

package/assets/styles/utils/index.css

@@ -0,0 +1,3 @@
+@import './_page.css';
+@import './_margin-helpers.css';
+@import './_padding-helpers.css';

package/assets/styles/variables/colors/_blue.css

@@ -0,0 +1,15 @@
+:root {
+  --blue-0: #e7f5ff;
+  --blue-1: #d0ebff;
+  --blue-2: #a5d8ff;
+  --blue-3: #74c0fc;
+  --blue-4: #4dabf7;
+  --blue-5: #339af0;
+  --blue-6: #228be6;
+  --blue-7: #1c7ed6;
+  --blue-8: #1971c2;
+  --blue-9: #1864ab;
+  --blue-10: #145591;
+  --blue-11: #114678;
+  --blue-12: #0e01cd;
+}

package/assets/styles/variables/colors/_gray.css

@@ -0,0 +1,16 @@
+:root {
+  --gray-00: #ffffff;
+  --gray-0: #f8f9fa;
+  --gray-1: #f1f3f5;
+  --gray-2: #e9ecef;
+  --gray-3: #dee2e6;
+  --gray-4: #ced4da;
+  --gray-5: #adb5bd;
+  --gray-6: #868e96;
+  --gray-7: #495057;
+  --gray-8: #343a40;
+  --gray-9: #212529;
+  --gray-10: #16191d;
+  --gray-11: #0d0f12;
+  --gray-12: #030507;
+}

package/assets/styles/variables/colors/_green.css

@@ -0,0 +1,15 @@
+:root {
+  --green-0: #ebfbee;
+  --green-1: #d3f9d8;
+  --green-2: #b2f2bb;
+  --green-3: #8ce99a;
+  --green-4: #69db7c;
+  --green-5: #51cf66;
+  --green-6: #40c057;
+  --green-7: #37b24d;
+  --green-8: #2f9e44;
+  --green-9: #2b8a3e;
+  --green-10: #237032;
+  --green-11: #1b5727;
+  --green-12: #017f18;
+}