Merge branch 'master' into 90-basic-webpack

* master:
  Reorganize files for CTA so it's consistent with other components (#345)
  Update main-nav.twig (#331)
  get rid of ID (#342)
  5 Lines Lockup + Variants (#289)
  Update _alert--info.scss (#330)

# Conflicts: all resolved using "mine"
#	core/dist/css/decanter.css
#	package-lock.json
#	package.json

core/scss/components/alert/_alert--error.scss

@@ -6,4 +6,12 @@
   background-image: url("#{$image-path}/alert-error.png");
   background-image: url("#{$image-path}/alert-error.svg");
   color: $color-white;
+
+  a {
+    color: $color-white;
+
+    &:hover {
+      color: $color-cloud;
+    }
+  }
 }

core/scss/components/alert/_alert--info.scss

@@ -6,4 +6,12 @@
   background-image: url("#{$image-path}/alert-info.png");
   background-image: url("#{$image-path}/alert-info.svg");
   color: $color-white;
+
+  a {
+    color: $color-white;
+
+    &:hover {
+      color: $color-cloud;
+    }
+  }
 }

core/scss/components/alert/_alert--success.scss

@@ -6,4 +6,12 @@
   background-image: url("#{$image-path}/alert-success.png");
   background-image: url("#{$image-path}/alert-success.svg");
   color: $color-white;
+
+  a {
+    color: $color-white;
+
+    &:hover {
+      color: $color-cloud;
+    }
+  }
 }

core/scss/components/alert/_alert--warning.scss

@@ -5,4 +5,12 @@
   background-color: map-get($alert-colors, 'warning');
   background-image: url("#{$image-path}/alert-warning.png");
   background-image: url("#{$image-path}/alert-warning.svg");
+
+  a {
+    color: $color-cardinal-red;
+
+    &:hover {
+      color: $color-black;
+    }
+  }
 }

core/scss/components/alert/_alert.scss

@@ -53,5 +53,9 @@
     .su-alert__text {
       @include margin(0 null);
     }
+
+    a {
+      text-decoration: underline;
+    }
   }
 }

core/scss/components/cta/_cta--button-bottom-icon.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+// Call-to-action block with an icon centered on image link and a button at the bottom
+
+.su-cta--button-bottom-icon {
+  .su-cta__icon {
+    display: block;
+    max-width: 30%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    $_shifty: -($lead-font-size + 3rem) / 2; //Extra vertical shift of icon to compensate for button height
+    transform: translateX(-50%) translateY(-50%) translateY($_shifty);
+  }
+}

core/scss/components/cta/_cta--button-center.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+// Call-to-action block with a button in the center
+
+.su-cta--button-center {
+  .su-cta__button {
+    @include centering;
+
+    @include grid-media('xs') {
+      width: auto;
+    }
+  }
+}

core/scss/components/cta/_cta.scss

@@ -12,44 +12,7 @@
 //
 // Style guide: Components.CTA
 //
-.su-cta--button-bottom,
-.su-cta {
-  @include cta-button;
-}
-
-.su-cta__img {
-  min-height: 1px; //IE fix
-}
-
-.su-cta--button-bottom-icon {
-
-  position: relative;
-
-  .su-cta__icon {
-    display: block;
-    max-width: 30%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    $_shifty: -($lead-font-size + 3rem) / 2; //Extra vertical shift of icon to compensate for button height
-    transform: translateX(-50%) translateY(-50%) translateY($_shifty);
-  }
-}
-
-.su-cta--button-center {
-
-  position: relative;
-
-  .su-cta__button {
-
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    @include grid-media('xs') {
-      width: auto;
-    }
-  }
 
+.su-cta {
+  @include cta;
 }

core/scss/components/cta/index.scss

@@ -5,4 +5,6 @@
 ///
 
 @import
-  'cta';
+  'cta',
+  'cta--button-center',
+  'cta--button-bottom-icon';

core/scss/components/lockup/_lockup--option-a.scss

@@ -0,0 +1,62 @@
+@charset 'UTF-8';
+
+//
+// Lockup option A: Multidisciplinary (or long school name)
+//
+.su-lockup--option-a {
+
+  > a {
+    @include grid-media-max('sm') {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .su-lockup__line2,
+  .su-lockup__line3,
+  .su-lockup__line4 {
+    display: none;
+  }
+
+  .su-lockup__cell2 {
+    @include grid-media-max('sm') {
+      order: 3;
+    }
+  }
+
+  .su-lockup__line1 {
+    line-height: 2.6rem;
+
+    @include grid-media-max('sm') {
+      @include margin(null null null -2px);
+    }
+
+    @include grid-media('md') {
+      font-size: 3.2rem;
+      line-height: 0.7em;
+    }
+  }
+
+  .su-lockup__line5 {
+    font-size: 2rem;
+    font-weight: $font-bold;
+    text-transform: uppercase;
+
+    @include grid-media-max('sm') {
+      @include margin(.75rem null null -2px);
+      order: 2;
+
+      &::after {
+        @include margin(.75rem null .5rem);
+        border-bottom: 1px solid $color-black;
+        content: '';
+        display: block;
+        width: 120px;
+      }
+    }
+
+    @include grid-media('md') {
+      font-size: 2.1rem;
+    }
+  }
+}

core/scss/components/lockup/_lockup--option-b.scss

@@ -0,0 +1,35 @@
+@charset 'UTF-8';
+
+//
+// Lockup option B: Unit (2 lines, big/small)
+//
+.su-lockup--option-b {
+
+  .su-lockup__line3,
+  .su-lockup__line4,
+  .su-lockup__line5 {
+    display: none;
+  }
+
+  .su-lockup__line1 {
+    @include margin(null null 0.2em);
+
+    @include grid-media('md') {
+      @include margin(-.4rem null null);
+      font-size: 1.9rem;
+    }
+
+    @include grid-media-max('sm') {
+      @include margin(.5rem null .2rem -2px);
+    }
+  }
+
+  .su-lockup__line2 {
+    line-height: 0.7em;
+
+    @include grid-media-max('sm') {
+      @include margin(null null null -2px);
+      line-height: 2.6rem;
+    }
+  }
+}

core/scss/components/lockup/_lockup--option-c.scss

@@ -0,0 +1,70 @@
+@charset 'UTF-8';
+
+//
+// Lockup option C: Multidisciplinary + Unit (2 lines, big/small)
+//
+.su-lockup--option-c {
+
+  > a {
+    @include grid-media-max('sm') {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .su-lockup__line3,
+  .su-lockup__line4 {
+    display: none;
+  }
+
+  .su-lockup__cell2 {
+    @include grid-media-max('sm') {
+      @include margin(null null null -2px);
+      order: 3;
+    }
+  }
+
+  .su-lockup__line1 {
+    @include margin(null null 0.2em null);
+
+    @include grid-media('md') {
+      @include margin(-.4rem null null);
+      font-size: 1.9rem;
+    }
+
+    @include grid-media-max('sm') {
+      @include margin(null null .2rem null);
+    }
+  }
+
+  .su-lockup__line2 {
+    line-height: 0.7em;
+
+    @include grid-media-max('sm') {
+      line-height: 2.6rem;
+    }
+  }
+
+  .su-lockup__line5 {
+    font-size: 2rem;
+    font-weight: $font-bold;
+    text-transform: uppercase;
+
+    @include grid-media-max('sm') {
+      @include margin(.75rem null null -2px);
+      order: 2;
+
+      &::after {
+        @include margin(.75rem null .5rem);
+        border-bottom: 1px solid $color-black;
+        content: '';
+        display: block;
+        width: 120px;
+      }
+    }
+
+    @include grid-media('md') {
+      font-size: 2.1rem;
+    }
+  }
+}

core/scss/components/lockup/_lockup--option-d.scss

@@ -0,0 +1,31 @@
+@charset 'UTF-8';
+
+//
+// Lockup option D: Unit + Level (1 line)
+//
+.su-lockup--option-d {
+
+  .su-lockup__line2,
+  .su-lockup__line4,
+  .su-lockup__line5 {
+    display: none;
+  }
+
+  .su-lockup__line1 {
+    @include grid-media("sm") {
+      @include margin(-.7rem null null);
+  }
+
+    @include grid-media-max('sm') {
+      @include margin(.5rem null .2rem -2px);
+    }
+  }
+
+  .su-lockup__line3 {
+
+    @include grid-media('md') {
+      font-size: 1.8rem;
+      line-height: .7em;
+    }
+  }
+}

core/scss/components/lockup/_lockup--option-e.scss

@@ -0,0 +1,43 @@
+@charset 'UTF-8';
+
+//
+// Lockup option E: Unit (2 lines) + Level
+//
+.su-lockup--option-e {
+
+  .su-lockup__line4,
+  .su-lockup__line5 {
+    display: none;
+  }
+
+  .su-lockup__line1 {
+
+    @include grid-media("sm") {
+      @include margin(-.7rem null null);
+      font-size: 2.6rem;
+  }
+
+    @include grid-media-max('sm') {
+      @include margin(.5rem null null -2px);
+    }
+  }
+
+  .su-lockup__line2 {
+    line-height: 2.6rem;
+
+    @include grid-media-max('sm') {
+      @include margin(null null null -2px);
+    }
+  }
+
+  .su-lockup__line3 {
+    @include margin(.5rem null null);
+    font-style: italic;
+
+    @include grid-media('md') {
+      @include margin(.8rem null null);
+      font-size: 1.9rem;
+      line-height: .7em;
+    }
+  }
+}