ama_layout 2.9.2 → 3.0.0

data/app/assets/stylesheets/ama_layout/layout/base-styles.scss

@@ -45,7 +45,9 @@ label{
 }
 
 p,
-li{
+li,
+select,
+label{
   font-size: $base-font-size*0.875;
   color: $charcoal;
   font-family: $font-family-sans-serif;
@@ -64,3 +66,7 @@ hr{
 small{
   font-size: 80%;
 }
+
+dl dd{
+  margin-bottom: $base-margin*4;
+}

data/app/assets/stylesheets/ama_layout/layout/helper-classes.scss

@@ -129,6 +129,10 @@
   text-align: right !important;
 }
 
+.relative{
+  position: relative;
+}
+
 /* ==================== 4. Margins ==================== */
 .m1{
   margin: $base-margin*4 !important;
@@ -227,6 +231,10 @@
   border-bottom: 0px !important;
 }
 
+.b0{
+  border: 0;
+}
+
 /* ==================== 6. Background Colours ==================== */
 .whitebg{
   background-color: $white;
@@ -299,12 +307,20 @@
 }
 
 /* ==================== 9. Buttons ==================== */
+.button{
+  text-decoration: none;
+}
+
 .base-button{
-  @extend .radius;
-  @extend .small;
+  border-radius: $global-radius;
+  @extend .button;
   color: $white;
 }
 
+.expand{
+  @extend .expanded;
+}
+
 .emphasized,
 .emphasized:visited{
   @extend .base-button;
@@ -406,7 +422,6 @@ button[disabled],
   font-weight: bold;
   font-size: $base-font-size*0.875;
   color: $charcoal;
-  padding: $base-padding;
 }
 
 .brand-blue-dark-text{

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

@@ -1,10 +1,24 @@
-.asset-link{
-  min-height: 50px;
-  background: $brand-blue-light !important;
-  margin-top: $base-margin*3;
+.accordion-title{
+  font-size: $base-font-size*1.375;
   text-decoration: none;
-  display: block;
 
+  &:hover,
+  &:active,
+  &:visited,
+  &:focus{
+    color: $white;
+  }
+
+  .accordion-icon{
+    width: 16px;
+    height: 16px;
+    display: block;
+    float: right;
+    color: $white;
+  }
+}
+
+.asset-link{
   h3,
   h5{
     color: $white;
@@ -14,11 +28,29 @@
   }
 }
 
-.accordion-icon{
-  width: 16px;
-  height: 16px;
-  display: block;
-  float: right;
-  color: $white;
-  margin-top: $base-margin;
+.accordion.secondary{
+  background: none;
+
+  a{
+    font-size: $base-font-size;
+  }
+
+  .accordion-content a{
+    font-size: $base-font-size*0.875;
+  }
+
+  .accordion-title{
+    background: $white;
+    color: $jet;
+
+    &:hover{
+      background: $stone;
+    }
+  }
+
+  .top-level,
+  .top-level:hover{
+    background: darken($stone, 5%);
+    color: $jet;
+  }
 }

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

@@ -57,19 +57,11 @@
   }
 }
 
-.floating-cart{
-  z-index: 98;
-}
-
 .summary-title{
   background: $brand-green !important;
   min-height: 62px;
 }
 
-.mobile-accordion-navigation{
-  @include accordion-navigation;
-}
-
 .accordion-icon{
   width: 16px;
   height: 16px;
@@ -99,19 +91,7 @@
   }
 }
 
-@media screen and (max-width: 64em){
-  .mobile-accordion{
-    @include accordion-container;
-
-    .mobile-accordion-navigation{
-      @include accordion-navigation;
-    }
-
-    .content{
-      @include accordion-content;
-    }
-  }
-
+@media screen and #{breakpoint(medium down)}{
   span.item-num{
     display: inline-block;
     float: right;

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

@@ -106,7 +106,7 @@ input[type="checkbox"] + label{
 }
 
 input[type="radio"] + label{
-  margin: $base-margin 0;
+  margin-top: -1px;
 
   &:before{
     border-radius: 100%;
@@ -238,7 +238,61 @@ input[type="checkbox"]:checked + label{
   background-position: center center;
 }
 
+/* The vendor prefixed placeholders have to be declared as separate selectors.
+When a browser doesn't understand a selector it invalidates the entire line */
+input::-webkit-input-placeholder{
+  color: darken($smoke, 5%);
+}
+
+input:-moz-placeholder{
+  color: darken($smoke, 5%);
+}
+
+input::-moz-placeholder{
+  color: darken($smoke, 5%);
+}
+
+input[type='text'],
+[type='password'],
+[type='date'],
+[type='datetime'],
+[type='datetime-local'],
+[type='month'],
+[type='week'],
+[type='email'],
+[type='number'],
+[type='search'],
+[type='tel'],
+[type='time'],
+[type='url'],
+[type='color'],
+textarea{
+  font-size: 0.875rem;
+  color: $charcoal;
+}
+
+select.has-placeholder:nth-child(1){
+  color: darken($smoke, 5%);
+}
+
 /* ------------- Error Messaging ------------- */
+select + .error,
+input + span.error,
+input + small.error{
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+}
+
+span.error,
+small.error{
+  display: block;
+  padding: 0.375rem 0.5625rem 0.5625rem;
+  font-size: 0.75rem;
+  background: $brand-red;
+  color: $white;
+  margin-bottom: 1rem;
+}
+
 .error small.error,
 small.error{
   background: $brand-red;

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

@@ -9,3 +9,4 @@
 @import "tab-accordions";
 @import "show-hide-content-box";
 @import "cart";
+@import "reveal-modal";

data/app/assets/stylesheets/ama_layout/layout_components/responsive-table.scss

@@ -19,7 +19,6 @@ table.tablesaw{
 /* Structure */
 
 .tablesaw{
-  border: 1px solid $smoke;
   padding: 0;
 }
 
@@ -29,6 +28,8 @@ table.tablesaw{
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: .5em .7em;
+  font-size: $base-font-size*0.875;
+  color: $slate;
 }
 
 .tablesaw thead tr:first-child th{
@@ -36,19 +37,31 @@ table.tablesaw{
   padding-bottom: .7em;
 }
 
+thead,
+tbody,
+tfoot{
+  border: none;
+}
+
 /* Table rows have a gray bottom stroke by default */
 
 .tablesaw-stack tbody tr{
-  border-bottom: 1px solid $smoke;
+  border-bottom: 2px solid $stone;
 }
 
 .tablesaw-stack td .tablesaw-cell-label,
 .tablesaw-stack th .tablesaw-cell-label{
   display: none;
 }
+
 .tablesaw-stack thead{
-	background: lighten($smoke, 10%);
-	border-bottom: 1px solid $smoke;
+  background: darken($ash, 3%);
+  border-bottom: 2px solid darken($stone, 3%);
+
+  td,
+  th{
+    color: $charcoal;
+  }
 }
 
 /* Mobile first styles: Begin with the stacked presentation at narrow widths */
@@ -73,7 +86,7 @@ table.tablesaw{
   .tablesaw-stack th .tablesaw-cell-label{
     display: block;
     padding: 0 .6em 0 0;
-    width: 30%;
+    width: 45%;
     display: inline-block;
   }
 
@@ -102,24 +115,29 @@ table.tablesaw{
     display: none !important;
   }
 }
+
 @mixin tablesaw-stack-max{
   .tablesaw-stack thead td,
   .tablesaw-stack thead th{
     display: none;
   }
+
   .tablesaw-stack tbody td,
   .tablesaw-stack tbody th{
     clear: left;
     float: left;
     width: 100%;
   }
+
   .tablesaw-cell-label{
     vertical-align: top;
   }
+
   .tablesaw-cell-content{
-    max-width: 67%;
+    max-width: 55%;
     display: inline-block;
   }
+
   .tablesaw-stack td:empty,
   .tablesaw-stack th:empty{
     display: none;
@@ -130,6 +148,7 @@ table.tablesaw{
   .tablesaw-stack tr{
     display: table-row;
   }
+
   /* Show the table header rows */
   .tablesaw-stack td,
   .tablesaw-stack th,
@@ -138,6 +157,7 @@ table.tablesaw{
     display: table-cell;
     margin: 0;
   }
+
   /* Hide the labels in each cell */
   .tablesaw-stack td .tablesaw-cell-label,
   .tablesaw-stack th .tablesaw-cell-label{
@@ -146,19 +166,24 @@ table.tablesaw{
 }
 
 $use-respond-mixins: false !default;
+
 @mixin tablesaw-stack( $breakpoint: 40em ){
+
   @if $use-respond-mixins{
     @include respond-max($breakpoint - .0625){
       @include tablesaw-stack-max;
     }
+
     @include respond-min($breakpoint){
       @include tablesaw-stack-min;
     }
   }
+
   @else{
     @media (max-width: ($breakpoint - .0625)){
       @include tablesaw-stack-max;
     }
+
     @media (min-width: $breakpoint){
       @include tablesaw-stack-min;
     }
@@ -166,11 +191,15 @@ $use-respond-mixins: false !default;
 }
 
 .tablesaw-parent{
-  @include tablesaw-stack( 60em );
-	table tr.even, table tr.alt, table tr:nth-of-type(even){
-		background: darken($ash, 1%);
-	}
-	table{
-		margin-bottom: 0;
-	}
+  @include tablesaw-stack(60em);
+
+  table tr.even,
+  table tr.alt,
+  table tr:nth-of-type(even){
+    background: darken($ash, 1%);
+  }
+
+  table{
+    margin-bottom: 0;
+  }
 }

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

@@ -0,0 +1,11 @@
+.reveal-modal .close-reveal-modal,
+dialog .close-reveal-modal{
+  font-size: 2.5rem;
+  line-height: 1;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.6875rem;
+  color: $slate;
+  font-weight: bold;
+  cursor: pointer;
+}

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

@@ -77,8 +77,8 @@
     li:active{
       text-decoration: underline;
     }
-  } 
-    
+  }
+
 
   span{
     display: block;
@@ -101,7 +101,7 @@
   }
 
   a{
-    padding: $base-margin*0;
+    padding: 0 0 $base-margin*2 0;
     font-size: $base-font-size*0.875;
   }
 }
@@ -129,68 +129,16 @@ span.nav-icon{
   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;
+  }
 }
 
 span.activepage{
   color: $white;
 }
 
-/* Top-Bar Styles */
-.contain-to-grid .top-bar{
-  @extend .row;
-}
-
-.title-area{
-  li.name{
-    img{
-      padding-top: $base-padding*2;
-      height: 35px;
-    }
-  }
-}
-
-.top-bar{
-  a{
-    text-decoration: none;
-  }
-}
-
-.dropdown-open-link{
-  min-width: 201px; //The 1 px accounts for the border on the dropdown
-}
-
-.top-bar-nav.fixed{
-  max-height: 50px;
-}
-
-ul.dropdown:not(.nested){
-  -webkit-box-shadow: 0px 8px -5px -5px rgba(50,50,50,0.5);
-  -moz-box-shadow: 0px 8px -5px -5px rgba(50,50,50,0.5);
-  box-shadow: 0px 8px 20px -5px rgba(50,50,50,0.5);
-  border-left: solid 1px darken($brand-blue-light, 5%);
-  border-right: solid 1px darken($brand-blue-light, 5%);
-  margin-top: -5px;
-}
-
-.dropdown{
-  .nested{
-    margin-top: -1px;
-    border-right: solid 1px darken($brand-blue-light, 5%);
-    border-left: solid 1px darken($brand-blue-light, 5%);
-
-    li{
-      background: lighten($brand-blue-light, 3%);
-    }
-  }
-
-  .title.back{
-    a{
-      font-weight: bold;
-    }
-  }
-}
-
-
 .sub-nav{
   margin-left: -14px;
 }