`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;
+ @include font-size($nav-link-font-size);
+ font-weight: $nav-link-font-weight;
+ color: $nav-link-color;
+ text-decoration: if($link-decoration == none, null, none);
+ @include transition($nav-link-transition);
+
+ &:hover,
+ &:focus {
+ color: $nav-link-hover-color;
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ }
+
+ // Disabled state lightens text
+ &.disabled {
+ color: $nav-link-disabled-color;
+ pointer-events: none;
+ cursor: default;
+ }
+}
+
+//
+// Tabs
+//
+
+.nav-tabs {
+ border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+
+ .nav-link {
+ margin-bottom: -$nav-tabs-border-width;
+ border: $nav-tabs-border-width solid transparent;
+ @include 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
+ @include border-top-radius(0);
+ }
+}
+
+
+//
+// Pills
+//
+
+.nav-pills {
+ .nav-link {
+ @include border-radius($nav-pills-border-radius);
+ }
+
+ .nav-link.active,
+ .show > .nav-link {
+ color: $nav-pills-link-active-color;
+ @include gradient-bg($nav-pills-link-active-bg);
+ }
+}
+
+
+//
+// Justified variants
+//
+
+.nav-fill {
+ > .nav-link,
+ .nav-item {
+ flex: 1 1 auto;
+ text-align: center;
+ }
+}
+
+.nav-justified {
+ > .nav-link,
+ .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;
+ }
+}
diff --git a/style/bootstrap/_navbar.scss b/style/bootstrap/_navbar.scss
index 11e5c01c15..852328aca1 100644
--- a/style/bootstrap/_navbar.scss
+++ b/style/bootstrap/_navbar.scss
@@ -1,662 +1,293 @@
+// Contents
//
-// Navbars
-// --------------------------------------------------
+// Navbar
+// Navbar brand
+// Navbar nav
+// Navbar text
+// Responsive navbar
+// Navbar position
+// Navbar themes
-// Wrapper and base class
+// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
- min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
- margin-bottom: $navbar-margin-bottom;
- border: 1px solid transparent;
+ 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-top: $navbar-padding-y;
+ padding-right: $navbar-padding-x; // default: null
+ padding-bottom: $navbar-padding-y;
+ padding-left: $navbar-padding-x; // default: null
+ @include gradient-bg();
- // Prevent floats from breaking the navbar
- @include clearfix;
-
- @media (min-width: $grid-float-breakpoint) {
- border-radius: $navbar-border-radius;
- }
-}
-
-
-// Navbar heading
-//
-// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
-// styling of responsive aspects.
-
-.navbar-header {
- @include clearfix;
-
- @media (min-width: $grid-float-breakpoint) {
- float: left;
- }
-}
-
-
-// Navbar collapse (body)
-//
-// Group your navbar content into this for easy collapsing and expanding across
-// various device sizes. By default, this content is collapsed when <768px, but
-// will expand past that for a horizontal display.
-//
-// To start (on mobile devices) the navbar links, forms, and buttons are stacked
-// vertically and include a `max-height` to overflow in case you have too much
-// content for the user's viewport.
-
-.navbar-collapse {
- overflow-x: visible;
- padding-right: $navbar-padding-horizontal;
- padding-left: $navbar-padding-horizontal;
- border-top: 1px solid transparent;
- box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
- @include clearfix;
- -webkit-overflow-scrolling: touch;
-
- &.in {
- overflow-y: auto;
- }
-
- @media (min-width: $grid-float-breakpoint) {
- width: auto;
- border-top: 0;
- box-shadow: none;
-
- &.collapse {
- display: block !important;
- height: auto !important;
- padding-bottom: 0; // Override default setting
- overflow: visible !important;
- }
-
- &.in {
- overflow-y: visible;
- }
-
- // Undo the collapse side padding for navbars with containers to ensure
- // alignment of right-aligned contents.
- .navbar-fixed-top &,
- .navbar-static-top &,
- .navbar-fixed-bottom & {
- padding-left: 0;
- padding-right: 0;
- }
+ // Because flex properties aren't inherited, we need to redeclare these first
+ // few properties so that content nested within behave properly.
+ // The `flex-wrap` property is inherited to simplify the expanded navbars
+ %container-flex-properties {
+ display: flex;
+ flex-wrap: inherit;
+ align-items: center;
+ justify-content: space-between;
}
-}
-
-.navbar-fixed-top,
-.navbar-fixed-bottom {
- .navbar-collapse {
- max-height: $navbar-collapse-max-height;
- @media (max-device-width: $screen-xs-min) and (orientation: landscape) {
- max-height: 200px;
- }
+ > .container,
+ > .container-fluid {
+ @extend %container-flex-properties;
}
-}
-
-// Both navbar header and collapse
-//
-// When a container is present, change the behavior of the header and collapse.
-
-.container,
-.container-fluid {
- > .navbar-header,
- > .navbar-collapse {
- margin-right: -$navbar-padding-horizontal;
- margin-left: -$navbar-padding-horizontal;
-
- @media (min-width: $grid-float-breakpoint) {
- margin-right: 0;
- margin-left: 0;
+ @each $breakpoint, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+ @extend %container-flex-properties;
}
}
}
+// Navbar brand
//
-// Navbar alignment options
-//
-// Display the navbar across the entirety of the page or fixed it to the top or
-// bottom of the page.
-
-// Static top (unfixed, but 100% wide) navbar
-.navbar-static-top {
- z-index: $zindex-navbar;
- border-width: 0 0 1px;
-
- @media (min-width: $grid-float-breakpoint) {
- border-radius: 0;
- }
-}
-
-// Fix the top/bottom navbars when screen real estate supports it
-.navbar-fixed-top,
-.navbar-fixed-bottom {
- position: fixed;
- right: 0;
- left: 0;
- z-index: $zindex-navbar-fixed;
-
- // Undo the rounded corners
- @media (min-width: $grid-float-breakpoint) {
- border-radius: 0;
- }
-}
-.navbar-fixed-top {
- top: 0;
- border-width: 0 0 1px;
-}
-.navbar-fixed-bottom {
- bottom: 0;
- margin-bottom: 0; // override .navbar defaults
- border-width: 1px 0 0;
-}
-
-
-// Brand/project name
+// Used for brand, project, or site names.
.navbar-brand {
- float: left;
- padding: $navbar-padding-vertical $navbar-padding-horizontal;
- font-size: $font-size-large;
- line-height: $line-height-computed;
- height: $navbar-height;
+ padding-top: $navbar-brand-padding-y;
+ padding-bottom: $navbar-brand-padding-y;
+ margin-right: $navbar-brand-margin-end;
+ @include font-size($navbar-brand-font-size);
+ text-decoration: if($link-decoration == none, null, none);
+ white-space: nowrap;
&:hover,
&:focus {
- text-decoration: none;
- }
-
- > img {
- display: block;
- }
-
- @media (min-width: $grid-float-breakpoint) {
- .navbar > .container &,
- .navbar > .container-fluid & {
- margin-left: -$navbar-padding-horizontal;
- }
- }
-}
-
-
-// Navbar toggle
-//
-// Custom button for toggling the `.navbar-collapse`, powered by the collapse
-// JavaScript plugin.
-
-.navbar-toggle {
- position: relative;
- float: right;
- margin-right: $navbar-padding-horizontal;
- padding: 9px 10px;
- @include navbar-vertical-align(34px);
- background-color: transparent;
- background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
- border: 1px solid transparent;
- border-radius: $border-radius-base;
-
- // We remove the `outline` here, but later compensate by attaching `:hover`
- // styles to `:focus`.
- &:focus {
- outline: 0;
- }
-
- // Bars
- .icon-bar {
- display: block;
- width: 22px;
- height: 2px;
- border-radius: 1px;
- }
- .icon-bar + .icon-bar {
- margin-top: 4px;
- }
-
- @media (min-width: $grid-float-breakpoint) {
- display: none;
+ text-decoration: if($link-hover-decoration == underline, none, null);
}
}
-// Navbar nav links
+// Navbar nav
//
-// Builds on top of the `.nav` components with its own modifier class to make
-// the nav the full height of the horizontal nav (above 768px).
+// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
.navbar-nav {
- margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
-
- > li > a {
- padding-top: 10px;
- padding-bottom: 10px;
- line-height: $line-height-computed;
- }
+ display: flex;
+ flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
- @media (max-width: $grid-float-breakpoint-max) {
- // Dropdowns get custom display when collapsed
- .open .dropdown-menu {
- position: static;
- float: none;
- width: auto;
- margin-top: 0;
- background-color: transparent;
- border: 0;
- box-shadow: none;
- > li > a,
- .dropdown-header {
- padding: 5px 15px 5px 25px;
- }
- > li > a {
- line-height: $line-height-computed;
- &:hover,
- &:focus {
- background-image: none;
- }
- }
- }
+ .nav-link {
+ padding-right: 0;
+ padding-left: 0;
}
- // Uncollapse the nav
- @media (min-width: $grid-float-breakpoint) {
- float: left;
- margin: 0;
-
- > li {
- float: left;
- > a {
- padding-top: $navbar-padding-vertical;
- padding-bottom: $navbar-padding-vertical;
- }
- }
+ .dropdown-menu {
+ position: static;
}
}
-// Navbar form
+// Navbar text
+//
//
-// Extension of the `.form-inline` with some extra flavor for optimum display in
-// our navbars.
-
-.navbar-form {
- margin-left: -$navbar-padding-horizontal;
- margin-right: -$navbar-padding-horizontal;
- padding: 10px $navbar-padding-horizontal;
- border-top: 1px solid transparent;
- border-bottom: 1px solid transparent;
- $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
- @include box-shadow($shadow);
-
- // Mixin behavior for optimum display
- @include form-inline;
-
- .form-group {
- @media (max-width: $grid-float-breakpoint-max) {
- margin-bottom: 5px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
-
- // Vertically center in expanded, horizontal navbar
- @include navbar-vertical-align($input-height-base);
-
- // Undo 100% width for pull classes
- @media (min-width: $grid-float-breakpoint) {
- width: auto;
- border: 0;
- margin-left: 0;
- margin-right: 0;
- padding-top: 0;
- padding-bottom: 0;
- @include box-shadow(none);
- }
-}
-
-
-// Dropdown menus
-// Menu position and menu carets
-.navbar-nav > li > .dropdown-menu {
- margin-top: 0;
- @include border-top-radius(0);
-}
-// Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
- margin-bottom: 0;
- @include border-top-radius($navbar-border-radius);
- @include border-bottom-radius(0);
+.navbar-text {
+ padding-top: $nav-link-padding-y;
+ padding-bottom: $nav-link-padding-y;
}
-// Buttons in navbars
+// Responsive navbar
//
-// Vertically center a button within a navbar (when *not* in a form).
+// Custom styles for responsive collapsing and toggling of navbar contents.
+// Powered by the collapse Bootstrap JavaScript plugin.
-.navbar-btn {
- @include navbar-vertical-align($input-height-base);
+// 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 {
+ // For always expanded or extra full navbars, ensure content aligns itself
+ // properly vertically. Can be easily overridden with flex utilities.
+ align-items: center;
+ width: 100%;
+}
- &.btn-sm {
- @include navbar-vertical-align($input-height-small);
+// Button for toggling the navbar when in its collapsed state
+.navbar-toggler {
+ padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
+ @include 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
+ @include border-radius($navbar-toggler-border-radius);
+ @include transition($navbar-toggler-transition);
+
+ &:hover {
+ text-decoration: none;
}
- &.btn-xs {
- @include navbar-vertical-align(22);
+
+ &:focus {
+ text-decoration: none;
+ outline: 0;
+ box-shadow: 0 0 0 $navbar-toggler-focus-width;
}
}
+// 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;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
+}
-// Text in navbars
-//
-// Add a class to make any element properly align itself vertically within the navbars.
+// 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);
-.navbar-text {
- @include navbar-vertical-align($line-height-computed);
+ // stylelint-disable-next-line scss/selector-no-union-class-name
+ &#{$infix} {
+ @include media-breakpoint-up($next) {
+ flex-wrap: nowrap;
+ justify-content: flex-start;
- @media (min-width: $grid-float-breakpoint) {
- float: left;
- margin-left: $navbar-padding-horizontal;
- margin-right: $navbar-padding-horizontal;
- }
-}
+ .navbar-nav {
+ flex-direction: row;
+ .dropdown-menu {
+ position: absolute;
+ }
-// Component alignment
-//
-// Repurpose the pull utilities as their own navbar utilities to avoid specificity
-// issues with parents and chaining. Only do this when the navbar is uncollapsed
-// though so that navbar contents properly stack and align in mobile.
-//
-// Declared after the navbar components to ensure more specificity on the margins.
+ .nav-link {
+ padding-right: $navbar-nav-link-padding-x;
+ padding-left: $navbar-nav-link-padding-x;
+ }
+ }
-@media (min-width: $grid-float-breakpoint) {
- .navbar-left {
- float: left !important;
- }
- .navbar-right {
- float: right !important;
- margin-right: -$navbar-padding-horizontal;
+ .navbar-collapse {
+ display: flex !important; // stylelint-disable-line declaration-no-important
+ }
- ~ .navbar-right {
- margin-right: 0;
+ .navbar-toggler {
+ display: none;
+ }
+ }
}
}
}
-// Alternate navbars
-// --------------------------------------------------
-
-// Default navbar
-.navbar-default {
- background-color: $navbar-default-bg;
- border-color: $navbar-default-border;
+// Navbar themes
+//
+// Styles for switching between navbars with light or dark background.
+// Dark links against a light background
+.navbar-light {
.navbar-brand {
- color: $navbar-default-brand-color;
+ color: $navbar-light-brand-color;
+
&:hover,
&:focus {
- color: $navbar-default-brand-hover-color;
- background-color: $navbar-default-brand-hover-bg;
+ color: $navbar-light-brand-hover-color;
}
}
- .navbar-text {
- color: $navbar-default-color;
- }
-
.navbar-nav {
- > li > a {
- color: $navbar-default-link-color;
+ .nav-link {
+ color: $navbar-light-color;
&:hover,
&:focus {
- color: $navbar-default-link-hover-color;
- background-color: $navbar-default-link-hover-bg;
- }
- }
- > .active > a {
- &,
- &:hover,
- &:focus {
- color: $navbar-default-link-active-color;
- background-color: $navbar-default-link-active-bg;
+ color: $navbar-light-hover-color;
}
- }
- > .disabled > a {
- &,
- &:hover,
- &:focus {
- color: $navbar-default-link-disabled-color;
- background-color: $navbar-default-link-disabled-bg;
+
+ &.disabled {
+ color: $navbar-light-disabled-color;
}
}
- }
- .navbar-toggle {
- border-color: $navbar-default-toggle-border-color;
- &:hover,
- &:focus {
- background-color: $navbar-default-toggle-hover-bg;
- }
- .icon-bar {
- background-color: $navbar-default-toggle-icon-bar-bg;
+ .show > .nav-link,
+ .nav-link.active {
+ color: $navbar-light-active-color;
}
}
- .navbar-collapse,
- .navbar-form {
- border-color: $navbar-default-border;
+ .navbar-toggler {
+ color: $navbar-light-color;
+ border-color: $navbar-light-toggler-border-color;
}
- // Dropdown menu items
- .navbar-nav {
- // Remove background color from open dropdown
- > .open > a {
- &,
- &:hover,
- &:focus {
- background-color: $navbar-default-link-active-bg;
- color: $navbar-default-link-active-color;
- }
- }
-
- @media (max-width: $grid-float-breakpoint-max) {
- // Dropdowns get custom display when collapsed
- .open .dropdown-menu {
- > li > a {
- color: $navbar-default-link-color;
- &:hover,
- &:focus {
- color: $navbar-default-link-hover-color;
- background-color: $navbar-default-link-hover-bg;
- }
- }
- > .active > a {
- &,
- &:hover,
- &:focus {
- color: $navbar-default-link-active-color;
- background-color: $navbar-default-link-active-bg;
- }
- }
- > .disabled > a {
- &,
- &:hover,
- &:focus {
- color: $navbar-default-link-disabled-color;
- background-color: $navbar-default-link-disabled-bg;
- }
- }
- }
- }
+ .navbar-toggler-icon {
+ background-image: escape-svg($navbar-light-toggler-icon-bg);
}
+ .navbar-text {
+ color: $navbar-light-color;
- // Links in navbars
- //
- // Add a class to ensure links outside the navbar nav are colored correctly.
-
- .navbar-link {
- color: $navbar-default-link-color;
- &:hover {
- color: $navbar-default-link-hover-color;
- }
- }
-
- .btn-link {
- color: $navbar-default-link-color;
- &:hover,
- &:focus {
- color: $navbar-default-link-hover-color;
- }
- &[disabled],
- fieldset[disabled] & {
- &:hover,
- &:focus {
- color: $navbar-default-link-disabled-color;
- }
+ a,
+ a:hover,
+ a:focus {
+ color: $navbar-light-active-color;
}
}
}
-// Inverse navbar
-
-.navbar-inverse {
- background-color: $navbar-inverse-bg;
- border-color: $navbar-inverse-border;
-
+// White links against a dark background
+.navbar-dark {
.navbar-brand {
- color: $navbar-inverse-brand-color;
+ color: $navbar-dark-brand-color;
+
&:hover,
&:focus {
- color: $navbar-inverse-brand-hover-color;
- background-color: $navbar-inverse-brand-hover-bg;
+ color: $navbar-dark-brand-hover-color;
}
}
- .navbar-text {
- color: $navbar-inverse-color;
- }
-
.navbar-nav {
- > li > a {
- color: $navbar-inverse-link-color;
+ .nav-link {
+ color: $navbar-dark-color;
&:hover,
&:focus {
- color: $navbar-inverse-link-hover-color;
- background-color: $navbar-inverse-link-hover-bg;
- }
- }
- > .active > a {
- &,
- &:hover,
- &:focus {
- color: $navbar-inverse-link-active-color;
- background-color: $navbar-inverse-link-active-bg;
+ color: $navbar-dark-hover-color;
}
- }
- > .disabled > a {
- &,
- &:hover,
- &:focus {
- color: $navbar-inverse-link-disabled-color;
- background-color: $navbar-inverse-link-disabled-bg;
+
+ &.disabled {
+ color: $navbar-dark-disabled-color;
}
}
- }
- // Darken the responsive nav toggle
- .navbar-toggle {
- border-color: $navbar-inverse-toggle-border-color;
- &:hover,
- &:focus {
- background-color: $navbar-inverse-toggle-hover-bg;
+ .show > .nav-link,
+ .nav-link.active {
+ color: $navbar-dark-active-color;
}
- .icon-bar {
- background-color: $navbar-inverse-toggle-icon-bar-bg;
- }
- }
-
- .navbar-collapse,
- .navbar-form {
- border-color: darken($navbar-inverse-bg, 7%);
}
- // Dropdowns
- .navbar-nav {
- > .open > a {
- &,
- &:hover,
- &:focus {
- background-color: $navbar-inverse-link-active-bg;
- color: $navbar-inverse-link-active-color;
- }
- }
-
- @media (max-width: $grid-float-breakpoint-max) {
- // Dropdowns get custom display
- .open .dropdown-menu {
- > .dropdown-header {
- border-color: $navbar-inverse-border;
- }
- .divider {
- background-color: $navbar-inverse-border;
- }
- > li > a {
- color: $navbar-inverse-link-color;
- &:hover,
- &:focus {
- color: $navbar-inverse-link-hover-color;
- background-color: $navbar-inverse-link-hover-bg;
- }
- }
- > .active > a {
- &,
- &:hover,
- &:focus {
- color: $navbar-inverse-link-active-color;
- background-color: $navbar-inverse-link-active-bg;
- }
- }
- > .disabled > a {
- &,
- &:hover,
- &:focus {
- color: $navbar-inverse-link-disabled-color;
- background-color: $navbar-inverse-link-disabled-bg;
- }
- }
- }
- }
+ .navbar-toggler {
+ color: $navbar-dark-color;
+ border-color: $navbar-dark-toggler-border-color;
}
- .navbar-link {
- color: $navbar-inverse-link-color;
- &:hover {
- color: $navbar-inverse-link-hover-color;
- }
+ .navbar-toggler-icon {
+ background-image: escape-svg($navbar-dark-toggler-icon-bg);
}
- .btn-link {
- color: $navbar-inverse-link-color;
- &:hover,
- &:focus {
- color: $navbar-inverse-link-hover-color;
- }
- &[disabled],
- fieldset[disabled] & {
- &:hover,
- &:focus {
- color: $navbar-inverse-link-disabled-color;
- }
+ .navbar-text {
+ color: $navbar-dark-color;
+ a,
+ a:hover,
+ a:focus {
+ color: $navbar-dark-active-color;
}
}
}
diff --git a/style/bootstrap/_navs.scss b/style/bootstrap/_navs.scss
deleted file mode 100644
index 9d369f3079..0000000000
--- a/style/bootstrap/_navs.scss
+++ /dev/null
@@ -1,242 +0,0 @@
-//
-// Navs
-// --------------------------------------------------
-
-
-// Base class
-// --------------------------------------------------
-
-.nav {
- margin-bottom: 0;
- padding-left: 0; // Override default ul/ol
- list-style: none;
- @include clearfix;
-
- > li {
- position: relative;
- display: block;
-
- > a {
- position: relative;
- display: block;
- padding: $nav-link-padding;
- &:hover,
- &:focus {
- text-decoration: none;
- background-color: $nav-link-hover-bg;
- }
- }
-
- // Disabled state sets text to gray and nukes hover/tab effects
- &.disabled > a {
- color: $nav-disabled-link-color;
-
- &:hover,
- &:focus {
- color: $nav-disabled-link-hover-color;
- text-decoration: none;
- background-color: transparent;
- cursor: $cursor-disabled;
- }
- }
- }
-
- // Open dropdowns
- .open > a {
- &,
- &:hover,
- &:focus {
- background-color: $nav-link-hover-bg;
- border-color: $link-color;
- }
- }
-
- // Nav dividers (deprecated with v3.0.1)
- //
- // This should have been removed in v3 with the dropping of `.nav-list`, but
- // we missed it. We don't currently support this anywhere, but in the interest
- // of maintaining backward compatibility in case you use it, it's deprecated.
- .nav-divider {
- @include nav-divider;
- }
-
- // Prevent IE8 from misplacing imgs
- //
- // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
- > li > a > img {
- max-width: none;
- }
-}
-
-
-// Tabs
-// -------------------------
-
-// Give the tabs something to sit on
-.nav-tabs {
- border-bottom: 1px solid $nav-tabs-border-color;
- > li {
- float: left;
- // Make the list-items overlay the bottom border
- margin-bottom: -1px;
-
- // Actual tabs (as links)
- > a {
- margin-right: 2px;
- line-height: $line-height-base;
- border: 1px solid transparent;
- border-radius: $border-radius-base $border-radius-base 0 0;
- &:hover {
- border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
- }
- }
-
- // Active state, and its :hover to override normal :hover
- &.active > a {
- &,
- &:hover,
- &:focus {
- color: $nav-tabs-active-link-hover-color;
- background-color: $nav-tabs-active-link-hover-bg;
- border: 1px solid $nav-tabs-active-link-hover-border-color;
- border-bottom-color: transparent;
- cursor: default;
- }
- }
- }
- // pulling this in mainly for less shorthand
- &.nav-justified {
- @extend .nav-justified;
- @extend .nav-tabs-justified;
- }
-}
-
-
-// Pills
-// -------------------------
-.nav-pills {
- > li {
- float: left;
-
- // Links rendered as pills
- > a {
- border-radius: $nav-pills-border-radius;
- }
- + li {
- margin-left: 2px;
- }
-
- // Active state
- &.active > a {
- &,
- &:hover,
- &:focus {
- color: $nav-pills-active-link-hover-color;
- background-color: $nav-pills-active-link-hover-bg;
- }
- }
- }
-}
-
-
-// Stacked pills
-.nav-stacked {
- > li {
- float: none;
- + li {
- margin-top: 2px;
- margin-left: 0; // no need for this gap between nav items
- }
- }
-}
-
-
-// Nav variations
-// --------------------------------------------------
-
-// Justified nav links
-// -------------------------
-
-.nav-justified {
- width: 100%;
-
- > li {
- float: none;
- > a {
- text-align: center;
- margin-bottom: 5px;
- }
- }
-
- > .dropdown .dropdown-menu {
- top: auto;
- left: auto;
- }
-
- @media (min-width: $screen-sm-min) {
- > li {
- display: table-cell;
- width: 1%;
- > a {
- margin-bottom: 0;
- }
- }
- }
-}
-
-// Move borders to anchors instead of bottom of list
-//
-// Mixin for adding on top the shared `.nav-justified` styles for our tabs
-.nav-tabs-justified {
- border-bottom: 0;
-
- > li > a {
- // Override margin from .nav-tabs
- margin-right: 0;
- border-radius: $border-radius-base;
- }
-
- > .active > a,
- > .active > a:hover,
- > .active > a:focus {
- border: 1px solid $nav-tabs-justified-link-border-color;
- }
-
- @media (min-width: $screen-sm-min) {
- > li > a {
- border-bottom: 1px solid $nav-tabs-justified-link-border-color;
- border-radius: $border-radius-base $border-radius-base 0 0;
- }
- > .active > a,
- > .active > a:hover,
- > .active > a:focus {
- border-bottom-color: $nav-tabs-justified-active-link-border-color;
- }
- }
-}
-
-
-// Tabbable tabs
-// -------------------------
-
-// Hide tabbable panes to start, show them when `.active`
-.tab-content {
- > .tab-pane {
- display: none;
- }
- > .active {
- display: block;
- }
-}
-
-
-// Dropdowns
-// -------------------------
-
-// Specific dropdowns
-.nav-tabs .dropdown-menu {
- // make dropdown border overlap tab border
- margin-top: -1px;
- // Remove the top rounded corners here since there is a hard edge above the menu
- @include border-top-radius(0);
-}
diff --git a/style/bootstrap/_normalize.scss b/style/bootstrap/_normalize.scss
deleted file mode 100644
index 9dddf73ad2..0000000000
--- a/style/bootstrap/_normalize.scss
+++ /dev/null
@@ -1,424 +0,0 @@
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-
-//
-// 1. Set default font family to sans-serif.
-// 2. Prevent iOS and IE text size adjust after device orientation change,
-// without disabling user zoom.
-//
-
-html {
- font-family: sans-serif; // 1
- -ms-text-size-adjust: 100%; // 2
- -webkit-text-size-adjust: 100%; // 2
-}
-
-//
-// Remove default margin.
-//
-
-body {
- margin: 0;
-}
-
-// HTML5 display definitions
-// ==========================================================================
-
-//
-// Correct `block` display not defined for any HTML5 element in IE 8/9.
-// Correct `block` display not defined for `details` or `summary` in IE 10/11
-// and Firefox.
-// Correct `block` display not defined for `main` in IE 11.
-//
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
- display: block;
-}
-
-//
-// 1. Correct `inline-block` display not defined in IE 8/9.
-// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
-//
-
-audio,
-canvas,
-progress,
-video {
- display: inline-block; // 1
- vertical-align: baseline; // 2
-}
-
-//
-// Prevent modern browsers from displaying `audio` without controls.
-// Remove excess height in iOS 5 devices.
-//
-
-audio:not([controls]) {
- display: none;
- height: 0;
-}
-
-//
-// Address `[hidden]` styling not present in IE 8/9/10.
-// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
-//
-
-[hidden],
-template {
- display: none;
-}
-
-// Links
-// ==========================================================================
-
-//
-// Remove the gray background color from active links in IE 10.
-//
-
-a {
- background-color: transparent;
-}
-
-//
-// Improve readability of focused elements when they are also in an
-// active/hover state.
-//
-
-a:active,
-a:hover {
- outline: 0;
-}
-
-// Text-level semantics
-// ==========================================================================
-
-//
-// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
-//
-
-abbr[title] {
- border-bottom: 1px dotted;
-}
-
-//
-// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
-//
-
-b,
-strong {
- font-weight: bold;
-}
-
-//
-// Address styling not present in Safari and Chrome.
-//
-
-dfn {
- font-style: italic;
-}
-
-//
-// Address variable `h1` font-size and margin within `section` and `article`
-// contexts in Firefox 4+, Safari, and Chrome.
-//
-
-h1 {
- font-size: 2em;
- margin: 0.67em 0;
-}
-
-//
-// Address styling not present in IE 8/9.
-//
-
-mark {
- background: #ff0;
- color: #000;
-}
-
-//
-// Address inconsistent and variable font size in all browsers.
-//
-
-small {
- font-size: 80%;
-}
-
-//
-// Prevent `sub` and `sup` affecting `line-height` in all browsers.
-//
-
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-sup {
- top: -0.5em;
-}
-
-sub {
- bottom: -0.25em;
-}
-
-// Embedded content
-// ==========================================================================
-
-//
-// Remove border when inside `a` element in IE 8/9/10.
-//
-
-img {
- border: 0;
-}
-
-//
-// Correct overflow not hidden in IE 9/10/11.
-//
-
-svg:not(:root) {
- overflow: hidden;
-}
-
-// Grouping content
-// ==========================================================================
-
-//
-// Address margin not present in IE 8/9 and Safari.
-//
-
-figure {
- margin: 1em 40px;
-}
-
-//
-// Address differences between Firefox and other browsers.
-//
-
-hr {
- box-sizing: content-box;
- height: 0;
-}
-
-//
-// Contain overflow in all browsers.
-//
-
-pre {
- overflow: auto;
-}
-
-//
-// Address odd `em`-unit font size rendering in all browsers.
-//
-
-code,
-kbd,
-pre,
-samp {
- font-family: monospace, monospace;
- font-size: 1em;
-}
-
-// Forms
-// ==========================================================================
-
-//
-// Known limitation: by default, Chrome and Safari on OS X allow very limited
-// styling of `select`, unless a `border` property is set.
-//
-
-//
-// 1. Correct color not being inherited.
-// Known issue: affects color of disabled elements.
-// 2. Correct font properties not being inherited.
-// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
-//
-
-button,
-input,
-optgroup,
-select,
-textarea {
- color: inherit; // 1
- font: inherit; // 2
- margin: 0; // 3
-}
-
-//
-// Address `overflow` set to `hidden` in IE 8/9/10/11.
-//
-
-button {
- overflow: visible;
-}
-
-//
-// Address inconsistent `text-transform` inheritance for `button` and `select`.
-// All other form control elements do not inherit `text-transform` values.
-// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
-// Correct `select` style inheritance in Firefox.
-//
-
-button,
-select {
- text-transform: none;
-}
-
-//
-// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
-// and `video` controls.
-// 2. Correct inability to style clickable `input` types in iOS.
-// 3. Improve usability and consistency of cursor style between image-type
-// `input` and others.
-//
-
-button,
-html input[type="button"], // 1
-input[type="reset"],
-input[type="submit"] {
- -webkit-appearance: button; // 2
- cursor: pointer; // 3
-}
-
-//
-// Re-set default cursor for disabled elements.
-//
-
-button[disabled],
-html input[disabled] {
- cursor: default;
-}
-
-//
-// Remove inner padding and border in Firefox 4+.
-//
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-
-//
-// Address Firefox 4+ setting `line-height` on `input` using `!important` in
-// the UA stylesheet.
-//
-
-input {
- line-height: normal;
-}
-
-//
-// It's recommended that you don't attempt to style these elements.
-// Firefox's implementation doesn't respect box-sizing, padding, or width.
-//
-// 1. Address box sizing set to `content-box` in IE 8/9/10.
-// 2. Remove excess padding in IE 8/9/10.
-//
-
-input[type="checkbox"],
-input[type="radio"] {
- box-sizing: border-box; // 1
- padding: 0; // 2
-}
-
-//
-// Fix the cursor style for Chrome's increment/decrement buttons. For certain
-// `font-size` values of the `input`, it causes the cursor style of the
-// decrement button to change from `default` to `text`.
-//
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
- height: auto;
-}
-
-//
-// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
-// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
-//
-
-input[type="search"] {
- -webkit-appearance: textfield; // 1
- box-sizing: content-box; //2
-}
-
-//
-// Remove inner padding and search cancel button in Safari and Chrome on OS X.
-// Safari (but not Chrome) clips the cancel button when the search input has
-// padding (and `textfield` appearance).
-//
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-//
-// Define consistent border, margin, and padding.
-//
-
-fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
-}
-
-//
-// 1. Correct `color` not being inherited in IE 8/9/10/11.
-// 2. Remove padding so people aren't caught out if they zero out fieldsets.
-//
-
-legend {
- border: 0; // 1
- padding: 0; // 2
-}
-
-//
-// Remove default vertical scrollbar in IE 8/9/10/11.
-//
-
-textarea {
- overflow: auto;
-}
-
-//
-// Don't inherit the `font-weight` (applied by a rule above).
-// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
-//
-
-optgroup {
- font-weight: bold;
-}
-
-// Tables
-// ==========================================================================
-
-//
-// Remove most spacing between table cells.
-//
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-td,
-th {
- padding: 0;
-}
diff --git a/style/bootstrap/_pager.scss b/style/bootstrap/_pager.scss
deleted file mode 100644
index c2342174ff..0000000000
--- a/style/bootstrap/_pager.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-//
-// Pager pagination
-// --------------------------------------------------
-
-
-.pager {
- padding-left: 0;
- margin: $line-height-computed 0;
- list-style: none;
- text-align: center;
- @include clearfix;
- li {
- display: inline;
- > a,
- > span {
- display: inline-block;
- padding: 5px 14px;
- background-color: $pager-bg;
- border: 1px solid $pager-border;
- border-radius: $pager-border-radius;
- }
-
- > a:hover,
- > a:focus {
- text-decoration: none;
- background-color: $pager-hover-bg;
- }
- }
-
- .next {
- > a,
- > span {
- float: right;
- }
- }
-
- .previous {
- > a,
- > span {
- float: left;
- }
- }
-
- .disabled {
- > a,
- > a:hover,
- > a:focus,
- > span {
- color: $pager-disabled-color;
- background-color: $pager-bg;
- cursor: $cursor-disabled;
- }
- }
-}
diff --git a/style/bootstrap/_pagination.scss b/style/bootstrap/_pagination.scss
index fecfa9c642..04bf82536f 100644
--- a/style/bootstrap/_pagination.scss
+++ b/style/bootstrap/_pagination.scss
@@ -1,89 +1,64 @@
-//
-// Pagination (multiple pages)
-// --------------------------------------------------
.pagination {
- display: inline-block;
- padding-left: 0;
- margin: $line-height-computed 0;
- border-radius: $border-radius-base;
+ display: flex;
+ @include list-unstyled();
+}
+
+.page-link {
+ position: relative;
+ display: block;
+ color: $pagination-color;
+ text-decoration: if($link-decoration == none, null, none);
+ background-color: $pagination-bg;
+ border: $pagination-border-width solid $pagination-border-color;
+ @include transition($pagination-transition);
- > li {
- display: inline; // Remove list-style and block-level defaults
- > a,
- > span {
- position: relative;
- float: left; // Collapse white-space
- padding: $padding-base-vertical $padding-base-horizontal;
- line-height: $line-height-base;
- text-decoration: none;
- color: $pagination-color;
- background-color: $pagination-bg;
- border: 1px solid $pagination-border;
- margin-left: -1px;
- }
- &:first-child {
- > a,
- > span {
- margin-left: 0;
- @include border-left-radius($border-radius-base);
- }
- }
- &:last-child {
- > a,
- > span {
- @include border-right-radius($border-radius-base);
- }
- }
+ &:hover {
+ z-index: 2;
+ color: $pagination-hover-color;
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ background-color: $pagination-hover-bg;
+ border-color: $pagination-hover-border-color;
}
- > li > a,
- > li > span {
- &:hover,
- &:focus {
- z-index: 2;
- color: $pagination-hover-color;
- background-color: $pagination-hover-bg;
- border-color: $pagination-hover-border;
- }
+ &:focus {
+ z-index: 3;
+ color: $pagination-focus-color;
+ background-color: $pagination-focus-bg;
+ outline: $pagination-focus-outline;
+ box-shadow: $pagination-focus-box-shadow;
}
+}
- > .active > a,
- > .active > span {
- &,
- &:hover,
- &:focus {
- z-index: 3;
- color: $pagination-active-color;
- background-color: $pagination-active-bg;
- border-color: $pagination-active-border;
- cursor: default;
- }
+.page-item {
+ &:not(:first-child) .page-link {
+ margin-left: $pagination-margin-start;
}
- > .disabled {
- > span,
- > span:hover,
- > span:focus,
- > a,
- > a:hover,
- > a:focus {
- color: $pagination-disabled-color;
- background-color: $pagination-disabled-bg;
- border-color: $pagination-disabled-border;
- cursor: $cursor-disabled;
- }
+ &.active .page-link {
+ z-index: 3;
+ color: $pagination-active-color;
+ @include gradient-bg($pagination-active-bg);
+ border-color: $pagination-active-border-color;
+ }
+
+ &.disabled .page-link {
+ color: $pagination-disabled-color;
+ pointer-events: none;
+ background-color: $pagination-disabled-bg;
+ border-color: $pagination-disabled-border-color;
}
}
+
+//
// Sizing
-// --------------------------------------------------
+//
+@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
-// Large
.pagination-lg {
- @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
+ @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $border-radius-lg);
}
-// Small
.pagination-sm {
- @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
+ @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $border-radius-sm);
}
diff --git a/style/bootstrap/_panels.scss b/style/bootstrap/_panels.scss
deleted file mode 100644
index 6c568def47..0000000000
--- a/style/bootstrap/_panels.scss
+++ /dev/null
@@ -1,271 +0,0 @@
-//
-// Panels
-// --------------------------------------------------
-
-
-// Base class
-.panel {
- margin-bottom: $line-height-computed;
- background-color: $panel-bg;
- border: 1px solid transparent;
- border-radius: $panel-border-radius;
- @include box-shadow(0 1px 1px rgba(0,0,0,.05));
-}
-
-// Panel contents
-.panel-body {
- padding: $panel-body-padding;
- @include clearfix;
-}
-
-// Optional heading
-.panel-heading {
- padding: $panel-heading-padding;
- border-bottom: 1px solid transparent;
- @include border-top-radius(($panel-border-radius - 1));
-
- > .dropdown .dropdown-toggle {
- color: inherit;
- }
-}
-
-// Within heading, strip any `h*` tag of its default margins for spacing.
-.panel-title {
- margin-top: 0;
- margin-bottom: 0;
- font-size: ceil(($font-size-base * 1.125));
- color: inherit;
-
- > a,
- > small,
- > .small,
- > small > a,
- > .small > a {
- color: inherit;
- }
-}
-
-// Optional footer (stays gray in every modifier class)
-.panel-footer {
- padding: $panel-footer-padding;
- background-color: $panel-footer-bg;
- border-top: 1px solid $panel-inner-border;
- @include border-bottom-radius(($panel-border-radius - 1));
-}
-
-
-// List groups in panels
-//
-// By default, space out list group content from panel headings to account for
-// any kind of custom content between the two.
-
-.panel {
- > .list-group,
- > .panel-collapse > .list-group {
- margin-bottom: 0;
-
- .list-group-item {
- border-width: 1px 0;
- border-radius: 0;
- }
-
- // Add border top radius for first one
- &:first-child {
- .list-group-item:first-child {
- border-top: 0;
- @include border-top-radius(($panel-border-radius - 1));
- }
- }
-
- // Add border bottom radius for last one
- &:last-child {
- .list-group-item:last-child {
- border-bottom: 0;
- @include border-bottom-radius(($panel-border-radius - 1));
- }
- }
- }
- > .panel-heading + .panel-collapse > .list-group {
- .list-group-item:first-child {
- @include border-top-radius(0);
- }
- }
-}
-// Collapse space between when there's no additional content.
-.panel-heading + .list-group {
- .list-group-item:first-child {
- border-top-width: 0;
- }
-}
-.list-group + .panel-footer {
- border-top-width: 0;
-}
-
-// Tables in panels
-//
-// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
-// watch it go full width.
-
-.panel {
- > .table,
- > .table-responsive > .table,
- > .panel-collapse > .table {
- margin-bottom: 0;
-
- caption {
- padding-left: $panel-body-padding;
- padding-right: $panel-body-padding;
- }
- }
- // Add border top radius for first one
- > .table:first-child,
- > .table-responsive:first-child > .table:first-child {
- @include border-top-radius(($panel-border-radius - 1));
-
- > thead:first-child,
- > tbody:first-child {
- > tr:first-child {
- border-top-left-radius: ($panel-border-radius - 1);
- border-top-right-radius: ($panel-border-radius - 1);
-
- td:first-child,
- th:first-child {
- border-top-left-radius: ($panel-border-radius - 1);
- }
- td:last-child,
- th:last-child {
- border-top-right-radius: ($panel-border-radius - 1);
- }
- }
- }
- }
- // Add border bottom radius for last one
- > .table:last-child,
- > .table-responsive:last-child > .table:last-child {
- @include border-bottom-radius(($panel-border-radius - 1));
-
- > tbody:last-child,
- > tfoot:last-child {
- > tr:last-child {
- border-bottom-left-radius: ($panel-border-radius - 1);
- border-bottom-right-radius: ($panel-border-radius - 1);
-
- td:first-child,
- th:first-child {
- border-bottom-left-radius: ($panel-border-radius - 1);
- }
- td:last-child,
- th:last-child {
- border-bottom-right-radius: ($panel-border-radius - 1);
- }
- }
- }
- }
- > .panel-body + .table,
- > .panel-body + .table-responsive,
- > .table + .panel-body,
- > .table-responsive + .panel-body {
- border-top: 1px solid $table-border-color;
- }
- > .table > tbody:first-child > tr:first-child th,
- > .table > tbody:first-child > tr:first-child td {
- border-top: 0;
- }
- > .table-bordered,
- > .table-responsive > .table-bordered {
- border: 0;
- > thead,
- > tbody,
- > tfoot {
- > tr {
- > th:first-child,
- > td:first-child {
- border-left: 0;
- }
- > th:last-child,
- > td:last-child {
- border-right: 0;
- }
- }
- }
- > thead,
- > tbody {
- > tr:first-child {
- > td,
- > th {
- border-bottom: 0;
- }
- }
- }
- > tbody,
- > tfoot {
- > tr:last-child {
- > td,
- > th {
- border-bottom: 0;
- }
- }
- }
- }
- > .table-responsive {
- border: 0;
- margin-bottom: 0;
- }
-}
-
-
-// Collapsible panels (aka, accordion)
-//
-// Wrap a series of panels in `.panel-group` to turn them into an accordion with
-// the help of our collapse JavaScript plugin.
-
-.panel-group {
- margin-bottom: $line-height-computed;
-
- // Tighten up margin so it's only between panels
- .panel {
- margin-bottom: 0;
- border-radius: $panel-border-radius;
-
- + .panel {
- margin-top: 5px;
- }
- }
-
- .panel-heading {
- border-bottom: 0;
-
- + .panel-collapse > .panel-body,
- + .panel-collapse > .list-group {
- border-top: 1px solid $panel-inner-border;
- }
- }
-
- .panel-footer {
- border-top: 0;
- + .panel-collapse .panel-body {
- border-bottom: 1px solid $panel-inner-border;
- }
- }
-}
-
-
-// Contextual variations
-.panel-default {
- @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
-}
-.panel-primary {
- @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
-}
-.panel-success {
- @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
-}
-.panel-info {
- @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
-}
-.panel-warning {
- @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
-}
-.panel-danger {
- @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
-}
diff --git a/style/bootstrap/_popover.scss b/style/bootstrap/_popover.scss
new file mode 100644
index 0000000000..e4f686043c
--- /dev/null
+++ b/style/bootstrap/_popover.scss
@@ -0,0 +1,173 @@
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0 #{"/* rtl:ignore */"};
+ 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.
+ @include reset-text();
+ @include 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;
+ @include border-radius($popover-border-radius);
+ @include box-shadow($popover-box-shadow);
+
+ .popover-arrow {
+ position: absolute;
+ display: block;
+ width: $popover-arrow-width;
+ height: $popover-arrow-height;
+ margin: 0 $popover-border-radius;
+
+ &::before,
+ &::after {
+ position: absolute;
+ display: block;
+ content: "";
+ border-color: transparent;
+ border-style: solid;
+ }
+ }
+}
+
+.bs-popover-top {
+ // Overrule margin set by popper.js
+ margin-bottom: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
+
+ > .popover-arrow {
+ bottom: subtract(-$popover-arrow-height, $popover-border-width);
+
+ &::before {
+ bottom: 0;
+ border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-top-color: $popover-arrow-outer-color;
+ }
+
+ &::after {
+ bottom: $popover-border-width;
+ border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-top-color: $popover-arrow-color;
+ }
+ }
+}
+
+.bs-popover-end {
+ // Overrule margin set by popper.js
+ margin-left: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
+
+ > .popover-arrow {
+ left: subtract(-$popover-arrow-height, $popover-border-width);
+ width: $popover-arrow-height;
+ height: $popover-arrow-width;
+ margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+
+ &::before {
+ left: 0;
+ border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-right-color: $popover-arrow-outer-color;
+ }
+
+ &::after {
+ left: $popover-border-width;
+ border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-right-color: $popover-arrow-color;
+ }
+ }
+}
+
+.bs-popover-bottom {
+ // Overrule margin set by popper.js
+ margin-top: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
+
+ > .popover-arrow {
+ top: subtract(-$popover-arrow-height, $popover-border-width);
+
+ &::before {
+ top: 0;
+ border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-bottom-color: $popover-arrow-outer-color;
+ }
+
+ &::after {
+ top: $popover-border-width;
+ border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ 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-start {
+ // Overrule margin set by popper.js
+ margin-right: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
+
+ > .popover-arrow {
+ right: subtract(-$popover-arrow-height, $popover-border-width);
+ width: $popover-arrow-height;
+ height: $popover-arrow-width;
+ margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+
+ &::before {
+ right: 0;
+ border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-left-color: $popover-arrow-outer-color;
+ }
+
+ &::after {
+ right: $popover-border-width;
+ border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-left-color: $popover-arrow-color;
+ }
+ }
+}
+
+.bs-popover-auto {
+ &[data-popper-placement^="top"] {
+ @extend .bs-popover-top;
+ }
+ &[data-popper-placement^="right"] {
+ @extend .bs-popover-end;
+ }
+ &[data-popper-placement^="bottom"] {
+ @extend .bs-popover-bottom;
+ }
+ &[data-popper-placement^="left"] {
+ @extend .bs-popover-start;
+ }
+}
+
+// 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
+ @include font-size($font-size-base);
+ color: $popover-header-color;
+ background-color: $popover-header-bg;
+ border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
+ @include border-top-radius($popover-inner-border-radius);
+
+ &:empty {
+ display: none;
+ }
+}
+
+.popover-body {
+ padding: $popover-body-padding-y $popover-body-padding-x;
+ color: $popover-body-color;
+}
diff --git a/style/bootstrap/_popovers.scss b/style/bootstrap/_popovers.scss
deleted file mode 100644
index 9b90a2e964..0000000000
--- a/style/bootstrap/_popovers.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-//
-// Popovers
-// --------------------------------------------------
-
-
-.popover {
- position: absolute;
- top: 0;
- left: 0;
- z-index: $zindex-popover;
- display: none;
- max-width: $popover-max-width;
- padding: 1px;
- // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
- // So reset our font and text properties to avoid inheriting weird values.
- @include reset-text;
- font-size: $font-size-base;
-
- background-color: $popover-bg;
- background-clip: padding-box;
- border: 1px solid $popover-fallback-border-color;
- border: 1px solid $popover-border-color;
- border-radius: $border-radius-large;
- @include box-shadow(0 5px 10px rgba(0,0,0,.2));
-
- // Offset the popover to account for the popover arrow
- &.top { margin-top: -$popover-arrow-width; }
- &.right { margin-left: $popover-arrow-width; }
- &.bottom { margin-top: $popover-arrow-width; }
- &.left { margin-left: -$popover-arrow-width; }
-}
-
-.popover-title {
- margin: 0; // reset heading margin
- padding: 8px 14px;
- font-size: $font-size-base;
- background-color: $popover-title-bg;
- border-bottom: 1px solid darken($popover-title-bg, 5%);
- border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
-}
-
-.popover-content {
- padding: 9px 14px;
-}
-
-// Arrows
-//
-// .arrow is outer, .arrow:after is inner
-
-.popover > .arrow {
- &,
- &:after {
- position: absolute;
- display: block;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- }
-}
-.popover > .arrow {
- border-width: $popover-arrow-outer-width;
-}
-.popover > .arrow:after {
- border-width: $popover-arrow-width;
- content: "";
-}
-
-.popover {
- &.top > .arrow {
- left: 50%;
- margin-left: -$popover-arrow-outer-width;
- border-bottom-width: 0;
- border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback
- border-top-color: $popover-arrow-outer-color;
- bottom: -$popover-arrow-outer-width;
- &:after {
- content: " ";
- bottom: 1px;
- margin-left: -$popover-arrow-width;
- border-bottom-width: 0;
- border-top-color: $popover-arrow-color;
- }
- }
- &.right > .arrow {
- top: 50%;
- left: -$popover-arrow-outer-width;
- margin-top: -$popover-arrow-outer-width;
- border-left-width: 0;
- border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback
- border-right-color: $popover-arrow-outer-color;
- &:after {
- content: " ";
- left: 1px;
- bottom: -$popover-arrow-width;
- border-left-width: 0;
- border-right-color: $popover-arrow-color;
- }
- }
- &.bottom > .arrow {
- left: 50%;
- margin-left: -$popover-arrow-outer-width;
- border-top-width: 0;
- border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback
- border-bottom-color: $popover-arrow-outer-color;
- top: -$popover-arrow-outer-width;
- &:after {
- content: " ";
- top: 1px;
- margin-left: -$popover-arrow-width;
- border-top-width: 0;
- border-bottom-color: $popover-arrow-color;
- }
- }
-
- &.left > .arrow {
- top: 50%;
- right: -$popover-arrow-outer-width;
- margin-top: -$popover-arrow-outer-width;
- border-right-width: 0;
- border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback
- border-left-color: $popover-arrow-outer-color;
- &:after {
- content: " ";
- right: 1px;
- border-right-width: 0;
- border-left-color: $popover-arrow-color;
- bottom: -$popover-arrow-width;
- }
- }
-}
diff --git a/style/bootstrap/_print.scss b/style/bootstrap/_print.scss
deleted file mode 100644
index 66e54ab489..0000000000
--- a/style/bootstrap/_print.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
-
-// ==========================================================================
-// Print styles.
-// Inlined to avoid the additional HTTP request: h5bp.com/r
-// ==========================================================================
-
-@media print {
- *,
- *:before,
- *:after {
- background: transparent !important;
- color: #000 !important; // Black prints faster: h5bp.com/s
- box-shadow: none !important;
- text-shadow: none !important;
- }
-
- a,
- a:visited {
- text-decoration: underline;
- }
-
- a[href]:after {
- content: " (" attr(href) ")";
- }
-
- abbr[title]:after {
- content: " (" attr(title) ")";
- }
-
- // Don't show links that are fragment identifiers,
- // or use the `javascript:` pseudo protocol
- a[href^="#"]:after,
- a[href^="javascript:"]:after {
- content: "";
- }
-
- pre,
- blockquote {
- border: 1px solid #999;
- page-break-inside: avoid;
- }
-
- thead {
- display: table-header-group; // h5bp.com/t
- }
-
- tr,
- img {
- page-break-inside: avoid;
- }
-
- img {
- max-width: 100% !important;
- }
-
- p,
- h2,
- h3 {
- orphans: 3;
- widows: 3;
- }
-
- h2,
- h3 {
- page-break-after: avoid;
- }
-
- // Bootstrap specific changes start
-
- // Bootstrap components
- .navbar {
- display: none;
- }
- .btn,
- .dropup > .btn {
- > .caret {
- border-top-color: #000 !important;
- }
- }
- .label {
- border: 1px solid #000;
- }
-
- .table {
- border-collapse: collapse !important;
-
- td,
- th {
- background-color: #fff !important;
- }
- }
- .table-bordered {
- th,
- td {
- border: 1px solid #ddd !important;
- }
- }
-
- // Bootstrap specific changes end
-}
diff --git a/style/bootstrap/_progress-bars.scss b/style/bootstrap/_progress-bars.scss
deleted file mode 100644
index 343df6323c..0000000000
--- a/style/bootstrap/_progress-bars.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-//
-// Progress bars
-// --------------------------------------------------
-
-
-// Bar animations
-// -------------------------
-
-// WebKit
-@-webkit-keyframes progress-bar-stripes {
- from { background-position: 40px 0; }
- to { background-position: 0 0; }
-}
-
-// Spec and IE10+
-@keyframes progress-bar-stripes {
- from { background-position: 40px 0; }
- to { background-position: 0 0; }
-}
-
-
-// Bar itself
-// -------------------------
-
-// Outer container
-.progress {
- overflow: hidden;
- height: $line-height-computed;
- margin-bottom: $line-height-computed;
- background-color: $progress-bg;
- border-radius: $progress-border-radius;
- @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
-}
-
-// Bar of progress
-.progress-bar {
- float: left;
- width: 0%;
- height: 100%;
- font-size: $font-size-small;
- line-height: $line-height-computed;
- color: $progress-bar-color;
- text-align: center;
- background-color: $progress-bar-bg;
- @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
- @include transition(width .6s ease);
-}
-
-// Striped bars
-//
-// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
-// `.progress-bar-striped` class, which you just add to an existing
-// `.progress-bar`.
-.progress-striped .progress-bar,
-.progress-bar-striped {
- @include gradient-striped;
- background-size: 40px 40px;
-}
-
-// Call animation for the active one
-//
-// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
-// `.progress-bar.active` approach.
-.progress.active .progress-bar,
-.progress-bar.active {
- @include animation(progress-bar-stripes 2s linear infinite);
-}
-
-
-// Variations
-// -------------------------
-
-.progress-bar-success {
- @include progress-bar-variant($progress-bar-success-bg);
-}
-
-.progress-bar-info {
- @include progress-bar-variant($progress-bar-info-bg);
-}
-
-.progress-bar-warning {
- @include progress-bar-variant($progress-bar-warning-bg);
-}
-
-.progress-bar-danger {
- @include progress-bar-variant($progress-bar-danger-bg);
-}
diff --git a/style/bootstrap/_progress.scss b/style/bootstrap/_progress.scss
new file mode 100644
index 0000000000..b48ffc4b8b
--- /dev/null
+++ b/style/bootstrap/_progress.scss
@@ -0,0 +1,45 @@
+// Disable animation if transitions are disabled
+@if $enable-transitions {
+ @keyframes progress-bar-stripes {
+ 0% { background-position-x: $progress-height; }
+ }
+}
+
+.progress {
+ display: flex;
+ height: $progress-height;
+ overflow: hidden; // force rounded corners by cropping it
+ @include font-size($progress-font-size);
+ background-color: $progress-bg;
+ @include border-radius($progress-border-radius);
+ @include box-shadow($progress-box-shadow);
+}
+
+.progress-bar {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ overflow: hidden;
+ color: $progress-bar-color;
+ text-align: center;
+ white-space: nowrap;
+ background-color: $progress-bar-bg;
+ @include transition($progress-bar-transition);
+}
+
+.progress-bar-striped {
+ @include gradient-striped();
+ background-size: $progress-height $progress-height;
+}
+
+@if $enable-transitions {
+ .progress-bar-animated {
+ animation: $progress-bar-animation-timing progress-bar-stripes;
+
+ @if $enable-reduced-motion {
+ @media (prefers-reduced-motion: reduce) {
+ animation: none;
+ }
+ }
+ }
+}
diff --git a/style/bootstrap/_reboot.scss b/style/bootstrap/_reboot.scss
new file mode 100644
index 0000000000..50ba7431b9
--- /dev/null
+++ b/style/bootstrap/_reboot.scss
@@ -0,0 +1,635 @@
+// stylelint-disable 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
+//
+// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+
+// Root
+//
+// Ability to the value of the root font sizes, affecting the value of `rem`.
+// null by default, thus nothing is generated.
+
+:root {
+ font-size: $font-size-root;
+
+ @if $enable-smooth-scroll {
+ @media (prefers-reduced-motion: no-preference) {
+ scroll-behavior: smooth;
+ }
+ }
+}
+
+
+// Body
+//
+// 1. Remove the margin in all browsers.
+// 2. As a best practice, apply a default `background-color`.
+// 3. Prevent adjustments of font size after orientation changes in iOS.
+// 4. Change the default tap highlight to be completely transparent in iOS.
+
+body {
+ margin: 0; // 1
+ font-family: $font-family-base;
+ @include font-size($font-size-base);
+ font-weight: $font-weight-base;
+ line-height: $line-height-base;
+ color: $body-color;
+ text-align: $body-text-align;
+ background-color: $body-bg; // 2
+ -webkit-text-size-adjust: 100%; // 3
+ -webkit-tap-highlight-color: rgba($black, 0); // 4
+}
+
+
+// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
+// on elements that programmatically receive focus but wouldn't normally show a visible
+// focus outline. In general, this would mean that the outline is only applied if the
+// interaction that led to the element receiving programmatic focus was a keyboard interaction,
+// or the browser has somehow determined that the user is primarily a keyboard user and/or
+// wants focus outlines to always be presented.
+// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
+// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+
+[tabindex="-1"]:focus:not(:focus-visible) {
+ outline: 0 !important;
+}
+
+
+// Content grouping
+//
+// 1. Reset Firefox's gray color
+// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
+
+hr {
+ margin: $hr-margin-y 0;
+ color: $hr-color; // 1
+ background-color: currentColor;
+ border: 0;
+ opacity: $hr-opacity;
+}
+
+hr:not([size]) {
+ height: $hr-height; // 2
+}
+
+
+// Typography
+//
+// 1. Remove top margins from headings
+// By default, ``-`` all receive top and bottom margins. We nuke the top
+// margin for easier control within type scales as it avoids margin collapsing.
+
+%heading {
+ margin-top: 0; // 1
+ margin-bottom: $headings-margin-bottom;
+ font-family: $headings-font-family;
+ font-style: $headings-font-style;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ color: $headings-color;
+}
+
+h1 {
+ @extend %heading;
+ @include font-size($h1-font-size);
+}
+
+h2 {
+ @extend %heading;
+ @include font-size($h2-font-size);
+}
+
+h3 {
+ @extend %heading;
+ @include font-size($h3-font-size);
+}
+
+h4 {
+ @extend %heading;
+ @include font-size($h4-font-size);
+}
+
+h5 {
+ @extend %heading;
+ @include font-size($h5-font-size);
+}
+
+h6 {
+ @extend %heading;
+ @include font-size($h6-font-size);
+}
+
+
+// Reset margins on paragraphs
+//
+// Similarly, the top margin on `
`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. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
+// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+// 3. Add explicit cursor to indicate changed behavior.
+// 4. Prevent the text-decoration to be skipped.
+
+abbr[title],
+abbr[data-bs-original-title] { // 1
+ text-decoration: underline; // 2
+ text-decoration: underline dotted; // 2
+ cursor: help; // 3
+ text-decoration-skip-ink: none; // 4
+}
+
+
+// Address
+
+address {
+ margin-bottom: 1rem;
+ font-style: normal;
+ line-height: inherit;
+}
+
+
+// Lists
+
+ol,
+ul {
+ padding-left: 2rem;
+}
+
+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;
+}
+
+// 1. Undo browser default
+
+dd {
+ margin-bottom: .5rem;
+ margin-left: 0; // 1
+}
+
+
+// Blockquote
+
+blockquote {
+ margin: 0 0 1rem;
+}
+
+
+// Strong
+//
+// Add the correct font weight in Chrome, Edge, and Safari
+
+b,
+strong {
+ font-weight: $font-weight-bolder;
+}
+
+
+// Small
+//
+// Add the correct font size in all browsers
+
+small {
+ @include font-size($small-font-size);
+}
+
+
+// Mark
+
+mark {
+ padding: $mark-padding;
+ background-color: $mark-bg;
+}
+
+
+// Sub and Sup
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+
+sub,
+sup {
+ position: relative;
+ @include font-size($sub-sup-font-size);
+ line-height: 0;
+ vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
+
+// Links
+
+a {
+ color: $link-color;
+ text-decoration: $link-decoration;
+
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: $link-hover-decoration;
+ }
+}
+
+// And undo these styles for placeholder links/named anchors (without href).
+// 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([class]) {
+ &,
+ &:hover {
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+
+// Code
+
+pre,
+code,
+kbd,
+samp {
+ font-family: $font-family-code;
+ @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+ direction: ltr #{"/* rtl:ignore */"};
+ unicode-bidi: bidi-override;
+}
+
+// 1. Remove browser default top margin
+// 2. Reset browser default of `1em` to use `rem`s
+// 3. Don't allow content to break outside
+
+pre {
+ display: block;
+ margin-top: 0; // 1
+ margin-bottom: 1rem; // 2
+ overflow: auto; // 3
+ @include font-size($code-font-size);
+ color: $pre-color;
+
+ // Account for some code outputs that place code tags in pre tags
+ code {
+ @include font-size(inherit);
+ color: inherit;
+ word-break: normal;
+ }
+}
+
+code {
+ @include font-size($code-font-size);
+ color: $code-color;
+ word-wrap: break-word;
+
+ // Streamline the style when inside anchors to avoid broken underline and more
+ a > & {
+ color: inherit;
+ }
+}
+
+kbd {
+ padding: $kbd-padding-y $kbd-padding-x;
+ @include font-size($kbd-font-size);
+ color: $kbd-color;
+ background-color: $kbd-bg;
+ @include border-radius($border-radius-sm);
+
+ kbd {
+ padding: 0;
+ @include font-size(1em);
+ font-weight: $nested-kbd-font-weight;
+ }
+}
+
+
+// Figures
+//
+// Apply a consistent margin strategy (matches our type styles).
+
+figure {
+ margin: 0 0 1rem;
+}
+
+
+// Images and content
+
+img,
+svg {
+ vertical-align: middle;
+}
+
+
+// Tables
+//
+// Prevent double borders
+
+table {
+ caption-side: bottom;
+ border-collapse: collapse;
+}
+
+caption {
+ padding-top: $table-cell-padding-y;
+ padding-bottom: $table-cell-padding-y;
+ color: $table-caption-color;
+ text-align: left;
+}
+
+// 1. Removes font-weight bold by inheriting
+// 2. Matches default `
` alignment by inheriting `text-align`.
+// 3. Fix alignment for Safari
+
+th {
+ font-weight: $table-th-font-weight; // 1
+ text-align: inherit; // 2
+ text-align: -webkit-match-parent; // 3
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+}
+
+
+// Forms
+//
+// 1. Allow labels to use `margin` for spacing.
+
+label {
+ display: inline-block; // 1
+}
+
+// Remove the default `border-radius` that macOS Chrome adds.
+// See https://github.com/twbs/bootstrap/issues/24093
+
+button {
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: 0;
+}
+
+// Work around a Firefox 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: dotted 1px;
+ outline: -webkit-focus-ring-color auto 5px;
+}
+
+// 1. Remove the margin in Firefox and Safari
+
+input,
+button,
+select,
+optgroup,
+textarea {
+ margin: 0; // 1
+ font-family: inherit;
+ @include font-size(inherit);
+ line-height: inherit;
+}
+
+// Remove the inheritance of text transform in Firefox
+
+button,
+select {
+ text-transform: none;
+}
+
+// Set the cursor for non-` |