ama_layout 4.7.1 → 4.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f296e94af2169028216956dfb424740f77cd21b0
-  data.tar.gz: 798dde670e1f006cda9d23a206f111cbcfc6a949
+  metadata.gz: 619da31832027cb72d6b1ea48668962fcf9d47e6
+  data.tar.gz: d06e7041fcdf69d836abcdf97405c85be1642c18
 SHA512:
-  metadata.gz: d9709d9035d74cc4158fb424bfa58a429ce022e49bdc039fc4389a3ac16dfa05813fca14225f46004354457b666da9f1f444bc45f3ab0d159b71d5d84b16414b
-  data.tar.gz: 7f43352527eb6031b1d6a65e4f60342ce7b399d48914c5c1ee73d9ac93ee7c29bb89142232a7ffa3ab35582e6e530f2e9514f64c6d15fc25baa9618245091b55
+  metadata.gz: 6b7e8ff249921c3117d38639fe9ad6669f6a8c2d6376b74a369c3f5564a9f9ceed3dfd68f1de5bc652c5ec20dd83faf9791ade3934998af879b842b11b04ccb5
+  data.tar.gz: 4c92d9f5519dc2ed4fec9d028ec900762e6f745ba065b8784a8240d2b5df695ea967f7fe780d09fdcf778fae11b14ba2e8782892af55931d6b199fd5ca6af3cd

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

@@ -70,6 +70,13 @@
   position: relative;
 }
 
+.z-index{
+  &--2{
+    z-index: 2;
+    position: relative;
+  }
+}
+
 /* ==================== 4. Margins ==================== */
 .m1{
   margin: $base-margin !important;
@@ -341,9 +348,73 @@
   word-break: break-word;
 }
 
+.semi-bold{
+  font-weight: 600;
+
+  &--small{
+    @extend .semi-bold;
+    font-size: $small-font-size;
+  }
+
+  &--medium{
+    @extend .semi-bold;
+    font-size: $medium-font-size;
+  }
+
+  &--large{
+    @extend .semi-bold;
+    font-size: $large-font-size;
+  }
+
+  &--x-large{
+    @extend .semi-bold;
+    font-size: $x-large-font-size;
+  }
+}
+
+.bold{
+  font-weight: 700;
+
+  &--small{
+    @extend .bold;
+    font-size: $small-font-size;
+  }
+
+  &--medium{
+    @extend .bold;
+    font-size: $medium-font-size;
+  }
+
+  &--large{
+    @extend .bold;
+    font-size: $large-font-size;
+  }
+
+  &--x-large{
+    @extend .bold;
+    font-size: $x-large-font-size;
+    line-height: $x-large-font-size;
+
+    &--green{
+      @extend .bold--x-large;
+      color: $brand-green
+    }
+  }
+
+  &--no-lineheight{
+    line-height: 0;
+    margin-bottom: $base-margin*1.65;
+    margin-top: $base-margin*1.65;
+  }
+}
+
+.x-large-sup{
+  font-size: 63%;
+}
+
 .bold-large-text{
   @extend .white-text;
-  font-size: $base-font-size*3;
+  font-size: $x-large-font-size;
   font-weight: bold;
 
   &--green{

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

@@ -27,6 +27,10 @@ $secondary-color: $brand-blue-light;
 $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;

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

@@ -76,6 +76,106 @@
   }
 }
 
+.accordion-multi-state{
+  @extend .accordion;
+  margin-bottom: $base-margin;
+  background: transparent;
+
+  .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,

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

@@ -73,6 +73,16 @@
     }
   }
 
+  &--expand-small-down{
+    @extend .button;
+
+    @include breakpoint(small down){
+      display: block;
+      margin: 0 auto;
+      width: 100%;
+    }
+  }
+
   &--small{
     @extend .button;
     @extend .small;

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

@@ -50,3 +50,24 @@
     }
   }
 }
+
+.callout{
+  &__side-arrow{ //this works best if it's a class on a svg element.
+    position: absolute;
+    z-index: 1;
+    top: 0;
+
+    @include breakpoint(small down){
+      top: 100%;
+      left: 0%;
+      height: 30%;
+      background-color: $white;
+    }
+
+    &--mobile-spacing{
+      @include breakpoint(small down){
+        margin-top: 50px;
+      }
+    }
+  }
+}

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

@@ -48,7 +48,8 @@ input[type="checkbox"]:not(.default){
 }
 
 input[type="radio"] + label,
-input[type="checkbox"] + label{
+input[type="checkbox"] + label,
+.form__label--unselected{
   background: $ash;
   border: $base-border;
   margin: 0;
@@ -76,6 +77,21 @@ input[type="checkbox"] + label{
   }
 }
 
+.form__label-bg{
+  background: $ash;
+  border: $base-border;
+  margin: 0;
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+  padding: 0 $base-padding/2 0 $base-padding/2;
+}
+
+.form__label-addon{
+  @extend .form__label-bg;
+  border-top: 0;
+}
+
 .checkbox-label{
   display: inline-block;
   width: 85%;
@@ -381,6 +397,15 @@ input[type="url"]:-ms-input-placeholder{
     margin-bottom: $base-margin;
   }
 
+  &__conditional-row{
+    @extend .form-horizontal__row;
+    display: block;
+    
+    &--hidden{
+      display: none;
+    }
+  }
+
   &__label-wrapper{
     @include large-4;
   }

data/app/assets/stylesheets/ama_layout/layout_components/link-list.scss

@@ -10,6 +10,15 @@
         padding-top: $base-padding/2;
       }
     }
+
+    &--grey-bordered{
+      border-bottom: 2px solid $stone;
+      padding-bottom: $base-padding/2;
+
+      &:not(:first-child){
+        padding-top: $base-padding/2;
+      }
+    }
   }
 
   &__link{

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

@@ -52,7 +52,7 @@
       display: none;
     }
 
-    &:after{
+    &::after{
       content: '';
       position: absolute;
       right: 0;
@@ -61,7 +61,7 @@
       border-width: 35px;
     }
 
-    &:before{
+    &::before{
       content: '';
       position: absolute;
       right: -4px; //this controls the thickness of the arrow
@@ -71,7 +71,7 @@
       border-width: 35px;
     }
 
-    &--selected:after{
+    &--selected::after{
       content: '';
       color: $white;
       position: absolute;
@@ -92,7 +92,7 @@
       border-width: 35px;
     }
 
-    &--completed:after{
+    &--completed::after{
       content: '';
       color: $white;
       position: absolute;
@@ -113,7 +113,7 @@
       border-width: 35px;
     }
 
-    &--very-completed:after{
+    &--very-completed::after{
       content: '';
       color: $white;
       position: absolute;
@@ -123,7 +123,7 @@
       border-width: 35px;
     }
 
-    &--very-completed:before{
+    &--very-completed::before{
       content: '';
       color: $white;
       position: absolute;
@@ -135,3 +135,154 @@
     }
   }
 }
+
+.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;
+    }
+  }
+}

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

@@ -110,6 +110,10 @@
   &:last-child:not(.section-content){
     margin-bottom: 0;
   }
+
+  @include breakpoint(medium down){
+    float: none;
+  }
 }
 
 .section-centered{
@@ -155,6 +159,11 @@
     background: lighten($smoke, 5%);
   }
 
+  &--ash-bg{
+    padding: $base-padding;
+    background: $ash;
+  }
+
   &--blue-bg{
     padding: $base-padding;
     background: $brand-blue-light;
@@ -166,11 +175,31 @@
     }
   }
 
+  &--cerulean-bg{
+    padding: $base-padding;
+    background: $cerulean;
+    color: $white;
+  }
+
   &--grey-border{
     border: 2px solid $stone;
   }
 }
 
+.section-content-half{
+  @extend .section;
+  @include medium-6;
+  position: relative;
+  margin-bottom: 0;
+}
+
+.content-container{
+  &--vertical{
+    @include vertical-center;
+    width: 100%;
+  }
+}
+
 @function set-hint-color($color) {
   @if (lightness($color) > 50) {
     @return $smoke; // Lighter backgorund, return dark color

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

@@ -1,6 +1,10 @@
 .table{
   margin-bottom: $base-margin;
 
+  &--ash-bg{
+    background: $ash;
+  }
+
   &__row{
     @include grid-row;
     overflow: auto;
@@ -44,6 +48,12 @@
       float: right;
     }
 
+    &--center{
+      @extend .table__data;
+      text-align: center;
+      clear: both;
+    }
+
     &--hide-large{
       @include hide-for(large);
     }
@@ -62,11 +72,17 @@
     font-weight: 600;
     font-size: rem-calc(16);
     color: $slate;
-  }
 
-  &__col-title--small{
-    font-weight: 600;
-    font-size: 0.875rem;
+    &--medium{
+      font-weight: 600;
+      font-size: $base-font-size;
+      color: $slate;
+    }
+
+    &--small{
+      font-weight: 600;
+      font-size: $base-font-size*0.875;
+    }
   }
 
   &__col-title-link{

data/lib/ama_layout/version.rb

@@ -1,3 +1,3 @@
 module AmaLayout
-  VERSION = '4.7.1'
+  VERSION = '4.8.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ama_layout
 version: !ruby/object:Gem::Version
-  version: 4.7.1
+  version: 4.8.0
 platform: ruby
 authors:
 - Michael van den Beuken
@@ -18,7 +18,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-11-29 00:00:00.000000000 Z
+date: 2016-11-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: foundation-rails