@profitlich/template-toolkit 2.3.0 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "2.3.0",
+    "version": "2.4.1",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "exports": {

package/scss/core/layout.scss

@@ -200,7 +200,7 @@ $mediaqueries: (
     // @include mode($layout, padding/margin, all/top/right/bottom/left, 0, 0, 0, 0)
 
     @if $important == true {
-        $important: !important;
+        $important: '!important';
     }
 
     @if ( map.get(config.$units, $layout) == 'px' ) {
@@ -239,4 +239,4 @@ $mediaqueries: (
     @if $position == left {
         #{$mode}-left: $top;
     }
-}
+}

package/scss/core/mediaqueries.scss

@@ -13,21 +13,40 @@
     // Wenn es keine $mediaquery in der map gibt, gebe einen Fehler aus
     @if not $queries {
         @error "No value could be retrieved from `#{$mediaquery}`. "
-        + "Please make sure it is defined in `$mediaqueries` map.";
+        +"Please make sure it is defined in `$mediaqueries` map.";
     }
 
     // Include the media mixin with $queries
+    // Für implizite breakpoints funktionieren die Funktionen wie size() nicht, daher müssen sie hier gesetzt werden
     @include media($queries) {
-        @content($mediaquery);
+        $_layout-alias: (
+            tabletFrom: tablet,
+            tabletTo: tablet,
+            tabletPortrait: tablet,
+            tabletPortraitFrom: tablet,
+            tabletLandscape: tablet,
+            tabletLandscapeFrom: tablet,
+            desktopFrom: desktop,
+            desktopTo: desktop,
+            bigFrom: big,
+        );
+        $layout: $mediaquery;
+        @if map.has-key($_layout-alias, $mediaquery) {
+                $layout: map.get($_layout-alias, $mediaquery);
+            }
+        @content($layout);
     }
 }
 
 @mixin media($queries) {
+
     // Erst wenn alle mediaqueries geschachtelt geschrieben sind,
     // wird der @content ausgegeben
-    @if list.length($queries) == 0 {
+    @if list.length($queries)==0 {
         @content;
-    } @else {
+    }
+
+    @else {
         $first-key: list.nth(map.keys($queries), 1);
 
         // Schreibt nur die mediaquery, nicht den Inhalt
@@ -39,4 +58,4 @@
             }
         }
     }
-}
+}