zenkit-css 1.0.0

package/scss/utilities/_visibility.scss

@@ -0,0 +1,251 @@
+// ========================================
+// ZenKit - Visibility Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Visibility
+// ----------------------------------------
+.visible { visibility: visible; }
+.invisible { visibility: hidden; }
+.collapse { visibility: collapse; }
+
+// ----------------------------------------
+// Opacity
+// ----------------------------------------
+.opacity-0 { opacity: 0; }
+.opacity-5 { opacity: 0.05; }
+.opacity-10 { opacity: 0.1; }
+.opacity-20 { opacity: 0.2; }
+.opacity-25 { opacity: 0.25; }
+.opacity-30 { opacity: 0.3; }
+.opacity-40 { opacity: 0.4; }
+.opacity-50 { opacity: 0.5; }
+.opacity-60 { opacity: 0.6; }
+.opacity-70 { opacity: 0.7; }
+.opacity-75 { opacity: 0.75; }
+.opacity-80 { opacity: 0.8; }
+.opacity-90 { opacity: 0.9; }
+.opacity-100 { opacity: 1; }
+
+// ----------------------------------------
+// Visually Hidden (Screen Reader Only)
+// ----------------------------------------
+.visually-hidden,
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// Visually hidden but focusable
+.visually-hidden-focusable:not(:focus):not(:focus-within),
+.sr-only-focusable:not(:focus):not(:focus-within) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// ----------------------------------------
+// Print Utilities
+// ----------------------------------------
+.d-print-none {
+  @media print {
+    display: none !important;
+  }
+}
+
+.d-print-inline {
+  @media print {
+    display: inline !important;
+  }
+}
+
+.d-print-inline-block {
+  @media print {
+    display: inline-block !important;
+  }
+}
+
+.d-print-block {
+  @media print {
+    display: block !important;
+  }
+}
+
+.d-print-grid {
+  @media print {
+    display: grid !important;
+  }
+}
+
+.d-print-table {
+  @media print {
+    display: table !important;
+  }
+}
+
+.d-print-table-row {
+  @media print {
+    display: table-row !important;
+  }
+}
+
+.d-print-table-cell {
+  @media print {
+    display: table-cell !important;
+  }
+}
+
+.d-print-flex {
+  @media print {
+    display: flex !important;
+  }
+}
+
+.d-print-inline-flex {
+  @media print {
+    display: inline-flex !important;
+  }
+}
+
+// Print only - hide on screen
+.print-only {
+  display: none;
+
+  @media print {
+    display: block;
+  }
+}
+
+// ----------------------------------------
+// Responsive Visibility
+// ----------------------------------------
+@media (min-width: 576px) {
+  .sm\:visible { visibility: visible; }
+  .sm\:invisible { visibility: hidden; }
+  .sm\:opacity-0 { opacity: 0; }
+  .sm\:opacity-50 { opacity: 0.5; }
+  .sm\:opacity-100 { opacity: 1; }
+}
+
+@media (min-width: 768px) {
+  .md\:visible { visibility: visible; }
+  .md\:invisible { visibility: hidden; }
+  .md\:opacity-0 { opacity: 0; }
+  .md\:opacity-50 { opacity: 0.5; }
+  .md\:opacity-100 { opacity: 1; }
+}
+
+@media (min-width: 1024px) {
+  .lg\:visible { visibility: visible; }
+  .lg\:invisible { visibility: hidden; }
+  .lg\:opacity-0 { opacity: 0; }
+  .lg\:opacity-50 { opacity: 0.5; }
+  .lg\:opacity-100 { opacity: 1; }
+}
+
+@media (min-width: 1280px) {
+  .xl\:visible { visibility: visible; }
+  .xl\:invisible { visibility: hidden; }
+  .xl\:opacity-0 { opacity: 0; }
+  .xl\:opacity-50 { opacity: 0.5; }
+  .xl\:opacity-100 { opacity: 1; }
+}
+
+@media (min-width: 1536px) {
+  .xxl\:visible { visibility: visible; }
+  .xxl\:invisible { visibility: hidden; }
+  .xxl\:opacity-0 { opacity: 0; }
+  .xxl\:opacity-50 { opacity: 0.5; }
+  .xxl\:opacity-100 { opacity: 1; }
+}
+
+// ----------------------------------------
+// Hide at Breakpoint
+// ----------------------------------------
+// Hidden on small screens only
+.hidden-xs {
+  @media (max-width: 575.98px) {
+    display: none !important;
+  }
+}
+
+// Hidden on medium screens only
+.hidden-sm {
+  @media (min-width: 576px) and (max-width: 767.98px) {
+    display: none !important;
+  }
+}
+
+// Hidden on medium-large screens only
+.hidden-md {
+  @media (min-width: 768px) and (max-width: 1023.98px) {
+    display: none !important;
+  }
+}
+
+// Hidden on large screens only
+.hidden-lg {
+  @media (min-width: 1024px) and (max-width: 1279.98px) {
+    display: none !important;
+  }
+}
+
+// Hidden on extra large screens only
+.hidden-xl {
+  @media (min-width: 1280px) {
+    display: none !important;
+  }
+}
+
+// ----------------------------------------
+// Show at Breakpoint (opposite of hidden)
+// ----------------------------------------
+.show-xs {
+  display: none !important;
+  @media (max-width: 575.98px) {
+    display: block !important;
+  }
+}
+
+.show-sm {
+  display: none !important;
+  @media (min-width: 576px) and (max-width: 767.98px) {
+    display: block !important;
+  }
+}
+
+.show-md {
+  display: none !important;
+  @media (min-width: 768px) and (max-width: 1023.98px) {
+    display: block !important;
+  }
+}
+
+.show-lg {
+  display: none !important;
+  @media (min-width: 1024px) and (max-width: 1279.98px) {
+    display: block !important;
+  }
+}
+
+.show-xl {
+  display: none !important;
+  @media (min-width: 1280px) {
+    display: block !important;
+  }
+}

package/scss/zenkit.scss

@@ -0,0 +1,121 @@
+// ========================================
+// ZenKit CSS Framework
+// A minimal, modern CSS framework for peaceful development
+// ========================================
+
+// ----------------------------------------
+// 1. Abstracts (Variables, Mixins, Functions)
+// ----------------------------------------
+@use 'abstracts/variables';
+@use 'abstracts/functions';
+@use 'abstracts/mixins';
+
+// ----------------------------------------
+// 2. Base (Reset, Typography, Root)
+// ----------------------------------------
+@use 'base/reset';
+@use 'base/root';
+@use 'base/typography';
+
+// ----------------------------------------
+// 3. Layout (Container, Grid)
+// ----------------------------------------
+@use 'layout/container';
+@use 'layout/grid';
+
+// ----------------------------------------
+// 4. Content (Tables, Images, Figures)
+// ----------------------------------------
+@use 'content/tables';
+@use 'content/images';
+@use 'content/figures';
+
+// ----------------------------------------
+// 5. Components - CSS Only
+// ----------------------------------------
+@use 'components/buttons';
+@use 'components/cards';
+@use 'components/forms';
+@use 'components/navbar';
+@use 'components/alerts';
+@use 'components/badges';
+@use 'components/modal';
+@use 'components/breadcrumb';
+@use 'components/list-group';
+@use 'components/pagination';
+@use 'components/progress';
+@use 'components/spinners';
+@use 'components/close-button';
+@use 'components/placeholder';
+@use 'components/avatar';
+@use 'components/divider';
+@use 'components/steps';
+@use 'components/rating';
+@use 'components/empty';
+@use 'components/upload';
+@use 'components/tag';
+@use 'components/timeline';
+@use 'components/statistic';
+@use 'components/result';
+@use 'components/select';
+@use 'components/datepicker';
+@use 'components/timepicker';
+@use 'components/calendar';
+@use 'components/colorpicker';
+@use 'components/inputnumber';
+@use 'components/cascader';
+@use 'components/transfer';
+@use 'components/treeselect';
+@use 'components/mentions';
+@use 'components/autocomplete';
+@use 'components/menu';
+@use 'components/anchor';
+@use 'components/tree';
+@use 'components/descriptions';
+@use 'components/list';
+@use 'components/image';
+@use 'components/segmented';
+@use 'components/drawer';
+@use 'components/message';
+@use 'components/notification';
+@use 'components/popconfirm';
+@use 'components/tour';
+@use 'components/affix';
+@use 'components/backtop';
+@use 'components/floatbutton';
+@use 'components/watermark';
+@use 'components/layout';
+
+// ----------------------------------------
+// 6. Components - JavaScript Enhanced
+// ----------------------------------------
+@use 'components/accordion';
+@use 'components/tabs';
+@use 'components/dropdown';
+@use 'components/offcanvas';
+@use 'components/toast';
+@use 'components/tooltip';
+@use 'components/popover';
+@use 'components/carousel';
+
+// ----------------------------------------
+// 7. Utilities
+// ----------------------------------------
+@use 'utilities/spacing';
+@use 'utilities/display';
+@use 'utilities/flex';
+@use 'utilities/grid-utils';
+@use 'utilities/colors';
+@use 'utilities/sizing';
+@use 'utilities/text';
+@use 'utilities/borders';
+@use 'utilities/shadows';
+@use 'utilities/helpers';
+@use 'utilities/position';
+@use 'utilities/overflow';
+@use 'utilities/visibility';
+@use 'utilities/float';
+@use 'utilities/interactions';
+@use 'utilities/animations';
+@use 'utilities/transforms';
+@use 'utilities/filters';