ama_layout 3.2.2 → 4.0.0

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

@@ -4,6 +4,10 @@
 }
 
 .summary-cart{
+  list-style-type: none;
+  margin-bottom: 0;
+  position: relative;
+
   ::-webkit-scrollbar{
     -webkit-appearance: none;
     width: 7px;
@@ -15,65 +19,115 @@
     -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
   }
 
-  .summary-cart-body{
-    background-color: $stone;
-    padding: $base-padding*2;
-    font-size: $base-font-size*0.875;
-    color: $charcoal;
+  &__container{
+    float: right;
+  }
+
+  &__title{
+    float: left;
+    color: $white;
+  }
+
+  &__accordion-toggle-icon{
+    @include hide-for(large);
+    width: 16px;
+    height: 16px;
+    float: right;
+    color: $white;
+    margin-top: $base-margin*0.6;
+  }
+
+  &__item-count{
+    @include hide-for(large);
+    float: right;
+    width: 30px;
+    height: 30px;
+    border-radius: 60px;
+    text-align: center;
+    line-height: 30px;
+    color: $white;
+    font-weight: bold;
+    margin-right: $base-margin;
+    background: lighten($brand-green, 5%);
+  }
+
+  &__content{
+    background: $white;
+    padding: $base-padding;
+    @include clearfix;
+  }
+
+  &__list{
+    margin-left: 0;
+    overflow-y: scroll;
+    max-height: auto;
+    list-style: none;
+    margin: 0;
+    list-style-type: none;
+    overflow-y: scroll;
+
+    @include breakpoint(small){
+      max-height: 150px;
+    }
+
+    @include breakpoint(large){
+      max-height: 320px;
+    }
+  }
+
+  &__list-item{
+    padding: $base-padding;
+
+    &:not(:nth-child(1)){
+      border-top: 1px solid $smoke;
+    }
+  }
+
+  &__submit{
+    list-style-type: none;
+    margin-left: 0;
+  }
 
-    ul{
-      list-style: none;
-      margin: 0;
+  &__remove{
+    float: right;
 
-      li{
-        padding: 8px;
-      }
+    .fa-times-circle-o{
+      font-size: $base-font-size*2;
+    }
+  }
 
-      li:not(:nth-child(1)){
-        border-top: 1px solid $smoke;
-      }
+  &__remove-link{
+    color: $slate;
+    text-decoration: none;
 
-      .summary-flash-notice{
-        color: $white;
-        background: $brand-blue-insurance;
+    &:hover,
+    &:focus{
+      color: $charcoal;
+    }
+  }
 
-        p,
-        a,
-        a:hover,
-        a:focus{
-          color: $white;
-        }
+  .summary-flash-notice{
+    color: $white;
+    background: $brand-blue-insurance;
 
-        &:not(:nth-child(1)){
-          border-top: none;
-        }
-      }
+    p,
+    a,
+    a:hover,
+    a:focus{
+      color: $white;
     }
 
-    .items{
-      overflow-y: scroll;
-      max-height: auto;
+    &:not(:nth-child(1)){
+      border-top: none;
     }
   }
 }
 
 .summary-title{
   background: $brand-green !important;
-  min-height: 62px;
-}
-
-.accordion-icon{
-  width: 16px;
-  height: 16px;
-  display: block;
-  float: right;
-  color: $white;
-  margin-top: $base-margin;
 }
 
-
 .delete-icon{ //same one used in the cart and on info charts it lives outside of cart so it can be used other places
-  margin-top: $base-margin;
   float: right;
 
   .fa-times-circle-o{
@@ -92,7 +146,7 @@
 }
 
 @media screen and #{breakpoint(medium down)}{
-  span.item-num{
+  .item-num{
     display: inline-block;
     float: right;
     width: 30px;
@@ -111,5 +165,6 @@
     position: fixed;
     bottom: 0;
     left: 0;
+    z-index: 1;
   }
 }

data/app/assets/stylesheets/ama_layout/layout_components/comparison-radios.scss

@@ -0,0 +1,113 @@
+.comparison-radios{
+  &__wrapper{
+    @include grid-row-nest;
+    @include clearfix;
+    margin-bottom: $base-margin;
+  }
+
+  &__radio-half{
+    @include medium-6;
+  }
+
+  &__radio-third{
+    @include medium-4;
+
+    &:nth-of-type(1),
+    &:nth-of-type(3){
+      .comparison-radios__ribbon{ //only display the ribbon for the middle radio
+        display: none;
+      }
+    }
+  }
+
+  &--vertical{
+    text-align: center;
+  }
+
+  &__radio-btn--centered{
+    padding: 0 0 21px 0;
+
+    &:before{
+      top: 100%;
+      margin-top: -35px;
+      left: 50%;
+      margin-left: -12px;
+    }
+
+    &:after{
+      top: 100%;
+      margin-top: -27px;
+      left: 50%;
+      margin-left: -4px;
+    }
+  }
+
+  &__title{
+    font-size: $base-font-size*1.45;
+    padding: 7px;
+    font-weight: 700;
+
+    &--blue-bg{
+      @extend .comparison-radios__title;
+      background: $brand-blue-light;
+      color: $white;
+      margin-bottom: $base-margin;
+    }
+  }
+
+  &__panel{
+    background-color: $ash;
+    border-top: 2px solid $stone;
+    border-bottom: 2px solid $stone;
+    padding: $base-padding;
+    margin-bottom: $base-margin;
+  }
+
+  &__highlight{
+    font-weight: 700;
+    line-height: 1.5rem;
+
+    &--large{
+      @extend .comparison-radios__highlight;
+      font-size: 2rem;
+    }
+
+    &--medium{
+      @extend .comparison-radios__highlight;
+      font-size: 1.25rem;
+    }
+
+    &--blue{
+      @extend .comparison-radios__highlight;
+      color: $brand-blue-light;
+    }
+  }
+
+  &__image{
+    height: 125px;
+    margin-bottom: $base-margin;
+  }
+
+  &__list{
+    list-style-type: none;
+  }
+
+  &__list-item{
+    padding-bottom: $base-padding;
+  }
+
+  &__ribbon{
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+input[type="radio"]:checked{
+  &~label{
+    .comparison-radios__panel{
+      border-top: 2px solid darken($sky, 10%);
+      border-bottom: 2px solid darken($sky, 10%);
+    }
+  }
+}

data/app/assets/stylesheets/ama_layout/layout_components/content-toggle.scss

@@ -0,0 +1,15 @@
+.content-toggle{
+  &__bg{
+    background-color: $stone;
+    padding: $base-padding;
+    margin-bottom: $base-margin;
+  }
+
+  &__close{
+    @extend .fa;
+    @extend .fa-close;
+    color: $charcoal;
+    cursor: pointer;
+    float: right;
+  }
+}

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

@@ -5,8 +5,8 @@
 .error-pg-width{
   max-width: 650px !important;
   margin: 0 auto !important;
-  padding-left: $base-padding*2;
-  padding-right: $base-padding*2;
+  padding-left: $base-padding/2;
+  padding-right: $base-padding/2;
 }
 
 .error-pg-mb{
@@ -16,7 +16,7 @@
 .error-pg-num{
   min-width: 50%;
   min-height: 80px;
-  padding-top: $base-padding*2;
+  padding-top: $base-padding/2;
 }
 
 .error-pg-num-border{

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

@@ -0,0 +1,65 @@
+// Sticky footer setup
+$footer-push-small: 594px;
+$footer-push-medium: 419px;
+$footer-push-large: 321px;
+
+.off-canvas-wrapper{
+  min-height: 100%;
+  @include breakpoint(small only){
+    margin-bottom: -$footer-push-small;
+  }
+  @include breakpoint(medium only){
+    margin-bottom: -$footer-push-medium;
+  }
+  @include breakpoint(large up){
+    margin-bottom: -$footer-push-large;
+  }
+
+  &:after{
+    content: "";
+    display: block;
+    @include breakpoint(small only){
+      height: $footer-push-small;
+    }
+    @include breakpoint(medium only){
+      height: $footer-push-medium;
+    }
+    @include breakpoint(large up){
+      height: $footer-push-large;
+    }
+  }
+}
+
+// Footer styles
+.page-footer{
+  background: $brand-blue-light;
+
+  &__container{
+    @include grid-row;
+    max-width: 1180px;
+    padding-top: $base-padding*3;
+  }
+
+  &__col{
+    @include medium-6;
+    @include large-3;
+  }
+
+  &__col-header{
+    color: $white;
+    font-weight: 700;
+  }
+
+  &__list{
+    list-style-type: none;
+  }
+
+  &__link{
+    color: $white;
+  }
+}
+
+.racetrack{
+  background: $brand-blue-light image-url('footer-racetrack-big.png') no-repeat center $base-padding*3;
+  height: 160px;
+}

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

@@ -33,12 +33,9 @@
 
 /* ------------- Custom Radio Button + Checkbox Styles  ------------- */
 .checkboxes{
-  label{
-    width: 100%;
-  }
 
   .box2{
-    margin-top: $base-margin*2;
+    margin-top: $base-margin/2;
   }
 }
 
@@ -48,7 +45,7 @@
 }
 
 .radio-label{
-  padding: $base-padding*2;
+  padding: $base-padding/2;
   width: 100%;
 }
 
@@ -57,11 +54,16 @@
   width: 100%;
 }
 
+input[type="radio"] + label{
+  hr{
+    margin: 0;
+  }
+}
+
 input[type="radio"],
 input[type="checkbox"]:not(.default){
   position: absolute;
   left: -9999px;
-  margin: 0;
 }
 
 input[type="radio"] + label,
@@ -72,7 +74,7 @@ input[type="checkbox"] + label{
   width: 100%;
   position: relative;
   cursor: pointer;
-  padding: 0 $base-padding*2 0 $base-padding*2;
+  padding: 0 $base-padding/2 0 $base-padding/2;
 
   &:before{
     content: ' ';
@@ -87,10 +89,6 @@ input[type="checkbox"] + label{
     border: $base-border;
   }
 
-  &:nth-child(2){
-    margin-top: -1px;
-  }
-
   .membership-card-header{
     border-bottom: $base-border;
     background: darken($ash, 4%);
@@ -106,8 +104,6 @@ input[type="checkbox"] + label{
 }
 
 input[type="radio"] + label{
-  margin-top: -1px;
-
   &:before{
     border-radius: 100%;
   }
@@ -119,8 +115,9 @@ input[type="radio"] + label{
 }
 
 input[type="radio"]:checked + label{
+  color: $stormcloud;
   background-color: $sky;
-  border: 1px solid $ocean;
+  border: 2px solid darken($sky, 10%);
 
   &:before{
     content: '';
@@ -144,13 +141,13 @@ input[type="radio"]:checked + label{
   }
 
   &>hr{
-    border: solid $ocean;
-    border-width: 1px 0 0;
+    border: solid darken($sky, 10%);
+    border-width: 2px 0 0;
     height: 0;
   }
 
   .membership-card-header{
-    border-bottom: 1px solid $ocean;
+    border-bottom: 2px solid darken($sky, 10%);
     background: darken($sky, 4%);
   }
 }
@@ -182,6 +179,10 @@ input[type="checkbox"]:checked + label{
   }
 }
 
+input[type="checkbox"]{
+  visibility: hidden;
+}
+
 @keyframes checkbox{
   0%{
    height: 0;
@@ -218,6 +219,12 @@ input[type="checkbox"]:checked + label{
   float: right;
 }
 
+.datetime{
+  &.month, &.day, &.year{
+    margin-bottom: $base-margin;
+  }
+}
+
 /*-------------- Credit Card images ---------- */
 .cc-type{
   width: 38px;
@@ -266,9 +273,9 @@ input[type='text'],
 [type='time'],
 [type='url'],
 [type='color'],
-textarea{
-  font-size: 0.875rem;
-  color: $charcoal;
+textarea,
+select{
+  margin-bottom: 0;
 }
 
 select.has-placeholder:nth-child(1){
@@ -276,30 +283,31 @@ select.has-placeholder:nth-child(1){
 }
 
 select:focus{
-  border: 1px solid #8a8a8a;
+  border: 2px solid $ocean;
   background-color: $white;
   outline: none;
-  box-shadow: 0 0 5px #cacaca;
+  box-shadow: 0;
   transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 }
 
 
 /* ------------- Error Messaging ------------- */
-select + .error,
-input + span.error,
-input + small.error{
-  margin-top: -1rem;
-  margin-bottom: 1rem;
-}
-
-span.error,
 small.error{
   display: block;
+  clear: both;
   padding: 0.375rem 0.5625rem 0.5625rem;
-  font-size: 0.75rem;
+  font-size: $base-font-size;
   background: $brand-red;
   color: $white;
-  margin-bottom: 1rem;
+}
+
+.error__page-error{
+  @extend small.error;
+  margin-bottom: $base-margin;
+}
+
+.error__input-error{
+  @extend .error;
 }
 
 .error small.error,
@@ -316,15 +324,11 @@ small.error{
   background: $brand-red;
 }
 
-.join-birthdate small.error{
-  margin-top: $base-margin*8;
-}
-
 .email_hint{
   color: $brand-red;
   display: none;
   font-size: 0.875em;
-  margin: -$base-padding*2 0 $base-padding*2;
+  margin: 0 0 $base-padding/2;
 }
 
 .email_domain{
@@ -336,15 +340,15 @@ small.error{
 /* ------------- Moneris ------------- */
 #monerisFrameSurround iframe,
 #monerisFrameSurround object,
-#monerisFrameSurround embed {
+#monerisFrameSurround embed{
   width: 100%;
 }
 
-.iframe-error {
-  margin-top: -8px !important;
+.iframe-error{
+  margin-top: -6px !important;
 }
 
-form.moneris {
+form.moneris{
   display: none;
 }
 
@@ -361,7 +365,101 @@ 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{
+input[type="url"]:-ms-input-placeholder{
   color: darken($stone, 10%);
 }
+
+.form-container{
+  @include grid-row-nest;
+  @include large-9;
+  @include grid-column-end;
+  overflow: auto;
+  max-width: 1080px;
+  display: block;
+}
+
+.button__row{
+  @include grid-row;
+  @include clearfix;
+  clear: both;
+
+  &--nested{
+    @include grid-row-nest;
+    overflow: auto;
+    clear: both;
+  }
+}
+
+.form-horizontal{
+  &__row{
+    @include grid-row-nest;
+    @include clearfix;
+    margin-bottom: $base-margin;
+  }
+
+  &__label-wrapper{
+    @include large-4;
+  }
+
+  &__input-wrapper{
+    @include large-8;
+
+    &--offset{
+      @extend .form-horizontal__input-wrapper;
+      @include large-offset-4;
+    }
+
+    &--small{
+      @include large-2;
+    }
+
+    &--half-width{
+      @include large-4;
+      @include breakpoint(medium down){
+        margin-bottom: $base-margin;
+      }
+    }
+  }
+
+  &__error-wrapper{
+    @include large-8;
+    @extend .error;
+  }
+
+  &__input-hint{
+    @include large-6;
+    @extend .hint;
+
+    &--white{
+      @extend .form-horizontal__input-hint;
+      color: $white;
+    }
+  }
+
+  &__radio-wrapper{
+    @include large-8;
+    margin-bottom: $base-margin;
+
+    &--full{
+      margin-bottom: $base-margin;
+    }
+  }
+
+  &__select{
+    @include large-8;
+  }
+
+  &__toggle{
+    @include large-12;
+  }
+
+  &__notification{
+    @include large-8;
+  }
+
+  &__submit{
+    &--right{
+      @include large-4;
+    }
+  }
+}