mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 14:30:46 +02:00
Code Issues Releases Wiki Activity

Merge branch 'v4-dev' into v4-navbars

Browse Source
This commit is contained in:
Mark Otto
2016-10-16 19:46:47 -07:00
parent 05bdecd0b0 6d6538fc81
commit b4cdccba84
310 changed files with 33865 additions and 20207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
scss/.scss-lint.yml
View File

@@ -3,6 +3,9 @@ scss_files:
- "**/*.scss"
- "docs/assets/scss/**/*.scss"
exclude:
- "scss/_normalize.scss"
plugin_directories: ['.scss-linters']
# List of gem names to load custom linters from (make sure they are already
@@ -89,7 +92,7 @@ linters:
enabled: true
ImportantRule:
enabled: true
enabled: false
ImportPath:
enabled: true
@@ -457,7 +460,7 @@ linters:
Shorthand:
enabled: true
allowed_shorthands: [1, 2, 3]
allowed_shorthands: [1, 2, 3, 4]
SingleLinePerProperty:
enabled: false

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

15
scss/_animation.scss
View File

@@ -9,12 +9,21 @@
.collapse {
display: none;
&.in {
display: block;
}
// tr&.in { display: table-row; }
// tbody&.in { display: table-row-group; }
}
tr {
&.collapse.in {
display: table-row;
}
}
tbody {
&.collapse.in {
display: table-row-group;
}
}
.collapsing {

1
scss/_button-group.scss
View File

@@ -10,6 +10,7 @@
> .btn {
position: relative;
float: left;
margin-bottom: 0;
// Bring the "active" button to the front
&:focus,

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
}
}

17
scss/_custom-forms.scss
View File

@@ -2,7 +2,7 @@
// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
// http://useiconic.com/open
// https://useiconic.com/open
// Checkboxes and radios
@@ -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;
@@ -142,6 +137,8 @@
.custom-select {
display: inline-block;
max-width: 100%;
$select-border-width: ($border-width * 2);
height: calc(#{$input-height} - #{$select-border-width});
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
padding-right: $custom-select-padding-x \9;
color: $custom-select-color;

1
scss/_dropdown.scss
View File

@@ -141,6 +141,7 @@
.dropdown-header {
display: block;
padding: $dropdown-padding-y $dropdown-item-padding-x;
margin-bottom: 0; // for use with heading elements
font-size: $font-size-sm;
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a

22
scss/_forms.scss
View File

@@ -18,8 +18,16 @@
background-image: none;
background-clip: padding-box;
border: $input-btn-border-width solid $input-border-color;
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius);
@if $enable-rounded {
// Manually use the if/else instead of the mixin to account for iOS override
border-radius: $input-border-radius;
} @else {
// Otherwise undo the iOS default
border-radius: 0;
}
@include box-shadow($input-box-shadow);
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
@@ -58,7 +66,8 @@
select.form-control {
&:not([size]):not([multiple]) {
height: $input-height;
$select-border-width: ($border-width * 2);
height: calc(#{$input-height} - #{$select-border-width});
}
&:focus::-ms-value {
@@ -124,12 +133,11 @@ select.form-control {
// horizontal form layout.
.form-control-static {
min-height: $input-height;
// Size it appropriately next to real form controls
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
// Remove default margin from `p`
margin-bottom: 0;
line-height: $input-line-height;
border: solid transparent;
border-width: 1px 0;
&.form-control-sm,
&.form-control-lg {
@@ -239,6 +247,7 @@ select.form-control-lg {
}
&.disabled {
color: $text-muted;
cursor: $cursor-disabled;
}
}
@@ -321,6 +330,7 @@ select.form-control-lg {
.input-group {
display: inline-table;
width: auto;
vertical-align: middle;
.input-group-addon,

13
scss/_images.scss
View File

@@ -6,13 +6,9 @@
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid {
@include img-fluid();
@include img-fluid;
}
// Rounded corners
.img-rounded {
@include border-radius($border-radius-lg);
}
// Image thumbnails
.img-thumbnail {
@@ -24,12 +20,7 @@
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide
@include img-fluid(inline-block);
}
// Perfect circle
.img-circle {
border-radius: 50%;
@include img-fluid;
}
//

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

2
scss/_list-group.scss
View File

@@ -70,6 +70,8 @@
.list-group-flush {
.list-group-item {
border-right: 0;
border-left: 0;
border-radius: 0;
}
}

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/_mixins.scss
View File

@@ -51,4 +51,4 @@
// @import "mixins/navbar-align";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "mixins/pulls";
@import "mixins/float";

6
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
@@ -22,7 +22,9 @@
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
-webkit-overflow-scrolling: touch;
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
// See also https://github.com/twbs/bootstrap/issues/17695
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {

81
scss/_navbar.scss
View File

@@ -105,10 +105,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);
@@ -117,28 +120,6 @@
}
}
// scss-lint:disable ImportantRule
// Custom override for
.navbar-toggleable {
&-xs {
@include media-breakpoint-up(sm) {
display: block !important;
}
}
&-sm {
@include media-breakpoint-up(md) {
display: block !important;
}
}
&-md {
@include media-breakpoint-up(lg) {
display: block !important;
}
}
}
// scss-lint:enable ImportantRule
// Navigation
//
// Custom navbar navigation built on the base `.nav` styles.
@@ -193,6 +174,10 @@
}
}
.navbar-toggler {
background-image: $navbar-light-toggler-bg;
}
.navbar-divider {
background-color: rgba(0,0,0,.075);
}
@@ -228,7 +213,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;
}
}
}

104
scss/_normalize.scss
View File

@@ -1,14 +1,16 @@
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
//
// 1. Change the default font family in all browsers (opinionated).
// 2. Prevent adjustments of font size after orientation changes in IE and iOS.
// 2. Correct the line height in all browsers.
// 3. Prevent adjustments of font size after orientation changes in IE and iOS.
//
html {
font-family: sans-serif; // 1
-ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
line-height: 1.15; // 2
-ms-text-size-adjust: 100%; // 3
-webkit-text-size-adjust: 100%; // 3
}
//
@@ -76,7 +78,7 @@ progress {
// 1. Add the correct display in IE.
//
template, // 2
template, // 1
[hidden] {
display: none;
}
@@ -85,11 +87,13 @@ template, // 2
// ==========================================================================
//
// Remove the gray background on active links in IE 10.
// 1. Remove the gray background on active links in IE 10.
// 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
//
a {
background-color: transparent;
background-color: transparent; // 1
-webkit-text-decoration-skip: objects; // 2
}
//
@@ -248,14 +252,17 @@ hr {
// ==========================================================================
//
// Change font properties to `inherit` in all browsers (opinionated).
// 1. Change font properties to `inherit` in all browsers (opinionated).
// 2. Remove the margin in Firefox and Safari.
//
button,
input,
optgroup,
select,
textarea {
font: inherit;
font: inherit; // 1
margin: 0; // 2
}
//
@@ -269,30 +276,16 @@ optgroup {
//
// Show the overflow in IE.
// 1. Show the overflow in Edge.
// 2. Show the overflow in Edge, Firefox, and IE.
//
button,
input, // 1
select { // 2
input { // 1
overflow: visible;
}
//
// Remove the margin in Safari.
// 1. Remove the margin in Firefox and Safari.
//
button,
input,
select,
textarea { // 1
margin: 0;
}
//
// Remove the inheritence of text transform in Edge, Firefox, and IE.
// 1. Remove the inheritence of text transform in Firefox.
// Remove the inheritance of text transform in Edge, Firefox, and IE.
// 1. Remove the inheritance of text transform in Firefox.
//
button,
@@ -300,29 +293,10 @@ select { // 1
text-transform: none;
}
//
// Change the cursor in all browsers (opinionated).
//
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
//
// Restore the default cursor to disabled elements unset by the previous rule.
//
[disabled] {
cursor: default;
}
//
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS.
// 2. Correct the inability to style clickable types in iOS and Safari.
//
button,
@@ -337,8 +311,10 @@ html [type="button"], // 1
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
@@ -347,7 +323,9 @@ input::-moz-focus-inner {
//
button:-moz-focusring,
input:-moz-focusring {
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
@@ -406,19 +384,39 @@ textarea {
}
//
// Correct the odd appearance of search inputs in Chrome and Safari.
// 1. Correct the odd appearance in Chrome and Safari.
// 2. Correct the outline style in Safari.
//
[type="search"] {
-webkit-appearance: textfield;
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
}
//
// Remove the inner padding and cancel buttons in Chrome on OS X and
// Safari on OS X.
// Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
//
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// Correct the text style of placeholders in Chrome, Edge, and Safari.
//
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//
::-webkit-file-upload-button {
-webkit-appearance: button; // 1
font: inherit; // 2
}

130
scss/_popover.scss
View File

@@ -5,7 +5,7 @@
z-index: $zindex-popover;
display: block;
max-width: $popover-max-width;
padding: 1px;
padding: $popover-inner-padding;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
@@ -25,19 +25,22 @@
&.bs-tether-element-attached-bottom {
margin-top: -$popover-arrow-width;
.popover-arrow {
bottom: -$popover-arrow-outer-width;
&::before,
&::after {
left: 50%;
border-bottom-width: 0;
}
&::before {
bottom: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-top-color: $popover-arrow-outer-color;
border-bottom-width: 0;
&::after {
bottom: 1px;
margin-left: -$popover-arrow-width;
content: "";
border-top-color: $popover-arrow-color;
border-bottom-width: 0;
}
}
&::after {
bottom: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
border-top-color: $popover-arrow-color;
}
}
@@ -45,19 +48,22 @@
&.bs-tether-element-attached-left {
margin-left: $popover-arrow-width;
.popover-arrow {
&::before,
&::after {
top: 50%;
border-left-width: 0;
}
&::before {
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color;
border-left-width: 0;
&::after {
bottom: -$popover-arrow-width;
left: 1px;
content: "";
border-right-color: $popover-arrow-color;
border-left-width: 0;
}
}
&::after {
left: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-right-color: $popover-arrow-color;
}
}
@@ -65,19 +71,34 @@
&.bs-tether-element-attached-top {
margin-top: $popover-arrow-width;
.popover-arrow {
top: -$popover-arrow-outer-width;
&::before,
&::after {
left: 50%;
margin-left: -$popover-arrow-outer-width;
border-top-width: 0;
}
&::before {
top: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-bottom-color: $popover-arrow-outer-color;
&::after {
top: 1px;
margin-left: -$popover-arrow-width;
content: "";
border-top-width: 0;
border-bottom-color: $popover-arrow-color;
}
}
&::after {
top: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
border-bottom-color: $popover-title-bg;
}
// This will remove the popover-title's border just below the arrow
.popover-title::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 20px;
margin-left: -10px;
content: "";
border-bottom: 1px solid $popover-title-bg;
}
}
@@ -85,19 +106,22 @@
&.bs-tether-element-attached-right {
margin-left: -$popover-arrow-width;
.popover-arrow {
&::before,
&::after {
top: 50%;
border-right-width: 0;
}
&::before {
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-width: 0;
border-left-color: $popover-arrow-outer-color;
&::after {
right: 1px;
bottom: -$popover-arrow-width;
content: "";
border-right-width: 0;
border-left-color: $popover-arrow-color;
}
}
&::after {
right: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-left-color: $popover-arrow-color;
}
}
}
@@ -112,6 +136,10 @@
border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
$offset-border-width: ($border-width / $font-size-root);
@include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0);
&:empty {
display: none;
}
}
.popover-content {
@@ -123,21 +151,21 @@
//
// .popover-arrow is outer, .popover-arrow::after is inner
.popover-arrow {
&,
&::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover::before,
.popover::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover-arrow {
.popover::before {
content: "";
border-width: $popover-arrow-outer-width;
}
.popover-arrow::after {
.popover::after {
content: "";
border-width: $popover-arrow-width;
}

12
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
@@ -14,7 +14,10 @@
*::before,
*::after,
*::first-letter,
*::first-line {
p::first-line,
div::first-line,
blockquote::first-line,
li::first-line {
// Bootstrap specific; comment out `color` and `background`
//color: #000 !important; // Black prints faster:
// http://www.sanbeiji.com/archives/953
@@ -45,9 +48,12 @@
//a[href^="#"]::after,
//a[href^="javascript:"]::after {
// content: "";
// content: "";
//}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px

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

26
scss/_reboot.scss
View File

@@ -1,4 +1,4 @@
// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty
// scss-lint:disable QualifyingElement, DuplicateProperty
// Reboot
//
@@ -15,7 +15,7 @@
//
// Heads up! This reset may cause conflicts with some third-party widgets. For
// recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing.
// https://getbootstrap.com/getting-started/#third-box-sizing.
//
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
@@ -33,15 +33,15 @@ html {
// Make viewport responsive
//
// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
// Eventually @viewport will replace <meta name="viewport">.
//
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
// and the fix for that involves a snippet of JavaScript to sniff the user agent
// and apply some conditional CSS.
//
// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
//
// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
// `.class-name { @import "bootstrap"; }`).
@@ -171,12 +171,13 @@ a {
}
}
// And undo these styles for placeholder links/named anchors (without href).
// And undo these styles for placeholder links/named anchors (without href)
// which have not been made explicitly keyboard-focusable (without tabindex).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]) {
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
@@ -246,9 +247,9 @@ img {
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
// However, they DO support removing the click delay via `touch-action: manipulation`.
// See:
// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
// * http://caniuse.com/#feat=css-touch-action
// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
a,
area,
@@ -311,14 +312,9 @@ input,
button,
select,
textarea {
// Remove all `margin`s so our classes don't have to do it themselves.
margin: 0;
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
// properly inherited. However, `line-height` isn't addressed there. Using this
// ensures we don't need to unnecessarily redeclare the global font stack.
// properly inherited. However, `line-height` isn't inherited there.
line-height: inherit;
// iOS adds rounded borders by default
border-radius: 0;
}
input[type="radio"],

6
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 {
@@ -143,7 +143,7 @@
.table-responsive {
display: block;
width: 100%;
min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
min-height: 0%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
overflow-x: auto;
// TODO: find out if we need this still.
@@ -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
}

27
scss/_tooltip.scss
View File

@@ -18,10 +18,11 @@
padding: $tooltip-arrow-width 0;
margin-top: -$tooltip-margin;
.tooltip-arrow {
.tooltip-inner::before {
bottom: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
@@ -31,10 +32,11 @@
padding: 0 $tooltip-arrow-width;
margin-left: $tooltip-margin;
.tooltip-arrow {
.tooltip-inner::before {
top: 50%;
left: 0;
margin-top: -$tooltip-arrow-width;
content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: $tooltip-arrow-color;
}
@@ -44,10 +46,11 @@
padding: $tooltip-arrow-width 0;
margin-top: $tooltip-margin;
.tooltip-arrow {
.tooltip-inner::before {
top: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
content: "";
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
@@ -57,10 +60,11 @@
padding: 0 $tooltip-arrow-width;
margin-left: -$tooltip-margin;
.tooltip-arrow {
.tooltip-inner::before {
top: 50%;
right: 0;
margin-top: -$tooltip-arrow-width;
content: "";
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: $tooltip-arrow-color;
}
@@ -75,13 +79,12 @@
text-align: center;
background-color: $tooltip-bg;
@include border-radius($border-radius);
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
&::before {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}

3
scss/_utilities.scss
View File

@@ -1,8 +1,9 @@
@import "utilities/background";
@import "utilities/borders";
@import "utilities/clearfix";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/pulls";
@import "utilities/float";
@import "utilities/screenreaders";
@import "utilities/spacing";
@import "utilities/text";

73
scss/_variables.scss
View File

@@ -21,7 +21,11 @@
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num != null and $prev-num >= $num {
@if $prev-num == null {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
@@ -121,7 +125,7 @@ $link-hover-decoration: underline !default;
$grid-breakpoints: (
xs: 0,
sm: 544px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
@@ -134,9 +138,9 @@ $grid-breakpoints: (
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 576px,
sm: 540px,
md: 720px,
lg: 940px,
lg: 960px,
xl: 1140px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
@@ -146,15 +150,21 @@ $container-max-widths: (
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
$grid-columns: 12 !default;
$grid-gutter-width-base: 30px !default;
$grid-gutter-widths: (
xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
) !default;
// Typography
//
// 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;
@@ -323,10 +333,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;
@@ -371,13 +381,15 @@ $custom-control-active-indicator-bg: #84c6ff !default;
$custom-control-active-indicator-box-shadow: none !default;
$custom-checkbox-radius: $border-radius !default;
$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
$custom-checkbox-indeterminate-bg: #0074d9 !default;
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default;
$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E") !default;
$custom-checkbox-indeterminate-box-shadow: none !default;
$custom-radio-radius: 50% !default;
$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default;
$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E") !default;
$custom-select-padding-x: .75rem !default;
$custom-select-padding-y: .375rem !default;
@@ -387,7 +399,8 @@ $custom-select-disabled-color: $gray-light !default;
$custom-select-bg: #fff !default;
$custom-select-disabled-bg: $gray-lighter !default;
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
$custom-select-indicator-color: #333 !default;
$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
$custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
@@ -424,23 +437,28 @@ $custom-file-text: (
// Form validation icons
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
$form-icon-success-color: $brand-success !default;
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
$form-icon-warning-color: $brand-warning !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
$form-icon-danger-color: $brand-danger !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-min-width: 160px !default;
$dropdown-padding-y: 5px !default;
$dropdown-margin-top: 2px !default;
$dropdown-min-width: 10rem !default;
$dropdown-padding-y: .5rem !default;
$dropdown-margin-top: .125rem !default;
$dropdown-bg: #fff !default;
$dropdown-border-color: rgba(0,0,0,.15) !default;
$dropdown-border-width: $border-width !default;
$dropdown-divider-bg: #e5e5e5 !default;
$dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default;
$dropdown-box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !default;
$dropdown-link-color: $gray-dark !default;
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
@@ -451,7 +469,7 @@ $dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-light !default;
$dropdown-item-padding-x: 20px !default;
$dropdown-item-padding-x: 1.5rem !default;
$dropdown-header-color: $gray-light !default;
@@ -484,16 +502,20 @@ $navbar-divider-padding-y: .425rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-padding-y: .5rem !default;
$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
@@ -583,7 +605,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;
@@ -612,6 +634,7 @@ $tooltip-arrow-color: $tooltip-bg !default;
// Popovers
$popover-inner-padding: 1px !default;
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
@@ -686,7 +709,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";

3
scss/bootstrap.scss vendored
View File

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

1
scss/mixins/_background-variant.scss
View File

@@ -2,7 +2,6 @@
@mixin bg-variant($parent, $color) {
#{$parent} {
color: #fff !important;
background-color: $color !important;
}
a#{$parent} {

4
scss/mixins/_pulls.scss → scss/mixins/_float.scss
View File

@@ -1,6 +1,6 @@
@mixin pull-left {
@mixin float-left {
float: left !important;
}
@mixin pull-right {
@mixin float-right {
float: right !important;
}

27
scss/mixins/_forms.scss
View File

@@ -7,26 +7,20 @@
// 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;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: $color;
// @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
// border-color: darken($border-color, 10%);
// $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
// @include box-shadow($shadow);
@if $enable-rounded {
&:focus {
box-shadow: $input-box-shadow, 0 0 6px lighten($color, 20%);
}
}
}
@@ -36,10 +30,6 @@
border-color: $color;
background-color: lighten($color, 40%);
}
// Optional feedback icon
.form-control-feedback {
color: $color;
}
}
// Form control focus state
@@ -60,8 +50,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);
}
}

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

@@ -3,26 +3,48 @@
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints
%grid-column {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
@if $enable-flex {
width: 100%;
}
@include make-gutters($gutters);
}
$breakpoint-counter: 0;
@each $breakpoint in map-keys($breakpoints) {
$breakpoint-counter: ($breakpoint-counter + 1);
// Allow columns to stretch full width below their breakpoints
.col-#{$breakpoint} {
@extend %grid-column;
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column;
}
}
@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: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@include make-col($i, $columns, $gutter);
@include make-col($i, $columns);
}
}

50
scss/mixins/_grid.scss
View File

@@ -2,7 +2,7 @@
//
// Generate semantic grid columns with these mixins.
@mixin make-container($gutter: $grid-gutter-width) {
@mixin make-container($gutter: $grid-gutter-width-base) {
margin-left: auto;
margin-right: auto;
padding-left: ($gutter / 2);
@@ -17,28 +17,60 @@
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
@each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
width: $container-max-width;
max-width: 100%;
}
}
}
@mixin make-row($gutter: $grid-gutter-width) {
@mixin make-gutters($gutters: $grid-gutter-widths) {
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
}
@mixin make-row($gutters: $grid-gutter-widths) {
@if $enable-flex {
display: flex;
flex-wrap: wrap;
} @else {
@include clearfix();
}
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
margin-right: ($gutter / -2);
margin-left: ($gutter / -2);
}
}
}
@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
@mixin make-col-ready($gutters: $grid-gutter-widths) {
position: relative;
min-height: 1px;
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
min-height: 1px; // Prevent collapsing
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
@if $enable-flex {
width: 100%;
}
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
}
@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

19
scss/mixins/_hover.scss
View File

@@ -1,14 +1,15 @@
@mixin hover {
@if $enable-hover-media-query {
// See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
// Currently shimmed by https://github.com/twbs/mq4-hover-shim
@media (hover: hover) {
&:hover { @content }
}
}
@else {
// TODO: re-enable along with mq4-hover-shim
// @if $enable-hover-media-query {
// // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
// // Currently shimmed by https://github.com/twbs/mq4-hover-shim
// @media (hover: hover) {
// &:hover { @content }
// }
// }
// @else {
&:hover { @content }
}
// }
}
@mixin hover-focus {

10
scss/mixins/_image.scss
View File

@@ -7,10 +7,12 @@
//
// Keep images from scaling beyond the width of their parents.
@mixin img-fluid($display: block) {
display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
@mixin img-fluid {
// Part 1: Set a maximum relative to the parent
max-width: 100%;
// Part 2: Override the height to auto, otherwise images will be stretched
// when setting a width and height attribute on the img element.
height: auto;
}

2
scss/mixins/_screen-reader.scss
View File

@@ -15,7 +15,7 @@
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate

6
scss/mixins/_tab-focus.scss
View File

@@ -1,9 +1,9 @@
// WebKit-style focus
@mixin tab-focus() {
// Default
outline: thin dotted;
// WebKit
// WebKit-specific. Other browsers will keep their default outline style.
// (Initially tried to also force default via `outline: initial`,
// but that seems to erroneously remove the outline in Firefox altogether.)
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

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

30
scss/utilities/_borders.scss Normal file
View File

@@ -0,0 +1,30 @@
//
// Border-width
//
// TBD...?
//
// Border-radius
//
.rounded {
@include border-radius($border-radius);
}
.rounded-top {
@include border-top-radius($border-radius);
}
.rounded-right {
@include border-right-radius($border-radius);
}
.rounded-bottom {
@include border-bottom-radius($border-radius);
}
.rounded-left {
@include border-left-radius($border-radius);
}
.rounded-circle {
border-radius: 50%;
}

1
scss/utilities/_flex.scss
View File

@@ -8,6 +8,7 @@
@include media-breakpoint-up($breakpoint) {
.flex-#{$breakpoint}-first { order: -1; }
.flex-#{$breakpoint}-last { order: 1; }
.flex-#{$breakpoint}-unordered { order: 0; }
}
// Alignment for every item

13
scss/utilities/_float.scss Normal file
View File

@@ -0,0 +1,13 @@
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.float-#{$breakpoint}-left {
@include float-left();
}
.float-#{$breakpoint}-right {
@include float-right();
}
.float-#{$breakpoint}-none {
float: none !important;
}
}
}

13
scss/utilities/_pulls.scss
View File

@@ -1,13 +0,0 @@
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.pull-#{$breakpoint}-left {
@include pull-left();
}
.pull-#{$breakpoint}-right {
@include pull-right();
}
.pull-#{$breakpoint}-none {
float: none !important;
}
}
}

19
scss/utilities/_spacing.scss
View File

@@ -1,10 +1,11 @@
// Width
// Width and height
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
// Margin and Padding
.m-x-auto {
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
@@ -14,18 +15,18 @@
$length-x: map-get($lengths, x);
$length-y: map-get($lengths, y);
.#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
.#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; }
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
.#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
// Axes
.#{$abbrev}-x-#{$size} {
.#{$abbrev}x-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}-y-#{$size} {
.#{$abbrev}y-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}

8
scss/utilities/_text.scss
View File

@@ -32,6 +32,10 @@
// Contextual colors
.text-white {
color: #fff !important;
}
@include text-emphasis-variant('.text-muted', $text-muted);
@include text-emphasis-variant('.text-primary', $brand-primary);
@@ -44,6 +48,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
//