@nulllogic/scssleon 1.0.3 → 1.0.4

package/README.md

@@ -16,11 +16,11 @@ Welcome to XII/Grid CSS framework ! It's the most advanced responsive front-end
   <a href="https://nulllogic.net/"><img src="./.imgs/logo.png" alt="NullLogic logo"></a>
 </p>
 
-## ┌ Quickstart ┐
+## ┌ 🧭 Quickstart ┐
 
 [![IMAGE ALT TEXT HERE](http://www.sergiuko.com/wp-content/uploads/2012/04/vimeo-preview-627x351.jpg)](https://vimeo.com/83573522)
 
-## ┌ Documentation ┐
+## ┌ 📚 Documentation ┐
 
 <p align="left">
   <img src="./.imgs/documentation.jpg" width="100%" alt="xiigrid documentation">
@@ -58,7 +58,7 @@ Learn more about using Hugo by reading its [documentation](https://gohugo.io/doc
 <a href="https://www.browserstack.com"><img src="./.imgs/browserstack.jpg" alt="browserstack"></a><br />
 Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!
 
-## ┌ License ┐
+## ┌ 📜 License ┐
 
 <p align="left">
   <img src="./.imgs/license.jpg" width="100%" alt="xiigrid licence">

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nulllogic/scssleon",
   "description": "Most advanced, simple and clean SCSS framework",
-  "version": "1.0.3",
-  "version_short": "1.0",
+  "version": "1.0.4",
+  "version_short": "1.0.4",
   "keywords": [
     "css",
     "sass",
@@ -18,16 +18,15 @@
     "css": "npm run css-compile",
     "css-compile": "sass --style expanded --source-map --embed-sources scss/:dist/css/",
     "dist": "npm run css && npm run minify",
-    "watch": "sass --watch ./scss:./dist/css",
-    "minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
-    "docs-build": "docker run --rm -it -v $(pwd):/src klakegg/hugo:alpine",
-    "docs-serve": "docker run --rm -it -v $(pwd):/src -p 1313:1313 klakegg/hugo:alpine server"
+    "watch": "sass --watch ./scss:./dist/css"
+  },
+  "dependencies": {
+    "sass": "^1.89.2"
   },
   "devDependencies": {
-    "sass": "^1.77.8",
-    "clean-css": "^5.3.3"
+
   },
-  "homepage": "https://nulllogic.github.io/scssleon",
+  "homepage": "https://nulllogic.github.io/scssleon-docs",
   "style": "dist/scssleon.css",
   "sass": "scss/scssleon.scss",
   "repository": {
@@ -38,5 +37,8 @@
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/nulllogic/scssleon/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   }
-}
+}

package/scss/_base.scss

@@ -1,31 +1,19 @@
 /*
 ┌┐ ┌─┐┌─┐┌─┐
-├┴┐├─┤└─┐├┤ 
+├┴┐├─┤└─┐├┤
 └─┘┴ ┴└─┘└─┘
 */
 
-@use "sass:map";
-@use "sass:meta";
-@use "functions" as functions;
-@use "mixins" as mixins;
+/* Load settings and functions */
+@use 'mixins' as mixins;
+@use 'functions' as functions;
 
+/* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-$prefix: functions.get-config($config, "prefix");
-
-$is-reset-enabled: functions.get-config($config, "enable.reset");
-$is-button-pointers-enabled: functions.get-config(
-  $config,
-  "enable.button-pointers"
-);
-
-$is-spacing-enabled: functions.get-config($config, "enable.spacing");
-
-$color_scheme: functions.get-config($config, "color-scheme");
-
-@each $tag, $properties in functions.get-theme($theme, "html") {
+@each $tag, $properties in functions.get-theme($theme, 'html') {
   #{$tag} {
     @include mixins.generate-properties(#{$tag}, $properties, $config);
   }
-}
+}

package/scss/_config.scss

@@ -90,16 +90,10 @@ $default-config: map.deep-merge($default-config, $content-default-config);
 // scss-docs-start z-index-stack
 $z-index-config: (
   z-index: (
-    dropdown: 1000,
-    sticky: 1020,
-    fixed: 1030,
-    offcanvas-backdrop: 1040,
-    offcanvas: 1045,
-    modal-backdrop: 1050,
-    modal: 1055,
-    popover: 1070,
-    tooltip: 1080,
-    toast: 1090,
+    dropdown: 4,
+    header: 5,
+    overlay: 6,
+    modal : 7,
   ),
 ) !default;
 // scss-docs-end z-index-stack

package/scss/_content.scss

@@ -15,10 +15,11 @@ $is-content-enabled: functions.get-config($config, "enable.content");
 @if ($is-content-enabled) {
   .content {
     @each $tag, $properties in functions.get-theme($theme, "content") {
-      #{$tag} {
+
+      // Only apply styling to elements, that stand right after `.content` class
+      & > #{$tag} {
         @include mixins.generate-properties(#{$tag}, $properties, $config);
       }
     }
   }
-}
-
+}

package/scss/_functions.scss

@@ -1,25 +1,12 @@
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:string';
 
-@function str-split($string, $separator) {
-  $split-arr: ();
-  $index : str-index($string, $separator);
-  @while $index != null {
-    $item: str-slice($string, 1, $index - 1);
-    $split-arr: append($split-arr, $item);
-    $string: str-slice($string, $index + 1);
-    $index : str-index($string, $separator);
-  }
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}
-
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+@function replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return string.slice($string, 1, $index - 1) + $replace + replace(string.slice($string, $index + string.length($search)), $search, $replace);
   }
 
   @return $string;
@@ -33,8 +20,8 @@
     @return nil;
   }
 
-  @if (str-index($value, '.')) {
-    $path: str-split($value, '.');
+  @if (string.index($value, '.')) {
+    $path: string.split($value, '.');
     $val: map.get($config, $path...);
   } @else {
     $val: map.get($config, $value);
@@ -55,8 +42,8 @@
     @return nil;
   }
 
-  @if (str-index($value, '.')) {
-    $path: str-split($value, '.');
+  @if (string.index($value, '.')) {
+    $path: string.split($value, '.');
     $val: map.get($theme, $path...);
   } @else {
     $val: map.get($theme, $value);
@@ -74,13 +61,13 @@
 //
 // Requires the use of quotes around data URIs.
 @function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
+  @if string.index($string, "data:image/svg+xml") {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if str-index($string, "url(") == 1 {
-        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      @if string.index($string, "url(") == 1 {
+        $string: url("#{string.replace(string.slice($string, 6, -3), $char, $encoded)}");
       } @else {
-        $string: str-replace($string, $char, $encoded);
+        $string: string.replace($string, $char, $encoded);
       }
     }
   }

package/scss/_reset.scss

@@ -40,6 +40,23 @@ $color_scheme: functions.get-config($config, "color-scheme");
     text-decoration-skip-ink: none;
   }
 
+  // Headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    line-height: normal;
+  }
+
+  // Paragraph
+  p {
+    margin: 0;
+    line-height: normal;
+  }
+
   // Lists
   ul,ol,
   ol ol,
@@ -121,7 +138,10 @@ $color_scheme: functions.get-config($config, "color-scheme");
 
   // Images and content
   img,
+  iframe,
   svg {
+    // Adding `display` rule here, because if `display` is not specified, 2px will be added
+    display: inline-block;
     vertical-align: middle;
   }
 
@@ -211,19 +231,12 @@ $color_scheme: functions.get-config($config, "color-scheme");
   // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
   //    controls in Android 4.
   // 2. Correct the inability to style clickable types in iOS and Safari.
-  // 3. Opinionated: add "hand" cursor to non-disabled button elements.
 
   button,
   [type="button"], // 1
   [type="reset"],
   [type="submit"] {
     -webkit-appearance: button; // 2
-
-    @if $is-button-pointers-enabled {
-      &:not(:disabled) {
-        cursor: pointer; // 3
-      }
-    }
   }
 
   // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.

package/scss/_root.scss

@@ -18,19 +18,17 @@ $color_scheme: functions.get-config($config, "color-scheme");
 $root-variables: functions.get-theme($theme, "root.variables");
 
 :root {
-  @if $is-smooth-scroll-enabled {
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
-  }
-
-  & {
-    color-scheme: string.unquote($color_scheme);
-  }
+  color-scheme: string.unquote($color_scheme);
 
   @include mixins.generate-properties(
     "root",
     functions.get-theme($theme, "root"),
-    $config
+    $config,
   );
-}
+
+  @if $is-smooth-scroll-enabled {
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+}

package/scss/components/_accordion.scss

@@ -4,12 +4,12 @@
 ┴ ┴└─┘└─┘└─┘┴└──┴┘┴└─┘┘└┘
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/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);
+@include mixins.generate-component('accordion', 'accordion', $config, $theme);

package/scss/components/_alert.scss

@@ -4,12 +4,12 @@
 ┴ ┴┴─┘└─┘┴└─ ┴ └─┘
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/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);
+@include mixins.generate-component('alert', 'alert', $config, $theme);

package/scss/components/_badge.scss

@@ -4,12 +4,12 @@
 └─┘┴ ┴─┴┘└─┘└─┘
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/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);
+@include mixins.generate-component('badge', 'badge', $config, $theme);

package/scss/components/_breadcrumb.scss

@@ -4,12 +4,12 @@
 └─┘┴└─└─┘┴ ┴─┴┘└─┘┴└─└─┘┴ ┴└─┘└─┘
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/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);
+@include mixins.generate-component('breadcrumb', 'breadcrumb', $config, $theme);

package/scss/components/_button.scss

@@ -4,12 +4,12 @@
 └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/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);
+@include mixins.generate-component('button', 'btn', $config, $theme);

package/scss/components/_button_group.scss

@@ -4,12 +4,12 @@
 └─┘└─┘ ┴  ┴ └─┘┘└┘  └─┘┴└─└─┘└─┘┴
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/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);
+@include mixins.generate-component('button-group', 'btn-group', $config, $theme);

package/scss/components/_card.scss

@@ -4,12 +4,12 @@
 └─┘┴ ┴┴└──┴┘
  */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/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);
+@include mixins.generate-component('card', 'card', $config, $theme);

package/scss/components/_container.scss

@@ -25,9 +25,9 @@ $container-component: functions.get-theme($theme, "components.container");
     .container.#{$name} {
       max-width: $size;
       @include mixins.generate-properties(
-        "container",
-        $container-component,
-        $config
+          "container",
+          $container-component,
+          $config
       );
     }
   }

package/scss/components/_dropdown.scss

@@ -2,4 +2,14 @@
 ┌┬┐┬─┐┌─┐┌─┐┌┬┐┌─┐┬ ┬┌┐┌
  ││├┬┘│ │├─┘ │││ │││││││
 ─┴┘┴└─└─┘┴  ─┴┘└─┘└┴┘┘└┘
- */
+ */
+
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component('dropdown', 'dropdown', $config, $theme);

package/scss/components/_loader.scss

@@ -4,12 +4,12 @@
 ┴─┘└─┘┴ ┴─┴┘└─┘┴└─
 */
 
-/* Load settings and functions */
-@use "../themes/default" as theme;
-@use "../mixins" as mixins;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("loader", "loader", $config, $theme);
+@include mixins.generate-component('loader', 'loader', $config, $theme);

package/scss/components/_modal.scss

@@ -4,12 +4,12 @@
 ┴ ┴└─┘─┴┘┴ ┴┴─┘
 */
 
-/* Load settings and functions */
-@use "../themes/default" as theme;
-@use "../mixins" as mixins;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("modal", "modal", $config, $theme);
+@include mixins.generate-component('modal', 'modal', $config, $theme);

package/scss/components/_nav.scss

@@ -4,11 +4,12 @@
 ┘└┘┴ ┴ └┘ 
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("nav", "nav", $config, $theme);
+@include mixins.generate-component('nav', 'nav', $config, $theme);

package/scss/components/_navbar.scss

@@ -4,12 +4,12 @@
 ┘└┘┴ ┴ └┘ ┴└─┘┴ ┴ ┴ ┴└─┘┘└┘
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/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);
+@include mixins.generate-component('navbar', 'navbar', $config, $theme);

package/scss/components/_overlay.scss

@@ -4,12 +4,12 @@
 └─┘ └┘ └─┘┴└─┴─┘┴ ┴ ┴
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/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);
+@include mixins.generate-component('overlay', 'overlay', $config, $theme);

package/scss/components/_pagination.scss

@@ -4,12 +4,12 @@
 ┴  ┴ ┴└─┘┴┘└┘┴ ┴ ┴ ┴└─┘┘└┘
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/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);
+@include mixins.generate-component('pagination', 'pagination', $config, $theme);

package/scss/components/_placeholder.scss

@@ -4,20 +4,15 @@
 ┴  ┴─┘┴ ┴└─┘└─┘┴ ┴└─┘┴─┘─┴┘└─┘┴└─└─┘
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component(
-  "placeholder",
-  "placeholder",
-  $config,
-  $theme
-);
+@include mixins.generate-component('placeholder', 'placeholder', $config, $theme);
 
 @keyframes placeholder-glow {
   50% {

package/scss/components/_sidecap.scss

@@ -4,12 +4,12 @@
 └─┘┴─┴┘└─┘└─┘┴ ┴┴
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("sidecap", "sidecap", $config, $theme);
+@include mixins.generate-component('sidecap', 'sidecap', $config, $theme);

package/scss/components/_table.scss

@@ -4,9 +4,9 @@
  ┴ ┴ ┴└─┘┴─┘└─┘
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;

package/scss/forms/_checkbox.scss

@@ -1,14 +1,14 @@
-@use '../themes/default' as theme;
-@use '../functions' as functions;
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "form.checkbox",
-  "checkbox",
+  'form.checkbox',
+  'checkbox',
   $config,
-  $theme
+  $theme,
 );