`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);
-
- display: flex;
- align-items: center;
-
- &: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 {
- position: relative;
- margin-bottom: -$nav-tabs-border-width;
- background-color: $nav-tabs-link-bg;
- border: $nav-tabs-border-width solid $nav-tabs-border-color;
- @include border-top-radius($nav-tabs-border-radius);
-
- &.active {
- &:before {
- background: #ffffff;
- }
- }
-
- &:before {
- content: "";
- position: absolute;
- width: 93%;
- height: 3px;
- border-radius: $border-radius;
- top: 1.5px;
- left: 0;
- right: 0;
- margin: auto;
- background: #c2c9d1;
- z-index: 1;
- }
-
- &:hover,
- &:focus {
- border-color: $nav-tabs-link-hover-border-color;
- // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
- isolation: isolate;
- }
-
- &.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 {
- background: none;
- border: 0;
- @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;
- }
-}
-
-.nav-fill,
-.nav-justified {
- .nav-item .nav-link {
- width: 100%; // Make sure button will grow
- }
-}
-
-// Tabbable tabs
-//
-// Hide tabbable panes to start, show them when `.active`
-
-.tab-content {
- > .tab-pane {
- display: none;
- }
- > .active {
- display: block;
- }
-}
diff --git a/src/assets/styles/bootstrap/_navbar.scss b/src/assets/styles/bootstrap/_navbar.scss
deleted file mode 100644
index 103995d..0000000
--- a/src/assets/styles/bootstrap/_navbar.scss
+++ /dev/null
@@ -1,330 +0,0 @@
-// Contents
-//
-// Navbar
-// Navbar brand
-// Navbar nav
-// Navbar text
-// 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-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();
-
- // 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;
- }
-
- > .container,
- > .container-fluid {
- @extend %container-flex-properties;
- }
-
- @each $breakpoint, $container-max-width in $container-max-widths {
- > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
- @extend %container-flex-properties;
- }
- }
-}
-
-// Navbar brand
-//
-// Used for brand, project, or site names.
-
-.navbar-brand {
- 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: if($link-hover-decoration == underline, none, null);
- }
-}
-
-// 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;
- }
-}
-
-// Navbar text
-//
-//
-
-.navbar-text {
- 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;
- @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;
- }
-
- &: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%;
-}
-
-.navbar-nav-scroll {
- max-height: var(--#{$variable-prefix}scroll-height, 75vh);
- overflow-y: auto;
-}
-
-// scss-docs-start navbar-expand-loop
-// 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);
-
- // stylelint-disable-next-line scss/selector-no-union-class-name
- &#{$infix} {
- @include media-breakpoint-up($next) {
- flex-wrap: 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;
- }
- }
-
- .navbar-nav-scroll {
- overflow: visible;
- }
-
- .navbar-collapse {
- display: flex !important; // stylelint-disable-line declaration-no-important
- flex-basis: auto;
- }
-
- .navbar-toggler {
- display: none;
- }
-
- .offcanvas-header {
- display: none;
- }
-
- .offcanvas {
- position: inherit;
- bottom: 0;
- z-index: 1000;
- flex-grow: 1;
- visibility: visible !important; // stylelint-disable-line declaration-no-important
- background-color: transparent;
- border-right: 0;
- border-left: 0;
- @include transition(none);
- transform: none;
- }
- .offcanvas-top,
- .offcanvas-bottom {
- height: auto;
- border-top: 0;
- border-bottom: 0;
- }
-
- .offcanvas-body {
- display: flex;
- flex-grow: 0;
- padding: 0;
- overflow-y: visible;
- }
- }
- }
- }
-}
-// scss-docs-end navbar-expand-loop
-
-// 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-brand-color;
-
- &:hover,
- &:focus {
- color: $navbar-light-brand-hover-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,
- .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: escape-svg($navbar-light-toggler-icon-bg);
- }
-
- .navbar-text {
- color: $navbar-light-color;
-
- a,
- a:hover,
- a:focus {
- color: $navbar-light-active-color;
- }
- }
-}
-
-// White links against a dark background
-.navbar-dark {
- .navbar-brand {
- color: $navbar-dark-brand-color;
-
- &:hover,
- &:focus {
- color: $navbar-dark-brand-hover-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,
- .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: escape-svg($navbar-dark-toggler-icon-bg);
- }
-
- .navbar-text {
- color: $navbar-dark-color;
- a,
- a:hover,
- a:focus {
- color: $navbar-dark-active-color;
- }
- }
-}
diff --git a/src/assets/styles/bootstrap/_offcanvas.scss b/src/assets/styles/bootstrap/_offcanvas.scss
deleted file mode 100644
index 5ee101b..0000000
--- a/src/assets/styles/bootstrap/_offcanvas.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.offcanvas {
- position: fixed;
- bottom: 0;
- z-index: $zindex-offcanvas;
- display: flex;
- flex-direction: column;
- max-width: 100%;
- color: $offcanvas-color;
- visibility: hidden;
- background-color: $offcanvas-bg-color;
- background-clip: padding-box;
- outline: 0;
- @include box-shadow($offcanvas-box-shadow);
- @include transition(transform $offcanvas-transition-duration ease-in-out);
-}
-
-.offcanvas-backdrop {
- @include overlay-backdrop(
- $zindex-offcanvas-backdrop,
- $offcanvas-backdrop-bg,
- $offcanvas-backdrop-opacity
- );
-}
-
-.offcanvas-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: $offcanvas-padding-y $offcanvas-padding-x;
-
- .btn-close {
- padding: ($offcanvas-padding-y * 0.5) ($offcanvas-padding-x * 0.5);
- margin-top: $offcanvas-padding-y * -0.5;
- margin-right: $offcanvas-padding-x * -0.5;
- margin-bottom: $offcanvas-padding-y * -0.5;
- }
-}
-
-.offcanvas-title {
- margin-bottom: 0;
- line-height: $offcanvas-title-line-height;
-}
-
-.offcanvas-body {
- flex-grow: 1;
- padding: $offcanvas-padding-y $offcanvas-padding-x;
- overflow-y: auto;
-}
-
-.offcanvas-start {
- top: 0;
- left: 0;
- width: $offcanvas-horizontal-width;
- border-right: $offcanvas-border-width solid $offcanvas-border-color;
- transform: translateX(-100%);
-}
-
-.offcanvas-end {
- top: 0;
- right: 0;
- width: $offcanvas-horizontal-width;
- border-left: $offcanvas-border-width solid $offcanvas-border-color;
- transform: translateX(100%);
-}
-
-.offcanvas-top {
- top: 0;
- right: 0;
- left: 0;
- height: $offcanvas-vertical-height;
- max-height: 100%;
- border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
- transform: translateY(-100%);
-}
-
-.offcanvas-bottom {
- right: 0;
- left: 0;
- height: $offcanvas-vertical-height;
- max-height: 100%;
- border-top: $offcanvas-border-width solid $offcanvas-border-color;
- transform: translateY(100%);
-}
-
-.offcanvas.show {
- transform: none;
-}
diff --git a/src/assets/styles/bootstrap/_pagination.scss b/src/assets/styles/bootstrap/_pagination.scss
deleted file mode 100644
index 02a66d4..0000000
--- a/src/assets/styles/bootstrap/_pagination.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-.pagination {
- 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);
-
- &: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;
- }
-
- &:focus {
- z-index: 3;
- color: $pagination-focus-color;
- background-color: $pagination-focus-bg;
- outline: $pagination-focus-outline;
- box-shadow: $pagination-focus-box-shadow;
- }
-}
-
-.page-item {
- &:not(:first-child) .page-link {
- margin-left: $pagination-margin-start;
- }
-
- &.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
-);
-
-.pagination-lg {
- @include pagination-size(
- $pagination-padding-y-lg,
- $pagination-padding-x-lg,
- $font-size-lg,
- $pagination-border-radius-lg
- );
-}
-
-.pagination-sm {
- @include pagination-size(
- $pagination-padding-y-sm,
- $pagination-padding-x-sm,
- $font-size-sm,
- $pagination-border-radius-sm
- );
-}
diff --git a/src/assets/styles/bootstrap/_placeholders.scss b/src/assets/styles/bootstrap/_placeholders.scss
deleted file mode 100644
index f0d29e1..0000000
--- a/src/assets/styles/bootstrap/_placeholders.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.placeholder {
- display: inline-block;
- min-height: 1em;
- vertical-align: middle;
- cursor: wait;
- background-color: currentColor;
- opacity: $placeholder-opacity-max;
-
- &.btn::before {
- display: inline-block;
- content: "";
- }
-}
-
-// Sizing
-.placeholder-xs {
- min-height: 0.6em;
-}
-
-.placeholder-sm {
- min-height: 0.8em;
-}
-
-.placeholder-lg {
- min-height: 1.2em;
-}
-
-// Animation
-.placeholder-glow {
- .placeholder {
- animation: placeholder-glow 2s ease-in-out infinite;
- }
-}
-
-@keyframes placeholder-glow {
- 50% {
- opacity: $placeholder-opacity-min;
- }
-}
-
-.placeholder-wave {
- mask-image: linear-gradient(
- 130deg,
- $black 55%,
- rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%,
- $black 95%
- );
- mask-size: 200% 100%;
- animation: placeholder-wave 2s linear infinite;
-}
-
-@keyframes placeholder-wave {
- 100% {
- mask-position: -200% 0%;
- }
-}
diff --git a/src/assets/styles/bootstrap/_popover.scss b/src/assets/styles/bootstrap/_popover.scss
deleted file mode 100644
index 8d8a507..0000000
--- a/src/assets/styles/bootstrap/_popover.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-.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;
-
- &::before,
- &::after {
- position: absolute;
- display: block;
- content: "";
- border-color: transparent;
- border-style: solid;
- }
- }
-}
-
-.bs-popover-top {
- > .popover-arrow {
- bottom: subtract(-$popover-arrow-height, $popover-border-width);
-
- &::before {
- bottom: 0;
- border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
- border-top-color: $popover-arrow-outer-color;
- }
-
- &::after {
- bottom: $popover-border-width;
- border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
- border-top-color: $popover-arrow-color;
- }
- }
-}
-
-.bs-popover-end {
- > .popover-arrow {
- left: subtract(-$popover-arrow-height, $popover-border-width);
- width: $popover-arrow-height;
- height: $popover-arrow-width;
-
- &::before {
- left: 0;
- border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
- ($popover-arrow-width * 0.5) 0;
- border-right-color: $popover-arrow-outer-color;
- }
-
- &::after {
- left: $popover-border-width;
- border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
- ($popover-arrow-width * 0.5) 0;
- border-right-color: $popover-arrow-color;
- }
- }
-}
-
-.bs-popover-bottom {
- > .popover-arrow {
- top: subtract(-$popover-arrow-height, $popover-border-width);
-
- &::before {
- top: 0;
- border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
- ($popover-arrow-width * 0.5);
- border-bottom-color: $popover-arrow-outer-color;
- }
-
- &::after {
- top: $popover-border-width;
- border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
- ($popover-arrow-width * 0.5);
- 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 * 0.5;
- content: "";
- border-bottom: $popover-border-width solid $popover-header-bg;
- }
-}
-
-.bs-popover-start {
- > .popover-arrow {
- right: subtract(-$popover-arrow-height, $popover-border-width);
- width: $popover-arrow-height;
- height: $popover-arrow-width;
-
- &::before {
- right: 0;
- border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5)
- $popover-arrow-height;
- border-left-color: $popover-arrow-outer-color;
- }
-
- &::after {
- right: $popover-border-width;
- border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5)
- $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 $popover-border-color;
- @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/src/assets/styles/bootstrap/_progress.scss b/src/assets/styles/bootstrap/_progress.scss
deleted file mode 100644
index 287ba89..0000000
--- a/src/assets/styles/bootstrap/_progress.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-// Disable animation if transitions are disabled
-
-// scss-docs-start progress-keyframes
-@if $enable-transitions {
- @keyframes progress-bar-stripes {
- 0% {
- background-position-x: $progress-height;
- }
- }
-}
-// scss-docs-end progress-keyframes
-
-.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/src/assets/styles/bootstrap/_reboot.scss b/src/assets/styles/bootstrap/_reboot.scss
deleted file mode 100644
index 391a55b..0000000
--- a/src/assets/styles/bootstrap/_reboot.scss
+++ /dev/null
@@ -1,607 +0,0 @@
-// 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 {
- line-height: normal;
- 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 {
- @if $font-size-root != null {
- font-size: var(--#{$variable-prefix}-root-font-size);
- }
-
- @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.
-
-// scss-docs-start reboot-body-rules
-body {
- margin: 0; // 1
- font-family: var(--#{$variable-prefix}body-font-family);
- @include font-size(var(--#{$variable-prefix}body-font-size));
- font-weight: var(--#{$variable-prefix}body-font-weight);
- line-height: var(--#{$variable-prefix}body-line-height);
- color: var(--#{$variable-prefix}body-color);
- text-align: var(--#{$variable-prefix}body-text-align);
- background-color: var(--#{$variable-prefix}body-bg); // 2
- -webkit-text-size-adjust: 100%; // 3
- -webkit-tap-highlight-color: rgba($black, 0); // 4
-}
-// scss-docs-end reboot-body-rules
-
-// 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: rgba(black, 0.2);
- 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 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: 0.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: -0.25em;
-}
-sup {
- top: -0.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;
-}
-
-// Explicitly remove focus outline in Chromium when it shouldn't be
-// visible (e.g. as result of mouse click or touch tap). It already
-// should be doing this automatically, but seems to currently be
-// confused and applies its very visible two-tone outline anyway.
-
-button:focus:not(:focus-visible) {
- outline: 0;
-}
-
-// 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-` |
Click on open video to see the YouTube video
-