@massimo-cassandro/minimo 0.1.0 → 0.1.3

package/src/css/forms/forms.css

@@ -1,315 +0,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 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

@@ -1,3 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-.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

@@ -1,34 +0,0 @@
-
-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

@@ -1,114 +0,0 @@
-@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

@@ -1,11 +0,0 @@
-.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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-.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

@@ -1,59 +0,0 @@
-/*
-  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

@@ -1,54 +0,0 @@
-/*
-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

@@ -1,14 +0,0 @@
-/* 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

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

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

@@ -1,15 +0,0 @@
-.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); }
-}