@massimo-cassandro/minimo 1.20.15 → 1.21.0

package/src/css/forms/validation.css

@@ -1,31 +1,35 @@
-/* da BS5 */
-.was-validated {
+@layer base {
 
-  /* includes static field which container has is-valid / is-invalid class */
-  .form-group:has(:valid), .form-group:has(.is-valid), .form-group.is-valid .form-control-static{
-    --_status-color: var(--status-success-color);
-  }
-  .form-group:has(:invalid), .form-group:has(.is-invalid), .form-group.is-invalid .form-control-static{
-    --_status-color: var(--status-danger-color);
-  }
+  /* da BS5 */
+  .was-validated {
 
-  .form-label {
-    color: var(--_status-color);
-  }
-
-  .form-control, .form-control-static {
-    outline: var(--form-validation-outline-width) solid var(--_status-color);
-    outline-offset: var(--form-validation-outline-offset);
+    /* includes static field which container has is-valid / is-invalid class */
+    .form-group:has(:valid), .form-group:has(.is-valid), .form-group.is-valid .form-control-static{
+      --_status-color: var(--status-success-color);
+    }
+    .form-group:has(:invalid), .form-group:has(.is-invalid), .form-group.is-invalid .form-control-static{
+      --_status-color: var(--status-danger-color);
+    }
 
-    &:focus {
-      outline: none;
+    .form-label {
+      color: var(--_status-color);
     }
 
-    &:focus-visible {
-      /* background-color: var(--_status-color); */
-      outline: var(--form-control-focus-outline-width) solid var(--_status-color);
-      outline-offset: var(--form-control-focus-outline-offset);
+    .form-control, .form-control-static {
+      outline: var(--form-validation-outline-width) solid var(--_status-color);
+      outline-offset: var(--form-validation-outline-offset);
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        /* background-color: var(--_status-color); */
+        outline: var(--form-control-focus-outline-width) solid var(--_status-color);
+        outline-offset: var(--form-control-focus-outline-offset);
+      }
     }
+
   }
 
 }

package/src/css/grid.css

@@ -1,79 +1,83 @@
-/* TODO unificare regole comuni flex e grid */
-
-.grid {
-  --_cols: 1;
-  /* --_min-col-width: calc((100% - calc(var(--_cols) * var(--flex-grid-gap))) / var(--grid-cols)); */
-
-  display: grid;
-  /* grid-template-columns: repeat(var(--_cols), minmax(var(--grid-min-col-width), 1fr)); */
-  grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
-  grid-auto-flow: row;
-  gap: var(--flex-grid-gap);
-  /* align-items: center; */
-  /* justify-items: start; */
-
-  &.justify-content-end {
-    justify-content: end;
-  }
+@layer base {
+
+  /* TODO unificare regole comuni flex e grid */
 
+  .grid {
+    --_cols: 1;
+    /* --_min-col-width: calc((100% - calc(var(--_cols) * var(--flex-grid-gap))) / var(--grid-cols)); */
 
-  @media (--media-medium-viewport-up) {
-    --_cols: 2;
+    display: grid;
+    /* grid-template-columns: repeat(var(--_cols), minmax(var(--grid-min-col-width), 1fr)); */
+    grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
+    grid-auto-flow: row;
+    gap: var(--flex-grid-gap);
+    /* align-items: center; */
+    /* justify-items: start; */
 
-    > .span-2, > .span-3, > .span-4 {
-      grid-column-start: span 2;
+    &.justify-content-end {
+      justify-content: end;
     }
-  }
 
-  @media (--media-large-viewport-up) {
-    --_cols: 4;
 
-    /* versione a 3, 5, 6, 8 colonne */
-    &.grid-2 {
+    @media (--media-medium-viewport-up) {
       --_cols: 2;
-    }
-    &.grid-3 {
-      --_cols: 3;
-    }
-    &.grid-5 {
-      --_cols: 5;
-    }
-    &.grid-6 {
-      --_cols: 6;
-    }
-    &.grid-8 {
-      --_cols: 8;
-    }
 
-    > .span-2 {
-      grid-column-start: span 2;
-    }
-    > .span-3 {
-      grid-column-start: span 3;
+      > .span-2, > .span-3, > .span-4 {
+        grid-column-start: span 2;
+      }
     }
 
-    > .span-4 {
-      grid-column-start: span 4;
+    @media (--media-large-viewport-up) {
+      --_cols: 4;
+
+      /* versione a 3, 5, 6, 8 colonne */
+      &.grid-2 {
+        --_cols: 2;
+      }
+      &.grid-3 {
+        --_cols: 3;
+      }
+      &.grid-5 {
+        --_cols: 5;
+      }
+      &.grid-6 {
+        --_cols: 6;
+      }
+      &.grid-8 {
+        --_cols: 8;
+      }
+
+      > .span-2 {
+        grid-column-start: span 2;
+      }
+      > .span-3 {
+        grid-column-start: span 3;
+      }
+
+      > .span-4 {
+        grid-column-start: span 4;
+      }
+    } /* end @media */
+
+    /* grid items */
+    > .grid-item-last {
+      grid-column: -2 / -1;
+    }
+    > .grid-full-row {
+      grid-column: 1 / -1;
     }
-  } /* end @media */
 
-  /* grid items */
-  > .grid-item-last {
-    grid-column: -2 / -1;
-  }
-  > .grid-full-row {
-    grid-column: 1 / -1;
   }
 
-}
+  .grid-new-row {
+    grid-column-start: 1;
+  }
 
-.grid-new-row {
-  grid-column-start: 1;
-}
+  .justify-self-end {
+    justify-self: end;
+  }
+  .justify-self-start {
+    justify-self: start;
+  }
 
-.justify-self-end {
-  justify-self: end;
-}
-.justify-self-start {
-  justify-self: start;
 }

package/src/css/headings.css

@@ -1,35 +1,39 @@
+@layer base {
 
-h1, h2, h3, .h3, h4, .h4 {
-  line-height: 1.2;
-  color: var(--headings-color);
-  text-align: var(--headings-text-align);
-}
 
-h1 {
-  margin: 0 0 var(--font-size-xl);
-  font-size: var(--headings-h1-font-size);
-  font-weight: var(--headings-h1-font-weight);
+  h1, h2, h3, .h3, h4, .h4 {
+    line-height: 1.2;
+    color: var(--headings-color);
+    text-align: var(--headings-text-align);
+  }
+
+  h1 {
+    margin: 0 0 var(--font-size-xl);
+    font-size: var(--headings-h1-font-size);
+    font-weight: var(--headings-h1-font-weight);
 
-  small {
-    display: block;
-    font-size: .85em;
-    color: var(--text-muted);
+    small {
+      display: block;
+      font-size: .85em;
+      color: var(--text-muted);
+    }
   }
-}
 
-h2, h3, .h3, h4, .h4 {
-  font-weight: var(--headings-font-weight);
-}
-h2 {
-  margin: var(--font-size-xl) 0 var(--font-size-md);
-  font-size: var(--headings-h2-font-size);
-}
+  h2, h3, .h3, h4, .h4 {
+    font-weight: var(--headings-font-weight);
+  }
+  h2 {
+    margin: var(--font-size-xl) 0 var(--font-size-md);
+    font-size: var(--headings-h2-font-size);
+  }
+
+  h3, .h3 {
+    margin: var(--font-size-lg) 0 var(--font-size-base);
+    font-size: var(--headings-h3-font-size);
+  }
+  h4, .h4 {
+    margin: var(--font-size-base) 0 var(--font-size-sm);
+    font-size: var(--headings-h4-font-size);
+  }
 
-h3, .h3 {
-  margin: var(--font-size-lg) 0 var(--font-size-base);
-  font-size: var(--headings-h3-font-size);
-}
-h4, .h4 {
-  margin: var(--font-size-base) 0 var(--font-size-sm);
-  font-size: var(--headings-h4-font-size);
 }

package/src/css/icons.css

@@ -1,46 +1,48 @@
+@layer base {
 
-.icon {
-  position: relative;
-  display: inline-block;
-  width: 1em;
-  aspect-ratio: 1;
 
-  fill: currentColor;
-  stroke: none;
+  .icon {
+    position: relative;
+    display: inline-block;
+    width: 1em;
+    aspect-ratio: 1;
 
-  /* fill: none;
+    fill: currentColor;
+    stroke: none;
+
+    /* fill: none;
   stroke: currentColor;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 4px; */
 
-  /* &.icon-bold{
+    /* &.icon-bold{
     stroke-width: 8px;
   } */
 
-  &.icon-lg {
-    width: 1.2em;
-    height: 1.2em;
-  }
-  &.icon-xl {
-    width: 1.4em;
-    height: 1.4em;
-  }
-  &.icon-xxl {
-    width: 2em;
-    height: 2em;
-  }
-  &.icon-4xl {
-    width: 8em;
-    height: 8em;
-  }
+    &.icon-lg {
+      width: 1.2em;
+      height: 1.2em;
+    }
+    &.icon-xl {
+      width: 1.4em;
+      height: 1.4em;
+    }
+    &.icon-xxl {
+      width: 2em;
+      height: 2em;
+    }
+    &.icon-4xl {
+      width: 8em;
+      height: 8em;
+    }
 
-  /* &.fill-icon {
+    /* &.fill-icon {
     fill: currentColor;
     stroke: none;
   } */
 
-  /* &.ratio3x4 {
+    /* &.ratio3x4 {
     height: auto;
     aspect-ratio: 3 / 4;
   }
@@ -48,18 +50,18 @@
     height: auto;
     aspect-ratio: 3 / 5;
   } */
-  &.baseline-shift-20 {
-    translate: 0 20%;
-  }
-  &.baseline-shift-30 {
-    translate: 0 30%;
-  }
-  &.baseline-negative-shift-20 {
-    translate: 0 -20%;
+    &.baseline-shift-20 {
+      translate: 0 20%;
+    }
+    &.baseline-shift-30 {
+      translate: 0 30%;
+    }
+    &.baseline-negative-shift-20 {
+      translate: 0 -20%;
+    }
   }
-}
 
-/* .duotone-light, .duotone-medium, .duotone-dark {
+  /* .duotone-light, .duotone-medium, .duotone-dark {
   fill: currentColor;
   stroke: none;
 }
@@ -73,3 +75,5 @@
   fill-opacity: .7;
 } */
 
+
+}

package/src/css/layout-base.css

@@ -1,14 +1,18 @@
-html, body {
-  /* height: 100%; */
-  padding: 0;
-  margin: 0;
-  scroll-behavior: smooth;
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  font-style: var(--font-style-base);
-  line-height: var(--line-height-base);
-  color: var(--text-color);
-  accent-color: var(--accent);
-  background-color: var(--body-background-color);
+@layer base {
+
+  html, body {
+    /* height: 100%; */
+    padding: 0;
+    margin: 0;
+    scroll-behavior: smooth;
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    font-style: var(--font-style-base);
+    line-height: var(--line-height-base);
+    color: var(--text-color);
+    accent-color: var(--accent);
+    background-color: var(--body-background-color);
+
+  }
 
 }

package/src/css/links.css

@@ -0,0 +1,49 @@
+@layer base {
+
+  /* TODO rivedere e completare */
+
+  a:link, .btn-link {
+    /* TODO rivedere, forse più complicato del necessario */
+    &:not(.btn) {
+      font-weight: var(--link-font-weight);
+      color: var(--link-color);
+      text-decoration: var(--link-text-decoration);
+    }
+  }
+
+  a:not(.btn) {
+    text-decoration: none;
+    &:link {
+      color: var(--link-color);
+    }
+    &:visited {
+      color: var(--link-visited-color);
+    }
+  }
+
+  a:not(.btn), .btn-link {
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--link-focus-outline-width) solid color-mix(in srgb, var(--link-focus-outline-color) 60%, transparent);
+      outline-offset: var(--link-focus-outline-offset);
+    }
+    @media (hover: hover) {
+      &:hover {
+        color: var(--link-hover-color);
+        text-decoration: var(--link-hover-text-decoration);
+        text-underline-offset: var(--link-hover-text-underline-offset);
+      }
+    }
+    &:active {
+      /* TODO rivedere, sostituire con colori specifici da custom props */
+      /* stylelint-disable-next-line declaration-no-important */
+      color: var(--link-active-color) !important;
+      background-color: var(--link-active-background-color);
+      offset: 0;
+    }
+  }
+
+}