ama_layout 4.10.1 → 5.0.0

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

@@ -1,108 +0,0 @@
-.notice--flash{
-  padding: $base-padding/2 $base-padding;
-  background-color: $brand-blue-insurance;
-  color: $white;
-  -webkit-animation: noticeFade 8s;
-  -moz-animation: noticeFade 8s;
-  -o-animation: noticeFade 8s;
-   animation: noticeFade 8s;
-   opacity: 0;
-}
-
-@keyframes noticeFade{
-  0%   { opacity:0; }
-  10%  { opacity:1; }
-  90%  { opacity:1; }
-  100% { opacity:0; }
-}
-@-o-keyframes noticeFade{
-  0%   { opacity:0; }
-  10%  { opacity:1; }
-  90%  { opacity:1; }
-  100% { opacity:0; }
-}
-@-moz-keyframes noticeFade{
-  0%   { opacity:0; }
-  10%  { opacity:1; }
-  90%  { opacity:1; }
-  100% { opacity:0; }
-}
-@-webkit-keyframes noticeFade{
-  0%   { opacity:0; }
-  10%  { opacity:1; }
-  90%  { opacity:1; }
-  100% { opacity:0; }
-}
-
-.notice_notification{
-  padding: $base-padding/2 $base-padding;
-  background-color: $brand-blue-insurance;
-  color: $white;
-}
-
-.error_notification{
-  @extend .notice_notification;
-  background-color: $brand-red;
-}
-
-//Status error classes
-.orange-warning-icon{
-  @extend .fa;
-  @extend .fa-exclamation-circle;
-  @extend .orange-text;
-}
-
-.white-warning-icon{
-  @extend .fa;
-  @extend .fa-exclamation-circle;
-  @extend .white-text;
-}
-
-.green-active-icon{
-  @extend .fa;
-  @extend .fa-check-circle;
-  @extend .green-text;
-}
-
-.white-active-icon{
-  @extend .fa;
-  @extend .fa-check-circle;
-  @extend .white-text;
-}
-
-.status-icon{
-  font-size: 2rem !important; //needs important to overwrite the .fa font size
-  text-align: center;
-  margin: 0 auto;
-  display: block;
-}
-
-.notice{
-  color: $white;
-  padding: $base-padding;
-  margin-bottom: $base-margin;
-  overflow: auto;
-
-  &--warning{
-    @extend .notice;
-    background: $orange;
-  }
-
-  &__icon-wrapper{
-    @include small-2;
-  }
-
-  &__icon{
-    font-size: 2em;
-    width: 100%;
-    text-align: center;
-  }
-
-  &__text-wrapper{
-    @include small-10;
-
-    &>:last-child{
-      margin-bottom: 0;
-    }
-  }
-}

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

@@ -1,52 +0,0 @@
-.option-toggle{
-  &__list{
-    list-style: none;
-    margin-bottom: 0;
-  }
-
-  &__item{
-    @include clearfix;
-    margin: 1px 0;
-    background-color: $white;
-    color: $cerulean;
-    position: relative;
-
-    &:nth-child(even){
-      background-color: $ash;
-    }
-
-    &.visible{ //this class isn't BEM because of the old JS in RR - KR
-      background-color: $brand-blue-light;
-      color: $white;
-
-      .option-toggle__icon{
-        background-color: $brand-blue-light;
-        color: $white;
-      }
-    }
-  }
-
-  &__label{
-    margin: 0 0 0 $base-margin;
-    line-height: 24px;
-    @include vertical-center;
-  }
-
-  &__icon-container{
-    background-color: transparent;
-    width: 60px;
-    height: 50px;
-    float: left;
-    padding: $base-padding*1.5;
-    position: relative;
-  }
-
-  &__icon{
-    color: $cerulean;
-    width: 100%;
-    font-size: $base-font-size*1.75;
-    left: 0;
-    text-align: center;
-    @include vertical-center;
-  }
-}

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

@@ -1,39 +0,0 @@
-.pagination{
-  margin-bottom : $base-margin;
-
-  &__page{
-    font-weight: bold;
-    font-size: $base-font-size*1.0625;
-  }
-
-  &__current-page{
-    background-color: $cerulean;
-    color: $white;
-    margin: 0 3px;
-    padding: 0 3px;
-    border-radius: 3px;
-  }
-
-  &__link{
-    color: $slate;
-    margin: auto 3px;
-    padding: 0 3px;
-    border-radius: 3px;
-
-    &:hover{
-      background-color: $cerulean;
-      color: $white;
-      padding: 0 3px;
-      text-decoration: none;
-    }
-  }
-
-  &__page-gap{
-    font-weight: bold;
-  }
-
-  &--centered{
-    @extend .pagination;
-    text-align: center;
-  }
-}

data/app/assets/stylesheets/ama_layout/layout_components/progress-bar.scss

@@ -1,292 +0,0 @@
-.progress-bar{
-  @include hide-for(small only);
-  overflow: auto;
-
-  &__section{
-    &--active{
-      background: $cerulean;
-    }
-
-    &--inactive{
-      background: $brand-blue-light;
-    }
-
-    &--completed{
-      background: $brand-blue-dark;
-    }
-  }
-
-  &--selected{
-    background: $cerulean;
-    color: $white;
-  }
-
-  &--completed{
-    color: $white;
-    background: $brand-blue-dark;
-  }
-
-  &__section-quarter{
-    @include medium-3;
-    position: relative;
-    color: $white;
-    overflow: hidden;
-    padding: 6px 0;
-
-    &:last-child:not(:first-child){
-      float: none;
-    }
-  }
-    &__section-title{
-
-    }
-
-    &__section-info{
-      display: block;
-    }
-
-  &__arrow{
-    width: 32px;
-    height: 32px;
-    position: absolute;
-    right: -20px;
-    top: -4px;
-
-    @include breakpoint(medium down){
-      display: none;
-    }
-
-    &::after{
-      content: '';
-      position: absolute;
-      right: 0;
-      border-color: transparent transparent transparent $brand-blue-light;
-      border-style: solid;
-      border-width: 35px;
-    }
-
-    &::before{
-      content: '';
-      position: absolute;
-      right: -4px; //this controls the thickness of the arrow
-      border-color: transparent transparent transparent $white;
-      background: $brand-blue-light;
-      border-style: solid;
-      border-width: 35px;
-    }
-
-    &--selected::after{
-      content: '';
-      color: $white;
-      position: absolute;
-      right: 0;
-      border-color: transparent transparent transparent $cerulean;
-      border-style: solid;
-      border-width: 35px;
-    }
-
-    &--selected:before{
-      content: '';
-      color: $white;
-      position: absolute;
-      right: -4px; //this controls the thickness of the arrow
-      border-color: transparent transparent transparent $white;
-      background: $brand-blue-light;
-      border-style: solid;
-      border-width: 35px;
-    }
-
-    &--completed::after{
-      content: '';
-      color: $white;
-      position: absolute;
-      right: 0;
-      border-color: transparent transparent transparent $brand-blue-dark;
-      border-style: solid;
-      border-width: 35px;
-    }
-
-    &--completed:before{
-      content: '';
-      color: $white;
-      position: absolute;
-      right: -4px; //this controls the thickness of the arrow
-      border-color: transparent transparent transparent $white;
-      background: $cerulean;
-      border-style: solid;
-      border-width: 35px;
-    }
-
-    &--very-completed::after{
-      content: '';
-      color: $white;
-      position: absolute;
-      right: 0;
-      border-color: transparent transparent transparent $brand-blue-dark;
-      border-style: solid;
-      border-width: 35px;
-    }
-
-    &--very-completed::before{
-      content: '';
-      color: $white;
-      position: absolute;
-      right: -4px; //this controls the thickness of the arrow
-      border-color: transparent transparent transparent $white;
-      background: $brand-blue-dark;
-      border-style: solid;
-      border-width: 35px;
-    }
-  }
-}
-
-.progress-bar-vertical{
-  list-style: none;
-  position: relative;
-
-  &__guide{
-    height: 100%;
-    position: absolute;
-    width: 2px;
-    background-color: $stone;
-    left: 17px;
-  }
-
-  &__step{
-    @extend .clearfix;
-    position: relative;
-    margin-bottom: $base-margin*1.4;
-  }
-
-  &__icon{
-    width: 37px;
-    height: 37px;
-    border-radius: 100%;
-    display: inline-block;
-    font-weight: 700;
-    font-size: 23px;
-    text-align: center;
-    background-color: $stone;
-    position: relative;
-    float: left;
-
-    &--active{
-      @extend .progress-bar-vertical__icon;
-      background-color: $brand-blue-light;
-      color: $white;
-    }
-
-    &--complete{
-      @extend .fa;
-      @extend .fa-check;
-      @extend .progress-bar-vertical__icon;
-      background-color: $cerulean;
-      color: $white;
-      font-weight: normal;
-
-      &::before{
-        @include vertical-center;
-        left: 0;
-        width: 100%;
-      }
-    }
-  }
-
-  &__content{
-    position: relative;
-    float: left;
-    margin-left: $base-margin*1.5;
-    line-height: 16px;
-    max-width: 74%;
-  }
-
-  &__content-remove{
-    line-height: 23px;
-    margin-left: $base-margin*0.35;
-  }
-}
-
-.progress-bar-horizontal{
-  list-style: none;
-  position: relative;
-  margin: 0 auto;
-  display: table;
-  width: 100%;
-  @include clearfix;
-
-  @include breakpoint(medium only){
-    max-width: 546px;
-  }
-
-  &__guide{
-    width: 80%;
-    left: 10%;
-    position: absolute;
-    height: 2px;
-    background-color: $stone;
-    top: 70%;
-  }
-
-  &__step{
-    position: relative;
-    display: table-cell;
-
-    @include breakpoint(medium only){
-      margin-right: 9%;
-    }
-  }
-
-  &__icon{
-    width: 37px;
-    height: 37px;
-    border-radius: 100%;
-    display: block;
-    margin: 0 auto;
-    font-weight: 700;
-    font-size: 21px;
-    text-align: center;
-    background-color: $stone;
-    position: relative;
-    line-height: 37px;
-
-    @include breakpoint(medium only){
-      width: 50px;
-      height: 50px;
-      font-size: 26px;
-      line-height: 50px;
-    }
-
-    &--active{
-      @extend .progress-bar-horizontal__icon;
-      background-color: $brand-blue-light;
-      color: $white;
-    }
-
-    &--complete{
-      @extend .fa;
-      @extend .fa-check;
-      @extend .progress-bar-horizontal__icon;
-      background-color: $cerulean;
-      color: $white;
-      font-weight: normal;
-
-      &::before{
-        @include vertical-center;
-        left: 0;
-        width: 100%;
-      }
-    }
-  }
-
-  &__content{
-    line-height: $base-font-size*1.5;
-    text-align: center;
-    margin-bottom: $base-margin*0.65;
-    display: block;
-    font-size: $base-font-size*0.85;
-
-    @include breakpoint(medium only){
-      font-size: $base-font-size;
-    }
-  }
-}