Dart sass deprecation warning fixes

assets/stylesheets/bootstrap/_alerts.scss

@@ -1,7 +1,8 @@
 //
 // Alerts
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base styles
 // -------------------------

assets/stylesheets/bootstrap/_badges.scss

@@ -1,7 +1,8 @@
 //
 // Badges
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base class
 .badge {

assets/stylesheets/bootstrap/_breadcrumbs.scss

@@ -1,7 +1,8 @@
 //
 // Breadcrumbs
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 .breadcrumb {
   padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;

assets/stylesheets/bootstrap/_button-groups.scss

@@ -1,6 +1,9 @@
 //
 // Button groups
 // --------------------------------------------------
+@use "variables" as *;
+@use "mixins" as *;
+@use "buttons" as *;
 
 // Make the div behave like a button
 .btn-group,

assets/stylesheets/bootstrap/_buttons.scss

@@ -1,7 +1,8 @@
 //
 // Buttons
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base styles
 // --------------------------------------------------

assets/stylesheets/bootstrap/_carousel.scss

@@ -2,7 +2,8 @@
 //
 // Carousel
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Wrapper for the slide container and indicators
 .carousel {

assets/stylesheets/bootstrap/_close.scss

@@ -1,7 +1,8 @@
 //
 // Close icons
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 .close {
   float: right;

assets/stylesheets/bootstrap/_code.scss

@@ -3,6 +3,8 @@
 // Code (inline and block)
 // --------------------------------------------------
 
+@use "variables" as *;
+@use "mixins" as *;
 
 // Inline and block code styles
 code,

assets/stylesheets/bootstrap/_component-animations.scss

@@ -1,6 +1,7 @@
 //
 // Component animations
 // --------------------------------------------------
+@use "mixins" as *;
 
 // Heads up!
 //

assets/stylesheets/bootstrap/_dropdowns.scss

@@ -1,7 +1,8 @@
 //
 // Dropdown menus
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Dropdown arrow/caret
 .caret {

assets/stylesheets/bootstrap/_forms.scss

@@ -1,8 +1,11 @@
+@use "sass:color";
 @use "sass:math";
 //
 // Forms
 // --------------------------------------------------
 
+@use "variables" as *;
+@use "mixins" as *;
 
 // Normalize non-controls
 //
@@ -445,7 +448,7 @@ textarea.form-control {
   display: block; // account for any element using help-block
   margin-top: 5px;
   margin-bottom: 10px;
-  color: lighten($text-color, 25%); // lighten the text some for contrast
+  color: color.adjust($text-color, $lightness: 25%, $space: hsl); // lighten the text some for contrast
 }
 
 
@@ -582,7 +585,7 @@ textarea.form-control {
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
   .has-feedback .form-control-feedback {
-    right: floor(math.div($grid-gutter-width, 2));
+    right: math.floor(math.div($grid-gutter-width, 2));
   }
 
   // Form group sizes

assets/stylesheets/bootstrap/_glyphicons.scss

@@ -6,6 +6,8 @@
 // inline element with the appropriate classes, like so:
 //
 // <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+@use "variables" as *;
+@use "mixins" as *;
 
 @at-root {
   // Import the fonts

assets/stylesheets/bootstrap/_grid.scss

@@ -1,7 +1,8 @@
 //
 // Grid system
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Container widths
 //

assets/stylesheets/bootstrap/_input-groups.scss

@@ -2,6 +2,9 @@
 // Input groups
 // --------------------------------------------------
 
+@use "variables" as *;
+@use "mixins" as *;
+
 // Base styles
 // -------------------------
 .input-group {

assets/stylesheets/bootstrap/_jumbotron.scss

@@ -1,8 +1,11 @@
+@use "sass:color";
 @use "sass:math";
+
 //
 // Jumbotron
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 .jumbotron {
   padding-top: $jumbotron-padding;
@@ -23,7 +26,7 @@
   }
 
   > hr {
-    border-top-color: darken($jumbotron-bg, 10%);
+    border-top-color: color.adjust($jumbotron-bg, $lightness: -10%, $space: hsl);
   }
 
   .container &,

assets/stylesheets/bootstrap/_labels.scss

@@ -1,6 +1,8 @@
 //
 // Labels
 // --------------------------------------------------
+@use "variables" as *;
+@use "mixins" as *;
 
 .label {
   display: inline;

assets/stylesheets/bootstrap/_list-group.scss

@@ -1,7 +1,8 @@
 //
 // List groups
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base class
 //

assets/stylesheets/bootstrap/_mixins.scss

@@ -2,39 +2,39 @@
 // --------------------------------------------------
 
 // Utilities
-@import "mixins/hide-text";
-@import "mixins/opacity";
-@import "mixins/image";
-@import "mixins/labels";
-@import "mixins/reset-filter";
-@import "mixins/resize";
-@import "mixins/responsive-visibility";
-@import "mixins/size";
-@import "mixins/tab-focus";
-@import "mixins/reset-text";
-@import "mixins/text-emphasis";
-@import "mixins/text-overflow";
-@import "mixins/vendor-prefixes";
+@forward "mixins/hide-text";
+@forward "mixins/opacity";
+@forward "mixins/image";
+@forward "mixins/labels";
+@forward "mixins/reset-filter";
+@forward "mixins/resize";
+@forward "mixins/responsive-visibility";
+@forward "mixins/size";
+@forward "mixins/tab-focus";
+@forward "mixins/reset-text";
+@forward "mixins/text-emphasis";
+@forward "mixins/text-overflow";
+@forward "mixins/vendor-prefixes";
 
 // Components
-@import "mixins/alerts";
-@import "mixins/buttons";
-@import "mixins/panels";
-@import "mixins/pagination";
-@import "mixins/list-group";
-@import "mixins/nav-divider";
-@import "mixins/forms";
-@import "mixins/progress-bar";
-@import "mixins/table-row";
+@forward "mixins/alerts";
+@forward "mixins/buttons";
+@forward "mixins/panels";
+@forward "mixins/pagination";
+@forward "mixins/list-group";
+@forward "mixins/nav-divider";
+@forward "mixins/forms";
+@forward "mixins/progress-bar";
+@forward "mixins/table-row";
 
 // Skins
-@import "mixins/background-variant";
-@import "mixins/border-radius";
-@import "mixins/gradients";
+@forward "mixins/background-variant";
+@forward "mixins/border-radius";
+@forward "mixins/gradients";
 
 // Layout
-@import "mixins/clearfix";
-@import "mixins/center-block";
-@import "mixins/nav-vertical-align";
-@import "mixins/grid-framework";
-@import "mixins/grid";
+@forward "mixins/clearfix";
+@forward "mixins/center-block";
+@forward "mixins/nav-vertical-align";
+@forward "mixins/grid-framework";
+@forward "mixins/grid";

assets/stylesheets/bootstrap/_modals.scss

@@ -2,6 +2,9 @@
 // Modals
 // --------------------------------------------------
 
+@use "variables" as *;
+@use "mixins" as *;
+
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal

assets/stylesheets/bootstrap/_navbar.scss

@@ -1,7 +1,12 @@
+@use "sass:color";
+
 @use "sass:math";
 //
 // Navbars
 // --------------------------------------------------
+@use "variables" as *;
+@use "mixins" as *;
+@use "forms" as *;
 
 
 // Wrapper and base class
@@ -90,6 +95,12 @@
 
 .navbar-fixed-top,
 .navbar-fixed-bottom {
+  // Fix the top/bottom navbars when screen real estate supports it
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: $zindex-navbar-fixed;
+
   .navbar-collapse {
     max-height: $navbar-collapse-max-height;
 
@@ -98,12 +109,6 @@
     }
   }
 
-  // Fix the top/bottom navbars when screen real estate supports it
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: $zindex-navbar-fixed;
-
   // Undo the rounded corners
   @media (min-width: $grid-float-breakpoint) {
     border-radius: 0;
@@ -194,12 +199,13 @@
   float: right;
   padding: 9px 10px;
   margin-right: $navbar-padding-horizontal;
-  @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;
 
+  @include navbar-vertical-align(34px);
+
   // We remove the `outline` here, but later compensate by attaching `:hover`
   // styles to `:focus`.
   &:focus {
@@ -630,7 +636,7 @@
 
   .navbar-collapse,
   .navbar-form {
-    border-color: darken($navbar-inverse-bg, 7%);
+    border-color: color.adjust($navbar-inverse-bg, $lightness: -7%, $space: hsl);
   }
 
   .navbar-link {

assets/stylesheets/bootstrap/_navs.scss

@@ -1,7 +1,8 @@
 //
 // Navs
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base class
 // --------------------------------------------------

assets/stylesheets/bootstrap/_pager.scss

@@ -1,7 +1,8 @@
 //
 // Pager pagination
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 .pager {
   padding-left: 0;

assets/stylesheets/bootstrap/_pagination.scss

@@ -1,6 +1,9 @@
 //
 // Pagination (multiple pages)
 // --------------------------------------------------
+@use "variables" as *;
+@use "mixins" as *;
+
 .pagination {
   display: inline-block;
   padding-left: 0;

assets/stylesheets/bootstrap/_panels.scss

@@ -1,7 +1,9 @@
+@use "sass:math";
 //
 // Panels
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base class
 .panel {
@@ -33,7 +35,7 @@
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;
-  font-size: ceil(($font-size-base * 1.125));
+  font-size: math.ceil(($font-size-base * 1.125));
   color: inherit;
 
   > a,