@massimo-cassandro/minimo 0.1.3 → 0.1.4

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