Add responsiveness for footer. Update gulpjs, package.json and bootstrap sass

This commit is contained in:
Sam Lu
2018-07-16 21:49:23 -05:00
parent 5b14d78037
commit 3dcf8ba93a
88 changed files with 8957 additions and 893 deletions

View File

@@ -1,128 +1,97 @@
var argv = require('minimist')(process.argv.slice(2));
var autoprefixer = require('gulp-autoprefixer');
var chmod = require('gulp-chmod');
var concat = require('gulp-concat');
var git = require('gulp-git');
var gulp = require('gulp');
var gulpif = require('gulp-if');
var pug = require('gulp-pug');
var livereload = require('gulp-livereload');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var cache = require('gulp-cached');
let argv = require('minimist')(process.argv.slice(2));
let autoprefixer = require('gulp-autoprefixer');
let cache = require('gulp-cached');
let concat = require('gulp-concat');
let gulp = require('gulp');
let gulpif = require('gulp-if');
let pug = require('gulp-pug');
let livereload = require('gulp-livereload');
let plumber = require('gulp-plumber');
let rename = require('gulp-rename');
let sass = require('gulp-sass');
//let sourcemaps = require('gulp-sourcemaps');
let uglify = require('gulp-uglify');
var enabled = {
uglify: argv.production,
maps: argv.production,
failCheck: !argv.production,
prettyPug: !argv.production,
cachify: !argv.production,
cleanup: argv.production,
let enabled = {
failCheck: !argv.production,
maps: argv.production,
prettyPug: !argv.production,
uglify: argv.production
};
var destination = {
css: 'cloud/static/assets/css',
pug: 'cloud/templates',
js: 'cloud/static/assets/js',
}
/* CSS */
gulp.task('styles', function() {
gulp.src('src/styles/**/*.sass')
.pipe(gulpif(enabled.failCheck, plumber()))
.pipe(gulpif(enabled.maps, sourcemaps.init()))
.pipe(sass({
outputStyle: 'compressed'}
))
.pipe(autoprefixer("last 3 versions"))
.pipe(gulpif(enabled.maps, sourcemaps.write(".")))
.pipe(gulp.dest(destination.css))
.pipe(gulpif(argv.livereload, livereload()));
gulp.task('styles', function(done) {
gulp
.src('src/styles/**/*.sass')
.pipe(gulpif(enabled.failCheck, plumber()))
//.pipe(gulpif(enabled.maps, sourcemaps.init()))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(autoprefixer("last 3 versions"))
//.pipe(gulpif(enabled.maps, sourcemaps.write(".")))
.pipe(gulp.dest('dillo/static/css'))
.pipe(gulpif(argv.livereload, livereload()));
done();
});
/* Templates - Pug */
gulp.task('templates', function() {
gulp.src('src/templates/**/*.pug')
.pipe(gulpif(enabled.failCheck, plumber()))
.pipe(gulpif(enabled.cachify, cache('templating')))
.pipe(pug({
pretty: enabled.prettyPug
}))
.pipe(gulp.dest(destination.pug))
.pipe(gulpif(argv.livereload, livereload()));
// TODO(venomgfx): please check why 'gulp watch' doesn't pick up on .txt changes.
gulp.src('src/templates/**/*.txt')
.pipe(gulpif(enabled.failCheck, plumber()))
.pipe(gulpif(enabled.cachify, cache('templating')))
.pipe(gulp.dest(destination.pug))
.pipe(gulpif(argv.livereload, livereload()));
gulp.task('templates', function(done) {
gulp.src('src/templates/**/*.pug')
.pipe(gulpif(enabled.failCheck, plumber()))
.pipe(cache('templating'))
.pipe(pug({
pretty: enabled.prettyPug
}))
.pipe(gulp.dest('dillo/templates/'))
.pipe(gulpif(argv.livereload, livereload()));
done();
});
/* Individual Uglified Scripts */
gulp.task('scripts', function() {
gulp.src('src/scripts/*.js')
.pipe(gulpif(enabled.failCheck, plumber()))
.pipe(gulpif(enabled.cachify, cache('scripting')))
.pipe(gulpif(enabled.maps, sourcemaps.init()))
.pipe(gulpif(enabled.uglify, uglify()))
.pipe(rename({suffix: '.min'}))
.pipe(gulpif(enabled.maps, sourcemaps.write(".")))
.pipe(chmod(644))
.pipe(gulp.dest(destination.js))
.pipe(gulpif(argv.livereload, livereload()));
/* Individually uglified scripts */
gulp.task('scripts', function(done) {
gulp.src('src/scripts/*.js')
.pipe(gulpif(enabled.failCheck, plumber()))
.pipe(cache('scripting'))
//.pipe(gulpif(enabled.maps, sourcemaps.init()))
.pipe(gulpif(enabled.uglify, uglify()))
.pipe(rename({suffix: '.min'}))
//.pipe(gulpif(enabled.maps, sourcemaps.write(".")))
.pipe(gulp.dest('dillo/static/js/generated/'))
.pipe(gulpif(argv.livereload, livereload()));
done();
});
/* Collection of scripts in src/scripts/tutti/ to merge into tutti.min.js */
/* Since it's always loaded, it's only for functions that we want site-wide */
gulp.task('scripts_concat_tutti', function() {
gulp.src('src/scripts/tutti/**/*.js')
.pipe(gulpif(enabled.failCheck, plumber()))
.pipe(gulpif(enabled.maps, sourcemaps.init()))
.pipe(concat("tutti.min.js"))
.pipe(gulpif(enabled.uglify, uglify()))
.pipe(gulpif(enabled.maps, sourcemaps.write(".")))
.pipe(chmod(644))
.pipe(gulp.dest(destination.js))
.pipe(gulpif(argv.livereload, livereload()));
gulp.task('scripts_tutti', function(done) {
gulp.src('src/scripts/tutti/**/*.js')
.pipe(gulpif(enabled.failCheck, plumber()))
//.pipe(gulpif(enabled.maps, sourcemaps.init()))
.pipe(concat("tutti.min.js"))
.pipe(gulpif(enabled.uglify, uglify()))
//.pipe(gulpif(enabled.maps, sourcemaps.write(".")))
.pipe(gulp.dest('dillo/static/js/generated/'))
.pipe(gulpif(argv.livereload, livereload()));
done();
});
// While developing, run 'gulp watch'
gulp.task('watch',function() {
// Only listen for live reloads if ran with --livereload
if (argv.livereload){
livereload.listen();
}
gulp.watch('src/styles/**/*.sass',['styles']);
gulp.watch('src/templates/**/*.pug',['templates']);
gulp.watch('src/scripts/*.js',['scripts']);
gulp.watch('src/scripts/tutti/**/*.js',['scripts_concat_tutti']);
});
// Erases all generated files in output directories.
gulp.task('cleanup', function() {
var paths = [];
for (attr in destination) {
paths.push(destination[attr]);
}
git.clean({ args: '-f -X ' + paths.join(' ') }, function (err) {
if(err) throw err;
});
gulp.task('watch', function(done) {
// Only reload the pages if we run with --livereload
if (argv.livereload){
livereload.listen();
}
gulp.watch('src/styles/**/*.sass', gulp.series('styles'));
gulp.watch('src/templates/**/*.pug', gulp.series('templates'));
gulp.watch('src/scripts/*.js', gulp.series('scripts'));
gulp.watch('src/scripts/tutti/*.js', gulp.series('scripts_tutti'));
});
// Run 'gulp' to build everything at once
var tasks = [];
if (enabled.cleanup) tasks.push('cleanup');
gulp.task('default', tasks.concat(['styles', 'templates', 'scripts', 'scripts_concat_tutti']));
gulp.task('default', gulp.series('styles', 'templates', 'scripts', 'scripts_tutti'));

3064
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -7,21 +7,20 @@
"url": "git://git.blender.org/blender-cloud.git"
},
"devDependencies": {
"gulp": "~3.9.1",
"gulp-autoprefixer": "~2.3.1",
"gulp-cached": "~1.1.0",
"gulp-chmod": "~1.3.0",
"gulp-concat": "~2.6.0",
"gulp-if": "^2.0.1",
"gulp-git": "~2.4.2",
"gulp-pug": "~3.2.0",
"gulp-jade": "~1.1.0",
"gulp": "^4.0.0",
"gulp-autoprefixer": "~5.0.0",
"gulp-cached": "~1.1.1",
"gulp-chmod": "~2.0.0",
"gulp-concat": "~2.6.1",
"gulp-git": "~2.7.0",
"gulp-if": "^2.0.2",
"gulp-livereload": "~3.8.1",
"gulp-plumber": "~1.1.0",
"gulp-rename": "~1.2.2",
"gulp-sass": "~2.3.1",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~1.5.3",
"gulp-plumber": "~1.2.0",
"gulp-pug": "~4.0.1",
"gulp-rename": "~1.3.0",
"gulp-sass": "~4.0.1",
"gulp-sourcemaps": "~2.6.4",
"gulp-uglify": "~3.0.0",
"minimist": "^1.2.0"
},
"dependencies": {

View File

@@ -3,6 +3,6 @@
// md 576px - 757.98px
// lg 992px to 1199.98px
// xl 1200px and up
@import ../../node_modules/bootstrap/sass/functions
@import ../../node_modules/bootstrap/sass/variables
@import ../../node_modules/bootstrap/sass/mixins/breakpoints
@import ../../static/assets/bootstrap/sass/functions
@import ../../static/assets/bootstrap/sass/variables
@import ../../static/assets/bootstrap/sass/mixins/breakpoints

View File

@@ -1,36 +1,42 @@
footer.container-fluid
background: #F8F8FB
border-top: 1px solid #E3E3E6
margin-top: 136px
margin-top: 72px
+media-breakpoint-up(sm)
margin-top: 112px
+media-breakpoint-up(lg)
margin-top: 136px
.container
margin-top: 11px
max-width: 1200px
.row
max-width: 1200px
.col-4
// background: blue
// flex: 0 0 100%
// max-width: 100%
max-width: 100%
flex: 0 0 100%
flex-basis: 100%
max-width: 100%
margin-bottom: 60px
padding-left: 20px
padding-right: 20px
padding: 0 20px 56px
+media-breakpoint-up(sm)
padding: 0 20px 32px
+media-breakpoint-up(md)
// background: lightcoral
flex: 0 0 33%
padding-bottom: 0
max-width: 33%
margin-bottom: 0px
.col
padding-left: 20px
padding-right: 20px
flex-basis: 50%
padding: 0 20px 32px
+media-breakpoint-up(sm)
flex-basis: 0
padding-bottom: 0
h5
color: $dark
font-weight: 600
font-size: 15px
color: $dark
letter-spacing: 0.6px
text-transform: uppercase
margin-bottom: 12px
text-transform: uppercase
p
color: #6d6d6e
line-height: 30px

View File

@@ -0,0 +1,43 @@
//
// Base styles
//
.alert
position: relative
padding: $alert-padding-y $alert-padding-x
margin-bottom: $alert-margin-bottom
border: $alert-border-width solid transparent
+border-radius($alert-border-radius)
// Headings for larger alerts
.alert-heading
// Specified to prevent conflicts of changing $headings-color
color: inherit
// Provide class for links that match alerts
.alert-link
font-weight: $alert-link-font-weight
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissible
padding-right: $close-font-size + $alert-padding-x * 2
// Adjust close link position
.close
position: absolute
top: 0
right: 0
padding: $alert-padding-y $alert-padding-x
color: inherit
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
@each $color, $value in $theme-colors
.alert-#{$color}
+alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level))

View File

@@ -0,0 +1,43 @@
// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.
.badge
display: inline-block
padding: $badge-padding-y $badge-padding-x
font-size: $badge-font-size
font-weight: $badge-font-weight
line-height: 1
text-align: center
white-space: nowrap
vertical-align: baseline
+border-radius($badge-border-radius)
// Empty badges collapse automatically
&:empty
display: none
// Quick fix for badges in buttons
.btn .badge
position: relative
top: -1px
// Pill badges
//
// Make them extra rounded with a modifier to replace v3's badges.
.badge-pill
padding-right: $badge-pill-padding-x
padding-left: $badge-pill-padding-x
+border-radius($badge-pill-border-radius)
// Colors
//
// Contextual variations (linked badges get darker on :hover).
@each $color, $value in $theme-colors
.badge-#{$color}
+badge-variant($value)

View File

@@ -0,0 +1,38 @@
.breadcrumb
display: flex
flex-wrap: wrap
padding: $breadcrumb-padding-y $breadcrumb-padding-x
margin-bottom: $breadcrumb-margin-bottom
list-style: none
background-color: $breadcrumb-bg
+border-radius($breadcrumb-border-radius)
.breadcrumb-item
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item
padding-left: $breadcrumb-item-padding
&::before
display: inline-block
// Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding
color: $breadcrumb-divider-color
content: $breadcrumb-divider
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
// without `<ul>`s. The `::before` pseudo-element generates an element
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
//
// To trick IE into suppressing the underline, we give the pseudo-element an
// underline and then immediately remove it.
+ .breadcrumb-item:hover::before
text-decoration: underline
// stylelint-disable-next-line no-duplicate-selectors
+ .breadcrumb-item:hover::before
text-decoration: none
&.active
color: $breadcrumb-active-color

View File

@@ -0,0 +1,151 @@
// stylelint-disable selector-no-qualifying-type
// Make the div behave like a button
.btn-group,
.btn-group-vertical
position: relative
display: inline-flex
vertical-align: middle
// match .btn alignment given font-size hack above
> .btn
position: relative
flex: 0 1 auto
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
+hover
z-index: 1
&:focus,
&:active,
&.active
z-index: 1
// Prevent double borders when buttons are next to each other
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group
margin-left: -$btn-border-width
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar
display: flex
flex-wrap: wrap
justify-content: flex-start
.input-group
width: auto
.btn-group
> .btn:first-child
margin-left: 0
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn
+border-right-radius(0)
> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn
+border-left-radius(0)
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-sm > .btn
@extend .btn-sm
.btn-group-lg > .btn
@extend .btn-lg
//
// Split button dropdowns
//
.dropdown-toggle-split
padding-right: $btn-padding-x * 0.75
padding-left: $btn-padding-x * 0.75
&::after,
.dropup &::after,
.dropright &::after
margin-left: 0
.dropleft &::before
margin-right: 0
.btn-sm + .dropdown-toggle-split
padding-right: $btn-padding-x-sm * 0.75
padding-left: $btn-padding-x-sm * 0.75
.btn-lg + .dropdown-toggle-split
padding-right: $btn-padding-x-lg * 0.75
padding-left: $btn-padding-x-lg * 0.75
// The clickable button for toggling the menu
// Set the same inset shadow as the :active state
.btn-group.show .dropdown-toggle
+box-shadow($btn-active-box-shadow)
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link
+box-shadow(none)
//
// Vertical button groups
//
.btn-group-vertical
flex-direction: column
align-items: flex-start
justify-content: center
.btn,
.btn-group
width: 100%
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group
margin-top: -$btn-border-width
margin-left: 0
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn
+border-bottom-radius(0)
> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn
+border-top-radius(0)
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
.btn-group-toggle
> .btn,
> .btn-group > .btn
margin-bottom: 0
// Override default `<label>` value
input[type="radio"],
input[type="checkbox"]
position: absolute
clip: rect(0, 0, 0, 0)
pointer-events: none

View File

@@ -0,0 +1,123 @@
// stylelint-disable selector-no-qualifying-type
//
// Base styles
//
.btn
display: inline-block
font-weight: $btn-font-weight
text-align: center
white-space: nowrap
vertical-align: middle
user-select: none
border: $btn-border-width solid transparent
+button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius)
+transition($btn-transition)
// Share hover and focus styles
+hover-focus
text-decoration: none
&:focus,
&.focus
outline: 0
box-shadow: $btn-focus-box-shadow
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled
opacity: $btn-disabled-opacity
+box-shadow(none)
// Opinionated: add "hand" cursor to non-disabled .btn elements
&:not(:disabled):not(.disabled)
cursor: pointer
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active
background-image: none
+box-shadow($btn-active-box-shadow)
&:focus
+box-shadow($btn-focus-box-shadow, $btn-active-box-shadow)
// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset:disabled a.btn
pointer-events: none
//
// Alternate buttons
//
@each $color, $value in $theme-colors
.btn-#{$color}
+button-variant($value, $value)
@each $color, $value in $theme-colors
.btn-outline-#{$color}
+button-outline-variant($value)
//
// Link buttons
//
// Make a button look and behave like a link
.btn-link
font-weight: $font-weight-normal
color: $link-color
background-color: transparent
+hover
color: $link-hover-color
text-decoration: $link-hover-decoration
background-color: transparent
border-color: transparent
&:focus,
&.focus
text-decoration: $link-hover-decoration
border-color: transparent
box-shadow: none
&:disabled,
&.disabled
color: $btn-link-disabled-color
pointer-events: none
// No need for an active state here
//
// Button Sizes
//
.btn-lg
+button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg)
.btn-sm
+button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm)
//
// Block button
//
.btn-block
display: block
width: 100%
// Vertically space out multiple block buttons
+ .btn-block
margin-top: $btn-block-spacing-y
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"]
&.btn-block
width: 100%

View File

@@ -0,0 +1,261 @@
//
// Base styles
//
.card
position: relative
display: flex
flex-direction: column
min-width: 0
word-wrap: break-word
background-color: $card-bg
background-clip: border-box
border: $card-border-width solid $card-border-color
+border-radius($card-border-radius)
> hr
margin-right: 0
margin-left: 0
> .list-group:first-child
.list-group-item:first-child
+border-top-radius($card-border-radius)
> .list-group:last-child
.list-group-item:last-child
+border-bottom-radius($card-border-radius)
.card-body
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto
padding: $card-spacer-x
.card-title
margin-bottom: $card-spacer-y
.card-subtitle
margin-top: -($card-spacer-y / 2)
margin-bottom: 0
.card-text:last-child
margin-bottom: 0
.card-link
+hover
text-decoration: none
+ .card-link
margin-left: $card-spacer-x
//
// Optional textual caps
//
.card-header
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
&:first-child
+border-radius($card-inner-border-radius $card-inner-border-radius 0 0)
+ .list-group
.list-group-item:first-child
border-top: 0
.card-footer
padding: $card-spacer-y $card-spacer-x
background-color: $card-cap-bg
border-top: $card-border-width solid $card-border-color
&:last-child
+border-radius(0 0 $card-inner-border-radius $card-inner-border-radius)
//
// Header navs
//
.card-header-tabs
margin-right: -($card-spacer-x / 2)
margin-bottom: -$card-spacer-y
margin-left: -($card-spacer-x / 2)
border-bottom: 0
.card-header-pills
margin-right: -($card-spacer-x / 2)
margin-left: -($card-spacer-x / 2)
// Card image
.card-img-overlay
position: absolute
top: 0
right: 0
bottom: 0
left: 0
padding: $card-img-overlay-padding
.card-img
width: 100%
// Required because we use flexbox and this inherently applies align-self: stretch
+border-radius($card-inner-border-radius)
// Card image caps
.card-img-top
width: 100%
// Required because we use flexbox and this inherently applies align-self: stretch
+border-top-radius($card-inner-border-radius)
.card-img-bottom
width: 100%
// Required because we use flexbox and this inherently applies align-self: stretch
+border-bottom-radius($card-inner-border-radius)
// Card deck
.card-deck
display: flex
flex-direction: column
.card
margin-bottom: $card-deck-margin
+media-breakpoint-up(sm)
flex-flow: row wrap
margin-right: -$card-deck-margin
margin-left: -$card-deck-margin
.card
display: flex
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%
flex-direction: column
margin-right: $card-deck-margin
margin-bottom: 0
// Override the default
margin-left: $card-deck-margin
//
// Card groups
//
.card-group
display: flex
flex-direction: column
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card
margin-bottom: $card-group-margin
+media-breakpoint-up(sm)
flex-flow: row wrap
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%
margin-bottom: 0
+ .card
margin-left: 0
border-left: 0
// Handle rounded corners
@if $enable-rounded
&:first-child
+border-right-radius(0)
.card-img-top,
.card-header
border-top-right-radius: 0
.card-img-bottom,
.card-footer
border-bottom-right-radius: 0
&:last-child
+border-left-radius(0)
.card-img-top,
.card-header
border-top-left-radius: 0
.card-img-bottom,
.card-footer
border-bottom-left-radius: 0
&:only-child
+border-radius($card-border-radius)
.card-img-top,
.card-header
+border-top-radius($card-border-radius)
.card-img-bottom,
.card-footer
+border-bottom-radius($card-border-radius)
&:not(:first-child):not(:last-child):not(:only-child)
+border-radius(0)
.card-img-top,
.card-img-bottom,
.card-header,
.card-footer
+border-radius(0)
//
// Columns
//
.card-columns
.card
margin-bottom: $card-columns-margin
+media-breakpoint-up(sm)
column-count: $card-columns-count
column-gap: $card-columns-gap
orphans: 1
widows: 1
.card
display: inline-block
// Don't let them vertically span multiple columns
width: 100%
// Don't let their width change
//
// Accordion
//
.accordion
.card:not(:first-of-type):not(:last-of-type)
border-bottom: 0
border-radius: 0
.card:not(:first-of-type)
.card-header:first-child
border-radius: 0
.card:first-of-type
border-bottom: 0
border-bottom-right-radius: 0
border-bottom-left-radius: 0
.card:last-of-type
border-top-left-radius: 0
border-top-right-radius: 0

View File

@@ -0,0 +1,218 @@
// Notes on the classes:
//
// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
// the active slide is heading.
// 2. .active.carousel-item is the current slide.
// 3. .active.carousel-item-left and .active.carousel-item-right is the current
// slide in its in-transition state. Only one of these occurs at a time.
// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
// is the upcoming slide in transition.
.carousel
position: relative
.carousel-inner
position: relative
width: 100%
overflow: hidden
.carousel-item
position: relative
display: none
align-items: center
width: 100%
backface-visibility: hidden
perspective: 1000px
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev
display: block
+transition($carousel-transition)
.carousel-item-next,
.carousel-item-prev
position: absolute
top: 0
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right
transform: translateX(0)
@supports (transform-style: preserve-3d)
transform: translate3d(0, 0, 0)
.carousel-item-next,
.active.carousel-item-right
transform: translateX(100%)
@supports (transform-style: preserve-3d)
transform: translate3d(100%, 0, 0)
.carousel-item-prev,
.active.carousel-item-left
transform: translateX(-100%)
@supports (transform-style: preserve-3d)
transform: translate3d(-100%, 0, 0)
//
// Alternate transitions
//
.carousel-fade
.carousel-item
opacity: 0
transition-duration: .6s
transition-property: opacity
.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right
opacity: 1
.active.carousel-item-left,
.active.carousel-item-right
opacity: 0
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active,
.active.carousel-item-left,
.active.carousel-item-prev
transform: translateX(0)
@supports (transform-style: preserve-3d)
transform: translate3d(0, 0, 0)
//
// Left/right controls for nav
//
.carousel-control-prev,
.carousel-control-next
position: absolute
top: 0
bottom: 0
// Use flex for alignment (1-3)
display: flex
// 1. allow flex styles
align-items: center
// 2. vertically center contents
justify-content: center
// 3. horizontally center contents
width: $carousel-control-width
color: $carousel-control-color
text-align: center
opacity: $carousel-control-opacity
// We can't have a transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
// Hover/focus state
+hover-focus
color: $carousel-control-color
text-decoration: none
outline: 0
opacity: .9
.carousel-control-prev
left: 0
@if $enable-gradients
background: linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001))
.carousel-control-next
right: 0
@if $enable-gradients
background: linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001))
// Icons for within
.carousel-control-prev-icon,
.carousel-control-next-icon
display: inline-block
width: $carousel-control-icon-width
height: $carousel-control-icon-width
background: transparent no-repeat center center
background-size: 100% 100%
.carousel-control-prev-icon
background-image: $carousel-control-prev-icon-bg
.carousel-control-next-icon
background-image: $carousel-control-next-icon-bg
// Optional indicator pips
//
// Add an ordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators
position: absolute
right: 0
bottom: 10px
left: 0
z-index: 15
display: flex
justify-content: center
padding-left: 0
// override <ol> default
// Use the .carousel-control's width as margin so we don't overlay those
margin-right: $carousel-control-width
margin-left: $carousel-control-width
list-style: none
li
position: relative
flex: 0 1 auto
width: $carousel-indicator-width
height: $carousel-indicator-height
margin-right: $carousel-indicator-spacer
margin-left: $carousel-indicator-spacer
text-indent: -999px
cursor: pointer
background-color: rgba($carousel-indicator-active-bg, 0.5)
// Use pseudo classes to increase the hit area by 10px on top and bottom.
&::before
position: absolute
top: -10px
left: 0
display: inline-block
width: 100%
height: 10px
content: ""
&::after
position: absolute
bottom: -10px
left: 0
display: inline-block
width: 100%
height: 10px
content: ""
.active
background-color: $carousel-indicator-active-bg
// Optional captions
//
//
.carousel-caption
position: absolute
right: (100% - $carousel-caption-width) / 2
bottom: 20px
left: (100% - $carousel-caption-width) / 2
z-index: 10
padding-top: 20px
padding-bottom: 20px
color: $carousel-caption-color
text-align: center

View File

@@ -0,0 +1,32 @@
.close
float: right
font-size: $close-font-size
font-weight: $close-font-weight
line-height: 1
color: $close-color
text-shadow: $close-text-shadow
opacity: .5
&:not(:disabled):not(.disabled)
+hover-focus
color: $close-color
text-decoration: none
opacity: .75
// Opinionated: add "hand" cursor to non-disabled .close elements
cursor: pointer
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
button.close
padding: 0
background-color: transparent
border: 0
-webkit-appearance: none
// stylelint-enable

View File

@@ -0,0 +1,43 @@
// Inline code
code
font-size: $code-font-size
color: $code-color
word-break: break-word
// Streamline the style when inside anchors to avoid broken underline and more
a > &
color: inherit
// User input typically entered via keyboard
kbd
padding: $kbd-padding-y $kbd-padding-x
font-size: $kbd-font-size
color: $kbd-color
background-color: $kbd-bg
+border-radius($border-radius-sm)
+box-shadow($kbd-box-shadow)
kbd
padding: 0
font-size: 100%
font-weight: $nested-kbd-font-weight
+box-shadow(none)
// Blocks of code
pre
display: block
font-size: $code-font-size
color: $pre-color
// Account for some code outputs that place code tags in pre tags
code
font-size: inherit
color: inherit
word-break: normal
// Enable scrollable blocks of code
.pre-scrollable
max-height: $pre-scrollable-max-height
overflow-y: scroll

View File

@@ -0,0 +1,416 @@
// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
// https://useiconic.com/open
// Checkboxes and radios
//
// Base class takes care of all the key behavioral aspects.
.custom-control
position: relative
display: block
min-height: 1rem * $line-height-base
padding-left: $custom-control-gutter
.custom-control-inline
display: inline-flex
margin-right: $custom-control-spacer-x
.custom-control-input
position: absolute
z-index: -1
// Put the input behind the label so it doesn't overlay text
opacity: 0
&:checked ~ .custom-control-label::before
color: $custom-control-indicator-checked-color
+gradient-bg($custom-control-indicator-checked-bg)
+box-shadow($custom-control-indicator-checked-box-shadow)
&:focus ~ .custom-control-label::before
// the mixin is not used here to make sure there is feedback
box-shadow: $custom-control-indicator-focus-box-shadow
&:active ~ .custom-control-label::before
color: $custom-control-indicator-active-color
background-color: $custom-control-indicator-active-bg
+box-shadow($custom-control-indicator-active-box-shadow)
&:disabled
~ .custom-control-label
color: $custom-control-label-disabled-color
&::before
background-color: $custom-control-indicator-disabled-bg
// Custom control indicators
//
// Build the custom controls out of pseudo-elements.
.custom-control-label
position: relative
margin-bottom: 0
// Background-color and (when enabled) gradient
&::before
position: absolute
top: ($line-height-base - $custom-control-indicator-size) / 2
left: -$custom-control-gutter
display: block
width: $custom-control-indicator-size
height: $custom-control-indicator-size
pointer-events: none
content: ""
user-select: none
background-color: $custom-control-indicator-bg
+box-shadow($custom-control-indicator-box-shadow)
// Foreground (icon)
&::after
position: absolute
top: ($line-height-base - $custom-control-indicator-size) / 2
left: -$custom-control-gutter
display: block
width: $custom-control-indicator-size
height: $custom-control-indicator-size
content: ""
background-repeat: no-repeat
background-position: center center
background-size: $custom-control-indicator-bg-size
// Checkboxes
//
// Tweak just a few things for checkboxes.
.custom-checkbox
.custom-control-label::before
+border-radius($custom-checkbox-indicator-border-radius)
.custom-control-input:checked ~ .custom-control-label
&::before
+gradient-bg($custom-control-indicator-checked-bg)
&::after
background-image: $custom-checkbox-indicator-icon-checked
.custom-control-input:indeterminate ~ .custom-control-label
&::before
+gradient-bg($custom-checkbox-indicator-indeterminate-bg)
+box-shadow($custom-checkbox-indicator-indeterminate-box-shadow)
&::after
background-image: $custom-checkbox-indicator-icon-indeterminate
.custom-control-input:disabled
&:checked ~ .custom-control-label::before
background-color: $custom-control-indicator-checked-disabled-bg
&:indeterminate ~ .custom-control-label::before
background-color: $custom-control-indicator-checked-disabled-bg
// Radios
//
// Tweak just a few things for radios.
.custom-radio
.custom-control-label::before
border-radius: $custom-radio-indicator-border-radius
.custom-control-input:checked ~ .custom-control-label
&::before
+gradient-bg($custom-control-indicator-checked-bg)
&::after
background-image: $custom-radio-indicator-icon-checked
.custom-control-input:disabled
&:checked ~ .custom-control-label::before
background-color: $custom-control-indicator-checked-disabled-bg
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.
//
.custom-select
display: inline-block
width: 100%
height: $custom-select-height
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x
line-height: $custom-select-line-height
color: $custom-select-color
vertical-align: middle
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center
background-size: $custom-select-bg-size
border: $custom-select-border-width solid $custom-select-border-color
@if $enable-rounded
border-radius: $custom-select-border-radius
@else
border-radius: 0
+box-shadow($custom-select-box-shadow)
appearance: none
&:focus
border-color: $custom-select-focus-border-color
outline: 0
@if $enable-shadows
box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow
@else
box-shadow: $custom-select-focus-box-shadow
&::-ms-value
// For visual consistency with other platforms/browsers,
// suppress the default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color
background-color: $input-bg
&[multiple],
&[size]:not([size="1"])
height: auto
padding-right: $custom-select-padding-x
background-image: none
&:disabled
color: $custom-select-disabled-color
background-color: $custom-select-disabled-bg
// Hides the default caret in IE11
&::-ms-expand
opacity: 0
.custom-select-sm
height: $custom-select-height-sm
padding-top: $custom-select-padding-y
padding-bottom: $custom-select-padding-y
font-size: $custom-select-font-size-sm
.custom-select-lg
height: $custom-select-height-lg
padding-top: $custom-select-padding-y
padding-bottom: $custom-select-padding-y
font-size: $custom-select-font-size-lg
// File
//
// Custom file input.
.custom-file
position: relative
display: inline-block
width: 100%
height: $custom-file-height
margin-bottom: 0
.custom-file-input
position: relative
z-index: 2
width: 100%
height: $custom-file-height
margin: 0
opacity: 0
&:focus ~ .custom-file-label
border-color: $custom-file-focus-border-color
box-shadow: $custom-file-focus-box-shadow
&::after
border-color: $custom-file-focus-border-color
&:disabled ~ .custom-file-label
background-color: $custom-file-disabled-bg
@each $lang, $value in $custom-file-text
&:lang(#{$lang}) ~ .custom-file-label::after
content: $value
.custom-file-label
position: absolute
top: 0
right: 0
left: 0
z-index: 1
height: $custom-file-height
padding: $custom-file-padding-y $custom-file-padding-x
line-height: $custom-file-line-height
color: $custom-file-color
background-color: $custom-file-bg
border: $custom-file-border-width solid $custom-file-border-color
+border-radius($custom-file-border-radius)
+box-shadow($custom-file-box-shadow)
&::after
position: absolute
top: 0
right: 0
bottom: 0
z-index: 3
display: block
height: $custom-file-height-inner
padding: $custom-file-padding-y $custom-file-padding-x
line-height: $custom-file-line-height
color: $custom-file-button-color
content: "Browse"
+gradient-bg($custom-file-button-bg)
border-left: $custom-file-border-width solid $custom-file-border-color
+border-radius(0 $custom-file-border-radius $custom-file-border-radius 0)
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.
.custom-range
width: 100%
padding-left: 0
// Firefox specific
background-color: transparent
appearance: none
&:focus
outline: none
&::-moz-focus-outer
border: 0
&::-webkit-slider-thumb
width: $custom-range-thumb-width
height: $custom-range-thumb-height
margin-top: -($custom-range-thumb-width * 0.25)
// Webkit specific?
+gradient-bg($custom-range-thumb-bg)
border: $custom-range-thumb-border
+border-radius($custom-range-thumb-border-radius)
+box-shadow($custom-range-thumb-box-shadow)
+transition($custom-forms-transition)
appearance: none
&:focus
outline: none
box-shadow: $custom-range-thumb-focus-box-shadow
// No mixin for focus accessibility
&:active
+gradient-bg($custom-range-thumb-active-bg)
&::-webkit-slider-runnable-track
width: $custom-range-track-width
height: $custom-range-track-height
color: transparent
// Why?
cursor: $custom-range-track-cursor
background-color: $custom-range-track-bg
border-color: transparent
+border-radius($custom-range-track-border-radius)
+box-shadow($custom-range-track-box-shadow)
&::-moz-range-thumb
width: $custom-range-thumb-width
height: $custom-range-thumb-height
+gradient-bg($custom-range-thumb-bg)
border: $custom-range-thumb-border
+border-radius($custom-range-thumb-border-radius)
+box-shadow($custom-range-thumb-box-shadow)
+transition($custom-forms-transition)
appearance: none
&:focus
outline: none
box-shadow: $custom-range-thumb-focus-box-shadow
// No mixin for focus accessibility
&:active
+gradient-bg($custom-range-thumb-active-bg)
&::-moz-range-track
width: $custom-range-track-width
height: $custom-range-track-height
color: transparent
cursor: $custom-range-track-cursor
background-color: $custom-range-track-bg
border-color: transparent
// Firefox specific?
+border-radius($custom-range-track-border-radius)
+box-shadow($custom-range-track-box-shadow)
&::-ms-thumb
width: $custom-range-thumb-width
height: $custom-range-thumb-height
+gradient-bg($custom-range-thumb-bg)
border: $custom-range-thumb-border
+border-radius($custom-range-thumb-border-radius)
+box-shadow($custom-range-thumb-box-shadow)
+transition($custom-forms-transition)
appearance: none
&:focus
outline: none
box-shadow: $custom-range-thumb-focus-box-shadow
// No mixin for focus accessibility
&:active
+gradient-bg($custom-range-thumb-active-bg)
&::-ms-track
width: $custom-range-track-width
height: $custom-range-track-height
color: transparent
cursor: $custom-range-track-cursor
background-color: transparent
border-color: transparent
border-width: $custom-range-thumb-height * 0.5
+box-shadow($custom-range-track-box-shadow)
&::-ms-fill-lower
background-color: $custom-range-track-bg
+border-radius($custom-range-track-border-radius)
&::-ms-fill-upper
margin-right: 15px
// arbitrary?
background-color: $custom-range-track-bg
+border-radius($custom-range-track-border-radius)
.custom-control-label::before,
.custom-file-label,
.custom-select
+transition($custom-forms-transition)

View File

@@ -0,0 +1,170 @@
// The dropdown wrapper (`<div>`)
.dropup,
.dropright,
.dropdown,
.dropleft
position: relative
.dropdown-toggle
// Generate the caret automatically
+caret
// The dropdown menu
.dropdown-menu
position: absolute
top: 100%
left: 0
z-index: $zindex-dropdown
display: none
// none by default, but block on "open" of the menu
float: left
min-width: $dropdown-min-width
padding: $dropdown-padding-y 0
margin: $dropdown-spacer 0 0
// override default ul
font-size: $font-size-base
// Redeclare because nesting can cause inheritance issues
color: $body-color
text-align: left
// Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none
background-color: $dropdown-bg
background-clip: padding-box
border: $dropdown-border-width solid $dropdown-border-color
+border-radius($dropdown-border-radius)
+box-shadow($dropdown-box-shadow)
.dropdown-menu-right
right: 0
left: auto
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set.
.dropup
.dropdown-menu
top: auto
bottom: 100%
margin-top: 0
margin-bottom: $dropdown-spacer
.dropdown-toggle
+caret(up)
.dropright
.dropdown-menu
top: 0
right: auto
left: 100%
margin-top: 0
margin-left: $dropdown-spacer
.dropdown-toggle
+caret(right)
&::after
vertical-align: 0
.dropleft
.dropdown-menu
top: 0
right: 100%
left: auto
margin-top: 0
margin-right: $dropdown-spacer
.dropdown-toggle
+caret(left)
&::before
vertical-align: 0
// When enabled Popper.js, reset basic dropdown position
// stylelint-disable no-duplicate-selectors
.dropdown-menu
&[x-placement^="top"],
&[x-placement^="right"],
&[x-placement^="bottom"],
&[x-placement^="left"]
right: auto
bottom: auto
// stylelint-enable no-duplicate-selectors
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider
+nav-divider($dropdown-divider-bg)
// Links, buttons, and more within the dropdown menu
//
// `<button>`-specific styles are denoted with `// For <button>s`
.dropdown-item
display: block
width: 100%
// For `<button>`s
padding: $dropdown-item-padding-y $dropdown-item-padding-x
clear: both
font-weight: $font-weight-normal
color: $dropdown-link-color
text-align: inherit
// For `<button>`s
white-space: nowrap
// prevent links from randomly breaking onto new lines
background-color: transparent
// For `<button>`s
border: 0
// For `<button>`s
+hover-focus
color: $dropdown-link-hover-color
text-decoration: none
+gradient-bg($dropdown-link-hover-bg)
&.active,
&:active
color: $dropdown-link-active-color
text-decoration: none
+gradient-bg($dropdown-link-active-bg)
&.disabled,
&:disabled
color: $dropdown-link-disabled-color
background-color: transparent
// Remove CSS gradients if they're enabled
@if $enable-gradients
background-image: none
.dropdown-menu.show
display: block
// Dropdown section headers
.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
// Dropdown text
.dropdown-item-text
display: block
padding: $dropdown-item-padding-y $dropdown-item-padding-x
color: $dropdown-link-color

View File

@@ -0,0 +1,306 @@
// stylelint-disable selector-no-qualifying-type
//
// Textual form controls
//
.form-control
display: block
width: 100%
padding: $input-padding-y $input-padding-x
font-size: $font-size-base
line-height: $input-line-height
color: $input-color
background-color: $input-bg
background-clip: padding-box
border: $input-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.
@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
+box-shadow($input-box-shadow)
+transition($input-transition)
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand
background-color: transparent
border: 0
// Customize the `:focus` state to imitate native WebKit styles.
+form-control-focus
// Placeholder
&::placeholder
color: $input-placeholder-color
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&:disabled,
&[readonly]
background-color: $input-disabled-bg
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1
select.form-control
&:not([size]):not([multiple])
height: $input-height
&:focus::-ms-value
// Suppress the nested default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
// match the appearance of the native widget.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color
background-color: $input-bg
// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file,
.form-control-range
display: block
width: 100%
//
// Labels
//
// For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls.
.col-form-label
padding-top: calc(#{$input-padding-y} + #{$input-border-width})
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width})
margin-bottom: 0
// Override the `<label>/<legend>` default
font-size: inherit
// Override the `<legend>` default
line-height: $input-line-height
.col-form-label-lg
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width})
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width})
font-size: $font-size-lg
line-height: $input-line-height-lg
.col-form-label-sm
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width})
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width})
font-size: $font-size-sm
line-height: $input-line-height-sm
// Readonly controls as plain text
//
// Apply class to a readonly input to make it appear like regular plain
// text (without any border, background color, focus indicator)
.form-control-plaintext
display: block
width: 100%
padding-top: $input-padding-y
padding-bottom: $input-padding-y
margin-bottom: 0
// match inputs if this class comes on inputs with default margins
line-height: $input-line-height
color: $input-plaintext-color
background-color: transparent
border: solid transparent
border-width: $input-border-width 0
&.form-control-sm,
&.form-control-lg
padding-right: 0
padding-left: 0
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.form-control-sm
padding: $input-padding-y-sm $input-padding-x-sm
font-size: $font-size-sm
line-height: $input-line-height-sm
+border-radius($input-border-radius-sm)
select.form-control-sm
&:not([size]):not([multiple])
height: $input-height-sm
.form-control-lg
padding: $input-padding-y-lg $input-padding-x-lg
font-size: $font-size-lg
line-height: $input-line-height-lg
+border-radius($input-border-radius-lg)
select.form-control-lg
&:not([size]):not([multiple])
height: $input-height-lg
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group
margin-bottom: $form-group-margin-bottom
.form-text
display: block
margin-top: $form-text-margin-top
// Form grid
//
// Special replacement for our grid system's `.row` for tighter form layouts.
.form-row
display: flex
flex-wrap: wrap
margin-right: -5px
margin-left: -5px
> .col,
> [class*="col-"]
padding-right: 5px
padding-left: 5px
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.form-check
position: relative
display: block
padding-left: $form-check-input-gutter
.form-check-input
position: absolute
margin-top: $form-check-input-margin-y
margin-left: -$form-check-input-gutter
&:disabled ~ .form-check-label
color: $text-muted
.form-check-label
margin-bottom: 0
// Override default `<label>` bottom margin
.form-check-inline
display: inline-flex
align-items: center
padding-left: 0
// Override base .form-check
margin-right: $form-check-inline-margin-x
// Undo .form-check-input defaults and add some `margin-right`.
.form-check-input
position: static
margin-top: 0
margin-right: $form-check-inline-input-margin-x
margin-left: 0
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
// primarily for client-side validation via scoped `:invalid` and `:valid`
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.
+form-validation-state("valid", $form-feedback-valid-color)
+form-validation-state("invalid", $form-feedback-invalid-color)
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
.form-inline
display: flex
flex-flow: row wrap
align-items: center
// Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
// Because we use flex, the initial sizing of checkboxes is collapsed and
// doesn't occupy the full-width (which is what we want for xs grid tier),
// so we force that here.
.form-check
width: 100%
// Kick in the inline
+media-breakpoint-up(sm)
label
display: flex
align-items: center
justify-content: center
margin-bottom: 0
// Inline-block all the things for "inline"
.form-group
display: flex
flex: 0 0 auto
flex-flow: row wrap
align-items: center
margin-bottom: 0
// Allow folks to *not* use `.form-group`
.form-control
display: inline-block
width: auto
// Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle
// Make static controls behave like regular ones
.form-control-plaintext
display: inline-block
.input-group,
.custom-select
width: auto
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match.
.form-check
display: flex
align-items: center
justify-content: center
width: auto
padding-left: 0
.form-check-input
position: relative
margin-top: 0
margin-right: $form-check-input-margin-x
margin-left: 0
.custom-control
align-items: center
justify-content: center
.custom-control-label
margin-bottom: 0

View File

@@ -0,0 +1,76 @@
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
=_assert-ascending($map, $map-name)
$prev-key: null
$prev-num: null
@each $key, $num in $map
@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
$prev-num: $num
// Starts at zero
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
=_assert-starts-at-zero($map)
$values: map-values($map)
$first-value: nth($values, 1)
@if $first-value != 0
@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}."
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "")
$index: str-index($string, $search)
@if $index
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace)
@return $string
// Color contrast
@function color-yiq($color)
$r: red($color)
$g: green($color)
$b: blue($color)
$yiq: ($r * 299 + $g * 587 + $b * 114) / 1000
@if $yiq >= $yiq-contrasted-threshold
@return $yiq-text-dark
@else
@return $yiq-text-light
// Retrieve color Sass maps
@function color($key: "blue")
@return map-get($colors, $key)
@function theme-color($key: "primary")
@return map-get($theme-colors, $key)
@function gray($key: "100")
@return map-get($grays, $key)
// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0)
$color: theme-color($color-name)
$color-base: if($level > 0, $black, $white)
$level: abs($level)
@return mix($color-base, $color, $level * $theme-color-interval)

View File

@@ -0,0 +1,43 @@
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
@if $enable-grid-classes
.container
+make-container
+make-container-max-widths
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but with 100% width for
// fluid, full width layouts.
@if $enable-grid-classes
.container-fluid
+make-container
// Row
//
// Rows contain and clear the floats of your columns.
@if $enable-grid-classes
.row
+make-row
// Remove the negative margin from default .row, then the horizontal padding
// from all immediate children columns (to prevent runaway style inheritance).
.no-gutters
margin-right: 0
margin-left: 0
> .col,
> [class*="col-"]
padding-right: 0
padding-left: 0
// Columns
//
// Common styles for small and large grid columns
@if $enable-grid-classes
+make-grid-columns

View File

@@ -0,0 +1,37 @@
// Responsive images (ensure images don't scale beyond their parents)
//
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid
+img-fluid
// Image thumbnails
.img-thumbnail
padding: $thumbnail-padding
background-color: $thumbnail-bg
border: $thumbnail-border-width solid $thumbnail-border-color
+border-radius($thumbnail-border-radius)
+box-shadow($thumbnail-box-shadow)
// Keep them at most 100% wide
+img-fluid
//
// Figures
//
.figure
// Ensures the caption's text aligns with the image.
display: inline-block
.figure-img
margin-bottom: $spacer / 2
line-height: 1
.figure-caption
font-size: $figure-caption-font-size
color: $figure-caption-color

View File

@@ -0,0 +1,159 @@
// stylelint-disable selector-no-qualifying-type
//
// Base styles
//
.input-group
position: relative
display: flex
flex-wrap: wrap
// For form validation feedback
align-items: stretch
width: 100%
> .form-control,
> .custom-select,
> .custom-file
position: relative
// For focus state's z-index
flex: 1 1 auto
// Add width 1% and flex-basis auto to ensure that button will not wrap out
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
width: 1%
margin-bottom: 0
+ .form-control,
+ .custom-select,
+ .custom-file
margin-left: -$input-border-width
// Bring the "active" form control to the top of surrounding elements
> .form-control:focus,
> .custom-select:focus,
> .custom-file .custom-file-input:focus ~ .custom-file-label
z-index: 3
> .form-control,
> .custom-select
&:not(:last-child)
+border-right-radius(0)
&:not(:first-child)
+border-left-radius(0)
// Custom file inputs have more complex markup, thus requiring different
// border-radius overrides.
> .custom-file
display: flex
align-items: center
&:not(:last-child) .custom-file-label,
&:not(:last-child) .custom-file-label::after
+border-right-radius(0)
&:not(:first-child) .custom-file-label
+border-left-radius(0)
// Prepend and append
//
// While it requires one extra layer of HTML for each, dedicated prepend and
// append elements allow us to 1) be less clever, 2) simplify our selectors, and
// 3) support HTML5 form validation.
.input-group-prepend,
.input-group-append
display: flex
// Ensure buttons are always above inputs for more visually pleasing borders.
// This isn't needed for `.input-group-text` since it shares the same border-color
// as our inputs.
.btn
position: relative
z-index: 2
.btn + .btn,
.btn + .input-group-text,
.input-group-text + .input-group-text,
.input-group-text + .btn
margin-left: -$input-border-width
.input-group-prepend
margin-right: -$input-border-width
.input-group-append
margin-left: -$input-border-width
// Textual addons
//
// Serves as a catch-all element for any text or radio/checkbox input you wish
// to prepend or append to an input.
.input-group-text
display: flex
align-items: center
padding: $input-padding-y $input-padding-x
margin-bottom: 0
// Allow use of <label> elements by overriding our default margin-bottom
font-size: $font-size-base
// Match inputs
font-weight: $font-weight-normal
line-height: $input-line-height
color: $input-group-addon-color
text-align: center
white-space: nowrap
background-color: $input-group-addon-bg
border: $input-border-width solid $input-group-addon-border-color
+border-radius($input-border-radius)
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"]
margin-top: 0
// Sizing
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn
@extend .form-control-lg
.input-group-sm > .form-control,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn
@extend .form-control-sm
// Prepend and append rounded corners
//
// These rulesets must come after the sizing ones to properly override sm and lg
// border-radius values when extending. They're more specific than we'd like
// with the `.input-group >` part, but without it, we cannot override the sizing.
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child)
+border-right-radius(0)
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child)
+border-left-radius(0)

View File

@@ -0,0 +1,15 @@
.jumbotron
padding: $jumbotron-padding ($jumbotron-padding / 2)
margin-bottom: $jumbotron-padding
background-color: $jumbotron-bg
+border-radius($border-radius-lg)
+media-breakpoint-up(sm)
padding: ($jumbotron-padding * 2) $jumbotron-padding
.jumbotron-fluid
padding-right: 0
padding-left: 0
+border-radius(0)

View File

@@ -0,0 +1,109 @@
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group
display: flex
flex-direction: column
// No need to set list-style: none; since .list-group-item is block level
padding-left: 0
// reset padding because ul and ol
margin-bottom: 0
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.
.list-group-item-action
width: 100%
// For `<button>`s (anchors become 100% by default though)
color: $list-group-action-color
text-align: inherit
// For `<button>`s (anchors inherit)
// Hover state
+hover-focus
color: $list-group-action-hover-color
text-decoration: none
background-color: $list-group-hover-bg
&:active
color: $list-group-action-active-color
background-color: $list-group-action-active-bg
// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item
position: relative
display: block
padding: $list-group-item-padding-y $list-group-item-padding-x
// Place the border on the list items and negative margin up for better styling
margin-bottom: -$list-group-border-width
background-color: $list-group-bg
border: $list-group-border-width solid $list-group-border-color
&:first-child
+border-top-radius($list-group-border-radius)
&:last-child
margin-bottom: 0
+border-bottom-radius($list-group-border-radius)
+hover-focus
z-index: 1
// Place hover/active items above their siblings for proper border styling
text-decoration: none
&.disabled,
&:disabled
color: $list-group-disabled-color
background-color: $list-group-disabled-bg
// Include both here for `<a>`s and `<button>`s
&.active
z-index: 2
// Place active items above their siblings for proper border styling
color: $list-group-active-color
background-color: $list-group-active-bg
border-color: $list-group-active-border-color
// Flush list items
//
// Remove borders and border-radius to keep list group items edge-to-edge. Most
// useful within other components (e.g., cards).
.list-group-flush
.list-group-item
border-right: 0
border-left: 0
+border-radius(0)
&:first-child
.list-group-item:first-child
border-top: 0
&:last-child
.list-group-item:last-child
border-bottom: 0
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $color, $value in $theme-colors
+list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6))

View File

@@ -0,0 +1,6 @@
.media
display: flex
align-items: flex-start
.media-body
flex: 1

View File

@@ -0,0 +1,41 @@
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
// Utilities
@import mixins/breakpoints
@import mixins/hover
@import mixins/image
@import mixins/badge
@import mixins/resize
@import mixins/screen-reader
@import mixins/size
@import mixins/reset-text
@import mixins/text-emphasis
@import mixins/text-hide
@import mixins/text-truncate
@import mixins/visibility
// // Components
@import mixins/alert
@import mixins/buttons
@import mixins/caret
@import mixins/pagination
@import mixins/lists
@import mixins/list-group
@import mixins/nav-divider
@import mixins/forms
@import mixins/table-row
// // Skins
@import mixins/background-variant
@import mixins/border-radius
@import mixins/box-shadow
@import mixins/gradients
@import mixins/transition
// // Layout
@import mixins/clearfix
@import mixins/grid-framework
@import mixins/grid
@import mixins/float

View File

@@ -0,0 +1,175 @@
// .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 stuff
// Kill the scroll on the body
.modal-open
overflow: hidden
// Container that the modal scrolls within
.modal
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: $zindex-modal
display: none
overflow: hidden
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0
// 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
.modal-open &
overflow-x: hidden
overflow-y: auto
// Shell div to position the modal with bottom padding
.modal-dialog
position: relative
width: auto
margin: $modal-dialog-margin
// allow clicks to pass through for custom click handling to close modal
pointer-events: none
// When fading in the modal, animate it to slide down
.modal.fade &
+transition($modal-transition)
transform: translate(0, -25%)
.modal.show &
transform: translate(0, 0)
.modal-dialog-centered
display: flex
align-items: center
min-height: calc(100% - (#{$modal-dialog-margin} * 2))
// Actual modal
.modal-content
position: relative
display: flex
flex-direction: column
width: 100%
// Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .modal-dialog
pointer-events: auto
background-color: $modal-content-bg
background-clip: padding-box
border: $modal-content-border-width solid $modal-content-border-color
+border-radius($modal-content-border-radius)
+box-shadow($modal-content-box-shadow-xs)
// Remove focus outline from opened modal
outline: 0
// Modal background
.modal-backdrop
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: $zindex-modal-backdrop
background-color: $modal-backdrop-bg
// Fade for backdrop
&.fade
opacity: 0
&.show
opacity: $modal-backdrop-opacity
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header
display: flex
align-items: flex-start
// so the close btn always stays on the upper right corner
justify-content: space-between
// Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding
border-bottom: $modal-header-border-width solid $modal-header-border-color
+border-top-radius($modal-content-border-radius)
.close
padding: $modal-header-padding
// auto on the left force icon to the right even when there is no .modal-title
margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto
// Title text within header
.modal-title
margin-bottom: 0
line-height: $modal-title-line-height
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body
position: relative
// Enable `flex-grow: 1` so that the body take up as much space as possible
// when should there be a fixed height on `.modal-dialog`.
flex: 1 1 auto
padding: $modal-inner-padding
// Footer (for actions)
.modal-footer
display: flex
align-items: center
// vertically center
justify-content: flex-end
// Right align buttons with flex property because text-align doesn't work on flex items
padding: $modal-inner-padding
border-top: $modal-footer-border-width solid $modal-footer-border-color
// Easily place margin between footer elements
> :not(:first-child)
margin-left: .25rem
> :not(:last-child)
margin-right: .25rem
// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure
position: absolute
top: -9999px
width: 50px
height: 50px
overflow: scroll
// Scale up the modal
+media-breakpoint-up(sm)
// Automatically set modal's width for larger viewports
.modal-dialog
max-width: $modal-md
margin: $modal-dialog-margin-y-sm-up auto
.modal-dialog-centered
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2))
.modal-content
+box-shadow($modal-content-box-shadow-sm-up)
.modal-sm
max-width: $modal-sm
+media-breakpoint-up(lg)
.modal-lg
max-width: $modal-lg

View File

@@ -0,0 +1,99 @@
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
// `<nav>`s or `<ul>`s.
.nav
display: flex
flex-wrap: wrap
padding-left: 0
margin-bottom: 0
list-style: none
.nav-link
display: block
padding: $nav-link-padding-y $nav-link-padding-x
+hover-focus
text-decoration: none
// Disabled state lightens text
&.disabled
color: $nav-link-disabled-color
//
// Tabs
//
.nav-tabs
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color
.nav-item
margin-bottom: -$nav-tabs-border-width
.nav-link
border: $nav-tabs-border-width solid transparent
+border-top-radius($nav-tabs-border-radius)
+hover-focus
border-color: $nav-tabs-link-hover-border-color
&.disabled
color: $nav-link-disabled-color
background-color: transparent
border-color: transparent
.nav-link.active,
.nav-item.show .nav-link
color: $nav-tabs-link-active-color
background-color: $nav-tabs-link-active-bg
border-color: $nav-tabs-link-active-border-color
.dropdown-menu
// Make dropdown border overlap tab border
margin-top: -$nav-tabs-border-width
// Remove the top rounded corners here since there is a hard edge above the menu
+border-top-radius(0)
//
// Pills
//
.nav-pills
.nav-link
+border-radius($nav-pills-border-radius)
.nav-link.active,
.show > .nav-link
color: $nav-pills-link-active-color
background-color: $nav-pills-link-active-bg
//
// Justified variants
//
.nav-fill
.nav-item
flex: 1 1 auto
text-align: center
.nav-justified
.nav-item
flex-basis: 0
flex-grow: 1
text-align: center
// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`
.tab-content
> .tab-pane
display: none
> .active
display: block

View File

@@ -0,0 +1,261 @@
// Contents
//
// Navbar
// Navbar brand
// Navbar nav
// Navbar text
// Navbar divider
// Responsive navbar
// Navbar position
// Navbar themes
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar
position: relative
display: flex
flex-wrap: wrap
// allow us to do the line break for collapsing content
align-items: center
justify-content: space-between
// space out brand from logo
padding: $navbar-padding-y $navbar-padding-x
// Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly.
> .container,
> .container-fluid
display: flex
flex-wrap: wrap
align-items: center
justify-content: space-between
// Navbar brand
//
// Used for brand, project, or site names.
.navbar-brand
display: inline-block
padding-top: $navbar-brand-padding-y
padding-bottom: $navbar-brand-padding-y
margin-right: $navbar-padding-x
font-size: $navbar-brand-font-size
line-height: inherit
white-space: nowrap
+hover-focus
text-decoration: none
// Navbar nav
//
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
.navbar-nav
display: flex
flex-direction: column
// cannot use `inherit` to get the `.navbar`s value
padding-left: 0
margin-bottom: 0
list-style: none
.nav-link
padding-right: 0
padding-left: 0
.dropdown-menu
position: static
float: none
// Navbar text
//
//
.navbar-text
display: inline-block
padding-top: $nav-link-padding-y
padding-bottom: $nav-link-padding-y
// Responsive navbar
//
// Custom styles for responsive collapsing and toggling of navbar contents.
// Powered by the collapse Bootstrap JavaScript plugin.
// When collapsed, prevent the toggleable navbar contents from appearing in
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse
flex-basis: 100%
flex-grow: 1
// For always expanded or extra full navbars, ensure content aligns itself
// properly vertically. Can be easily overridden with flex utilities.
align-items: center
// Button for toggling the navbar when in its collapsed state
.navbar-toggler
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x
font-size: $navbar-toggler-font-size
line-height: 1
background-color: transparent
// remove default button style
border: $border-width solid transparent
// remove default button style
+border-radius($navbar-toggler-border-radius)
+hover-focus
text-decoration: none
// Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
&:not(:disabled):not(.disabled)
cursor: pointer
// Keep as a separate element so folks can easily override it with another icon
// or image file as needed.
.navbar-toggler-icon
display: inline-block
width: 1.5em
height: 1.5em
vertical-align: middle
content: ""
background: no-repeat center center
background-size: 100% 100%
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand
@each $breakpoint in map-keys($grid-breakpoints)
$next: breakpoint-next($breakpoint, $grid-breakpoints)
$infix: breakpoint-infix($next, $grid-breakpoints)
&#{$infix}
+media-breakpoint-down($breakpoint)
> .container,
> .container-fluid
padding-right: 0
padding-left: 0
+media-breakpoint-up($next)
flex-flow: row nowrap
justify-content: flex-start
.navbar-nav
flex-direction: row
.dropdown-menu
position: absolute
.nav-link
padding-right: $navbar-nav-link-padding-x
padding-left: $navbar-nav-link-padding-x
// For nesting containers, have to redeclare for alignment purposes
> .container,
> .container-fluid
flex-wrap: nowrap
.navbar-collapse
display: flex !important
// stylelint-disable-line declaration-no-important
// Changes flex-bases to auto because of an IE10 bug
flex-basis: auto
.navbar-toggler
display: none
// Navbar themes
//
// Styles for switching between navbars with light or dark background.
// Dark links against a light background
.navbar-light
.navbar-brand
color: $navbar-light-active-color
+hover-focus
color: $navbar-light-active-color
.navbar-nav
.nav-link
color: $navbar-light-color
+hover-focus
color: $navbar-light-hover-color
&.disabled
color: $navbar-light-disabled-color
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active
color: $navbar-light-active-color
.navbar-toggler
color: $navbar-light-color
border-color: $navbar-light-toggler-border-color
.navbar-toggler-icon
background-image: $navbar-light-toggler-icon-bg
.navbar-text
color: $navbar-light-color
a
color: $navbar-light-active-color
+hover-focus
color: $navbar-light-active-color
// White links against a dark background
.navbar-dark
.navbar-brand
color: $navbar-dark-active-color
+hover-focus
color: $navbar-dark-active-color
.navbar-nav
.nav-link
color: $navbar-dark-color
+hover-focus
color: $navbar-dark-hover-color
&.disabled
color: $navbar-dark-disabled-color
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active
color: $navbar-dark-active-color
.navbar-toggler
color: $navbar-dark-color
border-color: $navbar-dark-toggler-border-color
.navbar-toggler-icon
background-image: $navbar-dark-toggler-icon-bg
.navbar-text
color: $navbar-dark-color
a
color: $navbar-dark-active-color
+hover-focus
color: $navbar-dark-active-color

View File

@@ -0,0 +1,67 @@
.pagination
display: flex
+list-unstyled
+border-radius
.page-link
position: relative
display: block
padding: $pagination-padding-y $pagination-padding-x
margin-left: -$pagination-border-width
line-height: $pagination-line-height
color: $pagination-color
background-color: $pagination-bg
border: $pagination-border-width solid $pagination-border-color
&:hover
z-index: 2
color: $pagination-hover-color
text-decoration: none
background-color: $pagination-hover-bg
border-color: $pagination-hover-border-color
&:focus
z-index: 2
outline: $pagination-focus-outline
box-shadow: $pagination-focus-box-shadow
// Opinionated: add "hand" cursor to non-disabled .page-link elements
&:not(:disabled):not(.disabled)
cursor: pointer
.page-item
&:first-child
.page-link
margin-left: 0
+border-left-radius($border-radius)
&:last-child
.page-link
+border-right-radius($border-radius)
&.active .page-link
z-index: 1
color: $pagination-active-color
background-color: $pagination-active-bg
border-color: $pagination-active-border-color
&.disabled .page-link
color: $pagination-disabled-color
pointer-events: none
// Opinionated: remove the "hand" cursor set previously for .page-link
cursor: auto
background-color: $pagination-disabled-bg
border-color: $pagination-disabled-border-color
//
// Sizing
//
.pagination-lg
+pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg)
.pagination-sm
+pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm)

View File

@@ -0,0 +1,165 @@
.popover
position: absolute
top: 0
left: 0
z-index: $zindex-popover
display: block
max-width: $popover-max-width
// 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.
+reset-text
font-size: $popover-font-size
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word
background-color: $popover-bg
background-clip: padding-box
border: $popover-border-width solid $popover-border-color
+border-radius($popover-border-radius)
+box-shadow($popover-box-shadow)
.arrow
position: absolute
display: block
width: $popover-arrow-width
height: $popover-arrow-height
margin: 0 $border-radius-lg
&::before,
&::after
position: absolute
display: block
content: ""
border-color: transparent
border-style: solid
.bs-popover-top
margin-bottom: $popover-arrow-height
.arrow
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1)
.arrow::before,
.arrow::after
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0
.arrow::before
bottom: 0
border-top-color: $popover-arrow-outer-color
.arrow::after
bottom: $popover-border-width
border-top-color: $popover-arrow-color
.bs-popover-right
margin-left: $popover-arrow-height
.arrow
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1)
width: $popover-arrow-height
height: $popover-arrow-width
margin: $border-radius-lg 0
// make sure the arrow does not touch the popover's rounded corners
.arrow::before,
.arrow::after
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0
.arrow::before
left: 0
border-right-color: $popover-arrow-outer-color
.arrow::after
left: $popover-border-width
border-right-color: $popover-arrow-color
.bs-popover-bottom
margin-top: $popover-arrow-height
.arrow
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1)
.arrow::before,
.arrow::after
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2)
.arrow::before
top: 0
border-bottom-color: $popover-arrow-outer-color
.arrow::after
top: $popover-border-width
border-bottom-color: $popover-arrow-color
// This will remove the popover-header's border just below the arrow
.popover-header::before
position: absolute
top: 0
left: 50%
display: block
width: $popover-arrow-width
margin-left: $popover-arrow-width / -2
content: ""
border-bottom: $popover-border-width solid $popover-header-bg
.bs-popover-left
margin-right: $popover-arrow-height
.arrow
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1)
width: $popover-arrow-height
height: $popover-arrow-width
margin: $border-radius-lg 0
// make sure the arrow does not touch the popover's rounded corners
.arrow::before,
.arrow::after
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height
.arrow::before
right: 0
border-left-color: $popover-arrow-outer-color
.arrow::after
right: $popover-border-width
border-left-color: $popover-arrow-color
.bs-popover-auto
&[x-placement^="top"]
@extend .bs-popover-top
&[x-placement^="right"]
@extend .bs-popover-right
&[x-placement^="bottom"]
@extend .bs-popover-bottom
&[x-placement^="left"]
@extend .bs-popover-left
// Offset the popover to account for the popover arrow
.popover-header
padding: $popover-header-padding-y $popover-header-padding-x
margin-bottom: 0
// Reset the default from Reboot
font-size: $font-size-base
color: $popover-header-color
background-color: $popover-header-bg
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%)
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width})
+border-top-radius($offset-border-width)
&:empty
display: none
.popover-body
padding: $popover-body-padding-y $popover-body-padding-x
color: $popover-body-color

View File

@@ -0,0 +1,124 @@
// stylelint-disable declaration-no-important, selector-no-qualifying-type
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request:
// https://www.phpied.com/delay-loading-your-print-css/
// ==========================================================================
@if $enable-print-styles
@media print
*,
*::before,
*::after
// Bootstrap specific; comment out `color` and `background`
//color: $black !important; // Black prints faster
text-shadow: none !important
//background: transparent !important;
box-shadow: none !important
a
&:not(.btn)
text-decoration: underline
// Bootstrap specific; comment the following selector out
//a[href]::after {
// content: " (" attr(href) ")";
//}
abbr[title]::after
content: " (" attr(title) ")"
// Bootstrap specific; comment the following selector out
//
// Don't show links that are fragment identifiers,
// or use the `javascript:` pseudo protocol
//
//a[href^="#"]::after,
//a[href^="javascript:"]::after {
// content: "";
//}
pre
white-space: pre-wrap !important
pre,
blockquote
border: $border-width solid $gray-500
// Bootstrap custom code; using `$border-width` instead of 1px
page-break-inside: avoid
//
// Printing Tables:
// http://css-discuss.incutio.com/wiki/Printing_Tables
//
thead
display: table-header-group
tr,
img
page-break-inside: avoid
p,
h2,
h3
orphans: 3
widows: 3
h2,
h3
page-break-after: avoid
// Bootstrap specific changes start
// Specify a size and min-width to make printing closer across browsers.
// We don't set margin here because it breaks `size` in Chrome. We also
// don't use `!important` on `size` as it breaks in Chrome.
@page
size: $print-page-size
body
min-width: $print-body-min-width !important
.container
min-width: $print-body-min-width !important
// Bootstrap components
.navbar
display: none
.badge
border: $border-width solid $black
.table
border-collapse: collapse !important
td,
th
background-color: $white !important
.table-bordered
th,
td
border: 1px solid $gray-300 !important
.table-dark
color: inherit
th,
td,
thead th,
tbody + tbody
border-color: $table-border-color
.table .thead-dark th
color: inherit
border-color: $table-border-color
// Bootstrap specific changes end

View File

@@ -0,0 +1,37 @@
@keyframes progress-bar-stripes
from
background-position: $progress-height 0
to
background-position: 0 0
.progress
display: flex
height: $progress-height
overflow: hidden
// force rounded corners by cropping it
font-size: $progress-font-size
background-color: $progress-bg
+border-radius($progress-border-radius)
+box-shadow($progress-box-shadow)
.progress-bar
display: flex
flex-direction: column
justify-content: center
color: $progress-bar-color
text-align: center
white-space: nowrap
background-color: $progress-bar-bg
+transition($progress-bar-transition)
.progress-bar-striped
+gradient-striped
background-size: $progress-height $progress-height
.progress-bar-animated
animation: progress-bar-stripes $progress-bar-animation-timing

View File

@@ -0,0 +1,513 @@
// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
// Reboot
//
// Normalization of HTML elements, manually forked from Normalize.css to remove
// styles targeting irrelevant browsers while applying new styles.
//
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
// Document
//
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
// 2. Change the default font family in all browsers.
// 3. Correct the line height in all browsers.
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
// 6. Change the default tap highlight to be completely transparent in iOS.
*,
*::before,
*::after
box-sizing: border-box
// 1
html
font-family: sans-serif
// 2
line-height: 1.15
// 3
-webkit-text-size-adjust: 100%
// 4
-ms-text-size-adjust: 100%
// 4
-ms-overflow-style: scrollbar
// 5
-webkit-tap-highlight-color: rgba($black, 0)
// 6
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
@at-root
@-ms-viewport
width: device-width
// stylelint-disable selector-list-comma-newline-after
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section
display: block
// stylelint-enable selector-list-comma-newline-after
// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use the
// the `inherit` value on things like `<th>` elements.
body
margin: 0
// 1
font-family: $font-family-base
font-size: $font-size-base
font-weight: $font-weight-base
line-height: $line-height-base
color: $body-color
text-align: left
// 3
background-color: $body-bg
// 2
// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus
outline: 0 !important
// Content grouping
//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.
hr
box-sizing: content-box
// 1
height: 0
// 1
overflow: visible
// 2
//
// Typography
//
// Remove top margins from headings
//
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
// stylelint-disable selector-list-comma-newline-after
h1, h2, h3, h4, h5, h6
margin-top: 0
margin-bottom: $headings-margin-bottom
// stylelint-enable selector-list-comma-newline-after
// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
p
margin-top: 0
margin-bottom: $paragraph-margin-bottom
// Abbreviations
//
// 1. Remove the bottom border in Firefox 39-.
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.
// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
abbr[title],
abbr[data-original-title]
// 4
text-decoration: underline
// 2
text-decoration: underline dotted
// 2
cursor: help
// 3
border-bottom: 0
// 1
address
margin-bottom: 1rem
font-style: normal
line-height: inherit
ol,
ul,
dl
margin-top: 0
margin-bottom: 1rem
ol ol,
ul ul,
ol ul,
ul ol
margin-bottom: 0
dt
font-weight: $dt-font-weight
dd
margin-bottom: .5rem
margin-left: 0
// Undo browser default
blockquote
margin: 0 0 1rem
dfn
font-style: italic
// Add the correct font style in Android 4.3-
// stylelint-disable font-weight-notation
b,
strong
font-weight: bolder
// Add the correct font weight in Chrome, Edge, and Safari
// stylelint-enable font-weight-notation
small
font-size: 80%
// Add the correct font size in all browsers
//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
//
sub,
sup
position: relative
font-size: 75%
line-height: 0
vertical-align: baseline
sub
bottom: -.25em
sup
top: -.5em
//
// Links
//
a
color: $link-color
text-decoration: $link-decoration
background-color: transparent
// Remove the gray background on active links in IE 10.
-webkit-text-decoration-skip: objects
// Remove gaps in links underline in iOS 8+ and Safari 8+.
+hover
color: $link-hover-color
text-decoration: $link-hover-decoration
// 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]):not([tabindex])
color: inherit
text-decoration: none
+hover-focus
color: inherit
text-decoration: none
&:focus
outline: 0
//
// Code
//
pre,
code,
kbd,
samp
font-family: $font-family-monospace
font-size: 1em
// Correct the odd `em` font sizing in all browsers.
pre
// Remove browser default top margin
margin-top: 0
// Reset browser default of `1em` to use `rem`s
margin-bottom: 1rem
// Don't allow content to break outside
overflow: auto
// We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
-ms-overflow-style: scrollbar
//
// Figures
//
figure
// Apply a consistent margin strategy (matches our type styles).
margin: 0 0 1rem
//
// Images and content
//
img
vertical-align: middle
border-style: none
// Remove the border on images inside links in IE 10-.
svg:not(:root)
overflow: hidden
// Hide the overflow in IE
vertical-align: middle
//
// Tables
//
table
border-collapse: collapse
// Prevent double borders
caption
padding-top: $table-cell-padding
padding-bottom: $table-cell-padding
color: $table-caption-color
text-align: left
caption-side: bottom
th
// Matches default `<td>` alignment by inheriting from the `<body>`, or the
// closest parent with a set `text-align`.
text-align: inherit
//
// Forms
//
label
// Allow labels to use `margin` for spacing.
display: inline-block
margin-bottom: $label-margin-bottom
// Remove the default `border-radius` that macOS Chrome adds.
//
// Details at https://github.com/twbs/bootstrap/issues/24093
button
border-radius: 0
// Work around a Firefox/IE bug where the transparent `button` background
// results in a loss of the default `button` focus styles.
//
// Credit: https://github.com/suitcss/base/
button:focus
outline: 1px dotted
outline: 5px auto -webkit-focus-ring-color
input,
button,
select,
optgroup,
textarea
margin: 0
// Remove the margin in Firefox and Safari
font-family: inherit
font-size: inherit
line-height: inherit
button,
input
overflow: visible
// Show the overflow in Edge
button,
select
text-transform: none
// Remove the inheritance of text transform in Firefox
// 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 and Safari.
button,
html [type="button"],
[type="reset"],
[type="submit"]
-webkit-appearance: button
// 2
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner
padding: 0
border-style: none
input[type="radio"],
input[type="checkbox"]
box-sizing: border-box
// 1. Add the correct box sizing in IE 10-
padding: 0
// 2. Remove the padding in IE 10-
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"]
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
// bug where setting a custom line-height prevents text from being vertically
// centered within the input.
// See https://bugs.webkit.org/show_bug.cgi?id=139848
// and https://github.com/twbs/bootstrap/issues/11266
-webkit-appearance: listbox
textarea
overflow: auto
// Remove the default vertical scrollbar in IE.
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
resize: vertical
fieldset
// Browsers set a default `min-width: min-content;` on fieldsets,
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
// So we reset that to ensure fieldsets behave more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
min-width: 0
// Reset the default outline behavior of fieldsets so they don't affect page layout.
padding: 0
margin: 0
border: 0
// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
legend
display: block
width: 100%
max-width: 100%
// 1
padding: 0
margin-bottom: .5rem
font-size: 1.5rem
line-height: inherit
color: inherit
// 2
white-space: normal
// 1
progress
vertical-align: baseline
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button
height: auto
[type="search"]
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
outline-offset: -2px
// 2. Correct the outline style in Safari.
-webkit-appearance: none
//
// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
//
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration
-webkit-appearance: none
//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//
\::-webkit-file-upload-button
font: inherit
// 2
-webkit-appearance: button
// 1
//
// Correct element displays
//
output
display: inline-block
summary
display: list-item
// Add the correct display in all browsers
cursor: pointer
template
display: none
// Add the correct display in IE
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
// Needed for proper display in IE 10-.
[hidden]
display: none !important

View File

@@ -0,0 +1,15 @@
\:root
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors
--#{$color}: #{$value}
@each $color, $value in $theme-colors
--#{$color}: #{$value}
@each $bp, $value in $grid-breakpoints
--breakpoint-#{$bp}: #{$value}
// Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--font-family-sans-serif: #{inspect($font-family-sans-serif)}
--font-family-monospace: #{inspect($font-family-monospace)}

View File

@@ -0,0 +1,149 @@
//
// Basic Bootstrap table
//
.table
width: 100%
max-width: 100%
margin-bottom: $spacer
background-color: $table-bg
// Reset for nesting within parents with `background-color`.
th,
td
padding: $table-cell-padding
vertical-align: top
border-top: $table-border-width solid $table-border-color
thead th
vertical-align: bottom
border-bottom: (2 * $table-border-width) solid $table-border-color
tbody + tbody
border-top: (2 * $table-border-width) solid $table-border-color
.table
background-color: $body-bg
//
// Condensed table w/ half padding
//
.table-sm
th,
td
padding: $table-cell-padding-sm
// Border versions
//
// Add or remove borders all around the table and between all the columns.
.table-bordered
border: $table-border-width solid $table-border-color
th,
td
border: $table-border-width solid $table-border-color
thead
th,
td
border-bottom-width: 2 * $table-border-width
.table-borderless
th,
td,
thead th,
tbody + tbody
border: 0
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped
tbody tr:nth-of-type(#{$table-striped-order})
background-color: $table-accent-bg
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover
tbody tr
+hover
background-color: $table-hover-bg
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
@each $color, $value in $theme-colors
+table-row-variant($color, theme-color-level($color, -9))
+table-row-variant(active, $table-active-bg)
// Dark styles
//
// Same table markup, but inverted color scheme: dark background and light text.
// stylelint-disable-next-line no-duplicate-selectors
.table
.thead-dark
th
color: $table-dark-color
background-color: $table-dark-bg
border-color: $table-dark-border-color
.thead-light
th
color: $table-head-color
background-color: $table-head-bg
border-color: $table-border-color
.table-dark
color: $table-dark-color
background-color: $table-dark-bg
th,
td,
thead th
border-color: $table-dark-border-color
&.table-bordered
border: 0
&.table-striped
tbody tr:nth-of-type(odd)
background-color: $table-dark-accent-bg
&.table-hover
tbody tr
+hover
background-color: $table-dark-hover-bg
// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
.table-responsive
@each $breakpoint in map-keys($grid-breakpoints)
$next: breakpoint-next($breakpoint, $grid-breakpoints)
$infix: breakpoint-infix($next, $grid-breakpoints)
&#{$infix}
+media-breakpoint-down($breakpoint)
display: block
width: 100%
overflow-x: auto
-webkit-overflow-scrolling: touch
-ms-overflow-style: -ms-autohiding-scrollbar
// See https://github.com/twbs/bootstrap/pull/10057
// Prevent double border on horizontal scroll due to use of `display: block;`
> .table-bordered
border: 0

View File

@@ -0,0 +1,102 @@
// Base class
.tooltip
position: absolute
z-index: $zindex-tooltip
display: block
margin: $tooltip-margin
// 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.
+reset-text
font-size: $tooltip-font-size
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word
opacity: 0
&.show
opacity: $tooltip-opacity
.arrow
position: absolute
display: block
width: $tooltip-arrow-width
height: $tooltip-arrow-height
&::before
position: absolute
content: ""
border-color: transparent
border-style: solid
.bs-tooltip-top
padding: $tooltip-arrow-height 0
.arrow
bottom: 0
&::before
top: 0
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0
border-top-color: $tooltip-arrow-color
.bs-tooltip-right
padding: 0 $tooltip-arrow-height
.arrow
left: 0
width: $tooltip-arrow-height
height: $tooltip-arrow-width
&::before
right: 0
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0
border-right-color: $tooltip-arrow-color
.bs-tooltip-bottom
padding: $tooltip-arrow-height 0
.arrow
top: 0
&::before
bottom: 0
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height
border-bottom-color: $tooltip-arrow-color
.bs-tooltip-left
padding: 0 $tooltip-arrow-height
.arrow
right: 0
width: $tooltip-arrow-height
height: $tooltip-arrow-width
&::before
left: 0
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height
border-left-color: $tooltip-arrow-color
.bs-tooltip-auto
&[x-placement^="top"]
@extend .bs-tooltip-top
&[x-placement^="right"]
@extend .bs-tooltip-right
&[x-placement^="bottom"]
@extend .bs-tooltip-bottom
&[x-placement^="left"]
@extend .bs-tooltip-left
// Wrapper for the tooltip content
.tooltip-inner
max-width: $tooltip-max-width
padding: $tooltip-padding-y $tooltip-padding-x
color: $tooltip-color
text-align: center
background-color: $tooltip-bg
+border-radius($tooltip-border-radius)

View File

@@ -0,0 +1,18 @@
// stylelint-disable selector-no-qualifying-type
.fade
+transition($transition-fade)
&:not(.show)
opacity: 0
.collapse
&:not(.show)
display: none
.collapsing
position: relative
height: 0
overflow: hidden
+transition($transition-collapse)

View File

@@ -0,0 +1,123 @@
// stylelint-disable declaration-no-important, selector-list-comma-newline-after
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6
margin-bottom: $headings-margin-bottom
font-family: $headings-font-family
font-weight: $headings-font-weight
line-height: $headings-line-height
color: $headings-color
h1, .h1
font-size: $h1-font-size
h2, .h2
font-size: $h2-font-size
h3, .h3
font-size: $h3-font-size
h4, .h4
font-size: $h4-font-size
h5, .h5
font-size: $h5-font-size
h6, .h6
font-size: $h6-font-size
.lead
font-size: $lead-font-size
font-weight: $lead-font-weight
// Type display classes
.display-1
font-size: $display1-size
font-weight: $display1-weight
line-height: $display-line-height
.display-2
font-size: $display2-size
font-weight: $display2-weight
line-height: $display-line-height
.display-3
font-size: $display3-size
font-weight: $display3-weight
line-height: $display-line-height
.display-4
font-size: $display4-size
font-weight: $display4-weight
line-height: $display-line-height
//
// Horizontal rules
//
hr
margin-top: $hr-margin-y
margin-bottom: $hr-margin-y
border: 0
border-top: $hr-border-width solid $hr-border-color
//
// Emphasis
//
small,
.small
font-size: $small-font-size
font-weight: $font-weight-normal
mark,
.mark
padding: $mark-padding
background-color: $mark-bg
//
// Lists
//
.list-unstyled
+list-unstyled
// Inline turns list items into inline-block
.list-inline
+list-unstyled
.list-inline-item
display: inline-block
&:not(:last-child)
margin-right: $list-inline-padding
//
// Misc
//
// Builds on `abbr`
.initialism
font-size: 90%
text-transform: uppercase
// Blockquotes
.blockquote
margin-bottom: $spacer
font-size: $blockquote-font-size
.blockquote-footer
display: block
font-size: 80%
// back to default font-size
color: $blockquote-small-color
&::before
content: "\2014 \00A0"
// em dash, nbsp

View File

@@ -0,0 +1,15 @@
@import utilities/align
@import utilities/background
@import utilities/borders
@import utilities/clearfix
@import utilities/display
@import utilities/embed
@import utilities/flex
@import utilities/float
@import utilities/position
@import utilities/screenreaders
@import utilities/shadows
@import utilities/sizing
@import utilities/spacing
@import utilities/text
@import utilities/visibility

View File

@@ -0,0 +1,868 @@
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
//
// Color system
//
$white: #fff !default
$gray-100: #f8f9fa !default
$gray-200: #e9ecef !default
$gray-300: #dee2e6 !default
$gray-400: #ced4da !default
$gray-500: #adb5bd !default
$gray-600: #6c757d !default
$gray-700: #495057 !default
$gray-800: #343a40 !default
$gray-900: #212529 !default
$black: #000 !default
$grays: () !default
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(("100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900), $grays)
$blue: #007bff !default
$indigo: #6610f2 !default
$purple: #6f42c1 !default
$pink: #e83e8c !default
$red: #dc3545 !default
$orange: #fd7e14 !default
$yellow: #ffc107 !default
$green: #28a745 !default
$teal: #20c997 !default
$cyan: #17a2b8 !default
$colors: () !default
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(("blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan, "white": $white, "gray": $gray-600, "gray-dark": $gray-800), $colors)
$primary: $blue !default
$secondary: $gray-600 !default
$success: $green !default
$info: $cyan !default
$warning: $yellow !default
$danger: $red !default
$light: $gray-100 !default
$dark: $gray-800 !default
$theme-colors: () !default
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(("primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark), $theme-colors)
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default
// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: $gray-900 !default
$yiq-text-light: $white !default
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default
$enable-rounded: true !default
$enable-shadows: false !default
$enable-gradients: false !default
$enable-transitions: true !default
$enable-hover-media-query: false !default
// Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true !default
$enable-print-styles: true !default
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem !default
$spacers: () !default
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge((0: 0, 1: $spacer * 0.25, 2: $spacer * 0.5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3), $spacers)
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default
// stylelint-disable-next-line scss/dollar-variable-default
$sizes: map-merge((25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto), $sizes)
// Body
//
// Settings for the `<body>` element.
$body-bg: $white !default
$body-color: $gray-900 !default
// Links
//
// Style anchor elements.
$link-color: theme-color("primary") !default
$link-decoration: none !default
$link-hover-color: darken($link-color, 15%) !default
$link-hover-decoration: underline !default
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 1rem !default
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default
+_assert-ascending($grid-breakpoints, "$grid-breakpoints")
+_assert-starts-at-zero($grid-breakpoints)
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px) !default
+_assert-ascending($container-max-widths, "$container-max-widths")
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default
$grid-gutter-width: 30px !default
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: 1.5 !default
$line-height-sm: 1.5 !default
$border-width: 1px !default
$border-color: $gray-300 !default
$border-radius: 0.25rem !default
$border-radius-lg: 0.3rem !default
$border-radius-sm: 0.2rem !default
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default
$component-active-color: $white !default
$component-active-bg: theme-color("primary") !default
$caret-width: 0.3em !default
$transition-base: all 0.2s ease-in-out !default
$transition-fade: opacity 0.15s linear !default
$transition-collapse: height 0.35s ease !default
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default
$font-family-base: $font-family-sans-serif !default
// stylelint-enable value-keyword-case
$font-size-base: 1rem !default
// Assumes the browser default, typically `16px`
$font-size-lg: $font-size-base * 1.25 !default
$font-size-sm: $font-size-base * 0.875 !default
$font-weight-light: 300 !default
$font-weight-normal: 400 !default
$font-weight-bold: 700 !default
$font-weight-base: $font-weight-normal !default
$line-height-base: 1.5 !default
$h1-font-size: $font-size-base * 2.5 !default
$h2-font-size: $font-size-base * 2 !default
$h3-font-size: $font-size-base * 1.75 !default
$h4-font-size: $font-size-base * 1.5 !default
$h5-font-size: $font-size-base * 1.25 !default
$h6-font-size: $font-size-base !default
$headings-margin-bottom: $spacer / 2 !default
$headings-font-family: inherit !default
$headings-font-weight: 500 !default
$headings-line-height: 1.2 !default
$headings-color: inherit !default
$display1-size: 6rem !default
$display2-size: 5.5rem !default
$display3-size: 4.5rem !default
$display4-size: 3.5rem !default
$display1-weight: 300 !default
$display2-weight: 300 !default
$display3-weight: 300 !default
$display4-weight: 300 !default
$display-line-height: $headings-line-height !default
$lead-font-size: $font-size-base * 1.25 !default
$lead-font-weight: 300 !default
$small-font-size: 80% !default
$text-muted: $gray-600 !default
$blockquote-small-color: $gray-600 !default
$blockquote-font-size: $font-size-base * 1.25 !default
$hr-border-color: rgba($black, 0.1) !default
$hr-border-width: $border-width !default
$mark-padding: 0.2em !default
$dt-font-weight: $font-weight-bold !default
$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default
$nested-kbd-font-weight: $font-weight-bold !default
$list-inline-padding: 0.5rem !default
$mark-bg: #fcf8e3 !default
$hr-margin-y: $spacer !default
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: 0.75rem !default
$table-cell-padding-sm: 0.3rem !default
$table-bg: transparent !default
$table-accent-bg: rgba($black, 0.05) !default
$table-hover-bg: rgba($black, 0.075) !default
$table-active-bg: $table-hover-bg !default
$table-border-width: $border-width !default
$table-border-color: $gray-300 !default
$table-head-bg: $gray-200 !default
$table-head-color: $gray-700 !default
$table-dark-bg: $gray-900 !default
$table-dark-accent-bg: rgba($white, 0.05) !default
$table-dark-hover-bg: rgba($white, 0.075) !default
$table-dark-border-color: lighten($gray-900, 7.5%) !default
$table-dark-color: $body-bg !default
$table-striped-order: odd !default
$table-caption-color: $text-muted !default
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-padding-y: 0.375rem !default
$input-btn-padding-x: 0.75rem !default
$input-btn-line-height: $line-height-base !default
$input-btn-focus-width: 0.2rem !default
$input-btn-focus-color: rgba($component-active-bg, 0.25) !default
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default
$input-btn-padding-y-sm: 0.25rem !default
$input-btn-padding-x-sm: 0.5rem !default
$input-btn-line-height-sm: $line-height-sm !default
$input-btn-padding-y-lg: 0.5rem !default
$input-btn-padding-x-lg: 1rem !default
$input-btn-line-height-lg: $line-height-lg !default
$input-btn-border-width: $border-width !default
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-padding-y: $input-btn-padding-y !default
$btn-padding-x: $input-btn-padding-x !default
$btn-line-height: $input-btn-line-height !default
$btn-padding-y-sm: $input-btn-padding-y-sm !default
$btn-padding-x-sm: $input-btn-padding-x-sm !default
$btn-line-height-sm: $input-btn-line-height-sm !default
$btn-padding-y-lg: $input-btn-padding-y-lg !default
$btn-padding-x-lg: $input-btn-padding-x-lg !default
$btn-line-height-lg: $input-btn-line-height-lg !default
$btn-border-width: $input-btn-border-width !default
$btn-font-weight: $font-weight-normal !default
$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default
$btn-focus-width: $input-btn-focus-width !default
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default
$btn-disabled-opacity: 0.65 !default
$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default
$btn-link-disabled-color: $gray-600 !default
$btn-block-spacing-y: 0.5rem !default
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default
$btn-border-radius-lg: $border-radius-lg !default
$btn-border-radius-sm: $border-radius-sm !default
$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default
// Forms
$label-margin-bottom: 0.5rem !default
$input-padding-y: $input-btn-padding-y !default
$input-padding-x: $input-btn-padding-x !default
$input-line-height: $input-btn-line-height !default
$input-padding-y-sm: $input-btn-padding-y-sm !default
$input-padding-x-sm: $input-btn-padding-x-sm !default
$input-line-height-sm: $input-btn-line-height-sm !default
$input-padding-y-lg: $input-btn-padding-y-lg !default
$input-padding-x-lg: $input-btn-padding-x-lg !default
$input-line-height-lg: $input-btn-line-height-lg !default
$input-bg: $white !default
$input-disabled-bg: $gray-200 !default
$input-color: $gray-700 !default
$input-border-color: $gray-400 !default
$input-border-width: $input-btn-border-width !default
$input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default
$input-border-radius: $border-radius !default
$input-border-radius-lg: $border-radius-lg !default
$input-border-radius-sm: $border-radius-sm !default
$input-focus-bg: $input-bg !default
$input-focus-border-color: lighten($component-active-bg, 25%) !default
$input-focus-color: $input-color !default
$input-focus-width: $input-btn-focus-width !default
$input-focus-box-shadow: $input-btn-focus-box-shadow !default
$input-placeholder-color: $gray-600 !default
$input-plaintext-color: $body-color !default
$input-height-border: $input-border-width * 2 !default
$input-height-inner: $font-size-base * $input-btn-line-height + $input-btn-padding-y * 2 !default
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default
$input-height-inner-sm: $font-size-sm * $input-btn-line-height-sm + $input-btn-padding-y-sm * 2 !default
$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default
$input-height-inner-lg: $font-size-lg * $input-btn-line-height-lg + $input-btn-padding-y-lg * 2 !default
$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default
$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default
$form-text-margin-top: 0.25rem !default
$form-check-input-gutter: 1.25rem !default
$form-check-input-margin-y: 0.3rem !default
$form-check-input-margin-x: 0.25rem !default
$form-check-inline-margin-x: 0.75rem !default
$form-check-inline-input-margin-x: 0.3125rem !default
$form-group-margin-bottom: 1rem !default
$input-group-addon-color: $input-color !default
$input-group-addon-bg: $gray-200 !default
$input-group-addon-border-color: $input-border-color !default
$custom-forms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default
$custom-control-gutter: 1.5rem !default
$custom-control-spacer-x: 1rem !default
$custom-control-indicator-size: 1rem !default
$custom-control-indicator-bg: $gray-300 !default
$custom-control-indicator-bg-size: 50% 50% !default
$custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default
$custom-control-indicator-disabled-bg: $gray-200 !default
$custom-control-label-disabled-color: $gray-600 !default
$custom-control-indicator-checked-color: $component-active-color !default
$custom-control-indicator-checked-bg: $component-active-bg !default
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), 0.5) !default
$custom-control-indicator-checked-box-shadow: none !default
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default
$custom-control-indicator-active-color: $component-active-color !default
$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default
$custom-control-indicator-active-box-shadow: none !default
$custom-checkbox-indicator-border-radius: $border-radius !default
$custom-checkbox-indicator-icon-checked: str-replace(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-indicator-checked-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"), "#", "%23") !default
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default
$custom-checkbox-indicator-icon-indeterminate: str-replace(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-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default
$custom-checkbox-indicator-indeterminate-box-shadow: none !default
$custom-radio-indicator-border-radius: 50% !default
$custom-radio-indicator-icon-checked: str-replace(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-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default
$custom-select-padding-y: 0.375rem !default
$custom-select-padding-x: 0.75rem !default
$custom-select-height: $input-height !default
$custom-select-indicator-padding: 1rem !default
// Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height: $input-btn-line-height !default
$custom-select-color: $input-color !default
$custom-select-disabled-color: $gray-600 !default
$custom-select-bg: $input-bg !default
$custom-select-disabled-bg: $gray-200 !default
$custom-select-bg-size: 8px 10px !default
// In pixels because image dimensions
$custom-select-indicator-color: $gray-800 !default
$custom-select-indicator: str-replace(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"), "#", "%23") !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
$custom-select-box-shadow: inset 0 1px 2px rgba($black, 0.075) !default
$custom-select-focus-border-color: $input-focus-border-color !default
$custom-select-focus-width: $input-btn-focus-width !default
$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, 0.5) !default
$custom-select-font-size-sm: 75% !default
$custom-select-height-sm: $input-height-sm !default
$custom-select-font-size-lg: 125% !default
$custom-select-height-lg: $input-height-lg !default
$custom-range-track-width: 100% !default
$custom-range-track-height: 0.5rem !default
$custom-range-track-cursor: pointer !default
$custom-range-track-bg: $gray-300 !default
$custom-range-track-border-radius: 1rem !default
$custom-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default
$custom-range-thumb-width: 1rem !default
$custom-range-thumb-height: $custom-range-thumb-width !default
$custom-range-thumb-bg: $component-active-bg !default
$custom-range-thumb-border: 0 !default
$custom-range-thumb-border-radius: 1rem !default
$custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default
$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default
$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default
$custom-file-height: $input-height !default
$custom-file-height-inner: $input-height-inner !default
$custom-file-focus-border-color: $input-focus-border-color !default
$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default
$custom-file-disabled-bg: $input-disabled-bg !default
$custom-file-padding-y: $input-btn-padding-y !default
$custom-file-padding-x: $input-btn-padding-x !default
$custom-file-line-height: $input-btn-line-height !default
$custom-file-color: $input-color !default
$custom-file-bg: $input-bg !default
$custom-file-border-width: $input-btn-border-width !default
$custom-file-border-color: $input-border-color !default
$custom-file-border-radius: $input-border-radius !default
$custom-file-box-shadow: $input-box-shadow !default
$custom-file-button-color: $custom-file-color !default
$custom-file-button-bg: $input-group-addon-bg !default
$custom-file-text: (en: "Browse") !default
// Form validation
$form-feedback-margin-top: $form-text-margin-top !default
$form-feedback-font-size: $small-font-size !default
$form-feedback-valid-color: theme-color("success") !default
$form-feedback-invalid-color: theme-color("danger") !default
// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-min-width: 10rem !default
$dropdown-padding-y: 0.5rem !default
$dropdown-spacer: 0.125rem !default
$dropdown-bg: $white !default
$dropdown-border-color: rgba($black, 0.15) !default
$dropdown-border-radius: $border-radius !default
$dropdown-border-width: $border-width !default
$dropdown-divider-bg: $gray-200 !default
$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default
$dropdown-link-color: $gray-900 !default
$dropdown-link-hover-color: darken($gray-900, 5%) !default
$dropdown-link-hover-bg: $gray-100 !default
$dropdown-link-active-color: $component-active-color !default
$dropdown-link-active-bg: $component-active-bg !default
$dropdown-link-disabled-color: $gray-600 !default
$dropdown-item-padding-y: 0.25rem !default
$dropdown-item-padding-x: 1.5rem !default
$dropdown-header-color: $gray-600 !default
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
$zindex-dropdown: 1000 !default
$zindex-sticky: 1020 !default
$zindex-fixed: 1030 !default
$zindex-modal-backdrop: 1040 !default
$zindex-modal: 1050 !default
$zindex-popover: 1060 !default
$zindex-tooltip: 1070 !default
// Navs
$nav-link-padding-y: 0.5rem !default
$nav-link-padding-x: 1rem !default
$nav-link-disabled-color: $gray-600 !default
$nav-tabs-border-color: $gray-300 !default
$nav-tabs-border-width: $border-width !default
$nav-tabs-border-radius: $border-radius !default
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default
$nav-tabs-link-active-color: $gray-700 !default
$nav-tabs-link-active-bg: $body-bg !default
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default
$nav-pills-border-radius: $border-radius !default
$nav-pills-link-active-color: $component-active-color !default
$nav-pills-link-active-bg: $component-active-bg !default
$nav-divider-color: $gray-200 !default
$nav-divider-margin-y: $spacer / 2 !default
// Navbar
$navbar-padding-y: $spacer / 2 !default
$navbar-padding-x: $spacer !default
$navbar-nav-link-padding-x: 0.5rem !default
$navbar-brand-font-size: $font-size-lg !default
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default
$navbar-toggler-padding-y: 0.25rem !default
$navbar-toggler-padding-x: 0.75rem !default
$navbar-toggler-font-size: $font-size-lg !default
$navbar-toggler-border-radius: $btn-border-radius !default
$navbar-dark-color: rgba($white, 0.5) !default
$navbar-dark-hover-color: rgba($white, 0.75) !default
$navbar-dark-active-color: $white !default
$navbar-dark-disabled-color: rgba($white, 0.25) !default
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default
$navbar-dark-toggler-border-color: rgba($white, 0.1) !default
$navbar-light-color: rgba($black, 0.5) !default
$navbar-light-hover-color: rgba($black, 0.7) !default
$navbar-light-active-color: rgba($black, 0.9) !default
$navbar-light-disabled-color: rgba($black, 0.3) !default
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default
$navbar-light-toggler-border-color: rgba($black, 0.1) !default
// Pagination
$pagination-padding-y: 0.5rem !default
$pagination-padding-x: 0.75rem !default
$pagination-padding-y-sm: 0.25rem !default
$pagination-padding-x-sm: 0.5rem !default
$pagination-padding-y-lg: 0.75rem !default
$pagination-padding-x-lg: 1.5rem !default
$pagination-line-height: 1.25 !default
$pagination-color: $link-color !default
$pagination-bg: $white !default
$pagination-border-width: $border-width !default
$pagination-border-color: $gray-300 !default
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default
$pagination-focus-outline: 0 !default
$pagination-hover-color: $link-hover-color !default
$pagination-hover-bg: $gray-200 !default
$pagination-hover-border-color: $gray-300 !default
$pagination-active-color: $component-active-color !default
$pagination-active-bg: $component-active-bg !default
$pagination-active-border-color: $pagination-active-bg !default
$pagination-disabled-color: $gray-600 !default
$pagination-disabled-bg: $white !default
$pagination-disabled-border-color: $gray-300 !default
// Jumbotron
$jumbotron-padding: 2rem !default
$jumbotron-bg: $gray-200 !default
// Cards
$card-spacer-y: 0.75rem !default
$card-spacer-x: 1.25rem !default
$card-border-width: $border-width !default
$card-border-radius: $border-radius !default
$card-border-color: rgba($black, 0.125) !default
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default
$card-cap-bg: rgba($black, 0.03) !default
$card-bg: $white !default
$card-img-overlay-padding: 1.25rem !default
$card-group-margin: $grid-gutter-width / 2 !default
$card-deck-margin: $card-group-margin !default
$card-columns-count: 3 !default
$card-columns-gap: 1.25rem !default
$card-columns-margin: $card-spacer-y !default
// Tooltips
$tooltip-font-size: $font-size-sm !default
$tooltip-max-width: 200px !default
$tooltip-color: $white !default
$tooltip-bg: $black !default
$tooltip-border-radius: $border-radius !default
$tooltip-opacity: 0.9 !default
$tooltip-padding-y: 0.25rem !default
$tooltip-padding-x: 0.5rem !default
$tooltip-margin: 0 !default
$tooltip-arrow-width: 0.8rem !default
$tooltip-arrow-height: 0.4rem !default
$tooltip-arrow-color: $tooltip-bg !default
// Popovers
$popover-font-size: $font-size-sm !default
$popover-bg: $white !default
$popover-max-width: 276px !default
$popover-border-width: $border-width !default
$popover-border-color: rgba($black, 0.2) !default
$popover-border-radius: $border-radius-lg !default
$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default
$popover-header-bg: darken($popover-bg, 3%) !default
$popover-header-color: $headings-color !default
$popover-header-padding-y: 0.5rem !default
$popover-header-padding-x: 0.75rem !default
$popover-body-color: $body-color !default
$popover-body-padding-y: $popover-header-padding-y !default
$popover-body-padding-x: $popover-header-padding-x !default
$popover-arrow-width: 1rem !default
$popover-arrow-height: 0.5rem !default
$popover-arrow-color: $popover-bg !default
$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default
// Badges
$badge-font-size: 75% !default
$badge-font-weight: $font-weight-bold !default
$badge-padding-y: 0.25em !default
$badge-padding-x: 0.4em !default
$badge-border-radius: $border-radius !default
$badge-pill-padding-x: 0.6em !default
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$badge-pill-border-radius: 10rem !default
// Modals
// Padding applied to the modal body
$modal-inner-padding: 1rem !default
$modal-dialog-margin: 0.5rem !default
$modal-dialog-margin-y-sm-up: 1.75rem !default
$modal-title-line-height: $line-height-base !default
$modal-content-bg: $white !default
$modal-content-border-color: rgba($black, 0.2) !default
$modal-content-border-width: $border-width !default
$modal-content-border-radius: $border-radius-lg !default
$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default
$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default
$modal-backdrop-bg: $black !default
$modal-backdrop-opacity: 0.5 !default
$modal-header-border-color: $gray-200 !default
$modal-footer-border-color: $modal-header-border-color !default
$modal-header-border-width: $modal-content-border-width !default
$modal-footer-border-width: $modal-header-border-width !default
$modal-header-padding: 1rem !default
$modal-lg: 800px !default
$modal-md: 500px !default
$modal-sm: 300px !default
$modal-transition: transform 0.3s ease-out !default
// Alerts
//
// Define alert colors, border radius, and padding.
$alert-padding-y: 0.75rem !default
$alert-padding-x: 1.25rem !default
$alert-margin-bottom: 1rem !default
$alert-border-radius: $border-radius !default
$alert-link-font-weight: $font-weight-bold !default
$alert-border-width: $border-width !default
$alert-bg-level: -10 !default
$alert-border-level: -9 !default
$alert-color-level: 6 !default
// Progress bars
$progress-height: 1rem !default
$progress-font-size: $font-size-base * 0.75 !default
$progress-bg: $gray-200 !default
$progress-border-radius: $border-radius !default
$progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default
$progress-bar-color: $white !default
$progress-bar-bg: theme-color("primary") !default
$progress-bar-animation-timing: 1s linear infinite !default
$progress-bar-transition: width 0.6s ease !default
// List group
$list-group-bg: $white !default
$list-group-border-color: rgba($black, 0.125) !default
$list-group-border-width: $border-width !default
$list-group-border-radius: $border-radius !default
$list-group-item-padding-y: 0.75rem !default
$list-group-item-padding-x: 1.25rem !default
$list-group-hover-bg: $gray-100 !default
$list-group-active-color: $component-active-color !default
$list-group-active-bg: $component-active-bg !default
$list-group-active-border-color: $list-group-active-bg !default
$list-group-disabled-color: $gray-600 !default
$list-group-disabled-bg: $list-group-bg !default
$list-group-action-color: $gray-700 !default
$list-group-action-hover-color: $list-group-action-color !default
$list-group-action-active-color: $body-color !default
$list-group-action-active-bg: $gray-200 !default
// Image thumbnails
$thumbnail-padding: 0.25rem !default
$thumbnail-bg: $body-bg !default
$thumbnail-border-width: $border-width !default
$thumbnail-border-color: $gray-300 !default
$thumbnail-border-radius: $border-radius !default
$thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) !default
// Figures
$figure-caption-font-size: 90% !default
$figure-caption-color: $gray-600 !default
// Breadcrumbs
$breadcrumb-padding-y: 0.75rem !default
$breadcrumb-padding-x: 1rem !default
$breadcrumb-item-padding: 0.5rem !default
$breadcrumb-margin-bottom: 1rem !default
$breadcrumb-bg: $gray-200 !default
$breadcrumb-divider-color: $gray-600 !default
$breadcrumb-active-color: $gray-600 !default
$breadcrumb-divider: quote("/") !default
$breadcrumb-border-radius: $border-radius !default
// Carousel
$carousel-control-color: $white !default
$carousel-control-width: 15% !default
$carousel-control-opacity: 0.5 !default
$carousel-indicator-width: 30px !default
$carousel-indicator-height: 3px !default
$carousel-indicator-spacer: 3px !default
$carousel-indicator-active-bg: $white !default
$carousel-caption-width: 70% !default
$carousel-caption-color: $white !default
$carousel-control-icon-width: 20px !default
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default
$carousel-transition: transform 0.6s ease !default
// Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
// Close
$close-font-size: $font-size-base * 1.5 !default
$close-font-weight: $font-weight-bold !default
$close-color: $black !default
$close-text-shadow: 0 1px 0 $white !default
// Code
$code-font-size: 87.5% !default
$code-color: $pink !default
$kbd-padding-y: 0.2rem !default
$kbd-padding-x: 0.4rem !default
$kbd-font-size: $code-font-size !default
$kbd-color: $white !default
$kbd-bg: $gray-900 !default
$pre-color: $gray-900 !default
$pre-scrollable-max-height: 340px !default
// Printing
$print-page-size: a3 !default
$print-body-min-width: map-get($grid-breakpoints, "lg") !default

View File

@@ -0,0 +1,31 @@
/*!
* Bootstrap Grid v4.1.2 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@at-root
@-ms-viewport
width: device-width
// stylelint-disable-line at-rule-no-vendor-prefix
html
box-sizing: border-box
-ms-overflow-style: scrollbar
*,
*::before,
*::after
box-sizing: inherit
@import functions
@import variables
@import mixins/breakpoints
@import mixins/grid-framework
@import mixins/grid
@import grid
@import utilities/display
@import utilities/flex

View File

@@ -0,0 +1,11 @@
/*!
* Bootstrap Reboot v4.1.2 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
@import functions
@import variables
@import mixins
@import reboot

View File

@@ -0,0 +1,41 @@
/*!
* Bootstrap v4.1.2 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@import functions
@import variables
@import mixins
@import root
@import reboot
@import type
@import images
@import code
@import grid
@import tables
@import forms
@import buttons
@import transitions
@import dropdown
@import button-group
@import input-group
@import custom-forms
@import nav
@import navbar
@import card
@import breadcrumb
@import pagination
@import badge
@import jumbotron
@import alert
@import progress
@import media
@import list-group
@import close
@import modal
@import tooltip
@import popover
@import carousel
@import utilities
@import print

View File

@@ -0,0 +1,12 @@
=alert-variant($background, $border, $color)
color: $color
+gradient-bg($background)
border-color: $border
hr
border-top-color: darken($border, 5%)
.alert-link
color: darken($color, 10%)

View File

@@ -0,0 +1,16 @@
// stylelint-disable declaration-no-important
// Contextual backgrounds
=bg-variant($parent, $color)
#{$parent}
background-color: $color !important
a#{$parent},
button#{$parent}
+hover-focus
background-color: darken($color, 10%) !important
=bg-gradient-variant($parent, $color)
#{$parent}
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important

View File

@@ -0,0 +1,9 @@
=badge-variant($bg)
color: color-yiq($bg)
background-color: $bg
&[href]
+hover-focus
color: color-yiq($bg)
text-decoration: none
background-color: darken($bg, 10%)

View File

@@ -0,0 +1,25 @@
// Single side border-radius
=border-radius($radius: $border-radius)
@if $enable-rounded
border-radius: $radius
=border-top-radius($radius)
@if $enable-rounded
border-top-left-radius: $radius
border-top-right-radius: $radius
=border-right-radius($radius)
@if $enable-rounded
border-top-right-radius: $radius
border-bottom-right-radius: $radius
=border-bottom-radius($radius)
@if $enable-rounded
border-bottom-right-radius: $radius
border-bottom-left-radius: $radius
=border-left-radius($radius)
@if $enable-rounded
border-top-left-radius: $radius
border-bottom-left-radius: $radius

View File

@@ -0,0 +1,3 @@
=box-shadow($shadow...)
@if $enable-shadows
box-shadow: $shadow

View File

@@ -0,0 +1,108 @@
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
// Name of the next breakpoint, or null for the last breakpoint.
//
// >> breakpoint-next(sm)
// md
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints))
$n: index($breakpoint-names, $name)
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null)
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints)
$min: map-get($breakpoints, $name)
@return if($min != 0, $min, null)
// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.02px
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints)
$next: breakpoint-next($name, $breakpoints)
@return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null)
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints)
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}")
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
=media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
$min: breakpoint-min($name, $breakpoints)
@if $min
@media (min-width: $min)
@content
@else
@content
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
=media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
$max: breakpoint-max($name, $breakpoints)
@if $max
@media (max-width: $max)
@content
@else
@content
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
=media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
$min: breakpoint-min($lower, $breakpoints)
$max: breakpoint-max($upper, $breakpoints)
@if $min != null and $max != null
@media (min-width: $min) and (max-width: $max)
@content
@else if $max == null
+media-breakpoint-up($lower, $breakpoints)
@content
@else if $min == null
+media-breakpoint-down($upper, $breakpoints)
@content
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
=media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
$min: breakpoint-min($name, $breakpoints)
$max: breakpoint-max($name, $breakpoints)
@if $min != null and $max != null
@media (min-width: $min) and (max-width: $max)
@content
@else if $max == null
+media-breakpoint-up($name, $breakpoints)
@content
@else if $min == null
+media-breakpoint-down($name, $breakpoints)
@content

View File

@@ -0,0 +1,102 @@
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
=button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%))
color: color-yiq($background)
+gradient-bg($background)
border-color: $border
+box-shadow($btn-box-shadow)
+hover
color: color-yiq($hover-background)
+gradient-bg($hover-background)
border-color: $hover-border
&:focus,
&.focus
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5)
@else
box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5)
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled
color: color-yiq($background)
background-color: $background
border-color: $border
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show > &.dropdown-toggle
color: color-yiq($active-background)
background-color: $active-background
@if $enable-gradients
background-image: none
// Remove the gradient for the pressed/active state
border-color: $active-border
&:focus
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5)
@else
box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5)
=button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color)
color: $color
background-color: transparent
background-image: none
border-color: $color
&:hover
color: $color-hover
background-color: $active-background
border-color: $active-border
&:focus,
&.focus
box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5)
&.disabled,
&:disabled
color: $color
background-color: transparent
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show > &.dropdown-toggle
color: color-yiq($active-background)
background-color: $active-background
border-color: $active-border
&:focus
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows and $btn-active-box-shadow != none
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, 0.5)
@else
box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5)
// Button sizes
=button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius)
padding: $padding-y $padding-x
font-size: $font-size
line-height: $line-height
// Manually declare to provide an override to the browser default
@if $enable-rounded
border-radius: $border-radius
@else
border-radius: 0

View File

@@ -0,0 +1,56 @@
=caret-down
border-top: $caret-width solid
border-right: $caret-width solid transparent
border-bottom: 0
border-left: $caret-width solid transparent
=caret-up
border-top: 0
border-right: $caret-width solid transparent
border-bottom: $caret-width solid
border-left: $caret-width solid transparent
=caret-right
border-top: $caret-width solid transparent
border-right: 0
border-bottom: $caret-width solid transparent
border-left: $caret-width solid
=caret-left
border-top: $caret-width solid transparent
border-right: $caret-width solid
border-bottom: $caret-width solid transparent
=caret($direction: down)
@if $enable-caret
&::after
display: inline-block
width: 0
height: 0
margin-left: $caret-width * 0.85
vertical-align: $caret-width * 0.85
content: ""
@if $direction == down
+caret-down
@else if $direction == up
+caret-up
@else if $direction == right
+caret-right
@if $direction == left
&::after
display: none
&::before
display: inline-block
width: 0
height: 0
margin-right: $caret-width * 0.85
vertical-align: $caret-width * 0.85
content: ""
+caret-left
&:empty::after
margin-left: 0

View File

@@ -0,0 +1,5 @@
=clearfix
&::after
display: block
clear: both
content: ""

View File

@@ -0,0 +1,10 @@
// stylelint-disable declaration-no-important
=float-left
float: left !important
=float-right
float: right !important
=float-none
float: none !important

View File

@@ -0,0 +1,118 @@
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `$input-focus-border-color` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
=form-control-focus
&:focus
color: $input-focus-color
background-color: $input-focus-bg
border-color: $input-focus-border-color
outline: 0
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows
box-shadow: $input-box-shadow, $input-focus-box-shadow
@else
box-shadow: $input-focus-box-shadow
=form-validation-state($state, $color)
.#{$state}-feedback
display: none
width: 100%
margin-top: $form-feedback-margin-top
font-size: $form-feedback-font-size
color: $color
.#{$state}-tooltip
position: absolute
top: 100%
z-index: 5
display: none
max-width: 100%
// Contain to parent when possible
padding: .5rem
margin-top: .1rem
font-size: .875rem
line-height: 1
color: $white
background-color: rgba($color, 0.8)
border-radius: .2rem
.form-control,
.custom-select
.was-validated &:#{$state},
&.is-#{$state}
border-color: $color
&:focus
border-color: $color
box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25)
~ .#{$state}-feedback,
~ .#{$state}-tooltip
display: block
.form-control-file
.was-validated &:#{$state},
&.is-#{$state}
~ .#{$state}-feedback,
~ .#{$state}-tooltip
display: block
.form-check-input
.was-validated &:#{$state},
&.is-#{$state}
~ .form-check-label
color: $color
~ .#{$state}-feedback,
~ .#{$state}-tooltip
display: block
.custom-control-input
.was-validated &:#{$state},
&.is-#{$state}
~ .custom-control-label
color: $color
&::before
background-color: lighten($color, 25%)
~ .#{$state}-feedback,
~ .#{$state}-tooltip
display: block
&:checked
~ .custom-control-label::before
+gradient-bg(lighten($color, 10%))
&:focus
~ .custom-control-label::before
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, 0.25)
// custom file
.custom-file-input
.was-validated &:#{$state},
&.is-#{$state}
~ .custom-file-label
border-color: $color
&::before
border-color: inherit
~ .#{$state}-feedback,
~ .#{$state}-tooltip
display: block
&:focus
~ .custom-file-label
box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25)

View File

@@ -0,0 +1,40 @@
// Gradients
=gradient-bg($color)
@if $enable-gradients
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x
@else
background-color: $color
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
=gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%)
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent)
background-repeat: repeat-x
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
=gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%)
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent)
background-repeat: repeat-x
=gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg)
background-image: linear-gradient($deg, $start-color, $end-color)
background-repeat: repeat-x
=gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red)
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color)
background-repeat: no-repeat
=gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red)
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color)
background-repeat: no-repeat
=gradient-radial($inner-color: $gray-700, $outer-color: $gray-800)
background-image: radial-gradient(circle, $inner-color, $outer-color)
background-repeat: no-repeat
=gradient-striped($color: rgba($white, 0.15), $angle: 45deg)
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent)

View File

@@ -0,0 +1,62 @@
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
=make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints)
// Common properties for all breakpoints
%grid-column
position: relative
width: 100%
min-height: 1px
// Prevent columns from collapsing when empty
padding-right: $gutter / 2
padding-left: $gutter / 2
@each $breakpoint in map-keys($breakpoints)
$infix: breakpoint-infix($breakpoint, $breakpoints)
// Allow columns to stretch full width below their breakpoints
@for $i from 1 through $columns
.col#{$infix}-#{$i}
@extend %grid-column
.col#{$infix},
.col#{$infix}-auto
@extend %grid-column
+media-breakpoint-up($breakpoint, $breakpoints)
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix}
flex-basis: 0
flex-grow: 1
max-width: 100%
.col#{$infix}-auto
flex: 0 0 auto
width: auto
max-width: none
// Reset earlier grid tiers
@for $i from 1 through $columns
.col#{$infix}-#{$i}
+make-col($i, $columns)
.order#{$infix}-first
order: -1
.order#{$infix}-last
order: $columns + 1
@for $i from 0 through $columns
.order#{$infix}-#{$i}
order: $i
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through $columns - 1
@if not ($infix == "" and $i == 0)
// Avoid emitting useless .offset-0
.offset#{$infix}-#{$i}
+make-col-offset($i, $columns)

View File

@@ -0,0 +1,48 @@
/// Grid system
//
// Generate semantic grid columns with these mixins.
=make-container
width: 100%
padding-right: $grid-gutter-width / 2
padding-left: $grid-gutter-width / 2
margin-right: auto
margin-left: auto
// For each breakpoint, define the maximum width of the container in a media query
=make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
@each $breakpoint, $container-max-width in $max-widths
+media-breakpoint-up($breakpoint, $breakpoints)
max-width: $container-max-width
=make-row
display: flex
flex-wrap: wrap
margin-right: $grid-gutter-width / -2
margin-left: $grid-gutter-width / -2
=make-col-ready
position: relative
// 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.
width: 100%
min-height: 1px
// Prevent collapsing
padding-right: $grid-gutter-width / 2
padding-left: $grid-gutter-width / 2
=make-col($size, $columns: $grid-columns)
flex: 0 0 percentage($size / $columns)
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage($size / $columns)
=make-col-offset($size, $columns: $grid-columns)
$num: $size / $columns
margin-left: if($num == 0, 0, percentage($num))

View File

@@ -0,0 +1,31 @@
// Hover mixin and `$enable-hover-media-query` are deprecated.
//
// Originally added during our alphas and maintained during betas, this mixin was
// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
// would persist after initial touch.
//
// For backward compatibility, we've kept these mixins and updated them to
// always return their regular pseudo-classes instead of a shimmed media query.
//
// Issue: https://github.com/twbs/bootstrap/issues/25195
=hover
&:hover
@content
=hover-focus
&:hover,
&:focus
@content
=plain-hover-focus
&,
&:hover,
&:focus
@content
=hover-focus-active
&:hover,
&:focus,
&:active
@content

View File

@@ -0,0 +1,32 @@
// Image Mixins
// - Responsive image
// - Retina image
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
=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
// Retina image
//
// Short retina mixin for setting background-image and -size.
// stylelint-disable indentation, media-query-list-comma-newline-after
=img-retina($file-1x, $file-2x, $width-1x, $height-1x)
background-image: url($file-1x)
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
// but doesn't convert dppx=>dpi.
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
// Compatibility info: https://caniuse.com/#feat=css-media-resolution
@media only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)
// Standardized
background-image: url($file-2x)
background-size: $width-1x $height-1x

View File

@@ -0,0 +1,17 @@
// List Groups
=list-group-item-variant($state, $background, $color)
.list-group-item-#{$state}
color: $color
background-color: $background
&.list-group-item-action
+hover-focus
color: $color
background-color: darken($background, 5%)
&.active
color: $white
background-color: $color
border-color: $color

View File

@@ -0,0 +1,6 @@
// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
=list-unstyled
padding-left: 0
list-style: none

View File

@@ -0,0 +1,9 @@
// Horizontal dividers
//
// Dividers (basically an hr) within dropdowns and nav lists
=nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y)
height: 0
margin: $margin-y 0
overflow: hidden
border-top: 1px solid $color

View File

@@ -0,0 +1,16 @@
// Pagination
=pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius)
.page-link
padding: $padding-y $padding-x
font-size: $font-size
line-height: $line-height
.page-item
&:first-child
.page-link
+border-left-radius($border-radius)
&:last-child
.page-link
+border-right-radius($border-radius)

View File

@@ -0,0 +1,21 @@
=reset-text
font-family: $font-family-base
// We deliberately do NOT reset font-size or word-wrap.
font-style: normal
font-weight: $font-weight-normal
line-height: $line-height-base
text-align: left
// Fallback for where `start` is not supported
text-align: start
// stylelint-disable-line declaration-block-no-duplicate-properties
text-decoration: none
text-shadow: none
text-transform: none
letter-spacing: normal
word-break: normal
word-spacing: normal
white-space: normal
line-break: auto

View File

@@ -0,0 +1,9 @@
// Resize anything
=resizable($direction)
overflow: auto
// Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
resize: $direction
// Options: horizontal, vertical, both

View File

@@ -0,0 +1,30 @@
// Only display content to screen readers
//
// See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
=sr-only
position: absolute
width: 1px
height: 1px
padding: 0
overflow: hidden
clip: rect(0, 0, 0, 0)
white-space: nowrap
border: 0
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
=sr-only-focusable
&:active,
&:focus
position: static
width: auto
height: auto
overflow: visible
clip: auto
white-space: normal

View File

@@ -0,0 +1,5 @@
// Sizing shortcuts
=size($width, $height: $width)
width: $width
height: $height

View File

@@ -0,0 +1,23 @@
// Tables
=table-row-variant($state, $background)
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table-#{$state}
&,
> th,
> td
background-color: $background
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover
$hover-background: darken($background, 5%)
.table-#{$state}
+hover
background-color: $hover-background
> td,
> th
background-color: $hover-background

View File

@@ -0,0 +1,11 @@
// stylelint-disable declaration-no-important
// Typography
=text-emphasis-variant($parent, $color)
#{$parent}
color: $color !important
a#{$parent}
+hover-focus
color: darken($color, 10%) !important

View File

@@ -0,0 +1,11 @@
// CSS image replacement
=text-hide($ignore-warning: false)
// stylelint-disable-next-line font-family-no-missing-generic-family-keyword
font: 0/0 a
color: transparent
text-shadow: none
background-color: transparent
border: 0
@if $ignore-warning != true
@warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5."

View File

@@ -0,0 +1,7 @@
// Text truncate
// Requires inline-block or block for proper styling
=text-truncate
overflow: hidden
text-overflow: ellipsis
white-space: nowrap

View File

@@ -0,0 +1,9 @@
=transition($transition...)
@if $enable-transitions
@if length($transition) == 0
transition: $transition-base
@else
transition: $transition
@media screen and (prefers-reduced-motion: reduce)
transition: none

View File

@@ -0,0 +1,6 @@
// stylelint-disable declaration-no-important
// Visibility
=invisible($visibility)
visibility: $visibility !important

View File

@@ -0,0 +1,20 @@
// stylelint-disable declaration-no-important
.align-baseline
vertical-align: baseline !important
// Browser default
.align-top
vertical-align: top !important
.align-middle
vertical-align: middle !important
.align-bottom
vertical-align: bottom !important
.align-text-bottom
vertical-align: text-bottom !important
.align-text-top
vertical-align: text-top !important

View File

@@ -0,0 +1,14 @@
// stylelint-disable declaration-no-important
@each $color, $value in $theme-colors
+bg-variant(".bg-#{$color}", $value)
@if $enable-gradients
@each $color, $value in $theme-colors
+bg-gradient-variant(".bg-gradient-#{$color}", $value)
.bg-white
background-color: $white !important
.bg-transparent
background-color: transparent !important

View File

@@ -0,0 +1,71 @@
// stylelint-disable declaration-no-important
//
// Border
//
.border
border: $border-width solid $border-color !important
.border-top
border-top: $border-width solid $border-color !important
.border-right
border-right: $border-width solid $border-color !important
.border-bottom
border-bottom: $border-width solid $border-color !important
.border-left
border-left: $border-width solid $border-color !important
.border-0
border: 0 !important
.border-top-0
border-top: 0 !important
.border-right-0
border-right: 0 !important
.border-bottom-0
border-bottom: 0 !important
.border-left-0
border-left: 0 !important
@each $color, $value in $theme-colors
.border-#{$color}
border-color: $value !important
.border-white
border-color: $white !important
//
// Border-radius
//
.rounded
border-radius: $border-radius !important
.rounded-top
border-top-left-radius: $border-radius !important
border-top-right-radius: $border-radius !important
.rounded-right
border-top-right-radius: $border-radius !important
border-bottom-right-radius: $border-radius !important
.rounded-bottom
border-bottom-right-radius: $border-radius !important
border-bottom-left-radius: $border-radius !important
.rounded-left
border-top-left-radius: $border-radius !important
border-bottom-left-radius: $border-radius !important
.rounded-circle
border-radius: 50% !important
.rounded-0
border-radius: 0 !important

View File

@@ -0,0 +1,2 @@
.clearfix
+clearfix

View File

@@ -0,0 +1,68 @@
// stylelint-disable declaration-no-important
//
// Utilities for common `display` values
//
@each $breakpoint in map-keys($grid-breakpoints)
+media-breakpoint-up($breakpoint)
$infix: breakpoint-infix($breakpoint, $grid-breakpoints)
.d#{$infix}-none
display: none !important
.d#{$infix}-inline
display: inline !important
.d#{$infix}-inline-block
display: inline-block !important
.d#{$infix}-block
display: block !important
.d#{$infix}-table
display: table !important
.d#{$infix}-table-row
display: table-row !important
.d#{$infix}-table-cell
display: table-cell !important
.d#{$infix}-flex
display: flex !important
.d#{$infix}-inline-flex
display: inline-flex !important
//
// Utilities for toggling `display` in print
//
@media print
.d-print-none
display: none !important
.d-print-inline
display: inline !important
.d-print-inline-block
display: inline-block !important
.d-print-block
display: block !important
.d-print-table
display: table !important
.d-print-table-row
display: table-row !important
.d-print-table-cell
display: table-cell !important
.d-print-flex
display: flex !important
.d-print-inline-flex
display: inline-flex !important

View File

@@ -0,0 +1,41 @@
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive
position: relative
display: block
width: 100%
padding: 0
overflow: hidden
&::before
display: block
content: ""
.embed-responsive-item,
iframe,
embed,
object,
video
position: absolute
top: 0
bottom: 0
left: 0
width: 100%
height: 100%
border: 0
.embed-responsive-21by9
&::before
padding-top: percentage(9 / 21)
.embed-responsive-16by9
&::before
padding-top: percentage(9 / 16)
.embed-responsive-4by3
&::before
padding-top: percentage(3 / 4)
.embed-responsive-1by1
&::before
padding-top: percentage(1 / 1)

View File

@@ -0,0 +1,111 @@
// stylelint-disable declaration-no-important
// Flex variation
//
// Custom styles for additional flex alignment options.
@each $breakpoint in map-keys($grid-breakpoints)
+media-breakpoint-up($breakpoint)
$infix: breakpoint-infix($breakpoint, $grid-breakpoints)
.flex#{$infix}-row
flex-direction: row !important
.flex#{$infix}-column
flex-direction: column !important
.flex#{$infix}-row-reverse
flex-direction: row-reverse !important
.flex#{$infix}-column-reverse
flex-direction: column-reverse !important
.flex#{$infix}-wrap
flex-wrap: wrap !important
.flex#{$infix}-nowrap
flex-wrap: nowrap !important
.flex#{$infix}-wrap-reverse
flex-wrap: wrap-reverse !important
.flex#{$infix}-fill
flex: 1 1 auto !important
.flex#{$infix}-grow-0
flex-grow: 0 !important
.flex#{$infix}-grow-1
flex-grow: 1 !important
.flex#{$infix}-shrink-0
flex-shrink: 0 !important
.flex#{$infix}-shrink-1
flex-shrink: 1 !important
.justify-content#{$infix}-start
justify-content: flex-start !important
.justify-content#{$infix}-end
justify-content: flex-end !important
.justify-content#{$infix}-center
justify-content: center !important
.justify-content#{$infix}-between
justify-content: space-between !important
.justify-content#{$infix}-around
justify-content: space-around !important
.align-items#{$infix}-start
align-items: flex-start !important
.align-items#{$infix}-end
align-items: flex-end !important
.align-items#{$infix}-center
align-items: center !important
.align-items#{$infix}-baseline
align-items: baseline !important
.align-items#{$infix}-stretch
align-items: stretch !important
.align-content#{$infix}-start
align-content: flex-start !important
.align-content#{$infix}-end
align-content: flex-end !important
.align-content#{$infix}-center
align-content: center !important
.align-content#{$infix}-between
align-content: space-between !important
.align-content#{$infix}-around
align-content: space-around !important
.align-content#{$infix}-stretch
align-content: stretch !important
.align-self#{$infix}-auto
align-self: auto !important
.align-self#{$infix}-start
align-self: flex-start !important
.align-self#{$infix}-end
align-self: flex-end !important
.align-self#{$infix}-center
align-self: center !important
.align-self#{$infix}-baseline
align-self: baseline !important
.align-self#{$infix}-stretch
align-self: stretch !important

View File

@@ -0,0 +1,12 @@
@each $breakpoint in map-keys($grid-breakpoints)
+media-breakpoint-up($breakpoint)
$infix: breakpoint-infix($breakpoint, $grid-breakpoints)
.float#{$infix}-left
+float-left
.float#{$infix}-right
+float-right
.float#{$infix}-none
+float-none

View File

@@ -0,0 +1,33 @@
// stylelint-disable declaration-no-important
// Common values
// Sass list not in variables since it's not intended for customization.
// stylelint-disable-next-line scss/dollar-variable-default
$positions: static, relative, absolute, fixed, sticky
@each $position in $positions
.position-#{$position}
position: $position !important
// Shorthand
.fixed-top
position: fixed
top: 0
right: 0
left: 0
z-index: $zindex-fixed
.fixed-bottom
position: fixed
right: 0
bottom: 0
left: 0
z-index: $zindex-fixed
.sticky-top
@supports (position: sticky)
position: sticky
top: 0
z-index: $zindex-sticky

View File

@@ -0,0 +1,9 @@
//
// Screenreaders
//
.sr-only
+sr-only
.sr-only-focusable
+sr-only-focusable

View File

@@ -0,0 +1,13 @@
// stylelint-disable declaration-no-important
.shadow-sm
box-shadow: $box-shadow-sm !important
.shadow
box-shadow: $box-shadow !important
.shadow-lg
box-shadow: $box-shadow-lg !important
.shadow-none
box-shadow: none !important

View File

@@ -0,0 +1,14 @@
// stylelint-disable declaration-no-important
// Width and height
@each $prop, $abbrev in (width: w, height: h)
@each $size, $length in $sizes
.#{$abbrev}-#{$size}
#{$prop}: $length !important
.mw-100
max-width: 100% !important
.mh-100
max-height: 100% !important

View File

@@ -0,0 +1,48 @@
// stylelint-disable declaration-no-important
// Margin and Padding
@each $breakpoint in map-keys($grid-breakpoints)
+media-breakpoint-up($breakpoint)
$infix: breakpoint-infix($breakpoint, $grid-breakpoints)
@each $prop, $abbrev in (margin: m, padding: p)
@each $size, $length in $spacers
.#{$abbrev}#{$infix}-#{$size}
#{$prop}: $length !important
.#{$abbrev}t#{$infix}-#{$size},
.#{$abbrev}y#{$infix}-#{$size}
#{$prop}-top: $length !important
.#{$abbrev}r#{$infix}-#{$size},
.#{$abbrev}x#{$infix}-#{$size}
#{$prop}-right: $length !important
.#{$abbrev}b#{$infix}-#{$size},
.#{$abbrev}y#{$infix}-#{$size}
#{$prop}-bottom: $length !important
.#{$abbrev}l#{$infix}-#{$size},
.#{$abbrev}x#{$infix}-#{$size}
#{$prop}-left: $length !important
// Some special margin utils
.m#{$infix}-auto
margin: auto !important
.mt#{$infix}-auto,
.my#{$infix}-auto
margin-top: auto !important
.mr#{$infix}-auto,
.mx#{$infix}-auto
margin-right: auto !important
.mb#{$infix}-auto,
.my#{$infix}-auto
margin-bottom: auto !important
.ml#{$infix}-auto,
.mx#{$infix}-auto
margin-left: auto !important

View File

@@ -0,0 +1,84 @@
// stylelint-disable declaration-no-important
//
// Text
//
.text-monospace
font-family: $font-family-monospace
// Alignment
.text-justify
text-align: justify !important
.text-nowrap
white-space: nowrap !important
.text-truncate
+text-truncate
// Responsive alignment
@each $breakpoint in map-keys($grid-breakpoints)
+media-breakpoint-up($breakpoint)
$infix: breakpoint-infix($breakpoint, $grid-breakpoints)
.text#{$infix}-left
text-align: left !important
.text#{$infix}-right
text-align: right !important
.text#{$infix}-center
text-align: center !important
// Transformation
.text-lowercase
text-transform: lowercase !important
.text-uppercase
text-transform: uppercase !important
.text-capitalize
text-transform: capitalize !important
// Weight and italics
.font-weight-light
font-weight: $font-weight-light !important
.font-weight-normal
font-weight: $font-weight-normal !important
.font-weight-bold
font-weight: $font-weight-bold !important
.font-italic
font-style: italic !important
// Contextual colors
.text-white
color: $white !important
@each $color, $value in $theme-colors
+text-emphasis-variant(".text-#{$color}", $value)
.text-body
color: $body-color !important
.text-muted
color: $text-muted !important
.text-black-50
color: rgba($black, 0.5) !important
.text-white-50
color: rgba($white, 0.5) !important
// Misc
.text-hide
+text-hide($ignore-warning: true)

View File

@@ -0,0 +1,9 @@
//
// Visibility utilities
//
.visible
+invisible(visible)
.invisible
+invisible(hidden)