@massimo-cassandro/minimo 0.1.0 → 0.1.3

package/README.md

@@ -3,3 +3,9 @@
 Very light-size framework
 
 ...and some [snippets](snippets/snippets.md)
+
+## Install
+
+```bash
+npm i @massimo-cassandro/minimo
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Light css framework",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
   "bugs": {
@@ -10,6 +10,12 @@
     "type": "git",
     "url": "git+https://github.com/massimo-cassandro/minimo.git"
   },
+  "scripts": {
+    "UPD-version": "npx update-version  # --config=./dev-utilities.config.mjs",
+    "upd@m": "npx upd@m",
+    "pre-publish": "bash pre-publish.sh",
+    "npm-publish": "npm run pre-publish && (cd dist && npm publish); rm -rf dist"
+  },
   "license": "MIT",
   "author": "Massimo Cassandro",
   "publishConfig": {
@@ -19,9 +25,9 @@
   "style": "./src/index.css",
   "main": "./src/index.js",
   "files": [
-    "./src/**/*.*"
+    "dist/**/*"
   ],
   "devDependencies": {
     "@massimo-cassandro/dev-updater": "^2.1.0"
   }
-}
+}

package/src/TODO custom-properties.scss

@@ -1,230 +0,0 @@
-/* stylelint-disable function-no-unknown */
-@use 'sass:math';
-@use 'sass:map';
-
-
-$media-breakpoints: (
-  mobile: 400px,
-  desktop: 1000px,
-  // ...other values can go in here
-);
-
-
-@function rnd($number, $places: 2) {
-  $n: 1;
-  @if $places > 0 {
-    @for $i from 1 through $places {
-      $n: $n * 10;
-    }
-  }
-  @return math.div(math.round($number * $n), $n);
-}
-
-@function to-rems($px) {
-  $rems: math.div($px, 16px) * 1rem;
-  @return $rems;
-}
-
-@function clamped($min-px, $max-px, $min-bp: $default-min-bp, $max-bp: $default-max-bp) {
-  $slope: math.div($max-px - $min-px, $max-bp - $min-bp);
-  $slope-vw: rnd($slope * 100, 2);
-  $intercept-rems: rnd(to-rems($min-px - $slope * $min-bp), 2);
-  $min-rems: rnd(to-rems($min-px), 2);
-  $max-rems: rnd(to-rems($max-px), 2);
-  @return clamp(#{$min-rems}, #{$slope-vw}vw + #{$intercept-rems}, #{$max-rems});
-}
-
-
-:root {
-  color-scheme: light dark;
-
-  --container-max-width: 90rem;
-  --font-family: 'Merriweather Sans Variable', sans-serif;
-  --font-family-mono: 'Monaspace Neon Var', 'Monaspace Neon', 'Aptos Mono', 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Andale Mono', 'Courier New', monospace;
-  --font-family-redacted: 'Redacted Script', system-ui;
-
-  /* figma */
-  --body-bg-color: var(--stone-2);
-  --text-color: #000;
-  --box-bg-color: var(--stone-0);
-  --box-2-bg-color: var(--sand-1);
-  --box-3-bg-color: var(--sand-2);
-  --box-2-text-color: var(--body-text);
-  --footer-bg-color: #282c35;
-  --footer-fg-color: #fff;
-  --footer-link: var(--yellow-5);
-  --link-color: var(--primary);
-  --primary: #203c6e;
-  --secondary: #a3384e;
-  --secondary-fg: var(--box-bg-color);
-  /* end figma */
-
-  --text-muted-color: var(--stone-7);
-  --link-visited-color: var(--camo-9);
-
-
-  --font-weight-light: 300;
-  --font-weight-regular: 400;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extra-bold: 800;
-
-  --flex-grid-gap: 1.5rem;
-
-  --font-size-base: 1rem;
-  --font-size-base: clamp(.9em, 9vw, 1em);
-  --font-size-xxs: .7em;
-  --font-size-xxs: clamp(.7em, 1.5vw, .8em);
-  --font-size-xs: .8em;
-  --font-size-xs: clamp(.85em, 10vw, .95em);
-  --font-size-sm: .9em;
-  --font-size-md: 1.2rem;
-  /*
-  https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS4wNXJlbSIsIm1heEZvbnRTaXplIjoiMS4zcmVtIn0%3D
-  */
-  --font-size-md-lg-fluid: clamp(1.05rem, 0.4346rem + 0.9615vw, 1.3rem);
-
-  /*
-  https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS4wMnJlbSIsIm1heEZvbnRTaXplIjoiMS4ycmVtIn0%3D
-  */
-  --font-size-lg: clamp(1.02rem, 0.5769rem + 0.6923vw, 1.2rem);
-  --font-size-lg: 1.8em;
-  --font-size-xl: 2.5em;
-  --font-size-2xl: 3em;
-
-  --line-height-base: 1.5;
-  --headings-text-align: start;
-
-
-  --form-text-color: var(--cyan-12);
-  --form-bg-color: var(--gray-0);
-  --form-input-group-bg-color: var(--gray-1);
-  --form-border-color: var(--gray-6);
-  --form-disabled-bg-color: var(--gray-2);
-  --form-placeholder-color: var(--sand-6);
-  --form-required-flag-color: var(--red-8);
-  --form-required-flag-content: '\002A';
-  --form-fieldset-border-width: 1px;
-  --form-legend-bg-color: var(--stone-3);
-  --form-legend-color: #333; /*  var(--text-color); */
-
-  --form-btns-border-radius: var(--radius-sm);
-  --form-btns-padding-y: var(--spacing-xxs);
-  --form-btns-padding-x: var(--spacing-xs);
-  --form-btns-font-size: clamp(.85rem, 6vw, 1rem);
-  --form-btns-sm-font-size: clamp(.75rem, 6vw, .9rem);
-  --form-btns-sm-padding-x: .8rem;
-  --form-btns-sm-padding-y: .1rem;
-  --form-btns-focus-color: hsl(205 69% 45% / .508);
-  --form-btns-outline-width: 3px;
-
-  --btn-primary-bg-color: linear-gradient(45deg, var(--green-9), var(--green-10));
-  --btn-primary-fg-color: var(--gray-0);
-  --btn-primary-border-color: var(--green-10);
-  --btn-primary-hover-bg-color: var(--green-11);
-  --btn-primary-hover-fg-color: var(--btn-primary-fg-color);
-  --btn-primary-hover-border-color: var(--btn-primary-border-color);
-  --btn-primary-active-bg-color: var(--green-12);
-  --btn-primary-active-fg-color: var(--btn-primary-fg-color);
-  --btn-primary-active-border-color: var(--btn-primary-active-bg-color);
-  --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-border-color) 25%, transparent);
-
-  --btn-secondary-bg-color: var(--stone-4);
-  --btn-secondary-fg-color: var(--stone-9);
-  --btn-secondary-border-color: var(--stone-6);
-  --btn-secondary-hover-bg-color: var(--stone-5);
-  --btn-secondary-hover-fg-color: var(--stone-11);
-  --btn-secondary-hover-border-color: var(--btn-secondary-border-color);
-  --btn-secondary-active-bg-color: var(--stone-11);
-  --btn-secondary-active-fg-color: var(--stone-0);
-  --btn-secondary-active-border-color: var(--btn-secondary-active-bg-color);
-  --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-border-color) 50%, transparent);
-
-  /* --btn-o-primary-bg-color: var(--primary-150);
-  --btn-o-primary-fg-color: var(--primary-10);
-  --btn-o-primary-border-color: var(--btn-bg-color);
-  --btn-o-primary-hover-bg-color: var(--primary-10);
-  --btn-o-primary-hover-fg-color: var(--primary-150);
-  --btn-o-primary-hover-border-color: var(--btn-fg-color);
-  --btn-o-primary-active-bg-color: var(--primary-150);
-  --btn-o-primary-active-fg-color: var(--primary-10);
-  --btn-o-primary-active-border-color: var(--btn-bg-color);
-  --btn-o-primary-focus-outline-color: var(--btn-bg-color); */
-
-  --btn-o-secondary-bg-color: color-mix(in srgb, var(--secondary) 5%, transparent);
-  --btn-o-secondary-fg-color: var(--secondary);
-  --btn-o-secondary-border-color: var(--secondary);
-  --btn-o-secondary-hover-bg-color: color-mix(in srgb, var(--secondary) 15%, #fff);
-  --btn-o-secondary-hover-fg-color: var(--secondary);
-  --btn-o-secondary-hover-border-color: var(--btn-o-secondary-border-color);
-  --btn-o-secondary-active-bg-color: var(--secondary);
-  --btn-o-secondary-active-fg-color: var(--secondary-fg);
-  --btn-o-secondary-active-border-color: var(--btn-o-secondary-border-color);
-  --btn-o-secondary-focus-outline-color: color-mix(in srgb, var(--secondary) 50%, #fff);
-
-  --spacing-xxs: .25rem;
-  --spacing-xs: .5rem;
-  --spacing-sm: .75rem;
-  --spacing-base: 1rem;
-  --spacing-md: 1.2rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-  --spacing-2xl: 3rem;
-  --spacing-3xl: 4rem;
-
-  --radius-xxs: var(--spacing-xxs);
-  --radius-xs: var(--spacing-xs);
-  --radius-base: var(--spacing-base);
-  --radius-md: var(--spacing-md);
-  --radius-pill: 999rem;
-
-  --body-v-padding: var(--spacing-base);
-  --content-box-margin-top: var(--spacing-lg);
-  --box-shadow-base: 0 0 1.2rem #00000040;
-  --box-radius: var(--radius-md);
-  --logo-filter: brightness(0) invert(84%) sepia(4%) saturate(436%) hue-rotate(12deg) brightness(93%) contrast(87%);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color-scheme: dark;
-
-    /* figma */
-    --text-color: #fff;
-    --body-bg-color: var(--stone-11);
-    --box-bg-color: var(--stone-9);
-    --box-2-bg-color: var(--stone-10);
-    --box-2-text-color: #fff;
-    --link-color: var(--yellow-5);
-    --primary: #426095;
-    --secondary: var(--yellow-10);
-    --secondary-fg: #fff;
-    /* end figma */
-
-
-    --text-muted-color: var(--stone-5);
-    --link-visited-color: var(--sand-3);
-
-    --btn-primary-bg-color: linear-gradient(45deg, var(--green-9), var(--green-10));
-    --btn-primary-fg-color: var(--gray-0);
-    --btn-primary-border-color: var(--green-10);
-    --btn-primary-hover-bg-color: var(--green-11);
-    --btn-primary-hover-fg-color: var(--btn-primary-fg-color);
-    --btn-primary-hover-border-color: var(--btn-primary-border-color);
-    --btn-primary-active-bg-color: var(--green-12);
-    --btn-primary-active-fg-color: var(--btn-primary-fg-color);
-    --btn-primary-active-border-color: var(--btn-primary-active-bg-color);
-    --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-border-color) 25%, transparent);
-
-    --btn-secondary-bg-color: var(--stone-4);
-    --btn-secondary-fg-color: var(--stone-9);
-    --btn-secondary-border-color: var(--stone-6);
-    --btn-secondary-hover-bg-color: var(--stone-5);
-    --btn-secondary-hover-fg-color: var(--stone-11);
-    --btn-secondary-hover-border-color: var(--btn-secondary-border-color);
-    --btn-secondary-active-bg-color: var(--stone-11);
-    --btn-secondary-active-fg-color: var(--stone-0);
-    --btn-secondary-active-border-color: var(--btn-secondary-active-bg-color);
-    --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-border-color) 50%, transparent);
-  }
-}

package/src/components/auto-datatable/auto-datatable.css

@@ -1,355 +0,0 @@
-/* stylelint-disable selector-class-pattern */
-/* @import '@massimo-cassandro/auto-datatables-bs5/css/index.css'; */
-
-@import '@massimo-cassandro/auto-datatables-bs5/css/crea-datatable.css';
-@import '@massimo-cassandro/auto-datatables-bs5/css/datatable-processing.css';
-@import '@massimo-cassandro/auto-datatables-bs5/css/datatable-controls-bs.css';
-@import '@massimo-cassandro/auto-datatables-bs5/css/datatable-table-bs.css';
-/* @import '@massimo-cassandro/auto-datatables-bs5/css/datatable-sorting.css'; */
-/* @import '@massimo-cassandro/auto-datatables-bs5/css/datatable-pagination-bs.css'; */
-@import '@massimo-cassandro/auto-datatables-bs5/css/datatables-classes.css';
-/* @import '@massimo-cassandro/auto-datatables-bs5/css/datatable-responsive.css'; */
-
-
-/*
-<div class="dt-container m-datatable" data-cdt-options="..." data-cdt_options="..." data-dt-columns="...">
-  <div class="datatable-wrapper no-footer">
-    <div class="dt-controls">
-      <div class="datatable-length">
-        <label>
-          <di class=="dt-control-label">Mostra</di>
-          <div class="dt-control">
-            <select name="cdt-dom-2_length" class="form-control form-control-sm">
-              <option value="...">...</option>
-            </select>
-          </div>
-          <div>record per pagina</div>
-        </label>
-      </div>
-      <div class="datatable-filter"><label>
-          <div class=="dt-control-label">>Filtra risultati:</div>
-          <div class="dt-control">
-            <input type="search" class="form-control form-control-sm" placeholder=""></div>
-        </label></div>
-    </div>
-    <div class="dt-table-wrapper">
-      <table  class="table table-striped table-bordered table-hover dataTable no-footer" >
-        ...
-      </table>
-    </div>
-    <div class="dataTables_processing">...</div>
-
-    <div class="dt-footer">
-      <div class="dataTables_info" role="status" aria-live="polite">Stai visualizzando...</div>
-
-      <div class="dataTables_paginate paging_simple_numbers">
-       ...
-      </div>
-
-    </div>
-
-  </div>
-</div>
-*/
-
-
-
-.m-datatable {
-
-
-  /* --datatable-responsive-border-color: #ccc; */
-  /* --datatable-processing-padding: 0; */
-  /* --datatable-processing-bg: linear-gradient(to right, rgba(#fff, 0) 0%, rgba(#fff, .9) 25%, rgba(#fff, .9) 75%, rgba(#fff, 0) 100%); */
-
-  /* --sorting-cell-base-padding: .5em; */
-
-  /* --datatable-active-sorting-color: currentColor; */
-  /* --datatable-active-sorting-bg: inherit; */
-  /* --datatable-active-sorting-border-bottom: none; */
-
-  /* --sorting-arrow-size: 4px; */
-  /* --datatable-sorting-arrows-color: currentColor; */
-  /* --sorting-cell-arrow-padding: var(--sorting-cell-base-padding) 1.5em var(--sorting-cell-base-padding) var(--sorting-cell-base-padding); */
-  /* --sorting-arrow-bottom: 50%; */
-
-  /* --pagination-padding-x: .5rem; */
-  --pagination-padding-y: .4rem;
-  /* --pagination-font-size: .875rem; */
-
-  --pagination-color: var(--text-color);
-  /* --pagination-bg: #fff; */
-  /* --pagination-border-width: 1px; */
-  --pagination-border-color: var(--stone-5);
-
-  /* --pagination-border-radius: .25rem; */
-  --pagination-hover-color: var(--accent-3-fg);
-  --pagination-hover-bg: var(--accent-3);
-  /* --pagination-hover-border-color: var(--pagination-border-color); */
-  /* --pagination-focus-color: var(--pagination-hover-color); */
-  /* --pagination-focus-bg: var(--pagination-hover-bg); */
-  /* --pagination-focus-box-shadow: 0 0 0 .25rem #06407a40; */
-  --pagination-active-color: var(--secondary-fg);
-  --pagination-active-bg: var(--secondary);
-  /* --pagination-active-border-color: #007e8a; */
-  /* --pagination-disabled-color: #ababab; */
-  /* --pagination-disabled-bg: var(--pagination-hover-bg); */
-  /* --pagination-disabled-border-color: var(--pagination-border-color); */
-
-
-  --sorting-border-size: 6px;
-  --sorting-border-color: var(--secondary);
-
-  position: relative;
-
-  .dt-controls {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
-
-    > div {
-      max-width: 100%;
-    }
-  }
-
-  .icon {
-    width: 1.1em;
-  }
-
-
-  @media (--desktop-down) {
-    /* .dt-control-label {} */
-    .dt-controls {
-      flex-direction: column;
-      justify-content: center;
-    }
-  }
-}
-
-@media print {
-  .m-datatable {
-    .dt-controls, .dt-footer {
-      display: none;
-    }
-  }
-}
-
-
-/* https://css-tip.com/overflow-detection/ */
-/* https://csscade.com/can-you-detect-overflow-with-css/ */
-.dt-table-wrapper {
-  max-width: 100%;
-  overflow-x: auto;
-
-  /* animation-timeline: scroll(self);
-  animation: detect-scroll linear;
-  --bg-if-can-scroll: var(--can-scroll) lime;
-  --bg-if-cant-scroll: red;
-  background: var(--bg-if-can-scroll, var(--bg-if-cant-scroll)); */
-
-
-  .table thead th {
-    vertical-align: middle;
-  }
-
-  .sorting_disabled,
-  .sorting_asc_disabled,
-  .sorting_desc_disabled {
-    cursor: default;
-  }
-
-  .sorting {
-    position: relative;
-    cursor: pointer;
-
-
-    @media (--mouse) {
-      &:hover {
-        /* --datatable_active_sorting_color */
-
-        --datatable-active-sorting-bg: color-mix(in srgb, var(--accent-1) 10%, transparent);
-        /* stylelint-disable-next-line declaration-block-no-duplicate-custom-properties */
-        --datatable-active-sorting-bg: light-dark(color-mix(in srgb, var(--accent-1) 10%, transparent), color-mix(in srgb, var(--accent-1) 30%, transparent));
-
-        /* --datatable-active-sorting-border-bottom */
-      }
-    }
-  }
-
-
-  .sorting_asc, .sorting_desc{
-    &::after {
-      position: absolute;
-      right: 0;
-      left: 0;
-      display: block;
-      height: var(--sorting-border-size);
-      content: '';
-      background-color: var(--sorting-border-color);
-
-    }
-    /* border-bottom: var(--sorting-border-size) solid var(--sorting-border-color); */
-  }
-  .sorting_asc{
-    &::after {
-      top: calc(-1 * var(--sorting-border-size) / 2);
-
-    }
-  }
-  .sorting_desc{
-    &::after {
-      bottom: calc(-1 * var(--sorting-border-size) / 2);
-    }
-  }
-}
-
-/*
-@keyframes detect-scroll {
-  from, to {
-    --can-scroll:;
-  }
-} */
-
-
-.dt-footer {
-  display: flex;
-  flex-flow: column wrap;
-  gap: .5rem;
-  align-items: center;
-  justify-content: center;
-  margin-block: 1rem;
-
-  @media (--desktop-up) {
-    flex-direction: row;
-    gap: 2rem;
-    justify-content: space-between;
-  }
-}
-
-.dataTables_info {
-  font-size: var(--font-size-xs);
-  /* color: var(--text-muted-color); */
-}
-
-/*
-<div class="dataTables_paginate paging_simple_numbers">
-  <a class="paginate_button previous disabled" aria-disabled="true" role="link" data-dt-idx="previous" tabindex="-1"></a>
-
-  <span>
-    <a class="paginate_button current" role="link" aria-current="page" data-dt-idx="0" tabindex="0">1</a>
-    <a class="paginate_button " role="link" data-dt-idx="1" tabindex="0">2</a>
-    <span class="ellipsis">…</span>
-    <a class="paginate_button " role="link" data-dt-idx="9" tabindex="0">10</a>
-  </span>
-
-  <a class="paginate_button next" role="link" data-dt-idx="next" tabindex="0"></a>
-</div>
-*/
-
-.dataTables_paginate {
-  display: flex;
-  flex-flow: row nowrap;
-  gap: 0;
-  align-items: center;
-  justify-content: flex-end;
-
-  > span {
-
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 0;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .paginate_button, .ellipsis {
-    display: flex;
-    justify-content: center;
-    padding: var(--pagination-padding-y) var(--pagination-padding-x);
-    font-size: var(--pagination-font-size);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1;
-    color: var(--pagination-color);
-    border: var(--pagination-border-width) var(--pagination-border-color);
-    border-style: solid solid solid none;
-  }
-
-  .ellipsis {
-    justify-content: flex-end;
-  }
-
-  .paginate_button {
-    align-items: center;
-    text-decoration: none;
-    cursor: pointer;
-    background-color: var(--pagination-bg);
-    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-    &.previous, &.next {
-      display: none;
-    }
-
-    &:first-child {
-      border-style: solid;
-      border-top-left-radius: var(--pagination-border-radius);
-      border-bottom-left-radius: var(--pagination-border-radius);
-    }
-    &:last-child {
-      border-top-right-radius: var(--pagination-border-radius);
-      border-bottom-right-radius: var(--pagination-border-radius);
-    }
-
-    &:hover {
-      z-index: 2;
-      color: var(--pagination-hover-color);
-      text-decoration: none;
-      background-color: var(--pagination-hover-bg);
-      border-color: var(--pagination-hover-border-color);
-    }
-
-    &:focus {
-      z-index: 3;
-      color: var(--pagination-focus-color);
-      background-color: var(--pagination-focus-bg);
-      outline: 0;
-      box-shadow: var(--pagination-focus-box-shadow);
-    }
-
-    &.current {
-      z-index: 3;
-      color: var(--pagination-active-color);
-      background-color: var(--pagination-active-bg);
-      border-color: var(--pagination-active-border-color);
-    }
-
-    &.disabled,
-    .disabled > & {
-      color: var(--pagination-disabled-color);
-      pointer-events: none;
-      background-color: var(--pagination-disabled-bg);
-      border-color: var(--pagination-disabled-border-color);
-    }
-  }
-
-  .page-item {
-    &:not(:first-child) .page-link {
-      margin-left: calc(-1 * var(--pagination-border-width));
-    }
-
-    &:first-child {
-      .page-link {
-        border-radius: var(--pagination-border-radius) 0 0 var(--pagination-border-radius);
-      }
-    }
-
-    &:last-child {
-      .page-link {
-        border-radius: 0 var(--pagination-border-radius) var(--pagination-border-radius) 0;
-      }
-    }
-
-  }
-
-
-}