@massimo-cassandro/minimo 0.1.3 → 0.1.5

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/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); }
+}

package/src/css/spinners/spinner-trailing-dots.css

@@ -0,0 +1,51 @@
+/*
+https://projects.lukehaas.me/css-loaders/ (#6)
+
+<div class="spinner-wrapper"><div class="spinner">Loading...</div></div>
+*/
+
+.spinner {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  /* margin: 2rem auto; */
+  overflow: hidden;
+  font-size: 3.5rem;
+  color: var(--text-color);
+  text-indent: -9999em;
+  border-radius: 50%;
+  transform: translateZ(0);
+  animation: loader 1.7s infinite ease, round 1.7s infinite ease;
+}
+
+@keyframes loader {
+  0% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+  5%,
+  95% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+  10%,
+  59% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
+  }
+  20% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
+  }
+  38% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
+  }
+  100% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+}
+
+@keyframes round {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/css/spinners/spinner-wrapper.css

@@ -0,0 +1,20 @@
+.spinner-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-index-overlay);
+  display: grid;
+  place-content: center;
+  pointer-events: none;
+  background-color: var(--spinner-overlay-color);
+}
+
+.spinner-wrapper {
+  position: absolute;
+  top: 1rem;
+  left: 50%;
+  display: grid;
+  place-content: center;
+  width: 4rem;
+  aspect-ratio: 1;
+  translate: -50%;
+}

package/src/css/svg.css

@@ -0,0 +1,3 @@
+svg {
+  fill: currentColor;
+}

package/src/css/table.css

@@ -0,0 +1,66 @@
+/* wrapper per le tabelle per evitare che superino la largheza dello spazio disponibile */
+.table-responsive {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+
+  --alternate-row-bg: color-mix(in srgb, var(--stone-3) 40%, transparent);
+  --hover-row-bg: color-mix(in srgb, var(--blue-3) 20%, transparent);
+  --border-color: var(--stone-5);
+  --border: 1px solid var(--border-color);
+
+  width: 100%;
+  margin: 1rem 0;
+  border-collapse: collapse;
+
+  tr {
+    border-bottom: var(--border);
+  }
+  thead {
+    tr:last-child {
+      border-width: 3px;
+    }
+  }
+
+  tbody {
+    tr:nth-child(even) {
+      background-color: var(--alternate-row-bg);
+    }
+
+    @media (--mouse) {
+      tr:hover {
+        background-color: var(--hover-row-bg);
+      }
+    }
+  }
+
+
+  th, td {
+    padding: .3rem .6rem;
+    line-height: 1.3;
+    text-align: start;
+    vertical-align: top;
+  }
+
+  &.table-bordered {
+    border: var(--border);
+
+    th, td {
+      &:not(:first-child) {
+        border-inline-start: var(--border);
+      }
+    }
+  }
+
+}
+
+
+@media (prefers-color-scheme: dark) {
+  .table {
+    --alternate-row-bg: color-mix(in srgb, var(--stone-12) 60%, transparent);
+    --hover-row-bg: color-mix(in srgb, var(--blue-12) 60%, transparent);
+    --border-color: var(--stone-8);
+  }
+}

package/src/css/text.css

@@ -0,0 +1,114 @@
+/* stylelint-disable declaration-no-important */
+p {
+  margin: 0 0 var(--spacing-sm);
+}
+
+a:link, .btn-link {
+  /* TODO rivedere, forse più complicato del necessario */
+  &:not(.btn) {
+    font-weight: var(--font-weight-semibold);
+    color: var(--link-color);
+    text-decoration: none;
+  }
+}
+
+a {
+  &:visited {
+    color: var(--link-visited-color);
+  }
+}
+
+a, .btn-link {
+  &:focus, &:focus-visible {
+    outline: 1px solid color-mix(in srgb, var(--link-color) 60%, transparent);
+    outline-offset: 2px;
+  }
+  &:hover {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  &:active {
+    color: var(--body-bg-color);
+    background-color: var(--link-color);
+    outline: 2px solid var(--link-color);
+    offset: 0;
+  }
+}
+
+
+
+strong, b {
+  font-weight: 700;
+}
+em, .italic {
+  font-style: italic;
+}
+
+.text-center {
+  text-align: center !important;
+}
+.text-right, .text-end {
+  text-align: end !important;
+}
+.text-nowrap {
+  white-space: nowrap;
+}
+
+.text-monospace {
+  font-family: var(--font-family-mono);
+}
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* .text-nowrap-dskt {
+  @media (--media-large-viewport-up) {
+    white-space: nowrap;
+  }
+} */
+
+.font-italic {
+  font-style: italic;
+}
+.font-bold {
+  font-weight: var(--font-weight-bold);
+}
+.font-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+.text-xs {
+  font-size: var(--font-size-xs);
+}
+small, .small, .text-sm {
+  font-size: var(--font-size-sm);
+}
+.text-md {
+  font-size: var(--font-size-md);
+}
+
+.text-muted {
+  color: var(--text-muted-color);
+}
+
+ul {
+  margin: 1rem 0;
+  list-style-type: disc;
+}
+li {
+  margin-left: 1.5rem;
+}
+
+.text-danger {
+  color: var(--status-danger-color);
+}
+.text-warning {
+  color: var(--status-warning-color);
+}
+.text-info {
+  color: var(--status-info-color);
+}
+.text-success {
+  color: var(--status-success-color);
+}

package/src/css/utilities.css

@@ -0,0 +1,128 @@
+/* da bootstrap */
+/* stylelint-disable declaration-no-important */
+
+.visually-hidden {
+  display: block;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+@media (--desktop-up) {
+  .desktop-visually-hidden {
+    display: block;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+}
+
+@media (--desktop-down) {
+  .small-screen-hidden {
+    display: none !important;
+  }
+}
+
+
+@media print {
+  .d-print-none {
+    display: none;
+  }
+}
+
+.d-none {
+  display: none !important;
+}
+/* .position-relative {
+  position: relative;
+} */
+
+/* .mobile-hidden {
+  @media (--media-large-viewport-down) {
+    display: none;
+  }
+} */
+
+/* .w-100 {
+  width: 100% !important;
+} */
+/* .w-auto {
+  width: auto !important;
+} */
+
+/* .mt-xxs {
+  margin-block-start: var(--spacing-xxs);
+} */
+.mt {
+  margin-block-start: var(--spacing-base);
+}
+.mt-lg {
+  margin-block-start: var(--spacing-lg);
+}
+.mt-xl {
+  margin-block-start: var(--spacing-xl);
+}
+.mt-auto {
+  margin-block-start: auto;
+}
+/* @media (--media-large-viewport-up) {
+
+  .mt-dsk-lg {
+    margin-block-start: var(--spacing-lg);
+  }
+} */
+
+.mb-0 {
+  margin-block-end: 0;
+}
+.mb {
+  margin-block-end: var(--spacing-base);
+}
+.mb-lg {
+  margin-block-end: var(--spacing-lg);
+}
+/* .mb-xl {
+  margin-block-end: var(--spacing-xl);
+} */
+/* @media (--media-large-viewport-up) {
+
+  .mb-dsk-lg {
+    margin-block-end: var(--spacing-lg);
+  }
+} */
+
+/* .grid-full-row {
+  grid-column: 1 / -1;
+} */
+
+.me {
+  margin-inline-end: var(--spacing-base);
+}
+.me-xs {
+  margin-inline-end: var(--spacing-xs);
+}
+
+.mx-lg {
+  margin-inline: var(--spacing-lg);
+}
+
+.mx-xl {
+  margin-inline: var(--spacing-xl);
+}
+.my-xl {
+  margin-block: var(--spacing-xl);
+}

package/src/custom-media-default.css

@@ -0,0 +1,16 @@
+/*
+90rem    : 1440px
+64rem    : 1024px
+47.5rem  : 760px
+*/
+
+@custom-media --media-xlarge-viewport-up (width > 90rem);
+@custom-media --media-large-viewport-up (width > 64rem);
+@custom-media --media-medium-viewport-up (width > 47.5rem);
+
+@custom-media --media-large-viewport-only (64rem < width <= 90rem);
+@custom-media --media-medium-viewport-only (47.5rem < width <= 64rem);
+@custom-media --media-small-viewport-only (width <= 47.5rem);
+
+@custom-media --media-xlarge-viewport-down (max-width: 90rem);
+@custom-media --media-large-viewport-down (max-width: 64rem);