ama_layout 4.8.5 → 4.8.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 030fe4ad86d62a87a71f28cc3ce243eff0818653
-  data.tar.gz: 3025f9b2521aac7f8e2b74305c1cc1a23085b1a0
+  metadata.gz: 604bd375c8a1f57e5e0a1c6dc1b70f9bd9541e1b
+  data.tar.gz: cd9f3abcf74d801784c1d7e1eb804a956233ef54
 SHA512:
-  metadata.gz: 720e9d62f3a5fbe752052e2fc00874ab71c06634ec994a6cbc646442bb0b958b5a53a5a18a636bacd36901488077e51ee79a3c94afa552724c7aec5bd381f2c4
-  data.tar.gz: 1ae7ddff01fb9f52528adcaf44cfd63b2f6c21080d541c5f33be89d31d9b665dfa8f16cf216145142f2787eb21ab4acc8125d6eebf7efed22c87ccd638e4ab23
+  metadata.gz: 39f6108545e658aff4706aa6dcb81bb31f1017a089242dbd427b53097d17f3b88456e7b71f00ed954248c24e0e39be29fa3e51c37d68a0dd5abdd35bdad63af2
+  data.tar.gz: 5ed98173cdf4fcac46d5690fc21df6c5ca2326d3f416ea7d334199ca1106bede5900d467db4cd7eda7ba04311ac2b8896edd8499bca458051812f164e9084893

data/app/assets/stylesheets/ama_layout/layout_components/comparison-radios.scss

@@ -35,34 +35,69 @@
   }
 
   &__radio-btn--centered{
+    .comparison-radios__input + label{
+      @include breakpoint(small only){
+        overflow: hidden;
+        padding: 0;
+      }
 
-    input[type="radio"] + label{
-      padding: 0 0 46px 0;
+      @include breakpoint(medium){
+        padding: 0 0 46px 0;
+      }
 
       &::before{
-        top: 100%;
-        margin-top: -35px;
-        left: 50%;
-        margin-left: -12px;
+        @include breakpoint(medium){
+          top: 100%;
+          margin-top: -35px;
+          left: 50%;
+          margin-left: -12px;
+        }
+
+        @include breakpoint(small only){
+          top: 50%;
+          left: 91%;
+          margin-top: -12px;
+          margin-left: -2px;
+        }
       }
 
       &::after{
-        top: 100%;
-        margin-top: -27px;
-        left: 50%;
-        margin-left: -4px;
-        display: none;
+        @include breakpoint(medium){
+          top: 100%;
+          margin-top: -27px;
+          left: 50%;
+          margin-left: -4px;
+          display: none;
+        }
+
+        @include breakpoint(small only){
+          top: 50%;
+          left: 91%;
+          margin-top: -4px;
+          margin-left: 6px;
+        }
       }
     }
 
     input[type="radio"]:checked + label{
-      padding: 0 0 46px 0;
+      @include breakpoint(medium){
+        padding: 0 0 46px 0;
+      }
 
       &::after{
-        top: 100%;
-        margin-top: -27px;
-        left: 50%;
-        margin-left: -4px;
+        @include breakpoint(medium){
+          top: 100%;
+          margin-top: -27px;
+          left: 50%;
+          margin-left: -4px;
+        }
+
+        @include breakpoint(small only){
+          top: 50%;
+          left: 91%;
+          margin-top: -4px;
+          margin-left: 6px;
+        }
       }
     }
   }
@@ -72,11 +107,32 @@
     padding: 7px;
     font-weight: 700;
 
+    @include breakpoint(small only){
+      font-size: $base-font-size*1.25;
+    }
+
     &--blue-bg{
       @extend .comparison-radios__title;
       background: $brand-blue-light;
       color: $white;
       margin-bottom: $base-margin;
+      position: relative;
+    }
+
+    &--mobile-split{
+      @include breakpoint(small only){
+        float: left;
+        width: 25%;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__title-content{
+    @include breakpoint(small only){
+      -webkit-transform: translate(-50%, -50%);
+      @include absolute-center;
+      font-size: 4.5vw;
     }
   }
 
@@ -86,12 +142,50 @@
     margin: 9px auto;
   }
 
+  &__input:checked{
+    &~label{
+      .comparison-radios__panel{
+        border-bottom: 2px solid darken($sky, 10%);
+        background: darken($sky, 3%);
+
+        @include breakpoint(medium){
+          border-top: 2px solid darken($sky, 10%);
+        }
+      }
+
+      .comparison-radios__content{
+        @include breakpoint(small only){
+          border-left: 2px solid darken($sky, 10%);
+          border-right: 2px solid darken($sky, 10%);
+        }
+      }
+
+      .comparison-radios__divider{
+        border: solid darken($sky, 10%);
+        border-width: 2px 0 0;
+        height: 0;
+      }
+    }
+  }
+
   &__panel{
     background-color: $ash;
-    border-top: 2px solid $stone;
     border-bottom: 2px solid $stone;
     padding: $base-padding;
     margin-bottom: $base-margin;
+
+    @include breakpoint(medium){
+      border-top: 2px solid $stone;
+    }
+  }
+
+  &__content{
+    @include breakpoint(small only){
+      width: 63%;
+      float: left;
+      border-right: 2px solid $stone;
+      border-left: 2px solid $stone;
+    }
   }
 
   &__highlight{
@@ -117,24 +211,92 @@
   &__image{
     height: 125px;
     margin-bottom: $base-margin;
+
+    @include breakpoint(small only){
+      display: none;
+    }
   }
 
   &__list{
     list-style-type: none;
+    padding: 0 $base-padding;
+
+    @include breakpoint(small only){
+      padding: 0 $base-padding/3;
+      font-size: $base-font-size*0.875;
+    }
   }
 
   &__list-item{
     padding-bottom: $base-padding;
+
+    &::before{
+      font-family: 'FontAwesome';
+      content: "\f00c";
+      color: $brand-blue-light;
+      margin-right: 5px;
+      margin-left: -17px;
+    }
+
+    @include breakpoint(small only){
+      text-align: left;
+      margin-left: $base-margin*1.5;
+    }
   }
 
   &__ribbon{
     position: absolute;
     top: 0;
-    right: 0;
+    right: -18px;
+
+    @include breakpoint(medium down){
+      right: -14px;
+      width: 100px;
+    }
+
+    @include breakpoint(small only){
+      top: -5px;
+      right: -13px;
+    }
+  }
+
+  &__icon{
+    display: block;
+
+    @include breakpoint(small only){
+      -webkit-transform: translate(-50%, -50%);
+      @include absolute-center;
+      font-size: 10vw;
+    }
+
+    &::before{
+      @include breakpoint(medium){
+        font-size: $base-font-size*3;
+      }
+    }
+
+    &.ama-icon-rv::before{ //make the custom icon play nice with the FA icons
+      position: relative;
+
+      @include breakpoint(medium){
+        font-size: $base-font-size*4;
+        top: 20px;
+        line-height: 9px;
+      }
+
+      @include breakpoint(small only){
+        font-size: 13vw;
+        top: 5px;
+      }
+    }
   }
 
   &__divider{
     margin-bottom: 0;
+    
+    @include breakpoint(small only){
+      display: none;
+    }
   }
 
   &--disabled{
@@ -152,7 +314,7 @@
       }
     }
 
-    input [type="radio"] + label {
+    input [type="radio"] + label{
       border: 2px solid lighten($dark-sky, 6%);
     }
 
@@ -163,12 +325,3 @@
     }
   }
 }
-
-input[type="radio"]:checked{
-  &~label{
-    .comparison-radios__panel{
-      border-top: 2px solid darken($sky, 10%);
-      border-bottom: 2px solid darken($sky, 10%);
-    }
-  }
-}

data/lib/ama_layout/version.rb

@@ -1,3 +1,3 @@
 module AmaLayout
-  VERSION = '4.8.5'
+  VERSION = '4.8.6'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ama_layout
 version: !ruby/object:Gem::Version
-  version: 4.8.5
+  version: 4.8.6
 platform: ruby
 authors:
 - Michael van den Beuken
@@ -18,7 +18,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-01-09 00:00:00.000000000 Z
+date: 2017-01-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: foundation-rails
@@ -418,7 +418,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.5.1
+rubygems_version: 2.2.2
 signing_key: 
 specification_version: 4
 summary: ".ama.ab.ca site layouts"