@nulllogic/scssleon 1.0.1 → 1.0.2

package/scss/mixins/_grid.scss

@@ -0,0 +1,93 @@
+
+@use 'sass:map';
+@use "sass:meta";
+
+@use '../config';
+@use './breakpoints' as mixins;
+@use '../functions' as functions;
+
+// Row columns
+@function divide($dividend, $divisor, $precision: 10) {
+
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+
+  @if $dividend == 0 {
+    @return 0;
+  }
+
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+
+    $result: $result * 10 + $quotient;
+    $factor: $factor * .1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+
+  }
+  $result: $result * $factor * $sign;
+
+  @return $result;
+}
+
+@mixin generate_columns($size: false, $columns) {
+
+  @if $size {
+    flex: 0 0 auto;
+    width: percentage(divide($size, $columns));
+
+  } @else {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+
+}
+
+// Framework grid generation
+@mixin generate_grid_columns($columns, $breakpoints) {
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: mixins.breakpoint-infix($breakpoint, $breakpoints);
+
+    @include mixins.media-breakpoint-up($breakpoint, $breakpoints) {
+
+      .col#{$infix} {
+        flex: 1 0 0;
+      }
+
+      .col#{$infix}-auto {
+        flex: 0 0 auto;
+        width: auto;
+      }
+
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .col#{$infix}-#{$i} {
+            @include generate_columns($i, $columns);
+          }
+        }
+
+      }
+
+    }
+  }
+
+}

package/scss/mixins/_transition.scss

@@ -0,0 +1,30 @@
+@mixin transition($transition...) {
+  @if length($transition) == 0 {
+    $transition: config.$transition-base;
+  }
+
+  @if length($transition) > 1 {
+    @each $value in $transition {
+      @if $value == null or $value == none {
+        @warn "The keyword 'none' or 'null' must be used as a single argument.";
+      }
+    }
+  }
+
+  @if config.$enable-transitions {
+    @if nth($transition, 1) != null {
+      transition: $transition;
+    }
+
+    @if config.$enable-reduced-motion and
+      nth($transition, 1) !=
+      null and
+      nth($transition, 1) !=
+      none
+    {
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+  }
+}

package/scss/mixins/_utilities.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+
+// Utility generator
+// Used to generate utilities & print utilities
+@mixin generate-utility($property, $settings) {
+  $class : map.get($settings, 'property');
+  $values : map.get($settings, 'values');
+  $suffix : map.get($settings, 'suffix');
+
+  @each $name, $value in $values {
+    .#{$name} {
+      #{$property} : #{$value};
+    }
+  }
+}

package/scss/mixins/generators/_color-sheme.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+@use '../../functions' as functions;
+
+// Media that add color variables
+
+@mixin generate-color-scheme($schema) {
+  @if $schema == 'light' {
+    @media (prefers-color-scheme: light) {
+      @content
+    }
+  } @else if $schema == 'dark' {
+    @media (prefers-color-scheme: dark) {
+      @content
+    }
+  }
+}

package/scss/mixins/generators/_components.scss

@@ -0,0 +1,33 @@
+@use "sass:map";
+@use "sass:meta";
+
+@use "properties";
+@use "wrapper";
+
+@use "../../functions" as functions;
+
+@mixin generate-component($component, $class, $config, $theme) {
+  $theme-component: "";
+
+  // Checking, if the component was previously defined inside theme components
+  @if (meta.type-of($component) == "string") {
+    /* Loading component settings and styling */
+    $theme-component: functions.get-theme(
+      $theme,
+      "components" + "." + $component
+    );
+  } @else {
+    $theme-component: $component;
+  }
+
+  %#{$class} {
+    @include properties.generate-properties($class, $theme-component, $config);
+  }
+
+  @include wrapper.generate-wrapper($config) {
+    .#{$class} {
+      @extend %#{$class};
+    }
+  }
+}
+

package/scss/mixins/generators/_properties.scss

@@ -0,0 +1,110 @@
+@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
+);