@nulllogic/scssleon 1.0.1 → 1.0.2

package/scss/_utilities.scss

@@ -0,0 +1,356 @@
+@use "config";
+@use 'sass:map';
+
+$config: nil !default;
+$theme: nil !default;
+
+// Utilities
+// @TODO add grid rules here later
+
+$utilities: () !default;
+
+$utilities: map.merge((
+
+  "display" : (
+    responsive: false,
+    property: 'display',
+    values: (
+      block: block,
+      inline-block: inline-block,
+      inline: inline,
+      flex: flex,
+      inline-flex: inline-flex,
+      table: table,
+      inline-table: inline-table,
+      table-caption: table-caption,
+      table-cell: table-cell,
+      table-column: table-column,
+      table-column-group: table-column-group,
+      table-footer-group: table-footer-group,
+      table-header-group: table-header-group,
+      table-row-group: table-row-group,
+      table-row: table-row,
+      flow-root: flow-root,
+      grid: grid,
+      inline-grid: inline-grid,
+      contents: contents,
+      list-item: list-item,
+      hidden: hidden
+    ),
+  ),
+
+  // Flex
+  "flex": (
+    responsive: false,
+    property: "flex",
+    values: (
+      flex-initial: 0 1 auto,
+      flex-1: 1 1 0%,
+      flex-auto: 1 1 auto,
+      flex-none: none
+    ),
+  ),
+
+  "flex-direction" : (
+    responsive: false,
+    property: "flex-direction",
+    values: (
+      flex-row: row,
+      flex-row-reverse: row-reverse,
+      flex-col: column,
+      flex-col-reverse: column-reverse
+    ),
+  ),
+
+  "flex-grow" : (
+   responsive: false,
+   property: "flex-grow",
+   values: (
+      grow: 1,
+      grow-0: 0
+   )
+  ),
+
+  "flex-shrink" : (
+    responsive: false,
+    property: "flex-shrink",
+    values : (
+      shrink : 1,
+      shrink-0 : 0
+    )
+  ),
+
+  "flex-wrap" : (
+    responsive: false,
+    property: "flex-wrap",
+    values : (
+      flex-wrap : flex-wrap,
+      flex-wrap-reverse: flex-wrap-reverse,
+      flex-nowrap: flex-nowrap
+    )
+  ),
+
+  "order" : (
+    responsive: false,
+    property: "order",
+    values : (
+      order-none: 0,
+      order-first: -9999,
+      order-1: 1,
+      order-2: 2,
+      order-3: 3,
+      order-4: 4,
+      order-5: 5,
+      order-6: 6,
+      order-last: 9999,
+    )
+  ),
+  
+  "align-items" : (
+    responsive: false,
+    property: "align-items",
+    values: (
+      align-items-start: flex-start,
+      align-items-end: flex-end,
+      align-items-center: center,
+      align-items-baseline: baseline,
+      align-items-stretch: stretch
+    )
+  ),
+
+  "align-content" : (
+    responsive: false,
+    property: "align-content",
+    values: (
+      align-content-center: center,
+      align-content-start: flex-start,
+      align-content-end: flex-end,
+      align-content-between: space-between,
+      align-content-around: space-around,
+      align-content-evenly: space-evenly
+    ),
+  ),
+
+  "align-self" : (
+    responsive: false,
+    property: "align-self",
+    values: (
+      align-self-start : flex-start,
+      align-self-end: flex-end,
+      align-self-center: center,
+      align-self-stretch: stretch,
+      align-self-baseline: baseline
+    )
+  ),
+
+  "justify-content": (
+    responsive: false,
+    property: "justify-content",
+    values: (
+      justify-content-start: flex-start,
+      justify-content-end: flex-end,
+      justify-content-center: center,
+      justify-content-between: space-between,
+      justify-content-around: space-around,
+      justify-content-evenly: space-evenly,
+      justify-content-stretch: stretch
+    )
+  ),
+
+  "justify-items" : (
+    responsive: false,
+    property: "justify-items",
+    values: (
+      justify-items-start: start,
+      justify-items-end: end,
+      justify-items-center: center,
+      justify-items-stretch: stretch
+    )
+  ),
+
+  "justify-self" : (
+    responsive: false,
+    property: "justify-self",
+    values: (
+      justify-self-start: start,
+      justify-self-end: end,
+      justify-self-center: center,
+      justify-self-stretch: stretch
+    )
+  ),
+
+  "vertical-align" : (
+    responsive: false,
+    property: "vertical-align",
+    values: (
+      align-baseline: baseline,
+      align-top: top,
+      align-middle: middle,
+      align-bottom: bottom,
+      align-text-top: text-top,
+      align-text-bottom: text-bottom,
+      align-sub: sub,
+      align-super: super
+    )
+  ),
+
+  "float" : (
+    responsive: false,
+    property: "float",
+    values: (
+      float-left: left,
+      float-right: right,
+      float-none: none,
+    )
+  ),
+
+  "overflow" : (
+    responsive: false,
+    property: "overflow",
+    values: (
+      overflow-auto: auto, //@TODO check later
+      overflow-hidden: hidden,
+      overflow-scroll: scroll,
+      overflow-visible: visible
+    )
+  ),
+
+  "position" : (
+    responsive: false,
+    property: "position",
+    values: (
+      static: static,
+      fixed: fixed,
+      absolute: absolute,
+      relative : relative,
+      sticky : sticky
+    )
+  ),
+
+//  "width" : (
+//
+//  ),
+//
+  "max-width" : (
+    responsive: false,
+    property: "max-width",
+    values: (
+      max-w-full : 100%,
+      max-w-none: none
+    )
+  ),
+
+  "min-height" : (
+    responsive: false,
+    property: "min-height",
+    values: (
+      min-h-0: 0px,
+      min-h-full: 100%,
+      min-h-screen: 100vh
+    )
+  ),
+
+  "text-align" : (
+    responsive: false,
+    property: "text-align",
+    values: (
+      "text-left": left,
+      "text-right" : right,
+      "text-center" : center
+    )
+  ),
+//
+//  "word-wrap" : (
+//
+//  ),
+//
+  "white-space" : (
+    responsive: false,
+    property: "white-space",
+    values: (
+      white-space-normal : normal,
+      white-space-nowrap: nowrap,
+      white-space-brake-spaces: break-spaces
+    )
+  ),
+
+  "user-select" : (
+    responsive: false,
+    property: "user-select",
+    values: (
+      select-none: none,
+      select-text: text,
+      select-all: all,
+      select-auto: auto
+    )
+  ),
+
+  "visibility" : (
+    responsive: false,
+    property: "visibility",
+    values: (
+      visible: visible,
+      invisible: invisible,
+      collapse: collapse,
+    )
+  ),
+
+  "grid-rows" : (
+    responsive: false,
+    property: "grid-template-rows",
+    values : (
+      grid-rows-1 : repeat(1, minmax(0, 1fr)),
+      grid-rows-2 : repeat(2, minmax(0, 1fr)),
+      grid-rows-3 : repeat(3, minmax(0, 1fr)),
+      grid-rows-4 : repeat(4, minmax(0, 1fr)),
+      grid-rows-5 : repeat(5, minmax(0, 1fr)),
+      grid-rows-6 : repeat(6, minmax(0, 1fr)),
+      grid-rows-none : none
+    )
+  ),
+
+  "grid-auto-flow" : (
+    responsive: false,
+    property: "grid-auto-flow",
+    values: (
+      grid-flow-row : row,
+      grid-flow-col : column,
+      grid-flow-dense : dense,
+      grid-flow-row-dense : row dense,
+      grid-flow-col-dense : column dense 
+    )
+  ),
+
+  "grid-auto-columns" : (
+    responsive: false,
+    property: "grid-auto-columns",
+    values: (
+      auto-cols-auto : auto,
+      auto-cols-min : min-content,
+      auto-cols-max : max-content,
+      auto-cols-fr : minmax(0, 1fr)
+    )
+  ),
+
+  "grid-auto-rows" : (
+    responsive: false,
+    property: "grid-auto-rows",
+    values : (
+      auto-rows-auto : auto,
+      auto-rows-min : min-content,
+      auto-rows-max: max-content,
+      auto-rows-fr: minmax(0, 1fr)
+    )
+  ),
+
+  "column-gap" : (
+    responsive: false,
+    property: "column-gap",
+    values: (
+      gap-x-1 : .25rem,
+      gap-x-2 : .5rem,
+      gap-x-3 : .75rem
+    )
+  )
+
+), $utilities)

package/scss/animations/_placeholder.scss

@@ -0,0 +1,12 @@
+@keyframes placeholder-glow {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes placeholder-wave {
+  100% {
+    mask-position: -200% 0;
+    -webkit-mask-position: -200% 0;
+  }
+}

package/scss/components/_accordion.scss

@@ -0,0 +1,15 @@
+/**
+┌─┐┌─┐┌─┐┌─┐┬─┐┌┬┐┬┌─┐┌┐┌
+├─┤│  │  │ │├┬┘ ││││ ││││
+┴ ┴└─┘└─┘└─┘┴└──┴┘┴└─┘┘└┘
+**/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("accordion", "accordion", $config, $theme);

package/scss/components/_alert.scss

@@ -0,0 +1,15 @@
+/**
+┌─┐┬  ┌─┐┬─┐┌┬┐┌─┐
+├─┤│  ├┤ ├┬┘ │ └─┐
+┴ ┴┴─┘└─┘┴└─ ┴ └─┘
+**/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("alert", "alert", $config, $theme);

package/scss/components/_badge.scss

@@ -0,0 +1,15 @@
+/**
+┌┐ ┌─┐┌┬┐┌─┐┌─┐
+├┴┐├─┤ │││ ┬├┤
+└─┘┴ ┴─┴┘└─┘└─┘
+**/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("badge", "badge", $config, $theme);

package/scss/components/_breadcrumb.scss

@@ -0,0 +1,15 @@
+/**
+┌┐ ┬─┐┌─┐┌─┐┌┬┐┌─┐┬─┐┬ ┬┌┬┐┌┐ ┌─┐
+├┴┐├┬┘├┤ ├─┤ │││  ├┬┘│ ││││├┴┐└─┐
+└─┘┴└─└─┘┴ ┴─┴┘└─┘┴└─└─┘┴ ┴└─┘└─┘
+**/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("breadcrumb", "breadcrumb", $config, $theme);

package/scss/components/_button.scss

@@ -0,0 +1,15 @@
+/**
+┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
+├┴┐│ │ │  │ │ ││││└─┐
+└─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
+**/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("button", "btn", $config, $theme);

package/scss/components/_button_group.scss

@@ -0,0 +1,15 @@
+/*
+┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌  ┌─┐┬─┐┌─┐┬ ┬┌─┐
+├┴┐│ │ │  │ │ ││││  │ ┬├┬┘│ ││ │├─┘
+└─┘└─┘ ┴  ┴ └─┘┘└┘  └─┘┴└─└─┘└─┘┴
+*/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("button-group", "btn-group", $config, $theme);

package/scss/components/_card.scss

@@ -0,0 +1,15 @@
+/*
+┌─┐┌─┐┬─┐┌┬┐
+│  ├─┤├┬┘ ││
+└─┘┴ ┴┴└──┴┘
+ */
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("card", "card", $config, $theme);

package/scss/components/_container.scss

@@ -0,0 +1,39 @@
+/**
+┌─┐┌─┐┌┐┌┌┬┐┌─┐┬┌┐┌┌─┐┬─┐
+│  │ ││││ │ ├─┤││││├┤ ├┬┘
+└─┘└─┘┘└┘ ┴ ┴ ┴┴┘└┘└─┘┴└─
+**/
+
+@use "sass:map";
+@use "../themes/default" as theme;
+@use "../functions" as functions;
+@use "../mixins" as mixins;
+
+$config: nil !default;
+$theme: nil !default;
+
+$prefix: functions.get-config($config, "prefix");
+$color_scheme: functions.get-config($config, "color-scheme");
+
+$breakpoints: functions.get-config($config, "breakpoints");
+
+$container-component: functions.get-theme($theme, "components.container");
+
+// Container
+@each $name, $size in $breakpoints {
+  @include mixins.breakpoint($size, "min") {
+    .container.#{$name} {
+      max-width: $size;
+      @include mixins.generate-properties(
+        "container",
+        $container-component,
+        $config
+      );
+    }
+  }
+}
+
+/**
+==[ Note ]==
+We are using mixin here, because @include is not working with @media query in SCSS | 07.12.2023
+**/

package/scss/components/_dropdown.scss

@@ -0,0 +1,5 @@
+/*
+┌┬┐┬─┐┌─┐┌─┐┌┬┐┌─┐┬ ┬┌┐┌
+ ││├┬┘│ │├─┘ │││ │││││││
+─┴┘┴└─└─┘┴  ─┴┘└─┘└┴┘┘└┘
+ */

package/scss/components/_form.scss

@@ -0,0 +1,50 @@
+@use '../config';
+@use '../mixins' as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@use '../forms/label' with (
+  $config : $config,
+  $theme : $theme
+);
+
+@use '../forms/input' with (
+  $config : $config,
+  $theme : $theme
+);
+
+@use '../forms/select' with (
+  $config : $config,
+  $theme : $theme
+);
+
+@use '../forms/radio' with (
+  $config : $config,
+  $theme : $theme
+);
+
+@use '../forms/checkbox' with (
+  $config : $config,
+  $theme : $theme
+);
+
+@use '../forms/range' with (
+  $config : $config,
+  $theme : $theme
+);
+
+@use '../forms/switch' with (
+  $config : $config,
+  $theme : $theme
+);
+
+
+//@forward '../forms/form-text';
+//@forward '../forms/form-control';
+//@forward '../forms/form-select';
+//@forward '../forms/form-check';
+//@forward '../forms/form-range';
+//@forward '../forms/input-group';
+//@forward '../forms/validation';

package/scss/components/_loader.scss

@@ -0,0 +1,15 @@
+/*
+┬  ┌─┐┌─┐┌┬┐┌─┐┬─┐
+│  │ │├─┤ ││├┤ ├┬┘
+┴─┘└─┘┴ ┴─┴┘└─┘┴└─
+*/
+
+/* Load settings and functions */
+@use "../themes/default" as theme;
+@use "../mixins" as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("loader", "loader", $config, $theme);

package/scss/components/_modal.scss

@@ -0,0 +1,15 @@
+/*
+┌┬┐┌─┐┌┬┐┌─┐┬
+││││ │ ││├─┤│
+┴ ┴└─┘─┴┘┴ ┴┴─┘
+*/
+
+/* Load settings and functions */
+@use "../themes/default" as theme;
+@use "../mixins" as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("modal", "modal", $config, $theme);

package/scss/components/_nav.scss

@@ -0,0 +1,15 @@
+/**
+┌┐┌┌─┐┬  ┬
+│││├─┤└┐┌┘
+┘└┘┴ ┴ └┘ 
+**/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("nav", "nav", $config, $theme);
+

package/scss/components/_navbar.scss

@@ -0,0 +1,16 @@
+/*
+┌┐┌┌─┐┬  ┬┬┌─┐┌─┐┌┬┐┬┌─┐┌┐┌
+│││├─┤└┐┌┘││ ┬├─┤ │ ││ ││││
+┘└┘┴ ┴ └┘ ┴└─┘┴ ┴ ┴ ┴└─┘┘└┘
+*/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("navbar", "navbar", $config, $theme);
+

package/scss/components/_overlay.scss

@@ -0,0 +1,15 @@
+/*
+┌─┐┬  ┬┌─┐┬─┐┬  ┌─┐┬ ┬
+│ │└┐┌┘├┤ ├┬┘│  ├─┤└┬┘
+└─┘ └┘ └─┘┴└─┴─┘┴ ┴ ┴
+*/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("overlay", "overlay", $config, $theme);

package/scss/components/_pagination.scss

@@ -0,0 +1,15 @@
+/*
+┌─┐┌─┐┌─┐┬┌┐┌┌─┐┌┬┐┬┌─┐┌┐┌
+├─┘├─┤│ ┬││││├─┤ │ ││ ││││
+┴  ┴ ┴└─┘┴┘└┘┴ ┴ ┴ ┴└─┘┘└┘
+*/
+
+/* Load settings and functions */
+@use "../mixins" as mixins;
+@use "../functions" as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component("pagination", "pagination", $config, $theme);