ama_layout 3.2.2 → 4.0.0

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

@@ -1,144 +1,70 @@
-.dashboard-title{
-  font-size: $base-font-size*0.875;
-  font-weight: normal;
-  color: $charcoal;
-  text-transform: uppercase;
+.side-nav{
   background: $white;
-  padding: $base-padding*3;
-}
-
-.dashboard-title{
-  &:first-child{
-    @extend .mt0;
-  }
-}
-
-.dashboard-nav{
-  width: 100%;
-  background: $white;
-  display: block;
-  margin-top: $base-margin*2;
-  text-transform: capitalize;
-  padding: $base-margin*0;
-  overflow: hidden;
-
-  a{
-    font-family: $font-family-sans-serif;
-    font-size: $base-font-size*1.125;
-    color: $charcoal;
-    text-decoration: none;
-    display: block;
-    width: 100%;
-    padding: 18px;
+  @include grid-column(2,0);
+  @include show-for(large);
 
-    span{
-      margin-top: $base-margin*3;
+  &__spacer{
+    @include breakpoint(medium down){
+      display: none;
     }
 
-    &.nav-open ~ .inner-nav{
-      max-height: 200px;
-      visibility: visible;
-      opacity: 1;
-      margin-top: 0;
+    @include large-2;
+    height: 100%;
+    position: absolute;
+    z-index: -1; //to prevent overlap with notifications
 
-      .sub-nav:active,
-      .sub-nav:focus{
-        text-decoration: underline;
-      }
+    &--white{
+      @extend .side-nav__spacer;
+      background-color: $white;
     }
   }
 
-  &.activepage{
-    background: $brand-blue-light;
-
-    a{
-      color: $white;
-      max-height: inherit;
-    }
-
-    span.nav-icon{
-      color: $white;
-    }
-
-    .inner-nav{
-      max-height: 200px;
-      visibility: visible;
-      opacity: 1;
-      margin-top: 0;
-    }
+  &__header{
+    @extend .heading;
+    background: $cerulean;
+  }
 
-    a.sub-nav.activepage{
-      text-decoration: underline;
-    }
+  &__content{
+    padding: $base-padding;
   }
 
-  .inner-nav{
-    li:hover,
-    li:active{
-      text-decoration: underline;
-    }
+  &__list{
+    list-style-type: none;
   }
 
+  &__item{
+    margin-bottom: $base-margin;
+  }
 
-  span{
+  &__link{
     display: block;
-    font-size: $base-font-size*0.75;
+    font-weight: 600;
+    color: $jet;
+    margin-bottom: $base-margin/2;
   }
-}
-
-.inner-nav{
-  visibility: hidden;
-  max-height: 0;
-  -webkit-transition: max-height 0.15s ease-out;
-  -moz-transition: max-height 0.15s ease-out;
-  transition: max-height 0.15s ease-out;
-  margin-left: 74px;
-  margin-top: -$base-margin*3;
-  list-style: none;
 
-  li{
-    color: $white;
+  &__child-list{
+    list-style-type: none;
   }
 
-  a{
-    padding: 0 0 $base-margin*2 0;
-    font-size: $base-font-size*0.875;
+  &__child-item{
+    margin-bottom: $base-margin/2;
   }
-}
-
-a.activepage{
-  background: $brand-blue-light;
-  color: $white;
-}
 
-.sidebar{
-  @extend .white-trans;
-  padding: $base-padding*4;
+  &__child-link{
+    color: $stormcloud;
+    font-size: rem-calc(12);
 
-  p{
-    margin-bottom: $base-margin*2;
-  }
-}
+    &:active,
+    &:hover,
+    &:focus{
+      $anchor-color: $cerulean;
+      color: $anchor-color-hover;
+    }
 
-span.nav-icon{
-  width: 40px;
-  height: 29px;
-  float: left;
-  margin: $base-margin*2;
-  margin-top: $base-margin*4;
-  font-size: $base-font-size*1.5;
-  color: $smoke;
-  text-align: center;
-  @include breakpoint(small only){
-    margin: $base-margin*2 $base-margin $base-margin*2 0;
-    color: $white;
+    &--active-page{
+      font-weight: bold;
+      color: $cerulean;
+    }
   }
 }
-
-span.activepage{
-  color: $white;
-}
-
-.sub-nav{
-  margin-left: -14px;
-}

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

@@ -1,113 +1,110 @@
 /* Styles for Top Bar, Title Bar */
-.topbar-logo{
-  width: 132px;
-  padding: 12px $base-padding*2;
+.logo{
+  width: 131px;
+  padding: $base-padding*.75 0;
 }
 
-.top-bar{
-  margin-bottom: $base-margin*4;
-
-  @include breakpoint(small only){
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-
-  @include breakpoint(medium){
-    display: block;
-  }
-
-  a{
-    text-decoration: none;
-    color: $white;
-    font-weight: 600;
-  }
-
-  .is-drilldown{
-    background: $brand-blue-light;
-  }
-
-  ul{
-    li{
-      &:hover{
-        background: $brand-blue-light;
-      }
-
-      @include breakpoint(small only){
-        background: $brand-blue-light;
-        border-bottom: solid 1px darken($brand-blue-light, 5%);
-      }
-    }
-  }
+.header{
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+}
 
-  .dropdown.menu > li.is-dropdown-submenu-parent > a{
-    //the width of the top-bar dropdown and its children on desktop
-    min-width: 200px;
+.top-bar{
+  @extend .show-for-large;
+  padding: 0 $base-padding;
+  height: $top-bar-height;
+  background: $white;
 
-    &:hover{
-      background: lighten($brand-blue-light, 3%);
-    }
+  &__logo{
+    @extend .logo;
   }
 
   .submenu{
     border: none;
 
     li{
-      background: $brand-blue-light;
-      border-bottom: solid 1px darken($brand-blue-light, 5%);
+      background: $cerulean;
 
       &:nth-child(1){
-        border-top: solid 1px darken($brand-blue-light, 5%);
+        margin-top: -$base-margin/2;
       }
 
       &:hover{
-        background: lighten($brand-blue-light, 3%);
+        background: lighten($cerulean, 5%);
       }
     }
+
+    a{
+      color: $white;
+    }
   }
 }
+.off-canvas-wrapper{
+  /* for some reason foundation sets this to hidden for off-canvas by default,
+  which causes issues with the cart's window.scrollTop in webkit
+  So if something blows up with off-canvas, start by deleting this.  */
+  backface-visibility: visible;
+}
+
+.top-nav-offset{
+  margin-top: $top-bar-height;
+}
 
 .title-bar{
-  @include breakpoint (small only){
-    padding: 0 0.5rem;
-  }
+  height: $top-bar-height;
 
-  @include breakpoint(medium) {
-    display: none;
+  @include breakpoint (medium down){
+    padding: 0 $base-padding;
   }
 
-  .menu-icon{
-    position: relative;
-    cursor: pointer;
-    width: 20px;
-    height: 16px;
-    color: $white;
+  &__logo{
+    @extend .logo;
+    @include horizontal-center;
   }
+}
 
-  .menu-icon{
-    display: inline-block;
-    vertical-align: middle;
-  }
+.menu-icon{
+  @include vertical-center;
+  cursor: pointer;
+  width: 20px;
+  height: 16px;
 
-  .menu-icon::after{
+  &::after{
     position: absolute;
     display: block;
     width: 100%;
-    height: 2px;
-    background: $white;
-    box-shadow: 0 7px 0 $white, 0 14px 0 $white; //This creates the menu icon
-  }
-
-  .menu-icon::after{
+    height: 3px;
+    background: $cerulean;
+    box-shadow: 0 7px 0 $cerulean, 0 14px 0 $cerulean; //This creates the menu icon
     content: '';
     top: 0;
     left: 0;
   }
 }
 
-.sticky{
-  width: 100%;
+.page-header{
+  margin-bottom: $base-margin;
+  overflow: auto;
+  background: $brand-blue-light;
+
+  &__heading{
+    @extend .heading;
+    background: $brand-blue-light;
 
-  &.is-stuck{
-    z-index: 501;
+    &--split{
+      @extend .page-header__heading;
+      @include small-6;
+    }
+  }
+
+  &__sub-text{
+    @extend .heading;
+    @include small-6;
+    background: $brand-blue-light;
+    font-style: italic;
+    font-size: 1.25rem;
+    text-align: right;
   }
 }

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

@@ -1,21 +1,3 @@
-//Quicklink Tabs with Nested Accordions
-.tabs.box-tabs .tab-title > a{
-  background: none;
-  padding: 0;
-}
-
-.tab-title.active .quicklink-box{
-  background: $stone;
-
-  .box-title{
-    color: $jet;
-  }
-
-  i{
-    color: $smoke;
-  }
-}
-
 //Accordion styles for FAQ content
 .faq{
   .accordion .accordion-navigation > a,
@@ -46,4 +28,4 @@
       background: darken($stone, 5%);
     }
   }
-}
+}

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

@@ -0,0 +1,96 @@
+.table{
+  margin-bottom: $base-margin;
+
+  &__row{
+    @include grid-row;
+    overflow: auto;
+    padding: $base-padding/2 0;
+
+    &--striped{
+      @extend .table__row;
+      border-bottom: 2px solid $stone;
+
+      &:first-of-type{
+        border-top: 2px solid $stone;
+      }
+    }
+
+    &--grey-bg{
+      @extend .table__row;
+      background: $stone;
+      padding: 0;
+      margin-top: 3px;
+    }
+  }
+
+  &__bg-spacing{
+    padding-top: $base-padding/2;
+    padding-bottom: $base-padding/2;
+  }
+
+  &__row-nested{
+    @include grid-row-nest;
+    @include clearfix;
+  }
+
+  &__data{
+    display: block;
+
+    &--left{
+      float: left;
+    }
+
+    &--right{
+      float: right;
+    }
+
+    &--hide-large{
+      @include hide-for(large);
+    }
+  }
+
+  &__header{
+    @include show-for(medium);
+
+    &--grey-bg{
+      @extend .table__header;
+      background: $stone;
+    }
+  }
+
+  &__col-title{
+    font-weight: 600;
+    font-size: rem-calc(16);
+    color: $slate;
+  }
+
+  &__col-title--small{
+    font-weight: 600;
+    font-size: 0.875rem;
+  }
+
+  &__col-title-link{
+    padding-left: $base-padding;
+  }
+
+  &__col-color{
+    &--green{
+      background: $brand-green;
+    }
+  }
+
+  &__icon-checkmark{
+    @extend .fa;
+    @extend .fa-check-circle;
+    @extend .green-text;
+  }
+}
+
+.table-with-bg{
+  margin-bottom: $base-margin;
+
+  &__row{
+    @include grid-row;
+    overflow: auto;
+  }
+}