Merge pull request #838 from rubenmoya/dev

add missing styles for lgTablet and smTablet layout breakpoints

components/layout/NavDrawer.js

@@ -31,7 +31,7 @@ NavDrawer.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
   onOverlayClick: PropTypes.func,
-  permanentAt: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
+  permanentAt: PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
   pinned: PropTypes.bool,
   scrollY: PropTypes.bool,
   theme: PropTypes.shape({

components/layout/readme.md

@@ -71,10 +71,10 @@ The Layout's subcomponents can alter their appearance and behavior based on the
 |:-----|:-----|:-----|
 | 480px | `xxs` | Phone (portrait) |
 | 600px | `xs` | Small tablet, phone (landscape) |
-| 720px | `sm-tablet` | Small tablet (portrait) |
+| 720px | `smTablet` | Small tablet (portrait) |
 | 840px | `sm` | Large tablet (portrait) |
 | 960px | `md` | Small tablet (landscape) |
-| 1024px | `lg-tablet` | Large tablet (landscape) |
+| 1024px | `lgTablet` | Large tablet (landscape) |
 | 1280px | `lg` | Large tablet (landscape), desktop |
 | 1440px | `xl` | desktop |
 | 1600px | `xxl` | desktop |

components/layout/theme.scss

@@ -108,6 +108,12 @@
       }
     }
 
+    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+      &.smTabletPermanent {
+        @include permanent();
+      }
+    }
+
     @media screen and (min-width: $layout-breakpoint-md) {
       &.mdPermanent {
         @include permanent();
@@ -120,6 +126,12 @@
       }
     }
 
+    @media screen and (min-width: $layout-breakpoint-lg-tablet) {
+      &.lgTabletPermanent {
+        @include permanent();
+      }
+    }
+
     @media screen and (min-width: $layout-breakpoint-xl) {
       &.xlPermanent {
         @include permanent();