administrate-bootstrap-theme 0.2.0 → 1.0.4

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

@@ -1,4 +1,4 @@
-/// Grid system
+// Grid system
 //
 // Generate semantic grid columns with these mixins.
 
@@ -8,8 +8,8 @@
   display: flex;
   flex-wrap: wrap;
   margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -21,14 +21,20 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+  padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
   margin-top: var(--#{$variable-prefix}gutter-y);
 }
 
-@mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 auto;
-  width: percentage($size / $columns);
+@mixin make-col($size: false, $columns: $grid-columns) {
+  @if $size {
+    flex: 0 0 auto;
+    width: percentage(divide($size, $columns));
+
+  } @else {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
 }
 
 @mixin make-col-auto() {
@@ -37,7 +43,7 @@
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: $size / $columns;
+  $num: divide($size, $columns);
   margin-left: if($num == 0, 0, percentage($num));
 }
 
@@ -49,7 +55,7 @@
 @mixin row-cols($count) {
   > * {
     flex: 0 0 auto;
-    width: 100% / $count;
+    width: divide(100%, $count);
   }
 }
 
@@ -118,3 +124,27 @@
     }
   }
 }
+
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .g-col#{$infix}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
+
+        // Start with `1` because `0` is and invalid value.
+        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+        @for $i from 1 through ($columns - 1) {
+          .g-start#{$infix}-#{$i} {
+            grid-column-start: $i;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_utilities.scss

@@ -41,25 +41,46 @@
       }
     }
 
+    $is-css-var: map-get($utility, css-var);
+    $is-local-vars: map-get($utility, local-vars);
     $is-rtl: map-get($utility, rtl);
 
     @if $value != null {
       @if $is-rtl == false {
         /* rtl:begin:remove */
       }
-      .#{$property-class + $infix + $property-class-modifier} {
-        @each $property in $properties {
-          #{$property}: $value if($enable-important-utilities, !important, null);
+
+      @if $is-css-var {
+        .#{$property-class + $infix + $property-class-modifier} {
+          --#{$variable-prefix}#{$property-class}: #{$value};
         }
-      }
 
-      @each $pseudo in $state {
-        .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            --#{$variable-prefix}#{$property-class}: #{$value};
+          }
+        }
+      } @else {
+        .#{$property-class + $infix + $property-class-modifier} {
           @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $value in $is-local-vars {
+                --#{$variable-prefix}#{$local-var}: #{$value};
+              }
+            }
             #{$property}: $value if($enable-important-utilities, !important, null);
           }
         }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            @each $property in $properties {
+              #{$property}: $value if($enable-important-utilities, !important, null);
+            }
+          }
+        }
       }
+
       @if $is-rtl == false {
         /* rtl:end:remove */
       }

data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/vendor/_rfs.scss

@@ -4,7 +4,7 @@
 //
 // Automated responsive values for font sizes, paddings, margins and much more
 //
-// Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
+// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
 
 // Configuration
 
@@ -52,12 +52,54 @@ $enable-rfs: true !default;
 // Cache $rfs-base-value unit
 $rfs-base-value-unit: unit($rfs-base-value);
 
+@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;
+}
+
 // Remove px-unit from $rfs-base-value for calculations
 @if $rfs-base-value-unit == px {
-  $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1);
+  $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
 }
 @else if $rfs-base-value-unit == rem {
-  $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value);
+  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
@@ -65,14 +107,14 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 
 // Remove unit from $rfs-breakpoint for calculations
 @if $rfs-breakpoint-unit-cache == px {
-  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+  $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
 }
 @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
-  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
 }
 
 // Calculate the media query value
-$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit});
+$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
 $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
 $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
 
@@ -164,11 +206,11 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 
       @if $unit == px {
         // Convert to rem if needed
-        $val: $val + ' ' + if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value);
+        $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
       }
       @else if $unit == rem {
         // Convert to px if needed
-        $val: $val + ' ' + if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value);
+        $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
       }
       @else {
         // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
@@ -205,21 +247,21 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 
       @else {
         // Remove unit from $value for calculations
-        $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
+        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
 
         // Only add the media query if the value is greater than the minimum value
         @if abs($value) <= $rfs-base-value or not $enable-rfs {
-          $val: $val + ' ' +  if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
+          $val: $val + ' ' +  if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
         }
         @else {
           // Calculate the minimum value
-          $value-min: $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor;
+          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
 
           // Calculate difference between $value and the minimum value
           $value-diff: abs($value) - $value-min;
 
           // Base value formatting
-          $min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px);
+          $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
 
           // Use negative value if needed
           $min-width: if($value < 0, -$min-width, $min-width);
@@ -228,7 +270,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
           $variable-unit: if($rfs-two-dimensional, vmin, vw);
 
           // Calculate the variable width between 0 and $rfs-breakpoint
-          $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit};
+          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
 
           // Return the calculated value
           $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';

data/app/assets/stylesheets/administrate-bootstrap-theme/colors/_autumn.scss

@@ -0,0 +1,8 @@
+$navigation-bg: #722a00;
+$navigation-bg-active: #d51;
+$navigation-fg: #eee;
+
+$primary: #b87800;
+$secondary: #614107;
+$main-content-bg: #fcfafa;
+$main-content-fg: #302725;

data/app/assets/stylesheets/administrate-bootstrap-theme/colors/_default.scss

@@ -0,0 +1,8 @@
+$navigation-bg: #055160;
+$navigation-bg-active: #d51;
+$navigation-fg: #eee;
+
+$primary: #0d6ecd;
+$secondary: #075261;
+$main-content-bg: #f4f8fb;
+$main-content-fg: #253029;

data/app/assets/stylesheets/administrate-bootstrap-theme/colors/_forest.scss

@@ -0,0 +1,9 @@
+$navigation-bg: #025514;
+$navigation-bg-active: #37ac02;
+$navigation-fg: #eee;
+
+$primary: #007219;
+$secondary: #566356;
+$danger: #ee6c6c;
+$main-content-bg: #fdfdfd;
+$main-content-fg: #1b3b1e;

data/app/assets/stylesheets/administrate-bootstrap-theme/colors/_industrial.scss

@@ -0,0 +1,8 @@
+$navigation-bg: #333;
+$navigation-bg-active: #d51;
+$navigation-fg: #eee;
+
+$primary: #6f6f6f;
+$secondary: #404040;
+$main-content-bg: #fafafa;
+$main-content-fg: #202020;

data/app/assets/stylesheets/administrate-bootstrap-theme/colors/_water.scss

@@ -0,0 +1,8 @@
+$navigation-bg: #0059b3;
+$navigation-bg-active: #0099ff;
+$navigation-fg: #eee;
+
+$primary: #0d6ecd;
+$secondary: #3b3d61;
+$main-content-bg: #f4f8fb;
+$main-content-fg: #222;

data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss

@@ -1,13 +1,17 @@
 .main-content__body {
   @extend .container-fluid, .mb-3;
 
+  table {
+    @extend .table-striped;
+  }
+
   > dl {
     @extend .row;
 
     dt {
       @extend .col-2, .text-end;
 
-      min-height: 32px;
+      min-height: 2rem;
     }
 
     dd {
@@ -16,16 +20,20 @@
   }
 
   a {
-    text-decoration: none;
+    @extend .text-decoration-none;
   }
 
   table {
     @extend .table;
   }
 
+  .attribute-data > table {
+    @extend .table-bordered;
+  }
+
   .attribute--nested {
     > div {
-      display: flex;
+      @extend .d-flex;
     }
 
     legend {
@@ -38,27 +46,37 @@
   }
 
   .cell-label__sort-indicator > svg {
-    height: 20px;
-    width: 20px;
+    height: 1.2rem;
+    width: 1.2rem;
   }
 
   .cell-label__sort-indicator--desc > svg {
     transform: rotate(180deg);
   }
 
+  .form-actions > input {
+    @extend .btn-primary;
+  }
+
   .js-table-row {
     > td {
-      padding: 0.25rem 0.25rem;
-      text-align: center;
+      @extend .text-center, .p-1;
 
       &.cell-data {
-        padding: 0.5rem 0.5rem;
-        text-align: left;
+        @extend .text-start, .p-2;
       }
     }
 
+    .action-show {
+      @extend .link-secondary;
+    }
+
     .action-edit {
-      @extend .btn, .btn-sm;
+      @extend .btn, .btn-sm, .btn-secondary;
+    }
+
+    [data-method="delete"] {
+      @extend .btn-danger;
     }
 
     [data-method="delete"] {

data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_header.scss

@@ -15,20 +15,18 @@
   }
 
   > h1 {
-    @extend .nav, .col-12, .col-lg-auto, .me-lg-auto, .mb-2, .justify-content-center, .mb-md-0;
-
-    font-size: 1.6rem;
+    @extend .nav, .h3, .col-12, .col-lg-auto, .me-lg-auto, .mb-2, .justify-content-center, .mb-md-0;
   }
 
   svg {
     &.search__eyeglass-icon, &.search__clear-icon {
-      height: 20px;
-      width: 20px;
+      height: 1.2rem;
+      width: 1.2rem;
     }
   }
 
   .button {
-    @extend .btn, .btn-sm;
+    @extend .btn, .btn-sm, .btn-primary;
   }
 
   .search__input {

data/app/assets/stylesheets/administrate-bootstrap-theme/components/_form.scss

@@ -16,14 +16,14 @@
   }
 
   .field-unit__field {
-    @extend .col-10;
+    @extend .col-10, .position-relative;
 
     > input:not([type="checkbox"]) {
       @extend .form-control;
     }
 
     > input[type="checkbox"] {
-      @extend .form-check-input
+      @extend .form-check-input, .mt-2;
     }
 
     > select {
@@ -32,7 +32,8 @@
 
     > textarea {
       @extend .form-control;
-      min-height: 150px;
+
+      min-height: 10rem;
     }
   }
 
@@ -40,10 +41,9 @@
     @extend .col-2;
 
     > label {
-      @extend .col-form-label;
+      @extend .col-form-label, .pb-1, .w-100;
+
       border-bottom: 1px dashed #ccc;
-      padding-bottom: 0;
-      width: 100%;
     }
   }
 

data/app/assets/stylesheets/administrate-bootstrap-theme/components/_navigation.scss

@@ -1,13 +1,36 @@
 nav.navigation {
-  @extend .nav, .nav-pills, .flex-column, .p-3;
+  @extend .nav, .nav-pills, .flex-column, .p-3, .text-white;
 
+  background: $navigation-bg;
   width: $navigation-width;
 
   .button--alt {
-    @extend .btn, .mb-2;
+    @extend .btn, .btn-outline-light, .mb-2;
+
+    color: $navigation-fg;
+  }
+
+  .button--title {
+    @extend .btn, .mb-2, .pb-3, .fs-3, .border-bottom, .fw-bold, .text-start;
+
+    color: $navigation-fg;
+
+    &:hover {
+      color: $navigation-fg;
+    }
+  }
+
+  .copy {
+    @extend .pt-2, .border-top, .text-center;
   }
 
   .navigation__link {
-    @extend .nav-link;
+    @extend .btn-outline-light, .nav-link;
+
+    color: $navigation-fg;
+  }
+
+  .navigation__link--active {
+    background: $navigation-bg-active;
   }
 }

data/app/assets/stylesheets/administrate-bootstrap-theme/components/_pagination.scss

@@ -1,5 +1,5 @@
 nav.pagination {
-  @extend .justify-content-center, .mb-3;
+  @extend .border, .justify-content-center, .mb-3;
 
   > span {
     @extend .nav-link;

data/app/assets/stylesheets/administrate-bootstrap-theme/fonts/_lato.scss

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');
+
+* {
+  font-family: 'Lato', sans-serif;
+}

data/app/assets/stylesheets/administrate-bootstrap-theme/fonts/_montserrat.scss

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap');
+
+* {
+  font-family: 'Montserrat', sans-serif;
+}

data/app/assets/stylesheets/administrate-bootstrap-theme/fonts/_open_sans.scss

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap');
+
+* {
+  font-family: 'Open Sans', sans-serif;
+}

data/app/assets/stylesheets/administrate-bootstrap-theme/fonts/_roboto.scss

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');
+
+* {
+  font-family: 'Roboto', sans-serif;
+}

data/app/assets/stylesheets/administrate-bootstrap-theme/fonts/_source_sans_pro.scss

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400&display=swap');
+
+* {
+  font-family: 'Source Sans Pro', sans-serif;
+}

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

@@ -1,65 +1,14 @@
-@import "base";
-
-nav.navigation {
-  @extend .text-white;
-
-  background: $navigation-bg;
-
-  .button--alt {
-    @extend .btn-outline-light;
-
-    color: $navigation-fg;
-  }
-
-  .navigation__link {
-    @extend .btn-outline-light;
-
-    color: $navigation-fg;
-  }
+// from: node_modules/bootstrap/scss
+@import "bootstrap/bootstrap";
 
-  .navigation__link--active {
-    background: $navigation-bg-active;
-  }
-}
+@import "selectize"; // included in Administrate
 
-nav.pagination {
-  @extend .border;
-}
+@import "variables";
 
-.main-content {
-  @extend .bg-light;
-}
+@import "components/navigation";
+@import "components/content_header";
+@import "components/content_body";
+@import "components/form";
+@import "components/pagination";
 
-.main-content__body {
-  table {
-    @extend .table-striped;
-  }
-
-  .attribute-data > table {
-    @extend .table-bordered;
-  }
-
-  .form-actions > input {
-    @extend .btn-primary;
-  }
-
-  .js-table-row {
-    .action-show {
-      @extend .link-secondary;
-    }
-
-    .action-edit {
-      @extend .btn-secondary;
-    }
-
-    [data-method="delete"] {
-      @extend .btn-danger;
-    }
-  }
-}
-
-.main-content__header {
-  .button {
-    @extend .btn-primary;
-  }
-}
+@import "base";

data/lib/administrate-bootstrap-theme/version.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
 module AdministrateBootstrapTheme
-  VERSION = '0.2.0'
+  VERSION = '1.0.4'
+  BOOTSTRAP_VERSION = '5.1.0'
 end

data/lib/generators/administrate_bootstrap_theme/install/USAGE

@@ -0,0 +1,10 @@
+Description:
+    AdministrateBootstrapTheme installer
+
+Example:
+    bin/rails generate administrate_bootstrap_theme:install
+
+    This will:
+        - create a new initializer: administrate_bootstrap_theme
+        - create a new SCSS stylesheet: administrate-bootstrap-theme.scss
+        - append the necessary assets to: config/initializers/assets.rb