@massimo-cassandro/minimo 1.20.16 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.20.16",
+  "version": "1.21.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/components/autocomplete/autocomplete.css

@@ -1,146 +1,150 @@
-/* basato sul css di @tarekraafat/autocomplete.js */
+@layer components {
 
+  /* basato sul css di @tarekraafat/autocomplete.js */
 
-.hmenu-subsection-emulazione {
-  overflow-y: visible;
-}
 
-.ac-autocomplete-wrapper { /* assegnato all'elemento .form-group */
-
-  --ac-color: #333;
-  --ac-bg-color: #fff;
-  --ac-border-color: #666;
-  --ac-danger-color: #c00;
-  --ac-box-shadow: 0 0 10px rgb(0 0 0 / .6);
-  --ac-list-item-bg: #fff;
-  --ac-hover-color: var(--secondary-100);
-
-  position: relative;
-
-  ul {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    left: 0;
-    z-index: 1000;
-    max-height: 14rem;
-    padding: 0;
-    margin: .2rem 0 0;
-    overflow-y: scroll;
-    color: var(--ac-color);
-    outline: none;
-    background-color: var(--ac-bg-color);
-    border: 1px solid var(--ac-border-color);
-    border-radius: .6rem;
-    box-shadow: var(--ac-box-shadow);
-
-    &[hidden],
-    &:empty {
-      display: block;
-      opacity: 0;
-      transform: scale(0);
-    }
+  .hmenu-subsection-emulazione {
+    overflow-y: visible;
+  }
 
-    li {
+  .ac-autocomplete-wrapper { /* assegnato all'elemento .form-group */
+
+    --ac-color: #333;
+    --ac-bg-color: #fff;
+    --ac-border-color: #666;
+    --ac-danger-color: #c00;
+    --ac-box-shadow: 0 0 10px rgb(0 0 0 / .6);
+    --ac-list-item-bg: #fff;
+    --ac-hover-color: var(--secondary-100);
+
+    position: relative;
+
+    ul {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      left: 0;
+      z-index: 1000;
+      max-height: 14rem;
       padding: 0;
-      margin: .3rem;
-      text-align: left;
-      list-style: none;
+      margin: .2rem 0 0;
+      overflow-y: scroll;
+      color: var(--ac-color);
+      outline: none;
+      background-color: var(--ac-bg-color);
+      border: 1px solid var(--ac-border-color);
+      border-radius: .6rem;
+      box-shadow: var(--ac-box-shadow);
+
+      &[hidden],
+      &:empty {
+        display: block;
+        opacity: 0;
+        transform: scale(0);
+      }
 
-      /* stylelint-disable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
-      > div {
+      li {
+        padding: 0;
+        margin: .3rem;
+        text-align: left;
+        list-style: none;
 
-        padding: .3rem .5rem;
-        background-color: var(--ac-list-item-bg);
-        border-radius: .35rem;
-        transition: all .2s ease;
+        /* stylelint-disable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
+        > div {
 
-        .badge {
-          color: #fff;
-          background-color: var(--ac-hover-color);
-        }
+          padding: .3rem .5rem;
+          background-color: var(--ac-list-item-bg);
+          border-radius: .35rem;
+          transition: all .2s ease;
 
-        &:hover {
-          cursor: pointer;
-          background-color: var(--ac-hover-color) !important;
-          &, .text-muted {
-            color: #fff !important;
-          }
           .badge {
-            color: var(--ac-hover-color) !important;
-            background-color: color-mix(in srgb, #fff 70%, transparent) !important;
+            color: #fff;
+            background-color: var(--ac-hover-color);
           }
 
-          mark {
-            border-color: currentColor;
+          &:hover {
+            cursor: pointer;
+            background-color: var(--ac-hover-color) !important;
+            &, .text-muted {
+              color: #fff !important;
+            }
+            .badge {
+              color: var(--ac-hover-color) !important;
+              background-color: color-mix(in srgb, #fff 70%, transparent) !important;
+            }
+
+            mark {
+              border-color: currentColor;
+            }
           }
-        }
 
-        &.alert-item{
+          &.alert-item{
 
 
-          &, .text-muted {
-            color: var(--text-muted) !important;
-          }
-          background-color: color-mix(in srgb, var(--ac-danger-color) 1%, transparent);
-          &:hover {
             &, .text-muted {
-              color: rgb(255 255 255) !important;
+              color: var(--text-muted) !important;
+            }
+            background-color: color-mix(in srgb, var(--ac-danger-color) 1%, transparent);
+            &:hover {
+              &, .text-muted {
+                color: rgb(255 255 255) !important;
+              }
             }
           }
-        }
 
-        mark {
-          padding: 0;
-          color: currentColor;
-          background-color: transparent;
-          border-bottom: 4px double var(--ac-danger-color);
+          mark {
+            padding: 0;
+            color: currentColor;
+            background-color: transparent;
+            border-bottom: 4px double var(--ac-danger-color);
 
-          /* stylelint-disable-next-line max-nesting-depth  selector-max-type */
-          /* &::selection {
+            /* stylelint-disable-next-line max-nesting-depth  selector-max-type */
+            /* &::selection {
             color: rgba(#ffffff, 0);
             background-color: rgba(#ffffff, 0);
           } */
+          }
         }
-      }
-      /* stylelint-enable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
+        /* stylelint-enable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
 
-      /* &[aria-selected='true'] {
+        /* &[aria-selected='true'] {
         background-color: var(--ada-grigio-2);
       } */
+      }
     }
-  }
 
-  .no-result {
-    padding: .4rem .6rem;
-    color: var(--ac-danger-color);
+    .no-result {
+      padding: .4rem .6rem;
+      color: var(--ac-danger-color);
+    }
   }
-}
 
 
-/* badge multiple select */
-.ac-badge {
-  margin: 0 .5rem .2rem 0;
-  font-size: .85rem;
-  line-height: 1;
-  white-space: nowrap;
+  /* badge multiple select */
+  .ac-badge {
+    margin: 0 .5rem .2rem 0;
+    font-size: .85rem;
+    line-height: 1;
+    white-space: nowrap;
+
+    &:has(.ac-badge-btn:hover) {
+      /* stylelint-disable-next-line declaration-no-important */
+      background-color: var(--ac-danger-color) !important;
+    }
+  }
+  .ac-badge-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-left: 4px;
+    font-size: 1.2em;
+    line-height: 1;
+    color: currentColor;
+    background-color: transparent;
+    border: none;
+    border-radius: 50%;
 
-  &:has(.ac-badge-btn:hover) {
-    /* stylelint-disable-next-line declaration-no-important */
-    background-color: var(--ac-danger-color) !important;
   }
-}
-.ac-badge-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin-left: 4px;
-  font-size: 1.2em;
-  line-height: 1;
-  color: currentColor;
-  background-color: transparent;
-  border: none;
-  border-radius: 50%;
 
 }

package/src/components/inner-nav/inner-nav.css

@@ -1,13 +1,17 @@
-/*! minimo - Inner Nav */
+@layer components {
 
-.inner-nav-main, .inner-nav {
-  display: flex;
-  gap: var(--inner-nav-gap);
-  justify-content: flex-end;
-  margin-block: var(--inner-nav-margin-block);
-  /* text-align: end; */
+  /*! minimo - Inner Nav */
 
-  @media print {
-    display: none;
+  .inner-nav-main, .inner-nav {
+    display: flex;
+    gap: var(--inner-nav-gap);
+    justify-content: flex-end;
+    margin-block: var(--inner-nav-margin-block);
+    /* text-align: end; */
+
+    @media print {
+      display: none;
+    }
   }
+
 }

package/src/components/modal-alert/modal-alert.module.css

@@ -1,199 +1,203 @@
-/*! minimo - Modal Alert */
-
-.malert {
-  width: 600px;
-  max-width: 90vw;
-  padding: 0;
-  margin: auto;
-  background-color: var(--malert-background-color);
-  border: none;
-  border-radius: var(--malert-border-radius);
-  box-shadow: var(--malert-box-shadow, var(--default-box-shadow));
-  /* box-shadow: 2px 2px 12px #000; */
-
-  &::backdrop {
-    overscroll-behavior: contain;
-    background-color: var(--malert-backdrop);
-  }
+@layer components {
+
+  /*! minimo - Modal Alert */
+
+  .malert {
+    width: 600px;
+    max-width: 90vw;
+    padding: 0;
+    margin: auto;
+    background-color: var(--malert-background-color);
+    border: none;
+    border-radius: var(--malert-border-radius);
+    box-shadow: var(--malert-box-shadow, var(--default-box-shadow));
+    /* box-shadow: 2px 2px 12px #000; */
+
+    &::backdrop {
+      overscroll-behavior: contain;
+      background-color: var(--malert-backdrop);
+    }
 
-  &, * {
-    box-sizing: border-box;
+    &, * {
+      box-sizing: border-box;
+    }
   }
-}
 
-.success {
-  --_malert-color-bg: var(--malert-success-bg);
-  --_malert-color-fg: var(--malert-success-fg);
-}
-.info {
-  --_malert-color-bg: var(--malert-info-bg);
-  --_malert-color-fg: var(--malert-info-fg);
-}
-.warning {
-  --_malert-color-bg: var(--malert-warning-bg);
-  --_malert-color-fg: var(--malert-warning-fg);
-}
-.error {
-  --_malert-color-bg: var(--malert-error-bg);
-  --_malert-color-fg: var(--malert-error-fg);
-}
-.confirm {
-  --_malert-color-bg: var(--malert-confirm-bg);
-  --_malert-color-fg: var(--malert-confirm-fg);
-}
+  .success {
+    --_malert-color-bg: var(--malert-success-bg);
+    --_malert-color-fg: var(--malert-success-fg);
+  }
+  .info {
+    --_malert-color-bg: var(--malert-info-bg);
+    --_malert-color-fg: var(--malert-info-fg);
+  }
+  .warning {
+    --_malert-color-bg: var(--malert-warning-bg);
+    --_malert-color-fg: var(--malert-warning-fg);
+  }
+  .error {
+    --_malert-color-bg: var(--malert-error-bg);
+    --_malert-color-fg: var(--malert-error-fg);
+  }
+  .confirm {
+    --_malert-color-bg: var(--malert-confirm-bg);
+    --_malert-color-fg: var(--malert-confirm-fg);
+  }
 
 
-.innerWrapper{
-  display: flex;
-  flex-flow: column nowrap;
-  /* gap: .7rem; */
-  align-items: stretch;
-  justify-content: flex-start;
+  .innerWrapper{
+    display: flex;
+    flex-flow: column nowrap;
+    /* gap: .7rem; */
+    align-items: stretch;
+    justify-content: flex-start;
 
-  @media screen and (min-width: 600px) {
-    flex-direction: row;
+    @media screen and (min-width: 600px) {
+      flex-direction: row;
+    }
   }
-}
 
 
-.mMark {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: .4rem;
-  background-color: var(--_malert-color-bg);
+  .mMark {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: .4rem;
+    background-color: var(--_malert-color-bg);
 
-  svg {
-    width: 100px;
-    aspect-ratio: 1;
-    background-color: transparent;
-    fill: var(--_malert-color-fg);
-  }
+    svg {
+      width: 100px;
+      aspect-ratio: 1;
+      background-color: transparent;
+      fill: var(--_malert-color-fg);
+    }
 
-  @media screen and (min-width: 600px) {
-    flex-direction: row;
-    align-items: flex-start;
-    width: auto;
-    padding: 1rem;
-    /* svg {
+    @media screen and (min-width: 600px) {
+      flex-direction: row;
+      align-items: flex-start;
+      width: auto;
+      padding: 1rem;
+      /* svg {
       width: 100px;
     } */
+    }
   }
-}
 
-.mBody {
-  display: flex;
-  flex: 1;
-  flex-flow: column nowrap;
-  gap: .5rem;
-  align-items: stretch;
-  justify-content: flex-start;
-  padding: .5rem;
+  .mBody {
+    display: flex;
+    flex: 1;
+    flex-flow: column nowrap;
+    gap: .5rem;
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: .5rem;
 
-  text-align: center;
+    text-align: center;
 
-  @media screen and (min-width: 600px) {
-    padding: 1rem;
-    text-align: left;
+    @media screen and (min-width: 600px) {
+      padding: 1rem;
+      text-align: left;
+    }
   }
-}
 
-.mHeading {
-  font-family: var(--malert-heading-font-family);
-  font-size: var(--malert-heading-font-size);
-  font-weight: var(--malert-heading-font-weight);
-  line-height: var(--malert-heading-line-height);
-}
-.mText {
-  font-family: var(--malert-text-font-family);
-  font-size: var(--malert-text-font-size);
-}
+  .mHeading {
+    font-family: var(--malert-heading-font-family);
+    font-size: var(--malert-heading-font-size);
+    font-weight: var(--malert-heading-font-weight);
+    line-height: var(--malert-heading-line-height);
+  }
+  .mText {
+    font-family: var(--malert-text-font-family);
+    font-size: var(--malert-text-font-size);
+  }
 
-.mBtns {
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 1rem;
-  align-items: center;
-  justify-content: flex-end;
+  .mBtns {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 1rem;
+    align-items: center;
+    justify-content: flex-end;
 
-  padding-top: 1rem;
-  margin-top: auto;
+    padding-top: 1rem;
+    margin-top: auto;
 
-  @media screen and (min-width: 600px) {
-    flex-direction: row-reverse;
-    justify-content: space-between;
+    @media screen and (min-width: 600px) {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
   }
-}
 
 
-.mAnimated {
-  transform: translateY(-500%);
-  animation: dialog-in .3s ease-out;
+  .mAnimated {
+    transform: translateY(-500%);
+    animation: dialog-in .3s ease-out;
 
-  &[open] {
-    transform: none;
+    &[open] {
+      transform: none;
+    }
   }
-}
 
-@keyframes dialog-in {
-  from {
-    opacity: 0;
-    transform: translateY(-50%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  @keyframes dialog-in {
+    from {
+      opacity: 0;
+      transform: translateY(-50%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-}
 
 
-/* confirm button */
+  /* confirm button */
 
 
-.btnConfirm {
-  --_button-bg-color: var(--malert-confirm-btn-bg);
-  --_button-fg-color: var(--malert-confirm-btn-fg);
-  --_button-border-color: var(--malert-confirm-btn-border-color);
+  .btnConfirm {
+    --_button-bg-color: var(--malert-confirm-btn-bg);
+    --_button-fg-color: var(--malert-confirm-btn-fg);
+    --_button-border-color: var(--malert-confirm-btn-border-color);
 
-  @media (hover: hover) {
-    &:hover {
-      --_button-bg-color: var(--malert-confirm-btn-hover-bg);
-      --_button-fg-color: var(--malert-confirm-btn-hover-fg);
-      --_button-border-color: var(--malert-confirm-btn-hover-border-color);
+    @media (hover: hover) {
+      &:hover {
+        --_button-bg-color: var(--malert-confirm-btn-hover-bg);
+        --_button-fg-color: var(--malert-confirm-btn-hover-fg);
+        --_button-border-color: var(--malert-confirm-btn-hover-border-color);
+      }
+    }
+    &:focus {
+      outline: none;
     }
-  }
-  &:focus {
-    outline: none;
-  }
 
-  &:focus-visible, &:active {
-    outline: var(--malert-confirm-btn-focus-outline-width) solid var(--malert-confirm-btn-focus-outline-color);
-    /* outline-offset: 4px; */
-  }
+    &:focus-visible, &:active {
+      outline: var(--malert-confirm-btn-focus-outline-width) solid var(--malert-confirm-btn-focus-outline-color);
+      /* outline-offset: 4px; */
+    }
 
-  &:active {
-    --_button-bg-color: var(--malert-confirm-btn-active-bg);
-    --_button-fg-color: var(--malert-confirm-btn-active-fg);
-    --_button-border-color: var(--malert-confirm-btn-active-border-color);
-  }
+    &:active {
+      --_button-bg-color: var(--malert-confirm-btn-active-bg);
+      --_button-fg-color: var(--malert-confirm-btn-active-fg);
+      --_button-border-color: var(--malert-confirm-btn-active-border-color);
+    }
 
 
-  &.btnHollow {
+    &.btnHollow {
 
-    --_button-bg-color: var(--malert-confirm-btn-hollow-bg);
-    --_button-fg-color: var(--malert-confirm-btn-hollow-fg);
-    /* --_button-border-color: var(--__btn-o-primary-border-color); */
+      --_button-bg-color: var(--malert-confirm-btn-hollow-bg);
+      --_button-fg-color: var(--malert-confirm-btn-hollow-fg);
+      /* --_button-border-color: var(--__btn-o-primary-border-color); */
 
 
-    @media (hover: hover) {
-      &:hover {
-        --_button-bg-color: var(--malert-confirm-btn-hollow-hover-bg);
-        --_button-fg-color: var(--malert-confirm-btn-hollow-hover-fg);
-        /* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
+      @media (hover: hover) {
+        &:hover {
+          --_button-bg-color: var(--malert-confirm-btn-hollow-hover-bg);
+          --_button-fg-color: var(--malert-confirm-btn-hollow-hover-fg);
+          /* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
+        }
       }
+
     }
 
-  }
+  } /* end btnConfirm */
 
-} /* end btnConfirm */
+}