@massimo-cassandro/minimo 0.1.12 → 0.2.0

package/src/css/forms/forms.css

@@ -4,118 +4,27 @@
 /* TODO classe grid specifica per i form ?? (.form-grid?) */
 /* TODO customizable select */
 
-/* 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(--ada-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-border-color);
-  border-radius: var(--form-btn-border-radius);
-
-  &, > legend {
-    border: var(--form-fieldset-border-width) solid var(--form-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-legend-color);
-    /* text-transform: uppercase; */
-    background-color: var(--form-legend-bg-color);
-    border-radius: var(--form-btn-border-radius) var(--form-btn-border-radius) var(--form-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-border-color);
-    }
-  }
-
-  &[disabled] {
-    font-style: italic;
-    opacity: .6;
-  }
-}
-
-.form-group {
-  display: flex;
-  flex-flow: column nowrap;
-  gap: var(--spacing-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;
-  }
-}
-
-.form-group:has([required]) .form-label, .required {
+.form-group:has([required]) .form-label {
   position: relative;
-  padding-inline-start: var(--spacing-md);
+  padding-inline-start: var(--size-base);
   &::before {
     position: absolute;
-    top: -.2em;
+    top: -.15em;
     left: 0;
     display: inline-block;
-    padding-inline-end: var(--spacing-xs);
+    padding-inline-end: var(--size-xxs);
     font-size: 2em;
-    color: var(--form-required-flag-color);
-    content: var(--form-required-flag-content);
+    color: var(--form-control-required-flag-color);
+    content: var(--form-control-required-flag-content);
   }
 
 }
 
 .form-label {
   display: block;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--form-label-font-size);
+  font-weight: var(--form-label-font-weight);
+  color: var(--form-label-color);
 }
 
 /* la classe form-select è mantenuta per compatibilità con bootstrap  */
@@ -123,23 +32,23 @@ fieldset:not(.fupl-wrapper):not(.form-group):not(.form-collection-fset) {
   display: block;
   width: 100%;
   font-family: var(--font-family);
-  font-size: var(--form-btn-font-size);
+  font-size: var(--form-control-font-size);
   font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-base);
-  color: var(--form-text-color);
-  background-color: var(--form-bg-color);
-  border: 1px solid var(--form-border-color);
-  border-radius: var(--form-btn-border-radius);
+  line-height: var(--font-line-height-base);
+  color: var(--form-control-text-color);
+  background-color: var(--form-control-background-color);
+  border: 1px solid var(--form-control-border-color);
+  border-radius: var(--form-control-border-radius);
 
   &:focus {
-    outline: var(--form-btn-outline-width) solid var(--form-btn-focus-color);
+    outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
   }
 
   &[disabled] {
     /* color: $form-select-disabled-color;
     background-color: $form-select-disabled-bg;
     border-color: $form-select-disabled-border-color; */
-    background-color: var(--form-disabled-bg-color);
+    background-color: var(--form-control-disabled-background-color);
     /* opacity: .6; */
     &::placeholder {
       font-style: italic;
@@ -149,17 +58,18 @@ fieldset:not(.fupl-wrapper):not(.form-group):not(.form-collection-fset) {
 
 .form-control, .form-control-text {
 
-  padding: var(--form-btn-padding-y) var(--form-btn-padding-x);
+  padding: var(--form-control-padding-block) var(--form-control-padding-inline);
 
   &::placeholder {
-    font-size: var(--form-btn-font-size);
-    color: var(--form-placeholder-color);
-    opacity: 1;
+    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-btn-sm-padding-y) var(--form-btn-sm-padding-x);
-    font-size: var(--form-btn-sm-font-size);
+    padding: var(--form-control-sm-padding-block) var(--form-control-sm-padding-inline);
+    font-size: var(--form-control-sm-font-size);
   }
 }
 .form-control-text {
@@ -167,37 +77,36 @@ fieldset:not(.fupl-wrapper):not(.form-group):not(.form-collection-fset) {
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: not-allowed;
-  background-color: var(--form-disabled-bg-color);
 }
 
 /* da bootstrap */
 select.form-control, .form-select {
 
-  --form-select-indicator-color: var(--form-text-color);
-  --indicator-padding-right: var(--spacing-base);
+  /* --_form-select-trigger-icon-color: var(--form-control-text-color); */
+  --_trigger-icon-padding-right: var(--size-base);
 
-  padding: var(--form-btn-padding-y) var(--indicator-padding-right) var(--form-btn-padding-y) var(--form-btn-padding-x);
+  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-select-indicator);
+  background-image: var(--form-control-select-trigger-icon);
   background-repeat: no-repeat;
-  background-position: right var(--indicator-padding-right) center;
+  background-position: right var(--_trigger-icon-padding-right) center;
   background-size: 16px 12px;
 
   &[multiple],
   &[size]:not([size='1']) {
-    padding-right: var(--form-btn-padding-x);
+    padding-right: var(--form-control-padding-inline);
     background-image: none;
   }
 
   &:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 var(--form-text-color);
+    text-shadow: 0 0 0 var(--form-control-text-color);
   }
 }
 
 input[type='checkbox'] {
-  color: var(--secondary-fg);
-  accent-color: var(--secondary);
+  color: var(--form-control-text-color);
+  accent-color: var(--accent-base);
   transform-origin: center;
   scale: 1.3;
 }
@@ -207,11 +116,11 @@ input[type='checkbox'] {
 .form-check {
   display: block;
   padding-left: 1.5em;
-  margin-block-start: var(--spacing-sm);
+  margin-block-start: var(--size-sm);
 
   .form-check-input {
-    display: inline-block;
     float: left;
+    display: inline-block;
     width: auto;
     margin: 4px 0  0 -1.5em;
   }
@@ -224,14 +133,14 @@ input::-webkit-datetime-edit {
   margin-block-end: -2px;
   line-height: 1;
 }
-input::-webkit-calendar-picker-indicator { /* solo in chromium, non in safari */
+input::-webkit-calendar-picker-trigger-icon { /* solo in chromium, non in safari */
   margin: 2px 0;
 }
 
 
 .form-help-text {
   font-size: var(--font-size-xs);
-  color: var(--text-muted-color);
+  color: var(--text-muted);
 }
 
 
@@ -239,77 +148,3 @@ textarea.form-control {
   flex: 1;
 }
 
-/* da bs5 */
-.input-group {
-  position: relative;
-  display: flex;
-  gap: 0;
-  align-items: stretch;
-  justify-content: center;
-  width: 100%;
-
-  > .form-control, > .form-select {
-    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-btn-padding-y) var(--form-btn-padding-x);
-    font-size: var(--form-btn-font-size);
-    background-color: var(--form-input-group-bg-color);
-    border: 1px solid var(--form-border-color);
-    border-radius: var(--form-btn-border-radius);
-  }
-
-  > .btn, .input-group-text {
-    z-index: 1;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  > * {
-    &:focus, &:focus-within {
-      z-index: 5;
-    }
-  }
-
-  &:has([disabled]) {
-    > .btn, .input-group-text {
-      font-style: italic;
-      color: var(--text-muted-color);
-      background-color: var(--form-disabled-bg-color);
-      /* opacity: .6; */
-    }
-  }
-
-
-}
-
-.was-validated {
-
-  .form-group:has(:valid), .form-group:has(.is-valid){
-    --status-color: var(--status-success-color);
-  }
-  .form-group:has(:invalid), .form-group:has(.is-invalid){
-    --status-color: var(--status-danger-color);
-  }
-
-  .form-label {
-    color: var(--status-color);
-  }
-  .form-control, .form-select {
-    outline: 2px solid var(--status-color);
-    outline-offset: 2px;
-
-    &:focus {
-      /* background-color: var(--status-bg-color); */
-      outline: var(--form-btn-outline-width) solid var(--status-color);
-      outline-offset: 0;
-
-    }
-  }
-
-}

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

@@ -0,0 +1,49 @@
+
+/* da bs5 */
+.input-group {
+  position: relative;
+  display: flex;
+  gap: 0;
+  align-items: stretch;
+  justify-content: center;
+  width: 100%;
+
+  > .form-control, > .form-select {
+    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(--btn-border-radius);
+  }
+
+  > .btn, .input-group-text {
+    z-index: 1;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  > * {
+    &:focus, &: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/validation.css

@@ -0,0 +1,25 @@
+/* da BS5 */
+.was-validated {
+
+  .form-group:has(:valid), .form-group:has(.is-valid){
+    --_status-color: var(--status-success-color);
+  }
+  .form-group:has(:invalid), .form-group:has(.is-invalid){
+    --_status-color: var(--status-danger-color);
+  }
+
+  .form-label {
+    color: var(--_status-color);
+  }
+  .form-control, .form-select {
+    outline: 2px solid var(--_status-color);
+    outline-offset: 2px;
+
+    &:focus {
+      /* background-color: var(--_status-color); */
+      outline: var(--btn-focus-outline-width) solid var(--_status-color);
+      outline-offset: 0;
+    }
+  }
+
+}

package/src/css/grid.css

@@ -1,9 +1,12 @@
+/* TODO unificare regole comuni flex e grid */
+
 .grid {
-  --cols: 1;
-  --min-col-width: calc((100% - calc(3 * var(--flex-grid-gap))) / var(--cols));
+  --_cols: 1;
+  /* --_min-col-width: calc((100% - calc(var(--_cols) * var(--flex-grid-gap))) / var(--grid-cols)); */
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr));
+  /* grid-template-columns: repeat(var(--_cols), minmax(var(--grid-min-col-width), 1fr)); */
+  grid-template-columns: repeat(var(--_cols), 1fr);
   grid-auto-flow: row;
   gap: var(--flex-grid-gap);
   /* align-items: center; */
@@ -14,26 +17,32 @@
   }
 
 
-  @media (--medium-screen) {
-    --cols: 2;
+  @media (--media-medium-viewport-up) {
+    --_cols: 2;
 
     > .span-2, > .span-3, > .span-4 {
       grid-column-start: span 2;
     }
   }
 
-  @media (--desktop-up) {
-    --cols: 4;
+  @media (--media-large-viewport-up) {
+    --_cols: 4;
 
-    /* versione a 5, 6, 8 colonne */
+    /* versione a 3, 5, 6, 8 colonne */
+    &.grid-2 {
+      --_cols: 2;
+    }
+    &.grid-3 {
+      --_cols: 3;
+    }
     &.grid-5 {
-      --cols: 5;
+      --_cols: 5;
     }
     &.grid-6 {
-      --cols: 6;
+      --_cols: 6;
     }
     &.grid-8 {
-      --cols: 8;
+      --_cols: 8;
     }
 
     > .span-2 {
@@ -46,18 +55,16 @@
     > .span-4 {
       grid-column-start: span 4;
     }
-  } /* end @media (--desktop-up) */
+  } /* end @media */
 
   /* grid items */
   > .grid-item-last {
     grid-column: -2 / -1;
   }
 
-  > .justify-self-end {
-    justify-self: end;
-  }
 
-  > .align-self-center {
-    align-self: center;
-  }
+}
+
+.justify-self-end {
+  justify-self: end;
 }

package/src/css/headings.css

@@ -1,34 +1,35 @@
 
 h1, h2, h3, .h3, h4, .h4 {
   line-height: 1.2;
-  text-align: var(--headings-test-align);
+  color: var(--headings-color);
+  text-align: var(--headings-text-align);
 }
 
 h1 {
   margin: 0 0 2rem;
-  font-size: 2.5rem;
-  font-weight: var(--font-weight-bold);
+  font-size: var(--headings-h1-font-size);
+  font-weight: var(--headings-h1-font-weight);
 
   small, .small, .text-sm {
     display: block;
-    font-size: var(--font-size-sm);
-    color: var(--text-muted-color);
+    font-size: .85em;
+    color: var(--text-muted);
   }
 }
 
 h2, h3, .h3, h4, .h4 {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--headings-font-weight);
 }
 h2 {
   margin: 0 0 2rem;
-  font-size: 2rem;
+  font-size: var(--headings-h2-font-size);
 }
 
 h3, .h3 {
   margin: 0 0 1.5rem;
-  font-size: 1.6rem;
+  font-size: var(--headings-h3-font-size);
 }
 h4, .h4 {
   margin: 0 0 1.5rem;
-  font-size: 1.4rem;
+  font-size: var(--headings-h4-font-size);
 }

package/src/css/icons.css

@@ -1,6 +1,6 @@
-@use 'sass:map';
 
 .icon {
+  position: relative;
   display: inline-block;
   width: 1em;
   aspect-ratio: 1;
@@ -73,42 +73,3 @@
   fill-opacity: .7;
 } */
 
-/* contenitore di icon con aggiunta di barra trasversale
-<span class="icon-stroked-wrapper"><svg...></span> */
-/* .icon-stroked-wrapper {
-  position: relative;
-  top: 2px;
-
-  &::after {
-    position: absolute;
-    top: 45%;
-    left: -6%;
-    width: 110%;
-    height: 3px;
-    content: '';
-    background-color: rgb(var(--ada-danger-rgb) / .7);
-    transform-origin: center;
-    rotate: 30deg;
-    translate: 0 -50%;
-  }
-
-  .icon{
-    position: relative;
-    top: -2px;
-  }
-} */
-
-/*
-a .icon {
-  fill: $link-color;
-
-  &:hover {
-    fill: $link-hover-color;
-  }
-}
-*/
-
-.btn .icon {
-  position: relative;
-  /* top:3px; */
-}

package/src/css/layout-base.css

@@ -2,11 +2,11 @@ html, body {
   /* height: 100%; */
   padding: 0;
   margin: 0;
+  scroll-behavior: smooth;
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   font-style: var(--font-style-base);
-  line-height: var(--line-height-base);
+  line-height: var(--font-line-height-base);
   color: var(--text-color);
-  background-color: var(--body-bg-color);
-  scroll-behavior: smooth;
+  background-color: var(--body-background-color);
 }

package/src/css/overlay.css

@@ -6,6 +6,5 @@
   background-color: color-mix(in srgb, var(--text-color) 20%, transparent);
 }
 .overlay-inverted {
-  background-color: color-mix(in srgb, var(--body-bg) 50%, transparent);
-
+  background-color: color-mix(in srgb, var(--body-background-color) 50%, transparent);
 }