@nulllogic/scssleon 1.0.1 → 1.0.3

package/scss/mixins/generators/_properties.scss

@@ -0,0 +1,116 @@
+@use "sass:meta";
+@use "sass:string";
+@use "sass:map";
+
+@use "../../functions" as functions;
+@use "../../mixins/generators/color-sheme" as mixin;
+
+@mixin generate-css-properties($tag, $property, $value, $config) {
+  $prefix: functions.get-config($config, "prefix");
+
+  & {
+    --#{$prefix}-#{$tag}-#{functions.str-replace($property, '--', '')}: #{meta.inspect(
+      $value
+    )};
+  }
+}
+
+@mixin generate-css-variables($tag, $property, $value, $config) {
+  $prefix: functions.get-config($config, "prefix");
+
+  @if (meta.type-of($value) == "string" and str-index($value, "var(--") == 1) {
+    & {
+      #{$property}: #{meta.inspect(
+        functions.str-replace($value, "--", "--" + $prefix + "-" + $tag + "-")
+      )};
+    }
+  } @else if (type-of($value) == "string" and str-index($value, "var(global(") == 1) {
+    & {
+      #{$property}: #{meta.inspect(
+        functions.str-replace(
+          string.slice($value, 0, string.length($value) - 1),
+          "global(--",
+          "--" + $prefix + "-root-"
+        )
+      )};
+    }
+  } @else {
+    & {
+      #{$property}: #{meta.inspect($value)};
+    }
+  }
+}
+
+@mixin generate-colors($tag, $value, $config) {
+  $prefix: functions.get-config($config, "prefix");
+
+  @each $color, $color-properties in $value {
+    @each $scheme in functions.str-split(functions.get-config($config, "color-scheme"), " ") {
+      @if $scheme == $color {
+        @include mixin.generate-color-scheme($color) {
+          @each $color-property, $color-value in $color-properties {
+            & {
+              --#{$prefix}-#{$tag}-#{functions.str-replace($color-property, '--', '')}: #{meta.inspect(
+                $color-value
+              )};
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin generate-subclasses($tag, $class, $properties, $config) {
+  #{$class} {
+    @include generate-properties($tag, $properties, $config);
+  }
+}
+
+@mixin generate-responsive($tag, $properties, $config) {
+  $breakpoints: functions.get-config($config, "breakpoints");
+
+  @each $breakpoint, $value in $breakpoints {
+    $property: map.get($properties, $breakpoint);
+
+    @if $property != null {
+      @media (min-width: $value) {
+        @include generate-properties($tag, $property, $config);
+      }
+    }
+  }
+}
+
+@mixin generate-properties($tag, $properties, $config) {
+  $prefix: functions.get-config($config, "prefix");
+
+  @each $property, $value in $properties {
+    // Variables
+    // Looking for "--" symbols in the beginning of the property
+    // Example: --flex-direction : row
+    @if (
+        meta.type-of($property) == "string" and str-index($property, "--") == 1
+    ) {
+      @include generate-css-properties($tag, $property, $value, $config);
+    }
+
+      // Colors
+    @else if ($property == "colors") {
+      @include generate-colors($tag, $value, $config);
+    }
+
+      // Responsive
+    @else if ($property == "responsive") {
+      @include generate-responsive($tag, $value, $config);
+    }
+
+      // Subclasses
+    @else if ($property == "subclasses") {
+      @each $class, $class_properties in $value {
+        @include generate-subclasses($tag, $class, $class_properties, $config);
+      }
+    } @else {
+      @include generate-css-variables($tag, $property, $value, $config);
+    }
+  }
+}

package/scss/mixins/generators/_wrapper.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+@use "../../functions" as functions;
+
+@mixin generate-wrapper($config) {
+  /* Wrapper class variables assigment */
+  $is_wrapper_enabled: functions.get-config($config, "enable.wrapper");
+  $wrapper_class: functions.get-config($config, "wrapper-class");
+
+  @if $is_wrapper_enabled {
+    .#{$wrapper_class} {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

package/scss/mixins/variants/_alert.scss

@@ -0,0 +1,24 @@
+@use '../../config';
+
+// Button variants
+// scss-docs-start alert-variant-mixin
+@mixin alert($name, $value) {
+
+  @if ($name == 'background') {
+    --#{config.$prefix}alert-bg: #{$value};
+  }
+
+  @if ($name == 'shadow') {
+    --#{config.$prefix}alert-box-shadow: #{$value};
+  }
+
+  @if ($name == 'icon') {
+    .icon-wrapper {
+      .icon {
+        --#{config.$prefix}alert-icon-fill: #{$value};
+      }
+    }
+  }
+
+}
+// scss-docs-end alert-variant-mixin

package/scss/mixins/variants/_button.scss

@@ -0,0 +1,122 @@
+@use '../../config';
+
+// Button variants
+// scss-docs-start btn-variant-mixin
+@mixin button($state, $options) {
+
+  @if ($state == 'origin') {
+    @each $name, $value in $options {
+
+      // Default state
+      @if ($name == 'background') {
+        --#{config.$prefix}btn-bg: #{$value};
+      }
+
+      @if ($name == 'border') {
+        --#{config.$prefix}btn-border-color: #{$value};
+      }
+
+      @if ($name == 'color') {
+        --#{config.$prefix}btn-color: #{$value};
+      }
+    }
+  }
+
+  @if ($state == 'hover') {
+    @each $name, $value in $options {
+      // Hover state
+      @if ($name == 'background') {
+        --#{config.$prefix}btn-hover-bg: #{$value};
+      }
+
+      @if ($name == 'border') {
+        --#{config.$prefix}btn-hover-border-color: #{$value};
+      }
+
+      @if ($name == 'color') {
+        --#{config.$prefix}btn-hover-color: #{$value};
+      }
+
+      //@if ($focus-shadow != null) {
+      //  --#{config.$prefix}btn-focus-shadow-rgb: #{$focus-shadow};
+      //}
+    }
+  }
+
+  @if ($state == 'active') {
+    @each $name, $value in $options {
+      // Active state
+      @if ($name == 'background') {
+        --#{config.$prefix}btn-active-bg: #{$value};
+      }
+
+      @if ($name == 'border') {
+        --#{config.$prefix}btn-active-border-color: #{$value};
+      }
+
+      @if ($name == 'color') {
+        --#{config.$prefix}btn-active-color: #{$value};
+      }
+
+      //@if($btn-active-box-shadow != null) {
+      //  --#{config.$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+      //}
+    }
+  }
+
+  @if ($state == 'disabled') {
+    @each $name, $value in $options {
+
+      // Disabled state
+      @if ($name == 'background') {
+        --#{config.$prefix}btn-disabled-bg: #{$value};
+      }
+
+      @if ($name == 'border') {
+        --#{config.$prefix}btn-disabled-border-color: #{$value};
+      }
+
+      @if ($name == 'color') {
+        --#{config.$prefix}btn-disabled-color: #{$value};
+      }
+
+    }
+  }
+}
+
+// scss-docs-end btn-variant-mixin
+
+// scss-docs-start btn-outline-variant-mixin
+@mixin outline-button(
+  $color,
+  $color-hover: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($active-background)
+) {
+  --#{config.$prefix}btn-color: #{$color};
+  --#{config.$prefix}btn-border-color: #{$color};
+  --#{config.$prefix}btn-hover-color: #{$color-hover};
+  --#{config.$prefix}btn-hover-bg: #{$active-background};
+  --#{config.$prefix}btn-hover-border-color: #{$active-border};
+  //--#{config.$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+  --#{config.$prefix}btn-active-color: #{$active-color};
+  --#{config.$prefix}btn-active-bg: #{$active-background};
+  --#{config.$prefix}btn-active-border-color: #{$active-border};
+  --#{config.$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{config.$prefix}btn-disabled-color: #{$color};
+  --#{config.$prefix}btn-disabled-bg: transparent;
+  --#{config.$prefix}btn-disabled-border-color: #{$color};
+  --#{config.$prefix}gradient: none;
+}
+
+// scss-docs-end btn-outline-variant-mixin
+
+// scss-docs-start btn-size-mixin
+@mixin size($padding-y, $padding-x, $font-size, $border-radius) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  // Manually declare to provide an override to the browser default
+  //@include border-radius($border-radius, 0);
+}
+// scss-docs-end btn-size-mixin

package/scss/scssleon.scss

@@ -0,0 +1,205 @@
+/*
+ * ------------------------------------------------------------------
+ * ███████╗ ██████╗ ██████╗███████╗██╗     ███████╗ ██████╗ ███╗   ██╗
+ * ██╔════╝██╔════╝██╔════╝██╔════╝██║     ██╔════╝██╔═══██╗████╗  ██║
+ * ███████╗██║     ██║     ███████╗██║     █████╗  ██║   ██║██╔██╗ ██║
+ * ╚════██║██║     ██║     ╚════██║██║     ██╔══╝  ██║   ██║██║╚██╗██║
+ * ███████║╚██████╗╚██████╗███████║███████╗███████╗╚██████╔╝██║ ╚████║
+ * ╚══════╝ ╚═════╝ ╚═════╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝  ╚═══╝
+ *
+ * SCSSLEON v1.0.0 (https://nulllogic.github.io/scssleon/)
+ * Copyright 2011-2024 NullLogic
+ * Licensed under MIT (https://nulllogic.github.io/scssleon/blob/main/LICENSE)
+ * ------------------------------------------------------------------
+ */
+
+/*
+-------------------------------------------------------
+Main configuration - initial configuration requirement
+-------------------------------------------------------
+*/
+
+// Defining two main variables ( config and theme ) at the top
+// Those two variables will be used to store configuration settings and theme settings
+// You can easily customize any available options to fit your needs
+$config: (
+  prefix: "xii",
+  enable: (
+    wrapper: false,
+  ),
+) !default;
+
+$theme: (
+  html: (
+    body: (),
+  ),
+) !default;
+
+// ↓ Config
+// Override default config | @example
+@use "config" as config with (
+  $config: $config
+);
+
+// ↓ Theme
+/* Override default settings in the theme | @example */
+@use "themes/default" as theme with (
+  $theme: $theme
+);
+
+// Getting updated variables
+$config: config.$config;
+$theme: theme.$theme;
+
+/* Main configuration END
+-------------------------------------------------------*/
+
+/* ------------------------------------------------------------------
+ * Loading modules - this is default configuration with all modules enabled
+ */
+
+// ↓ Root
+@use "root" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// Great reset
+@use "reset" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// Base
+// Special utility, that will dynamically generate CSS
+// properties for HTML tags, specified in theme
+@use "base" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// Amazing content
+// Special class `.content` to allow formatting of the default html tags
+@use "content" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Container
+@use "components/container" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Card
+@use "components/card" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Badge
+@use "components/badge" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Form
+@use "components/form" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Buttons
+@use "components/button" with (
+  $config: $config,
+  $theme: $theme
+);
+@use "components/button_group" with (
+  $config: $config,
+  $theme: $theme
+);
+
+////@use "components/icon";
+//@use "components/button";
+////@use "components/button-group";
+
+// ↓ Breadcrumbs
+@use "components/breadcrumb" with (
+  $config: $config,
+  $theme: $theme
+);
+
+@use "components/alert" with (
+  $config: $config,
+  $theme: $theme
+);
+
+@use "components/accordion" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Table
+//@use 'components/table' with (
+//  $config : config.$updated,
+//  $theme: theme.$updated
+//);
+
+// ↓ Overlay
+@use "components/overlay" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Pagination
+@use "components/pagination" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Placeholder
+@use "components/placeholder" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Modal
+@use "components/modal" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Loader
+@use "components/loader" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Nav
+@use "components/nav" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Navigation bar
+@use "components/navbar" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Sidecap
+@use "components/sidecap" with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Helpers
+@use "helpers/clearfix";
+@use "helpers/screen_reader";
+@use "helpers/text_truncate";
+
+// ↓ Utilities
+@use "utilities/api" with (
+  $config: $config,
+  $theme: $theme
+);