@nulllogic/scssleon 1.0.35 → 1.0.37

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,7 +1,7 @@
 {
   "name": "@nulllogic/scssleon",
   "description": "Most advanced, simple and clean SCSS framework",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "version_short": "1.0",
   "keywords": [
     "css",
@@ -18,14 +18,13 @@
     "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.87.0"
   },
   "devDependencies": {
-    "sass": "^1.77.8",
-    "clean-css": "^5.3.3"
+
   },
   "homepage": "https://nulllogic.github.io/scssleon-docs",
   "style": "dist/scssleon.css",

package/scss/_base.scss

@@ -1,6 +1,6 @@
 /*
 ┌┐ ┌─┐┌─┐┌─┐
-├┴┐├─┤└─┐├┤ 
+├┴┐├─┤└─┐├┤
 └─┘┴ ┴└─┘└─┘
 */
 

package/scss/_content.scss

@@ -20,5 +20,4 @@ $is-content-enabled: functions.get-config($config, "enable.content");
       }
     }
   }
-}
-
+}

package/scss/_reset.scss

@@ -40,6 +40,21 @@ $color_scheme: functions.get-config($config, "color-scheme");
     text-decoration-skip-ink: none;
   }
 
+  // Headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+
+  // Paragraph
+  p {
+    margin: 0;
+  }
+
   // Lists
   ul,ol,
   ol ol,
@@ -211,19 +226,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,12 +18,6 @@ $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);
 
   @include mixins.generate-properties(
@@ -31,4 +25,10 @@ $root-variables: functions.get-theme($theme, "root.variables");
     functions.get-theme($theme, "root"),
     $config
   );
-}
+
+  @if $is-smooth-scroll-enabled {
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+}

package/scss/mixins/_utilities.scss

@@ -12,4 +12,4 @@
       #{$property} : #{$value};
     }
   }
-}
+}

package/scss/mixins/generators/_components.scss

@@ -1,20 +1,20 @@
-@use "sass:map";
-@use "sass:meta";
+@use 'sass:map';
+@use 'sass:meta';
 
-@use "properties";
-@use "wrapper";
+@use 'properties';
+@use 'wrapper';
 
-@use "../../functions" as functions;
+@use '../../functions' as functions;
 
 @mixin generate-component($component, $class, $config, $theme) {
-  $theme-component: "";
+  $theme-component: '';
 
   // Checking, if the component was previously defined inside theme components
-  @if (meta.type-of($component) == "string") {
+  @if (meta.type-of($component) == 'string') {
     /* Loading component settings and styling */
     $theme-component: functions.get-theme(
       $theme,
-      "components" + "." + $component
+      'components' + '.' + $component
     );
   } @else {
     $theme-component: $component;
@@ -31,3 +31,8 @@
   }
 }
 
+//@mixin generate-components($component, $class, $config, $theme) {
+
+@mixin get-structure ($component) {
+  @debug $component;
+}

package/scss/scssleon.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /*
  * ------------------------------------------------------------------
  * ███████╗ ██████╗ ██████╗███████╗██╗     ███████╗ ██████╗ ███╗   ██╗
@@ -64,13 +66,13 @@ $theme: theme.$theme;
   $theme: $theme
 );
 
-// Great reset
+// ↓ Great reset
 @use "reset" with (
   $config: $config,
   $theme: $theme
 );
 
-// Base
+// ↓ Base
 // Special utility, that will dynamically generate CSS
 // properties for HTML tags, specified in theme
 @use "base" with (
@@ -78,7 +80,7 @@ $theme: theme.$theme;
   $theme: $theme
 );
 
-// Amazing content
+// ↓ Amazing content
 // Special class `.content` to allow formatting of the default html tags
 @use "content" with (
   $config: $config,

package/scss/themes/_default.scss

@@ -3,25 +3,34 @@
 
 // Main theme colors
 $theme: () !default;
-$updated-theme : () !default;
+$updated-theme: () !default;
 
 $html-config: (
   root: (
+
     --font-family-default : string.unquote("system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"),
     --font-family-monospace : string.unquote("ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"),
+
   ),
+
   html : (
+
     body : (
-      margin: 0,
       -webkit-text-size-adjust: 100%,
-      font-size : 1rem,
+      -webkit-font-smoothing: antialiased,
+
+      margin: 0,
+
+      font-size : 1em,
       font-weight: normal,
-      line-height : 1,
       font-family: var(global(--font-family-default)),
+      line-height : 1,
+      text-rendering: optimizelegibility,
+      font-synthesis-weight: none,
+
       color: var(--color),
       background: var(--background),
-      text-rendering: optimizelegibility,
-      -webkit-font-smoothing: antialiased,
+
       colors: (
         light : (
           background: '#fff',
@@ -33,9 +42,11 @@ $html-config: (
         )
       )
     ),
+
     a : (
       text-decoration : underline,
       color: var(--color),
+
       colors: (
         light : (
           color: '#ccc',
@@ -44,7 +55,11 @@ $html-config: (
           color: '#ccc'
         )
       ),
+
       subclasses : (
+        "&:hover": (
+          text-decoration: none
+        ),
         "&[target='_blank']" : (
           subclasses : (
             "&:after" : (
@@ -57,6 +72,7 @@ $html-config: (
           ),
         )
       )
+      
     ),
     ol: (
       margin: 0,
@@ -78,9 +94,6 @@ $html-config: (
       width: auto,
       height: auto,
       max-width: 100%,
-    ),
-    p : (
-      margin: 0
     )
   )
 );
@@ -90,50 +103,51 @@ $updated-theme: map.deep-merge($updated-theme, $html-config);
 $content-config: (
   content : (
     h1 : (
-      font-size: 3.5rem,
-      line-height : inherit,
+      font-size: 3.75rem,
+      line-height: inherit,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h2 : (
-      font-size: 2.8rem,
-      line-height : inherit,
+      font-size: 3rem,
+      line-height: inherit,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h3 : (
-      font-size: 2.4rem,
-      line-height : inherit,
+      font-size: 2.25rem,
+      line-height: inherit,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h4 : (
-      font-size: 2rem,
-      line-height : inherit,
+      font-size: 1.875rem,
+      line-height: inherit,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h5 : (
-      font-size: 1.8rem,
-      line-height : inherit,
+      font-size: 1.5rem,
+      line-height: inherit,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h6 : (
-      font-size: 1.625rem,
-      line-height : inherit,
+      font-size: 1.25rem,
+      line-height: inherit,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     p : (
       margin: 0,
-      padding: 0 0 15px 0
+      padding: 0 0 15px 0,
+      line-height: clamp(1.25em, 4vw, 1.5em),
     ),
     abbr: (
       attributes : (
@@ -189,14 +203,14 @@ $content-config: (
     code: (
       color: var(--color),
       background: var(--background),
-      padding: 0 5px,
+      padding: 2px 5px,
       colors: (
         light : (
           background: '#fff',
           color: '#ccc',
         ),
         dark : (
-          background : rgba(38,69,116,1),
+          background : rgba(38, 69, 116, 1),
           color: '#fff'
         )
       )
@@ -284,18 +298,33 @@ $updated-theme: map.deep-merge($updated-theme, $content-config);
 
 $components-config: (
   components: (
-
     alert: (
 
-      --border-radius: .25rem,
-      --padding: 1.25rem,
+      --border-radius: .5rem,
+      --grid-template-columns: auto auto 1fr,
+      --gap : 0.5rem,
+      --padding: 0.825rem,
+      --left-column-justify-self: start,
+      --left-column-align-self: start,
+      --center-column-justify-self: center,
+      --center-column-align-self: center,
+      --right-column-justify-self: end,
+      --right-column-align-self: start,
 
       box-shadow: var(--shadow),
       background: var(--background),
-
+      border-radius: var(--border-radius),
+      border: var(--border),
       outline: 1px solid transparent,
       position: relative,
-      display: flex,
+      display: grid,
+      width: 100%,
+      max-width: 100%,
+      align-items: center,
+      line-height: 1rem,
+      grid-template-columns: var(--grid-template-columns),
+      grid-gap: var(--gap),
+      padding: var(--padding),
 
       colors: (
         light : (
@@ -303,22 +332,35 @@ $components-config: (
           shadow: string.unquote("inset 0 0.0625rem 0 0 rgba(186, 191, 195, 1), inset 0 0 0 0.0625rem rgba(186, 191, 195, 1)"),
         ),
         dark : (
-          background: rgb(48, 56, 66),
-          border: 1px solid rgba(182, 199, 216, .35),
-          shadow: string.unquote("inset 0 0.0625rem 0 0 rgba(186, 191, 195, 1), inset 0 0 0 0.0625rem rgba(186, 191, 195, 1)"),
+          background: rgb(18, 18, 24),
+          border: 1px solid rgba(48, 54, 61, 0.75),
+          shadow: string.unquote("rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"),
         )
+      ),
+
+      subclasses : (
+        '.left' : (
+          justify-self: var(--left-column-justify-self),
+          align-self: var(--left-column-align-self),
+        ),
+        '.center' : (
+          justify-self: var(--center-column-justify-self),
+          align-self: var(--center-column-align-self),
+        ),
+        '.right' : (
+          justify-self: var(--right-column-justify-self),
+          align-self: var(--right-column-align-self),
+        ),
       )
 
     ),
-
     accordion : (
 
       --border-radius: .25rem,
-      --padding: 1.25rem,
+      --padding: 1rem,
 
       position: relative,
       width: 100%,
-
       colors: (
         light : (
         ),
@@ -326,31 +368,65 @@ $components-config: (
           border: 1px solid rgba(182, 199, 216, .35),
           background: rgb(46, 56, 66),
         )
-      )
+      ),
+      subclasses : (
 
-    ),
+        '.item' : (
+          padding-bottom: var(--padding),
 
+          subclasses : (
+            '.title' : (
+              display: flex,
+              padding-bottom: var(--padding),
+              subclasses : (
+                '> button' : (
+                  color: inherit,
+                  background: none,
+                  border: none,
+                  cursor: pointer,
+                  display: flex,
+                  padding: 0,
+                  font-size: inherit,
+                  width: 100%,
+                  align-items: center,
+                  justify-content: space-between,
+                  border-bottom: 1px solid #ccc,
+                  subclasses : (
+                    '.left' : (
+                      justify-self: var(--left-column-alignment),
+                    ),
+                    '.center' : (
+                      justify-self: var(--center-column-alignment),
+                    ),
+                    '.right' : (
+                      justify-self: var(--right-column-alignment)
+                    )
+                  )
+                )
+              )
+            ),
+            '.content' : (
+            )
+          )
+        )
+      )
+    ),
     badge : (
-
       --border-radius: .25rem,
       --padding: .125rem .625rem,
-
       font-size: .75rem,
       line-height: 1rem,
       font-weight: 500,
-
       white-space: nowrap,
       vertical-align: middle,
       align-items: center,
       display: inline-flex,
-
       padding: var(--padding),
       border-radius: var(--border-radius),
       color: var(--color),
       background: var(--background),
       box-shadow: var(--box-shadow),
       border: var(--border),
-
       colors: (
         light : (
           color: #ccc,
@@ -364,7 +440,6 @@ $components-config: (
         )
       )
     ),
-
     breadcrumb : (
       --padding: 0 0 0 5px,
       list-style: none,
@@ -384,82 +459,66 @@ $components-config: (
           display: inline-flex,
           subclasses : (
             ".link" : (
-
             )
           )
         )
       )
     ),
-
     button : (
+      --padding: .5rem .75rem,
       --border-radius: .25rem,
       --box-shadow : (
         inset 0 0 0 1px rgba(0, 0, 0, 0.05),
-        inset 0 1px 2px 0 rgba(78, 83, 90, 0.1)
-        //   inset -0.0625rem 0 0 #e3e3e3,
+        inset 0 1px 2px 0 rgba(78, 83, 90, 0.1) //   inset -0.0625rem 0 0 #e3e3e3,
         //   inset 0.0625rem 0 0 #e3e3e3,
         //   inset 0 0.0625rem 0 #e3e3e3
       ),
-      --padding: .5rem .75rem,
-
       display: inline-flex,
       align-items: center,
       align-content: center,
       white-space: nowrap,
-      user-select: none,
       text-decoration: none,
       cursor: pointer,
-
       vertical-align: middle,
       font-size: 1em,
-
       padding: var(--padding),
       border: var(--border),
       background: var(--background),
       color: var(--color),
       border-radius: var(--border-radius),
-
       // This one is required for button group use
       position: relative,
-
       transition: (
         color .15s ease-in-out,
         background-color .15s ease-in-out,
         border-color .15s ease-in-out,
         box-shadow .15s ease-in-out
       ),
-
       colors: (
         light: (
           color: #fff,
           background: #fff
         ),
         dark: (
-
           // Default
           color: #fff,
           background: rgb(48, 56, 66),
           border: 1px solid rgba(240, 246, 252, .25),
-
           // Hover state
           hover-color: #fff,
           hover-background: rgb(59, 68, 81),
           hover-border: 1px solid rgba(229, 235, 240, .55),
-
           // Disabled state
           disabled-color: #484f58,
           disabled-background: #21262d,
           disabled-border: 1px solid rgba(240, 246, 252, 0.1),
-
           // Active state
           active-color: #fff,
           active-background: rgb(39, 45, 53),
           active-border: 1px solid rgba(240, 246, 252, .25),
           active-shadow: string.unquote("-0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,0.122) inset,0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,0.122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26,26,26,0.2) inset")
-
         )
       ),
-
       subclasses : (
         "&:hover:not(.loading, [disabled], .btn-link)" : (
           color: var(--hover-color),
@@ -476,9 +535,10 @@ $components-config: (
           background: transparent,
           border: none,
           box-shadow: none,
+          text-decoration: underline,
           subclasses: (
             "&:hover": (
-              text-decoration: underline,
+              text-decoration: none,
             )
           )
         ),
@@ -494,44 +554,33 @@ $components-config: (
         )
       )
     ),
-
     button-group: (
       --gap: 10px,
-
       display: flex,
       flex-wrap: wrap,
-
       subclasses : (
         ".btn:first-child" : (
           border-start-end-radius: 0,
           border-end-end-radius: 0,
         ),
-
         ".btn:last-child" : (
           border-start-start-radius: 0,
           border-end-start-radius: 0,
         ),
-
         ".btn:not(:first-child)" : (
           margin-left: - 1px
         ),
-
         ".btn:not(:first-child, :last-child)" : (
           border-radius: 0
         ),
-
         ".btn:only-child" : (
-
         ),
-
         ".btn:hover, .btn:focus" : (
           z-index: 1
         ),
-
         "&.separated" : (
           gap: var(--gap),
           --border-radius: 5px,
-
           subclasses : (
             ".btn" : (
               margin: 0,
@@ -541,20 +590,16 @@ $components-config: (
         )
       )
     ),
-
     card : (
       --border-radius: .25rem,
       --padding: .5rem,
-
       background: var(--background),
       padding: var(--padding),
       border-radius: var(--border-radius),
       box-shadow: var(--shadow),
       border: var(--border),
-
       height: 100%,
       margin: 0,
-
       colors: (
         light : (
           background: rgb(200, 200, 200)
@@ -566,7 +611,6 @@ $components-config: (
         )
       )
     ),
-
     container : (
       margin: 0 auto,
       width: 100%,
@@ -574,9 +618,7 @@ $components-config: (
         light : (),
         dark : ()
       ),
-
     ),
-
     form : (
       label : (
         display: block,
@@ -645,41 +687,43 @@ $components-config: (
 
     overlay : (
 
+      background : var(--background),
+
       position: absolute,
       top: 0,
       bottom: 0,
       left: 0,
       right: 0,
+
       width: 100%,
       height: 100%,
 
+      display: flex,
+      align-items: center,
+      justify-content: center,
+
       colors: (
         light : (
         ),
         dark : (
-          background: rgba(15, 23, 42, .25),
+          background: rgba(15, 23, 42, .85),
         )
       )
     ),
 
     pagination : (
-
       --grid-template-columns: auto auto 1fr,
       --gap : 10px,
-
       --left-column-aligment: start,
       --center-column-alignment: center,
       --right-column-alignment: end,
-
       position: relative,
       display: grid,
       width: 100%,
       max-width: 100%,
       align-items: center,
-
       grid-template-columns: var(--grid-template-columns),
       grid-gap: var(--gap),
-
       subclasses : (
         ".left" : (
           justify-self: var(--left-column-alignment),
@@ -692,19 +736,14 @@ $components-config: (
         )
       ),
     ),
-
     placeholder : (
-
       --min-height: 0.55rem,
       --border-radius: .1875rem,
       --gap: .6rem,
-
       cursor: wait,
       display: flex,
       flex-direction: column,
-
       gap: var(--gap),
-
       colors: (
         light : (
           background: #ccc
@@ -713,14 +752,12 @@ $components-config: (
           background: #ccc
         )
       ),
-
       subclasses : (
         ".el" : (
-            min-height: var(--min-height),
-            border-radius: var(--border-radius),
-            background: var(--background)
+          min-height: var(--min-height),
+          border-radius: var(--border-radius),
+          background: var(--background)
         ),
-
         "&.glow" : (
           subclasses : (
             ".el" : (
@@ -728,7 +765,6 @@ $components-config: (
             )
           )
         ),
-
         "&.wave" : (
           subclasses : (
             ".el" : (
@@ -746,7 +782,7 @@ $components-config: (
     nav : (
 
       --flex-direction: row,
-      --align-items: auto,
+      --align-items: center,
       --gap: 0,
 
       display: flex,
@@ -768,46 +804,40 @@ $components-config: (
         '&.horizontal' : (
           --align-items: center,
           --flex-direction : row,
+          --gap : 12.5px,
         ),
         '&.vertical' : (
           --flex-direction : column,
+          --align-items: auto,
         ),
         '&.tabs' : (
-
         ),
         '&.pills' : (
-
         ),
         '.item' : (
           width: auto,
-
           subclasses : (
             '.link' : (
-                display: inline-flex,
-                padding: 10px,
-                color: var(--color),
-
-                colors: (
-                  light : (
-                    color: '#333',
-                  ),
-                  dark : (
-                    color: '#fff'
-                  )
+              display: inline-flex,
+              color: var(--color),
+              colors: (
+                light : (
+                  color: '#333',
                 ),
-
-                subclasses: (
-                  '&:hover' : (
-                    text-decoration : none
+                dark : (
+                  color: '#fff'
+                )
+              ),
+              subclasses: (
+                '&:hover' : (
+                  text-decoration : none
                 )
               )
             ),
           )
         )
       )
-
     ),
-
     navbar : (
 
       --grid-template-columns: auto auto 1fr,
@@ -815,7 +845,6 @@ $components-config: (
       --left-column-aligment: start,
       --center-column-alignnent: center,
       --right-column-alignment: end,
-
       position: relative,
       display: grid,
       width: 100%,
@@ -823,17 +852,14 @@ $components-config: (
       align-items: center,
       margin: 0,
       padding: 0,
-
       grid-template-columns: var(--grid-template-columns),
       grid-gap: var(--gap),
-
       colors: (
         light : (
         ),
         dark: (
         )
       ),
-
       subclasses : (
         ".left" : (
           justify-self: var(--left-column-alignment),
@@ -848,21 +874,23 @@ $components-config: (
     ),
 
     sidecap : (
+
       position: absolute,
       top: 0,
       right: 0,
       height: 100%,
-
       display: flex,
       flex-direction: column,
+      width: 300px,
 
+      background: var(--background),
       colors: (
         light : (
           background : #ccc
         ),
         dark: (
           background: rgb(45, 56, 66),
-          box-shadow: 0rem 1.25rem 1.25rem -0.5rem rgba(26,26,26, .28)
+          box-shadow: 0rem 1.25rem 1.25rem -0.5rem rgba(26, 26, 26, .28)
         )
       )
     )
@@ -871,4 +899,4 @@ $components-config: (
 
 $updated-theme: map.deep-merge($updated-theme, $components-config);
 
-$theme: map.deep-merge($updated-theme, $theme);
+$theme: map.deep-merge($updated-theme, $theme);