npm - @keenmate/pure-css - Versions diffs - 1.1.1 → 1.2.0 - Mend

@keenmate/pure-css 1.1.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/CHANGELOG.md +65 -0
package/COMPONENTS.md +149 -0
package/README.md +17 -5
package/components.json +2692 -0
package/dist/css/base.css +1 -0
package/dist/css/pure-css.css +316 -15
package/dist/css/utilities.css +237 -0
package/package.json +86 -83
package/src/scss/_base-css-variables.scss +4 -0
package/src/scss/_layout-responsive.scss +123 -92
package/src/scss/utilities.scss +59 -10
package/src/scss/variables/_base.scss +8 -0

package/dist/css/base.css CHANGED Viewed

@@ -124,6 +124,7 @@
   --base-border-radius-sm: 0.4;
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
+  --base-checkbox-scale: 1;
   --base-rem: 1rem;
   --base-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 18 6-6-6-6%22/%3E%3C/svg%3E");
   --base-icon-caret-down: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 15 6 9h12z%22/%3E%3C/svg%3E");

package/dist/css/pure-css.css CHANGED Viewed

@@ -2961,8 +2961,8 @@ body.pc-layout--sticky .pc-layout__inner {
 }
 @media (max-width: 768px) {
-  .pc-layout__sidebar,
-  .pc-layout__sidebar--icon-collapse {
+  body .pc-layout__sidebar,
+  body .pc-layout__sidebar--icon-collapse {
     position: fixed;
     top: 4.8rem;
     inset-inline-start: 0;
@@ -2977,15 +2977,11 @@ body.pc-layout--sticky .pc-layout__inner {
     transform: translateX(-100%);
     visibility: hidden;
   }
-  body.loaded .pc-layout__sidebar,
-  body.loaded .pc-layout__sidebar--icon-collapse {
-    transition: transform 0.25s ease-out, visibility 0.25s ease-out;
-  }
-  [dir=rtl] .pc-layout__sidebar,
-  [dir=rtl] .pc-layout__sidebar--icon-collapse {
+  [dir=rtl] body .pc-layout__sidebar,
+  [dir=rtl] body .pc-layout__sidebar--icon-collapse {
     transform: translateX(100%);
   }
-  .pc-layout__sidebar--icon-collapse .pc-sidebar__label {
+  body .pc-layout__sidebar--icon-collapse .pc-sidebar__label {
     opacity: 1 !important;
     width: auto !important;
     overflow: visible !important;
@@ -3003,23 +2999,27 @@ body.pc-layout--sticky .pc-layout__inner {
     visibility: hidden;
     pointer-events: none;
   }
-  body.loaded body::before {
+  body.loaded .pc-layout__sidebar,
+  body.loaded .pc-layout__sidebar--icon-collapse {
+    transition: transform 0.25s ease-out, visibility 0.25s ease-out;
+  }
+  body.loaded::before {
     transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
   }
-  .sidebar-visible {
+  body.sidebar-visible {
     overflow: hidden;
   }
-  .sidebar-visible .pc-layout__sidebar,
-  .sidebar-visible .pc-layout__sidebar--icon-collapse {
+  body.sidebar-visible .pc-layout__sidebar,
+  body.sidebar-visible .pc-layout__sidebar--icon-collapse {
     transform: translateX(0);
     visibility: visible;
   }
-  .sidebar-visible::before {
+  body.sidebar-visible::before {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
   }
-  .pc-sidebar-resize {
+  body .pc-sidebar-resize {
     display: none;
   }
   .pc-navbar__inner {
@@ -3032,6 +3032,69 @@ body.pc-layout--sticky .pc-layout__inner {
     display: none;
   }
 }
+@media (min-width: 769px) {
+  body.sidebar-overlay .pc-layout__sidebar,
+  body.sidebar-overlay .pc-layout__sidebar--icon-collapse {
+    position: fixed;
+    top: 4.8rem;
+    inset-inline-start: 0;
+    bottom: 0;
+    width: 28.8rem;
+    z-index: 1050;
+    background-color: var(--pc-sidebar-bg, var(--base-page-bg));
+    opacity: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-inline-end: none;
+    transform: translateX(-100%);
+    visibility: hidden;
+  }
+  [dir=rtl] body.sidebar-overlay .pc-layout__sidebar,
+  [dir=rtl] body.sidebar-overlay .pc-layout__sidebar--icon-collapse {
+    transform: translateX(100%);
+  }
+  body.sidebar-overlay .pc-layout__sidebar--icon-collapse .pc-sidebar__label {
+    opacity: 1 !important;
+    width: auto !important;
+    overflow: visible !important;
+    position: static !important;
+  }
+  body.sidebar-overlay::before {
+    content: "";
+    position: fixed;
+    top: 4.8rem;
+    inset-inline: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1040;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  body.sidebar-overlay.loaded .pc-layout__sidebar,
+  body.sidebar-overlay.loaded .pc-layout__sidebar--icon-collapse {
+    transition: transform 0.25s ease-out, visibility 0.25s ease-out;
+  }
+  body.sidebar-overlay.loaded::before {
+    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
+  }
+  body.sidebar-overlay.sidebar-visible {
+    overflow: hidden;
+  }
+  body.sidebar-overlay.sidebar-visible .pc-layout__sidebar,
+  body.sidebar-overlay.sidebar-visible .pc-layout__sidebar--icon-collapse {
+    transform: translateX(0);
+    visibility: visible;
+  }
+  body.sidebar-overlay.sidebar-visible::before {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+  body.sidebar-overlay .pc-sidebar-resize {
+    display: none;
+  }
+}
 @media (max-width: 1024px) and (min-width: 769px) {
   .pc-layout__sidebar {
     width: min(var(--pc-local-sidebar-width), 16rem);
@@ -5734,42 +5797,279 @@ body.pc-layout--sticky .pc-layout__inner {
   color: var(--pc-info-text) !important;
 }
+.bg-primary {
+  background-color: var(--pc-accent) !important;
+}
+.text-on-primary {
+  color: var(--base-text-on-primary) !important;
+}
+.surface-primary {
+  background-color: var(--pc-accent) !important;
+  color: var(--base-text-on-primary) !important;
+}
+.bg-success {
+  background-color: var(--pc-success) !important;
+}
+.text-on-success {
+  color: var(--base-text-on-success) !important;
+}
+.surface-success {
+  background-color: var(--pc-success) !important;
+  color: var(--base-text-on-success) !important;
+}
+.bg-warning {
+  background-color: var(--pc-warning) !important;
+}
+.text-on-warning {
+  color: var(--base-text-on-warning) !important;
+}
+.surface-warning {
+  background-color: var(--pc-warning) !important;
+  color: var(--base-text-on-warning) !important;
+}
+.bg-danger {
+  background-color: var(--pc-danger) !important;
+}
+.text-on-danger {
+  color: var(--base-text-on-danger) !important;
+}
+.surface-danger {
+  background-color: var(--pc-danger) !important;
+  color: var(--base-text-on-danger) !important;
+}
+.bg-info {
+  background-color: var(--pc-info) !important;
+}
+.text-on-info {
+  color: var(--base-text-on-info) !important;
+}
+.surface-info {
+  background-color: var(--pc-info) !important;
+  color: var(--base-text-on-info) !important;
+}
+.text-body {
+  color: var(--pc-text-color-1) !important;
+}
+.text-secondary {
+  color: var(--pc-text-color-2) !important;
+}
+.text-caption {
+  font-size: 1.2rem;
+  color: var(--pc-text-color-2);
+  margin-bottom: 0.8rem;
+}
+.text-lead {
+  font-size: 1.6rem;
+  line-height: 1.8;
+}
 .text-color-1 {
   color: var(--pc-color-1) !important;
 }
+.bg-color-1 {
+  background-color: var(--pc-color-1) !important;
+}
+.border-color-1 {
+  border-color: var(--pc-color-1) !important;
+}
+.text-on-color-1 {
+  color: var(--pc-color-1-text) !important;
+}
+.surface-color-1 {
+  background-color: var(--pc-color-1) !important;
+  color: var(--pc-color-1-text) !important;
+}
 .text-color-2 {
   color: var(--pc-color-2) !important;
 }
+.bg-color-2 {
+  background-color: var(--pc-color-2) !important;
+}
+.border-color-2 {
+  border-color: var(--pc-color-2) !important;
+}
+.text-on-color-2 {
+  color: var(--pc-color-2-text) !important;
+}
+.surface-color-2 {
+  background-color: var(--pc-color-2) !important;
+  color: var(--pc-color-2-text) !important;
+}
 .text-color-3 {
   color: var(--pc-color-3) !important;
 }
+.bg-color-3 {
+  background-color: var(--pc-color-3) !important;
+}
+.border-color-3 {
+  border-color: var(--pc-color-3) !important;
+}
+.text-on-color-3 {
+  color: var(--pc-color-3-text) !important;
+}
+.surface-color-3 {
+  background-color: var(--pc-color-3) !important;
+  color: var(--pc-color-3-text) !important;
+}
 .text-color-4 {
   color: var(--pc-color-4) !important;
 }
+.bg-color-4 {
+  background-color: var(--pc-color-4) !important;
+}
+.border-color-4 {
+  border-color: var(--pc-color-4) !important;
+}
+.text-on-color-4 {
+  color: var(--pc-color-4-text) !important;
+}
+.surface-color-4 {
+  background-color: var(--pc-color-4) !important;
+  color: var(--pc-color-4-text) !important;
+}
 .text-color-5 {
   color: var(--pc-color-5) !important;
 }
+.bg-color-5 {
+  background-color: var(--pc-color-5) !important;
+}
+.border-color-5 {
+  border-color: var(--pc-color-5) !important;
+}
+.text-on-color-5 {
+  color: var(--pc-color-5-text) !important;
+}
+.surface-color-5 {
+  background-color: var(--pc-color-5) !important;
+  color: var(--pc-color-5-text) !important;
+}
 .text-color-6 {
   color: var(--pc-color-6) !important;
 }
+.bg-color-6 {
+  background-color: var(--pc-color-6) !important;
+}
+.border-color-6 {
+  border-color: var(--pc-color-6) !important;
+}
+.text-on-color-6 {
+  color: var(--pc-color-6-text) !important;
+}
+.surface-color-6 {
+  background-color: var(--pc-color-6) !important;
+  color: var(--pc-color-6-text) !important;
+}
 .text-color-7 {
   color: var(--pc-color-7) !important;
 }
+.bg-color-7 {
+  background-color: var(--pc-color-7) !important;
+}
+.border-color-7 {
+  border-color: var(--pc-color-7) !important;
+}
+.text-on-color-7 {
+  color: var(--pc-color-7-text) !important;
+}
+.surface-color-7 {
+  background-color: var(--pc-color-7) !important;
+  color: var(--pc-color-7-text) !important;
+}
 .text-color-8 {
   color: var(--pc-color-8) !important;
 }
+.bg-color-8 {
+  background-color: var(--pc-color-8) !important;
+}
+.border-color-8 {
+  border-color: var(--pc-color-8) !important;
+}
+.text-on-color-8 {
+  color: var(--pc-color-8-text) !important;
+}
+.surface-color-8 {
+  background-color: var(--pc-color-8) !important;
+  color: var(--pc-color-8-text) !important;
+}
 .text-color-9 {
   color: var(--pc-color-9) !important;
 }
+.bg-color-9 {
+  background-color: var(--pc-color-9) !important;
+}
+.border-color-9 {
+  border-color: var(--pc-color-9) !important;
+}
+.text-on-color-9 {
+  color: var(--pc-color-9-text) !important;
+}
+.surface-color-9 {
+  background-color: var(--pc-color-9) !important;
+  color: var(--pc-color-9-text) !important;
+}
 .rounded {
   border-radius: var(--pc-border-radius) !important;
 }
@@ -6086,6 +6386,7 @@ body.pc-layout--sticky .pc-layout__inner {
   --base-border-radius-sm: 0.4;
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
+  --base-checkbox-scale: 1;
   --base-rem: 1rem;
   --base-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 18 6-6-6-6%22/%3E%3C/svg%3E");
   --base-icon-caret-down: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 15 6 9h12z%22/%3E%3C/svg%3E");

package/dist/css/utilities.css CHANGED Viewed

@@ -2583,42 +2583,279 @@
   color: var(--pc-info-text) !important;
 }
+.bg-primary {
+  background-color: var(--pc-accent) !important;
+}
+.text-on-primary {
+  color: var(--base-text-on-primary) !important;
+}
+.surface-primary {
+  background-color: var(--pc-accent) !important;
+  color: var(--base-text-on-primary) !important;
+}
+.bg-success {
+  background-color: var(--pc-success) !important;
+}
+.text-on-success {
+  color: var(--base-text-on-success) !important;
+}
+.surface-success {
+  background-color: var(--pc-success) !important;
+  color: var(--base-text-on-success) !important;
+}
+.bg-warning {
+  background-color: var(--pc-warning) !important;
+}
+.text-on-warning {
+  color: var(--base-text-on-warning) !important;
+}
+.surface-warning {
+  background-color: var(--pc-warning) !important;
+  color: var(--base-text-on-warning) !important;
+}
+.bg-danger {
+  background-color: var(--pc-danger) !important;
+}
+.text-on-danger {
+  color: var(--base-text-on-danger) !important;
+}
+.surface-danger {
+  background-color: var(--pc-danger) !important;
+  color: var(--base-text-on-danger) !important;
+}
+.bg-info {
+  background-color: var(--pc-info) !important;
+}
+.text-on-info {
+  color: var(--base-text-on-info) !important;
+}
+.surface-info {
+  background-color: var(--pc-info) !important;
+  color: var(--base-text-on-info) !important;
+}
+.text-body {
+  color: var(--pc-text-color-1) !important;
+}
+.text-secondary {
+  color: var(--pc-text-color-2) !important;
+}
+.text-caption {
+  font-size: 1.2rem;
+  color: var(--pc-text-color-2);
+  margin-bottom: 0.8rem;
+}
+.text-lead {
+  font-size: 1.6rem;
+  line-height: 1.8;
+}
 .text-color-1 {
   color: var(--pc-color-1) !important;
 }
+.bg-color-1 {
+  background-color: var(--pc-color-1) !important;
+}
+.border-color-1 {
+  border-color: var(--pc-color-1) !important;
+}
+.text-on-color-1 {
+  color: var(--pc-color-1-text) !important;
+}
+.surface-color-1 {
+  background-color: var(--pc-color-1) !important;
+  color: var(--pc-color-1-text) !important;
+}
 .text-color-2 {
   color: var(--pc-color-2) !important;
 }
+.bg-color-2 {
+  background-color: var(--pc-color-2) !important;
+}
+.border-color-2 {
+  border-color: var(--pc-color-2) !important;
+}
+.text-on-color-2 {
+  color: var(--pc-color-2-text) !important;
+}
+.surface-color-2 {
+  background-color: var(--pc-color-2) !important;
+  color: var(--pc-color-2-text) !important;
+}
 .text-color-3 {
   color: var(--pc-color-3) !important;
 }
+.bg-color-3 {
+  background-color: var(--pc-color-3) !important;
+}
+.border-color-3 {
+  border-color: var(--pc-color-3) !important;
+}
+.text-on-color-3 {
+  color: var(--pc-color-3-text) !important;
+}
+.surface-color-3 {
+  background-color: var(--pc-color-3) !important;
+  color: var(--pc-color-3-text) !important;
+}
 .text-color-4 {
   color: var(--pc-color-4) !important;
 }
+.bg-color-4 {
+  background-color: var(--pc-color-4) !important;
+}
+.border-color-4 {
+  border-color: var(--pc-color-4) !important;
+}
+.text-on-color-4 {
+  color: var(--pc-color-4-text) !important;
+}
+.surface-color-4 {
+  background-color: var(--pc-color-4) !important;
+  color: var(--pc-color-4-text) !important;
+}
 .text-color-5 {
   color: var(--pc-color-5) !important;
 }
+.bg-color-5 {
+  background-color: var(--pc-color-5) !important;
+}
+.border-color-5 {
+  border-color: var(--pc-color-5) !important;
+}
+.text-on-color-5 {
+  color: var(--pc-color-5-text) !important;
+}
+.surface-color-5 {
+  background-color: var(--pc-color-5) !important;
+  color: var(--pc-color-5-text) !important;
+}
 .text-color-6 {
   color: var(--pc-color-6) !important;
 }
+.bg-color-6 {
+  background-color: var(--pc-color-6) !important;
+}
+.border-color-6 {
+  border-color: var(--pc-color-6) !important;
+}
+.text-on-color-6 {
+  color: var(--pc-color-6-text) !important;
+}
+.surface-color-6 {
+  background-color: var(--pc-color-6) !important;
+  color: var(--pc-color-6-text) !important;
+}
 .text-color-7 {
   color: var(--pc-color-7) !important;
 }
+.bg-color-7 {
+  background-color: var(--pc-color-7) !important;
+}
+.border-color-7 {
+  border-color: var(--pc-color-7) !important;
+}
+.text-on-color-7 {
+  color: var(--pc-color-7-text) !important;
+}
+.surface-color-7 {
+  background-color: var(--pc-color-7) !important;
+  color: var(--pc-color-7-text) !important;
+}
 .text-color-8 {
   color: var(--pc-color-8) !important;
 }
+.bg-color-8 {
+  background-color: var(--pc-color-8) !important;
+}
+.border-color-8 {
+  border-color: var(--pc-color-8) !important;
+}
+.text-on-color-8 {
+  color: var(--pc-color-8-text) !important;
+}
+.surface-color-8 {
+  background-color: var(--pc-color-8) !important;
+  color: var(--pc-color-8-text) !important;
+}
 .text-color-9 {
   color: var(--pc-color-9) !important;
 }
+.bg-color-9 {
+  background-color: var(--pc-color-9) !important;
+}
+.border-color-9 {
+  border-color: var(--pc-color-9) !important;
+}
+.text-on-color-9 {
+  color: var(--pc-color-9-text) !important;
+}
+.surface-color-9 {
+  background-color: var(--pc-color-9) !important;
+  color: var(--pc-color-9-text) !important;
+}
 .rounded {
   border-radius: var(--pc-border-radius) !important;
 }