ama_layout 4.10.1 → 5.0.0

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

@@ -1,23 +0,0 @@
-@media print{
-  .side-nav,
-  .page-footer,
-  .top-bar-right,
-  .breadcrumbs,
-  .table__header--grey-bg{
-    display: none;
-  }
-
-  .main-container{
-    float: left !important;
-    width: 100%;
-  }
-
-  // overrides equalizer, which causes weirdness with print
-  .large-8.columns.table__bg-spacing{
-    height: auto !important;
-  }
-
-  .header{
-    position: relative;
-  }
-}

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

@@ -1,57 +0,0 @@
-/* Colours */
-$brand-red: #da291c;
-$sangria: #780000;
-$white: #ffffff;
-$green: #3fae60;
-$brand-green: #78be20; //Rewards Green
-$brand-blue-insurance:#00a3e0;
-$orange: #e7992b;
-$canary: #FFC345;
-// Blue tones - ordered from lightest to darkest
-$sky: #e2f4fc;
-$dark-sky: #b4e2f7;
-$ocean: #8cceec;
-$cerulean: #2577be;
-$brand-blue-light: #00539b;
-$brand-blue-dark: #00205b;
-// Grey tones - ordered from lightest to darkest
-$ash: #f7f7f7;
-$stone: #eeeeee;
-$smoke: #cccccc;
-$stormcloud: #959595;
-$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;
-$font-family-headings: "Open Sans Semi-Bold", Helvetica, Arial, sans-serif;
-$base-font-size: 1rem;
-$small-font-size: $base-font-size*0.75;
-$medium-font-size: $base-font-size*1.3;
-$large-font-size: $base-font-size*1.85;
-$x-large-font-size: $base-font-size*3;
-// Spacing
-$base-margin: 1rem;
-$base-padding: 1rem;
-
-// Borders
-$base-border: 2px solid $stone;
-//Radius
-$base-radius: 3px;
-//Top-Bar
-$top-bar-height: 53px;
-
-%clearfix {
-  *zoom: 1;
-  &:before, &:after {
-    content: " ";
-    display: table;
-  }
-  &:after {
-    clear: both;
-  }
-}

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

@@ -1,186 +0,0 @@
-.accordion-title{
-  @extend .heading;
-  text-decoration: none;
-
-  &:hover,
-  &:active,
-  &:visited,
-  &:focus{
-    color: $white;
-  }
-
-  .accordion-icon{
-    width: 16px;
-    height: 16px;
-    display: block;
-    float: right;
-    color: $white;
-  }
-}
-
-.accordion-secondary{
-  &--header{
-    font-size: $base-font-size;
-  }
-
-  &--heading{
-
-  }
-}
-.accordion.secondary{
-  background: none;
-
-  a{
-    font-size: $global-font-size;
-  }
-
-  .accordion-content a{
-    font-size: $global-font-size;
-  }
-
-  .accordion-title{
-    background: $white;
-    color: $slate;
-
-    &:hover{
-      background: $stone;
-    }
-  }
-
-  .top-level,
-  .top-level:hover{
-    background: darken($stone, 5%);
-    color: $slate;
-  }
-}
-
-.accordion{
-  &__header{
-    background: $brand-blue-light;
-    overflow: auto;
-    display: block;
-  }
-
-  &__heading{
-    @extend .heading;
-    @include small-10;
-  }
-
-  &__toggle{
-    @include small-2;
-    @extend .fa;
-    @extend .fa-arrows-v;
-    text-align: right;
-    color: $white;
-    padding-top: $base-padding*1.25;
-  }
-}
-
-.accordion-multi-state{
-  @extend .accordion;
-  margin-bottom: $base-margin;
-  background: transparent;
-  -ms-overflow-style: none;
-
-  .accordion-item{ //this is a foundation class needed for accordions to work. We only want to modify the margin for multi-state which is why it is nested.
-    margin-bottom: $base-margin;
-  }
-
-  &__header{
-    @extend .accordion__header;
-    background: transparent;
-    position: relative;
-  }
-
-  &__heading-bg{
-    @include small-10;
-    color: $white;
-    padding: 0.63rem $base-padding;
-    width: calc(100% - 20px);
-
-    &--active{
-      @extend .accordion-multi-state__heading-bg;
-      background: $brand-blue-light;
-    }
-
-    &--inactive{
-      @extend .accordion-multi-state__heading-bg;
-      background: $stone;
-
-      .accordion-multi-state__heading{
-        color: $slate;
-      }
-    }
-
-    &--complete{
-      @extend .accordion-multi-state__heading-bg;
-      background: $brand-green;
-    }
-
-    &--error{
-      @extend .accordion-multi-state__heading-bg;
-      background: $brand-red;
-    }
-  }
-
-  &__heading{
-    color: $white;
-    margin-left: $base-margin*0.75;
-    font-size: $base-font-size;
-    padding: 0;
-  }
-
-  &__icon{
-    @extend .fa;
-    width: 39px;
-    height: 39px;
-    border: 2px solid $brand-blue-light;
-    display: inline-block;
-    border-radius: 100%;
-    position: absolute;
-    background: white;
-    @include vertical-center;
-
-    &::before{
-      @include vertical-center;
-      width: 100%;
-      text-align: center;
-      font-size: 22px;
-    }
-
-    &--active{
-      @extend .accordion-multi-state__icon;
-      @extend .fa-check;
-      color: $stone;
-    }
-
-    &--inactive{
-      @extend .accordion-multi-state__icon;
-      border: 2px solid $stone;
-    }
-
-    &--complete{
-      @extend .accordion-multi-state__icon;
-      @extend .fa-check;
-      border: 2px solid $brand-green;
-      background: $white;
-      color: $brand-green;
-    }
-
-    &--error{
-      @extend .accordion-multi-state__icon;
-      @extend .fa-close;
-      border: 2px solid $brand-red;
-      background: $white;
-      color: $brand-red;
-    }
-  }
-}
-
-// Foundation sets a border-radius by default,
-// and there doesn't seem to be an override in the settings file
-.accordion-item:first-child > :first-child,
-.accordion-item:first-child > :last-child,
-:last-child:not(.is-active) > .accordion-title{
-  border-radius: 0;
-}

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

@@ -1,85 +0,0 @@
-.banner{
-  position: relative; /* This is needed for the positioning of the close icon on the blue banners*/
-  margin-bottom: $base-margin;
-
-  &>:last-child{
-    margin-bottom: 0;
-  }
-
-  &--blue{
-    @extend .banner;
-    background: $brand-blue-insurance;
-    padding: $base-padding;
-  }
-
-  &--red{
-    @extend .banner;
-    background: $brand-red;
-    padding: $base-padding;
-  }
-
-  &--brand-blue-light{
-    @extend .banner;
-    background: $brand-blue-light;
-    padding: $base-padding;
-  }
-
-  &__title,
-  &__text{
-    color: $white;
-  }
-
-  &__container{
-    @include grid-row;
-    @include clearfix;
-  }
-
-  &__image-container{
-    @include large-2;
-    @include small-12;
-  }
-
-  &__image{
-    display: block;
-    margin: 0 auto;
-  }
-
-  &__content-container{
-    @include large-10;
-    @include small-12;
-  }
-
-  &__content{
-    position: relative;
-
-    &--vertical-center{
-     @include breakpoint(large){
-       @include vertical-center;
-    }
-   }
-  }
-
-  &__link{
-    @extend .link--white;
-  }
-
-  &__close{
-    @extend .fa;
-    @extend .fa-times-circle;
-    position: absolute;
-    top: 15px;
-    right: 15px;
-
-    &--white{
-      @extend .banner__close;
-      color: $white;
-    }
-  }
-
-  &--pushed-fixed{
-    left: 300px;
-    width: calc(100% - 300px);
-    position: fixed;
-    z-index: 1;
-  }
-}

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

@@ -1,10 +0,0 @@
-.breadcrumbs{
-  @include large-12;
-
-  &__link{
-    &--disabled{
-      @extend .disabled;
-      pointer-events: none;
-    }
-  }
-}

data/app/assets/stylesheets/ama_layout/layout_components/buttons/button-grouping.scss

@@ -1,116 +0,0 @@
-/* button-group is a foundation element, so to avoid style conflicts ours are called button-groupings */
-.button-grouping{
-  @include grid-row;
-  @include clearfix;
-
-  &--nested{
-    @include grid-row-nest;
-  }
-
-  &__container{
-    &--full{
-      @include large-12;
-    }
-
-    &--half{
-      // use with half-small to also have half width buttons on small screens
-      @include large-6;
-    }
-
-    &--quarter{
-      @include large-3;
-      @include small-12;
-    }
-
-    &--third{
-      @include large-4;
-    }
-
-    &--half-small{
-      @include breakpoint(medium down){
-        @include small-6;
-      }
-    }
-  }
-
-  &__button{
-    @extend .button;
-    min-height: 170px;
-    position: relative;
-    width: 100%;
-    padding: 2.5em 1.75em;
-
-    &--green{
-      @extend .button-grouping__button;
-      background-color: $brand-green;
-
-      &:hover{
-        background: lighten($brand-green, 10%);
-      }
-    }
-
-    &--red{
-      @extend .button-grouping__button;
-      background-color: $brand-red;
-
-      &:hover{
-        background: lighten($brand-red, 10%);
-      }
-    }
-  }
-
-  &__content{
-    @include absolute-center;
-    -webkit-transform: translateX(-50%) translateY(-50%);
-    width: 90%;
-  }
-
-  &__icon{
-    font-size: 5rem;
-    padding-bottom: $base-padding;
-  }
-
-  &__bg-icon{
-    height: 80px;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-
-  &__title{
-    font-weight: bold;
-    margin-bottom: $base-margin;
-  }
-
-  &__text{
-    line-height: 1rem;
-    display: block;
-
-    &--large{
-      display: block;
-      font-size: 2.5rem;
-      font-weight: bold;
-    }
-
-    &--underline{
-      display: block;
-      text-decoration: underline;
-    }
-  }
-}
-
-/* Non Font Awesome/Symbolicon Icons */
-#card-icon{
-  background-image: asset-url("card-icon.png");
-}
-
-#coverage-icon{
-  background-image: asset-url("coverage-icon.png");
-}
-
-#family-icon{
-  background-image: asset-url("family-icon.png");
-}
-
-#laptop-icon{
-  background-image: asset-url("laptop-icon.png");
-}