From ebfe3584952d15b3eaf8dcaf1f67978d8e8e4e9f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Dec 2014 00:18:04 -0800 Subject: tweak label component padding --- scss/_labels.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_labels.scss b/scss/_labels.scss index 55d562f8a..4fec3bf18 100644 --- a/scss/_labels.scss +++ b/scss/_labels.scss @@ -4,7 +4,7 @@ .label { display: inline; - padding: .2em .6em .3em; + padding: .15em .4em; font-size: 75%; font-weight: bold; line-height: 1; -- cgit v1.2.3 From 2ade44a9ca89f2f8358c18aafb760993ffda9ac8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Dec 2014 00:33:36 -0800 Subject: inline-block on labels now instead of inline --- scss/_labels.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/_labels.scss b/scss/_labels.scss index 4fec3bf18..8503d2329 100644 --- a/scss/_labels.scss +++ b/scss/_labels.scss @@ -3,8 +3,8 @@ // -------------------------------------------------- .label { - display: inline; - padding: .15em .4em; + display: inline-block; + padding: .25em .4em; font-size: 75%; font-weight: bold; line-height: 1; -- cgit v1.2.3 From 795a5845619843040b5ab63ff7639fdf9ae86753 Mon Sep 17 00:00:00 2001 From: Gleb Mazovetskiy Date: Fri, 5 Dec 2014 10:53:43 +0000 Subject: Refactor grid_framework A more idiomatic refactoring of the grid framework * Use %-placeholder instead of generating a class name list * Use if expression * Remove loop-grid-columns --- scss/mixins/_grid-framework.scss | 88 +++++++++++++++++----------------------- 1 file changed, 37 insertions(+), 51 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index b75517d29..5ac62751f 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -3,79 +3,65 @@ // 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} { - position: relative; - // Prevent columns from collapsing when empty - min-height: 1px; - // Inner gutter via padding - padding-left: ($grid-gutter-width / 2); - padding-right: ($grid-gutter-width / 2); - } +%twbs-grid-column { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: ($grid-gutter-width / 2); + padding-right: ($grid-gutter-width / 2); } +%twbs-grid-column-float { + float: left +} -// [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; +@mixin make-grid-columns($columns: $grid-columns) { + @for $i from 1 through $columns { + .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i} { + @extend %twbs-grid-column; + } } } +@mixin float-grid-columns($class, $columns: $grid-columns) { + @for $i from 1 through $columns { + .col-#{$class}-#{$i} { + @extend %twbs-grid-column-float; + } + } +} -@mixin calc-grid-column($index, $class, $type) { +@mixin calc-grid-column($index, $class, $type, $columns: $grid-columns) { @if ($type == width) and ($index > 0) { .col-#{$class}-#{$index} { - width: percentage(($index / $grid-columns)); + width: percentage($index / $columns); } } - @if ($type == push) and ($index > 0) { + @if $type == push { .col-#{$class}-push-#{$index} { - left: percentage(($index / $grid-columns)); - } - } - @if ($type == push) and ($index == 0) { - .col-#{$class}-push-0 { - left: auto; + left: if($index > 0, percentage($index / $columns), auto); } } - @if ($type == pull) and ($index > 0) { + @if $type == pull { .col-#{$class}-pull-#{$index} { - right: percentage(($index / $grid-columns)); - } - } - @if ($type == pull) and ($index == 0) { - .col-#{$class}-pull-0 { - right: auto; + right: if($index > 0, percentage($index / $columns), auto); } } - @if ($type == offset) { + @if $type == offset { .col-#{$class}-offset-#{$index} { - margin-left: percentage(($index / $grid-columns)); + margin-left: percentage($index / $columns); } } } -// [converter] This is defined recursively in LESS, but Sass supports real loops -@mixin loop-grid-columns($columns, $class, $type) { +// Create grid for specific class +@mixin make-grid($class, $columns: $grid-columns) { + @include float-grid-columns($class); @for $i from 0 through $columns { - @include calc-grid-column($i, $class, $type); + @include calc-grid-column($i, $class, width, $columns); + @include calc-grid-column($i, $class, push, $columns); + @include calc-grid-column($i, $class, pull, $columns); + @include calc-grid-column($i, $class, offset, $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 -- cgit v1.2.3 From 5fefe06c3d9d3e568d030be2612e709119c6739e Mon Sep 17 00:00:00 2001 From: Gleb Mazovetskiy Date: Sun, 7 Dec 2014 14:52:44 +0000 Subject: Refactor grid-framework followup * Split up calc-grid-column, generate selectors in make-grid * Iterate over $grid-breakpoints and (pull, push, offset) --- scss/_variables.scss | 2 +- scss/mixins/_grid-framework.scss | 98 +++++++++++++++++++++------------------- 2 files changed, 52 insertions(+), 48 deletions(-) (limited to 'scss') 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/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 5ac62751f..3eecbae8b 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -3,65 +3,69 @@ // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. -%twbs-grid-column { - position: relative; - // Prevent columns from collapsing when empty - min-height: 1px; - // Inner gutter via padding - padding-left: ($grid-gutter-width / 2); - padding-right: ($grid-gutter-width / 2); -} - -%twbs-grid-column-float { - float: left -} - -@mixin make-grid-columns($columns: $grid-columns) { - @for $i from 1 through $columns { - .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i} { - @extend %twbs-grid-column; - } +// 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-right: ($grid-gutter-width / 2); } -} - -@mixin float-grid-columns($class, $columns: $grid-columns) { @for $i from 1 through $columns { - .col-#{$class}-#{$i} { - @extend %twbs-grid-column-float; + @each $breakpoint in $breakpoints { + .col-#{$breakpoint}-#{$i} { + @extend %grid-column; + } } } } -@mixin calc-grid-column($index, $class, $type, $columns: $grid-columns) { - @if ($type == width) and ($index > 0) { - .col-#{$class}-#{$index} { - width: percentage($index / $columns); - } - } - @if $type == push { - .col-#{$class}-push-#{$index} { - left: if($index > 0, percentage($index / $columns), auto); - } +// 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 { - .col-#{$class}-pull-#{$index} { - right: if($index > 0, percentage($index / $columns), 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 / $columns); + @each $modifier in (pull, push, offset) { + @for $i from 0 through $columns { + .col-#{$breakpoint}-#{$modifier}-#{$i} { + @include grid-column-modifier($modifier, $i, $columns) + } } } } -// Create grid for specific class -@mixin make-grid($class, $columns: $grid-columns) { - @include float-grid-columns($class); - @for $i from 0 through $columns { - @include calc-grid-column($i, $class, width, $columns); - @include calc-grid-column($i, $class, push, $columns); - @include calc-grid-column($i, $class, pull, $columns); - @include calc-grid-column($i, $class, offset, $columns); +@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); +} + +// 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); } } -- cgit v1.2.3 From 94eecb84bf4f8f4309e42df54d4a827ef4031759 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 8 Dec 2014 20:36:33 -0800 Subject: _progress.scss: remove unnecessary @-webkit-keyframes Autoprefixer already takes care of this for us. --- scss/_progress.scss | 5 ----- 1 file changed, 5 deletions(-) (limited to 'scss') diff --git a/scss/_progress.scss b/scss/_progress.scss index ccfda15f5..47acff51a 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -9,11 +9,6 @@ // Progress animations // -@-webkit-keyframes progress-bar-stripes { - from { background-position: $line-height-computed 0; } - to { background-position: 0 0; } -} - @keyframes progress-bar-stripes { from { background-position: $line-height-computed 0; } to { background-position: 0 0; } -- cgit v1.2.3 From b59abb40f7a49125d61fd8901baaf4ccc48d4ef7 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 8 Dec 2014 22:00:05 -0800 Subject: remove explicit vendor prefixes from _gradients.scss --- scss/mixins/_gradients.scss | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) (limited to 'scss') 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 -- cgit v1.2.3 From 86f834e356d495d4645e74b07bd7d62267d0eede Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 8 Dec 2014 22:05:50 -0800 Subject: remove explicit vendor prefixing from _card.scss --- scss/_card.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index cbbbde38c..6095f434c 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -181,11 +181,7 @@ // .card-columns { - -webkit-column-count: 3; - -moz-column-count: 3; column-count: 3; - -webkit-column-gap: 1rem; - -moz-column-gap: 1rem; column-gap: 1rem; .card { -- cgit v1.2.3