@massimo-cassandro/minimo 0.1.11 → 0.2.0

package/src/css/buttons/buttons.css

@@ -5,23 +5,25 @@ outline btns: primary/secondary + fondo body bg o trasparente
 
 */
 
-button, [role='button'] {
+button, [role='button'], .btn {
   cursor: pointer;
 }
 
+button svg {
+  pointer-events: none; /* fa sì che le icone non intercettano il click destinata ai pulsanti */
+}
+
 .btn-reset, .btn-link, .btn-close {
-  &, &.btn { /* nel caso venga anche assegnata la classe `btn`, non necessaria */
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    border: none;
-    box-shadow: none;
-  }
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
 }
 
 a.btn {
   &, &:hover, &:active, &:focus, &:visited {
-    color: var(--btn-fg-color);
+    color: var(--_button-fg-color);
     text-decoration: none;
   }
 }
@@ -29,22 +31,24 @@ a.btn {
 .btn {
 
   display: inline-block;
-  padding: var(--form-btns-padding-y) var(--form-btns-padding-x);
-  font-size: var(--form-btns-font-size);
-  color: var(--btn-fg-color);
+  padding: var(--btn-padding-block) var(--btn-padding-inline);
+  font-size: var(--btn-font-size);
+  font-style: var(--btn-font-style);
+  font-weight: var(--btn-font-weight);
+  color: var(--_button-fg-color);
   text-align: center;
   text-decoration: none;
-  background: var(--btn-bg-color);
-  border: 1px solid var(--btn-border-color);
-  border-radius: var(--form-btns-border-radius);
+  background: var(--_button-bg-color);
+  border: var(--btn-border-width) solid var(--_button-border-color);
+  border-radius: var(--btn-border-radius);
   box-shadow: none;
 
   &[disabled] {
     font-style: italic;
     pointer-events: none;
     cursor: not-allowed;
+    opacity: var(--btn-disabled-opacity);
     filter: grayscale(60%);
-    opacity: var(--form-disabled-opacity);
   }
 
   svg {
@@ -53,9 +57,8 @@ a.btn {
   }
 
   &.btn-sm {
-    --form-btns-padding-x: var(--form-btns-sm-padding-x);
-    --form-btns-padding-y: var(--form-btns-sm-padding-y);
-    font-size: var(--form-btns-sm-font-size);
+    padding: var(--btn-sm-padding-block) var(--btn-sm-padding-inline);
+    font-size: var(--btn-sm-font-size);
 
     svg {
       width: 1.5em;
@@ -63,116 +66,130 @@ a.btn {
   }
 
   &.btn-lg {
-    --form-btns-padding-x: 1.5rem;
-    --form-btns-padding-y: .6rem;
-    font-size: var(--font-size-lg);
+    padding: var(--btn-lg-padding-block) var(--btn-lg-padding-inline);
+    font-size: var(--btn-lg-font-size);
 
     svg {
       width: 1.5em;
     }
   }
 
+  &.btn-xl {
+    padding: var(--btn-xl-padding-block) var(--btn-xl-padding-inline);
+    font-size: var(--btn-xl-font-size);
+    --_focus-ring-size: 6px;
+  }
+
+  &.btn-hollow {
+    border-width: var(--btn-hollow-border-width);
+  }
+
 
   &.btn-primary {
-    --btn-bg-color: var(--btn-primary-bg-color);
-    --btn-fg-color: var(--btn-primary-fg-color);
-    --btn-border-color: var(--btn-primary-border-color);
+    --_button-bg-color: var(--btn-primary-background-color);
+    --_button-fg-color: var(--btn-primary-color);
+    --_button-border-color: var(--btn-primary-border-color);
 
-    @media (--mouse) {
+    @media (hover: hover) {
       &:hover {
-        --btn-bg-color: var(--btn-primary-hover-bg-color);
-        --btn-fg-color: var(--btn-primary-hover-fg-color);
-        --btn-border-color: var(--btn-primary-hover-border-color);
+        --_button-bg-color: var(--btn-primary-hover-background-color);
+        --_button-fg-color: var(--btn-primary-hover-color);
+        --_button-border-color: var(--btn-primary-hover-border-color);
       }
     }
 
     &:focus, &:active {
-      outline: var(--form-btns-outline-width) solid var(--btn-primary-focus-outline-color);
+      outline: var(--btn-focus-outline-width) solid var(--btn-primary-focus-outline-color);
       /* outline-offset: 4px; */
     }
 
     &:active {
-      --btn-bg-color: var(--btn-primary-active-bg-color);
-      --btn-fg-color: var(--btn-primary-active-fg-color);
-      --btn-border-color: var(--btn-primary-active-border-color);
+      --_button-bg-color: var(--btn-primary-active-background-color);
+      --_button-fg-color: var(--btn-primary-active-color);
+      --_button-border-color: var(--btn-primary-active-border-color);
     }
-  }
 
-  &.btn-secondary {
-    --btn-bg-color: var(--btn-secondary-bg-color);
-    --btn-fg-color: var(--btn-secondary-fg-color);
-    --btn-border-color: var(--btn-secondary-border-color);
 
-    @media (--mouse) {
-      &:hover {
-        --btn-bg-color: var(--btn-secondary-hover-bg-color);
-        --btn-fg-color: var(--btn-secondary-hover-fg-color);
-        --btn-border-color: var(--btn-secondary-hover-border-color);
-      }
-    }
+    &.btn-hollow {
 
-    &:focus, &:active {
-      outline: var(--form-btns-outline-width) solid var(--btn-secondary-focus-outline-color);
-      /* outline-offset: 4px; */
-    }
+      --_button-bg-color: var(--btn-primary-hollow-background-color);
+      --_button-fg-color: var(--btn-primary-hollow-color);
+      /* --_button-border-color: var(--__btn-o-primary-border-color); */
 
-    &:active {
-      --btn-bg-color: var(--btn-secondary-active-bg-color);
-      --btn-fg-color: var(--btn-secondary-active-fg-color);
-      --btn-border-color: var(--btn-secondary-active-border-color);
-    }
 
+      @media (hover: hover) {
+        &:hover {
+          --_button-bg-color: var(--btn-primary-hollow-hover-background-color);
+          --_button-fg-color: var(--btn-primary-hollow-hover-color);
+          /* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
+        }
+      }
+
+      /* &:focus, &:active {
+        outline: var(--__btn-focus-outline-width) solid var(--__btn-o-primary-focus-outline-color);
+      }
 
-  }
+      &:active {
+        --_button-bg-color: var(--__btn-o-primary-active-bg-color);
+        --_button-fg-color: var(--__btn-o-primary-active-fg-color);
+        --_button-border-color: var(--__btn-o-primary-active-border-color);
+      } */
 
-  &.btn-outline-primary {
-    --btn-bg-color: var(--btn-o-primary-bg-color);
-    --btn-fg-color: var(--btn-o-primary-fg-color);
-    --btn-border-color: var(--btn-o-primary-border-color);
+    } /* end .btn-primary,btn-hollow */
+  
+  } /* end btn-primary */
+
+  &.btn-secondary {
+    --_button-bg-color: var(--btn-secondary-background-color));
+    --_button-fg-color: var(--btn-secondary-color);
+    --_button-border-color: var(--btn-secondary-border-color);
 
-    @media (--mouse) {
+    @media (hover: hover) {
       &:hover {
-        --btn-bg-color: var(--btn-o-primary-hover-bg-color);
-        --btn-fg-color: var(--btn-o-primary-hover-fg-color);
-        --btn-border-color: var(--btn-o-primary-hover-border-color);
+        --_button-bg-color: var(--btn-secondary-hover-bg-color);
+        --_button-fg-color: var(--btn-secondary-hover-fg-color);
+        --_button-border-color: var(--btn-secondary-hover-border-color);
       }
     }
 
     &:focus, &:active {
-      outline: var(--form-btns-outline-width) solid var(--btn-o-primary-focus-outline-color);
+      outline: var(--btn-focus-outline-width) solid var(--btn-secondary-focus-outline-color);
+      /* outline-offset: 4px; */
     }
 
     &:active {
-      --btn-bg-color: var(--btn-o-primary-active-bg-color);
-      --btn-fg-color: var(--btn-o-primary-active-fg-color);
-      --btn-border-color: var(--btn-o-primary-active-border-color);
+      --_button-bg-color: var(--btn-secondary-active-bg-color);
+      --_button-fg-color: var(--btn-secondary-active-fg-color);
+      --_button-border-color: var(--btn-secondary-active-border-color);
     }
-  }
 
+    &.btn-hollow {
 
-  &.btn-outline-secondary {
-    --btn-bg-color: var(--btn-o-secondary-bg-color);
-    --btn-fg-color: var(--btn-o-secondary-fg-color);
-    --btn-border-color: var(--btn-o-secondary-border-color);
+      /* --_button-bg-color: var(--btn-o-secondary-bg-color);
+      --_button-fg-color: var(--btn-o-secondary-fg-color);
+      --_button-border-color: var(--btn-o-secondary-border-color);
 
-    @media (--mouse) {
-      &:hover {
-        --btn-bg-color: var(--btn-o-secondary-hover-bg-color);
-        --btn-fg-color: var(--btn-o-secondary-hover-fg-color);
-        --btn-border-color: var(--btn-o-secondary-hover-border-color);
+      @media (hover: hover) {
+        &:hover {
+          --_button-bg-color: var(--btn-o-secondary-hover-bg-color);
+          --_button-fg-color: var(--btn-o-secondary-hover-fg-color);
+          --_button-border-color: var(--btn-o-secondary-hover-border-color);
+        }
       }
-    }
 
-    &:focus, &:active {
-      outline: var(--form-btns-outline-width) solid var(--btn-o-secondary-focus-outline-color);
-    }
+      &:focus, &:active {
+        outline: var(--btn-focus-outline-width) solid var(--btn-o-secondary-focus-outline-color);
+      }
 
-    &:active {
-      --btn-bg-color: var(--btn-o-secondary-active-bg-color);
-      --btn-fg-color: var(--btn-o-secondary-active-fg-color);
-      --btn-border-color: var(--btn-o-secondary-active-border-color);
-    }
-  }
+      &:active {
+        --_button-bg-color: var(--btn-o-secondary-active-bg-color);
+        --_button-fg-color: var(--btn-o-secondary-active-fg-color);
+        --_button-border-color: var(--btn-o-secondary-active-border-color);
+      } */
+
+    } /* end .btn-secondary,btn-hollow */
+
+  } /* end btn-secondary */
 
   &.btn-icon {
     display: inline-flex;
@@ -180,9 +197,7 @@ a.btn {
     gap: 1rem;
     align-items: center;
     justify-content: space-between;
-    padding-inline-start: calc(var(--form-btns-padding-x) * 1.5);
+    padding-inline-start: calc(var(--form-control-padding-inline) * 1.5);
     text-align: start;
   }
 }
-
-

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

@@ -1,69 +1,69 @@
 .btn {
 
   &.btn-success {
-    --bg: var(--status-success-color);
-    --fg: var(--status-success-fg-color);
-    --btn-bg-color: var(--bg);
-    --btn-fg-color: var(--fg);
-    --btn-border-color: var(--status-success-border-color);
+    --_bg: var(--status-success-color);
+    --_fg: var(--status-success-fg-color);
+    --_btn-bg-color: var(--_bg);
+    --_btn-fg-color: var(--_fg);
+    --_btn-border-color: var(--status-success-border-color);
   }
   &.btn-info {
-    --bg: var(--status-info-color);
-    --fg: var(--status-info-fg-color);
-    --btn-bg-color: var(--bg);
-    --btn-fg-color: var(--fg);
-    --btn-border-color: var(--status-info-border-color);
+    --_bg: var(--status-info-color);
+    --_fg: var(--status-info-fg-color);
+    --_btn-bg-color: var(--_bg);
+    --_btn-fg-color: var(--_fg);
+    --_btn-border-color: var(--status-info-border-color);
   }
   &.btn-danger, &.btn-error {
-    --bg: var(--status-danger-color);
-    --fg: var(--status-danger-fg-color);
-    --btn-bg-color: var(--bg);
-    --btn-fg-color: var(--fg);
-    --btn-border-color: var(--status-danger-border-color);
+    --_bg: var(--status-danger-color);
+    --_fg: var(--status-danger-fg-color);
+    --_btn-bg-color: var(--_bg);
+    --_btn-fg-color: var(--_fg);
+    --_btn-border-color: var(--status-danger-border-color);
   }
 
 
   &.btn-warning {
-    --bg: var(--status-warning-color);
-    --fg: var(--status-warning-fg-color);
-    --btn-bg-color: var(--bg);
-    --btn-fg-color: var(--fg);
-    --btn-border-color: var(--status-warning-border-color);
+    --_bg: var(--status-warning-color);
+    --_fg: var(--status-warning-fg-color);
+    --_btn-bg-color: var(--_bg);
+    --_btn-fg-color: var(--_fg);
+    --_btn-border-color: var(--status-warning-border-color);
 
-    @media (--mouse) {
+    @media (hover: hover) {
       &:hover {
-        --btn-bg-color: color-mix(in srgb, var(--bg) 60%, transparent);
-        --btn-fg-color: var(--fg);
-        --btn-border-color: var(--fg);
+        --_btn-bg-color: color-mix(in srgb, var(--_bg) 60%, transparent);
+        --_btn-fg-color: var(--_fg);
+        --_btn-border-color: var(--_fg);
       }
     }
 
     &:focus, &:active {
-      outline: var(--form-btns-outline-width) solid color-mix(in srgb, var(--bg) 60%, transparent);
+      outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_bg) 60%, transparent);
     }
 
     &:active {
-      --btn-bg-color: color-mix(in srgb, var(--bg) 30%, transparent);
+      --_btn-bg-color: color-mix(in srgb, var(--_bg) 30%, transparent);
     }
   }
 
 
   &.btn-success, &.btn-info, &.btn-danger  {
 
-    @media (--mouse) {
+    @media (hover: hover) {
       &:hover {
-        --btn-bg-color: color-mix(in srgb, var(--bg) 30%, transparent);
-        --btn-fg-color: var(--bg);
-        --btn-border-color: var(--bg);
+        --_btn-bg-color: color-mix(in srgb, var(--_bg) 30%, transparent);
+        --_btn-fg-color: var(--_bg);
+        --_btn-border-color: var(--_bg);
       }
     }
 
     &:focus, &:active {
-      outline: var(--form-btns-outline-width) solid color-mix(in srgb, var(--bg) 40%, transparent);
+      outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_bg) 40%, transparent);
     }
 
     &:active {
-      --btn-bg-color: color-mix(in srgb, var(--bg) 10%, transparent);
+      --_btn-bg-color: color-mix(in srgb, var(--_bg) 10%, transparent);
     }
   }
 
@@ -72,22 +72,22 @@
 
     &.btn-success, &.btn-info, &.btn-danger {
 
-      @media (--mouse) {
+      @media (hover: hover) {
         &:hover {
-          --btn-bg-color: color-mix(in srgb, var(--bg) 60%, #fff);
-          --btn-fg-color: var(--bg);
-          --btn-border-color: color-mix(in srgb, var(--bg) 40%, #fff);
+          --_btn-bg-color: color-mix(in srgb, var(--_bg) 60%, #fff);
+          --_btn-fg-color: var(--_bg);
+          --_btn-border-color: color-mix(in srgb, var(--_bg) 40%, #fff);
         }
       }
     }
 
     &.btn-warning {
 
-      @media (--mouse) {
+      @media (hover: hover) {
         &:hover {
-          --btn-bg-color: color-mix(in srgb, var(--bg) 60%, #fff);
-          --btn-fg-color: var(--fg);
-          --btn-border-color: var(--fg);
+          --_btn-bg-color: color-mix(in srgb, var(--_bg) 60%, #fff);
+          --_btn-fg-color: var(--_fg);
+          --_btn-border-color: var(--_fg);
         }
       }
     }
@@ -95,12 +95,12 @@
     &.btn-success, &.btn-info, &.btn-danger, &.btn-warning {
 
       &:focus, &:active {
-        outline: var(--form-btns-outline-width) solid color-mix(in srgb, var(--bg) 60%, transparent);
+        outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_bg) 60%, transparent);
       }
 
       &:active {
-        --btn-bg-color: color-mix(in srgb, var(--bg) 30%, transparent);
-        --btn-fg-color: var(--text-color);
+        --_btn-bg-color: color-mix(in srgb, var(--_bg) 30%, transparent);
+        --_btn-fg-color: var(--text-color);
       }
     }
   }

package/src/css/container.css

@@ -1,15 +1,6 @@
-
-
 .container {
-
   width: 100%;
-  max-width: var(--container-max-width);
-  padding-inline-start: var(--spacing-lg);
-  padding-inline-end: var(--spacing-lg);
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-
-  /* @media (--xl-n-above) {} */
+  max-width: var(--layout-container-max-width);
+  padding-inline: var(--size-lg);
+  margin-inline: auto;
 }
-
-

package/src/css/details.css

@@ -1,7 +1,7 @@
 details {
   ::marker {
     font-size: .9em;
-    color: var(--stone-7);
+    color: var(--text-color);
   }
 }
 

package/src/css/dialog-content.css

@@ -5,7 +5,7 @@
   height: 90dvh;
   padding: 1rem;
   margin: auto;
-  background-color: var(--body-bg);
+  background-color: var(--body-background-color);
   border: none;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-4);
@@ -36,7 +36,7 @@
     width: 2rem;
     aspect-ratio: 1;
     padding: 4px;
-    background-color: var(--body-bg);
+    background-color: var(--body-background-color);
     border: 1px solid var(--gray-4);
     border-radius: 50%;
     box-shadow: var(--shadow-3);

package/src/css/flex.css

@@ -28,3 +28,12 @@
   }
 
 }
+
+/* utilizzata anche da grid */
+
+.align-self-center {
+  align-self: center;
+}
+.align-self-end {
+  align-self: end;
+}

package/src/css/forms/fieldset.css

@@ -0,0 +1,75 @@
+
+/* TODO da verificare
+fieldset.form-group, fieldset.form-collection-fset {
+
+  &, legend {
+    padding: 0;
+    background: transparent;
+    border: none;
+  }
+
+  legend {
+    position: static;
+    text-transform: none;
+  }
+
+  .form-check {
+    label {
+      font-weight: var(--font-weight-regular);
+    }
+  }
+
+}
+*/
+
+
+.fieldset { /* :not(.fupl-wrapper):not(.form-group):not(.form-collection-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 {
+    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-fieldset-legend-color);
+    background-color: var(--form-fieldset-legend-background-color);
+    border-radius: var(--btn-border-radius) var(--btn-border-radius) var(--btn-border-radius) 0;
+  }
+
+
+  .fieldset { /* :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);
+    }
+  }
+
+  &[disabled] {
+    font-style: italic;
+    opacity: .6;
+  }
+}

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

@@ -0,0 +1,18 @@
+
+.form-group {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: var(--size-xxs);
+  align-content: flex-start; /* multiline container */
+  align-items: flex-start;
+  justify-content: stretch;
+  padding-block: var(--form-group-padding-block);
+
+  &:has(textarea) {
+    height: 100%;
+  }
+
+  .grid & {
+    padding-block-end: 0;
+  }
+}

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

@@ -0,0 +1,32 @@
+/*
+<div class="form-end">
+
+  <button ...>Registra</button>
+
+  <div class="form-user-info" title="Ultima modifica effettuata da Gino Bianchi il xxxx">
+    [icon]
+    <span>13 Aug 2025 <small>11:54</small></span>
+    <span>Gino Bianchi</span>
+  </div>
+</div>
+*/
+
+.form-end {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--size-base);
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  margin-block: var(--form-end-margin-block-start) var(--form-end-margin-block-end);
+}
+
+.form-user-info {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--size-xs);
+  align-items: center;
+  justify-content: flex-end;
+  font-size: var(--form-user-info-font-size);
+  color: var(--form-user-info-color);
+}