From 1ad12c1bfe5e8c59f0266afcf7b1e5cb10a97988 Mon Sep 17 00:00:00 2001
From: Alex Basson <abasson@vmware.com>
Date: Fri, 17 Sep 2021 16:52:27 -0400
Subject: [PATCH] Add spacing css

---
 app/assets/stylesheets/_sizes.scss           |  8 +++
 app/assets/stylesheets/application.scss      |  2 +
 app/assets/stylesheets/borders.scss          |  5 ++
 app/assets/stylesheets/spacing.scss          | 55 ++++++++++++++++++++
 app/views/dashboard/_construct_bar_graph.erb |  2 +-
 app/views/dashboard/index.html.erb           |  4 +-
 6 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/stylesheets/_sizes.scss
 create mode 100644 app/assets/stylesheets/borders.scss
 create mode 100644 app/assets/stylesheets/spacing.scss

diff --git a/app/assets/stylesheets/_sizes.scss b/app/assets/stylesheets/_sizes.scss
new file mode 100644
index 00000000..8028dd36
--- /dev/null
+++ b/app/assets/stylesheets/_sizes.scss
@@ -0,0 +1,8 @@
+$unit: 8px;
+
+$xsmall: $unit / 4;  // 2px
+$small: $unit / 2;   // 4px
+$medium: $unit;      // 8px
+$large: $unit * 2;   // 16px
+$xlarge: $unit * 3;  // 24px
+$xxlarge: $unit * 4; // 32px
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index ccc1b59b..8395f764 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,6 +1,8 @@
 @import "bootstrap";
+@import "spacing";
 @import "fonts";
 @import "colors";
+@import "borders";
 @import "flex";
 @import "scaffolds";
 @import "school_categories";
diff --git a/app/assets/stylesheets/borders.scss b/app/assets/stylesheets/borders.scss
new file mode 100644
index 00000000..4a7aa653
--- /dev/null
+++ b/app/assets/stylesheets/borders.scss
@@ -0,0 +1,5 @@
+@import "sizes";
+
+.border-radius-8 {
+  border-radius: $unit;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/spacing.scss b/app/assets/stylesheets/spacing.scss
new file mode 100644
index 00000000..19164611
--- /dev/null
+++ b/app/assets/stylesheets/spacing.scss
@@ -0,0 +1,55 @@
+@import 'sizes';
+
+.pv80 {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+.ph120 {
+  padding-left: 120px;
+  padding-right: 120px;
+}
+
+$whitespace-keys: (p padding, m margin, a '', v -top -bottom, h -left -right, t -top, r -right, b -bottom, l -left);
+
+@function expand_whitespace_key($key) {
+  @each $pair in $whitespace-keys {
+    $short: nth($pair, 1);
+    $long: nth($pair, 2);
+
+    // v and h need to pass in 2 parameters
+    @if (length($pair) == 3) {
+      $long: (nth($pair, 2) nth($pair, 3));
+    }
+    @if $short == $key {
+      @return $long;
+    }
+  }
+  @warn "Couldn't export #{$key}";
+  @return $key;
+}
+
+$types: (p, m);
+$locations: (a, v, h, t, r, b, l);
+$t-shirt-sizes: (n, xs, s, m, l, xl, xxl);
+
+@mixin whitespace($units: ()) {
+  $units: join(0, $units);
+
+  @for $i from 1 through length($units) {
+    $t-shirt-size: nth($t-shirt-sizes, $i);
+    $size: nth($units, $i);
+
+    @each $location in $locations {
+      @each $type in $types {
+        .#{$type}#{$location}#{$t-shirt-size} {
+          @each $whitespace-location in expand_whitespace_key($location) {
+            #{expand_whitespace_key($type)}#{$whitespace-location}: $size !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include whitespace(($xsmall, $small, $medium, $large, $xlarge, $xxlarge));
diff --git a/app/views/dashboard/_construct_bar_graph.erb b/app/views/dashboard/_construct_bar_graph.erb
index fa27bb70..720927aa 100644
--- a/app/views/dashboard/_construct_bar_graph.erb
+++ b/app/views/dashboard/_construct_bar_graph.erb
@@ -1,4 +1,4 @@
-<div class="white-bg" style="padding: 24px; border-radius: 8px;">
+<div class="white-bg paxl border-radius-8">
 
   <% heading_gutter = 30 %>
   <% construct_row_height = 40 %>
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index 841f9272..c091c527 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -1,6 +1,6 @@
 <h1><%= @school.name %></h1>
 
-<div class="beige-bg" style="padding: 80px 120px;">
+<div class="beige-bg ph120 pv80">
   <div class="fdr fjb fac">
     <h2 class="h1">Areas Of Interest</h2>
     <div>
@@ -18,7 +18,7 @@
     </div>
   </div>
 
-  <div>
+  <div class="mtl">
     <h2 class="h1 red">Distance from benchmark</h2>
     <p class="p">This graph shows how much a score is above or below the benchmark of any given scale.</p>
   </div>