ama_layout 1.1.13

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

@@ -0,0 +1,60 @@
+/* ============== Base Page Layout Styles ================ */
+html, body{
+  height: auto !important;
+}
+
+html{
+  background: image-url('alberta-blur.jpg') no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+body{
+  background: none;
+}
+
+footer{
+  background: image-url('footer-racetrack-big.png') no-repeat center 0;
+  height: 200px;
+  margin-top: $base-margin*12;
+}
+
+/* ============== Base Typography Styles ================ */
+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
+}
+
+h4{
+  margin-top: $base-margin*4;
+  margin-bottom: $base-margin*2;
+}
+
+label{
+  font-family: $font-family-sans-serif;
+  color: $charcoal;
+}
+
+p, li{
+  font-size: $base-font-size*0.875;
+  color: $charcoal;
+  font-weight: 200;
+  font-family: $font-family-sans-serif;
+}
+
+a{
+  text-decoration: underline;
+  color: $secondary-color;
+  font-size: $base-font-size*0.875;
+}
+
+hr{
+  margin: $base-margin 0;
+}
+
+small{
+  font-size: 80%;
+}

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

@@ -0,0 +1,342 @@
+/*
+
+1. Main Layout Elements
+2. Panels
+3. Positioning
+4. Margins
+5. Padding
+6. Background & Text Colours
+7. Lists
+8. Links
+9. Buttons
+10. Typography
+
+*/
+
+/* ==================== 1. Main Layout Elements ==================== */
+.main-wrapper{
+ margin: $base-margin*4 auto;
+}
+
+.page-wrapper{
+  border: $base-border;
+  background-color: $white;
+}
+
+.page-title{
+  background: $ash;
+  border-bottom: $base-border;
+  padding: $base-padding 0;
+}
+
+.page-steps{
+  text-align: right;
+}
+
+.content-block{
+  margin-bottom: $base-margin*4;
+  background: $white;
+  border: $base-border;
+}
+
+.content-block-bottom{
+  margin-top: $base-margin*8;
+}
+
+.image-callout{
+  border: $base-border;
+}
+
+.fullwidth{
+  width: 100% !important;
+}
+
+/* ==================== 2. Panels ==================== */
+.panel-box{
+  padding: $base-padding*4;
+
+  h4, p{
+    color: $white;
+    margin-top: 0;
+  }
+}
+
+.panel-box-confirmation{
+  background: $green;
+}
+
+.panel-box-error{
+  background: $brand-red;
+}
+
+.panel-title{
+  @extend .page-title;
+  border: 0px;
+  padding: $base-padding*2;
+
+  h5{
+    color: $jet;
+    padding-left: $base-padding*2;
+  }
+}
+
+/* ==================== 3. Positioning ==================== */
+.left{
+  float: left !important;
+}
+
+.right{
+  float: right !important;
+}
+
+.center{
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.block{
+  display: block !important;
+}
+
+.inline{
+  display: inline !important;
+}
+
+.inline-block{
+  display: inline-block !important;
+}
+
+.text-left{
+  text-align: left !important;
+}
+
+.text-center{
+  text-align: center !important;
+}
+
+.text-right{
+  text-align: right !important;
+}
+
+/* ==================== 4. Margins ==================== */
+.m1{
+  margin: $base-margin*4 !important;
+}
+
+.mt1{
+  margin-top: $base-margin*4 !important;
+}
+
+.mr1{
+  margin-right: $base-margin*4 !important;
+}
+
+.mb1{
+  margin-bottom: $base-margin*4 !important;
+}
+
+.ml1{
+  margin-left: $base-margin*4 !important;
+}
+
+.m0{
+  margin: 0 !important;
+}
+
+.mt0{
+  margin-top: 0 !important;
+}
+
+.mr0{
+  margin-right: 0px !important;
+}
+
+.mb0{
+  margin-bottom: 0 !important;
+}
+
+.ml0{
+  margin-left: 0px !important;
+}
+
+/* ==================== 5. Padding ==================== */
+.p1{
+  padding: $base-padding*4;
+}
+
+.pt1 {
+  padding-top: $base-margin*4 !important;
+}
+
+.pr1 {
+  padding-right: $base-margin*4 !important;
+}
+
+.pb1 {
+  padding-bottom: $base-margin*4 !important;
+}
+
+.pl1 {
+  padding-left: $base-margin*4 !important;
+}
+
+.p0{
+  padding: 0 !important;
+}
+
+.pt0 {
+  padding-top: 0 !important;
+}
+
+.pr0 {
+  padding-right: 0 !important;
+}
+
+.pb0 {
+  padding-bottom :0 !important;
+}
+
+.pl0 {
+  padding-left: 0 !important;
+}
+
+.bb0{
+  border-bottom: 0px !important;
+}
+
+/* ==================== 6. Background Colours ==================== */
+.whitebg{
+  background-color: $white;
+}
+
+.greybg{
+  background-color: $stone;
+}
+
+.insurance-blue-bg{
+  background-color: $brand-blue-insurance;
+}
+
+.light-blue-bg{
+  background: $brand-blue-light;
+}
+
+.dark-blue-bg{
+  background: $brand-blue-dark;
+}
+
+.rewards-green-bg{
+  background-color: $brand-green;
+}
+
+// On a coloured background, the child links should be white
+.insurance-blue-bg a,
+.light-blue-bg a,
+.rewards-green-bg a,
+.dark-blue-bg a{
+  color: $white;
+}
+
+.white-trans{
+  background-color: $white;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  background-color: rgba(255,255,255,0.6);
+}
+
+/* ==================== 7. Lists ==================== */
+.lined-list{
+  list-style: none;
+  margin: 0;
+
+  li{
+    padding: $base-padding*3 $base-padding*2 $base-padding*2 $base-padding*2;
+    border-bottom: $base-border;
+
+    .table-value{
+      float: right;
+    }
+  }
+}
+
+.no-bullets{
+  list-style-type: none;
+}
+
+/* ==================== 8. Links ==================== */
+.multiline-link{
+  line-height: 1.3rem !important;
+}
+
+/* ==================== 9. Buttons ==================== */
+.base-button{
+  @extend .radius;
+  @extend .small;
+  color: $white;
+}
+.emphasized, .emphasized:visited{
+  @extend .base-button;
+  background: $secondary-color;
+  &:hover, &:active, &:focus{
+   background-color: lighten($secondary-color, 10%);
+  }
+}
+button.disabled, button[disabled], .button.disabled, .button[disabled]{
+  background-color: lighten($secondary-color, 10%);
+  border-color: none;
+  &: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{
+   background-color: lighten($slate, 10%);
+  }
+}
+.red-btn{
+  background: $brand-red;
+  &:hover, &:active, &:focus{
+   background-color: lighten($brand-red, 10%);
+  }
+}
+.green-btn, .green-btn:visited{
+  @extend .base-button;
+  background: $brand-green;
+  &:hover, &:active, &:focus{
+   background-color: lighten($brand-green, 10%);
+  }
+}
+
+/* ==================== 10. Typography ==================== */
+.white-text{
+  color: $white;
+}
+
+.white-micetype{
+  color: $white;
+  font-size: 80%;
+}
+
+.text-shadow{
+  filter: Shadow(Color=#656565, Direction=130, Strength=1);
+  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.strike-through{
+  text-decoration: line-through;
+  color: $black;
+}
+
+.uppercase-title{
+  font-size: $base-font-size*0.875;
+  font-weight: normal;
+  color: $slate;
+  text-transform: uppercase;
+  padding: $base-padding*2 $base-padding*0 $base-padding*2 $base-padding*2;
+}
+
+.uppercase{
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,3 @@
+@import "variables";
+@import "base-styles";
+@import "helper-classes";

data/app/assets/stylesheets/ama_layout/layout/variables.scss

@@ -0,0 +1,32 @@
+/* Colours */
+$brand-red: #da291c;
+$white: #ffffff;
+$green: #3fae60;
+$brand-green: #78be20; //Rewards Green
+$brand-blue-insurance:#00a3e0;
+// Blue tones - ordered from lightest to darkest
+$sky: #e2f4fc;
+$ocean: #8cceec;
+$brand-blue-light: #00539b;
+$brand-blue-dark: #00205b;
+// Grey tones - ordered from lightest to darkest
+$ash: #f7f7f7;
+$stone: #eeeeee;
+$smoke: #cccccc;
+$slate: #838383;
+$charcoal: #656565;
+$jet: #323232;
+$black: #000000;
+// For foundation
+$primary-color: $brand-blue-dark;
+$secondary-color: $brand-blue-light;
+// Fonts
+$font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
+$base-font-size: 1rem;
+// Spacing
+$base-margin: 5px;
+$base-padding: 5px;
+// Borders
+$base-border: 1px solid $smoke;
+//Radius
+$base-radius: 3px;

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

@@ -0,0 +1,24 @@
+.asset-link{
+  min-height: 50px;
+  background: $brand-blue-light !important;
+  margin-top: $base-margin*3;
+  text-decoration: none;
+  display: block;
+
+  h3,
+  h5{
+    color: $white;
+    font-size: $base-font-size*1.4;
+    line-height: 21px;
+    float: left;
+  }
+}
+
+.accordion-icon{
+  width: 16px;
+  height: 16px;
+  display: block;
+  float: right;
+  color: $white;
+  margin-top: $base-margin;
+}