administrate-bootstrap-theme 0.2.0 → 1.0.4

data/app/assets/stylesheets/administrate-bootstrap-theme/_base.scss

@@ -1,28 +1,9 @@
-// from: node_modules/bootstrap/scss
-@import "bootstrap/bootstrap";
-// from: node_modules/flatpickr/dist/flatpickr.css
-@import "flatpickr/flatpickr.css";
-@import "selectize";
-
-@import "variables";
-
-@import "components/navigation";
-@import "components/content_header";
-@import "components/content_body";
-@import "components/form";
-@import "components/pagination";
-
 .app-container {
-  display: flex;
-  flex-wrap: nowrap;
-  height: 100vh;
+  @extend .d-flex, .flex-nowrap, .vh-100;
 }
 
 .flashes {
-  pointer-events: none;
-  position: fixed;
-  text-align: center;
-  width: calc(100% - #{$navigation-width});
+  @extend .pe-none, .fixed-top, .text-center;
 
   > .flash {
     @extend .alert, .d-inline-block;
@@ -36,6 +17,8 @@
 .main-content {
   @extend .d-flex, .flex-column;
 
+  background-color: $main-content-bg;
+  color: $main-content-fg;
   overflow-y: scroll;
   width: calc(100% - #{$navigation-width});
 }

data/app/assets/stylesheets/administrate-bootstrap-theme/_variables.scss

@@ -3,3 +3,7 @@ $navigation-bg: $dark !default;
 $navigation-bg-active: $primary !default;
 $navigation-fg: $light !default;
 $navigation-width: 250px !default;
+
+// Main content
+$main-content-bg: $gray-100 !default;
+$main-content-fg: $gray-900 !default;

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_accordion.scss

@@ -58,7 +58,6 @@
 }
 
 .accordion-item {
-  margin-bottom: -$accordion-border-width;
   background-color: $accordion-bg;
   border: $accordion-border-width solid $accordion-border-color;
 
@@ -70,9 +69,12 @@
     }
   }
 
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
   // Only set a border-radius on the last item if the accordion is collapsed
   &:last-of-type {
-    margin-bottom: 0;
     @include border-bottom-radius($accordion-border-radius);
 
     .accordion-button {

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_card.scss

@@ -13,6 +13,7 @@
   background-clip: border-box;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
+  @include box-shadow($card-box-shadow);
 
   > hr {
     margin-right: 0;
@@ -55,7 +56,7 @@
 }
 
 .card-subtitle {
-  margin-top: -$card-title-spacer-y / 2;
+  margin-top: -$card-title-spacer-y * .5;
   margin-bottom: 0;
 }
 
@@ -65,7 +66,7 @@
 
 .card-link {
   &:hover {
-    text-decoration: none;
+    text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
   + .card-link {
@@ -106,9 +107,9 @@
 //
 
 .card-header-tabs {
-  margin-right: -$card-cap-padding-x / 2;
+  margin-right: -$card-cap-padding-x * .5;
   margin-bottom: -$card-cap-padding-y;
-  margin-left: -$card-cap-padding-x / 2;
+  margin-left: -$card-cap-padding-x * .5;
   border-bottom: 0;
 
   @if $nav-tabs-link-active-bg != $card-bg {
@@ -120,8 +121,8 @@
 }
 
 .card-header-pills {
-  margin-right: -$card-cap-padding-x / 2;
-  margin-left: -$card-cap-padding-x / 2;
+  margin-right: -$card-cap-padding-x * .5;
+  margin-left: -$card-cap-padding-x * .5;
 }
 
 // Card image

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_carousel.scss

@@ -202,9 +202,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: (100% - $carousel-caption-width) / 2;
+  right: (100% - $carousel-caption-width) * .5;
   bottom: $carousel-caption-spacer;
-  left: (100% - $carousel-caption-width) / 2;
+  left: (100% - $carousel-caption-width) * .5;
   padding-top: $carousel-caption-padding-y;
   padding-bottom: $carousel-caption-padding-y;
   color: $carousel-caption-color;

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_dropdown.scss

@@ -16,7 +16,6 @@
 // The dropdown menu
 .dropdown-menu {
   position: absolute;
-  top: 100%;
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   min-width: $dropdown-min-width;
@@ -33,6 +32,7 @@
   @include box-shadow($dropdown-box-shadow);
 
   &[data-bs-popper] {
+    top: 100%;
     left: 0;
     margin-top: $dropdown-spacer;
   }
@@ -50,8 +50,8 @@
       --bs-position: start;
 
       &[data-bs-popper] {
-        right: auto #{"/* rtl:ignore */"};
-        left: 0 #{"/* rtl:ignore */"};
+        right: auto;
+        left: 0;
       }
     }
 
@@ -59,8 +59,8 @@
       --bs-position: end;
 
       &[data-bs-popper] {
-        right: 0 #{"/* rtl:ignore */"};
-        left: auto #{"/* rtl:ignore */"};
+        right: 0;
+        left: auto;
       }
     }
   }
@@ -83,15 +83,12 @@
 }
 
 .dropend {
-  .dropdown-menu {
+  .dropdown-menu[data-bs-popper] {
     top: 0;
     right: auto;
     left: 100%;
-
-    &[data-bs-popper] {
-      margin-top: 0;
-      margin-left: $dropdown-spacer;
-    }
+    margin-top: 0;
+    margin-left: $dropdown-spacer;
   }
 
   .dropdown-toggle {
@@ -103,15 +100,12 @@
 }
 
 .dropstart {
-  .dropdown-menu {
+  .dropdown-menu[data-bs-popper] {
     top: 0;
     right: 100%;
     left: auto;
-
-    &[data-bs-popper] {
-      margin-top: 0;
-      margin-right: $dropdown-spacer;
-    }
+    margin-top: 0;
+    margin-right: $dropdown-spacer;
   }
 
   .dropdown-toggle {

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_functions.scss

@@ -32,6 +32,41 @@
   }
 }
 
+// Colors
+@function to-rgb($value) {
+  @return red($value), green($value), blue($value);
+}
+
+@function rgba-css-var($identifier, $target) {
+  @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+@function map-loop($map, $func, $args...) {
+  $_map: ();
+
+  @each $key, $value in $map {
+    // allow to pass the $key and $value of the map as an function argument
+    $_args: ();
+    @each $arg in $args {
+      $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+    }
+
+    $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
+  }
+
+  @return $_map;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+@function varify($list) {
+  $result: null;
+  @each $entry in $list {
+    $result: append($result, var(--#{$variable-prefix}#{$entry}), space);
+  }
+  @return $result;
+}
+
 // Internal Bootstrap function to turn maps into its negative variant.
 // It prefixes the keys with `n` and makes the value negative.
 @function negativify-map($map) {
@@ -55,6 +90,16 @@
   @return $result;
 }
 
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+  $merged-maps: ();
+
+  @each $map in $maps {
+    $merged-maps: map-merge($merged-maps, $map);
+  }
+  @return $merged-maps;
+}
+
 // Replace `$search` with `$replace` in `$string`
 // Used on our SVG icon backgrounds for custom forms.
 //
@@ -95,7 +140,7 @@
 // Color contrast
 // See https://github.com/twbs/bootstrap/pull/30168
 
-// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
 // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
 $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
 
@@ -123,7 +168,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
+  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
 }
 
 // Return WCAG2.0 relative luminance
@@ -137,7 +182,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   );
 
   @each $name, $value in $rgb {
-    $value: if($value / 255 < .03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
+    $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
     $rgb: map-merge($rgb, ($name: $value));
   }
 
@@ -201,5 +246,51 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     @return $value1 - $value2;
   }
 
+  @if type-of($value2) != number {
+    $value2: unquote("(") + $value2 + unquote(")");
+  }
+
   @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
 }
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * .1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: unit($dividend);
+  $divisor-unit: unit($divisor);
+  $unit-map: (
+    "px": 1px,
+    "rem": 1rem,
+    "em": 1em,
+    "%": 1%
+  );
+  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+    $result: $result * map-get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_grid.scss

@@ -12,6 +12,17 @@
   }
 }
 
+@if $enable-cssgrid {
+  .grid {
+    display: grid;
+    grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
+    grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
+    gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
+
+    @include make-cssgrid();
+  }
+}
+
 
 // Columns
 //

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_helpers.scss

@@ -2,6 +2,8 @@
 @import "helpers/colored-links";
 @import "helpers/ratio";
 @import "helpers/position";
+@import "helpers/stacks";
 @import "helpers/visually-hidden";
 @import "helpers/stretched-link";
 @import "helpers/text-truncation";
+@import "helpers/vr";

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_images.scss

@@ -32,7 +32,7 @@
 }
 
 .figure-img {
-  margin-bottom: $spacer / 2;
+  margin-bottom: $spacer * .5;
   line-height: 1;
 }
 

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_list-group.scss

@@ -163,12 +163,12 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $state, $value in $theme-colors {
-  $list-group-background: shift-color($value, $list-group-item-bg-scale);
-  $list-group-color: shift-color($value, $list-group-item-color-scale);
-  @if (contrast-ratio($list-group-background, $list-group-color) < $min-contrast-ratio) {
-    $list-group-color: mix($value, color-contrast($list-group-background), abs($alert-color-scale));
+  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
+  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
+  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
+    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
   }
 
-  @include list-group-item-variant($state, $list-group-background, $list-group-color);
+  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
 }
 // scss-docs-end list-group-modifiers

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_mixins.scss

@@ -10,6 +10,7 @@
 
 // Helpers
 @import "mixins/breakpoints";
+@import "mixins/color-scheme";
 @import "mixins/image";
 @import "mixins/resize";
 @import "mixins/visually-hidden";
@@ -21,6 +22,7 @@
 
 // Components
 @import "mixins/alert";
+@import "mixins/backdrop";
 @import "mixins/buttons";
 @import "mixins/caret";
 @import "mixins/pagination";

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_modal.scss

@@ -4,16 +4,6 @@
 // .modal-content   - actual modal w/ bg and corners and stuff
 
 
-.modal-open {
-  // Kill the scroll on the body
-  overflow: hidden;
-
-  .modal {
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-}
-
 // Container that the modal scrolls within
 .modal {
   position: fixed;
@@ -23,7 +13,8 @@
   display: none;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   // Prevent Chrome on Windows from adding a focus outline. For details, see
   // https://github.com/twbs/bootstrap/pull/10951.
   outline: 0;
@@ -94,17 +85,7 @@
 
 // Modal background
 .modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $zindex-modal-backdrop;
-  width: 100vw;
-  height: 100vh;
-  background-color: $modal-backdrop-bg;
-
-  // Fade for backdrop
-  &.fade { opacity: 0; }
-  &.show { opacity: $modal-backdrop-opacity; }
+  @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
 }
 
 // Modal header
@@ -119,8 +100,8 @@
   @include border-top-radius($modal-content-inner-border-radius);
 
   .btn-close {
-    padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
-    margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
+    padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
+    margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
   }
 }
 
@@ -147,7 +128,7 @@
   flex-shrink: 0;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: $modal-inner-padding - $modal-footer-margin-between / 2;
+  padding: $modal-inner-padding - $modal-footer-margin-between * .5;
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
   @include border-bottom-radius($modal-content-inner-border-radius);
 
@@ -155,19 +136,10 @@
   // This solution is far from ideal because of the universal selector usage,
   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
   > * {
-    margin: $modal-footer-margin-between / 2;
+    margin: $modal-footer-margin-between * .5;
   }
 }
 
-// Measure scrollbar width for padding body during modal show/hide
-.modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
-}
-
 // Scale up the modal
 @include media-breakpoint-up(sm) {
   // Automatically set modal's width for larger viewports

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_navbar.scss

@@ -193,13 +193,42 @@
         .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.

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_offcanvas.scss

@@ -14,14 +14,21 @@
   @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 / 2) ($offcanvas-padding-x / 2);
-    margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto;
+    padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
+    margin-top: $offcanvas-padding-y * -.5;
+    margin-right: $offcanvas-padding-x * -.5;
+    margin-bottom: $offcanvas-padding-y * -.5;
   }
 }
 
@@ -52,6 +59,16 @@
   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;
@@ -64,14 +81,3 @@
 .offcanvas.show {
   transform: none;
 }
-
-.offcanvas-backdrop::before {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $zindex-offcanvas - 1;
-  width: 100vw;
-  height: 100vh;
-  content: "";
-  background-color: $offcanvas-body-backdrop-color;
-}

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_placeholders.scss

@@ -0,0 +1,51 @@
+.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: .6em;
+}
+
+.placeholder-sm {
+  min-height: .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%;
+  }
+}