ama_layout 3.2.2 → 4.0.0

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

@@ -6,10 +6,12 @@
 
   &__blue-icon{
     color: $brand-blue-light;
+    font-size: 1.75rem;
   }
 
   &__grey-icon{
     color: $smoke;
+    font-size: 1.75rem;
   }
 }
 
@@ -76,19 +78,17 @@
   &__middle-text{
     color: $slate;
     position: absolute;
-    right: 0;
+    left: 20%;
+    width: 80%;
     font-size: .85rem;
-    display: table;
+    text-align: center;
     z-index: 5;
-    margin-top: 15px;
-    margin-bottom: 15px;
-    vertical-align: middle;
+    @include vertical-center;
 
     &--half{
       @extend .graph__middle-text;
       width: 47%;
-      margin-top: $base-margin;
-      margin-bottom: $base-margin;
+      left: 53%;
     }
 
     &--full{
@@ -96,6 +96,7 @@
       color: $white;
       width: 100%;
       text-align: center;
+      left: 0;
     }
   }
 

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

@@ -7,7 +7,19 @@
 @import "responsive-table";
 @import "accordions";
 @import "tab-accordions";
-@import "show-hide-content-box";
+@import "content-toggle";
 @import "cart";
 @import "reveal-modal";
+@import "sections";
+@import "link-list";
+@import "button-grouping";
+@import "breadcrumbs";
+@import "callouts";
 @import "graph";
+@import "tables";
+@import "banner";
+@import "progress-bar";
+@import "comparison-radios";
+@import "footer";
+@import "links";
+@import "buttons";

data/app/assets/stylesheets/ama_layout/layout_components/link-list.scss

@@ -0,0 +1,53 @@
+.link-list{
+  list-style-type: none;
+
+  &__item{
+    &--bordered{
+      border-bottom: 2px solid $sky;
+      padding-bottom: $base-padding/2;
+
+      &:not(:first-child){
+        padding-top: $base-padding/2;
+      }
+    }
+  }
+
+  &__link{
+    &--white{
+      color: $white;
+    }
+  }
+}
+
+.link-list-horizontal{
+  list-style-type: none;
+
+  &__item{
+    display: inline;
+  }
+}
+
+.icon-link-list{
+  list-style-type: none;
+
+  &__item{
+    border-bottom: 1px solid $smoke;
+    margin-top: 7.5px;
+  }
+
+  &__icon{
+    padding: 8.5px 13px;
+    color: $white;
+    font-size: 1.2rem;
+    text-align: center;
+    vertical-align: middle;
+    margin-right: 1.875rem;
+    width: 57px;
+    display: inline-block;
+    background: $brand-blue-light;
+  }
+
+  &__link{
+    display: inline;
+  }
+}

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

@@ -0,0 +1,8 @@
+.link--white{
+  color: $white;
+  text-decoration: underline;
+
+  &:hover{
+    color: $white;
+  }
+}

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

@@ -1,5 +1,5 @@
 .notice_notification{
-  padding: $base-padding*2 $base-padding*3 $base-padding*2 $base-padding*3;
+  padding: $base-padding/2 $base-padding;
   background-color: $brand-blue-insurance;
   color: $white;
 }
@@ -40,3 +40,29 @@
   margin: 0 auto;
   display: block;
 }
+
+.notice{
+  color: $white;
+  padding: $base-padding;
+  margin-bottom: $base-margin;
+  overflow: auto;
+
+  &--warning{
+    @extend .notice;
+    background: $orange;
+  }
+
+  &__icon-wrapper{
+    @include small-2;
+  }
+
+  &__icon{
+    font-size: 2em;
+    width: 100%;
+    text-align: center;
+  }
+
+  &__text-wrapper{
+    @include small-10;
+  }
+}

data/app/assets/stylesheets/ama_layout/layout_components/progress-bar.scss

@@ -0,0 +1,137 @@
+.progress-bar{
+  @include hide-for(small only);
+  overflow: auto;
+
+  &__section{
+    &--active{
+      background: $cerulean;
+    }
+
+    &--inactive{
+      background: $brand-blue-light;
+    }
+
+    &--completed{
+      background: $brand-blue-dark;
+    }
+  }
+
+  &--selected{
+    background: $cerulean;
+    color: $white;
+  }
+
+  &--completed{
+    color: $white;
+    background: $brand-blue-dark;
+  }
+
+  &__section-quarter{
+    @include medium-3;
+    position: relative;
+    color: $white;
+    overflow: hidden;
+    padding: 6px 0;
+  }
+    &__section-title{
+
+    }
+
+    &__section-info{
+      display: block;
+    }
+
+  &__arrow{
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    right: -20px;
+    top: -4px;
+
+    @include breakpoint(medium down){
+      display: none;
+    }
+
+    &:after{
+      content: '';
+      position: absolute;
+      right: 0;
+      border-color: transparent transparent transparent $brand-blue-light;
+      border-style: solid;
+      border-width: 35px;
+    }
+
+    &:before{
+      content: '';
+      position: absolute;
+      right: -4px; //this controls the thickness of the arrow
+      border-color: transparent transparent transparent $white;
+      background: $brand-blue-light;
+      border-style: solid;
+      border-width: 35px;
+    }
+
+    &--selected:after{
+      content: '';
+      color: $white;
+      position: absolute;
+      right: 0;
+      border-color: transparent transparent transparent $cerulean;
+      border-style: solid;
+      border-width: 35px;
+    }
+
+    &--selected:before{
+      content: '';
+      color: $white;
+      position: absolute;
+      right: -4px; //this controls the thickness of the arrow
+      border-color: transparent transparent transparent $white;
+      background: $brand-blue-light;
+      border-style: solid;
+      border-width: 35px;
+    }
+
+    &--completed:after{
+      content: '';
+      color: $white;
+      position: absolute;
+      right: 0;
+      border-color: transparent transparent transparent $brand-blue-dark;
+      border-style: solid;
+      border-width: 35px;
+    }
+
+    &--completed:before{
+      content: '';
+      color: $white;
+      position: absolute;
+      right: -4px; //this controls the thickness of the arrow
+      border-color: transparent transparent transparent $white;
+      background: $cerulean;
+      border-style: solid;
+      border-width: 35px;
+    }
+
+    &--very-completed:after{
+      content: '';
+      color: $white;
+      position: absolute;
+      right: 0;
+      border-color: transparent transparent transparent $brand-blue-dark;
+      border-style: solid;
+      border-width: 35px;
+    }
+
+    &--very-completed:before{
+      content: '';
+      color: $white;
+      position: absolute;
+      right: -4px; //this controls the thickness of the arrow
+      border-color: transparent transparent transparent $white;
+      background: $brand-blue-dark;
+      border-style: solid;
+      border-width: 35px;
+    }
+  }
+}

data/app/assets/stylesheets/ama_layout/layout_components/reveal-modal.scss

@@ -10,6 +10,21 @@ dialog .close-reveal-modal{
   cursor: pointer;
 }
 
+.reveal-modal{
+  max-width: 960px;
+
+  a{
+    text-decoration: none;
+    font-weight: normal;
+  }
+
+  @include breakpoint(small only){
+    top: 50px !important;
+    min-height: 240px;
+    position: fixed;
+  }
+}
+
 @include breakpoint(small only){
   .reveal{
     padding: $global-padding $global-padding 51px $global-padding; // 51 pixels to offset the height of the top bar

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

@@ -0,0 +1,202 @@
+.heading{
+  padding: $base-padding*.75 $base-padding;
+  color: $white;
+}
+
+.section{
+  margin-bottom: $base-margin;
+
+  &__sub-head{
+    margin-bottom: $base-margin;
+    color: $charcoal;
+    clear: both;
+  }
+
+  &__content-container{
+    @include grid-row-nest;
+  }
+
+  &__content-two-thirds{
+    @include large-8;
+
+    &>*:last-child{
+      margin-bottom: 0;
+    }
+  }
+}
+
+.section-nested{
+  @include grid-row-nest;
+  @include clearfix;
+}
+
+.section-heading{
+  @extend .heading;
+  background: $brand-blue-light;
+
+  &--no-bg{
+    padding-bottom: $base-padding;
+  }
+
+  &--no-padding{
+    background: $brand-blue-light;
+    color: $white;
+  }
+
+  &--grey-bg{
+    @extend .heading;
+    background: $slate;
+  }
+
+  &--dark-blue-bg{
+    @extend .heading;
+    background: $brand-blue-dark;
+  }
+}
+
+.section-heading--accordion{
+  @extend .heading;
+  overflow: auto;
+  display: block;
+}
+
+.section-heading--green{
+  @extend .heading;
+  background: $brand-green;
+}
+
+.section-quarter{
+  @extend .section;
+  @include large-3;
+}
+
+.section-heading--blue{
+  @extend .heading;
+  background: $brand-blue-light;
+}
+
+.section-half{
+  @extend .section;
+  @include large-6;
+}
+
+.section-full{
+  @extend .section;
+  @include large-12;
+
+  &--max-width{
+    @extend .section-full;
+    max-width: 1080px;
+  }
+}
+
+.section-third{
+  @extend .section;
+  @include large-4;
+  @include clearfix;
+}
+
+.section-quarter{
+  @extend .section;
+  @include large-3;
+}
+
+.section-two-thirds{
+  @extend .section;
+  @include large-8;
+  @include grid-column-end;
+  @include clearfix;
+
+  &:last-child:not(.section-content){
+    margin-bottom: 0;
+  }
+}
+
+.section-centered{
+  &--half{
+    @extend .section;
+    @include large-6;
+    @include large-centered;
+
+    &:last-child:not(:first-child){
+      float: none;
+    }
+  }
+}
+
+.section-content{
+  padding: $base-padding;
+  background: $white;
+  @include clearfix;
+
+  &>*:last-child{
+    margin-bottom: 0;
+    /*override so that the last child element always has margin-bottom of zero
+    (because the container has bottom padding)
+    the alternative is to set the elements themselves to ONLY have bottom-margin
+    if they're not the :last-child, but Foundation adds bottom margin to everything by default
+    so we would have to change each element individually in the _settings file.
+    */
+
+    &>*:last-child{
+      margin-bottom: 0;
+      /* the same as above, but for nested elements within sections */
+    }
+  }
+
+  &--grey-bg{
+    padding: $base-padding;
+    background: lighten($stormcloud, 5%);
+    color: $white;
+  }
+
+  &--smoke-bg{
+    padding: $base-padding;
+    background: lighten($smoke, 5%);
+  }
+
+  &--blue-bg{
+    padding: $base-padding;
+    background: $brand-blue-light;
+    color: $white;
+    @include clearfix;
+
+    label{
+      color: $white;
+    }
+  }
+}
+
+@function set-hint-color($color) {
+  @if (lightness($color) > 50) {
+    @return $smoke; // Lighter backgorund, return dark color
+  } @else {
+    @return $white; // Darker background, return light color
+  }
+}
+
+.page-container{
+  @include grid-row;
+  position: relative;
+}
+
+.main-container{
+  // using grid-column in place of large-10 so that we can set the gutters to 0
+  @include grid-column(10,0);
+  background: $stone;
+  @include clearfix;
+
+  @include breakpoint(medium down){
+    @include grid-column(12,0);
+  }
+}
+
+.main-container-full{
+  // using grid-column in place of large-10 so that we can set the gutters to 0
+  @include grid-column(12,0);
+  background: $stone;
+
+  @include breakpoint(medium down){
+    @include grid-column(12,0);
+  }
+}