ama_layout 1.1.13 → 1.1.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b9c545737508074e9dcfac192c57af2bddc9d2d5
-  data.tar.gz: 94f5ca81e3a6546c64365b8554c9eba3c9c559bd
+  metadata.gz: 2925b42ca00e33b2d1dd57fa5f43e893ed3e454a
+  data.tar.gz: 5250d8d141e3d48cced22c62f5e8a9564ecf236f
 SHA512:
-  metadata.gz: 8c0f1f114ee2124fc76e8426087191e3b614d83a654be3f0ef26ea7679db64e117af6d42eb677a858183bdc9fed108766187b40f5fa9f5c27161009714650571
-  data.tar.gz: aa3b3ddb702e9ce87726ef39f2af1517aaee2ced9a22206f3ee150f4f3b8edc1f889a9aade01b1844e09ec573edd301c427f68306558107a6fae33c972b1e727
+  metadata.gz: 2b1219dada1e042fb7e218d2f760cb3d281064d12d75d9e44bb2d366775395341838911e29379b4d1b4a87948865b103b6e9f049b93fc0c6056b6988b2217735
+  data.tar.gz: 24b06ab80daaefc84bbb41b3a4f625d0765427aa2e6572ce642c82ed87eb8e77962a98195bf8d4c8c8869fa265331be234101203b5fe99967e6b2c21cf11c58d

data/app/assets/stylesheets/ama_layout/foundation_and_overrides.scss

@@ -151,10 +151,10 @@ $row-width: rem-calc(1184);
 // d. Media Query Ranges
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-// $small-breakpoint:  em-calc(640);
-// $medium-breakpoint: em-calc(1024);
-// $large-breakpoint:  em-calc(1440);
-// $xlarge-breakpoint: em-calc(1920);
+$small-breakpoint:  em-calc(640);
+$medium-breakpoint: em-calc(1024);
+$large-breakpoint:  em-calc(1440);
+$xlarge-breakpoint: em-calc(1920);
 
 // $small-range:   (0, $small-breakpoint);
 // $medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint);

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

@@ -22,7 +22,13 @@ footer{
 }
 
 /* ============== Base Typography Styles ================ */
-h1, h2, h3, h4, h5, h6, p{
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p{
   font-family: $font-family-sans-serif;
   margin-bottom: 0.2em;
   margin-bottom: 0.2rem; //this is so headers have equal padding on bottom and top
@@ -38,7 +44,8 @@ label{
   color: $charcoal;
 }
 
-p, li{
+p,
+li{
   font-size: $base-font-size*0.875;
   color: $charcoal;
   font-weight: 200;

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

@@ -29,6 +29,17 @@
   padding: $base-padding 0;
 }
 
+.section-title{
+  @extend .page-title;
+  border: 0;
+  padding: $base-padding*2;
+  background-color: $stone;
+
+  h5{
+    color: $slate;
+  }
+}
+
 .page-steps{
   text-align: right;
 }
@@ -273,38 +284,64 @@
   @extend .small;
   color: $white;
 }
-.emphasized, .emphasized:visited{
+
+.emphasized,
+.emphasized:visited{
   @extend .base-button;
   background: $secondary-color;
-  &:hover, &:active, &:focus{
+
+  &:hover,
+  &:active,
+  &:focus{
    background-color: lighten($secondary-color, 10%);
   }
 }
-button.disabled, button[disabled], .button.disabled, .button[disabled]{
+
+button.disabled,
+button[disabled],
+.button.disabled,
+.button[disabled]{
   background-color: lighten($secondary-color, 10%);
   border-color: none;
-  &:hover, &:active, &:focus{
+
+  &:hover,
+  &:active,
+  &:focus{
     background-color: lighten($secondary-color, 10%);
     border-color: none;
   }
 }
+
 .de-emphasized, .de-emphasized:visited{
   @extend .base-button;
   background: $slate;
-  &:hover, &:active, &:focus{
+
+  &:hover,
+  &:active,
+  &:focus{
    background-color: lighten($slate, 10%);
   }
 }
+
 .red-btn{
+  @extend .base-button;
   background: $brand-red;
-  &:hover, &:active, &:focus{
+
+  &:hover,
+  &:active,
+  &:focus{
    background-color: lighten($brand-red, 10%);
   }
 }
-.green-btn, .green-btn:visited{
+
+.green-btn,
+.green-btn:visited{
   @extend .base-button;
   background: $brand-green;
-  &:hover, &:active, &:focus{
+
+  &:hover,
+  &:active,
+  &:focus{
    background-color: lighten($brand-green, 10%);
   }
 }
@@ -312,6 +349,10 @@ button.disabled, button[disabled], .button.disabled, .button[disabled]{
 /* ==================== 10. Typography ==================== */
 .white-text{
   color: $white;
+
+  >a{
+    color: $white;
+  }
 }
 
 .white-micetype{

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

@@ -1,32 +1,82 @@
 //blue boxes
-
-.outer-quicklink-box {
-  width: 49.2%;
+.outer-quicklink-box{
   margin-right: 1.5%;
-  float:left;
+  float: left;
+
   a{
-    text-decoration:none;
+    text-decoration: none;
   }
-}
 
-.quicklink-box{
-  background:$brand-blue-light;
-  min-height:150px;
-  margin-top:$base-margin;
-  padding-top: 1px;
+  &:nth-last-child(1){
+    margin-right: 0;
+  }
 }
 
 .icon-box{
-  width:100px;
-  height:80px;
-  margin:$base-margin*4 auto $base-margin*0 auto;
-  background-repeat:no-repeat;
-  background-position:center center;
+  margin: $base-margin*4 auto 0 auto;
+  background-repeat: no-repeat;
+  background-position: center center;
+  width: auto;
+  text-align: center;
+  color: $white;
+  font-size: $base-font-size*5;
+  line-height: $base-font-size*5;
 }
 
-.box-title {
+.box-title{
   text-align: center;
-  color: white;
+  color: $white;
   width: 90%;
-  margin:$base-margin*2 auto $base-margin*0 auto;
-}
+  margin: $base-margin*2 auto $base-margin*0 auto;
+}
+
+.quicklink-box{
+  background: $brand-blue-light;
+  margin-top: 0;
+  padding-top: 1px;
+  min-height: 161px;
+
+  &:hover{
+    background: lighten($brand-blue-light, 3%);
+  }
+}
+
+.tab-title.active > a{
+  outline: none;
+}
+
+// For the quicklink boxes, get a count of how many boxes there are.
+// For example: for 2 boxes, check if the first box (first-child) is both the first and second-last(nth-last-child(2)).
+.outer-quicklink-box:first-child:nth-last-child(1){
+  width: 23.5%;
+  margin-left: 0;
+  margin-right: 1.5%;
+}
+
+.outer-quicklink-box:first-child:nth-last-child(2),
+.outer-quicklink-box:first-child:nth-last-child(2) ~ div,
+.outer-quicklink-box:first-child:nth-last-child(2) ~ li{
+  width: 49.2%;
+  margin-top: 1.5%;
+}
+
+.outer-quicklink-box:first-child:nth-last-child(3),
+.outer-quicklink-box:first-child:nth-last-child(3) ~ div,
+.outer-quicklink-box:first-child:nth-last-child(3) ~ li{
+  width: 23.5%;
+}
+
+.outer-quicklink-box:first-child:nth-last-child(4),
+.outer-quicklink-box:first-child:nth-last-child(4) ~ div,
+.outer-quicklink-box:first-child:nth-last-child(4) ~ li{
+  width: 23.8%;
+}
+
+.quicklink-single-box{
+  margin-left: 0;
+  margin-top: $base-margin*4;
+
+  .outer-quicklink-box > a{
+    font-size: $base-font-size;
+  }
+}

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

@@ -1,8 +1,9 @@
-.notice_notification {
-  padding: 10px 15px 10px 15px;
+.notice_notification{
+  padding: $base-padding*2 $base-padding*3 $base-padding*2 $base-padding*3;
   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

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

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

@@ -2,29 +2,33 @@
   text-align:center;
   padding: 0;
   width: 32%;
+
   &.columns{
-    padding-left:0;
-    padding-right:0;
+    padding-left: 0;
+    padding-right: 0;
   }
 }
+
 .membership-card-radio-plus-primary{
-  text-align:center;
+  text-align: center;
   padding: 0;
   width: 49%;
+
   &.columns{
-    padding-left:0;
-    padding-right:0;
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 
 /* ------------- Input Styles  ------------- */
 %inputs-thirds{
   max-width: 30%;
-  float:left;
+  float: left;
 }
+
 %inputs-halves{
   max-width: 47.5%;
-  float:left;
+  float: left;
 }
 
 /* ------------- Custom Radio Button + Checkbox Styles  ------------- */
@@ -33,41 +37,52 @@
     padding: $base-padding*2;
     width: 100%;
   }
+
   .box2{
     margin-top: $base-margin*2;
   }
 }
+
 .checkbox-content{
-  display:inline;
+  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"]{
+
+input[type="radio"],
+input[type="checkbox"]:not(.default){
   position: absolute;
   left: -9999px;
   margin: 0;
 }
-input[type="radio"] + label, input[type="checkbox"] + label{
+
+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="checkbox"] + label > span:first-of-type,
 input[type="radio"] + label span{
   display: inline-block;
   width: 30px;
@@ -101,11 +116,13 @@ 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%);
@@ -135,33 +152,42 @@ input[type="checkbox"]:checked + label{
 [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{
+.error small.error,
+small.error{
   background: $brand-red;
 }
-.error label, .error label.error{
+
+.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 {
+#monerisFrameSurround iframe,
+#monerisFrameSurround object,
+#monerisFrameSurround embed {
   width: 100%;
 }
+
 .iframe-error {
   margin-top: -8px !important;
 }

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

@@ -6,3 +6,4 @@
 @import "forms";
 @import "responsive-table";
 @import "accordions";
+@import "tab-accordions";

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

@@ -6,9 +6,11 @@
   background: $white;
   padding: $base-padding*3;
 }
+
 .dashboard-title:first-child{
   @extend .mt0;
 }
+
 .dashboard-nav{
   width: 100%;
   background: $white;
@@ -57,6 +59,7 @@
       opacity: 1;
       margin-top: 0;
     }
+
     a.sub-nav.activepage{
       text-decoration: underline;
     }
@@ -82,6 +85,7 @@
   margin-left: 74px;
   margin-top: -$base-margin*3;
   list-style: none;
+
   li{
     color: $white;
   }
@@ -91,10 +95,12 @@
     font-size: $base-font-size*0.875;
   }
 }
+
 a.activepage{
   background: $brand-blue-light;
   color: $white;
 }
+
 .sidebar{
   @extend .white-trans;
   padding: $base-padding*4;
@@ -111,7 +117,7 @@ span.nav-icon{
   margin: $base-margin*2;
   margin-top: $base-margin*4;
   font-size: $base-font-size*1.5;
-  color: rgb(179, 179, 179);
+  color: $smoke;
   text-align: center;
 }
 

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

@@ -2,13 +2,15 @@
   width: 100%;
   height: 50px;
   background-color: $primary-color;
-  margin-bottom: 30px;
+  margin-bottom: $base-margin*6;
   padding: 0;
+
   a:hover{
     color: $sky;
     cursor: pointer;
   }
+
   img {
-    padding-top:10px;
+    padding-top:$base-padding*2;
   }
 }

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

@@ -0,0 +1,49 @@
+//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,
+  .accordion dd > a{
+    text-decoration: none;
+    background: $white;
+
+    &:active,
+    &:hover,
+    &:focus{
+     background: $stone;
+     outline: none;
+    }
+  }
+
+  .accordion-navigation > a.top-level,
+  dd > a.top-level{
+    background: darken($stone, 5%);
+    border-bottom: 1px solid $stone;
+
+    &:hover{
+      background: lighten($smoke, 4%);
+    }
+
+    &:active,
+    &:focus,
+    &:visited{
+      background: darken($stone, 5%);
+    }
+  }
+}

data/app/assets/stylesheets/ama_layout/media_queries/desktop.scss

@@ -0,0 +1,5 @@
+@media screen and (min-width: $large-breakpoint){
+  *:focus{ //yes, all the elements
+    outline: none;
+  }
+}

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

@@ -1,3 +1,4 @@
+@import "desktop";
 @import "mobile-and-tablet";
 @import "tablet";
 @import "mobile";

data/app/assets/stylesheets/ama_layout/media_queries/mobile-and-tablet.scss

@@ -1,14 +1,16 @@
-@media screen and (max-width: 64em){
+@media screen and (max-width: $large-breakpoint){
   .skip{
     margin-top: $base-margin*4;
   }
+
   .join-radio{
     input[type="radio"] + label{
       width: 100%;
     }
   }
+
   .error-pg-num-border{
-    border-left:0;
-    margin-top:20px;
+    border-left: 0;
+    margin-top: $base-margin*4;
   }
 }

data/app/assets/stylesheets/ama_layout/media_queries/mobile.scss

@@ -1,15 +1,18 @@
 @media screen and (max-width:640px){
   .dashboard-nav{
-    margin-top:0;
+    margin-top: 0;
   }
 }
-@media screen and (max-width:40.063em){
+
+@media screen and (max-width: $medium-breakpoint){
   .site-header{
     margin-bottom: $base-margin*4;
+
     img{
       padding-left: $base-padding*4;
     }
   }
+
   .page-steps h3{
     color: $slate;
     font-style: italic;
@@ -17,6 +20,7 @@
     margin: $base-margin*2 0 0;
     text-align: right;
   }
+
   input[type="text"],
   input[type="password"],
   input[type="date"],
@@ -35,35 +39,56 @@
     margin: 0 0 0.5em 0;
     margin: 0 0 0.5rem 0;
   }
+
   label.inline{
-    margin:0;
+    margin: 0;
   }
+
   .checkbox-label{
     width: 84%;
   }
+
   h4{
     margin-top: $base-margin*6;
   }
-  .membership-card-radio, .membership-card-radio-plus-primary, .membership-card-label{
+
+  .membership-card-radio,
+  .membership-card-radio-plus-primary,
+  .membership-card-label{
     width: 100%;
     margin-left: 0;
     margin-right: 0;
   }
+
   .cart-totals{
-    text-align:left;
+    text-align: left;
   }
+
   footer{
     margin-top: $base-margin*4;
   }
+
   %white-trans{
     background-color: rgba(255,255,255,0.8);
   }
+
   %inputs-thirds{
     max-width: 100%;
     float: none;
     margin: $base-margin*2 0;
   }
-  .credit-card-year {
+
+  .credit-card-year{
     margin-left: 0;
   }
+
+  .outer-quicklink-box:first-child:nth-last-child(4),
+  .outer-quicklink-box:first-child:nth-last-child(4) ~ div,
+  .outer-quicklink-box:first-child:nth-last-child(3),
+  .outer-quicklink-box:first-child:nth-last-child(3) ~ div,
+  .outer-quicklink-box:first-child:nth-last-child(3) ~ li,
+  .outer-quicklink-box:first-child:nth-last-child(1){
+    width: 48.5%;
+    margin-top: 1.5%;
+  }
 }

data/app/assets/stylesheets/ama_layout/media_queries/tablet.scss

@@ -1,11 +1,15 @@
-@media screen and (min-width:40.064em) and (max-width:64em){
+@media screen and (min-width: $medium-breakpoint) and (max-width: $large-breakpoint){
   .main-content-container{
     padding: $base-padding*4 0 0;
   }
+
   .site-header img{
     padding-left: $base-padding*4;
   }
-  .membership-card-radio, .membership-card-radio-plus-primary, .membership-card-label{
+
+  .membership-card-radio,
+  .membership-card-radio-plus-primary,
+  .membership-card-label{
     width: 100%;
     margin-left: 0;
     margin-right: 0;

data/app/helpers/ama_layout_path_helper.rb

@@ -64,6 +64,6 @@ module AmaLayoutPathHelper
   end
 
   def driveredonline_path
-    "#{Rails.configuration.driveredonline_site}/login"
+    Rails.configuration.driveredonline_site
   end
 end

data/lib/ama_layout/navigation.yml

@@ -16,8 +16,11 @@ member:
       - text: "Print/Request New Card"
         link: "<%= Rails.configuration.youraccount_site %>/membership"
   - text: "Driver Education"
-    link: "<%= Rails.configuration.driveredonline_site %>/login"
+    link: "<%= Rails.configuration.driveredonline_site %>"
     icon: "fa-car"
+    sub_nav:
+      - text: "Online New Driver Program"
+        link: "<%= Rails.configuration.driveredonline_site %>/dashboard"
   - text: "Reward Dollars"
     link: "<%= Rails.configuration.youraccount_site %>/reward_dollars"
     icon: "fa-usd"
@@ -43,11 +46,14 @@ non-member:
     icon: "fa-tachometer"
   - text: "Join AMA"
     alt: "Join AMA"
-    link: <%= Rails.configuration.membership_site %>
+    link: "<%= Rails.configuration.membership_site %>"
     icon: "fa-credit-card"
   - text: "Driver Education"
-    link: "<%= Rails.configuration.driveredonline_site %>/login"
+    link: "<%= Rails.configuration.driveredonline_site %>"
     icon: "fa-car"
+    sub_nav:
+      - text: "Online New Driver Program"
+        link: "<%= Rails.configuration.driveredonline_site %>/dashboard"
 member-in-renewal:
   - text: "Account Dashboard"
     alt: "Back to my dashboard"
@@ -57,10 +63,19 @@ member-in-renewal:
     link: "<%= Rails.configuration.youraccount_site %>/renew"
     icon: "fa-credit-card"
   - text: "Driver Education"
-    link: "<%= Rails.configuration.driveredonline_site %>/login"
+    link: "<%= Rails.configuration.driveredonline_site %>"
     icon: "fa-car"
+    sub_nav:
+      - text: "Online New Driver Program"
+        link: "<%= Rails.configuration.driveredonline_site %>/dashboard"
 member-in-renewal-late:
   - text: "Account Dashboard"
     alt: "Back to my dashboard"
     link: "<%= Rails.configuration.youraccount_site %>/dashboard"
-    icon: "fa-tachometer"
+    icon: "fa-tachometer"
+  - text: "Driver Education"
+    link: "<%= Rails.configuration.driveredonline_site %>"
+    icon: "fa-car"
+    sub_nav:
+      - text: "Online New Driver Program"
+        link: "<%= Rails.configuration.driveredonline_site %>/dashboard"

data/lib/ama_layout/version.rb

@@ -1,3 +1,3 @@
 module AmaLayout
-  VERSION = "1.1.13"
+  VERSION = "1.1.14"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ama_layout
 version: !ruby/object:Gem::Version
-  version: 1.1.13
+  version: 1.1.14
 platform: ruby
 authors:
 - Michael van den Beuken
@@ -17,7 +17,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-09-17 00:00:00.000000000 Z
+date: 2015-09-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: foundation-rails
@@ -241,6 +241,8 @@ files:
 - app/assets/stylesheets/ama_layout/layout_components/responsive-table.scss
 - app/assets/stylesheets/ama_layout/layout_components/sidebar.scss
 - app/assets/stylesheets/ama_layout/layout_components/siteheader.scss
+- app/assets/stylesheets/ama_layout/layout_components/tab-accordions.scss
+- app/assets/stylesheets/ama_layout/media_queries/desktop.scss
 - app/assets/stylesheets/ama_layout/media_queries/index.scss
 - app/assets/stylesheets/ama_layout/media_queries/mobile-and-tablet.scss
 - app/assets/stylesheets/ama_layout/media_queries/mobile.scss
@@ -309,7 +311,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.6
+rubygems_version: 2.4.5
 signing_key: 
 specification_version: 4
 summary: ".ama.ab.ca site layouts"