@massimo-cassandro/minimo 0.1.8 → 0.1.10

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 (11) hide show
  1. package/README.md +3 -1
  2. package/package.json +2 -2
  3. package/src/components/modal-alert/svg/check-circle-duotone.svg +1 -0
  4. package/src/components/modal-alert/svg/info-duotone.svg +1 -0
  5. package/src/components/modal-alert/svg/question-duotone.svg +1 -0
  6. package/src/components/modal-alert/svg/warning-duotone.svg +1 -0
  7. package/src/components/modal-alert/svg/x-circle-duotone.svg +1 -0
  8. package/src/css/buttons/btn-close.css +8 -8
  9. package/src/css/forms/forms.css +1 -1
  10. package/src/css/forms/select-indicator.svg +3 -0
  11. package/src/custom-properties-default.css +4 -3
package/README.md CHANGED
@@ -2,10 +2,12 @@
2
2
 
3
3
  Very light-size framework
4
4
 
5
- ...and some [snippets](snippets/snippets.md)
5
+ ...and some install [snippets](snippets/snippets.md)
6
6
 
7
7
  ## Install
8
8
 
9
9
  ```bash
10
10
  npm i @massimo-cassandro/minimo
11
11
  ```
12
+
13
+ > Note: **minimo** is designed to be used with WebPack using the configuration you can find in the [boilerplate folder](./boilerplate/) of this repository. If changes are made (for example, to how SVG files are imported), things may not work as expected
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.1.8",
3
+ "version": "0.1.10",
4
4
  "description": "Light css framework",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -23,7 +23,7 @@
23
23
  },
24
24
  "main": "./src/index.js",
25
25
  "files": [
26
- "src/**/*.{js,css}"
26
+ "src/**/*.{js,css,svg}"
27
27
  ],
28
28
  "devDependencies": {
29
29
  "@massimo-cassandro/dev-updater": "^2.1.0"
package/src/components/modal-alert/svg/check-circle-duotone.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>
package/src/components/modal-alert/svg/info-duotone.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z"></path></svg>
package/src/components/modal-alert/svg/question-duotone.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>
package/src/components/modal-alert/svg/warning-duotone.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z" opacity="0.2"></path><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path></svg>
package/src/components/modal-alert/svg/x-circle-duotone.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>
package/src/css/buttons/btn-close.css CHANGED
@@ -7,18 +7,18 @@
7
7
 
8
8
  .btn-close {
9
9
 
10
- --button-size: calc(var(--btn-close-icon-size) + (var(--btn-close-padding) * 2));
10
+ --icon-bar-width: calc(var(--btn-close-size) - (var(--btn-close-padding) * 2) - (var(--btn-close-border-width) * 2));
11
11
 
12
12
  position: relative;
13
13
 
14
14
  display: inline-block;
15
- width: var(--button-size);
16
- height: var(--button-size);
15
+ width: var(--btn-close-size);
16
+ height: var(--btn-close-size);
17
17
  padding: var(--btn-close-padding);
18
18
  color: var(--btn-close-icon-color);
19
19
  cursor: pointer;
20
20
  background-color: var(--btn-close-background);
21
- border: var(--btn-close-border);
21
+ border: var(--btn-close-border-width) solid var(--btn-close-border-color);
22
22
  border-radius: var(--btn-close-border-radius);
23
23
 
24
24
  &::before, &::after {
@@ -26,22 +26,22 @@
26
26
  top: 50%;
27
27
  left: 0;
28
28
  display: block;
29
- width: var(--btn-close-icon-size);
29
+ width: var(--icon-bar-width);
30
30
  height: var(--btn-close-icon-bar-size);
31
31
  content: '';
32
32
  background: currentColor;
33
33
  }
34
34
  &::before {
35
35
  rotate: 45deg;
36
- translate: calc(var(--btn-close-padding) / 2) -50%;
36
+ translate: var(--btn-close-padding) -50%;
37
37
  }
38
38
  &::after {
39
39
  rotate: -45deg;
40
- translate: calc(var(--btn-close-padding) / 2) -50%;
40
+ translate: var(--btn-close-padding) -50%;
41
41
  }
42
42
 
43
43
  &:focus {
44
- outline: var(--btn-close-outline-width) solid var(--btn-close-focus-outline-color);
44
+ outline: var(--btn-close-focus-outline-width) solid var(--btn-close-focus-outline-color);
45
45
  }
46
46
 
47
47
  @media (hover: hover) {
package/src/css/forms/forms.css CHANGED
@@ -178,7 +178,7 @@ select.form-control, .form-select {
178
178
 
179
179
  padding: var(--form-btns-padding-y) var(--indicator-padding-right) var(--form-btns-padding-y) var(--form-btns-padding-x);
180
180
  appearance: none;
181
- background-image: url('./select-indicator.svg?inline-dataURI');
181
+ background-image: url('./select-indicator.svg?cssInline');
182
182
  background-repeat: no-repeat;
183
183
  background-position: right var(--indicator-padding-right) center;
184
184
  background-size: 16px 12px;
package/src/css/forms/select-indicator.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
2
+ <path fill='none' stroke='rgb(5, 48, 56)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/>
3
+ </svg>
package/src/custom-properties-default.css CHANGED
@@ -172,8 +172,8 @@
172
172
  --btn-o-secondary-focus-outline-color: color-mix(in srgb, var(--secondary) 50%, #fff);
173
173
 
174
174
  /* btn-close */
175
- --btn-close-icon-size: 1.3rem;
176
- --btn-close-icon-bar-size: 1.5px;
175
+ --btn-close-size: 1.5rem;
176
+ --btn-close-icon-bar-size: 2px;
177
177
  --btn-close-icon-color: var(--text-color);
178
178
 
179
179
  /* senza sfondo */
@@ -188,8 +188,9 @@
188
188
  */
189
189
 
190
190
  /* con sfondo */
191
+ --btn-close-border-width: 3px;
192
+ --btn-close-border-color: var(--btn-close-icon-color);
191
193
  --btn-close-border-radius: 50%;
192
- --btn-close-border: 1px solid var(--btn-close-icon-color);
193
194
  --btn-close-padding: 3px;
194
195
  --btn-close-background: var(--body-bg-color);
195
196
  --btn-close-hover-background: var(--btn-close-icon-color);