@massimo-cassandro/minimo 1.20.16 → 1.21.1

package/src/css/buttons/status-buttons.css

@@ -1,94 +1,95 @@
-/* TODO rivedere tutto */
+@layer base {
 
-.btn {
+  /* TODO rivedere tutto */
 
-  /*
+  .btn {
+
+    /*
     --_button-bg-color, --_button-fg-color e --_button-border-color sono definiti in buttons.css
   */
 
 
+    &.btn-success {
+      --_status-bg-color: var(--status-success-color);
+      --_status-fg-color: var(--status-success-fg);
+      --_status-border-color: var(--status-success-border-color);
+    }
+    &.btn-info {
+      --_status-bg-color: var(--status-info-color);
+      --_status-fg-color: var(--status-info-fg);
+      --_status-border-color: var(--status-info-border-color);
+    }
+    &.btn-danger {
+      --_status-bg-color: var(--status-danger-color);
+      --_status-fg-color: var(--status-danger-fg);
+      --_status-border-color: var(--status-danger-border-color);
+    }
 
-  &.btn-success {
-    --_status-bg-color: var(--status-success-color);
-    --_status-fg-color: var(--status-success-fg);
-    --_status-border-color: var(--status-success-border-color);
-  }
-  &.btn-info {
-    --_status-bg-color: var(--status-info-color);
-    --_status-fg-color: var(--status-info-fg);
-    --_status-border-color: var(--status-info-border-color);
-  }
-  &.btn-danger {
-    --_status-bg-color: var(--status-danger-color);
-    --_status-fg-color: var(--status-danger-fg);
-    --_status-border-color: var(--status-danger-border-color);
-  }
-
-  &.btn-success, &.btn-info, &.btn-danger  {
-    --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 30%, transparent);
-    --_status-hover-fg-color: var(--_status-bg-color);
-    --_status-hover-border-color: var(--_status-bg-color);
+    &.btn-success, &.btn-info, &.btn-danger  {
+      --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 30%, transparent);
+      --_status-hover-fg-color: var(--_status-bg-color);
+      --_status-hover-border-color: var(--_status-bg-color);
 
-    --_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_button-bg-color) 40%, transparent);
-    --_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 10%, transparent);
+      --_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_button-bg-color) 40%, transparent);
+      --_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 10%, transparent);
 
-    --_hollow-fg: var(--_status-bg-color);
-  }
+      --_hollow-fg: var(--_status-bg-color);
+    }
 
-  &.btn-warning {
-    --_status-bg-color: var(--status-warning-color);
-    --_status-fg-color: var(--status-warning-fg);
-    --_status-border-color: var(--status-warning-border-color);
+    &.btn-warning {
+      --_status-bg-color: var(--status-warning-color);
+      --_status-fg-color: var(--status-warning-fg);
+      --_status-border-color: var(--status-warning-border-color);
 
-    --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
-    --_status-hover-fg-color: var(--_status-fg-color);
-    --_status-hover-border-color: var(--_status-fg-color);
+      --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
+      --_status-hover-fg-color: var(--_status-fg-color);
+      --_status-hover-border-color: var(--_status-fg-color);
 
-    --_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
-    --_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 30%, transparent);
+      --_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
+      --_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 30%, transparent);
 
-    --_hollow-fg: var(--_status-fg-color);
+      --_hollow-fg: var(--_status-fg-color);
 
-  }
+    }
 
-  &.btn-success, &.btn-info, &.btn-danger, &.btn-warning  {
+    &.btn-success, &.btn-info, &.btn-danger, &.btn-warning  {
 
-    --_button-bg-color: var(--_status-bg-color);
-    --_button-fg-color: var(--_status-fg-color);
-    --_button-border-color: var(--_status-border-color);
+      --_button-bg-color: var(--_status-bg-color);
+      --_button-fg-color: var(--_status-fg-color);
+      --_button-border-color: var(--_status-border-color);
 
 
-    &.btn-hollow {
-      --_button-bg-color: color-mix(in srgb, var(--_status-bg-color) 10%, transparent);
-      --_button-fg-color: var(--_hollow-fg);
-      --_button-border-color: var(--_hollow-fg);
+      &.btn-hollow {
+        --_button-bg-color: color-mix(in srgb, var(--_status-bg-color) 10%, transparent);
+        --_button-fg-color: var(--_hollow-fg);
+        --_button-border-color: var(--_hollow-fg);
 
-    }
+      }
 
 
-    @media (hover: hover) {
-      &:hover {
-        --_button-bg-color: var(--_status-hover-bg-color);
-        --_button-fg-color: var(--_status-hover-fg-color);
-        --_button-border-color: var(--_status-hover-border-color);
+      @media (hover: hover) {
+        &:hover {
+          --_button-bg-color: var(--_status-hover-bg-color);
+          --_button-fg-color: var(--_status-hover-fg-color);
+          --_button-border-color: var(--_status-hover-border-color);
+        }
       }
-    }
 
-    &:focus {
-      outline: none;
-    }
+      &:focus {
+        outline: none;
+      }
 
-    &:focus-visible, &:active {
-      outline: var(--_status-focus-outline);
-    }
+      &:focus-visible, &:active {
+        outline: var(--_status-focus-outline);
+      }
 
-    &:active {
-      --_button-bg-color: var(--_status-active-bg);
+      &:active {
+        --_button-bg-color: var(--_status-active-bg);
+      }
     }
-  }
 
 
-  /*
+    /*
   @media (prefers-color-scheme: dark) {
 
 
@@ -126,4 +127,6 @@
       }
     }
   } */
+  }
+
 }

package/src/css/container.css

@@ -1,6 +1,10 @@
-.container {
-  width: 100%;
-  max-width: var(--layout-container-max-width);
-  padding-inline: var(--size-lg);
-  margin-inline: auto;
+@layer base {
+
+  .container {
+    width: 100%;
+    max-width: var(--layout-container-max-width);
+    padding-inline: var(--size-lg);
+    margin-inline: auto;
+  }
+
 }

package/src/css/data-formats.css

@@ -1,30 +1,34 @@
+@layer base {
 
-.data-lining-nums {
-  font-feature-settings: 'lnum', 'pnum';
-  font-variant-numeric: lining-nums proportional-nums;
-}
 
-.data-tabular-nums {
-  font-feature-settings: 'lnum', 'pnum';
-  font-variant-numeric: lining-nums tabular-nums;
-}
+  .data-lining-nums {
+    font-feature-settings: 'lnum', 'pnum';
+    font-variant-numeric: lining-nums proportional-nums;
+  }
 
-.data-euro {
-  &::before {
-    margin-right: .2rem;
-    font-size: 70%;
-    color: currentColor;
-    content: '\20AC';
+  .data-tabular-nums {
+    font-feature-settings: 'lnum', 'pnum';
+    font-variant-numeric: lining-nums tabular-nums;
   }
-}
-.data-perc {
-  &::after {
-    margin-left: .1rem;
-    font-size: 70%;
-    color: currentColor;
-    content: '%';
+
+  .data-euro {
+    &::before {
+      margin-right: .2rem;
+      font-size: 70%;
+      color: currentColor;
+      content: '\20AC';
+    }
   }
-}
-.data-dec {
-  font-size: 85%;
+  .data-perc {
+    &::after {
+      margin-left: .1rem;
+      font-size: 70%;
+      color: currentColor;
+      content: '%';
+    }
+  }
+  .data-dec {
+    font-size: 85%;
+  }
+
 }

package/src/css/details.css

@@ -1,19 +1,23 @@
-details {
-  ::marker {
-    font-size: .9em;
-    color: var(--text-color);
+@layer base {
+
+  details {
+    ::marker {
+      font-size: .9em;
+      color: var(--text-color);
+    }
   }
-}
 
-summary {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-bold);
+  summary {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
 
-}
+  }
 
-.details-content {
-  ul {
-    padding: 0;
-    margin: 0;
+  .details-content {
+    ul {
+      padding: 0;
+      margin: 0;
+    }
   }
+
 }

package/src/css/dimensions.css

@@ -1,10 +1,14 @@
-/* stylelint-disable declaration-no-important */
-.w-100 {
-  width: 100% !important;
-}
-.w-50 {
-  width: 50% !important;
-}
-.w-auto {
-  width: auto !important;
+@layer base {
+
+  /* stylelint-disable declaration-no-important */
+  .w-100 {
+    width: 100% !important;
+  }
+  .w-50 {
+    width: 50% !important;
+  }
+  .w-auto {
+    width: auto !important;
+  }
+
 }

package/src/css/display.css

@@ -1,32 +1,34 @@
-/* stylelint-disable declaration-no-important */
+@layer base {
 
+  /* stylelint-disable declaration-no-important */
 
-@media print {
-  .d-print-none {
-    display: none;
+
+  @media print {
+    .d-print-none {
+      display: none;
+    }
   }
-}
 
-.d-none {
-  display: none !important;
-}
-.d-inline {
-  display: inline !important;
-}
-.d-block {
-  display: block !important;
-}
-.d-inline-block {
-  display: inline-block !important;
-}
+  .d-none {
+    display: none !important;
+  }
+  .d-inline {
+    display: inline !important;
+  }
+  .d-block {
+    display: block !important;
+  }
+  .d-inline-block {
+    display: inline-block !important;
+  }
 
 
-@media (--media-medium-viewport-down) {
-  .d-md-down-none {
-    display: none !important;
+  @media (--media-medium-viewport-down) {
+    .d-md-down-none {
+      display: none !important;
+    }
   }
-}
-/*
+  /*
 .d-md-up-block {
   display: none;
 
@@ -42,7 +44,7 @@
   }
 } */
 
-/* .mobile-hidden {
+  /* .mobile-hidden {
   @media (--media-large-viewport-down) {
     display: none;
   }
@@ -54,3 +56,5 @@
   }
 }
 */
+
+}

package/src/css/flex.css

@@ -1,43 +1,47 @@
-.flex {
-  display: flex;
-  flex-flow: row wrap;
-  gap: var(--flex-grid-gap);
-  align-content: flex-start;
-  align-items: flex-start;
-  justify-content: flex-start;
-
-  &.align-items-center {
-    align-items: center;
-  }
+@layer base {
 
-  &.gap-0 {
-    gap: 0;
-  }
+  .flex {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--flex-grid-gap);
+    align-content: flex-start;
+    align-items: flex-start;
+    justify-content: flex-start;
 
-  &.gap-2 {
-    gap: calc(var(--flex-grid-gap) * 2);
-  }
-  &.column-gap-2 {
-    column-gap: calc(var(--flex-grid-gap) * 2);
-  }
+    &.align-items-center {
+      align-items: center;
+    }
+
+    &.gap-0 {
+      gap: 0;
+    }
+
+    &.gap-2 {
+      gap: calc(var(--flex-grid-gap) * 2);
+    }
+    &.column-gap-2 {
+      column-gap: calc(var(--flex-grid-gap) * 2);
+    }
+
+    &.justify-content-space-between {
+      justify-content: space-between;
+    }
+    &.justify-content-flex-end {
+      justify-content: flex-end;
+    }
+    &.justify-content-center {
+      justify-content: center;
+    }
 
-  &.justify-content-space-between {
-    justify-content: space-between;
-  }
-  &.justify-content-flex-end {
-    justify-content: flex-end;
-  }
-  &.justify-content-center {
-    justify-content: center;
   }
 
-}
+  /* utilizzata anche da grid */
 
-/* utilizzata anche da grid */
+  .align-self-center {
+    align-self: center;
+  }
+  .align-self-end {
+    align-self: end;
+  }
 
-.align-self-center {
-  align-self: center;
-}
-.align-self-end {
-  align-self: end;
 }

package/src/css/forms/fieldset.css

@@ -1,5 +1,7 @@
+@layer base {
 
-/* TODO da verificare
+
+  /* TODO da verificare
 fieldset.form-group, fieldset.form-collection-fset {
 
   &, legend {
@@ -23,57 +25,59 @@ fieldset.form-group, fieldset.form-collection-fset {
 */
 
 
-.fset {
-  position: relative;
-  padding: 3rem 1rem 1rem;
-  margin: 1rem 0 2rem;
-  background: transparent;
-  border: var(--form-fieldset-border-width) solid var(--form-control-border-color);
-  border-radius: var(--btn-border-radius);
-
-  &, > legend {
+  .fset {
+    position: relative;
+    padding: 3rem 1rem 1rem;
+    margin: 1rem 0 2rem;
+    background: transparent;
     border: var(--form-fieldset-border-width) solid var(--form-control-border-color);
-  }
+    border-radius: var(--btn-border-radius);
 
-  > legend {
-    position: absolute;
-    top: -.5rem;
-    left: calc(-1 * var(--form-fieldset-border-width));
-    z-index: 1;
-    padding: .4rem .8rem;
-    font-size: .9rem;
-    font-weight: var(--font-weight-semibold);
-    line-height: 1.2;
-    color: var(--form-legend-color);
-    background-color: var(--form-legend-background-color);
-    border-radius: var(--btn-border-radius) var(--btn-border-radius) var(--btn-border-radius) 0;
-  }
+    &, > legend {
+      border: var(--form-fieldset-border-width) solid var(--form-control-border-color);
+    }
 
+    > legend {
+      position: absolute;
+      top: -.5rem;
+      left: calc(-1 * var(--form-fieldset-border-width));
+      z-index: 1;
+      padding: .4rem .8rem;
+      font-size: .9rem;
+      font-weight: var(--font-weight-semibold);
+      line-height: 1.2;
+      color: var(--form-legend-color);
+      background-color: var(--form-legend-background-color);
+      border-radius: var(--btn-border-radius) var(--btn-border-radius) var(--btn-border-radius) 0;
+    }
 
-  .fset { /* :not(.fupl-wrapper):not(.form-group) { */
-    padding-top: 2rem;
-    margin-bottom: .5rem;
-    border: none;
 
-    &:first-of-type {
-      margin-top: 0;
+    .fset { /* :not(.fupl-wrapper):not(.form-group) { */
+      padding-top: 2rem;
+      margin-bottom: .5rem;
+      border: none;
+
+      &:first-of-type {
+        margin-top: 0;
+      }
+
+      > legend {
+        padding-right: 0;
+        padding-left: 0;
+        font-size: .9rem;
+        background: transparent;
+        border-bottom: 1px solid var(--form-control-border-color);
+      }
     }
 
-    > legend {
-      padding-right: 0;
-      padding-left: 0;
-      font-size: .9rem;
-      background: transparent;
-      border-bottom: 1px solid var(--form-control-border-color);
+    &[disabled] {
+      font-style: italic;
+      opacity: .6;
     }
-  }
 
-  &[disabled] {
-    font-style: italic;
-    opacity: .6;
+    &:has(.table-responsive) {
+      min-width: 0;
+    }
   }
 
-  &:has(.table-responsive) {
-    min-width: 0;
-  }
 }

package/src/css/forms/form-collections.css

@@ -1,17 +1,21 @@
-.form-collection-fset { /* fieldset */
-  padding: 0;
-  border: none;
+@layer base {
 
-  .form-collection {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: var(--size-xs);
-    align-items: flex-start;
-    justify-content: flex-start;
+  .form-collection-fset { /* fieldset */
+    padding: 0;
+    border: none;
 
-    &.form-collection-inline {
-      flex-flow: row wrap;
-      gap: var(--size-md);
+    .form-collection {
+      display: flex;
+      flex-flow: column nowrap;
+      gap: var(--size-xs);
+      align-items: flex-start;
+      justify-content: flex-start;
+
+      &.form-collection-inline {
+        flex-flow: row wrap;
+        gap: var(--size-md);
+      }
     }
   }
+
 }

package/src/css/forms/form-disabled-readonly.css

@@ -1,40 +1,44 @@
+@layer base {
 
-.form-control {
 
-  &[disabled] {
-    color: var(--form-control-disabled-color);
-    cursor: not-allowed;
-    background-color: var(--form-control-disabled-background-color);
+  .form-control {
 
-    &, &::placeholder {
-      font-style: var(--form-control-disabled-font-style);
+    &[disabled] {
+      color: var(--form-control-disabled-color);
+      cursor: not-allowed;
+      background-color: var(--form-control-disabled-background-color);
+
+      &, &::placeholder {
+        font-style: var(--form-control-disabled-font-style);
+      }
     }
-  }
 
-  &[readonly] {
-    color: var(--form-control-readonly-color);
-    pointer-events: none;
-    user-select: none;
-    background-color: var(--form-control-readonly-background-color);
-  }
+    &[readonly] {
+      color: var(--form-control-readonly-color);
+      pointer-events: none;
+      user-select: none;
+      background-color: var(--form-control-readonly-background-color);
+    }
 
-}
+  }
 
-.form-group {
-  &:has([disabled]) {
-    opacity: var(--form-control-disabled-opacity);
-    .form-label {
-      font-style: var(--form-control-disabled-font-style);
-      color: var(--form-control-disabled-color);
+  .form-group {
+    &:has([disabled]) {
+      opacity: var(--form-control-disabled-opacity);
+      .form-label {
+        font-style: var(--form-control-disabled-font-style);
+        color: var(--form-control-disabled-color);
+      }
     }
-  }
 
-  &:has([readonly]) {
-    opacity: var(--form-control-readonly-opacity);
-    .form-label {
-      font-style: var(--form-control-readonly-font-style);
-      color: var(--form-control-readonly-color);
+    &:has([readonly]) {
+      opacity: var(--form-control-readonly-opacity);
+      .form-label {
+        font-style: var(--form-control-readonly-font-style);
+        color: var(--form-control-readonly-color);
+      }
     }
+
   }
 
 }