srcdev-nuxt-components 0.0.29 → 0.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/assets/styles/forms/themes/_error.css +4 -4
  2. package/assets/styles/forms/themes/_ghost.css +4 -4
  3. package/assets/styles/forms/themes/_primary.css +4 -4
  4. package/assets/styles/forms/themes/_secondary.css +4 -4
  5. package/assets/styles/forms/themes/_success.css +4 -4
  6. package/assets/styles/forms/themes/_tertiary.css +4 -4
  7. package/assets/styles/forms/themes/_warning.css +4 -4
  8. package/assets/styles/forms/variables/_theme.css +40 -40
  9. package/assets/styles/utils/_margin-helpers.css +91 -91
  10. package/assets/styles/utils/_padding-helpers.css +91 -91
  11. package/components/functional/accordian/AccordianCore.vue +1 -1
  12. package/components/functional/display-dialog/DisplayDialogCore.vue +4 -4
  13. package/components/functional/display-dialog/variants/DisplayDialogConfirm.vue +1 -1
  14. package/components/presentation/masonry-grid/MasonryGrid.vue +3 -3
  15. package/components/presentation/tabs/TabsCore.vue +123 -101
  16. package/package.json +2 -1
package/assets/styles/forms/themes/_error.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --theme-form-input-outline-focus: var(--red-6);
10
10
  --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
11
11
 
12
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--red-12), var(--red-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--red-12), var(--red-2));
13
13
 
14
14
  --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
15
15
  --theme-form-checkbox-border: light-dark(var(--red-12), var(--red-12));
@@ -34,10 +34,10 @@
34
34
  --theme-checkbox-radio-button-bg-default: light-dark(var(--red-1), var(--red-1));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--red-12), var(--red-12));
37
- --theme-checkbox-radio-button-border-width: 1px;
37
+ --theme-checkbox-radio-button-border-width: 0.1rem;
38
38
 
39
39
  --theme-checkbox-radio-button-outline-default: light-dark(var(--red-5), var(--red-5));
40
- --theme-checkbox-radio-button-outline-width: 1px;
40
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
41
41
 
42
42
  --theme-checkbox-radio-button-label-default: light-dark(var(--red-12), var(--red-12));
43
43
  }
@@ -58,6 +58,6 @@
58
58
  --theme-btn-outline-focus: var(--red-0);
59
59
  --theme-btn-text-focus: var(--red-12);
60
60
 
61
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--red-12), var(--red-2));
61
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--red-12), var(--red-2));
62
62
  }
63
63
  }
package/assets/styles/forms/themes/_ghost.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --theme-form-input-outline-focus: var(--gray-6);
10
10
  --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
11
11
 
12
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
13
13
 
14
14
  --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
15
15
  --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
@@ -34,10 +34,10 @@
34
34
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
37
- --theme-checkbox-radio-button-border-width: 1px;
37
+ --theme-checkbox-radio-button-border-width: 0.1rem;
38
38
 
39
39
  --theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
40
- --theme-checkbox-radio-button-outline-width: 1px;
40
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
41
41
 
42
42
  --theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
43
43
  }
@@ -58,6 +58,6 @@
58
58
  --theme-btn-outline-focus: light-dark(var(--gray-12), var(--gray-0));
59
59
  --theme-btn-text-focus: light-dark(var(--gray-12), var(--gray-0));
60
60
 
61
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
61
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
62
62
  }
63
63
  }
package/assets/styles/forms/themes/_primary.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --theme-form-input-outline-focus: var(--blue-6);
10
10
  --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
11
11
 
12
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--blue-12), var(--blue-2));
13
13
 
14
14
  --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
15
15
  --theme-form-checkbox-border: light-dark(var(--blue-12), var(--blue-12));
@@ -34,11 +34,11 @@
34
34
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--blue-12), var(--blue-12));
37
- --theme-checkbox-radio-button-border-width: 1px;
37
+ --theme-checkbox-radio-button-border-width: 0.1rem;
38
38
 
39
39
  --theme-checkbox-radio-button-outline-default: light-dark(var(--blue-5), var(--blue-5));
40
40
  --theme-checkbox-radio-button-outline-focus: light-dark(var(--blue-12), var(--blue-12));
41
- --theme-checkbox-radio-button-outline-width: 1px;
41
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
42
42
 
43
43
  --theme-checkbox-radio-button-shadow: transparent;
44
44
  --theme-checkbox-radio-button-shadow-focus: light-dark(var(--blue-6), var(--blue-1));
@@ -62,6 +62,6 @@
62
62
  --theme-btn-outline-focus: var(--blue-0);
63
63
  --theme-btn-text-focus: var(--blue-12);
64
64
 
65
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
65
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--blue-12), var(--blue-2));
66
66
  }
67
67
  }
package/assets/styles/forms/themes/_secondary.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --theme-form-input-outline-focus: var(--gray-6);
10
10
  --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
11
11
 
12
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
13
13
 
14
14
  --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
15
15
  --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
@@ -34,10 +34,10 @@
34
34
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
37
- --theme-checkbox-radio-button-border-width: 1px;
37
+ --theme-checkbox-radio-button-border-width: 0.1rem;
38
38
 
39
39
  --theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
40
- --theme-checkbox-radio-button-outline-width: 1px;
40
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
41
41
 
42
42
  --theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
43
43
  }
@@ -58,6 +58,6 @@
58
58
  --theme-btn-outline-focus: var(--gray-0);
59
59
  --theme-btn-text-focus: var(--gray-12);
60
60
 
61
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
61
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
62
62
  }
63
63
  }
package/assets/styles/forms/themes/_success.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --theme-form-input-outline-focus: var(--green-6);
10
10
  --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
11
11
 
12
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--green-12), var(--green-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--green-12), var(--green-2));
13
13
 
14
14
  --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
15
15
  --theme-form-checkbox-border: light-dark(var(--green-12), var(--green-12));
@@ -34,10 +34,10 @@
34
34
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
37
- --theme-checkbox-radio-button-border-width: 1px;
37
+ --theme-checkbox-radio-button-border-width: 0.1rem;
38
38
 
39
39
  --theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
40
- --theme-checkbox-radio-button-outline-width: 1px;
40
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
41
41
 
42
42
  --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
43
43
  }
@@ -58,6 +58,6 @@
58
58
  --theme-btn-outline-focus: var(--green-0);
59
59
  --theme-btn-text-focus: var(--green-12);
60
60
 
61
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--green-12), var(--green-2));
61
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--green-12), var(--green-2));
62
62
  }
63
63
  }
package/assets/styles/forms/themes/_tertiary.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --theme-form-input-outline-focus: var(--gray-6);
10
10
  --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
11
11
 
12
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
13
13
 
14
14
  --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
15
15
  --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
@@ -34,10 +34,10 @@
34
34
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
37
- --theme-checkbox-radio-button-border-width: 1px;
37
+ --theme-checkbox-radio-button-border-width: 0.1rem;
38
38
 
39
39
  --theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
40
- --theme-checkbox-radio-button-outline-width: 1px;
40
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
41
41
 
42
42
  --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
43
43
  }
@@ -58,6 +58,6 @@
58
58
  --theme-btn-outline-focus: var(--gray-12);
59
59
  --theme-btn-text-focus: var(--gray-0);
60
60
 
61
- --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
61
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem var(--gray-12);
62
62
  }
63
63
  }
package/assets/styles/forms/themes/_warning.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --theme-form-input-outline-focus: var(--orange-6);
10
10
  --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
11
11
 
12
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--orange-12), var(--orange-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--orange-12), var(--orange-2));
13
13
 
14
14
  --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
15
15
  --theme-form-checkbox-border: light-dark(var(--orange-12), var(--orange-12));
@@ -34,10 +34,10 @@
34
34
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--orange-12), var(--orange-12));
37
- --theme-checkbox-radio-button-border-width: 1px;
37
+ --theme-checkbox-radio-button-border-width: 0.1rem;
38
38
 
39
39
  --theme-checkbox-radio-button-outline-default: light-dark(var(--orange-5), var(--orange-5));
40
- --theme-checkbox-radio-button-outline-width: 1px;
40
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
41
41
 
42
42
  --theme-checkbox-radio-button-label-default: light-dark(var(--orange-12), var(--orange-12));
43
43
  }
@@ -58,6 +58,6 @@
58
58
  --theme-btn-outline-focus: var(--orange-0);
59
59
  --theme-btn-text-focus: var(--orange-12);
60
60
 
61
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--orange-12), var(--orange-2));
61
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--orange-12), var(--orange-2));
62
62
  }
63
63
  }
package/assets/styles/forms/variables/_theme.css CHANGED
@@ -1,65 +1,65 @@
1
1
  :root {
2
- --font-size: 16px;
3
- --line-height: calc((var(--font-size) * 2) - 10px);
2
+ --font-size: 1.6rem;
3
+ --line-height: calc((var(--font-size) * 2) - 1rem);
4
4
 
5
- --input-border-radius: 4px;
6
- --input-border-width-thin: 1px;
7
- --input-border-width-default: 2px;
8
- --input-border-width-thick: 3px;
5
+ --input-border-radius: 0.4rem;
6
+ --input-border-width-thin: 0.1rem;
7
+ --input-border-width-default: 0.2rem;
8
+ --input-border-width-thick: 0.3rem;
9
9
 
10
- --input-outline-radius: 4px;
11
- --input-outline-width-thin: 1px;
12
- --input-outline-width-default: 2px;
13
- --input-outline-width-thick: 3px;
10
+ --input-outline-radius: 0.4rem;
11
+ --input-outline-width-thin: 0.1rem;
12
+ --input-outline-width-default: 0.2rem;
13
+ --input-outline-width-thick: 0.3rem;
14
14
 
15
15
  --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
16
16
 
17
17
  --theme-error-surface: var(--red-12);
18
18
  --theme-error-text: var(--red-0);
19
19
 
20
- --theme-form-button-font-size-x-small: 14px;
21
- --theme-form-button-font-size-small: 14px;
22
- --theme-form-button-font-size-normal: 16px;
23
- --theme-form-button-font-size-medium: 18px;
24
- --theme-form-button-font-size-large: 20px;
20
+ --theme-form-button-font-size-x-small: 1.4rem;
21
+ --theme-form-button-font-size-small: 1.4rem;
22
+ --theme-form-button-font-size-normal: 1.6rem;
23
+ --theme-form-button-font-size-medium: 1.8rem;
24
+ --theme-form-button-font-size-large: 2rem;
25
25
 
26
26
  /*
27
27
  * Button Padding
28
28
  */
29
29
 
30
- --theme-form-button-padding-block-x-small: 6px;
31
- --theme-form-button-padding-block-small: 8px;
32
- --theme-form-button-padding-block-normal: 10px;
33
- --theme-form-button-padding-block-medium: 12px;
34
- --theme-form-button-padding-block-large: 12px;
30
+ --theme-form-button-padding-block-x-small: 0.6rem;
31
+ --theme-form-button-padding-block-small: 0.8rem;
32
+ --theme-form-button-padding-block-normal: 1rem;
33
+ --theme-form-button-padding-block-medium: 1.2rem;
34
+ --theme-form-button-padding-block-large: 1.2rem;
35
35
 
36
- --theme-form-button-padding-inline-x-small: 12px;
37
- --theme-form-button-padding-inline-small: 16px;
38
- --theme-form-button-padding-inline-normal: 20px;
39
- --theme-form-button-padding-inline-medium: 22px;
40
- --theme-form-button-padding-inline-large: 24px;
36
+ --theme-form-button-padding-inline-x-small: 1.2rem;
37
+ --theme-form-button-padding-inline-small: 1.6rem;
38
+ --theme-form-button-padding-inline-normal: 2rem;
39
+ --theme-form-button-padding-inline-medium: 2.2rem;
40
+ --theme-form-button-padding-inline-large: 2.4rem;
41
41
 
42
42
  /*
43
43
  * Button Icon Sizes and Gap
44
44
  */
45
45
 
46
- --theme-form-button-padding-inline-icon-only-x-small: 4px;
47
- --theme-form-button-padding-inline-icon-only-small: 6px;
48
- --theme-form-button-padding-inline-icon-only-normal: 8px;
49
- --theme-form-button-padding-inline-icon-only-medium: 10px;
50
- --theme-form-button-padding-inline-icon-only-large: 12px;
46
+ --theme-form-button-padding-inline-icon-only-x-small: 0.4rem;
47
+ --theme-form-button-padding-inline-icon-only-small: 0.6rem;
48
+ --theme-form-button-padding-inline-icon-only-normal: 0.8rem;
49
+ --theme-form-button-padding-inline-icon-only-medium: 1rem;
50
+ --theme-form-button-padding-inline-icon-only-large: 1.2rem;
51
51
 
52
- --theme-form-button-padding-block-icon-only-x-small: 4px;
53
- --theme-form-button-padding-block-icon-only-small: 4px;
54
- --theme-form-button-padding-block-icon-only-normal: 6px;
55
- --theme-form-button-padding-block-icon-only-medium: 8px;
56
- --theme-form-button-padding-block-icon-only-large: 10px;
52
+ --theme-form-button-padding-block-icon-only-x-small: 0.4rem;
53
+ --theme-form-button-padding-block-icon-only-small: 0.4rem;
54
+ --theme-form-button-padding-block-icon-only-normal: 0.6rem;
55
+ --theme-form-button-padding-block-icon-only-medium: 0.8rem;
56
+ --theme-form-button-padding-block-icon-only-large: 1rem;
57
57
 
58
- --theme-form-button-icon-size-x-small: 18px;
59
- --theme-form-button-icon-size-small: 18px;
60
- --theme-form-button-icon-size-normal: 18px;
61
- --theme-form-button-icon-size-medium: 20px;
62
- --theme-form-button-icon-size-large: 22px;
58
+ --theme-form-button-icon-size-x-small: 1.8rem;
59
+ --theme-form-button-icon-size-small: 1.8rem;
60
+ --theme-form-button-icon-size-normal: 1.8rem;
61
+ --theme-form-button-icon-size-medium: 2rem;
62
+ --theme-form-button-icon-size-large: 2.2rem;
63
63
 
64
64
  --theme-form-button-icon-gap-x-small: var(--theme-form-button-padding-inline-x-small);
65
65
  --theme-form-button-icon-gap-small: var(--theme-form-button-padding-inline-small);