@massimo-cassandro/minimo 1.20.16 → 1.21.1

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

@@ -1,18 +1,22 @@
+@layer base {
 
-.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) {
+  .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;
+    .grid & {
+      padding-block-end: 0;
+    }
   }
+
 }

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

@@ -1,7 +1,9 @@
+@layer base {
 
-/* blocco finale con le info sull'utente che h salvato il form */
 
-/*
+  /* blocco finale con le info sull'utente che h salvato il form */
+
+  /*
 <div class="form-end">
 
   <button ...>Registra</button>
@@ -14,31 +16,33 @@
 </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);
-}
-
-
-/* ---------------------------------------------------------------- */
-/* testo di aiuto sotto il controllo */
+  .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);
+  }
+
+
+  /* ---------------------------------------------------------------- */
+  /* testo di aiuto sotto il controllo */
+
+  .form-help-text {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+  }
 
-.form-help-text {
-  font-size: var(--font-size-xs);
-  color: var(--text-muted);
 }

package/src/css/forms/forms.css

@@ -1,164 +1,166 @@
-/* TODO separare? */
-/* TODO serie di gruppi radio o checkbox */
-/* TODO multiselect */
-/* TODO classe grid specifica per i form ?? (.form-grid?) */
-/* TODO customizable select */
-/* TODO form-check: rifare come flex, separare? */
-/* TODO abbreviare prefisso  */
-
-.form-group:has([required]):not(:has([disabled])) {
-
-  /* `>` excludes labels within form-collections  */
-  > .form-label {
-    position: relative;
-    padding-inline-start: var(--form-control-required-label-padding-inline-start);
-    &::before {
-      position: absolute;
-      top: var(--form-control-required-flag-top);
-      left: var(--form-control-required-flag-left);
-      display: inline-block;
-      font-size: var(--form-control-required-flag-font-size);
-      color: var(--form-control-required-flag-color);
-      content: var(--form-control-required-flag-content);
+@layer base {
+
+  /* TODO separare? */
+  /* TODO serie di gruppi radio o checkbox */
+  /* TODO multiselect */
+  /* TODO classe grid specifica per i form ?? (.form-grid?) */
+  /* TODO customizable select */
+  /* TODO form-check: rifare come flex, separare? */
+  /* TODO abbreviare prefisso  */
+
+  .form-group:has([required]):not(:has([disabled])) {
+
+    /* `>` excludes labels within form-collections  */
+    > .form-label {
+      position: relative;
+      padding-inline-start: var(--form-control-required-label-padding-inline-start);
+      &::before {
+        position: absolute;
+        top: var(--form-control-required-flag-top);
+        left: var(--form-control-required-flag-left);
+        display: inline-block;
+        font-size: var(--form-control-required-flag-font-size);
+        color: var(--form-control-required-flag-color);
+        content: var(--form-control-required-flag-content);
+      }
     }
   }
-}
 
-/* single checkbozes and radios are centered */
-.form-group:not(.form-collection-fset):has(.form-check:not(.form-check-top-label)) {
-  align-self: center;
-  .form-check {
-    margin-block-start: 0;
+  /* single checkbozes and radios are centered */
+  .form-group:not(.form-collection-fset):has(.form-check:not(.form-check-top-label)) {
+    align-self: center;
+    .form-check {
+      margin-block-start: 0;
+    }
   }
-}
 
-.form-label {
-  display: block;
-  font-size: var(--form-label-font-size);
-  font-weight: var(--form-label-font-weight);
-  color: var(--form-label-color);
-}
+  .form-label {
+    display: block;
+    font-size: var(--form-label-font-size);
+    font-weight: var(--form-label-font-weight);
+    color: var(--form-label-color);
+  }
 
 
-.form-control, .form-control-static {
-  display: block;
-  width: 100%;
-  padding: var(--form-control-padding-block) var(--form-control-padding-inline);
-  font-family: var(--font-family);
-  font-size: var(--form-control-font-size);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--form-control-line-height);
-  color: var(--form-control-text-color);
-  background-color: var(--form-control-background-color);
-  border: var(--form-control-border-width) var(--form-control-border-style) var(--form-control-border-color);
-  border-radius: var(--form-control-border-radius);
-
-  &:focus {
-    outline: none;
-  }
+  .form-control, .form-control-static {
+    display: block;
+    width: 100%;
+    padding: var(--form-control-padding-block) var(--form-control-padding-inline);
+    font-family: var(--font-family);
+    font-size: var(--form-control-font-size);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--form-control-line-height);
+    color: var(--form-control-text-color);
+    background-color: var(--form-control-background-color);
+    border: var(--form-control-border-width) var(--form-control-border-style) var(--form-control-border-color);
+    border-radius: var(--form-control-border-radius);
+
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible {
-    outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
-    outline-offset: var(--form-control-focus-outline-offset);
-  }
+    &:focus-visible {
+      outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
+      outline-offset: var(--form-control-focus-outline-offset);
+    }
 
 
-  &::placeholder {
-    font-size: var(--form-control-placeholder-font-size, var(--form-control-font-size));
-    font-style: var(--form-control-placeholder-font-style, italic);
-    color: var(--form-control-placeholder-color);
-    opacity: var(--form-control-placeholder-opacity, .8);
-  }
+    &::placeholder {
+      font-size: var(--form-control-placeholder-font-size, var(--form-control-font-size));
+      font-style: var(--form-control-placeholder-font-style, italic);
+      color: var(--form-control-placeholder-color);
+      opacity: var(--form-control-placeholder-opacity, .8);
+    }
 
-  &.form-control-sm {
-    padding: var(--form-control-sm-padding-block) var(--form-control-sm-padding-inline);
-    font-size: var(--form-control-sm-font-size);
+    &.form-control-sm {
+      padding: var(--form-control-sm-padding-block) var(--form-control-sm-padding-inline);
+      font-size: var(--form-control-sm-font-size);
+    }
   }
-}
 
-.form-control-static {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--form-control-static-color);
-  white-space: nowrap;
-  cursor: not-allowed;
-  background-color: var(--form-control-static-background-color);
-
-  &.no-border {
-    padding: calc(var(--form-control-padding-block) + var(--form-control-border-width)) 0;
-    border: none;
+  .form-control-static {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--form-control-static-color);
+    white-space: nowrap;
+    cursor: not-allowed;
+    background-color: var(--form-control-static-background-color);
+
+    &.no-border {
+      padding: calc(var(--form-control-padding-block) + var(--form-control-border-width)) 0;
+      border: none;
+    }
   }
-}
 
-/* da bootstrap */
-select.form-control {
+  /* da bootstrap */
+  select.form-control {
 
-  --_trigger-icon-padding-right: calc(var(--form-control-padding-inline) * 2);
-  --_bg-img-inline-size: 16px;
+    --_trigger-icon-padding-right: calc(var(--form-control-padding-inline) * 2);
+    --_bg-img-inline-size: 16px;
 
-  padding: var(--form-control-padding-block) var(--_trigger-icon-padding-right) var(--form-control-padding-block) var(--form-control-padding-inline);
-  appearance: none;
-  background-image: var(--form-control-select-trigger-icon);
-  background-repeat: no-repeat;
-  background-position: right calc(var(--_trigger-icon-padding-right) - var(--_bg-img-inline-size) - 2px) center;
-  background-size: var(--_bg-img-inline-size) 12px;
+    padding: var(--form-control-padding-block) var(--_trigger-icon-padding-right) var(--form-control-padding-block) var(--form-control-padding-inline);
+    appearance: none;
+    background-image: var(--form-control-select-trigger-icon);
+    background-repeat: no-repeat;
+    background-position: right calc(var(--_trigger-icon-padding-right) - var(--_bg-img-inline-size) - 2px) center;
+    background-size: var(--_bg-img-inline-size) 12px;
 
-  &[multiple],
-  &[size]:not([size='1']) {
-    padding-right: var(--form-control-padding-inline);
-    background-image: none;
+    &[multiple],
+    &[size]:not([size='1']) {
+      padding-right: var(--form-control-padding-inline);
+      background-image: none;
+    }
+
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 var(--form-control-text-color);
+    }
   }
 
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 var(--form-control-text-color);
+  input[type='checkbox'] {
+    color: var(--form-control-text-color);
+    accent-color: var(--accent);
+    transform-origin: center;
+    scale: 1.3;
   }
-}
 
-input[type='checkbox'] {
-  color: var(--form-control-text-color);
-  accent-color: var(--accent);
-  transform-origin: center;
-  scale: 1.3;
-}
+  /* da bs5 */
+  /* versione con label a destra */
+  /* TODO rivedere. sostituire float con flex? */
+  /* TODO eliminare necessità di stare dentro un `.form-group` */
+  /* TODO aggiungere esempi di uso */
+  .form-check {
+    display: block;
+    padding-left: 1.5em;
+    margin-block-start: var(--size-sm);
 
-/* da bs5 */
-/* versione con label a destra */
-/* TODO rivedere. sostituire float con flex? */
-/* TODO eliminare necessità di stare dentro un `.form-group` */
-/* TODO aggiungere esempi di uso */
-.form-check {
-  display: block;
-  padding-left: 1.5em;
-  margin-block-start: var(--size-sm);
-
-  .form-check-input {
-    float: left;
-    display: inline-block;
-    width: auto;
-    margin: 4px 0 0 -1.5em;
+    .form-check-input {
+      float: left;
+      display: inline-block;
+      width: auto;
+      margin: 4px 0 0 -1.5em;
+    }
   }
-}
 
-/* fix per safari */
-/* https://8yd.no/article/date-input-height-in-safari */
-input::-webkit-datetime-edit {
-  padding: 0;
-  margin-block-end: -2px;
-  line-height: 1;
-}
-input::-webkit-calendar-picker-trigger-icon { /* solo in chromium, non in safari */
-  margin: 2px 0;
-}
+  /* fix per safari */
+  /* https://8yd.no/article/date-input-height-in-safari */
+  input::-webkit-datetime-edit {
+    padding: 0;
+    margin-block-end: -2px;
+    line-height: 1;
+  }
+  input::-webkit-calendar-picker-trigger-icon { /* solo in chromium, non in safari */
+    margin: 2px 0;
+  }
 
 
-textarea.form-control {
-  flex: 1;
-  min-height: calc(3.5lh + var(--form-control-padding-block) * 2);
+  textarea.form-control {
+    flex: 1;
+    min-height: calc(3.5lh + var(--form-control-padding-block) * 2);
 
-  &.autosize {
-    field-sizing: content;
+    &.autosize {
+      field-sizing: content;
+    }
   }
-}
-
 
+}

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

@@ -1,55 +1,59 @@
+@layer base {
+
+
+  /* da bs5 */
+  .input-group {
+    position: relative;
+    display: flex;
+    gap: 0;
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+
+    > .form-control {
+      z-index: 2;
+      flex: 1;
+      border-inline-end: none;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
-/* da bs5 */
-.input-group {
-  position: relative;
-  display: flex;
-  gap: 0;
-  align-items: stretch;
-  justify-content: center;
-  width: 100%;
-
-  > .form-control {
-    z-index: 2;
-    flex: 1;
-    border-inline-end: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
 
+    > .input-group-text {
+      padding: var(--form-control-padding-block) var(--form-control-padding-inline);
+      font-size: var(--btn-font-size);
+      background-color: var(--form-input-group-background-color);
+      border: 1px solid var(--form-control-border-color);
+      border-radius: var(--form-control-border-radius);
+    }
 
-  > .input-group-text {
-    padding: var(--form-control-padding-block) var(--form-control-padding-inline);
-    font-size: var(--btn-font-size);
-    background-color: var(--form-input-group-background-color);
-    border: 1px solid var(--form-control-border-color);
-    border-radius: var(--form-control-border-radius);
-  }
+    > .btn, > .input-group-text {
+      z-index: 1;
+      line-height: 1;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
 
-  > .btn, > .input-group-text {
-    z-index: 1;
-    line-height: 1;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+    > * {
+      &:focus {
+        outline: none;
+      }
 
-  > * {
-    &:focus {
-      outline: none;
+      &:focus-visible, &:focus-within {
+        z-index: 5;
+      }
     }
 
-    &:focus-visible, &:focus-within {
-      z-index: 5;
+    &:has([disabled]) {
+      > .btn, .input-group-text {
+        font-style: italic;
+        color: var(--text-muted);
+        background-color: var(--form-control-disabled-background-color);
+        /* opacity: .6; */
+      }
     }
-  }
 
-  &:has([disabled]) {
-    > .btn, .input-group-text {
-      font-style: italic;
-      color: var(--text-muted);
-      background-color: var(--form-control-disabled-background-color);
-      /* opacity: .6; */
-    }
-  }
 
+  }
 
 }

package/src/css/forms/switch.css

@@ -1,4 +1,6 @@
-/* TODO completare, aggiungere focus, vedere soluzione bootstrap
+@layer base {
+
+  /* TODO completare, aggiungere focus, vedere soluzione bootstrap
 
 
 .form-switch {
@@ -43,7 +45,7 @@
 
 */
 
-/*
+  /*
 <div class="switch">
   <input type="checkbox">
   <span class="switch-track"></span>
@@ -51,55 +53,57 @@
 </div>
 */
 
-.switch {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-}
+  .switch {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
 
-.switch input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
+  .switch input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
 
-.switch-track {
-  position: relative;
-  width: 2.5em;
-  height: 1.5em;
-  background-color: var(--switch-background-color);
-  border-radius: 1.5em;
-  transition: background-color 0.2s;
-}
+  .switch-track {
+    position: relative;
+    width: 2.5em;
+    height: 1.5em;
+    background-color: var(--switch-background-color);
+    border-radius: 1.5em;
+    transition: background-color .2s;
+  }
 
-.switch label {
-  margin-left: .5em;
-  user-select: none;
-}
+  .switch label {
+    margin-left: .5em;
+    user-select: none;
+  }
 
-.switch-track::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 2em;
-  height: 2em;
-  background: var(--switch-cursor-background-color);
-  border-radius: 50%;
-  transition: translate 0.2s;
-}
+  .switch-track::after {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 2em;
+    height: 2em;
+    content: '';
+    background: var(--switch-cursor-background-color);
+    border-radius: 50%;
+    transition: translate .2s;
+  }
 
-.switch input:checked + .switch-track {
-  background-color: var(--switch-checked-background-color);
-}
+  .switch input:checked + .switch-track {
+    background-color: var(--switch-checked-background-color);
+  }
 
-.switch input:checked + .switch-track::after {
-  translate: 20px 0;
-}
+  .switch input:checked + .switch-track::after {
+    translate: 20px 0;
+  }
+
+  /* accessibilità */
+  .switch input:focus-visible + .switch-track {
+    outline: 2px solid var(--switch-checked-background-color);
+    outline-offset: 2px;
+  }
 
-/* accessibilità */
-.switch input:focus-visible + .switch-track {
-  outline: 2px solid var(--switch-checked-background-color);
-  outline-offset: 2px;
 }