@nulllogic/scssleon 1.0.35 → 1.0.36

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.36",
   "version_short": "1.0",
   "keywords": [
     "css",
@@ -23,8 +23,10 @@
     "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"
   },
+  "dependencies": {
+    "sass": "^1.77.8"
+  },
   "devDependencies": {
-    "sass": "^1.77.8",
     "clean-css": "^5.3.3"
   },
   "homepage": "https://nulllogic.github.io/scssleon-docs",

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,4 @@
   }
 }
 
+//@mixin generate-components($component, $class, $config, $theme) {

package/scss/themes/_default.scss

@@ -13,15 +13,20 @@ $html-config: (
   html : (
     body : (
       margin: 0,
+
       -webkit-text-size-adjust: 100%,
       font-size : 1rem,
       font-weight: normal,
-      line-height : 1,
       font-family: var(global(--font-family-default)),
+      line-height : 1,
+
       color: var(--color),
       background: var(--background),
+
       text-rendering: optimizelegibility,
       -webkit-font-smoothing: antialiased,
+      font-synthesis-weight: none,
+
       colors: (
         light : (
           background: '#fff',
@@ -45,6 +50,9 @@ $html-config: (
         )
       ),
       subclasses : (
+        "&:hover": (
+          text-decoration: none
+        ),
         "&[target='_blank']" : (
           subclasses : (
             "&:after" : (
@@ -79,6 +87,9 @@ $html-config: (
       height: auto,
       max-width: 100%,
     ),
+    "h1,h2,h3,h4,h5,h6" : (
+      margin: 0
+    ),
     p : (
       margin: 0
     )
@@ -133,7 +144,7 @@ $content-config: (
     ),
     p : (
       margin: 0,
-      padding: 0 0 15px 0
+      padding: 0 0 15px 0,
     ),
     abbr: (
       attributes : (
@@ -288,14 +299,29 @@ $components-config: (
     alert: (
 
       --border-radius: .25rem,
-      --padding: 1.25rem,
+      --grid-template-columns: auto auto 1fr,
+      --gap : 0.5rem,
+      --padding: 0.5rem,
+
+      --left-column-aligment: start,
+      --center-column-alignment: center,
+      --right-column-alignment: end,
 
       box-shadow: var(--shadow),
       background: var(--background),
+      border-radius: var(--border-radius),
 
       outline: 1px solid transparent,
+
       position: relative,
-      display: flex,
+      display: grid,
+      width: 100%,
+      max-width: 100%,
+      align-items: center,
+
+      grid-template-columns: var(--grid-template-columns),
+      grid-gap: var(--gap),
+      padding: var(--padding),
 
       colors: (
         light : (
@@ -307,8 +333,19 @@ $components-config: (
           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)"),
         )
-      )
+      ),
 
+      subclasses : (
+        ".left" : (
+          justify-self: var(--left-column-alignment),
+        ),
+        ".center" : (
+          justify-self: var(--center-column-alignment),
+        ),
+        ".right" : (
+          justify-self: var(--right-column-alignment)
+        ),
+      )
     ),
 
     accordion : (