Browse code
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
Brandon Mathis authored on 22/08/2011 at 20:28:50Showing 4 changed files
- .themes/classic/sass/base/_layout.scss
- .themes/classic/sass/base/_utilities.scss
- .themes/classic/sass/partials/_blog.scss
- .themes/classic/sass/partials/sidebar/_base.scss
| ... | ... |
@@ -75,6 +75,15 @@ aside[role=sidebar] {
|
| 75 | 75 |
@extend .group; |
| 76 | 76 |
} |
| 77 | 77 |
|
| 78 |
+.flex-content { max-width: 100%; height: auto; }
|
|
| 79 |
+ |
|
| 80 |
+.basic-alignment {
|
|
| 81 |
+ &.left { float: left; margin-right: 1.5em; }
|
|
| 82 |
+ &.right { float: right; margin-left: 1.5em; }
|
|
| 83 |
+ &.center { display:block; margin: 0 auto 1.5em; }
|
|
| 84 |
+ &.left, &.right { margin-bottom: .8em; }
|
|
| 85 |
+} |
|
| 86 |
+ |
|
| 78 | 87 |
.toggle-sidebar { &, .no-sidebar & { display: none; }}
|
| 79 | 88 |
|
| 80 | 89 |
body.sidebar-footer {
|
| ... | ... |
@@ -5,6 +5,13 @@ |
| 5 | 5 |
height: image-height($img); |
| 6 | 6 |
} |
| 7 | 7 |
|
| 8 |
+@mixin shadow-box($border: #fff .5em solid, $shadow: rgba(#000, .15) 0 1px 4px, $border-radius: .3em) {
|
|
| 9 |
+ @include border-radius($border-radius); |
|
| 10 |
+ @include box-shadow($shadow); |
|
| 11 |
+ @include box-sizing(border-box); |
|
| 12 |
+ border: $border; |
|
| 13 |
+} |
|
| 14 |
+ |
|
| 8 | 15 |
@mixin selection($bg, $color: inherit, $text-shadow: none){
|
| 9 | 16 |
* {
|
| 10 | 17 |
&::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
|
| ... | ... |
@@ -44,19 +44,9 @@ article {
|
| 44 | 44 |
line-height: 1.3em; |
| 45 | 45 |
} |
| 46 | 46 |
img, video, .flash-video {
|
| 47 |
- max-width: 100%; |
|
| 48 |
- height: auto; |
|
| 49 |
- border: .5em solid #fff; |
|
| 50 |
- @include border-radius(.3em); |
|
| 51 |
- @include box-shadow(rgba(#000, .15) 0 1px 4px); |
|
| 52 |
- @include box-sizing(border-box); |
|
| 53 |
- display: block; |
|
| 54 |
- } |
|
| 55 |
- img {
|
|
| 56 |
- &.left { float: left; margin-right: 1.5em; }
|
|
| 57 |
- &.right { float: right; margin-left: 1.5em; }
|
|
| 58 |
- &.center { margin: 0 auto 1.5em; }
|
|
| 59 |
- &.left, &.right { margin-bottom: .8em; }
|
|
| 47 |
+ @extend .flex-content; |
|
| 48 |
+ @extend .basic-alignment; |
|
| 49 |
+ @include shadow-box; |
|
| 60 | 50 |
} |
| 61 | 51 |
video, .flash-video { margin: 0 auto 1.5em; }
|
| 62 | 52 |
video { display: block; width: 100%; }
|