@ulu/frontend 0.1.0-beta.99 → 0.2.0-beta.10

package/{scss → lib/scss}/components/_button.scss

@@ -4,18 +4,25 @@
 ////
 
 @use "sass:map";
+@use "sass:meta";
 // @use "sass:selector" as sassSelector;
 @use "../typography";
 @use "../selector";
 @use "../utils";
 @use "../button";
+@use "../element";
+
+$-fallbacks: (
+  "icon-centered-vertical-offset": meta.get-function("get", false, "element")
+);
 
 /// Module Settings
 /// @type Map
 /// @prop {Dimension} icon-margin [1em] List of other sizes (large by default), each size is a map of (width, font-size) 
 
 $config: (
-  "icon-margin" : 0.5em
+  "icon-margin" : 0.5em,
+  "icon-centered-vertical-offset": true
 ) !default;
 
 /// Change modules $config
@@ -33,7 +40,8 @@ $config: (
 ///   @include ulu.component-button-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "component-button [config]");
+  $value: utils.require-map-get($config, $name, "component-button [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 /// Output button component styles
@@ -68,14 +76,15 @@ $config: (
       @include button.size($size);
     }
   }
-
+  
   @each $style, $values in button.$styles {
     #{ $prefix }--#{$style} {
       @include button.style($style);
     }
   }
-
+  
   #{ $icon-selector } {
+    
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -86,6 +95,16 @@ $config: (
     width: button.get("icon-size");
     height: button.get("icon-size");
     padding: 0 !important;
+
+    #{ $prefix }__icon {
+      transform: translatey(get("icon-centered-vertical-offset"));
+      &:first-child {
+        margin-right: 0;
+      }
+      &:last-child {
+        margin-left: 0;
+      }
+    }
   }
 
   @each $size, $values in button.$sizes {

package/{scss → lib/scss}/components/_card-grid.scss

@@ -17,9 +17,9 @@
 /// @prop {CssValue} template-columns [1fr 1fr] The template-columns of the card-grid.
 
 $config: (
-  "gap" : 2rem,
+  "gap" : 1.5rem,
   "template-columns" : 1fr 1fr,
-  "compact-gap" : 1rem,
+  "compact-gap" : 0.75rem,
   "compact-template-columns" : 1fr 1fr 1fr,
 ) !default;
 
@@ -67,6 +67,12 @@ $config: (
     grid-template-columns: get("compact-template-columns");
     gap: get("compact-gap");
   }
+  #{ $prefix }--one-column {
+    grid-template-columns: 1fr;
+  }
+  #{ $prefix }--rows-fit {
+    grid-auto-rows: auto;
+  }
   @include breakpoint.max("small") {
     #{ $prefix } {
       grid-template-columns: 1fr;