@massimo-cassandro/minimo 0.1.11 → 0.1.12

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/css/buttons/buttons.css +61 -53
  3. package/src/css/buttons/status-buttons.css +3 -3
  4. package/src/css/forms/forms.css +15 -15
  5. package/src/custom-properties-default.css +31 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.1.11",
3
+ "version": "0.1.12",
4
4
  "description": "Light css framework",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/massimo-cassandro/minimo#readme",
package/src/css/buttons/buttons.css CHANGED
@@ -21,7 +21,7 @@ button, [role='button'] {
21
21
 
22
22
  a.btn {
23
23
  &, &:hover, &:active, &:focus, &:visited {
24
- color: var(--btn-fg-color);
24
+ color: var(--button-fg-color);
25
25
  text-decoration: none;
26
26
  }
27
27
  }
@@ -29,14 +29,16 @@ a.btn {
29
29
  .btn {
30
30
 
31
31
  display: inline-block;
32
- padding: var(--form-btns-padding-y) var(--form-btns-padding-x);
33
- font-size: var(--form-btns-font-size);
34
- color: var(--btn-fg-color);
32
+ padding: var(--form-btn-padding-y) var(--form-btn-padding-x);
33
+ font-size: var(--form-btn-font-size);
34
+ font-style: var(--btn-font-style);
35
+ font-weight: var(--btn-font-weight);
36
+ color: var(--button-fg-color);
35
37
  text-align: center;
36
38
  text-decoration: none;
37
- background: var(--btn-bg-color);
38
- border: 1px solid var(--btn-border-color);
39
- border-radius: var(--form-btns-border-radius);
39
+ background: var(--button-bg-color);
40
+ border: var(--btn-border-width) solid var(--button-border-color);
41
+ border-radius: var(--form-btn-border-radius);
40
42
  box-shadow: none;
41
43
 
42
44
  &[disabled] {
@@ -53,9 +55,9 @@ a.btn {
53
55
  }
54
56
 
55
57
  &.btn-sm {
56
- --form-btns-padding-x: var(--form-btns-sm-padding-x);
57
- --form-btns-padding-y: var(--form-btns-sm-padding-y);
58
- font-size: var(--form-btns-sm-font-size);
58
+ --form-btn-padding-x: var(--form-btn-sm-padding-x);
59
+ --form-btn-padding-y: var(--form-btn-sm-padding-y);
60
+ font-size: var(--form-btn-sm-font-size);
59
61
 
60
62
  svg {
61
63
  width: 1.5em;
@@ -63,8 +65,8 @@ a.btn {
63
65
  }
64
66
 
65
67
  &.btn-lg {
66
- --form-btns-padding-x: 1.5rem;
67
- --form-btns-padding-y: .6rem;
68
+ --form-btn-padding-x: 1.5rem;
69
+ --form-btn-padding-y: .6rem;
68
70
  font-size: var(--font-size-lg);
69
71
 
70
72
  svg {
@@ -74,103 +76,109 @@ a.btn {
74
76
 
75
77
 
76
78
  &.btn-primary {
77
- --btn-bg-color: var(--btn-primary-bg-color);
78
- --btn-fg-color: var(--btn-primary-fg-color);
79
- --btn-border-color: var(--btn-primary-border-color);
79
+ --button-bg-color: var(--btn-primary-bg-color);
80
+ --button-fg-color: var(--btn-primary-fg-color);
81
+ --button-border-color: var(--btn-primary-border-color);
80
82
 
81
83
  @media (--mouse) {
82
84
  &:hover {
83
- --btn-bg-color: var(--btn-primary-hover-bg-color);
84
- --btn-fg-color: var(--btn-primary-hover-fg-color);
85
- --btn-border-color: var(--btn-primary-hover-border-color);
85
+ --button-bg-color: var(--btn-primary-hover-bg-color);
86
+ --button-fg-color: var(--btn-primary-hover-fg-color);
87
+ --button-border-color: var(--btn-primary-hover-border-color);
86
88
  }
87
89
  }
88
90
 
89
91
  &:focus, &:active {
90
- outline: var(--form-btns-outline-width) solid var(--btn-primary-focus-outline-color);
92
+ outline: var(--form-btn-outline-width) solid var(--btn-primary-focus-outline-color);
91
93
  /* outline-offset: 4px; */
92
94
  }
93
95
 
94
96
  &:active {
95
- --btn-bg-color: var(--btn-primary-active-bg-color);
96
- --btn-fg-color: var(--btn-primary-active-fg-color);
97
- --btn-border-color: var(--btn-primary-active-border-color);
97
+ --button-bg-color: var(--btn-primary-active-bg-color);
98
+ --button-fg-color: var(--btn-primary-active-fg-color);
99
+ --button-border-color: var(--btn-primary-active-border-color);
98
100
  }
99
101
  }
100
102
 
101
103
  &.btn-secondary {
102
- --btn-bg-color: var(--btn-secondary-bg-color);
103
- --btn-fg-color: var(--btn-secondary-fg-color);
104
- --btn-border-color: var(--btn-secondary-border-color);
104
+ --button-bg-color: var(--btn-secondary-bg-color);
105
+ --button-fg-color: var(--btn-secondary-fg-color);
106
+ --button-border-color: var(--btn-secondary-border-color);
105
107
 
106
108
  @media (--mouse) {
107
109
  &:hover {
108
- --btn-bg-color: var(--btn-secondary-hover-bg-color);
109
- --btn-fg-color: var(--btn-secondary-hover-fg-color);
110
- --btn-border-color: var(--btn-secondary-hover-border-color);
110
+ --button-bg-color: var(--btn-secondary-hover-bg-color);
111
+ --button-fg-color: var(--btn-secondary-hover-fg-color);
112
+ --button-border-color: var(--btn-secondary-hover-border-color);
111
113
  }
112
114
  }
113
115
 
114
116
  &:focus, &:active {
115
- outline: var(--form-btns-outline-width) solid var(--btn-secondary-focus-outline-color);
117
+ outline: var(--form-btn-outline-width) solid var(--btn-secondary-focus-outline-color);
116
118
  /* outline-offset: 4px; */
117
119
  }
118
120
 
119
121
  &:active {
120
- --btn-bg-color: var(--btn-secondary-active-bg-color);
121
- --btn-fg-color: var(--btn-secondary-active-fg-color);
122
- --btn-border-color: var(--btn-secondary-active-border-color);
122
+ --button-bg-color: var(--btn-secondary-active-bg-color);
123
+ --button-fg-color: var(--btn-secondary-active-fg-color);
124
+ --button-border-color: var(--btn-secondary-active-border-color);
123
125
  }
124
126
 
125
127
 
126
128
  }
127
129
 
130
+
131
+ &.btn-outline-primary, &.btn-outline-secondary {
132
+ border-width: var(--btn-o-border-width);
133
+ }
134
+
128
135
  &.btn-outline-primary {
129
- --btn-bg-color: var(--btn-o-primary-bg-color);
130
- --btn-fg-color: var(--btn-o-primary-fg-color);
131
- --btn-border-color: var(--btn-o-primary-border-color);
136
+ --button-bg-color: var(--btn-o-primary-bg-color);
137
+ --button-fg-color: var(--btn-o-primary-fg-color);
138
+ --button-border-color: var(--btn-o-primary-border-color);
139
+
132
140
 
133
141
  @media (--mouse) {
134
142
  &:hover {
135
- --btn-bg-color: var(--btn-o-primary-hover-bg-color);
136
- --btn-fg-color: var(--btn-o-primary-hover-fg-color);
137
- --btn-border-color: var(--btn-o-primary-hover-border-color);
143
+ --button-bg-color: var(--btn-o-primary-hover-bg-color);
144
+ --button-fg-color: var(--btn-o-primary-hover-fg-color);
145
+ --button-border-color: var(--btn-o-primary-hover-border-color);
138
146
  }
139
147
  }
140
148
 
141
149
  &:focus, &:active {
142
- outline: var(--form-btns-outline-width) solid var(--btn-o-primary-focus-outline-color);
150
+ outline: var(--form-btn-outline-width) solid var(--btn-o-primary-focus-outline-color);
143
151
  }
144
152
 
145
153
  &:active {
146
- --btn-bg-color: var(--btn-o-primary-active-bg-color);
147
- --btn-fg-color: var(--btn-o-primary-active-fg-color);
148
- --btn-border-color: var(--btn-o-primary-active-border-color);
154
+ --button-bg-color: var(--btn-o-primary-active-bg-color);
155
+ --button-fg-color: var(--btn-o-primary-active-fg-color);
156
+ --button-border-color: var(--btn-o-primary-active-border-color);
149
157
  }
150
158
  }
151
159
 
152
160
 
153
161
  &.btn-outline-secondary {
154
- --btn-bg-color: var(--btn-o-secondary-bg-color);
155
- --btn-fg-color: var(--btn-o-secondary-fg-color);
156
- --btn-border-color: var(--btn-o-secondary-border-color);
162
+ --button-bg-color: var(--btn-o-secondary-bg-color);
163
+ --button-fg-color: var(--btn-o-secondary-fg-color);
164
+ --button-border-color: var(--btn-o-secondary-border-color);
157
165
 
158
166
  @media (--mouse) {
159
167
  &:hover {
160
- --btn-bg-color: var(--btn-o-secondary-hover-bg-color);
161
- --btn-fg-color: var(--btn-o-secondary-hover-fg-color);
162
- --btn-border-color: var(--btn-o-secondary-hover-border-color);
168
+ --button-bg-color: var(--btn-o-secondary-hover-bg-color);
169
+ --button-fg-color: var(--btn-o-secondary-hover-fg-color);
170
+ --button-border-color: var(--btn-o-secondary-hover-border-color);
163
171
  }
164
172
  }
165
173
 
166
174
  &:focus, &:active {
167
- outline: var(--form-btns-outline-width) solid var(--btn-o-secondary-focus-outline-color);
175
+ outline: var(--form-btn-outline-width) solid var(--btn-o-secondary-focus-outline-color);
168
176
  }
169
177
 
170
178
  &:active {
171
- --btn-bg-color: var(--btn-o-secondary-active-bg-color);
172
- --btn-fg-color: var(--btn-o-secondary-active-fg-color);
173
- --btn-border-color: var(--btn-o-secondary-active-border-color);
179
+ --button-bg-color: var(--btn-o-secondary-active-bg-color);
180
+ --button-fg-color: var(--btn-o-secondary-active-fg-color);
181
+ --button-border-color: var(--btn-o-secondary-active-border-color);
174
182
  }
175
183
  }
176
184
 
@@ -180,7 +188,7 @@ a.btn {
180
188
  gap: 1rem;
181
189
  align-items: center;
182
190
  justify-content: space-between;
183
- padding-inline-start: calc(var(--form-btns-padding-x) * 1.5);
191
+ padding-inline-start: calc(var(--form-btn-padding-x) * 1.5);
184
192
  text-align: start;
185
193
  }
186
194
  }
package/src/css/buttons/status-buttons.css CHANGED
@@ -39,7 +39,7 @@
39
39
  }
40
40
 
41
41
  &:focus, &:active {
42
- outline: var(--form-btns-outline-width) solid color-mix(in srgb, var(--bg) 60%, transparent);
42
+ outline: var(--form-btn-outline-width) solid color-mix(in srgb, var(--bg) 60%, transparent);
43
43
  }
44
44
 
45
45
  &:active {
@@ -59,7 +59,7 @@
59
59
  }
60
60
 
61
61
  &:focus, &:active {
62
- outline: var(--form-btns-outline-width) solid color-mix(in srgb, var(--bg) 40%, transparent);
62
+ outline: var(--form-btn-outline-width) solid color-mix(in srgb, var(--bg) 40%, transparent);
63
63
  }
64
64
 
65
65
  &:active {
@@ -95,7 +95,7 @@
95
95
  &.btn-success, &.btn-info, &.btn-danger, &.btn-warning {
96
96
 
97
97
  &:focus, &:active {
98
- outline: var(--form-btns-outline-width) solid color-mix(in srgb, var(--bg) 60%, transparent);
98
+ outline: var(--form-btn-outline-width) solid color-mix(in srgb, var(--bg) 60%, transparent);
99
99
  }
100
100
 
101
101
  &:active {
package/src/css/forms/forms.css CHANGED
@@ -33,7 +33,7 @@ fieldset:not(.fupl-wrapper):not(.form-group):not(.form-collection-fset) {
33
33
  margin: 1rem 0 2rem;
34
34
  background: transparent;
35
35
  border: var(--form-fieldset-border-width) solid var(--form-border-color);
36
- border-radius: var(--form-btns-border-radius);
36
+ border-radius: var(--form-btn-border-radius);
37
37
 
38
38
  &, > legend {
39
39
  border: var(--form-fieldset-border-width) solid var(--form-border-color);
@@ -51,7 +51,7 @@ fieldset:not(.fupl-wrapper):not(.form-group):not(.form-collection-fset) {
51
51
  color: var(--form-legend-color);
52
52
  /* text-transform: uppercase; */
53
53
  background-color: var(--form-legend-bg-color);
54
- border-radius: var(--form-btns-border-radius) var(--form-btns-border-radius) var(--form-btns-border-radius) 0;
54
+ border-radius: var(--form-btn-border-radius) var(--form-btn-border-radius) var(--form-btn-border-radius) 0;
55
55
  }
56
56
 
57
57
  fieldset:not(.fupl-wrapper):not(.form-group) {
@@ -123,16 +123,16 @@ fieldset:not(.fupl-wrapper):not(.form-group):not(.form-collection-fset) {
123
123
  display: block;
124
124
  width: 100%;
125
125
  font-family: var(--font-family);
126
- font-size: var(--form-btns-font-size);
126
+ font-size: var(--form-btn-font-size);
127
127
  font-weight: var(--font-weight-regular);
128
128
  line-height: var(--line-height-base);
129
129
  color: var(--form-text-color);
130
130
  background-color: var(--form-bg-color);
131
131
  border: 1px solid var(--form-border-color);
132
- border-radius: var(--form-btns-border-radius);
132
+ border-radius: var(--form-btn-border-radius);
133
133
 
134
134
  &:focus {
135
- outline: var(--form-btns-outline-width) solid var(--form-btns-focus-color);
135
+ outline: var(--form-btn-outline-width) solid var(--form-btn-focus-color);
136
136
  }
137
137
 
138
138
  &[disabled] {
@@ -149,17 +149,17 @@ fieldset:not(.fupl-wrapper):not(.form-group):not(.form-collection-fset) {
149
149
 
150
150
  .form-control, .form-control-text {
151
151
 
152
- padding: var(--form-btns-padding-y) var(--form-btns-padding-x);
152
+ padding: var(--form-btn-padding-y) var(--form-btn-padding-x);
153
153
 
154
154
  &::placeholder {
155
- font-size: var(--form-btns-font-size);
155
+ font-size: var(--form-btn-font-size);
156
156
  color: var(--form-placeholder-color);
157
157
  opacity: 1;
158
158
  }
159
159
 
160
160
  &.form-control-sm {
161
- padding: var(--form-btns-sm-padding-y) var(--form-btns-sm-padding-x);
162
- font-size: var(--form-btns-sm-font-size);
161
+ padding: var(--form-btn-sm-padding-y) var(--form-btn-sm-padding-x);
162
+ font-size: var(--form-btn-sm-font-size);
163
163
  }
164
164
  }
165
165
  .form-control-text {
@@ -176,7 +176,7 @@ select.form-control, .form-select {
176
176
  --form-select-indicator-color: var(--form-text-color);
177
177
  --indicator-padding-right: var(--spacing-base);
178
178
 
179
- padding: var(--form-btns-padding-y) var(--indicator-padding-right) var(--form-btns-padding-y) var(--form-btns-padding-x);
179
+ padding: var(--form-btn-padding-y) var(--indicator-padding-right) var(--form-btn-padding-y) var(--form-btn-padding-x);
180
180
  appearance: none;
181
181
  background-image: var(--form-select-indicator);
182
182
  background-repeat: no-repeat;
@@ -185,7 +185,7 @@ select.form-control, .form-select {
185
185
 
186
186
  &[multiple],
187
187
  &[size]:not([size='1']) {
188
- padding-right: var(--form-btns-padding-x);
188
+ padding-right: var(--form-btn-padding-x);
189
189
  background-image: none;
190
190
  }
191
191
 
@@ -257,11 +257,11 @@ textarea.form-control {
257
257
  }
258
258
 
259
259
  > .input-group-text {
260
- padding: var(--form-btns-padding-y) var(--form-btns-padding-x);
261
- font-size: var(--form-btns-font-size);
260
+ padding: var(--form-btn-padding-y) var(--form-btn-padding-x);
261
+ font-size: var(--form-btn-font-size);
262
262
  background-color: var(--form-input-group-bg-color);
263
263
  border: 1px solid var(--form-border-color);
264
- border-radius: var(--form-btns-border-radius);
264
+ border-radius: var(--form-btn-border-radius);
265
265
  }
266
266
 
267
267
  > .btn, .input-group-text {
@@ -306,7 +306,7 @@ textarea.form-control {
306
306
 
307
307
  &:focus {
308
308
  /* background-color: var(--status-bg-color); */
309
- outline: var(--form-btns-outline-width) solid var(--status-color);
309
+ outline: var(--form-btn-outline-width) solid var(--status-color);
310
310
  outline-offset: 0;
311
311
 
312
312
  }
package/src/custom-properties-default.css CHANGED
@@ -115,19 +115,27 @@
115
115
  --form-legend-bg-color: var(--stone-3);
116
116
  --form-legend-color: #333; /* var(--text-color); */
117
117
 
118
- --form-btns-border-radius: var(--radius-sm);
119
- --form-btns-padding-y: var(--spacing-xxs);
120
- --form-btns-padding-x: var(--spacing-xs);
121
- --form-btns-font-size: clamp(.85rem, 6vw, 1rem);
122
- --form-btns-sm-font-size: clamp(.75rem, 6vw, .9rem);
123
- --form-btns-sm-padding-x: .8rem;
124
- --form-btns-sm-padding-y: .1rem;
125
- --form-btns-focus-color: hsl(205 69% 45% / .508);
126
- --form-btns-outline-width: 3px;
118
+ --form-btn-border-radius: var(--radius-xxs);
119
+ --form-btn-padding-y: var(--spacing-xxs);
120
+ --form-btn-padding-x: var(--spacing-xs);
121
+ --form-btn-font-size: clamp(.85rem, 6vw, 1rem);
122
+ --form-btn-sm-font-size: clamp(.75rem, 6vw, .9rem);
123
+ --form-btn-sm-padding-x: .8rem;
124
+ --form-btn-sm-padding-y: .1rem;
125
+ --form-btn-focus-color: hsl(205 69% 45% / .508);
126
+ --form-btn-outline-width: 4px;
127
127
 
128
128
  /* TODO importazione automatica SVG (NB problemi con svgo) */
129
129
  /* url('./css/forms/select-indicator.svg?cssInline'); */
130
130
  --form-select-indicator: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgb(5%2C%2048%2C%2056)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E');
131
+ --form-font-style: normal;
132
+ --form-font-weight: var(--font-weight-regular);
133
+
134
+ --btn-border-width: 1px;
135
+ --btn-o-border-width: 2px;
136
+ --btn-font-style: var(--form-font-style);
137
+ --btn-font-weight: var(--form-font-weight);
138
+
131
139
 
132
140
  --btn-primary-bg-color: linear-gradient(45deg, var(--primary), color-mix(in srgb, var(--primary) 95%, #000));
133
141
  --btn-primary-fg-color: var(--primary-fg);
@@ -152,16 +160,16 @@
152
160
  --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-border-color) 50%, transparent);
153
161
 
154
162
 
155
- --btn-o-primary-bg-color: var(--primary-150);
156
- --btn-o-primary-fg-color: var(--primary-10);
157
- --btn-o-primary-border-color: var(--btn-bg-color);
158
- --btn-o-primary-hover-bg-color: var(--primary-10);
159
- --btn-o-primary-hover-fg-color: var(--primary-150);
160
- --btn-o-primary-hover-border-color: var(--btn-fg-color);
161
- --btn-o-primary-active-bg-color: var(--primary-150);
162
- --btn-o-primary-active-fg-color: var(--primary-10);
163
- --btn-o-primary-active-border-color: var(--btn-bg-color);
164
- --btn-o-primary-focus-outline-color: var(--btn-bg-color);
163
+ --btn-o-primary-bg-color: var(--primary-fg);
164
+ --btn-o-primary-fg-color: var(--primary);
165
+ --btn-o-primary-border-color: var(--btn-o-primary-fg-color);
166
+ --btn-o-primary-hover-bg-color: color-mix(in srgb, var(--primary) 10%, transparent);
167
+ --btn-o-primary-hover-fg-color: var(--btn-o-primary-fg-color);
168
+ --btn-o-primary-hover-border-color: var(--btn-o-primary-border-color);
169
+ --btn-o-primary-active-bg-color: var(--btn-o-primary-fg-color);
170
+ --btn-o-primary-active-fg-color: var(--btn-o-primary-bg-color);
171
+ --btn-o-primary-active-border-color: var(--btn-o-primary-border-color);
172
+ --btn-o-primary-focus-outline-color: color-mix(in srgb, var(--primary) 20%, transparent);
165
173
 
166
174
 
167
175
  --btn-o-secondary-bg-color: color-mix(in srgb, var(--secondary) 5%, transparent);
@@ -201,7 +209,7 @@
201
209
  --btn-close-icon-hover-color: var(--btn-close-background);
202
210
  --btn-close-active-background: var(--accent);
203
211
  --btn-close-icon-active-color: var(--accent-fg);
204
- --btn-close-focus-outline-width: var(--form-btns-outline-width);
212
+ --btn-close-focus-outline-width: var(--form-btn-outline-width);
205
213
  --btn-close-focus-outline-color: color-mix(in srgb, var(--accent) 50%, transparent);
206
214
  /* end btn-close */
207
215
 
@@ -218,8 +226,11 @@
218
226
 
219
227
  --radius-xxs: var(--spacing-xxs);
220
228
  --radius-xs: var(--spacing-xs);
229
+ --radius-sm: var(--spacing-sm);
221
230
  --radius-base: var(--spacing-base);
222
231
  --radius-md: var(--spacing-md);
232
+ --radius-lg: var(--spacing-lg);
233
+ --radius-xl: var(--spacing-xl);
223
234
  --radius-pill: 999rem;
224
235
 
225
236
  --spinner-color: var(--text-color);