feat: styles for cms grid (#131)

* new seperate grid only css

* new buttons only css

* Only update cms styles under umb-row-inner

* accordio & typography grid styles

Co-authored-by: Nathan Rogan <nathan.rogan@wmca.org.uk>

gulp-tasks/paths.js

@@ -10,7 +10,11 @@ module.exports = {
     minifySrc: [
       'src/wmcads/assets/sass/wmcads.scss',
       'src/www/wmcads-website.scss',
-      'src/www/pages/templates/templates.scss'
+      'src/www/pages/templates/templates.scss',
+      'src/wmcads/assets/sass/wmcads-grid/grid.scss',
+      'src/wmcads/assets/sass/split/buttons.scss',
+      'src/wmcads/assets/sass/split/accordion.scss',
+      'src/wmcads/assets/sass/split/typography.scss'
     ], // List of scss file(s) which should be processed, linted & minified
     output: 'build/css/', // output location of minified styles
     reactNativeSrc: 'src/wmcads/assets/sass/wmcads.scss'

src/wmcads/assets/sass/split/accordion.scss

@@ -0,0 +1,12 @@
+// Vars
+@import "https://fonts.googleapis.com/css?family=DM+Sans:700&display=swap"; // Google Fonts
+@import "../vars";
+
+// Mixins
+@import "../mixins";
+
+
+// Accorddion Styles
+.umb-grid {
+  @import "../../../components/accordion/accordion";
+}

src/wmcads/assets/sass/split/buttons.scss

@@ -0,0 +1,12 @@
+// Vars
+@import "https://fonts.googleapis.com/css?family=DM+Sans:700&display=swap"; // Google Fonts
+@import "../vars";
+
+// Mixins
+@import "../mixins";
+
+
+// Button Styles
+.umb-grid {
+  @import "../../../components/button/button"; // Import all pattern styles
+}

src/wmcads/assets/sass/split/typography.scss

@@ -0,0 +1,13 @@
+// Vars
+@import "https://fonts.googleapis.com/css?family=DM+Sans:700&display=swap"; // Google Fonts
+@import "../vars";
+
+// Mixins
+@import "../mixins";
+
+
+// Typography Styles
+#umb-grid {
+  @import "../typography";
+}
+

src/wmcads/assets/sass/wmcads-grid/grid.scss

@@ -0,0 +1,46 @@
+@import "../vars";
+
+// When setting the primary font stack, apply it to the Pure grid units along
+// with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
+// specific font stacks to ensure the greatest OS/browser compatibility.
+
+.umb-grid {
+  button,
+  input,
+  select,
+  textarea,
+  .wmcads-grid [class*="wmcads-col-"] {
+    font-family: $x-font-family;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .wmcads-grid {
+    display: flex;
+    width: 100%;
+    text-rendering: optimizespeed;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row wrap;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+    -webkit-align-content: flex-start;
+    -ms-flex-line-pack: start;
+    align-content: flex-start;
+
+    [class*="wmcads-col-"] {
+      display: inline-block;
+      zoom: 1;
+      letter-spacing: normal;
+      word-spacing: normal;
+      text-rendering: auto;
+      vertical-align: top;
+    }
+  }
+
+  // Import grid components
+  @import "grid-cols";
+  @import "grid-spacing";
+
+  // Import utilities
+  @import "../utilities";
+}