@massimo-cassandro/minimo 1.20.16 → 1.21.1

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 */
+}

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

@@ -1,99 +1,103 @@
-/*! minimo - Modal Popup */
-
-.dialog {
-
-  position: fixed;
-
-  display: flex;
-  flex-direction: column;
-
-  width: var(--mpopup-width);
-  min-width: var(--mpopup-min-width);
-  max-width: var(--mpopup-max-width);
-  height: var(--mpopup-height);
-  min-height: var(--mpopup-min-height);
-  max-height: var(--mpopup-max-height);
-  padding: 0;
-  margin: auto;
-  overflow: visible;
-  background-color: var(--mpopup-background-color);
-  border: none;
-  border-radius: var(--mpopup-border-radius);
-  box-shadow: var(--mpopup-drop-shadow);
-  scale: 0;
-  transition: scale .2s ease-out;
-
-  &::backdrop {
-    overscroll-behavior: contain;
-    background-color: var(--mpopup-backdrop-color);
-  }
+@layer components {
+
+  /*! minimo - Modal Popup */
+
+  .dialog {
+
+    position: fixed;
+
+    display: flex;
+    flex-direction: column;
+
+    width: var(--mpopup-width);
+    min-width: var(--mpopup-min-width);
+    max-width: var(--mpopup-max-width);
+    height: var(--mpopup-height);
+    min-height: var(--mpopup-min-height);
+    max-height: var(--mpopup-max-height);
+    padding: 0;
+    margin: auto;
+    overflow: visible;
+    background-color: var(--mpopup-background-color);
+    border: none;
+    border-radius: var(--mpopup-border-radius);
+    box-shadow: var(--mpopup-drop-shadow);
+    scale: 0;
+    transition: scale .2s ease-out;
+
+    &::backdrop {
+      overscroll-behavior: contain;
+      background-color: var(--mpopup-backdrop-color);
+    }
+
+    &.on {
+      scale: 1;
+    }
 
-  &.on {
-    scale: 1;
   }
 
-}
+  .closeButton  {
 
-.closeButton  {
-
-  position: absolute;
-  top: calc(-1 * var(--mpopup-btn-close-size) / 3);
-  right: calc(-1 * var(--mpopup-btn-close-size) / 3);
-}
+    position: absolute;
+    top: calc(-1 * var(--mpopup-btn-close-size) / 3);
+    right: calc(-1 * var(--mpopup-btn-close-size) / 3);
+  }
 
-.contentWrapper {
-  display: flex;
-  flex: 1;
-  flex-flow: column nowrap;
-  gap: 0;
-  align-items: stretch;
-  justify-content: flex-start;
-  min-height: 0;
-}
+  .contentWrapper {
+    display: flex;
+    flex: 1;
+    flex-flow: column nowrap;
+    gap: 0;
+    align-items: stretch;
+    justify-content: flex-start;
+    min-height: 0;
+  }
 
 
-.content {
-  flex: 1;
-  /* width: 100%;
+  .content {
+    flex: 1;
+    /* width: 100%;
   height: 100%; */
-  min-height: 0;
-  padding: var(--mpopup-content-padding);
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-
-  .scrollBarPadding & {
-    padding-inline-end: var(--mpopup-content-scrollbar-padding-i-end);
-  }
+    min-height: 0;
+    padding: var(--mpopup-content-padding);
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
 
-}
+    .scrollBarPadding & {
+      padding-inline-end: var(--mpopup-content-scrollbar-padding-i-end);
+    }
 
-.iframe {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  overscroll-behavior: contain;
-  border: none;
-}
+  }
 
-.header {
-  padding: var(--mpopup-header-padding);
-  font-size: var(--mpopup-header-font-size);
-  color: var(--mpopup-header-color);
-  background-color: var(--mpopup-header-background-color);
-  border-radius: var(--mpopup-border-radius) var(--mpopup-border-radius) 0 0;
-}
-.footer {
-  padding: var(--mpopup-footer-padding);
-  font-size: var(--mpopup-footer-font-size);
-  color: var(--mpopup-footer-color);
-  background-color: var(--mpopup-footer-background-color);
-  border-radius: 0 0 var(--mpopup-border-radius) var(--mpopup-border-radius);
-}
+  .iframe {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overscroll-behavior: contain;
+    border: none;
+  }
 
-.header, .footer {
-  * {
-    color: inherit;
+  .header {
+    padding: var(--mpopup-header-padding);
+    font-size: var(--mpopup-header-font-size);
+    color: var(--mpopup-header-color);
+    background-color: var(--mpopup-header-background-color);
+    border-radius: var(--mpopup-border-radius) var(--mpopup-border-radius) 0 0;
+  }
+  .footer {
+    padding: var(--mpopup-footer-padding);
+    font-size: var(--mpopup-footer-font-size);
+    color: var(--mpopup-footer-color);
+    background-color: var(--mpopup-footer-background-color);
+    border-radius: 0 0 var(--mpopup-border-radius) var(--mpopup-border-radius);
   }
+
+  .header, .footer {
+    * {
+      color: inherit;
+    }
+  }
+
 }

package/src/components/overlay/overlay.css

@@ -1,12 +1,16 @@
-/*! minimo - Overlay */
+@layer components {
+
+  /*! minimo - Overlay */
+
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-index-overlay);
+    pointer-events: none;
+    background-color: color-mix(in srgb, var(--text-color) 20%, transparent);
+  }
+  .overlay-inverted {
+    background-color: color-mix(in srgb, var(--body-background-color) 50%, transparent);
+  }
 
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-index-overlay);
-  pointer-events: none;
-  background-color: color-mix(in srgb, var(--text-color) 20%, transparent);
-}
-.overlay-inverted {
-  background-color: color-mix(in srgb, var(--body-background-color) 50%, transparent);
 }