@massimo-cassandro/minimo 0.1.2 → 0.1.3

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