@massimo-cassandro/minimo 0.1.0

package/src/css/alerts.css

@@ -0,0 +1,95 @@
+/* default altert (danger) */
+
+.alert {
+
+  /*
+    symfony message labels:
+    - success
+    - notice
+    - error
+
+    Versione con overlay:
+    --------------------------
+    {%- set alerts = app.flashes -%} {# app.flashes può essere letto una sola volta #}
+    {%- if alerts|length -%}
+      <div class="alert-overlay">
+        {%- for label, messages in alerts -%}
+          <div class="mx-lg mb-0 alert alert-{{ label }}">
+            <button type="button" class="btn-close" data-dismiss="alert-overlay" aria-label="Chiudi"></button>
+            {{ messages|join('<br>')|raw }}
+          </div>
+        {%- endfor -%}
+      </div>
+    {%- endif -%}
+    --------------------------
+  */
+
+  /* alert-error / alert-danger (default) */
+  --alert-bg-color: var(--status-danger-color);
+  --alert-fg-color: var(--status-danger-fg-color);
+  --alert-border-color: var(--status-danger-border-color);
+
+  position: relative;
+
+  &.alert-warning, &.alert-notice {
+    --alert-bg-color: var(--status-warning-color);
+    --alert-fg-color: var(--status-warning-fg-color);
+    --alert-border-color: var(--status-warning-border-color);
+  }
+  &.alert-info {
+    --alert-bg-color: var(--status-info-color);
+    --alert-fg-color: var(--status-info-fg-color);
+    --alert-border-color: var(--status-info-border-color);
+  }
+  &.alert-success {
+    --alert-bg-color: var(--status-success-color);
+    --alert-fg-color: var(--status-success-fg-color);
+    --alert-border-color: var(--status-success-border-color);
+  }
+
+  padding: var(--spacing-base) var(--spacing-xl) var(--spacing-base) var(--spacing-base);
+  margin: var(--spacing-base) 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--alert-fg-color);
+  background-color: var(--alert-bg-color);
+  border: 1px solid var(--alert-border-color);
+  border-radius: var(--alert-border-radius);
+  box-shadow: var(--alert-box-shadow);
+
+  h2 {
+    margin: 0 0 var(--spacing-xs);
+    font-size: var(--font-size-lg);
+  }
+  p {
+    margin-block-end: var(--spacing-xs);
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+  /* a {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    &, &:visited {
+      color: var(--alert-link-color);
+    }
+
+    @media (--mouse) {
+      &:hover {
+        text-decoration-thickness: 4px;
+        background-color: color-mix(in srgb, var(--body-bg-color) 30%, transparent);
+      }
+    }
+  } */
+
+  /* TODO sistemare meglio */
+  .btn-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    color: currentColor;
+  }
+
+}
+
+

package/src/css/anchors.css

@@ -0,0 +1,40 @@
+/* TODO rivedere e completare */
+
+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:not(.btn), .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 {
+    /* TODO rivedere, sostituire con colori specifici da cuistome props */
+    /* stylelint-disable-next-line declaration-no-important */
+    color: var(--body-bg-color) !important;
+    background-color: var(--link-color);
+    outline: 2px solid var(--link-color);
+    offset: 0;
+  }
+}
+
+a:not(.btn) {
+  text-decoration: none;
+  &:link {
+    color: var(--link-color);
+  }
+  &:visited {
+    color: var(--link-visited-color);
+  }
+}

package/src/css/buttons/btn-close.css

@@ -0,0 +1,41 @@
+/*
+<button type="button" class="btn-close" aria-label="Chiudi"></button>
+*/
+
+/* NB richiede buttons.css per il reset */
+.btn-close  {
+
+  --icon-size: 1.3rem;
+  --icon-bar-size: 1.5px;
+  --icon-color: var(--text-color);
+  --icon-hover-bg: var(--accent-3);
+  position: relative;
+
+  display: inline-block;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--icon-color);
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    background-color: var(--icon-hover-bg);
+  }
+
+  &::before, &::after {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    display: block;
+    width: var(--icon-size);
+    height: var(--icon-bar-size);
+    content: '';
+    background: currentColor;
+  }
+  &::before {
+    transform: translateY(-50%) rotate(45deg);
+  }
+  &::after {
+    transform: translateY(-50%) rotate(-45deg);
+  }
+}

package/src/css/buttons/buttons.css

@@ -0,0 +1,187 @@
+/* TODO dividere in più file secondo il tipo di button */
+
+/*
+outline brns: primary/secondary + fondo body bg o trasparente
+
+*/
+
+button, [role='button'] {
+  cursor: pointer;
+}
+
+.btn-reset, .btn-link, .btn-close {
+  &, &.btn { /* nel caso venga anche assegnata la clase `btn`, non necessaria */
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+}
+
+a.btn {
+  &, &:hover, &:active, &:focus, &:visited {
+    color: var(--btn-fg-color);
+    text-decoration: none;
+  }
+}
+
+.btn {
+
+  display: inline-block;
+  padding: var(--form-btns-padding-y) var(--form-btns-padding-x);
+  font-size: var(--form-btns-font-size);
+  color: var(--btn-fg-color);
+  text-align: center;
+  text-decoration: none;
+  background: var(--btn-bg-color);
+  border: 1px solid var(--btn-border-color);
+  border-radius: var(--form-btns-border-radius);
+  box-shadow: none;
+
+  &[disabled] {
+    font-style: italic;
+    pointer-events: none;
+    cursor: not-allowed;
+    filter: grayscale(60%);
+    opacity: .6;
+  }
+
+  /* svg {
+    width: 2rem;
+  } */
+
+  &.btn-sm {
+    --form-btns-padding-x: var(--form-btns-sm-padding-x);
+    --form-btns-padding-y: var(--form-btns-sm-padding-y);
+    font-size: var(--form-btns-sm-font-size);
+
+    svg {
+      width: 1.5rem;
+    }
+  }
+
+  &.btn-lg {
+    --form-btns-padding-x: 1.5rem;
+    --form-btns-padding-y: .6rem;
+    font-size: var(--font-size-lg);
+
+    svg {
+      width: 1.5rem;
+    }
+  }
+
+
+  &.btn-primary {
+    --btn-bg-color: var(--btn-primary-bg-color);
+    --btn-fg-color: var(--btn-primary-fg-color);
+    --btn-border-color: var(--btn-primary-border-color);
+
+    @media (--mouse) {
+      &:hover {
+        --btn-bg-color: var(--btn-primary-hover-bg-color);
+        --btn-fg-color: var(--btn-primary-hover-fg-color);
+        --btn-border-color: var(--btn-primary-hover-border-color);
+      }
+    }
+
+    &:focus, &:active {
+      outline: var(--form-btns-outline-width) solid var(--btn-primary-focus-outline-color);
+      /* outline-offset: 4px; */
+    }
+
+    &:active {
+      --btn-bg-color: var(--btn-primary-active-bg-color);
+      --btn-fg-color: var(--btn-primary-active-fg-color);
+      --btn-border-color: var(--btn-primary-active-border-color);
+    }
+  }
+
+  &.btn-secondary {
+    --btn-bg-color: var(--btn-secondary-bg-color);
+    --btn-fg-color: var(--btn-secondary-fg-color);
+    --btn-border-color: var(--btn-secondary-border-color);
+
+    @media (--mouse) {
+      &:hover {
+        --btn-bg-color: var(--btn-secondary-hover-bg-color);
+        --btn-fg-color: var(--btn-secondary-hover-fg-color);
+        --btn-border-color: var(--btn-secondary-hover-border-color);
+      }
+    }
+
+    &:focus, &:active {
+      outline: var(--form-btns-outline-width) solid var(--btn-secondary-focus-outline-color);
+      /* outline-offset: 4px; */
+    }
+
+    &:active {
+      --btn-bg-color: var(--btn-secondary-active-bg-color);
+      --btn-fg-color: var(--btn-secondary-active-fg-color);
+      --btn-border-color: var(--btn-secondary-active-border-color);
+    }
+
+
+  }
+
+  &.btn-outline-primary {
+    --btn-bg-color: var(--btn-o-primary-bg-color);
+    --btn-fg-color: var(--btn-o-primary-fg-color);
+    --btn-border-color: var(--btn-o-primary-border-color);
+
+    @media (--mouse) {
+      &:hover {
+        --btn-bg-color: var(--btn-o-primary-hover-bg-color);
+        --btn-fg-color: var(--btn-o-primary-hover-fg-color);
+        --btn-border-color: var(--btn-o-primary-hover-border-color);
+      }
+    }
+
+    &:focus, &:active {
+      outline: var(--form-btns-outline-width) solid var(--btn-o-primary-focus-outline-color);
+    }
+
+    &:active {
+      --btn-bg-color: var(--btn-o-primary-active-bg-color);
+      --btn-fg-color: var(--btn-o-primary-active-fg-color);
+      --btn-border-color: var(--btn-o-primary-active-border-color);
+    }
+  }
+
+
+  &.btn-outline-secondary {
+    --btn-bg-color: var(--btn-o-secondary-bg-color);
+    --btn-fg-color: var(--btn-o-secondary-fg-color);
+    --btn-border-color: var(--btn-o-secondary-border-color);
+
+    @media (--mouse) {
+      &:hover {
+        --btn-bg-color: var(--btn-o-secondary-hover-bg-color);
+        --btn-fg-color: var(--btn-o-secondary-hover-fg-color);
+        --btn-border-color: var(--btn-o-secondary-hover-border-color);
+      }
+    }
+
+    &:focus, &:active {
+      outline: var(--form-btns-outline-width) solid var(--btn-o-secondary-focus-outline-color);
+    }
+
+    &:active {
+      --btn-bg-color: var(--btn-o-secondary-active-bg-color);
+      --btn-fg-color: var(--btn-o-secondary-active-fg-color);
+      --btn-border-color: var(--btn-o-secondary-active-border-color);
+    }
+  }
+
+  &.btn-icon {
+    display: inline-flex;
+    flex-flow: row nowrap;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline-start: calc(var(--form-btns-padding-x) * 1.5);
+    text-align: start;
+  }
+}
+
+

package/src/css/buttons/status-buttons.css

@@ -0,0 +1,107 @@
+.btn {
+
+  &.btn-success {
+    --bg: var(--status-success-color);
+    --fg: var(--status-success-fg-color);
+    --btn-bg-color: var(--bg);
+    --btn-fg-color: var(--fg);
+    --btn-border-color: var(--status-success-border-color);
+  }
+  &.btn-info {
+    --bg: var(--status-info-color);
+    --fg: var(--status-info-fg-color);
+    --btn-bg-color: var(--bg);
+    --btn-fg-color: var(--fg);
+    --btn-border-color: var(--status-info-border-color);
+  }
+  &.btn-danger, &.btn-error {
+    --bg: var(--status-danger-color);
+    --fg: var(--status-danger-fg-color);
+    --btn-bg-color: var(--bg);
+    --btn-fg-color: var(--fg);
+    --btn-border-color: var(--status-danger-border-color);
+  }
+
+
+  &.btn-warning {
+    --bg: var(--status-warning-color);
+    --fg: var(--status-warning-fg-color);
+    --btn-bg-color: var(--bg);
+    --btn-fg-color: var(--fg);
+    --btn-border-color: var(--status-warning-border-color);
+
+    @media (--mouse) {
+      &:hover {
+        --btn-bg-color: color-mix(in srgb, var(--bg) 60%, transparent);
+        --btn-fg-color: var(--fg);
+        --btn-border-color: var(--fg);
+      }
+    }
+
+    &:focus, &:active {
+      outline: var(--form-btns-outline-width) solid color-mix(in srgb, var(--bg) 60%, transparent);
+    }
+
+    &:active {
+      --btn-bg-color: color-mix(in srgb, var(--bg) 30%, transparent);
+    }
+  }
+
+
+  &.btn-success, &.btn-info, &.btn-danger  {
+
+    @media (--mouse) {
+      &:hover {
+        --btn-bg-color: color-mix(in srgb, var(--bg) 30%, transparent);
+        --btn-fg-color: var(--bg);
+        --btn-border-color: var(--bg);
+      }
+    }
+
+    &:focus, &:active {
+      outline: var(--form-btns-outline-width) solid color-mix(in srgb, var(--bg) 40%, transparent);
+    }
+
+    &:active {
+      --btn-bg-color: color-mix(in srgb, var(--bg) 10%, transparent);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+
+
+    &.btn-success, &.btn-info, &.btn-danger {
+
+      @media (--mouse) {
+        &:hover {
+          --btn-bg-color: color-mix(in srgb, var(--bg) 60%, #fff);
+          --btn-fg-color: var(--bg);
+          --btn-border-color: color-mix(in srgb, var(--bg) 40%, #fff);
+        }
+      }
+    }
+
+    &.btn-warning {
+
+      @media (--mouse) {
+        &:hover {
+          --btn-bg-color: color-mix(in srgb, var(--bg) 60%, #fff);
+          --btn-fg-color: var(--fg);
+          --btn-border-color: var(--fg);
+        }
+      }
+    }
+
+    &.btn-success, &.btn-info, &.btn-danger, &.btn-warning {
+
+      &:focus, &:active {
+        outline: var(--form-btns-outline-width) solid color-mix(in srgb, var(--bg) 60%, transparent);
+      }
+
+      &:active {
+        --btn-bg-color: color-mix(in srgb, var(--bg) 30%, transparent);
+        --btn-fg-color: var(--text-color);
+      }
+    }
+  }
+}

package/src/css/container.css

@@ -0,0 +1,15 @@
+
+
+.container {
+
+  width: 100%;
+  max-width: var(--container-max-width);
+  padding-inline-start: var(--spacing-lg);
+  padding-inline-end: var(--spacing-lg);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+
+  /* @media (--xl-n-above) {} */
+}
+
+

package/src/css/data-formats.css

@@ -0,0 +1,30 @@
+
+.data-lining-nums {
+  font-feature-settings: 'lnum', 'pnum';
+  font-variant-numeric: lining-nums proportional-nums;
+}
+
+.data-tabular-nums {
+  font-feature-settings: 'lnum', 'pnum';
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.data-euro {
+  &::before {
+    margin-right: .2rem;
+    font-size: 70%;
+    color: currentColor;
+    content: '\20AC';
+  }
+}
+.data-perc {
+  &::after {
+    margin-left: .1rem;
+    font-size: 70%;
+    color: currentColor;
+    content: '%';
+  }
+}
+.data-dec {
+  font-size: 85%;
+}

package/src/css/details.css

@@ -0,0 +1,19 @@
+details {
+  ::marker {
+    font-size: .9em;
+    color: var(--stone-7);
+  }
+}
+
+summary {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+
+}
+
+.details-content {
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+}

package/src/css/dialog-content.css

@@ -0,0 +1,72 @@
+.content-dialog {
+  display: none;
+  width: 90dvw;
+  max-width: 900px;
+  height: 90dvh;
+  padding: 1rem;
+  margin: auto;
+  background-color: var(--body-bg);
+  border: none;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-4);
+  transform: translateY(-200vh);
+  animation: dialog-in .3s ease-out;
+
+
+  &[open] {
+    display: block;
+    transform: none;
+  }
+
+  &::backdrop {
+    overscroll-behavior: contain;
+    background-color: color-mix(in srgb, #000 40%, transparent);
+  }
+}
+
+.content-dialog-close {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  align-self: flex-end;
+
+  button {
+    top: -.5rem;
+    right: -.5rem;
+    width: 2rem;
+    aspect-ratio: 1;
+    padding: 4px;
+    background-color: var(--body-bg);
+    border: 1px solid var(--gray-4);
+    border-radius: 50%;
+    box-shadow: var(--shadow-3);
+
+    @media (hover: hover) { /* @media (any-hover: hover) { */
+      &:hover {
+        background-color: color-mix(in srgb, var(--text-color) 10%, transparent);
+      }
+    }
+
+  }
+
+  svg {
+    width: 1.5rem;
+    aspect-ratio: 1;
+  }
+}
+
+.content-dialog-inner {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: .4rem;
+  align-items: stretch;
+  justify-content: flex-start;
+  isolation: isolate;
+}
+.content-dialog-body {
+  position: relative;
+  flex: 1;
+  overflow: auto;
+}

package/src/css/flex.css

@@ -0,0 +1,30 @@
+.flex {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--flex-grid-gap);
+  align-content: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  &.align-items-center {
+    align-items: center;
+  }
+
+  &.gap-2 {
+    gap: calc(var(--flex-grid-gap) * 2);
+  }
+  &.column-gap-2 {
+    column-gap: calc(var(--flex-grid-gap) * 2);
+  }
+
+  &.justify-content-space-between {
+    justify-content: space-between;
+  }
+  &.justify-content-flex-end {
+    justify-content: flex-end;
+  }
+  &.justify-content-center {
+    justify-content: center;
+  }
+
+}

package/src/css/forms/form-edit-info.css

@@ -0,0 +1,17 @@
+/*
+<div class="form-edit-info" title="Ultima modifica effettuata da Gino Bianchi il xxxx">
+  <span>13 Aug 2025 <small>11:54</small></span>
+  <span>Gino Bianchi</span>
+</div>
+*/
+
+.form-edit-info {
+  display: flex;
+  flex-flow: row wrap;
+  gap: .5rem;
+  /* align-content: flex-start; */ /* multiline container */
+  align-items: center;
+  justify-content: flex-end;
+  font-size: var(--font-size-xxs);
+  color: var(--text-muted-color);
+}