diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_labels.scss | 4 | ||||
| -rw-r--r-- | scss/_variables.scss | 2 | ||||
| -rw-r--r-- | scss/mixins/_gradients.scss | 19 | ||||
| -rw-r--r-- | scss/mixins/_grid-framework.scss | 104 |
4 files changed, 53 insertions, 76 deletions
diff --git a/scss/_labels.scss b/scss/_labels.scss index 55d562f8a..8503d2329 100644 --- a/scss/_labels.scss +++ b/scss/_labels.scss @@ -3,8 +3,8 @@ // -------------------------------------------------- .label { - display: inline; - padding: .2em .6em .3em; + display: inline-block; + padding: .25em .4em; font-size: 75%; font-weight: bold; line-height: 1; diff --git a/scss/_variables.scss b/scss/_variables.scss index 5f41979f0..8f9e26d68 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -294,7 +294,7 @@ $screen-xs-max: ($screen-sm-min - .1); //== Grid system // //## Define your custom responsive grid. - +$grid-breakpoints: (xs sm md lg xl); //** Number of columns in the grid. $grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index 05118c8b6..9eb31e3ba 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -5,9 +5,7 @@ // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9 and below. @mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { - background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+ - background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12 - background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down } @@ -17,40 +15,29 @@ // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9 and below. @mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { - background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+ - background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Opera 12 - background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down } @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { background-repeat: repeat-x; - background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+ - background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12 - background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-image: linear-gradient($deg, $start-color, $end-color); } @mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { - background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); - background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback } @mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { - background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color); - background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color); background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback } @mixin gradient-radial($inner-color: #555, $outer-color: #333) { - background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color); background-image: radial-gradient(circle, $inner-color, $outer-color); background-repeat: no-repeat; } @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) { - background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); - background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); }
\ No newline at end of file diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index b75517d29..3eecbae8b 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -3,79 +3,69 @@ // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. -// [converter] This is defined recursively in LESS, but Sass supports real loops -@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") { - @for $i from (1 + 1) through $grid-columns { - $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}"; - } - #{$list} { +// Common properties for all breakpoints +@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) { + %grid-column { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding - padding-left: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); padding-right: ($grid-gutter-width / 2); } -} - - -// [converter] This is defined recursively in LESS, but Sass supports real loops -@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { - @for $i from (1 + 1) through $grid-columns { - $list: "#{$list}, .col-#{$class}-#{$i}"; - } - #{$list} { - float: left; + @for $i from 1 through $columns { + @each $breakpoint in $breakpoints { + .col-#{$breakpoint}-#{$i} { + @extend %grid-column; + } + } } } - -@mixin calc-grid-column($index, $class, $type) { - @if ($type == width) and ($index > 0) { - .col-#{$class}-#{$index} { - width: percentage(($index / $grid-columns)); - } - } - @if ($type == push) and ($index > 0) { - .col-#{$class}-push-#{$index} { - left: percentage(($index / $grid-columns)); - } - } - @if ($type == push) and ($index == 0) { - .col-#{$class}-push-0 { - left: auto; - } - } - @if ($type == pull) and ($index > 0) { - .col-#{$class}-pull-#{$index} { - right: percentage(($index / $grid-columns)); - } +// Breakpoint-specific properties +@mixin make-grid($breakpoint, $columns: $grid-columns) { + // Work around cross-media @extend (https://github.com/sass/sass/issues/1050) + %grid-column-float-#{$breakpoint} { + float: left; } - @if ($type == pull) and ($index == 0) { - .col-#{$class}-pull-0 { - right: auto; + @for $i from 1 through $columns { + .col-#{$breakpoint}-#{$i} { + @extend %grid-column-float-#{$breakpoint}; + @include grid-column-width($i, $columns); } } - @if ($type == offset) { - .col-#{$class}-offset-#{$index} { - margin-left: percentage(($index / $grid-columns)); + @each $modifier in (pull, push, offset) { + @for $i from 0 through $columns { + .col-#{$breakpoint}-#{$modifier}-#{$i} { + @include grid-column-modifier($modifier, $i, $columns) + } } } } -// [converter] This is defined recursively in LESS, but Sass supports real loops -@mixin loop-grid-columns($columns, $class, $type) { - @for $i from 0 through $columns { - @include calc-grid-column($i, $class, $type); - } +@mixin grid-column-width($index, $columns) { + width: percentage($index / $columns); +} + +@mixin grid-column-push($index, $columns) { + left: if($index > 0, percentage($index / $columns), auto); +} + +@mixin grid-column-pull($index, $columns) { + right: if($index > 0, percentage($index / $columns), auto); } +@mixin grid-column-offset($index, $columns) { + margin-left: percentage($index / $columns); +} -// Create grid for specific class -@mixin make-grid($class) { - @include float-grid-columns($class); - @include loop-grid-columns($grid-columns, $class, width); - @include loop-grid-columns($grid-columns, $class, pull); - @include loop-grid-columns($grid-columns, $class, push); - @include loop-grid-columns($grid-columns, $class, offset); -}
\ No newline at end of file +// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626) +@mixin grid-column-modifier($type, $index, $columns) { + @if $type == push { + @include grid-column-push($index, $columns); + } @else if $type == pull { + @include grid-column-pull($index, $columns); + } @else if $type == offset { + @include grid-column-offset($index, $columns); + } +} |