ama_layout 1.1.13

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

@@ -0,0 +1,32 @@
+//blue boxes
+
+.outer-quicklink-box {
+  width: 49.2%;
+  margin-right: 1.5%;
+  float:left;
+  a{
+    text-decoration:none;
+  }
+}
+
+.quicklink-box{
+  background:$brand-blue-light;
+  min-height:150px;
+  margin-top:$base-margin;
+  padding-top: 1px;
+}
+
+.icon-box{
+  width:100px;
+  height:80px;
+  margin:$base-margin*4 auto $base-margin*0 auto;
+  background-repeat:no-repeat;
+  background-position:center center;
+}
+
+.box-title {
+  text-align: center;
+  color: white;
+  width: 90%;
+  margin:$base-margin*2 auto $base-margin*0 auto;
+}

data/app/assets/stylesheets/ama_layout/layout_components/error-messages.scss

@@ -0,0 +1,9 @@
+.notice_notification {
+  padding: 10px 15px 10px 15px;
+  background-color: $brand-blue-insurance;
+  color: $white;
+}
+.error_notification{
+  @extend .notice_notification;
+  background-color: $brand-red;
+}

data/app/assets/stylesheets/ama_layout/layout_components/error-page.scss

@@ -0,0 +1,25 @@
+.error-page-emph{
+  color: $secondary-color;
+}
+
+.error-pg-width {
+  max-width: 650px !important;
+  margin:0 auto !important;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.error-pg-mb{
+  margin: 0 auto 40px auto !important;
+}
+
+.error-pg-num{
+  min-width: 50%;
+  min-height: 80px;
+  padding-top: 10px;
+}
+
+.error-pg-num-border{
+  border-left:1px solid $slate;
+  margin-top:0px;
+}

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

@@ -0,0 +1,189 @@
+.membership-card-radio{
+  text-align:center;
+  padding: 0;
+  width: 32%;
+  &.columns{
+    padding-left:0;
+    padding-right:0;
+  }
+}
+.membership-card-radio-plus-primary{
+  text-align:center;
+  padding: 0;
+  width: 49%;
+  &.columns{
+    padding-left:0;
+    padding-right:0;
+  }
+}
+
+/* ------------- Input Styles  ------------- */
+%inputs-thirds{
+  max-width: 30%;
+  float:left;
+}
+%inputs-halves{
+  max-width: 47.5%;
+  float:left;
+}
+
+/* ------------- Custom Radio Button + Checkbox Styles  ------------- */
+.checkboxes{
+  label{
+    padding: $base-padding*2;
+    width: 100%;
+  }
+  .box2{
+    margin-top: $base-margin*2;
+  }
+}
+.checkbox-content{
+  display:inline;
+  padding-left: $base-padding*8;
+}
+.radio-label{
+  padding: $base-padding*2;
+  width: 100%;
+}
+.radio-options{
+  padding: 0;
+  width: 100%;
+}
+input[type="radio"], input[type="checkbox"]{
+  position: absolute;
+  left: -9999px;
+  margin: 0;
+}
+input[type="radio"] + label, input[type="checkbox"] + label{
+  background: $ash;
+  border: $base-border;
+  margin: 0;
+  &:nth-child(2){
+    margin-top: -1px;
+  }
+  .membership-card-header{
+    border-bottom: $base-border;
+    background: darken($ash, 4%);
+  }
+}
+input[type="radio"] + label > span,
+input[type="checkbox"] + label > span:first-of-type, 
+input[type="radio"] + label span{
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  margin: $base-margin 0 $base-margin*2;
+  vertical-align: top;
+  cursor: pointer;
+  -moz-border-radius: 50%;
+  border-radius:  50%;
+  background-color: $white;
+  border: $base-border;
+}
+
+input[type="checkbox"] + label > span:first-of-type{
+  max-width: 10%;
+  margin: $base-margin $base-margin*2 $base-margin 0;
+}
+
+.checkbox-label{
+  display: inline-block;
+  width: 80%;
+}
+
+input[type="radio"]:checked + label > span,
+input[type="radio"]:checked + label span{
+  background-color: $white;
+  border: 7px solid $secondary-color;
+}
+
+input[type="radio"]:checked + label{
+  background-color: $sky;
+  border: 1px solid $ocean;
+  position: relative;
+  &>hr{
+    border: solid $ocean;
+    border-width: 1px 0 0;
+    height: 0;
+  }
+  .membership-card-header{
+    border-bottom: 1px solid $ocean;
+    background: darken($sky, 4%);
+  }
+}
+
+input[type="checkbox"]:checked + label{
+  position: relative;
+}
+
+[type="checkbox"]:checked + label:before{
+  content: '✔';
+  background-color: $secondary-color;
+  color: $white;
+  position: absolute;
+  width: 30px;
+  max-width: 10%;
+  height: 30px;
+  top: 15px;
+  padding-left: 6px;
+  font-size: $base-font-size*1.3;
+  -moz-border-radius: 50%;
+  border-radius:  50%;
+  margin: 0 $base-margin*2 $base-margin 0;
+}
+
+[type="checkbox"]:checked + label:after{
+  margin-left: $base-margin*6;
+}
+.month, .year{
+  @extend %inputs-thirds;
+}
+.day{
+  @extend %inputs-thirds;
+  margin: 0 5%;
+}
+
+/* ------------- Error Messaging ------------- */
+.error small.error, small.error{
+  background: $brand-red;
+}
+.error label, .error label.error{
+  color: $brand-red;
+}
+
+.error-message{
+  background: $brand-red;
+}
+.join-birthdate small.error{
+  margin-top: $base-margin*8;
+}
+
+/* ------------- Moneris ------------- */
+#monerisFrameSurround iframe, #monerisFrameSurround object, #monerisFrameSurround embed {
+  width: 100%;
+}
+.iframe-error {
+  margin-top: -8px !important;
+}
+
+form.moneris {
+  display: none;
+}
+
+/* ------------- For All IE ------------- */
+input[type="text"]:-ms-input-placeholder,
+input[type="password"]:-ms-input-placeholder,
+input[type="date"]:-ms-input-placeholder,
+input[type="datetime"]:-ms-input-placeholder,
+input[type="datetime-local"]:-ms-input-placeholder,
+input[type="month"]:-ms-input-placeholder,
+input[type="week"]:-ms-input-placeholder,
+input[type="email"]:-ms-input-placeholder,
+input[type="number"]:-ms-input-placeholder,
+input[type="search"]:-ms-input-placeholder,
+input[type="tel"]:-ms-input-placeholder,
+input[type="time"]:-ms-input-placeholder,
+input[type="url"]:-ms-input-placeholder,
+textarea{
+  color: darken($stone, 10%);
+}

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

@@ -0,0 +1,8 @@
+@import "error-page.scss";
+@import "blue-boxes.scss";
+@import "error-messages";
+@import "sidebar";
+@import "siteheader";
+@import "forms";
+@import "responsive-table";
+@import "accordions";

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

@@ -0,0 +1,175 @@
+/*! Tablesaw - v1.0.4 - 2015-02-19
+* https://github.com/filamentgroup/tablesaw
+* Copyright (c) 2015 Filament Group; Licensed MIT */
+/*! Tablesaw - v1.0.4 - 2015-02-19
+* https://github.com/filamentgroup/tablesaw
+* Copyright (c) 2015 Filament Group; Licensed MIT */
+
+table.tablesaw{
+  empty-cells: show;
+  max-width: 100%;
+  width: 100%;
+}
+
+.tablesaw{
+  border-collapse: collapse;
+  width: 100%;
+}
+
+/* Structure */
+
+.tablesaw{
+  border: 1px solid $smoke;
+  padding: 0;
+}
+
+.tablesaw th,
+.tablesaw td{
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: .5em .7em;
+}
+
+.tablesaw thead tr:first-child th{
+  padding-top: .9em;
+  padding-bottom: .7em;
+}
+
+/* Table rows have a gray bottom stroke by default */
+
+.tablesaw-stack tbody tr{
+  border-bottom: 1px solid $smoke;
+}
+
+.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;
+}
+
+/* Mobile first styles: Begin with the stacked presentation at narrow widths */
+
+@media only all{
+  /* Show the table cells as a block level element */
+
+  .tablesaw-stack td,
+  .tablesaw-stack th{
+    text-align: left;
+    display: block;
+  }
+
+  .tablesaw-stack tr{
+    clear: both;
+    display: table-row;
+  }
+
+  /* Make the label elements a percentage width */
+
+  .tablesaw-stack td .tablesaw-cell-label,
+  .tablesaw-stack th .tablesaw-cell-label{
+    display: block;
+    padding: 0 .6em 0 0;
+    width: 30%;
+    display: inline-block;
+  }
+
+  /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
+
+  .tablesaw-stack th .tablesaw-cell-label-top,
+  .tablesaw-stack td .tablesaw-cell-label-top{
+    display: block;
+    padding: .4em 0;
+    margin: .4em 0;
+  }
+
+  .tablesaw-cell-label{
+    display: block;
+  }
+
+  /* Avoid double strokes when stacked */
+
+  .tablesaw-stack tbody th.group{
+    margin-top: -1px;
+  }
+
+  /* Avoid double strokes when stacked */
+
+  .tablesaw-stack th.group b.tablesaw-cell-label{
+    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%;
+    display: inline-block;
+  }
+  .tablesaw-stack td:empty,
+  .tablesaw-stack th:empty{
+    display: none;
+  }
+}
+
+@mixin tablesaw-stack-min{
+  .tablesaw-stack tr{
+    display: table-row;
+  }
+  /* Show the table header rows */
+  .tablesaw-stack td,
+  .tablesaw-stack th,
+  .tablesaw-stack thead td,
+  .tablesaw-stack thead th{
+    display: table-cell;
+    margin: 0;
+  }
+  /* Hide the labels in each cell */
+  .tablesaw-stack td .tablesaw-cell-label,
+  .tablesaw-stack th .tablesaw-cell-label{
+    display: none !important;
+  }
+}
+
+$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;
+    }
+  }
+}
+.tablesaw-parent{
+  @include tablesaw-stack( 50em );
+	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/sidebar.scss

@@ -0,0 +1,170 @@
+.dashboard-title{
+  font-size: $base-font-size*0.875;
+  font-weight: normal;
+  color: $charcoal;
+  text-transform: uppercase;
+  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;
+
+    &:hover,
+    &:active{
+     color: $white;
+    }
+
+    span{
+      margin-top: $base-margin*3;
+    }
+  }
+
+  &:hover,
+  &:active,
+  &.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;
+    }
+    a.sub-nav.activepage{
+      text-decoration: underline;
+    }
+  }
+
+  .inner-nav li:hover,
+  .inner-nav li:active{
+    text-decoration: underline;
+  }
+
+  span{
+    display: block;
+    font-size: $base-font-size*0.75;
+  }
+}
+
+.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;
+  }
+
+  a{
+    padding: $base-margin*0;
+    font-size: $base-font-size*0.875;
+  }
+}
+a.activepage{
+  background: $brand-blue-light;
+  color: $white;
+}
+.sidebar{
+  @extend .white-trans;
+  padding: $base-padding*4;
+
+  p{
+    margin-bottom: $base-margin*2;
+  }
+}
+
+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: rgb(179, 179, 179);
+  text-align: center;
+}
+
+span.activepage{
+  color: $white;
+}
+
+/* Top-Bar Styles */
+.contain-to-grid .top-bar{
+  @extend .row;
+}
+
+.title-area li.name img{
+  padding-top: $base-padding*2;
+}
+
+.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;
+}