using @extend for responsive blocks, added shadow-box mixin to utlities for configurable border shadow box styling, moved .left, .right, .center classes to .basic-alignment class for @extending as needed in layouts. Fixes #109

2 files changed, 16 insertions, 0 deletions

diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss
index ef47279a..f6fa5a5f 100644
--- a/.themes/classic/sass/base/_layout.scss
+++ b/.themes/classic/sass/base/_layout.scss
@@ -75,6 +75,15 @@ aside[role=sidebar] {
   @extend .group;
 }
 
+.flex-content { max-width: 100%; height: auto; }
+
+.basic-alignment {
+  &.left { float: left; margin-right: 1.5em; }
+  &.right { float: right; margin-left: 1.5em; }
+  &.center { display:block; margin: 0 auto 1.5em; }
+  &.left, &.right { margin-bottom: .8em; }
+}
+
 .toggle-sidebar { &, .no-sidebar & { display: none; }}
 
 body.sidebar-footer {
diff --git a/.themes/classic/sass/base/_utilities.scss b/.themes/classic/sass/base/_utilities.scss
index 8b718cdc..2d49e659 100644
--- a/.themes/classic/sass/base/_utilities.scss
+++ b/.themes/classic/sass/base/_utilities.scss
@@ -5,6 +5,13 @@
   height: image-height($img);
 }
 
+@mixin shadow-box($border: #fff .5em solid, $shadow: rgba(#000, .15) 0 1px 4px, $border-radius: .3em) {
+  @include border-radius($border-radius);
+  @include box-shadow($shadow);
+  @include box-sizing(border-box);
+  border: $border;
+}
+
 @mixin selection($bg, $color: inherit, $text-shadow: none){
   * {
     &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }