active_frontend 16.1.6 → 16.1.7

data/vendor/assets/stylesheets/blocks/_button.scss

@@ -318,7 +318,7 @@
 
 // Media Queries
 // ==================================================
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 812px) {
   .btn-block-responsive {
     display: block;
     min-width: 100%;

data/vendor/assets/stylesheets/blocks/_multimedia.scss

@@ -63,6 +63,6 @@ svg:not(:root) {
 
 // Media Queries
 // ==================================================
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 812px) {
   .img-responsive { max-width: 60%; }
 }

data/vendor/assets/stylesheets/blocks/_reset.scss

@@ -177,6 +177,7 @@ body {
   font-weight: text-weight(semilight);
   letter-spacing: -0.4px;
   line-height: text-line-height(b);
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
   text-align: left;
   text-decoration: none;
   text-transform: none;

data/vendor/assets/stylesheets/components/_ad.scss

@@ -85,7 +85,7 @@
 
 // Media Queries
 // ==================================================
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 812px) {
   .ad {
     &.responsive {
       height: 60px;

data/vendor/assets/stylesheets/components/_calendar.scss

@@ -250,7 +250,7 @@ table.calendar-border-separate {
 
 // Media Queries
 // ==================================================
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 812px) {
   .calendar-header td { display: block; }
   .calendar-header-left,
   .calendar-header-center,

data/vendor/assets/stylesheets/components/_carousel.scss

@@ -125,7 +125,7 @@
 
 // Media Queries
 // ==================================================
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 812px) {
   .carousel-control {
     .icon-prev,
     .icon-next {

data/vendor/assets/stylesheets/components/_grid.scss

@@ -94,19 +94,19 @@
   .hidden-desktop { display: inherit; }
   .hidden-laptop { display: none; }
 }
-@media only screen and (min-width: 768px) and (max-width: 959px) {
+@media only screen and (min-width: 813px) and (max-width: 959px) {
   @each $name, $widths in $grid-container-widths {
     $width: nth($widths, 2);
 
     @if $width {
-      .container-fixed-#{$name} { width: 760px; }
+      .container-fixed-#{$name} { width: 813px; }
     }
   }
 
   .hidden-desktop { display: inherit; }
   .hidden-tablet { display: none; }
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 812px) {
   @each $name, $margin in $grid-row-margins {
     .#{dasherize(row-responsive, $name)} { margin-bottom: $margin; }
   }
@@ -117,7 +117,7 @@
       $width: nth($widths, $i);
 
       @if $width {
-        .#{dasherize($type, $name)} { width: calc(100% - 20px); }
+        .#{dasherize($type, $name)} { width: calc(100% - (20px + env(safe-area-inset-right) + env(safe-area-inset-left))); }
       }
     }
   }

data/vendor/assets/stylesheets/components/_header.scss

@@ -126,10 +126,10 @@
 
 // Media Queries
 // ==================================================
-@media only screen and (min-width: 768px) and (max-width: 959px) {
+@media only screen and (min-width: 813px) and (max-width: 959px) {
   .header-search { width: 220px; }
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 812px) {
   .header {
     height: 54px;
     padding: 12px 0;

data/vendor/assets/stylesheets/components/_layout.scss

@@ -49,7 +49,7 @@
     &.fixed + .layout-body { width: 100%; }
   }
 }
-@media only screen and (min-width: 768px) and (max-width: 959px) {
+@media only screen and (min-width: 813px) and (max-width: 959px) {
   .layout-sidebar {
     width: 220px;
 
@@ -57,7 +57,7 @@
     &.fixed + .layout-body { width: 100%; }
   }
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 812px) {
   .layout-body,
   .layout-sidebar {
     height: initial;
@@ -76,7 +76,7 @@
       height: initial;
       padding-top: 54px;
 
-      &.with-sticky-navbar { padding-bottom: 54px; }
+      &.with-sticky-navbar { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
     }
   }
   .layout-sidebar {

data/vendor/assets/stylesheets/components/_modal.scss

@@ -137,11 +137,11 @@
 
 // Media Queries
 // ==================================================
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 812px) {
   .modal { width: calc(100% - 20px); }
   .modal-body { max-height: 280px; }
 }
-@media only screen and (min-width: 480px) and (max-width: 767px) {
+@media only screen and (min-width: 480px) and (max-width: 812px) {
   .modal { width: calc(100% - 120px); }
   .modal-body { max-height: 140px; }
 }

data/vendor/assets/stylesheets/components/_navbar.scss

@@ -13,7 +13,7 @@
   border-top: 1px solid color(haze);
   box-sizing: border-box;
   display: table;
-  height: 54px;
+  height: calc(54px + env(safe-area-inset-bottom));
   line-height: 1;
   table-layout: fixed;
   width: 100%;
@@ -23,8 +23,9 @@
     float: none;
     font-size: text-size(xxs);
     font-weight: text-weight(semibold);
+    padding-top: 9px;
     text-align: center;
-    vertical-align: middle;
+    vertical-align: top;
     width: 1%;
 
     &.primary {
@@ -55,6 +56,6 @@
 
 // Media Queries
 // ==================================================
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 813px) {
   .navbar { display: none; }
 }

data/vendor/assets/stylesheets/components/_sidebar.scss

@@ -43,7 +43,7 @@
   text-align: center;
 }
 .sidebar-body,
-.sidebar-subtitle { padding: 0 15px; }
+.sidebar-subtitle { padding: 0 calc(15px + env(safe-area-inset-right) + env(safe-area-inset-left)); }
 .sidebar-subtitle {
   background: color(light-haze);
   border-bottom: 1px solid;
@@ -57,7 +57,7 @@
     border-bottom-width: 1px;
     box-sizing: border-box;
     display: block;
-    padding: 20px 15px;
+    padding: 20px calc(15px + env(safe-area-inset-right) + env(safe-area-inset-left));
     width: 100%;
   }
   > ul {
@@ -66,7 +66,7 @@
     border-bottom-style: solid;
     border-bottom-width: 1px;
     list-style: none;
-    padding: 15px 30px;
+    padding: 15px calc(30px + env(safe-area-inset-right) + env(safe-area-inset-left));
 
     a {
       display: block;

data/vendor/assets/stylesheets/components/_subheader.scss

@@ -56,7 +56,7 @@
 
 // Media Queries
 // ==================================================
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 812px) {
   .subheader {
     &.absolute,
     &.fixed {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: active_frontend
 version: !ruby/object:Gem::Version
-  version: 16.1.6
+  version: 16.1.7
 platform: ruby
 authors:
 - Juan Gomez
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-05-25 00:00:00.000000000 Z
+date: 2018-05-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails