@massimo-cassandro/minimo 1.21.1 → 1.21.3

package/src/css/forms/forms.css

@@ -1,166 +1,162 @@
-@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;
+/* 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);
     }
   }
+}
 
-  .form-label {
-    display: block;
-    font-size: var(--form-label-font-size);
-    font-weight: var(--form-label-font-weight);
-    color: var(--form-label-color);
+/* 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-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);
-    }
+.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);
+  }
 
-    &::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);
-    }
+  &::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-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-sm {
+    padding: var(--form-control-sm-padding-block) var(--form-control-sm-padding-inline);
+    font-size: var(--form-control-sm-font-size);
   }
+}
 
-  /* da bootstrap */
-  select.form-control {
+.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;
+  }
+}
 
-    --_trigger-icon-padding-right: calc(var(--form-control-padding-inline) * 2);
-    --_bg-img-inline-size: 16px;
+/* da bootstrap */
+select.form-control {
 
-    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;
+  --_trigger-icon-padding-right: calc(var(--form-control-padding-inline) * 2);
+  --_bg-img-inline-size: 16px;
 
-    &[multiple],
-    &[size]:not([size='1']) {
-      padding-right: var(--form-control-padding-inline);
-      background-image: none;
-    }
+  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;
 
-    &:-moz-focusring {
-      color: transparent;
-      text-shadow: 0 0 0 var(--form-control-text-color);
-    }
+  &[multiple],
+  &[size]:not([size='1']) {
+    padding-right: var(--form-control-padding-inline);
+    background-image: none;
   }
 
-  input[type='checkbox'] {
-    color: var(--form-control-text-color);
-    accent-color: var(--accent);
-    transform-origin: center;
-    scale: 1.3;
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 var(--form-control-text-color);
   }
+}
 
-  /* 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);
+input[type='checkbox'] {
+  color: var(--form-control-text-color);
+  accent-color: var(--accent);
+  transform-origin: center;
+  scale: 1.3;
+}
 
-    .form-check-input {
-      float: left;
-      display: inline-block;
-      width: auto;
-      margin: 4px 0 0 -1.5em;
-    }
+/* 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;
   }
+}
 
-  /* 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,59 +1,55 @@
-@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);
-    }
 
-    > .btn, > .input-group-text {
-      z-index: 1;
-      line-height: 1;
-      border-top-left-radius: 0;
-      border-bottom-left-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);
+  }
 
-    > * {
-      &:focus {
-        outline: none;
-      }
+  > .btn, > .input-group-text {
+    z-index: 1;
+    line-height: 1;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
 
-      &:focus-visible, &:focus-within {
-        z-index: 5;
-      }
+  > * {
+    &:focus {
+      outline: none;
     }
 
-    &:has([disabled]) {
-      > .btn, .input-group-text {
-        font-style: italic;
-        color: var(--text-muted);
-        background-color: var(--form-control-disabled-background-color);
-        /* opacity: .6; */
-      }
+    &: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; */
+    }
   }
 
+
 }

package/src/css/forms/switch.css

@@ -1,109 +1,106 @@
-@layer base {
 
-  /* TODO completare, aggiungere focus, vedere soluzione bootstrap
+/* TODO completare, aggiungere focus, vedere soluzione bootstrap
 
 
 .form-switch {
-  padding-left: $form-switch-padding-start;
+padding-left: $form-switch-padding-start;
 
-  .form-check-input {
-    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+.form-check-input {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
 
-    width: $form-switch-width;
-    margin-left: $form-switch-padding-start * -1;
-    background-image: var(--#{$prefix}form-switch-bg);
-    background-position: left center;
-    @include border-radius($form-switch-border-radius, 0);
-    @include transition($form-switch-transition);
+  width: $form-switch-width;
+  margin-left: $form-switch-padding-start * -1;
+  background-image: var(--#{$prefix}form-switch-bg);
+  background-position: left center;
+  @include border-radius($form-switch-border-radius, 0);
+  @include transition($form-switch-transition);
 
-    &:focus {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
-    }
+  &:focus {
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
+  }
 
-    &:checked {
-      background-position: $form-switch-checked-bg-position;
+  &:checked {
+    background-position: $form-switch-checked-bg-position;
 
-      @if $enable-gradients {
-        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
-      } @else {
-        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
-      }
+    @if $enable-gradients {
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
+    } @else {
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
     }
   }
+}
 
-  &.form-check-reverse {
-    padding-right: $form-switch-padding-start;
-    padding-left: 0;
+&.form-check-reverse {
+  padding-right: $form-switch-padding-start;
+  padding-left: 0;
 
-    .form-check-input {
-      margin-right: $form-switch-padding-start * -1;
-      margin-left: 0;
-    }
+  .form-check-input {
+    margin-right: $form-switch-padding-start * -1;
+    margin-left: 0;
   }
 }
+}
 
 
 */
 
-  /*
+/*
 <div class="switch">
-  <input type="checkbox">
-  <span class="switch-track"></span>
-  <label>Abilita notifiche</label>
+<input type="checkbox">
+<span class="switch-track"></span>
+<label>Abilita notifiche</label>
 </div>
 */
 
-  .switch {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .switch input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
+.switch {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
 
-  .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 input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
 
-  .switch label {
-    margin-left: .5em;
-    user-select: none;
-  }
+.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-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 label {
+  margin-left: .5em;
+  user-select: none;
+}
 
-  .switch input:checked + .switch-track {
-    background-color: var(--switch-checked-background-color);
-  }
+.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::after {
-    translate: 20px 0;
-  }
+.switch input:checked + .switch-track {
+  background-color: var(--switch-checked-background-color);
+}
 
-  /* accessibilità */
-  .switch input:focus-visible + .switch-track {
-    outline: 2px solid var(--switch-checked-background-color);
-    outline-offset: 2px;
-  }
+.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;
 }

package/src/css/forms/validation.css

@@ -1,35 +1,31 @@
-@layer base {
+/* da BS5 */
+.was-validated {
 
-  /* da BS5 */
-  .was-validated {
-
-    /* includes static field which container has is-valid / is-invalid class */
-    .form-group:has(:valid), .form-group:has(.is-valid), .form-group.is-valid .form-control-static{
-      --_status-color: var(--status-success-color);
-    }
-    .form-group:has(:invalid), .form-group:has(.is-invalid), .form-group.is-invalid .form-control-static{
-      --_status-color: var(--status-danger-color);
-    }
-
-    .form-label {
-      color: var(--_status-color);
-    }
+  /* includes static field which container has is-valid / is-invalid class */
+  .form-group:has(:valid), .form-group:has(.is-valid), .form-group.is-valid .form-control-static{
+    --_status-color: var(--status-success-color);
+  }
+  .form-group:has(:invalid), .form-group:has(.is-invalid), .form-group.is-invalid .form-control-static{
+    --_status-color: var(--status-danger-color);
+  }
 
-    .form-control, .form-control-static {
-      outline: var(--form-validation-outline-width) solid var(--_status-color);
-      outline-offset: var(--form-validation-outline-offset);
+  .form-label {
+    color: var(--_status-color);
+  }
 
-      &:focus {
-        outline: none;
-      }
+  .form-control, .form-control-static {
+    outline: var(--form-validation-outline-width) solid var(--_status-color);
+    outline-offset: var(--form-validation-outline-offset);
 
-      &:focus-visible {
-        /* background-color: var(--_status-color); */
-        outline: var(--form-control-focus-outline-width) solid var(--_status-color);
-        outline-offset: var(--form-control-focus-outline-offset);
-      }
+    &:focus {
+      outline: none;
     }
 
+    &:focus-visible {
+      /* background-color: var(--_status-color); */
+      outline: var(--form-control-focus-outline-width) solid var(--_status-color);
+      outline-offset: var(--form-control-focus-outline-offset);
+    }
   }
 
 }