ama_layout 3.2.2 → 4.0.0

data/app/assets/stylesheets/ama_layout/layout/print.scss

@@ -0,0 +1,23 @@
+@media print{
+  .side-nav,
+  .page-footer,
+  .top-bar-right,
+  .breadcrumbs,
+  .table__header--grey-bg{
+    display: none;
+  }
+
+  .main-container{
+    float: left !important;
+    width: 100%;
+  }
+
+  // overrides equalizer, which causes weirdness with print
+  .large-8.columns.table__bg-spacing{
+    height: auto !important;
+  }
+
+  .header{
+    position: relative;
+  }
+}

data/app/assets/stylesheets/ama_layout/layout/variables.scss

@@ -4,10 +4,11 @@ $white: #ffffff;
 $green: #3fae60;
 $brand-green: #78be20; //Rewards Green
 $brand-blue-insurance:#00a3e0;
-$notice-orange: #e7992b;
+$orange: #e7992b;
 // Blue tones - ordered from lightest to darkest
 $sky: #e2f4fc;
 $ocean: #8cceec;
+$cerulean: #2577be;
 $brand-blue-light: #00539b;
 $brand-blue-dark: #00205b;
 // Grey tones - ordered from lightest to darkest
@@ -24,11 +25,26 @@ $primary-color: $brand-blue-dark;
 $secondary-color: $brand-blue-light;
 // Fonts
 $font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
+$font-family-headings: "Open Sans Semi-Bold", Helvetica, Arial, sans-serif;
 $base-font-size: 1rem;
 // Spacing
-$base-margin: 5px;
-$base-padding: 5px;
+$base-margin: 1rem;
+$base-padding: 1rem;
+
 // Borders
-$base-border: 1px solid $smoke;
+$base-border: 2px solid $stone;
 //Radius
 $base-radius: 3px;
+//Top-Bar
+$top-bar-height: 53px;
+
+%clearfix {
+  *zoom: 1;
+  &:before, &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}

data/app/assets/stylesheets/ama_layout/layout_components/accordions.scss

@@ -1,5 +1,5 @@
 .accordion-title{
-  font-size: $base-font-size*1.375;
+  @extend .heading;
   text-decoration: none;
 
   &:hover,
@@ -18,16 +18,6 @@
   }
 }
 
-.asset-link{
-  h3,
-  h5{
-    color: $white;
-    font-size: $base-font-size*1.4;
-    line-height: 21px;
-    float: left;
-  }
-}
-
 .accordion.secondary{
   background: none;
 
@@ -36,12 +26,12 @@
   }
 
   .accordion-content a{
-    font-size: $base-font-size*0.875;
+    font-size: $base-font-size;
   }
 
   .accordion-title{
     background: $white;
-    color: $jet;
+    color: $slate;
 
     &:hover{
       background: $stone;
@@ -51,6 +41,34 @@
   .top-level,
   .top-level:hover{
     background: darken($stone, 5%);
-    color: $jet;
+    color: $slate;
+  }
+}
+
+.accordion{
+  &__header{
+    background: $brand-blue-light;
+    overflow: auto;
+    display: block;
+  }
+
+  &__heading{
+    @extend .heading;
+    @include small-10;
+  }
+
+  &__toggle{
+    @include small-2;
+    text-align: right;
+    color: $white;
+    padding-top: $base-padding*1.25;
   }
 }
+
+// Foundation sets a border-radius by default,
+// and there doesn't seem to be an override in the settings file
+.accordion-item:first-child > :first-child,
+.accordion-item:first-child > :last-child,
+:last-child:not(.is-active) > .accordion-title{
+  border-radius: 0;
+}

data/app/assets/stylesheets/ama_layout/layout_components/banner.scss

@@ -0,0 +1,17 @@
+.banner{
+  position: relative; /* This is needed for the positioning of the close icon on the blue banners*/
+
+  &--blue{
+    background: $brand-blue-insurance;
+    padding: $base-padding;
+  }
+
+  &--red{
+    background: $brand-red;
+    padding: $base-padding;
+  }
+
+  &__text{
+    text-align: center;
+  }
+}

data/app/assets/stylesheets/ama_layout/layout_components/blue-boxes.scss

@@ -1,4 +1,23 @@
 /*New Grid Block code for blue boxes*/
+.icon-box{
+  width: 100px;
+  height: 80px;
+  margin: $base-margin auto 0 auto;
+  background-repeat: no-repeat;
+  background-position: center center;
+  width: auto;
+  text-align: center;
+  color: $white;
+  font-size: $base-font-size*5;
+  line-height: $base-font-size*5;
+}
+
+.box-title{
+  text-align: center;
+  color: $white;
+  width: 90%;
+  margin: $base-margin/2 auto 0 auto;
+}
 
 .cta-btm-row{
   margin-top: 0.9375rem*2;
@@ -25,6 +44,57 @@
   }
 }
 
+.outer-quicklink-box:first-child:nth-last-child(2),
+.outer-quicklink-box:first-child:nth-last-child(2) ~ div,
+.outer-quicklink-box:first-child:nth-last-child(2) ~ li{
+  width: 49.2%;
+  margin-top: 1.5%;
+}
+
+.outer-quicklink-box:first-child:nth-last-child(3),
+.outer-quicklink-box:first-child:nth-last-child(3) ~ div,
+.outer-quicklink-box:first-child:nth-last-child(3) ~ li{
+  width: 23.5%;
+}
+
+.outer-quicklink-box:first-child:nth-last-child(4),
+.outer-quicklink-box:first-child:nth-last-child(4) ~ div,
+.outer-quicklink-box:first-child:nth-last-child(4) ~ li{
+  width: 24.2%;
+  margin-right: 0.8%;
+  margin-top: 0.8%;
+}
+
+.quicklink-single-box{
+  margin-left: 0;
+  margin-top: $base-margin;
+
+  .outer-quicklink-box > a{
+    font-size: $base-font-size;
+  }
+}
+
+/*New Grid Block code for blue boxes*/
+.cta-margin{
+  margin: 0 $base-margin/2;
+}
+
+ul{
+  li{
+    .cta-box{
+      padding: 20px;
+
+      &.light-blue-bg:hover{
+        background: lighten($brand-blue-light, 3%);
+      }
+
+      &.rewards-green-bg:hover{
+        background: lighten($brand-green, 3%);
+      }
+    }
+  }
+}
+
 .cta-title{
   text-align: center;
   color: $white;
@@ -34,7 +104,7 @@
 
 .icon-container{
   height: 80px;
-  margin: $base-margin*3 auto 0 auto;
+  margin: $base-margin auto 0 auto;
   background-repeat: no-repeat;
   background-position: center center;
   width: auto;
@@ -42,10 +112,17 @@
   color: $white;
   font-size: $base-font-size*4.5;
   line-height: $base-font-size*4.5;
+}
+
+.cta-title{
+  text-align: center;
+  color: $white;
+  width: 90%;
+  margin: $base-margin/2 auto 0 auto;
 
   @include breakpoint(small down){
-    height: 66px;
-    font-size: $base-font-size*4;
-    line-height: $base-font-size*4;
+    height: 1.5em;
+    font-size: $base-font-size;
+    line-height: $base-font-size;
   }
 }

data/app/assets/stylesheets/ama_layout/layout_components/breadcrumbs.scss

@@ -0,0 +1,10 @@
+.breadcrumbs{
+  @include large-12;
+
+  &__link{
+    &--disabled{
+      @extend .disabled;
+      pointer-events: none;
+    }
+  }
+}

data/app/assets/stylesheets/ama_layout/layout_components/button-grouping.scss

@@ -0,0 +1,111 @@
+/* button-group is a foundation element, so to avoid style conflicts ours are called button-groupings */
+.button-grouping{
+  @include grid-row;
+  @include clearfix;
+
+  &--nested{
+    @include grid-row-nest;
+  }
+
+  &__container{
+    &--full{
+      @include large-12;
+    }
+
+    &--half{
+      // use with half-small to also have half width buttons on small screens
+      @include large-6;
+    }
+
+    &--quarter{
+      @include large-3;
+      @include small-12;
+    }
+
+    &--third{
+      @include large-4;
+    }
+
+    &--half-small{
+      @include breakpoint(medium down){
+        @include small-6;
+      }
+    }
+  }
+
+  &__button{
+    @extend .button;
+    min-height: 170px;
+    position: relative;
+    width: 100%;
+    padding: 2.5em 1.75em;
+
+    &--green{
+      @extend .button-grouping__button;
+      background-color: $brand-green;
+
+      &:hover{
+        background: lighten($brand-green, 10%);
+      }
+    }
+
+    &--red{
+      @extend .button-grouping__button;
+      background-color: $brand-red;
+
+      &:hover{
+        background: lighten($brand-red, 10%);
+      }
+    }
+  }
+
+  &__content{
+    @include absolute-center;
+    -webkit-transform: translateX(-50%) translateY(-50%);
+    width: 90%;
+  }
+
+  &__icon{
+    font-size: 5rem;
+    padding-bottom: $base-padding;
+  }
+
+  &__bg-icon{
+    height: 80px;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  &__text{
+    line-height: 1rem;
+    display: block;
+
+    &--large{
+      display: block;
+      font-size: 2.5rem;
+      font-weight: bold;
+    }
+
+    &--underline{
+      display: block;
+      text-decoration: underline;
+    }
+  }
+}
+
+/* Non Font Awesome/Symbolicon Icons */
+#card-icon{
+  background-image: asset-url("card-icon.png");
+}
+
+#coverage-icon{
+  background-image: asset-url("coverage-icon.png");
+}
+
+#family-icon{
+  background-image: asset-url("family-icon.png");
+}
+
+#laptop-icon{
+  background-image: asset-url("laptop-icon.png");
+}

data/app/assets/stylesheets/ama_layout/layout_components/buttons.scss

@@ -0,0 +1,14 @@
+button.disabled,
+button[disabled],
+.button.disabled,
+.button[disabled]{
+  background-color: lighten($secondary-color, 10%);
+  border-color: none;
+
+  &:hover,
+  &:active,
+  &:focus{
+    background-color: lighten($secondary-color, 10%);
+    border-color: none;
+  }
+}

data/app/assets/stylesheets/ama_layout/layout_components/callouts.scss

@@ -0,0 +1,106 @@
+.callout-box{
+  @include callout($ash);
+
+  &__close-btn{
+    float: right;
+  }
+
+  &--green{
+    @include callout($brand-green);
+    margin-bottom: $base-margin;
+    color: $white;
+  }
+
+  &--red{
+    @include callout($brand-red);
+    margin-bottom: $base-margin;
+    color: $white;
+  }
+
+  &--ins-blue{
+    @include callout($brand-blue-insurance);
+    margin-bottom: $base-margin;
+    color: $white;
+  }
+
+  &__sub-head{
+    color: $white;
+  }
+
+  &__image-container{
+    @include large-2;
+  }
+
+  &__image{
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__content{
+    @include large-10;
+  }
+
+  &__link{
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover{
+      color: $ash;
+    }
+  }
+
+    &__heading{
+
+    }
+}
+
+.promo-block{
+  @include callout($ash);
+  @include show-for(medium);
+  position: relative;
+  overflow: auto;
+
+  &__divider{
+    @include show-for(large);
+    position: absolute;
+    color: $smoke;
+    font-size: 1.75rem;
+    top: 30%;
+
+    &--left{
+      @extend .promo-block__divider;
+      left: 33%;
+    }
+
+    &--right{
+      @extend .promo-block__divider;
+      right: 33%;
+    }
+  }
+
+  &__item{
+    @include medium-4;
+    text-align: center;
+  }
+
+  &__icon-container{
+    width: 110px;
+    height: 110px;
+    margin: $base-margin*2 auto $base-margin*2 auto;
+    background: $smoke;
+
+    &--round{
+      @extend .promo-block__icon-container;
+      border-radius: 100%;
+    }
+  }
+
+    &__icon{
+      color: $white;
+      font-size: 3.5rem;
+      text-align: center;
+      width: 100%;
+      margin-top: 28px;
+    }
+}