@massimo-cassandro/minimo 0.1.3 → 0.1.4

package/src/css/forms/forms.css

@@ -0,0 +1,315 @@
+/* TODO separare? */
+/* TODO serie di gruppi radio o checkbox */
+/* TODO multiselect */
+/* 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-btns-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-btns-border-radius) var(--form-btns-border-radius) var(--form-btns-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 {
+  position: relative;
+  padding-inline-start: var(--spacing-md);
+  &::before {
+    position: absolute;
+    top: -.2em;
+    left: 0;
+    display: inline-block;
+    padding-inline-end: var(--spacing-xs);
+    font-size: 2em;
+    color: var(--form-required-flag-color);
+    content: var(--form-required-flag-content);
+  }
+
+}
+
+.form-label {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* la classe form-select è mantenuta per compatibilità con bootstrap  */
+.form-control, .form-control-text, .form-select {
+  display: block;
+  width: 100%;
+  font-family: var(--font-family);
+  font-size: var(--form-btns-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-btns-border-radius);
+
+  &:focus {
+    outline: var(--form-btns-outline-width) solid var(--form-btns-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);
+    /* opacity: .6; */
+    &::placeholder {
+      font-style: italic;
+    }
+  }
+}
+
+.form-control, .form-control-text {
+
+  padding: var(--form-btns-padding-y) var(--form-btns-padding-x);
+
+  &::placeholder {
+    font-size: var(--form-btns-font-size);
+    color: var(--form-placeholder-color);
+    opacity: 1;
+  }
+
+  &.form-control-sm {
+    padding: var(--form-btns-sm-padding-y) var(--form-btns-sm-padding-x);
+    font-size: var(--form-btns-sm-font-size);
+  }
+}
+.form-control-text {
+  overflow: hidden;
+  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);
+
+  padding: var(--form-btns-padding-y) var(--indicator-padding-right) var(--form-btns-padding-y) var(--form-btns-padding-x);
+  appearance: none;
+  background-image: url('./select-indicator.svg?inline-dataURI');
+  background-repeat: no-repeat;
+  background-position: right var(--indicator-padding-right) center;
+  background-size: 16px 12px;
+
+  &[multiple],
+  &[size]:not([size='1']) {
+    padding-right: var(--form-btns-padding-x);
+    background-image: none;
+  }
+
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 var(--form-text-color);
+  }
+}
+
+input[type='checkbox'] {
+  color: var(--secondary-fg);
+  accent-color: var(--secondary);
+  transform-origin: center;
+  scale: 1.3;
+}
+
+/* da bs5 */
+/* versione con label a destra */
+.form-check {
+  display: block;
+  padding-left: 1.5em;
+  margin-block-start: var(--spacing-sm);
+
+  .form-check-input {
+    display: inline-block;
+    float: left;
+    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-indicator { /* solo in chromium, non in safari */
+  margin: 2px 0;
+}
+
+
+.form-help-text {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted-color);
+}
+
+
+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-btns-padding-y) var(--form-btns-padding-x);
+    font-size: var(--form-btns-font-size);
+    background-color: var(--form-input-group-bg-color);
+    border: 1px solid var(--form-border-color);
+    border-radius: var(--form-btns-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-btns-outline-width) solid var(--status-color);
+      outline-offset: 0;
+
+    }
+  }
+
+}

package/src/css/forms/select-indicator.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+  <path fill='none' stroke='rgb(5, 48, 56)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/>
+</svg>

package/src/css/grid.css

@@ -0,0 +1,63 @@
+.grid {
+  --cols: 1;
+  --min-col-width: calc((100% - calc(3 * var(--flex-grid-gap))) / var(--cols));
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr));
+  grid-auto-flow: row;
+  gap: var(--flex-grid-gap);
+  /* align-items: center; */
+  /* justify-items: start; */
+
+  &.justify-content-end {
+    justify-content: end;
+  }
+
+
+  @media (--medium-screen) {
+    --cols: 2;
+
+    > .span-2, > .span-3, > .span-4 {
+      grid-column-start: span 2;
+    }
+  }
+
+  @media (--desktop-up) {
+    --cols: 4;
+
+    /* versione a 5, 6, 8 colonne */
+    &.grid-5 {
+      --cols: 5;
+    }
+    &.grid-6 {
+      --cols: 6;
+    }
+    &.grid-8 {
+      --cols: 8;
+    }
+
+    > .span-2 {
+      grid-column-start: span 2;
+    }
+    > .span-3 {
+      grid-column-start: span 3;
+    }
+
+    > .span-4 {
+      grid-column-start: span 4;
+    }
+  } /* end @media (--desktop-up) */
+
+  /* grid items */
+  > .grid-item-last {
+    grid-column: -2 / -1;
+  }
+
+  > .justify-self-end {
+    justify-self: end;
+  }
+
+  > .align-self-center {
+    align-self: center;
+  }
+}

package/src/css/headings.css

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

package/src/css/icons.css

@@ -0,0 +1,114 @@
+@use 'sass:map';
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  aspect-ratio: 1;
+
+  fill: currentColor;
+  stroke: none;
+
+  /* fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 4px; */
+
+  /* &.icon-bold{
+    stroke-width: 8px;
+  } */
+
+  &.icon-lg {
+    width: 1.2em;
+    height: 1.2em;
+  }
+  &.icon-xl {
+    width: 1.4em;
+    height: 1.4em;
+  }
+  &.icon-xxl {
+    width: 2em;
+    height: 2em;
+  }
+  &.icon-4xl {
+    width: 8em;
+    height: 8em;
+  }
+
+  /* &.fill-icon {
+    fill: currentColor;
+    stroke: none;
+  } */
+
+  /* &.ratio3x4 {
+    height: auto;
+    aspect-ratio: 3 / 4;
+  }
+  &.ratio3x5 {
+    height: auto;
+    aspect-ratio: 3 / 5;
+  } */
+  &.baseline-shift-20 {
+    translate: 0 20%;
+  }
+  &.baseline-shift-30 {
+    translate: 0 30%;
+  }
+  &.baseline-negative-shift-20 {
+    translate: 0 -20%;
+  }
+}
+
+/* .duotone-light, .duotone-medium, .duotone-dark {
+  fill: currentColor;
+  stroke: none;
+}
+.duotone-light {
+  fill-opacity: .2;
+}
+.duotone-medium {
+  fill-opacity: .4;
+}
+.duotone-dark {
+  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/inner-nav.css

@@ -0,0 +1,11 @@
+.inner-nav-main, .inner-nav {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: flex-end;
+  margin: 1rem 0;
+  /* text-align: end; */
+
+  @media print {
+    display: none;
+  }
+}

package/src/css/layout-base.css

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

package/src/css/overlay.css

@@ -0,0 +1,11 @@
+.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-bg) 50%, transparent);
+
+}

package/src/css/reset.css

@@ -0,0 +1,59 @@
+/*
+  Josh's Custom CSS Reset
+  https://www.joshwcomeau.com/css/custom-css-reset/
+*/
+/* 1. Use a more-intuitive box-sizing model */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+  margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  /* 4. Add accessible line-height */
+  line-height: 1.5;
+  /* 5. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input, button, textarea, select {
+  font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}
+
+/*
+  10. Create a root stacking context
+*/
+/* stylelint-disable-next-line selector-id-pattern, selector-max-id */
+#root, #__next {
+  isolation: isolate;
+}

package/src/css/spinners/TODO spinner-circle.css

@@ -0,0 +1,54 @@
+/*
+https://lukehaas.me/projects/css-spinners/ (#2)
+
+<div class="spinner-wrapper"><div class="spinner">Loading...</div></div>
+*/
+
+
+.spinner {
+  position: relative;
+  width: 10em;
+  height: 10em;
+  margin: 55px auto;
+  font-size: .7rem;
+  color: var(--spinner-color);
+  text-indent: -99999em;
+  box-shadow: inset 0 0 0 1em;
+  transform: translateZ(0);
+
+  &, &::before, &::after {
+    border-radius: 50%;
+  }
+
+  &::before, &::after {
+    position: absolute;
+    content: '';
+  }
+}
+
+.spinner::before {
+  top: -.1em;
+  left: -.1em;
+  width: 5.2em;
+  height: 10.2em;
+  border-radius: 10.2em 0 0 10.2em;
+  transform-origin: 5.1em 5.1em;
+  animation: spinner-load 2s infinite ease 1.5s;
+}
+.spinner::after {
+  top: -.1em;
+  left: 4.9em;
+  width: 5.2em;
+  height: 10.2em;
+  border-radius: 0 10.2em 10.2em 0;
+  transform-origin: 0.1em 5.1em;
+  animation: spinner-load 2s infinite ease;
+}
+@keyframes spinner-load {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/css/spinners/TODO spinner-three-dots.css

@@ -0,0 +1,14 @@
+/* HTML: <div class="loader"></div> */
+/* https://css-loaders.com/dots/  #1 */
+.spinner {
+  width: 80px;
+  aspect-ratio: 6;
+  margin-top: 2rem;
+  clip-path: inset(0 100% 0 0);
+  background: radial-gradient(circle closest-side, var(--text-color) 90%, transparent) 0 / calc(100% / 3) 100% space;
+  animation: l1 1s steps(4) infinite;
+}
+
+@keyframes l1 { to { clip-path: inset(0 -34% 0 0); } }
+
+

package/src/css/spinners/readme.md

@@ -0,0 +1 @@
+Gli spinner hanno tutti la stessa classe, presumendo che se ne usi solo una per volta...

package/src/css/spinners/spinner-circle-basic.css

@@ -0,0 +1,15 @@
+.spinner {
+  display: inline-block;
+  width: var(--spinner-size);
+  aspect-ratio: 1;
+  color: var(--spinner-color);
+  text-indent: -99999em;
+  border: var(--spinner-stroke) solid;
+  border-color: currentColor currentColor transparent;
+  border-radius: 50%;
+  animation: spinner-border .7s linear infinite;
+}
+
+@keyframes spinner-border {
+  to { transform: rotate(360deg); }
+}