playbook_ui 10.26.0.pre.alpha.sticky1 → 10.26.1

data/app/pb_kits/playbook/tokens/_screen_sizes.scss

@@ -17,6 +17,26 @@ $breakpoints: (
   xl: $screen-xl-min
 );
 
+$breakpoints_grid: (
+    xs: (
+        max: $screen-xs-min
+    ),
+    sm: (
+        min: $screen-sm-min,
+        max: $screen-md-max
+    ),
+    md: (
+        min: $screen-md-min,
+        max: $screen-lg-max
+    ),
+    lg: (
+        min: $screen-lg-min,
+        max: $screen-xl-max
+    ),
+    xl: (
+        min: $screen-xl-min,
+    )
+);
 
 @function breakpoint($breakpoint_name) {
   @return map-get($breakpoints, $breakpoint_name);
@@ -28,3 +48,19 @@ $breakpoints: (
     @content;
   }
 }
+
+@mixin break_on($min: null, $max: null) {
+  @if not $max {
+    @media screen and (min-width: $min) {
+      @content;
+    }
+  } @else if not $min {
+    @media screen and (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @media screen and (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  }
+}

data/app/pb_kits/playbook/utilities/_align_content.scss

@@ -1,29 +1,10 @@
-.align_content_start {
-  display: flex;
-  align-content: start !important;
-}
-
-.align_content_end {
-  display: flex;
-  align-content: end !important;
-}
-
-.align_content_center {
-  display: flex;
-  align-content: center !important;
-}
-
-.align_content_space_between {
-  display: flex;
-  align-content: space-between !important;
-}
-
-.align_content_space_around {
-  display: flex;
-  align-content: space-around !important;
-}
-
-.align_content_space_evenly {
-  display: flex;
-  align-content: space-evenly !important;
-}
+$align_content_values: (
+  start: start,
+  end: end,
+  center: center,
+  space_between: space-between,
+  space_around: space-around,
+  space_evenly: space-evenly
+);
+
+@include global_props_responsive_css($align_content_values, 'align_content', 'align-content');

data/app/pb_kits/playbook/utilities/_align_items.scss

@@ -1,35 +1,11 @@
-.align_items_flex_start {
-  display: flex;
-  align-items: flex-start !important;
-}
-
-.align_items_flex_end {
-  display: flex;
-  align-items: flex-end !important;
-}
-
-.align_items_start {
-  display: flex;
-  align-items: start !important;
-}
-
-.align_items_end {
-  display: flex;
-  align-items: end !important;
-}
-
-
-.align_items_center {
-  display: flex;
-  align-items: center !important;
-}
-
-.align_items_baseline {
-  display: flex;
-  align-items: baseline !important;
-}
-
-.align_items_stretch {
-  display: flex;
-  align-items: stretch !important;
-}
+$align_items_values: (
+  flex_start: flex-start,
+  flex_end: flex-end,
+  start: start,
+  center: center,
+  end: end,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($align_items_values, 'align_items', 'align-items');

data/app/pb_kits/playbook/utilities/_align_self.scss

@@ -1,29 +1,10 @@
-.align_self_start {
-  display: flex;
-  align-self: start !important;
-}
-
-.align_self_end {
-  display: flex;
-  align-self: end !important;
-}
-
-.align_self_auto {
-  display: flex;
-  align-self: auto !important;
-}
-
-.align_self_center {
-  display: flex;
-  align-self: center !important;
-}
-
-.align_self_stretch {
-  display: flex;
-  align-self: stretch !important;
-}
-
-.align_self_baseline {
-  display: flex;
-  align-self: baseline !important;
-}
+$align_self_values: (
+  auto: auto,
+  start: start,
+  center: center,
+  end: end,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($align_self_values, 'align_self', 'align-self');

data/app/pb_kits/playbook/utilities/_display.scss

@@ -1,3 +1,5 @@
+@import "../tokens/display";
+
 .display_block {
     display: block;
 }
@@ -18,6 +20,28 @@
     display: inline-flex;
 }
 
-.display_hidden {
+.display_none {
     display: none;
-}
+}
+
+$display_values: (
+    none: $display_none,
+    flex: $display_flex,
+    inline: $display_inline,
+    inline_block: $display_inline_block,
+    inline_flex: $display_inline_flex,
+    block: $display_block
+);
+
+// using a grid here
+@each $size, $size_value in $breakpoints_grid {
+    @each $display, $display_value in $display_values {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        .display_#{$size}_#{$display} {
+          @include break_on($min_size, $max_size) {
+            display: #{$display_value} !important;
+          }
+        }
+    }
+}

data/app/pb_kits/playbook/utilities/_flex.scss

@@ -1,15 +1,20 @@
-.flex_auto {
-  flex: auto !important;
-}
+$flex_values: (
+  auto: auto,
+  initial: initial,
+  none: none,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  12: 12,
+);
 
-.flex_initial {
-  flex: initial !important;
-}
-
-.flex_none {
-  flex: none !important;
-}
-
-.flex_1 {
-  flex: 1 !important;
-}
+@include global_props_responsive_css($flex_values, 'flex', 'flex');

data/app/pb_kits/playbook/utilities/_flex_direction.scss

@@ -1,19 +1,8 @@
-.flex_direction_row {
-  display: flex;
-  flex-direction: row !important;
-}
+$flex_direction_values: (
+  row: row,
+  column: column,
+  row_reverse: row-reverse,
+  column_reverse: column-reverse
+);
 
-.flex_direction_column {
-  display: flex;
-  flex-direction: column !important;
-}
-
-.flex_direction_row_reverse {
-  display: flex;
-  flex-direction: row-reverse !important;
-}
-
-.flex_direction_column_reverse {
-  display: flex;
-  flex-direction: column-reverse !important;
-}
+@include global_props_responsive_css($flex_direction_values, 'flex_direction', 'flex-direction');

data/app/pb_kits/playbook/utilities/_flex_grow.scss

@@ -1,9 +1,6 @@
-.flex_grow_1 {
-  display: flex;
-  flex-grow: 1 !important;
-}
+$flex_grow_values: (
+  0: 0,
+  1: 1,
+);
 
-.flex_grow_0 {
-  display: flex;
-  flex-grow: 0 !important;
-}
+@include global_props_responsive_css($flex_grow_values, 'flex_grow', 'flex-grow');

data/app/pb_kits/playbook/utilities/_flex_shrink.scss

@@ -1,9 +1,6 @@
-.flex_shrink_1 {
-  display: flex;
-  flex-shrink: 1 !important;
-}
+$flex_shrink_values: (
+  0: 0,
+  1: 1,
+);
 
-.flex_shrink_0 {
-  display: flex;
-  flex-shrink: 0 !important;
-}
+@include global_props_responsive_css($flex_shrink_values, 'flex_shrink', 'flex-shrink');

data/app/pb_kits/playbook/utilities/_flex_wrap.scss

@@ -1,14 +1,7 @@
-.flex_wrap_wrap {
-  display: flex;
-  flex-wrap: wrap !important;
-}
+$flex_wrap_values: (
+  wrap: wrap,
+  nowrap: nowrap,
+  wrap_reverse: wrap-reverse,
+);
 
-.flex_wrap_nowrap {
-  display: flex;
-  flex-wrap: nowrap !important;
-}
-
-.flex_wrap_wrap_reverse {
-  display: flex;
-  flex-wrap: wrap-reverse !important;
-}
+@include global_props_responsive_css($flex_wrap_values, 'flex_wrap', 'flex-wrap');

data/app/pb_kits/playbook/utilities/_justify_content.scss

@@ -1,23 +1,10 @@
-.justify_content_start {
-  justify-content: start !important;
-}
-
-.justify_content_end {
-  justify-content: end !important;
-}
-
-.justify_content_center {
-  justify-content: center !important;
-}
-
-.justify_content_space_between {
-  justify-content: space-between !important;
-}
-
-.justify_content_space_around {
-  justify-content: space-around !important;
-}
-
-.justify_content_space_evenly {
-  justify-content: space-evenly !important;
-}
+$justify_content_values: (
+  start: start,
+  center: center,
+  end: end,
+  space_around: space-around,
+  space_between: space-between,
+  space_evenly: space-evenly,
+);
+
+@include global_props_responsive_css($justify_content_values, 'justify_content', 'justify-content');

data/app/pb_kits/playbook/utilities/_justify_self.scss

@@ -1,19 +1,9 @@
-.justify_self_auto {
-  justify-self: auto !important;
-}
-
-.justify_self_start {
-  justify-self: start !important;
-}
-
-.justify_self_end {
-  justify-self: end !important;
-}
-
-.justify_self_center {
-  justify-self: center !important;
-}
-
-.justify_self_stretch {
-  justify-self: stretch !important;
-}
+$justify_self_values: (
+  auto: auto,
+  start: start,
+  center: center,
+  end: end,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($justify_self_values, 'justify_self', 'justify-self');

data/app/pb_kits/playbook/utilities/_mixins.scss

@@ -0,0 +1,26 @@
+@mixin global_props_css($props, $class_prefix, $css_attribute, $responsive) {
+  @each $propkey, $propvalue in $props {
+    .#{$class_prefix}_#{$propkey} {
+      #{$css_attribute}: #{$propvalue} !important;
+      @content;
+    }
+  }
+
+  @if $responsive {
+    @each $size, $size_value in $breakpoints_grid {
+      @each $prop_key, $prop_value in $props {
+          $min_size: map-get($size_value, "min");
+          $max_size: map-get($size_value, "max");
+          .#{$class_prefix}_#{$size}_#{$prop_key} {
+            @include break_on($min_size, $max_size) {
+              #{$css_attribute}: #{$prop_value} !important;
+            }
+          }
+      }
+    }
+  }
+}
+
+@mixin global_props_responsive_css($props, $class_prefix, $css_attribute) {
+  @include global_props_css($props, $class_prefix, $css_attribute, 1)
+}

data/app/pb_kits/playbook/utilities/_order.scss

@@ -1,55 +1,17 @@
-.order_1 {
-  order: 1 !important;
-}
-
-.order_2 {
-  order: 2 !important;
-}
-
-.order_3 {
-  order: 3 !important;
-}
-
-.order_4 {
-  order: 4 !important;
-}
-
-.order_5 {
-  order: 5 !important;
-}
-
-.order_6 {
-  order: 6 !important;
-}
-
-.order_7 {
-  order: 7 !important;
-}
-
-.order_8 {
-  order: 8 !important;
-}
-
-.order_9 {
-  order: 9 !important;
-}
-
-.order_10 {
-  order: 10 !important;
-}
-
-.order_11 {
-  order: 11 !important;
-}
-
-.order_12 {
-  order: 12 !important;
-}
-
-.order_none {
-  order: none !important;
-}
-
-.order_first {
-  order: -1 !important;
-}
+$order_values: (
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  12: 12,
+);
+
+@include global_props_responsive_css($order_values, 'flex_order', 'order');