Initial commit

lib/assets/javascripts/new-dashboard/styles/helpers/_colors.scss

@@ -0,0 +1,27 @@
+$colors: (
+  'Primary': $color-primary,
+  'White': $white,
+  'Grey': $text__color,
+  'SoftGrey': $text__color--secondary,
+  'Alert': $danger__color,
+  'SoftBlue': $color-primary--soft,
+  'DarkBlue': $blue--900
+);
+
+@each $name, $color in $colors {
+  .is-txt#{$name} {
+    color: #{$color};
+  }
+}
+
+$bgcolors: (
+  'White': $white,
+  'SoftBlue': $color-primary--soft,
+  'Alert': $danger__color,
+);
+
+@each $name, $color in $bgcolors {
+  .is-bg#{$name} {
+    background-color: #{$color};
+  }
+}

lib/assets/javascripts/new-dashboard/styles/helpers/_flexbox.scss

@@ -0,0 +1,54 @@
+$direction: (
+  'row': row,
+  'column': column,
+);
+
+$justify: (
+  'start': flex-start,
+  'end': flex-end,
+  'between': space-between,
+  'around': space-around,
+  'center': center
+);
+
+$align: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'baseline': baseline,
+  'stretch': stretch
+);
+
+.u-flex {
+  display: flex;
+}
+
+.u-inlineflex {
+  display: inline-flex;
+}
+
+@each $name, $property in $direction {
+  .u-flex__direction--#{$name} {
+    flex-direction: #{$property} !important;
+  }
+}
+
+@each $name, $property in $justify {
+  .u-flex__justify--#{$name} {
+    justify-content: #{$property} !important;
+  }
+}
+
+@each $name, $property in $align {
+  .u-flex__align--#{$name} {
+    align-items: #{$property} !important;
+  }
+
+  .u-flex__self--#{$name} {
+    align-items: #{$property} !important;
+  }
+}
+
+.u-flex__grow--1 {
+  flex-grow: 1;
+}

lib/assets/javascripts/new-dashboard/styles/helpers/_spacing.scss

@@ -0,0 +1,49 @@
+$sizes: (0, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 48, 60, 64, 72, 80, 96, 120);
+
+// paddings
+.u-p--0 {
+  padding: 0 !important;
+}
+
+@each $size in $sizes {
+  .u-pt--#{$size} {
+    padding-top: #{$size}px;
+  }
+
+  .u-pr--#{$size} {
+    padding-right: #{$size}px;
+  }
+
+  .u-pb--#{$size} {
+    padding-bottom: #{$size}px;
+  }
+
+  .u-pl--#{$size} {
+    padding-left: #{$size}px;
+  }
+}
+
+// Margins
+.u-m--0 {
+  margin: 0 !important;
+}
+
+@each $size in $sizes {
+  .u-mt--#{$size} {
+    margin-top: #{$size}px;
+  }
+
+  .u-mr--#{$size} {
+    margin-right: #{$size}px;
+  }
+
+  .u-mb--#{$size} {
+    margin-bottom: #{$size}px;
+  }
+
+  .u-ml--#{$size} {
+    margin-left: #{$size}px;
+  }
+}
+
+

lib/assets/javascripts/new-dashboard/styles/helpers/_utilities.scss

@@ -0,0 +1,55 @@
+@media (max-width: $layout-tablet) {
+  .u-hideTablet {
+    display: none;
+  }
+}
+
+@media (max-width: $layout-mobile) {
+  .u-hideMobile {
+    display: none;
+  }
+}
+
+.u-showMobile {
+  display: none;
+}
+
+@media (max-width: $layout-mobile) {
+  .u-showMobile {
+    display: flex;
+  }
+}
+
+.u-no-decoration {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.u-is-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.u-overflow-hidden {
+  overflow: hidden;
+}
+
+.u-width--100 {
+  width: 100%;
+}
+
+.u-inline {
+  display: inline;
+}
+
+//List Styles
+.u-list__style--decimal {
+  list-style-type: decimal;
+}
+
+.u-list__position--inside {
+  list-style-position: inside;
+}