rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'v4' into scss-lint

Browse Source 
Conflicts:
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	scss/_card.scss
This commit is contained in:
Mark Otto 2014-12-11 12:07:09 -08:00
commit 2edc779391
17 changed files with 92 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
dist/css/bootstrap.css vendored
View File

@ -3759,8 +3759,8 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
}
.label {
display: inline;
padding: .2em .6em .3em;
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: bold;
line-height: 1;
@ -4074,16 +4074,13 @@ a.badge:hover, a.badge:focus {
.progress-striped[value]::-webkit-progress-value {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-webkit-background-size: 1 1;
background-size: 1 1;
}
.progress-striped[value]::-moz-progress-bar {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 1 1;
}
@ -4862,9 +4859,9 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
opacity: .5;
}
.carousel-control.left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
background-repeat: repeat-x;
@ -4872,9 +4869,9 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
.carousel-control.right {
right: 0;
left: auto;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
background-repeat: repeat-x;

2
dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
docs/_data/nav.yml
View File

@ -137,11 +137,11 @@
- title: Sticky footer with navbar
- title: Offcanvas
# - title: Learn & Extend
# pages:
# - title: Approach
# - title: Icon fonts
# - title: Accessibility
- title: Extend
pages:
- title: Approach
- title: Icon fonts
# - title: Accessibility
- title: About
pages:

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/docs.min.css.map
View File

File diff suppressed because one or more lines are too long

2
docs/assets/scss/docs.scss
View File

@ -609,12 +609,10 @@ body {
float: none;
height: auto;
padding: 2rem 1.25rem;
/*padding: 20px;*/
font-size: 20px;
font-weight: 500;
line-height: 1;
color: #fff;
/*border-bottom: 1px solid rgba(255,255,255,.1);*/
}
.bs-docs-sidebar-brand:hover,
.bs-docs-sidebar-brand:focus {

5
docs/components/label.md
View File

@ -30,8 +30,3 @@ Add any of the below mentioned modifier classes to change the appearance of a la
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
{% endexample %}
<div class="bs-callout bs-callout-info">
<h4>Have tons of labels?</h4>
<p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
</div>

15
docs/dist/css/bootstrap.css vendored
View File

@ -3759,8 +3759,8 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
}
.label {
display: inline;
padding: .2em .6em .3em;
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: bold;
line-height: 1;
@ -3985,7 +3985,6 @@ a.badge:hover, a.badge:focus {
background-position: 0 0;
}
}
@-o-keyframes progress-bar-stripes {
from {
background-position: 1 0;
@ -3995,7 +3994,6 @@ a.badge:hover, a.badge:focus {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 1 0;
@ -4074,16 +4072,13 @@ a.badge:hover, a.badge:focus {
.progress-striped[value]::-webkit-progress-value {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-webkit-background-size: 1 1;
background-size: 1 1;
}
.progress-striped[value]::-moz-progress-bar {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 1 1;
}
@ -4862,9 +4857,9 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
opacity: .5;
}
.carousel-control.left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
background-repeat: repeat-x;
@ -4872,9 +4867,9 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
.carousel-control.right {
right: 0;
left: auto;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
background-repeat: repeat-x;

6
docs/dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

6
docs/dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
docs/extend/approach.md Normal file
View File

@ -0,0 +1,5 @@
---
layout: page
title: Approach
---

5
docs/extend/icon-fonts.md Normal file
View File

@ -0,0 +1,5 @@
---
layout: page
title: Icon fonts
---

4
scss/_labels.scss
View File

@ -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;

2
scss/_variables.scss
View File

@ -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.

19
scss/mixins/_gradients.scss
View File

@ -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);
}

104
scss/mixins/_grid-framework.scss
View File

@ -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);
}
@for $i from 1 through $columns {
@each $breakpoint in $breakpoints {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column;
}
}
}
}
// [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} {
// 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;
}
}
@mixin calc-grid-column($index, $class, $type) {
@if ($type == width) and ($index > 0) {
.col-#{$class}-#{$index} {
width: percentage(($index / $grid-columns));
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column-float-#{$breakpoint};
@include grid-column-width($i, $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));
}
}
@if ($type == pull) and ($index == 0) {
.col-#{$class}-pull-0 {
right: auto;
}
}
@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);
}
// 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);
}
@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);
}
}