`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;
+ background: none;
+ 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;
+ // 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/scss/bootstrap/_navbar.scss b/src/scss/bootstrap/_navbar.scss
new file mode 100644
index 000000000..103995d83
--- /dev/null
+++ b/src/scss/bootstrap/_navbar.scss
@@ -0,0 +1,330 @@
+// 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/scss/bootstrap/_offcanvas.scss b/src/scss/bootstrap/_offcanvas.scss
new file mode 100644
index 000000000..5ee101b6e
--- /dev/null
+++ b/src/scss/bootstrap/_offcanvas.scss
@@ -0,0 +1,87 @@
+.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/scss/bootstrap/_pagination.scss b/src/scss/bootstrap/_pagination.scss
new file mode 100644
index 000000000..02a66d413
--- /dev/null
+++ b/src/scss/bootstrap/_pagination.scss
@@ -0,0 +1,78 @@
+.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/scss/bootstrap/_placeholders.scss b/src/scss/bootstrap/_placeholders.scss
new file mode 100644
index 000000000..050454f9b
--- /dev/null
+++ b/src/scss/bootstrap/_placeholders.scss
@@ -0,0 +1,56 @@
+.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/scss/bootstrap/_popover.scss b/src/scss/bootstrap/_popover.scss
new file mode 100644
index 000000000..1c096138c
--- /dev/null
+++ b/src/scss/bootstrap/_popover.scss
@@ -0,0 +1,164 @@
+.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/scss/bootstrap/_progress.scss b/src/scss/bootstrap/_progress.scss
new file mode 100644
index 000000000..287ba89b7
--- /dev/null
+++ b/src/scss/bootstrap/_progress.scss
@@ -0,0 +1,50 @@
+// 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/scss/bootstrap/_reboot.scss b/src/scss/bootstrap/_reboot.scss
new file mode 100644
index 000000000..e78f881b6
--- /dev/null
+++ b/src/scss/bootstrap/_reboot.scss
@@ -0,0 +1,606 @@
+// 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 {
+ @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: 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 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-` |
+
+
diff --git a/chitterApi.js b/chitterApi.js
new file mode 100644
index 000000000..a12cf5192
--- /dev/null
+++ b/chitterApi.js
@@ -0,0 +1,64 @@
+class ChitterApi {
+ async fetchPeeps() {
+ const response = await fetch(
+ "https://chitter-backend-api-v2.herokuapp.com/peeps"
+ );
+
+ const peeps = await response.json();
+ return peeps;
+ }
+
+ async createUser(handle, password) {
+ const response = await fetch(
+ "https://chitter-backend-api-v2.herokuapp.com/users",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ user: { handle: handle, password: password },
+ }),
+ }
+ );
+ const user = await response.json();
+ return user;
+ }
+
+ async logInUser(handle, password) {
+ const response = await fetch(
+ "https://chitter-backend-api-v2.herokuapp.com/sessions",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ session: { handle: handle, password: password },
+ }),
+ }
+ );
+ const confirmation = await response.json();
+ return confirmation;
+ }
+
+ async createPeep(session_key, user_id, body) {
+ const response = await fetch(
+ "https://chitter-backend-api-v2.herokuapp.com/peeps",
+ {
+ method: "POST",
+ headers: {
+ Authorization: `Token token=${session_key}`,
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ peep: { user_id: user_id, body: body },
+ }),
+ }
+ );
+ const peep = await response.json();
+ return peep;
+ }
+}
+
+module.exports = ChitterApi;
diff --git a/chitterModel.js b/chitterModel.js
new file mode 100644
index 000000000..7fd0157a6
--- /dev/null
+++ b/chitterModel.js
@@ -0,0 +1,37 @@
+class ChitterModel {
+ constructor() {
+ this.peeps = [];
+ this.session = null;
+ }
+
+ getSession() {
+ return this.session;
+ }
+
+ saveSession(session) {
+ this.session = session;
+ }
+
+ getPeeps() {
+ return this.peeps;
+ }
+
+ addPeep(peep) {
+ this.peeps.push(peep);
+ }
+
+ addNewPeep(peep) {
+ this.peeps.unshift(peep);
+ }
+
+ setPeeps(peeps) {
+ this.reset();
+ peeps.forEach((peep) => this.addPeep(peep));
+ }
+
+ reset() {
+ this.peeps = [];
+ }
+}
+
+module.exports = ChitterModel;
diff --git a/chitterView.js b/chitterView.js
new file mode 100644
index 000000000..65646223e
--- /dev/null
+++ b/chitterView.js
@@ -0,0 +1,132 @@
+class ChitterView {
+ constructor(model, api) {
+ this.model = model;
+ this.api = api;
+
+ this.peepList = document.querySelector("#peep-list");
+ this.successAlert = document.querySelector("#success-alert");
+ this.failAlert = document.querySelector("#fail-alert");
+
+ this.createAccountBtn = document.querySelector("#user-create-btn");
+ this.createHandleInput = document.querySelector("#create-account-handle");
+ this.createPasswordInput = document.querySelector(
+ "#create-account-password"
+ );
+ this.createAccountSubmit = document.querySelector("#create-account-submit");
+
+ this.createAccountSubmit.addEventListener("click", () => {
+ this.createAccount(
+ this.createHandleInput.value,
+ this.createPasswordInput.value
+ );
+ });
+
+ this.loginBtn = document.querySelector("#user-login-btn");
+ this.loginHandleInput = document.querySelector("#login-handle");
+ this.loginPasswordInput = document.querySelector("#login-password");
+ this.loginSubmit = document.querySelector("#login-submit");
+ this.loginSubmit.addEventListener("click", () => {
+ this.signIn(this.loginHandleInput.value, this.loginPasswordInput.value);
+ });
+
+ this.peepInput = document.querySelector("#peep-input");
+ this.peepSubmit = document.querySelector("#peep-submit");
+ this.peepSubmit.addEventListener("click", () => {
+ this.newPeep(
+ this.model.getSession().session_key,
+ this.model.getSession().user_id,
+ this.peepInput.value
+ );
+ });
+ }
+
+ async displayPeepsFromApi() {
+ const peeps = await this.api.fetchPeeps();
+ this.model.setPeeps(peeps);
+ this.displayPeeps();
+ }
+
+ displayPeeps() {
+ this.clearPeepDivs();
+ let peeps = this.model.getPeeps();
+
+ peeps.forEach((peep) => {
+ this.addPeepLi(peep);
+ });
+ }
+
+ clearPeepDivs() {
+ const peeps = document.querySelectorAll("li.peep");
+ peeps.forEach((peep) => {
+ peep.remove();
+ });
+ }
+
+ async createAccount(handle, password) {
+ if (handle && password) {
+ const user = await this.api.createUser(handle, password);
+
+ // this.showAndHide("#success-alert");
+ // this.successAlert.innerText = `Thanks ${user.handle} your account has been created`;
+
+ this.createHandleInput.value = null;
+ this.createPasswordInput.value = null;
+
+ this.signIn(handle, password);
+ }
+ }
+
+ async signIn(handle, password) {
+ if (handle && password) {
+ const response = await this.api.logInUser(handle, password);
+
+ this.model.saveSession(response);
+
+ this.showAndHide("#success-alert");
+ this.successAlert.innerText = `Thanks ${response.session_key} you have successfully logged in`;
+
+ this.loginHandleInput.value = null;
+ this.loginPasswordInput.value = null;
+
+ this.showAndHide("#user-container");
+
+ this.showAndHide("#peep-container");
+ }
+ }
+
+ async newPeep(session_key, user_id, body) {
+ const peep = await this.api.createPeep(session_key, user_id, body);
+
+ this.model.addNewPeep(peep);
+ this.displayPeeps();
+
+ this.peepInput.value = null;
+ }
+
+ addPeepLi(peep) {
+ const time = this.formatTime(peep);
+
+ this.peepList.innerHTML += `