mirror of
https://github.com/moparisthebest/www.moparscape.org
synced 2024-12-25 17:08:49 -05:00
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
This commit is contained in:
parent
23f05c1158
commit
806d27db13
@ -75,6 +75,15 @@ aside[role=sidebar] {
|
|||||||
@extend .group;
|
@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; }}
|
.toggle-sidebar { &, .no-sidebar & { display: none; }}
|
||||||
|
|
||||||
body.sidebar-footer {
|
body.sidebar-footer {
|
||||||
|
@ -5,6 +5,13 @@
|
|||||||
height: image-height($img);
|
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){
|
@mixin selection($bg, $color: inherit, $text-shadow: none){
|
||||||
* {
|
* {
|
||||||
&::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
|
&::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
|
||||||
|
@ -44,19 +44,9 @@ article {
|
|||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
}
|
}
|
||||||
img, video, .flash-video {
|
img, video, .flash-video {
|
||||||
max-width: 100%;
|
@extend .flex-content;
|
||||||
height: auto;
|
@extend .basic-alignment;
|
||||||
border: .5em solid #fff;
|
@include shadow-box;
|
||||||
@include border-radius(.3em);
|
|
||||||
@include box-shadow(rgba(#000, .15) 0 1px 4px);
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
&.left { float: left; margin-right: 1.5em; }
|
|
||||||
&.right { float: right; margin-left: 1.5em; }
|
|
||||||
&.center { margin: 0 auto 1.5em; }
|
|
||||||
&.left, &.right { margin-bottom: .8em; }
|
|
||||||
}
|
}
|
||||||
video, .flash-video { margin: 0 auto 1.5em; }
|
video, .flash-video { margin: 0 auto 1.5em; }
|
||||||
video { display: block; width: 100%; }
|
video { display: block; width: 100%; }
|
||||||
|
@ -20,6 +20,11 @@ aside[role=sidebar] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
img {
|
||||||
|
@extend .flex-content;
|
||||||
|
@extend .basic-alignment;
|
||||||
|
@include shadow-box($border: #fff .3em solid);
|
||||||
|
}
|
||||||
ul {
|
ul {
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
Loading…
Reference in New Issue
Block a user