bedrock_sass 0.1.6 → 0.1.7

data/assets/bedrock/scss/_bedrock-components.scss

@@ -16,6 +16,7 @@
 @import 'components/file-input';
 @import 'components/seo-analysis';
 @import 'components/shortcode-reveal';
+@import 'components/media-reveal';
 
 @include bedrock-global-styles;
 @include bedrock-prototype-classes;
@@ -35,3 +36,4 @@
 @include bedrock-file-input;
 @include bedrock-seo-analysis;
 @include bedrock-shortcode-reveal;
+@include bedrock-media-reveal;

data/assets/bedrock/scss/_bedrock-settings.scss

@@ -58,8 +58,8 @@ $no-content-color: $medium-gray;
 // ---------
 
 $page-content-sidebar-sizes: (
-  small: 340px,
-  xlarge: 360px
+  large: 340px,
+  xxlarge: 360px
 );
 
 

data/assets/bedrock/scss/components/dropzone-upload.scss

@@ -156,4 +156,8 @@ $dropzone-upload-active-border-color: $primary-color !default;
   .dropzone {
     @include dropzone-upload;
   }
+
+  .dz-hidden-input {
+    overflow: hidden;
+  }
 }

data/assets/bedrock/scss/components/media-reveal.scss

@@ -0,0 +1,88 @@
+$media-reveal-alt-color: $dark-gray !default;
+$media-reveal-alt-background: darken($reveal-background, 5) !default;
+
+// Media Reveal Mixins
+
+@mixin media-reveal {
+  .media-reveal {
+    z-index: 99999;
+
+    &.full {
+
+      .panel-content {
+        position: relative;
+        overflow: hidden;
+      }
+
+      .media-columns {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      .media-menu,
+      .media-content {
+        overflow-y: auto;
+        height: 100%;
+      }
+    }
+  }
+
+  .media-columns {
+    @include xy-grid;
+    height: 100%;
+  }
+
+  .media-menu {
+    @include xy-cell(shrink, false);
+    background: $media-reveal-alt-background;
+    min-height: 100%;
+    min-width: 12rem;
+    border-color: smart-scale($media-reveal-alt-background, 5%);
+    border-style: solid;
+    border-width: 0 1px 0 0;
+
+    .menu {
+      background: none;
+      border: 0;
+
+      li {
+
+        &:not(:last-child) {
+          border: 1px solid smart-scale($media-reveal-alt-background, 5%);
+          border-width: 0 0 1px;
+        }
+
+        &.is-active, &.active {
+
+          a {
+            background: smart-scale($media-reveal-alt-background, 5%);
+            color: $media-reveal-alt-color;
+          }
+        }
+      }
+
+      a {
+        color: $media-reveal-alt-color;
+        padding: $global-padding;
+        background: none;
+        outline: none;
+      }
+    }
+  }
+
+  .media-content {
+    @include xy-cell(auto, false);
+    padding: $global-padding;
+    min-height: 100%;
+  }
+}
+
+
+// Media Reveal Component
+
+@mixin bedrock-media-reveal {
+  @include media-reveal;
+}

data/assets/bedrock/scss/components/off-canvas-menu.scss

@@ -13,6 +13,9 @@ $offcanvas-menu-submenu-background: darken($offcanvas-menu-background, 3) !defau
 @mixin off-canvas-menu-content {
   @include xy-cell(auto, false);
   @extend .#{$maincontent-class};
+  max-width: 100%;
+  overflow-x: auto;
+  min-width: 240px;
 
   @include breakpoint(large) {
     margin: 0;

data/assets/bedrock/scss/components/page-content.scss

@@ -1,7 +1,4 @@
-$page-content-sidebar-sizes: (
-  small: 340px,
-  xlarge: 360px
-) !default;
+$page-content-sidebar-sizes: (large: 340px, xxlarge: 360px) !default;
 
 // Page Content Mixins
 
@@ -17,6 +14,7 @@ $page-content-sidebar-sizes: (
 @mixin page-content {
   @include xy-grid;
   min-height: 100vh;
+  flex-flow: row nowrap;
 
   @each $name, $size in $grid-column-gutter {
     @include breakpoint($name) {
@@ -25,18 +23,24 @@ $page-content-sidebar-sizes: (
     }
   }
 
-  @include breakpoint(xlarge) {
-    flex-flow: row nowrap;
+  @include breakpoint(large down) {
+    flex-flow: row wrap;
   }
 
   > .content {
     @include xy-cell(auto, false);
     @include page-content-gutter;
+    overflow-x: auto;
+    min-width: 240px;
+
+    @include breakpoint(large down) {
+      width: 100%;
+    }
   }
 
   > .sidebar {
-    @include xy-cell(shrink, false);
     @include page-content-gutter;
+    @include xy-cell(shrink, false);
 
     @each $name, $size in $page-content-sidebar-sizes {
       @include breakpoint($name) {
@@ -44,8 +48,14 @@ $page-content-sidebar-sizes: (
       }
     }
 
-    @include breakpoint(xlarge down) {
+    @include breakpoint(large down) {
       width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      > .button:first-child {
+        order: 99 * 99;
+      }
     }
   }
 }

data/assets/bedrock/scss/components/seo-analysis.scss

@@ -22,8 +22,13 @@ $seo-analysis-border: 1px solid smart-scale($seo-analysis-background, $seo-analy
 
   .snippet-editor__view {
     margin: 0;
-    width: 40rem;
+    width: auto;
     max-width: 100%;
+    flex-basis: 40em;
+
+    .snippet_container {
+      width: 100%;
+    }
 
     .snippet_container__url {
 
@@ -64,6 +69,7 @@ $seo-analysis-border: 1px solid smart-scale($seo-analysis-background, $seo-analy
   .seo-preview-score {
     text-align: center;
     color: $medium-gray;
+    padding-left: $global-padding * 2;
 
     .score {
       display: block;

data/assets/bedrock/scss/components/shortcode-reveal.scss

@@ -6,20 +6,26 @@ $shortcode-reveal-alt-background: darken($reveal-background, 5) !default;
 @mixin shortcode-reveal {
   .shortcode-reveal {
 
-    .panel-content {
-      position: relative;
-      overflow: hidden;
+    &.full {
+
+      .panel-content {
+        position: relative;
+        overflow: hidden;
+      }
+
+      .shortcode-columns {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        overflow-y: auto;
+      }
     }
   }
 
   .shortcode-columns {
     @include xy-grid;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
     height: 100%;
-    overflow-y: auto;
   }
 
   .shortcode-menu {
@@ -31,17 +37,28 @@ $shortcode-reveal-alt-background: darken($reveal-background, 5) !default;
     border-style: solid;
     border-width: 0 1px 0 0;
 
-    .menu {
+    li {
 
-      li:not(:last-child) {
-        border-bottom: 1px solid smart-scale($shortcode-reveal-alt-background, 5%);
+      &:not(:last-child) {
+        border: 1px solid smart-scale($media-reveal-alt-background, 5%);
+        border-width: 0 0 1px;
       }
 
-      a {
-        color: $shortcode-reveal-alt-color;
-        padding: $global-padding;
+      &.is-active, &.active {
+
+        a {
+          background: smart-scale($media-reveal-alt-background, 5%);
+          color: $media-reveal-alt-color;
+        }
       }
     }
+
+    a {
+      color: $media-reveal-alt-color;
+      padding: $global-padding;
+      background: none;
+      outline: none;
+    }
   }
 
   .shortcode-form {

data/lib/bedrock_sass/version.rb

@@ -1,3 +1,3 @@
 module BedrockSass
-  VERSION = '0.1.6'
+  VERSION = '0.1.7'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bedrock_sass
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.1.7
 platform: ruby
 authors:
 - Jonian Guveli
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-12-20 00:00:00.000000000 Z
+date: 2017-12-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -419,6 +419,7 @@ files:
 - assets/bedrock/scss/components/inline-edit-box.scss
 - assets/bedrock/scss/components/login-box.scss
 - assets/bedrock/scss/components/logo-bar.scss
+- assets/bedrock/scss/components/media-reveal.scss
 - assets/bedrock/scss/components/no-content.scss
 - assets/bedrock/scss/components/off-canvas-menu.scss
 - assets/bedrock/scss/components/page-content.scss