@massimo-cassandro/minimo 0.1.0 → 0.1.3

package/src/css/alerts.css

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

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

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-/*
-<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);
-}