@massimo-cassandro/minimo 1.21.2 → 1.21.3

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 (54) hide show
  1. package/package.json +1 -1
  2. package/src/components/autocomplete/autocomplete.css +116 -118
  3. package/src/components/inner-nav/inner-nav.css +10 -13
  4. package/src/components/modal-alert/modal-alert.module.css +156 -159
  5. package/src/components/modal-popup/modal-popup.module.css +84 -88
  6. package/src/components/overlay/overlay.css +10 -14
  7. package/src/components/sf-macro/sf-macro.css +68 -72
  8. package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css +90 -94
  9. package/src/components/snackbar/snackbar.module.css +89 -93
  10. package/src/components/spinner/spinner-circle-basic.css +14 -18
  11. package/src/components/spinner/spinner.module.css +4 -8
  12. package/src/components/unsplash-page/unsplash-page.module.css +255 -260
  13. package/src/css/alerts.css +81 -85
  14. package/src/css/badge.css +13 -15
  15. package/src/css/buttons/btn-close.css +53 -56
  16. package/src/css/buttons/buttons-primary.css +34 -37
  17. package/src/css/buttons/buttons-secondary.css +34 -37
  18. package/src/css/buttons/buttons.css +80 -83
  19. package/src/css/buttons/status-buttons.css +87 -90
  20. package/src/css/container.css +5 -8
  21. package/src/css/data-formats.css +24 -28
  22. package/src/css/details.css +13 -17
  23. package/src/css/dimensions.css +9 -12
  24. package/src/css/display.css +37 -41
  25. package/src/css/flex.css +35 -39
  26. package/src/css/forms/fieldset.css +56 -59
  27. package/src/css/forms/form-collections.css +12 -16
  28. package/src/css/forms/form-disabled-readonly.css +28 -31
  29. package/src/css/forms/form-group.css +13 -18
  30. package/src/css/forms/form-utilities.css +34 -39
  31. package/src/css/forms/forms.css +132 -136
  32. package/src/css/forms/input-group.css +43 -47
  33. package/src/css/forms/switch.css +75 -78
  34. package/src/css/forms/validation.css +22 -26
  35. package/src/css/grid.css +62 -66
  36. package/src/css/headings.css +28 -32
  37. package/src/css/icons.css +57 -63
  38. package/src/css/layout-base.css +13 -15
  39. package/src/css/links.css +36 -39
  40. package/src/css/margin-padding-bootstrap-media.css +1832 -1835
  41. package/src/css/margin-padding-bootstrap.css +440 -443
  42. package/src/css/margin-padding-media.css +1832 -1835
  43. package/src/css/margin-padding.css +440 -443
  44. package/src/css/overflow.css +3 -7
  45. package/src/css/position.css +1 -6
  46. package/src/css/reset.css +46 -48
  47. package/src/css/svg.css +2 -5
  48. package/src/css/table.css +61 -63
  49. package/src/css/text.css +95 -98
  50. package/src/css/visibility.css +42 -45
  51. package/src/minimo.css +3 -2
  52. package/src/utilities/dom-builder-helpers/form-tags.js +21 -6
  53. package/src/web-components/s-datatable-component/s-datatable-component.module.css +172 -175
  54. package/types/classes.d.ts +1 -0
package/src/css/buttons/buttons.css CHANGED
@@ -1,107 +1,104 @@
1
- @layer base {
2
1
 
3
- /* TODO dividere in più file secondo la variante? */
2
+ /* TODO dividere in più file secondo la variante? */
4
3
 
5
- button, [role='button'], .btn, .btn-reset, .btn-link {
6
- &:not([disabled]) {
7
- cursor: pointer;
8
- }
9
- & svg, &[disabled] {
10
- pointer-events: none;
11
- }
4
+ button, [role='button'], .btn, .btn-reset, .btn-link {
5
+ &:not([disabled]) {
6
+ cursor: pointer;
12
7
  }
13
-
14
- .btn-reset, .btn-link, .btn-close {
15
- padding: 0;
16
- margin: 0;
17
- background: transparent;
18
- border: none;
19
- box-shadow: none;
8
+ & svg, &[disabled] {
9
+ pointer-events: none;
20
10
  }
11
+ }
21
12
 
22
- .btn-link[disabled] {
23
- /* stylelint-disable declaration-no-important */
24
- font-style: var(--btn-link-disabled-font-style) !important;
25
- color: var(--btn-link-disabled-color) !important;
26
- /* stylelint-enable declaration-no-important */
27
- }
13
+ .btn-reset, .btn-link, .btn-close {
14
+ padding: 0;
15
+ margin: 0;
16
+ background: transparent;
17
+ border: none;
18
+ box-shadow: none;
19
+ }
28
20
 
29
- a.btn {
30
- &:focus {
31
- outline: none;
32
- }
21
+ .btn-link[disabled] {
22
+ /* stylelint-disable declaration-no-important */
23
+ font-style: var(--btn-link-disabled-font-style) !important;
24
+ color: var(--btn-link-disabled-color) !important;
25
+ /* stylelint-enable declaration-no-important */
26
+ }
33
27
 
34
- &, &:hover, &:active, &:focus-visible, &:visited {
35
- color: var(--_button-fg-color);
36
- text-decoration: none;
37
- }
28
+ a.btn {
29
+ &:focus {
30
+ outline: none;
38
31
  }
39
32
 
40
- .btn {
41
- display: inline-block;
42
- padding: var(--btn-padding-block) var(--btn-padding-inline);
43
- font-size: var(--btn-font-size);
44
- font-style: var(--btn-font-style);
45
- font-weight: var(--btn-font-weight);
33
+ &, &:hover, &:active, &:focus-visible, &:visited {
46
34
  color: var(--_button-fg-color);
47
- text-align: center;
48
35
  text-decoration: none;
49
- background: var(--_button-bg-color);
50
- border: var(--btn-border-width) solid var(--_button-border-color);
51
- border-radius: var(--btn-border-radius);
52
- box-shadow: none;
53
-
54
- &[disabled] {
55
- font-style: italic;
56
- cursor: not-allowed;
57
- opacity: var(--btn-disabled-opacity);
58
- filter: grayscale(60%);
59
- }
60
-
61
- svg {
62
- width: 1em;
63
- fill: currentColor;
64
- }
36
+ }
37
+ }
65
38
 
66
- &.btn-sm {
67
- padding: var(--btn-sm-padding-block) var(--btn-sm-padding-inline);
68
- font-size: var(--btn-sm-font-size);
39
+ .btn {
40
+ display: inline-block;
41
+ padding: var(--btn-padding-block) var(--btn-padding-inline);
42
+ font-size: var(--btn-font-size);
43
+ font-style: var(--btn-font-style);
44
+ font-weight: var(--btn-font-weight);
45
+ color: var(--_button-fg-color);
46
+ text-align: center;
47
+ text-decoration: none;
48
+ background: var(--_button-bg-color);
49
+ border: var(--btn-border-width) solid var(--_button-border-color);
50
+ border-radius: var(--btn-border-radius);
51
+ box-shadow: none;
52
+
53
+ &[disabled] {
54
+ font-style: italic;
55
+ cursor: not-allowed;
56
+ opacity: var(--btn-disabled-opacity);
57
+ filter: grayscale(60%);
58
+ }
69
59
 
70
- svg {
71
- width: 1.5em;
72
- }
73
- }
60
+ svg {
61
+ width: 1em;
62
+ fill: currentColor;
63
+ }
74
64
 
75
- &.btn-lg {
76
- padding: var(--btn-lg-padding-block) var(--btn-lg-padding-inline);
77
- font-size: var(--btn-lg-font-size);
65
+ &.btn-sm {
66
+ padding: var(--btn-sm-padding-block) var(--btn-sm-padding-inline);
67
+ font-size: var(--btn-sm-font-size);
78
68
 
79
- svg {
80
- width: 1.5em;
81
- }
69
+ svg {
70
+ width: 1.5em;
82
71
  }
72
+ }
83
73
 
84
- &.btn-xl {
85
- padding: var(--btn-xl-padding-block) var(--btn-xl-padding-inline);
86
- font-size: var(--btn-xl-font-size);
87
- --_focus-ring-size: 6px;
88
- }
74
+ &.btn-lg {
75
+ padding: var(--btn-lg-padding-block) var(--btn-lg-padding-inline);
76
+ font-size: var(--btn-lg-font-size);
89
77
 
90
- &.btn-hollow {
91
- border-width: var(--btn-hollow-border-width);
78
+ svg {
79
+ width: 1.5em;
92
80
  }
81
+ }
93
82
 
83
+ &.btn-xl {
84
+ padding: var(--btn-xl-padding-block) var(--btn-xl-padding-inline);
85
+ font-size: var(--btn-xl-font-size);
86
+ --_focus-ring-size: 6px;
87
+ }
94
88
 
95
- /* TODO button con solo icona o cosa? controllare: completare o eliminare */
96
- &.btn-icon {
97
- display: inline-flex;
98
- flex-flow: row nowrap;
99
- gap: 1rem;
100
- align-items: center;
101
- justify-content: space-between;
102
- padding-inline-start: calc(var(--form-control-padding-inline) * 1.5);
103
- text-align: start;
104
- }
89
+ &.btn-hollow {
90
+ border-width: var(--btn-hollow-border-width);
105
91
  }
106
92
 
93
+
94
+ /* TODO button con solo icona o cosa? controllare: completare o eliminare */
95
+ &.btn-icon {
96
+ display: inline-flex;
97
+ flex-flow: row nowrap;
98
+ gap: 1rem;
99
+ align-items: center;
100
+ justify-content: space-between;
101
+ padding-inline-start: calc(var(--form-control-padding-inline) * 1.5);
102
+ text-align: start;
103
+ }
107
104
  }
package/src/css/buttons/status-buttons.css CHANGED
@@ -1,132 +1,129 @@
1
- @layer base {
2
1
 
3
- /* TODO rivedere tutto */
2
+ /* TODO rivedere tutto */
4
3
 
5
- .btn {
4
+ .btn {
6
5
 
7
- /*
8
- --_button-bg-color, --_button-fg-color e --_button-border-color sono definiti in buttons.css
9
- */
6
+ /*
7
+ --_button-bg-color, --_button-fg-color e --_button-border-color sono definiti in buttons.css
8
+ */
10
9
 
11
10
 
12
- &.btn-success {
13
- --_status-bg-color: var(--status-success-color);
14
- --_status-fg-color: var(--status-success-fg);
15
- --_status-border-color: var(--status-success-border-color);
16
- }
17
- &.btn-info {
18
- --_status-bg-color: var(--status-info-color);
19
- --_status-fg-color: var(--status-info-fg);
20
- --_status-border-color: var(--status-info-border-color);
21
- }
22
- &.btn-danger {
23
- --_status-bg-color: var(--status-danger-color);
24
- --_status-fg-color: var(--status-danger-fg);
25
- --_status-border-color: var(--status-danger-border-color);
26
- }
11
+ &.btn-success {
12
+ --_status-bg-color: var(--status-success-color);
13
+ --_status-fg-color: var(--status-success-fg);
14
+ --_status-border-color: var(--status-success-border-color);
15
+ }
16
+ &.btn-info {
17
+ --_status-bg-color: var(--status-info-color);
18
+ --_status-fg-color: var(--status-info-fg);
19
+ --_status-border-color: var(--status-info-border-color);
20
+ }
21
+ &.btn-danger {
22
+ --_status-bg-color: var(--status-danger-color);
23
+ --_status-fg-color: var(--status-danger-fg);
24
+ --_status-border-color: var(--status-danger-border-color);
25
+ }
27
26
 
28
- &.btn-success, &.btn-info, &.btn-danger {
29
- --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 30%, transparent);
30
- --_status-hover-fg-color: var(--_status-bg-color);
31
- --_status-hover-border-color: var(--_status-bg-color);
27
+ &.btn-success, &.btn-info, &.btn-danger {
28
+ --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 30%, transparent);
29
+ --_status-hover-fg-color: var(--_status-bg-color);
30
+ --_status-hover-border-color: var(--_status-bg-color);
32
31
 
33
- --_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_button-bg-color) 40%, transparent);
34
- --_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 10%, transparent);
32
+ --_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_button-bg-color) 40%, transparent);
33
+ --_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 10%, transparent);
35
34
 
36
- --_hollow-fg: var(--_status-bg-color);
37
- }
35
+ --_hollow-fg: var(--_status-bg-color);
36
+ }
38
37
 
39
- &.btn-warning {
40
- --_status-bg-color: var(--status-warning-color);
41
- --_status-fg-color: var(--status-warning-fg);
42
- --_status-border-color: var(--status-warning-border-color);
38
+ &.btn-warning {
39
+ --_status-bg-color: var(--status-warning-color);
40
+ --_status-fg-color: var(--status-warning-fg);
41
+ --_status-border-color: var(--status-warning-border-color);
43
42
 
44
- --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
45
- --_status-hover-fg-color: var(--_status-fg-color);
46
- --_status-hover-border-color: var(--_status-fg-color);
43
+ --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
44
+ --_status-hover-fg-color: var(--_status-fg-color);
45
+ --_status-hover-border-color: var(--_status-fg-color);
47
46
 
48
- --_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
49
- --_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 30%, transparent);
47
+ --_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
48
+ --_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 30%, transparent);
50
49
 
51
- --_hollow-fg: var(--_status-fg-color);
50
+ --_hollow-fg: var(--_status-fg-color);
52
51
 
53
- }
52
+ }
54
53
 
55
- &.btn-success, &.btn-info, &.btn-danger, &.btn-warning {
54
+ &.btn-success, &.btn-info, &.btn-danger, &.btn-warning {
56
55
 
57
- --_button-bg-color: var(--_status-bg-color);
58
- --_button-fg-color: var(--_status-fg-color);
59
- --_button-border-color: var(--_status-border-color);
56
+ --_button-bg-color: var(--_status-bg-color);
57
+ --_button-fg-color: var(--_status-fg-color);
58
+ --_button-border-color: var(--_status-border-color);
60
59
 
61
60
 
62
- &.btn-hollow {
63
- --_button-bg-color: color-mix(in srgb, var(--_status-bg-color) 10%, transparent);
64
- --_button-fg-color: var(--_hollow-fg);
65
- --_button-border-color: var(--_hollow-fg);
61
+ &.btn-hollow {
62
+ --_button-bg-color: color-mix(in srgb, var(--_status-bg-color) 10%, transparent);
63
+ --_button-fg-color: var(--_hollow-fg);
64
+ --_button-border-color: var(--_hollow-fg);
66
65
 
67
- }
66
+ }
68
67
 
69
68
 
70
- @media (hover: hover) {
71
- &:hover {
72
- --_button-bg-color: var(--_status-hover-bg-color);
73
- --_button-fg-color: var(--_status-hover-fg-color);
74
- --_button-border-color: var(--_status-hover-border-color);
75
- }
69
+ @media (hover: hover) {
70
+ &:hover {
71
+ --_button-bg-color: var(--_status-hover-bg-color);
72
+ --_button-fg-color: var(--_status-hover-fg-color);
73
+ --_button-border-color: var(--_status-hover-border-color);
76
74
  }
75
+ }
77
76
 
78
- &:focus {
79
- outline: none;
80
- }
77
+ &:focus {
78
+ outline: none;
79
+ }
81
80
 
82
- &:focus-visible, &:active {
83
- outline: var(--_status-focus-outline);
84
- }
81
+ &:focus-visible, &:active {
82
+ outline: var(--_status-focus-outline);
83
+ }
85
84
 
86
- &:active {
87
- --_button-bg-color: var(--_status-active-bg);
88
- }
85
+ &:active {
86
+ --_button-bg-color: var(--_status-active-bg);
89
87
  }
88
+ }
90
89
 
91
90
 
92
- /*
93
- @media (prefers-color-scheme: dark) {
91
+ /*
92
+ @media (prefers-color-scheme: dark) {
94
93
 
95
94
 
96
- &.btn-success, &.btn-info, &.btn-danger {
95
+ &.btn-success, &.btn-info, &.btn-danger {
97
96
 
98
- @media (hover: hover) {
99
- &:hover {
100
- --_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 60%, #fff);
101
- --_button-fg-color: var(--_button-bg-color);
102
- --_button-border-color: color-mix(in srgb, var(--_button-bg-color) 40%, #fff);
103
- }
97
+ @media (hover: hover) {
98
+ &:hover {
99
+ --_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 60%, #fff);
100
+ --_button-fg-color: var(--_button-bg-color);
101
+ --_button-border-color: color-mix(in srgb, var(--_button-bg-color) 40%, #fff);
104
102
  }
105
103
  }
104
+ }
106
105
 
107
- &.btn-warning {
106
+ &.btn-warning {
108
107
 
109
- @media (hover: hover) {
110
- &:hover {
111
- --_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 60%, #fff);
112
- --_button-fg-color: var(--_button-fg-color);
113
- --_button-border-color: var(--_button-fg-color);
114
- }
108
+ @media (hover: hover) {
109
+ &:hover {
110
+ --_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 60%, #fff);
111
+ --_button-fg-color: var(--_button-fg-color);
112
+ --_button-border-color: var(--_button-fg-color);
115
113
  }
116
114
  }
115
+ }
117
116
 
118
- &.btn-success, &.btn-info, &.btn-danger, &.btn-warning {
117
+ &.btn-success, &.btn-info, &.btn-danger, &.btn-warning {
119
118
 
120
- &:focus, &:active {
121
- outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_button-bg-color) 60%, transparent);
122
- }
119
+ &:focus, &:active {
120
+ outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_button-bg-color) 60%, transparent);
121
+ }
123
122
 
124
- &:active {
125
- --_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 30%, transparent);
126
- --_button-fg-color: var(--text-color);
127
- }
123
+ &:active {
124
+ --_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 30%, transparent);
125
+ --_button-fg-color: var(--text-color);
128
126
  }
129
- } */
130
127
  }
131
-
128
+ } */
132
129
  }
package/src/css/container.css CHANGED
@@ -1,10 +1,7 @@
1
- @layer base {
2
-
3
- .container {
4
- width: 100%;
5
- max-width: var(--layout-container-max-width);
6
- padding-inline: var(--size-lg);
7
- margin-inline: auto;
8
- }
9
1
 
2
+ .container {
3
+ width: 100%;
4
+ max-width: var(--layout-container-max-width);
5
+ padding-inline: var(--size-lg);
6
+ margin-inline: auto;
10
7
  }
package/src/css/data-formats.css CHANGED
@@ -1,34 +1,30 @@
1
- @layer base {
2
1
 
2
+ .data-lining-nums {
3
+ font-feature-settings: 'lnum', 'pnum';
4
+ font-variant-numeric: lining-nums proportional-nums;
5
+ }
3
6
 
4
- .data-lining-nums {
5
- font-feature-settings: 'lnum', 'pnum';
6
- font-variant-numeric: lining-nums proportional-nums;
7
- }
8
-
9
- .data-tabular-nums {
10
- font-feature-settings: 'lnum', 'pnum';
11
- font-variant-numeric: lining-nums tabular-nums;
12
- }
7
+ .data-tabular-nums {
8
+ font-feature-settings: 'lnum', 'pnum';
9
+ font-variant-numeric: lining-nums tabular-nums;
10
+ }
13
11
 
14
- .data-euro {
15
- &::before {
16
- margin-right: .2rem;
17
- font-size: 70%;
18
- color: currentColor;
19
- content: '\20AC';
20
- }
12
+ .data-euro {
13
+ &::before {
14
+ margin-right: .2rem;
15
+ font-size: 70%;
16
+ color: currentColor;
17
+ content: '\20AC';
21
18
  }
22
- .data-perc {
23
- &::after {
24
- margin-left: .1rem;
25
- font-size: 70%;
26
- color: currentColor;
27
- content: '%';
28
- }
29
- }
30
- .data-dec {
31
- font-size: 85%;
19
+ }
20
+ .data-perc {
21
+ &::after {
22
+ margin-left: .1rem;
23
+ font-size: 70%;
24
+ color: currentColor;
25
+ content: '%';
32
26
  }
33
-
27
+ }
28
+ .data-dec {
29
+ font-size: 85%;
34
30
  }
package/src/css/details.css CHANGED
@@ -1,23 +1,19 @@
1
- @layer base {
2
-
3
- details {
4
- ::marker {
5
- font-size: .9em;
6
- color: var(--text-color);
7
- }
1
+ details {
2
+ ::marker {
3
+ font-size: .9em;
4
+ color: var(--text-color);
8
5
  }
6
+ }
9
7
 
10
- summary {
11
- font-size: var(--font-size-sm);
12
- font-weight: var(--font-weight-bold);
8
+ summary {
9
+ font-size: var(--font-size-sm);
10
+ font-weight: var(--font-weight-bold);
13
11
 
14
- }
12
+ }
15
13
 
16
- .details-content {
17
- ul {
18
- padding: 0;
19
- margin: 0;
20
- }
14
+ .details-content {
15
+ ul {
16
+ padding: 0;
17
+ margin: 0;
21
18
  }
22
-
23
19
  }
package/src/css/dimensions.css CHANGED
@@ -1,14 +1,11 @@
1
- @layer base {
2
-
3
- /* stylelint-disable declaration-no-important */
4
- .w-100 {
5
- width: 100% !important;
6
- }
7
- .w-50 {
8
- width: 50% !important;
9
- }
10
- .w-auto {
11
- width: auto !important;
12
- }
13
1
 
2
+ /* stylelint-disable declaration-no-important */
3
+ .w-100 {
4
+ width: 100% !important;
5
+ }
6
+ .w-50 {
7
+ width: 50% !important;
8
+ }
9
+ .w-auto {
10
+ width: auto !important;
14
11
  }
package/src/css/display.css CHANGED
@@ -1,60 +1,56 @@
1
- @layer base {
1
+ /* stylelint-disable declaration-no-important */
2
2
 
3
- /* stylelint-disable declaration-no-important */
4
3
 
5
-
6
- @media print {
7
- .d-print-none {
8
- display: none;
9
- }
4
+ @media print {
5
+ .d-print-none {
6
+ display: none;
10
7
  }
8
+ }
11
9
 
12
- .d-none {
13
- display: none !important;
14
- }
15
- .d-inline {
16
- display: inline !important;
17
- }
18
- .d-block {
19
- display: block !important;
20
- }
21
- .d-inline-block {
22
- display: inline-block !important;
23
- }
10
+ .d-none {
11
+ display: none !important;
12
+ }
13
+ .d-inline {
14
+ display: inline !important;
15
+ }
16
+ .d-block {
17
+ display: block !important;
18
+ }
19
+ .d-inline-block {
20
+ display: inline-block !important;
21
+ }
24
22
 
25
23
 
26
- @media (--media-medium-viewport-down) {
27
- .d-md-down-none {
28
- display: none !important;
29
- }
24
+ @media (--media-medium-viewport-down) {
25
+ .d-md-down-none {
26
+ display: none !important;
30
27
  }
31
- /*
28
+ }
29
+ /*
32
30
  .d-md-up-block {
33
- display: none;
31
+ display: none;
34
32
 
35
- @media (--media-medium-viewport-up) {
36
- display: block;
37
- }
33
+ @media (--media-medium-viewport-up) {
34
+ display: block;
35
+ }
38
36
  }
39
37
  .d-md-up-flex {
40
- display: none;
38
+ display: none;
41
39
 
42
- @media (--media-medium-viewport-up) {
43
- display: flex;
44
- }
40
+ @media (--media-medium-viewport-up) {
41
+ display: flex;
42
+ }
45
43
  } */
46
44
 
47
- /* .mobile-hidden {
48
- @media (--media-large-viewport-down) {
49
- display: none;
50
- }
45
+ /* .mobile-hidden {
46
+ @media (--media-large-viewport-down) {
47
+ display: none;
48
+ }
51
49
  }
52
50
 
53
51
  @media (--media-large-viewport-down) {
54
- .sm-screen-hidden {
55
- display: none !important;
56
- }
52
+ .sm-screen-hidden {
53
+ display: none !important;
57
54
  }
58
- */
59
-
60
55
  }
56
+ */