mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00
Code Issues Releases Wiki Activity

Merge branch 'v4-dev' into v4-navbars

Browse Source
This commit is contained in:
Mark Otto
2016-09-15 10:20:57 -07:00
parent 15f522fd4a 63129112bb
commit 64dcb8b507
154 changed files with 21154 additions and 1028 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/.scss-lint.yml
View File

@@ -89,7 +89,7 @@ linters:
enabled: true
ImportantRule:
enabled: true
enabled: false
ImportPath:
enabled: true

6
scss/_alert.scss
View File

@@ -26,13 +26,13 @@
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: ($alert-padding + 20px);
padding-right: ($alert-padding * 2);
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
top: -.125rem;
right: -$alert-padding;
color: inherit;
}
}

5
scss/_card.scss
View File

@@ -70,6 +70,7 @@
.card-header {
@include clearfix;
padding: $card-spacer-y $card-spacer-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
@@ -168,7 +169,7 @@
// Card image
.card-img {
// margin: -1.325rem;
@include border-radius(.25rem);
@include border-radius($card-border-radius-inner);
}
.card-img-overlay {
position: absolute;
@@ -314,7 +315,7 @@
column-gap: $card-columns-sm-up-column-gap;
.card {
display: inline-block;
display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let them exceed the column width
}
}

13
scss/_custom-forms.scss
View File

@@ -11,7 +11,7 @@
.custom-control {
position: relative;
display: inline;
display: inline-block;
padding-left: $custom-control-gutter;
cursor: pointer;
@@ -61,7 +61,7 @@
.custom-control-indicator {
position: absolute;
top: .0625rem;
top: .25rem;
left: 0;
display: block;
width: $custom-control-indicator-size;
@@ -117,13 +117,8 @@
.custom-controls-stacked {
.custom-control {
display: inline;
&::after {
display: block;
margin-bottom: $custom-control-spacer-y;
content: "";
}
float: left;
clear: left;
+ .custom-control {
margin-left: 0;

6
scss/_input-group.scss
View File

@@ -90,18 +90,18 @@
text-align: center;
background-color: $input-group-addon-bg;
border: $input-btn-border-width solid $input-group-addon-border-color;
@include border-radius($border-radius);
@include border-radius($input-border-radius);
// Sizing
&.form-control-sm {
padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm;
@include border-radius($border-radius-sm);
@include border-radius($input-border-radius-sm);
}
&.form-control-lg {
padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg;
@include border-radius($border-radius-lg);
@include border-radius($input-border-radius-lg);
}
// scss-lint:disable QualifyingElement

8
scss/_media.scss
View File

@@ -1,7 +1,6 @@
@if $enable-flex {
.media {
display: flex;
margin-bottom: $spacer;
}
.media-body {
flex: 1;
@@ -13,13 +12,6 @@
align-self: flex-end;
}
} @else {
.media {
margin-top: $media-margin-top;
&:first-child {
margin-top: 0;
}
}
.media,
.media-body {
overflow: hidden;

2
scss/_modal.scss
View File

@@ -1,7 +1,7 @@
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and shit
// .modal-content - actual modal w/ bg and corners and stuff
// Kill the scroll on the body

59
scss/_navbar.scss
View File

@@ -116,10 +116,13 @@
// Bootstrap JavaScript plugin.
.navbar-toggler {
width: 2.5em;
height: 2em;
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
font-size: $navbar-toggler-font-size;
line-height: 1;
background: none;
background: transparent no-repeat center center;
background-size: 24px 24px;
border: $border-width solid transparent;
@include border-radius($navbar-toggler-border-radius);
@@ -207,6 +210,10 @@
}
}
.navbar-toggler {
background-image: $navbar-light-toggler-bg;
}
.navbar-divider {
background-color: rgba(0,0,0,.075);
}
@@ -242,7 +249,57 @@
}
}
.navbar-toggler {
background-image: $navbar-dark-toggler-bg;
}
.navbar-divider {
background-color: rgba(255,255,255,.075);
}
}
// Navbar toggleable
//
// Custom override for collapse plugin in navbar.
.navbar-toggleable {
&-xs {
@include clearfix;
@include media-breakpoint-down(xs) {
.navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@include media-breakpoint-up(sm) {
display: block !important;
}
}
&-sm {
@include clearfix;
@include media-breakpoint-down(sm) {
.navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@include media-breakpoint-up(md) {
display: block !important;
}
}
&-md {
@include clearfix;
@include media-breakpoint-down(md) {
.navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@include media-breakpoint-up(lg) {
display: block !important;
}
}
}

2
scss/_print.scss
View File

@@ -1,4 +1,4 @@
// scss-lint:disable ImportantRule, QualifyingElement
// scss-lint:disable QualifyingElement
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css

20
scss/_progress.scss
View File

@@ -26,7 +26,7 @@
// Reset the default appearance
appearance: none;
// Set overall border radius
@include border-radius($border-radius);
@include border-radius($progress-border-radius);
}
// Filled-in portion of the bar
@@ -37,30 +37,30 @@
}
.progress[value]::-moz-progress-bar {
background-color: $progress-bar-color;
@include border-left-radius($border-radius);
@include border-left-radius($progress-border-radius);
}
.progress[value]::-webkit-progress-value {
background-color: $progress-bar-color;
@include border-left-radius($border-radius);
@include border-left-radius($progress-border-radius);
}
// Tweaks for full progress bar
.progress[value="100"]::-moz-progress-bar {
@include border-right-radius($border-radius);
@include border-right-radius($progress-border-radius);
}
.progress[value="100"]::-webkit-progress-value {
@include border-right-radius($border-radius);
@include border-right-radius($progress-border-radius);
}
// Unfilled portion of the bar
.progress[value]::-webkit-progress-bar {
background-color: $progress-bg;
@include border-radius($border-radius);
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
}
base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
.progress[value] {
background-color: $progress-bg;
@include border-radius($border-radius);
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
}
@@ -68,7 +68,7 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
@media screen and (min-width:0\0) {
.progress {
background-color: $progress-bg;
@include border-radius($border-radius);
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
}
.progress-bar {
@@ -76,10 +76,10 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
height: $spacer-y;
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
background-color: $progress-bar-color;
@include border-left-radius($border-radius);
@include border-left-radius($progress-border-radius);
}
.progress[width="100%"] {
@include border-right-radius($border-radius);
@include border-right-radius($progress-border-radius);
}
}

2
scss/_reboot.scss
View File

@@ -1,4 +1,4 @@
// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty
// scss-lint:disable QualifyingElement, DuplicateProperty
// Reboot
//

4
scss/_tables.scss
View File

@@ -101,7 +101,7 @@
// Inverse styles
//
// Same table markup, but inverted color scheme—dark background and light text.
// Same table markup, but inverted color scheme: dark background and light text.
.thead-inverse {
th {
@@ -184,7 +184,6 @@
}
}
// scss-lint:disable ImportantRule
tr {
float: left;
@@ -194,5 +193,4 @@
border: $table-border-width solid $table-border-color;
}
}
// scss-lint:enable ImportantRule
}

14
scss/_variables.scss
View File

@@ -158,7 +158,7 @@ $grid-gutter-width: 30px !default;
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
@@ -327,10 +327,10 @@ $input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-bg-focus: $input-bg;
$input-bg-focus: $input-bg !default;
$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-focus: $input-color;
$input-box-shadow-focus: $input-box-shadow, 0 0 8px rgba(102,175,233,.6) !default;
$input-color-focus: $input-color !default;
$input-color-placeholder: #999 !default;
@@ -495,11 +495,13 @@ $navbar-dark-color: rgba(255,255,255,.5) !default;
$navbar-dark-hover-color: rgba(255,255,255,.75) !default;
$navbar-dark-active-color: rgba(255,255,255,1) !default;
$navbar-dark-disabled-color: rgba(255,255,255,.25) !default;
$navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
$navbar-light-color: rgba(0,0,0,.3) !default;
$navbar-light-hover-color: rgba(0,0,0,.6) !default;
$navbar-light-active-color: rgba(0,0,0,.8) !default;
$navbar-light-disabled-color: rgba(0,0,0,.15) !default;
$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
// Navs
@@ -589,7 +591,7 @@ $card-spacer-y: .75rem !default;
$card-border-width: 1px !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba(0,0,0,.125) !default;
$card-border-radius-inner: $card-border-radius !default;
$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg: #f5f5f5 !default;
$card-bg: #fff !default;
@@ -693,7 +695,7 @@ $modal-sm: 300px !default;
//
// Define alert colors, border radius, and padding.
$alert-padding: 15px !default;
$alert-padding: 1rem !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: bold !default;
$alert-border-width: $border-width !default;

44
scss/bootstrap-grid.scss vendored
View File

@@ -8,53 +8,13 @@
// Variables
//
// Grid breakpoints
//
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 544px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
) !default;
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 576px,
md: 720px,
lg: 940px,
xl: 1140px
) !default;
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1.875rem !default; // 30px
@import "custom";
@import "variables";
//
// Grid mixins
//
@import "custom";
@import "variables";
@import "mixins/clearfix";
@import "mixins/breakpoints";
@import "mixins/grid-framework";

2
scss/bootstrap.scss vendored
View File

@@ -1,5 +1,5 @@
/*!
* Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
* Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com)
* Copyright 2011-2016 The Bootstrap Authors
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

13
scss/mixins/_forms.scss
View File

@@ -7,14 +7,8 @@
// Color the label and help text
.form-control-feedback,
.form-control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
&.radio label,
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label,
.form-check-label,
.form-check-inline,
.custom-control {
color: $color;
}
@@ -60,8 +54,7 @@
background-color: $input-bg-focus;
border-color: $input-border-focus;
outline: none;
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
@include box-shadow($shadow);
@include box-shadow($input-box-shadow-focus);
}
}

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

@@ -30,9 +30,22 @@
}
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
@if $enable-flex {
.col-#{$breakpoint} {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
min-height: 1px;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@include make-col($i, $columns, $gutter);
@include make-col($i, $columns);
}
}

4
scss/mixins/_grid.scss
View File

@@ -33,7 +33,7 @@
margin-right: ($gutter / -2);
}
@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
@mixin make-col-ready($gutter: $grid-gutter-width) {
position: relative;
min-height: 1px; // Prevent collapsing
padding-right: ($gutter / 2);
@@ -47,7 +47,7 @@
}
}
@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
@mixin make-col($size, $columns: $grid-columns) {
@if $enable-flex {
flex: 0 0 percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out

2
scss/mixins/_text-emphasis.scss
View File

@@ -6,7 +6,7 @@
}
a#{$parent} {
@include hover-focus {
color: darken($color, 10%);
color: darken($color, 10%) !important;
}
}
}

6
scss/utilities/_background.scss
View File

@@ -2,10 +2,6 @@
// Contextual backgrounds
//
.bg-inverse {
background-color: $brand-inverse;
}
.bg-faded {
background-color: $gray-lightest;
}
@@ -19,3 +15,5 @@
@include bg-variant('.bg-warning', $brand-warning);
@include bg-variant('.bg-danger', $brand-danger);
@include bg-variant('.bg-inverse', $brand-inverse);

4
scss/utilities/_text.scss
View File

@@ -44,6 +44,10 @@
@include text-emphasis-variant('.text-danger', $brand-danger);
// Font color
@include text-emphasis-variant('.text-gray-dark', $gray-dark);
// Misc
.text-hide {

2
scss/utilities/_visibility.scss
View File

@@ -1,5 +1,3 @@
// scss-lint:disable ImportantRule
//
// Visibility utilities
//