@massimo-cassandro/minimo 0.1.11 → 0.2.0

package/src/css/table.css

@@ -1,4 +1,7 @@
-/* wrapper per le tabelle per evitare che superino la largheza dello spazio disponibile */
+/* wrapper per le tabelle per evitare che superino la larghezza dello spazio disponibile */
+
+/* purgecss start ignore */
+
 .table-responsive {
   max-width: 100%;
   overflow-x: auto;
@@ -6,61 +9,65 @@
 
 .table {
 
-  --alternate-row-bg: color-mix(in srgb, var(--stone-3) 40%, transparent);
-  --hover-row-bg: color-mix(in srgb, var(--blue-3) 20%, transparent);
-  --border-color: var(--stone-5);
-  --border: 1px solid var(--border-color);
+  --_alternate-row-bg: var(--table-body-tr-alt-bg-color);
+  --_hover-row-bg: var(--table-body-tr-hover-bg-color);
+  --_border-color: var(--table-border-color);
+  --_border: 1px solid var(--_border-color);
 
   width: 100%;
   margin: 1rem 0;
   border-collapse: collapse;
 
   tr {
-    border-bottom: var(--border);
+    border-bottom: var(--_border);
   }
   thead {
+    background-color: var(--table-thead-background-color);
     tr:last-child {
-      border-width: 3px;
+      border-width: var(--table-thead-border-width);
     }
   }
 
   tbody {
     tr:nth-child(even) {
-      background-color: var(--alternate-row-bg);
+      background-color: var(--_alternate-row-bg);
     }
 
-    @media (--mouse) {
+    @media (hover: hover) {
       tr:hover {
-        background-color: var(--hover-row-bg);
+        background-color: var(--_hover-row-bg);
       }
     }
   }
 
 
   th, td {
-    padding: .3rem .6rem;
-    line-height: 1.3;
-    text-align: start;
+    padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+    line-height: var(--table-cell-line-height);
     vertical-align: top;
+    text-align: start;
   }
 
   &.table-bordered {
-    border: var(--border);
+    border: var(--_border);
 
     th, td {
       &:not(:first-child) {
-        border-inline-start: var(--border);
+        border-inline-start: var(--_border);
       }
     }
   }
 
 }
 
-
+/*
 @media (prefers-color-scheme: dark) {
   .table {
-    --alternate-row-bg: color-mix(in srgb, var(--stone-12) 60%, transparent);
-    --hover-row-bg: color-mix(in srgb, var(--blue-12) 60%, transparent);
-    --border-color: var(--stone-8);
+    --_border-color: var(--_stone-8);
+    --_alternate-row-bg: color-mix(in srgb, var(--_stone-12) 60%, transparent);
+    --_hover-row-bg: color-mix(in srgb, var(--_blue-12) 60%, transparent);
   }
 }
+*/
+
+/* purgecss end ignore */

package/src/css/text.css

@@ -1,6 +1,6 @@
 /* stylelint-disable declaration-no-important */
 p {
-  margin: 0 0 var(--spacing-sm);
+  margin: 0 0 var(--size-sm);
 }
 
 a:link, .btn-link {
@@ -28,15 +28,13 @@ a, .btn-link {
     text-underline-offset: 2px;
   }
   &:active {
-    color: var(--body-bg-color);
-    background-color: var(--link-color);
+    color: var(--body-background-color);
     outline: 2px solid var(--link-color);
+    background-color: var(--link-color);
     offset: 0;
   }
 }
 
-
-
 strong, b {
   font-weight: 700;
 }
@@ -81,7 +79,10 @@ em, .italic {
 .text-xs {
   font-size: var(--font-size-xs);
 }
-small, .small, .text-sm {
+small, .small {
+  font-size: .9em;
+}
+.text-sm {
   font-size: var(--font-size-sm);
 }
 .text-md {
@@ -89,7 +90,7 @@ small, .small, .text-sm {
 }
 
 .text-muted {
-  color: var(--text-muted-color);
+  color: var(--text-muted);
 }
 
 ul {

package/src/css/utilities.css

@@ -1,6 +1,7 @@
 /* da bootstrap */
 /* stylelint-disable declaration-no-important */
 
+/* purgecss start ignore */
 .visually-hidden {
   display: block;
   width: 1px !important;
@@ -8,34 +9,70 @@
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
+  clip-path: rect(0 0 0 0) !important;
 }
+/* purgecss end ignore */
 
 .overflow-hidden {
   overflow: hidden;
 }
 
-@media (--desktop-up) {
-  .desktop-visually-hidden {
+@media (--media-medium-viewport-down) {
+  .d-md-down-none {
+    display: none !important;
+  }
+}
+/*
+.d-md-up-block {
+  display: none;
+
+  @media (--media-medium-viewport-up) {
+    display: block;
+  }
+}
+.d-md-up-flex {
+  display: none;
+
+  @media (--media-medium-viewport-up) {
+    display: flex;
+  }
+} */
+
+/*  TODO da rivedere  */
+/* @media (--media-xlarge-viewport-up) {
+  .xlg-visually-hidden {
+    display: block;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+    clip-path: rect(0 0 0 0) !important;
+  }
+}
+@media (--media-large-viewport-up) {
+  .lg-visually-hidden {
     display: block;
     width: 1px !important;
     height: 1px !important;
     padding: 0 !important;
     margin: -1px !important;
     overflow: hidden !important;
-    clip: rect(0, 0, 0, 0) !important;
     white-space: nowrap !important;
     border: 0 !important;
+    clip-path: rect(0 0 0 0) !important;
   }
 }
 
-@media (--desktop-down) {
-  .small-screen-hidden {
+@media (--media-large-viewport-down) {
+  .sm-screen-hidden {
     display: none !important;
   }
-}
+} */
 
 
 @media print {
@@ -57,24 +94,27 @@
   }
 } */
 
-/* .w-100 {
+.w-100 {
   width: 100% !important;
-} */
-/* .w-auto {
+}
+.w-auto {
   width: auto !important;
-} */
+}
 
-/* .mt-xxs {
-  margin-block-start: var(--spacing-xxs);
-} */
+.mt-xxs {
+  margin-block-start: var(--size-xxs);
+}
+.mt-0 {
+  margin-block-start: 0;
+}
 .mt {
-  margin-block-start: var(--spacing-base);
+  margin-block-start: var(--size-base);
 }
 .mt-lg {
-  margin-block-start: var(--spacing-lg);
+  margin-block-start: var(--size-lg);
 }
 .mt-xl {
-  margin-block-start: var(--spacing-xl);
+  margin-block-start: var(--size-xl);
 }
 .mt-auto {
   margin-block-start: auto;
@@ -82,7 +122,7 @@
 /* @media (--media-large-viewport-up) {
 
   .mt-dsk-lg {
-    margin-block-start: var(--spacing-lg);
+    margin-block-start: var(--size-lg);
   }
 } */
 
@@ -90,18 +130,21 @@
   margin-block-end: 0;
 }
 .mb {
-  margin-block-end: var(--spacing-base);
+  margin-block-end: var(--size-base);
+}
+.mb-xs {
+  margin-block-end: var(--size-xs);
 }
 .mb-lg {
-  margin-block-end: var(--spacing-lg);
+  margin-block-end: var(--size-lg);
+}
+.mb-xl {
+  margin-block-end: var(--size-xl);
 }
-/* .mb-xl {
-  margin-block-end: var(--spacing-xl);
-} */
 /* @media (--media-large-viewport-up) {
 
   .mb-dsk-lg {
-    margin-block-end: var(--spacing-lg);
+    margin-block-end: var(--size-lg);
   }
 } */
 
@@ -110,19 +153,37 @@
 } */
 
 .me {
-  margin-inline-end: var(--spacing-base);
+  margin-inline-end: var(--size-base);
 }
 .me-xs {
-  margin-inline-end: var(--spacing-xs);
+  margin-inline-end: var(--size-xs);
+}
+
+.mx {
+  margin-inline: var(--size-base);
+}
+.mx-0 {
+  margin-inline: 0;
+}
+
+.my {
+  margin-block: var(--size-base);
+}
+.my-0 {
+  margin-block: 0;
 }
 
 .mx-lg {
-  margin-inline: var(--spacing-lg);
+  margin-inline: var(--size-lg);
+}
+
+.my-lg {
+  margin-block: var(--size-lg);
 }
 
 .mx-xl {
-  margin-inline: var(--spacing-xl);
+  margin-inline: var(--size-xl);
 }
 .my-xl {
-  margin-block: var(--spacing-xl);
+  margin-block: var(--size-xl);
 }

package/src/custom-media-default.css

@@ -1,16 +1,28 @@
 /*
-90rem    : 1440px
-64rem    : 1024px
-47.5rem  : 760px
+90rem    : 1440px xxlarge (large desktop)
+80rem    : 1280px xlarge (desktop)
+64rem    : 1024px large (small desktop)
+47.5rem  : 760px  medium (tablet)
+25rem    : 400px  small (phone)
+
+tablet alt:
+53.75rem : 860px  medium (tablet)
 */
 
-@custom-media --media-xlarge-viewport-up (width > 90rem);
-@custom-media --media-large-viewport-up (width > 64rem);
-@custom-media --media-medium-viewport-up (width > 47.5rem);
+/* @custom-media --media-xxlarge-viewport-up (width >= 90rem); */
+@custom-media --media-xlarge-viewport-up (width >= 80rem);
+@custom-media --media-large-viewport-up (width >= 64rem);
+@custom-media --media-medium-viewport-up (width >= 47.5rem);
+@custom-media --media-small-viewport-up (width >= 25rem);
 
-@custom-media --media-large-viewport-only (64rem < width <= 90rem);
+@custom-media --media-xxlarge-viewport-only (width >= 90rem);
+@custom-media --media-xlarge-viewport-only (64rem < width <= 80rem);
+@custom-media --media-large-viewport-only (64rem < width <= 80rem);
 @custom-media --media-medium-viewport-only (47.5rem < width <= 64rem);
 @custom-media --media-small-viewport-only (width <= 47.5rem);
 
-@custom-media --media-xlarge-viewport-down (max-width: 90rem);
+@custom-media --media-xxlarge-viewport-down (max-width: 90rem);
+@custom-media --media-xlarge-viewport-down (max-width: 80rem);
 @custom-media --media-large-viewport-down (max-width: 64rem);
+@custom-media --media-medium-viewport-down (max-width: 47.5rem);
+/* @custom-media --media-small-viewport-down (max-width: 25rem); */