activeadmin-rails 1.7.2 → 1.8.0

data/app/assets/stylesheets/active_admin/components/_batch_actions.scss

@@ -1,6 +1,4 @@
 #collection_selection_toggle_panel {
-  @include clearfix;
-  >.resource_selection_toggle_cell {
-    float:left;
-  }
+  display: flex;
+  align-items: center;
 }

data/app/assets/stylesheets/active_admin/components/_blank_slates.scss

@@ -3,7 +3,7 @@
   text-align: center;
 
   .blank_slate {
-    @include rounded;
+    border-radius: 3px;
     border:  $blank-slate-border;
     color: $blank-slate-primary-color;
     display: inline-block;

data/app/assets/stylesheets/active_admin/components/_comments.scss

@@ -1,18 +1,20 @@
+@use "sass:color";
 // -------------------------------------- Admin Notes
 .comments {
 
   .active_admin_comment {
-    clear: both;
     margin-top: 10px;
-    margin-bottom: 40px;
+    margin-bottom: 20px;
     max-width: 700px;
+    display: flex;
+    gap: 20px;
 
     .active_admin_comment_meta {
       width: 130px;
-      float: left;
+      flex-shrink: 0;
       overflow: hidden;
       font-size: 0.9em;
-      color: lighten($primary-color, 10%);
+      color: color.adjust($primary-color, $lightness: 10%);
       .active_admin_comment_author {
         font-size: 1.2em;
         font-weight: bold;
@@ -21,7 +23,7 @@
       }
     }
     .active_admin_comment_body {
-      margin-left: 150px;
+      flex: 1;
     }
   }
   form.active_admin_comment {
@@ -33,7 +35,7 @@
       margin: 0;
       padding: 0;
       background: none;
-      @include no-shadow;
+      box-shadow: $shadow-none;
     }
     li { padding: 0; }
     fieldset.buttons { padding: 0; margin-top: 5px;}

data/app/assets/stylesheets/active_admin/components/_date_picker.scss

@@ -40,7 +40,7 @@
     }
 
     .ui-datepicker-title {
-      @include text-shadow(#000);
+      text-shadow: $text-shadow-dark;
       color: #fff;
       display: block;
       font-size: 1.1em;
@@ -90,8 +90,8 @@
   }
 
   table.ui-datepicker-calendar {
-    @include rounded-bottom;
-    @include shadow(0,1px,6px,rgba(0,0,0,0.26));
+    border-radius: 0 0 3px 3px;
+    box-shadow: $shadow-lg;
     background-color: #f4f4f4;
     border: solid 1px #63686e;
     left: 2px;
@@ -122,7 +122,7 @@
         width: 22px;
 
         a {
-          @include rounded;
+          border-radius: 3px;
           color: #666666;
           font-weight: bold;
           font-size: 0.85em;

data/app/assets/stylesheets/active_admin/components/_dropdown_menu.scss

@@ -1,11 +1,16 @@
+@use "sass:color";
+
 .dropdown_menu {
   display: inline;
 
   .dropdown_menu_button {
     @include light-button;
-    position: relative;
-    padding-right: 22px !important;
-    cursor: pointer;
+
+    & {
+      position: relative;
+      padding-right: 22px !important;
+      cursor: pointer;
+    }
 
     &:before {
       content: ' ';
@@ -43,7 +48,7 @@
     height: 0;
     border-width: 0 6px 6px;
     border-style: solid;
-    border-color: darken($primary-color, 4%) transparent;
+    border-color: color.adjust($primary-color, $lightness: -4%) transparent;
     z-index: 100;
 
     // The nipple's inner shadow
@@ -55,7 +60,7 @@
       height: 0;
       border-width: 0 5px 5px;
       border-style: solid;
-      border-color: lighten($primary-color, 15%) transparent;
+      border-color: color.adjust($primary-color, $lightness: 15%) transparent;
       left: -5px;
       top: 1px;
     }
@@ -69,7 +74,7 @@
       height: 0;
       border-width: 0 5px 5px;
       border-style: solid;
-      border-color: lighten($primary-color, 4%) transparent;
+      border-color: color.adjust($primary-color, $lightness: 4%) transparent;
       left: -5px;
       top: 2px;
     }
@@ -80,12 +85,12 @@
     position: absolute;
     background-color: white;
     padding: 2px;
-    box-shadow: rgba(0,0,0,0.4) 0 1px 3px, lighten($primary-color, 15%) 0px 1px 0px 0px inset;
+    box-shadow: rgba(0,0,0,0.4) 0 1px 3px, color.adjust($primary-color, $lightness: 15%) 0px 1px 0px 0px inset;
     background-color: $primary-color;
-    @include gradient(lighten($primary-color, 4%), darken($primary-color, 5%));
-    border: solid 1px darken($primary-color, 10%);
-    border-top-color: darken($primary-color, 4%);
-    border-bottom-color: darken($primary-color, 17%);
+    @include gradient(color.adjust($primary-color, $lightness: 4%), color.adjust($primary-color, $lightness: -5%));
+    border: solid 1px color.adjust($primary-color, $lightness: -10%);
+    border-top-color: color.adjust($primary-color, $lightness: -4%);
+    border-bottom-color: color.adjust($primary-color, $lightness: -17%);
     border-radius: 4px;
     z-index: 2000;
     display: none;
@@ -93,8 +98,8 @@
     .dropdown_menu_list {
       display: block;
       background-color: #FFF;
-      border: solid 1px darken($primary-color, 10%);
-      box-shadow: lighten($primary-color, 5%) 0px 1px 0px 0px;
+      border: solid 1px color.adjust($primary-color, $lightness: -10%);
+      box-shadow: color.adjust($primary-color, $lightness: 5%) 0px 1px 0px 0px;
       border-radius: 3px;
       margin: 0;
       overflow: hidden;
@@ -120,7 +125,7 @@
 
           &:hover {
             @include highlight-gradient;
-            @include text-shadow(#5a83aa);
+            text-shadow: 0 1px 0 #5a83aa;
             color: #FFF;
           }
 
@@ -140,11 +145,11 @@
         }
 
         &:last-child {
+          border: none;
           a {
             border-bottom-left-radius: 2px;
             border-bottom-right-radius: 2px;
           }
-          border: none;
         }
       }
     }

data/app/assets/stylesheets/active_admin/components/_flash_messages.scss

@@ -1,7 +1,7 @@
 body.logged_in {
   .flash {
     @include gradient(#f7f1d3, #f5edc5);
-    @include text-shadow(#fafafa);
+    text-shadow: 0 1px 0 #fafafa;
     border-bottom: 1px solid #eee098;
     color: #cb9810;
     font-weight: bold;
@@ -25,8 +25,8 @@ body.logged_in {
 
 body.logged_out {
   .flash {
-    @include no-shadow;
-    @include text-shadow(#fff);
+    box-shadow: $shadow-none;
+    text-shadow: $text-shadow-light;
     background: none;
     color: #666;
     font-weight: bold;

data/app/assets/stylesheets/active_admin/components/_pagination.scss

@@ -1,11 +1,10 @@
-.paginated_collection_contents {
-  clear: both;
-}
-
 .pagination {
-  float: right;
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
   font-size: 0.9em;
-  margin-left: 10px;
+  margin-left: 8px;
+  order: 2;
 
   a {
     @include light-button;
@@ -16,40 +15,48 @@
   }
 
   a, span.page.current {
-    @include rounded(0px);
-    margin-right: 4px;
+    border-radius: 0;
     padding: 2px 5px;
   }
 }
 
 .pagination_information {
-  float: right;
+  display: inline-block;
+  margin-left: auto;
   margin-bottom: 5px;
+  white-space: nowrap;
   color: #b3bcc1;
+  order: 1;
   b { color: #5c6469; }
 }
 
 .download_links {
-  float: left;
+  display: flex;
+  justify-content: flex-start;
+  margin-left: 0;
+  margin-right: auto;
+  order: 0;
 }
 
 .pagination_per_page {
-  float: right;
+  display: flex;
+  justify-content: flex-end;
   margin-left: 4px;
+  order: 0;
   select {
     @include light-button;
-    @include rounded(0px);
+    border-radius: 0;
     padding: 1px 5px;
   }
 }
 
 .comments {
   .pagination {
-    float: left;
+    justify-content: flex-start;
     margin-bottom: 30px;
   }
   .pagination_information {
-    float: left;
+    text-align: left;
     color: #000;
   }
 }

data/app/assets/stylesheets/active_admin/components/_status_tags.scss

@@ -1,5 +1,7 @@
+@use "sass:color";
+
 .status_tag {
-  background: darken($secondary-color, 15%);
+  background: color.adjust($secondary-color, $lightness: -15%);
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 0.15em;

data/app/assets/stylesheets/active_admin/components/_table_tools.scss

@@ -1,19 +1,20 @@
 .table_tools {
-  @include clearfix;
   margin-bottom: 16px;
-}
-
-.table_tools .dropdown_menu {
-  float: left;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 a.table_tools_button, .table_tools .dropdown_menu_button {
   @include light-button;
-  @include gradient(#FFFFFF, #F0F0F0);
-  @include border-colors(#d9d9d9, #d0d0d0, #c5c5c5);
-  font-size: 0.9em;
-  padding: 4px 14px 4px;
-  margin: 0;
+
+  & {
+    @include gradient(#FFFFFF, #F0F0F0);
+    border-color: #d9d9d9 #d0d0d0 #c5c5c5 #d0d0d0;
+    font-size: 0.9em;
+    padding: 4px 14px 4px;
+    margin: 0;
+  }
 
   &:not(.disabled) {
     &:hover {
@@ -21,7 +22,7 @@ a.table_tools_button, .table_tools .dropdown_menu_button {
     }
 
     &:active {
-      @include border-colors(#d7d7d7, #c8c8c8, #c3c3c3);
+      border-color: #d7d7d7 #c8c8c8 #c3c3c3 #c8c8c8;
       box-shadow: 0 1px 1px 0 rgba(0,0,0,0.17) inset;
       @include gradient(#FFFFFF, #E8E8E8);
     }
@@ -32,10 +33,9 @@ a.table_tools_button, .table_tools .dropdown_menu_button {
   list-style-type: none;
   padding: 0;
   margin: 0;
+  display: flex;
 
   li {
-    float: left;
-
     a {
       border-width: 1px .5px 1px .5px;
       border-radius: 0;

data/app/assets/stylesheets/active_admin/components/_tables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //= depend_on_asset "active_admin/orderable.png"
 // ----------------------------------- Tables
 
@@ -40,7 +41,7 @@ table.index_table {
     &.sorted-desc a {  background-position: 0 -56px;}
 
     &.sorted-asc, &.sorted-desc {
-      @include gradient(darken($secondary-gradient-start, 5%), darken($secondary-gradient-stop, 5%));
+      @include gradient(color.adjust($secondary-gradient-start, $lightness: -5%), color.adjust($secondary-gradient-stop, $lightness: -5%));
     }
 
     &:last-child {
@@ -70,12 +71,12 @@ table.index_table {
     padding-top: 10px;
     background: none;
     color: $primary-color;
-    @include no-shadow;
-    @include text-shadow;
+    box-shadow: $shadow-none;
+    text-shadow: $text-shadow-light;
     text-transform: uppercase;
     border-bottom: 1px solid #ccc;
   }
-  tr.odd td { background: darken($table-stripe-color, 3%); }
+  tr.odd td { background: color.adjust($table-stripe-color, $lightness: -3%); }
   tr.even td { background: $table-stripe-color; }
 }
 
@@ -84,21 +85,21 @@ table.index_table {
 
 .attributes_table table {
   col.even { background: $table-stripe-color; }
-  col.odd  { background: darken($table-stripe-color, 3%); }
+  col.odd  { background: color.adjust($table-stripe-color, $lightness: -3%); }
   th, td {
     padding: 8px $cell-horizontal-padding 6px $cell-horizontal-padding;
     vertical-align: top;
     border-bottom: 1px solid #e8e8e8;
   }
   th {
-    @include no-shadow;
+    box-shadow: $shadow-none;
     @include no-gradient;
     width: 150px;
     font-size: 0.9em;
     padding-left: 0;
     text-transform: uppercase;
     color: $primary-color;
-    @include text-shadow;
+    text-shadow: $text-shadow-light;
   }
   td {
     .empty {

data/app/assets/stylesheets/active_admin/components/_tabs.scss

@@ -28,13 +28,16 @@
 
     a {
       @include light-button;
-      @include gradient(#FFFFFF, #F0F0F0);
-      @include border-colors(#d9d9d9, #d0d0d0, #c5c5c5);
-      text-decoration: none;
-      border-radius: 0;
-      border-width: 1px .5px 1px .5px;
-      margin-right: 0;
-      padding: 4px 14px 4px;
+
+      & {
+        @include gradient(#FFFFFF, #F0F0F0);
+        border-color: #d9d9d9 #d0d0d0 #c5c5c5 #d0d0d0;
+        text-decoration: none;
+        border-radius: 0;
+        border-width: 1px .5px 1px .5px;
+        margin-right: 0;
+        padding: 4px 14px 4px;
+      }
 
       &:not(.disabled) {
         &:hover {

data/app/assets/stylesheets/active_admin/mixins/_all.scss

@@ -1,8 +1,4 @@
 @import "active_admin/mixins/variables";
 @import "active_admin/mixins/gradients";
-@import "active_admin/mixins/shadows";
-@import "active_admin/mixins/rounded";
 @import "active_admin/mixins/buttons";
 @import "active_admin/mixins/sections";
-@import "active_admin/mixins/utilities";
-@import "active_admin/mixins/typography";

data/app/assets/stylesheets/active_admin/mixins/_buttons.scss

@@ -1,9 +1,10 @@
+@use "sass:color";
 @mixin basic-button {
-  @include rounded(200px);
+  border-radius: 200px;
   display: inline-block;
   font-weight: bold;
   font-size: 1.0em;
-  @include sans-family;
+  font-family: $font-family-sans;
   line-height: 12px;
   margin-right: 3px;
   padding: 7px 16px 6px;
@@ -17,44 +18,50 @@
 }
 
 @mixin default-button {
-  @include basic-button;
-  @include gradient(lighten($primary-color, 15%), darken($primary-color, 12%));
-  @include text-shadow(#000);
+  background-color: color.adjust($primary-color, $lightness: 15%);
+  background-image: linear-gradient(180deg, color.adjust($primary-color, $lightness: 15%), color.adjust($primary-color, $lightness: -12%));
+  text-shadow: $text-shadow-dark;
   box-shadow: 0 1px 1px rgba(0,0,0,0.10), 0 1px 0 0px rgba(255,255,255, 0.2) inset;
   border: solid 1px #484e53;
-  @include border-colors(#616a71, #484e53, #363b3f);
+  border-color: #616a71 #484e53 #363b3f #484e53;
   color: #efefef;
+  @include basic-button;
 
   &:not(.disabled) {
     &:hover{
-      @include gradient(lighten($primary-color, 18%), darken($primary-color, 9%));
+      background-color: color.adjust($primary-color, $lightness: 18%);
+      background-image: linear-gradient(180deg, color.adjust($primary-color, $lightness: 18%), color.adjust($primary-color, $lightness: -9%));
     }
 
     &:active {
       box-shadow: 0 1px 3px rgba(0,0,0,0.40) inset, 0 1px 0 0px #FFF;
-      @include gradient(lighten($primary-color, 8%), darken($primary-color, 17%));
+      background-color: color.adjust($primary-color, $lightness: 8%);
+      background-image: linear-gradient(180deg, color.adjust($primary-color, $lightness: 8%), color.adjust($primary-color, $lightness: -17%));
     }
   }
 }
 
 @mixin light-button {
-  @include basic-button;
-  @include gradient(#FFFFFF, #E7E7E7);
+  background-color: #FFFFFF;
+  background-image: linear-gradient(180deg, #FFFFFF, #E7E7E7);
   box-shadow: 0 1px 1px rgba(0,0,0,0.10), 0 1px 0 0 rgba(255,255,255, 0.8) inset;
   border: solid 1px #c7c7c7;
-  @include border-colors(#d3d3d3, #c7c7c7, #c2c2c2);
-  @include text-shadow;
+  border-color: #d3d3d3 #c7c7c7 #c2c2c2 #c7c7c7;
+  text-shadow: $text-shadow-light;
   color: $primary-color;
+  @include basic-button;
 
   &:not(.disabled) {
     &:hover {
-      @include gradient(#FFFFFF, #F1F1F1);
+      background-color: #FFFFFF;
+      background-image: linear-gradient(180deg, #FFFFFF, #F1F1F1);
     }
 
     &:active {
       box-shadow: 0 1px 2px rgba(0,0,0,0.22) inset, 0 1px 0 0px #EEE;
-      @include border-colors(#c2c2c2, #b9b9b9, #b7b7b7);
-      @include gradient(#F3F3F3, #D8D8D8);
+      border-color: #c2c2c2 #b9b9b9 #b7b7b7 #b9b9b9;
+      background-color: #F3F3F3;
+      background-image: linear-gradient(180deg, #F3F3F3, #D8D8D8);
     }
   }
 

data/app/assets/stylesheets/active_admin/mixins/_gradients.scss

@@ -1,14 +1,15 @@
+@use "sass:color";
 $secondary-gradient-start: #efefef !default;
 $secondary-gradient-stop: #dfe1e2 !default;
 
-@mixin gradient($start, $end){
+@mixin gradient($start, $end, $direction: 180deg){
   background-color: $start;
-  background-image: linear-gradient(180deg, $start, $end);
+  background-image: linear-gradient($direction, $start, $end);
 }
 
 @mixin primary-gradient {
-  @include gradient(lighten($primary-color, 5%), darken($primary-color, 7%));
-  border-bottom: 1px solid darken($primary-color, 11%);
+  @include gradient(color.adjust($primary-color, $lightness: 5%), color.adjust($primary-color, $lightness: -7%));
+  border-bottom: 1px solid color.adjust($primary-color, $lightness: -11%);
 }
 
 @mixin secondary-gradient {
@@ -24,5 +25,6 @@ $secondary-gradient-stop: #dfe1e2 !default;
 }
 
 @mixin no-gradient {
-  background-color: none;
+  background: transparent;
+  background-image: none;
 }

data/app/assets/stylesheets/active_admin/mixins/_sections.scss

@@ -1,8 +1,8 @@
 @mixin section-header {
   @include secondary-gradient;
-  @include text-shadow;
+  text-shadow: $text-shadow-light;
   border: solid 1px #cdcdcd;
-  @include border-colors(#e6e6e6, #d4d4d4, #cdcdcd);
+  border-color: #e6e6e6 #d4d4d4 #cdcdcd #d4d4d4;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 1px #FFF inset;
 
   font-size: 1em;
@@ -16,8 +16,8 @@
 
 @mixin section-background {
   background: #f4f4f4;
-  @include rounded(4px);
-  @include inset-shadow(0,1px,4px, #ddd);
+  border-radius: 4px;
+  box-shadow: $shadow-inset;
 }
 
 @mixin section {

data/app/assets/stylesheets/active_admin/mixins/_variables.scss

@@ -1,4 +1,5 @@
 // Variables used throughout Active Admin.
+@use "sass:color";
 // They can be overridden by prepending your own
 // to 'app/assets/stylesheets/active_admin.scss'.
 
@@ -9,10 +10,20 @@ $secondary-color: #f0f0f0 !default;
 $text-color: #323537 !default;
 $link-color: #38678b !default;
 $section-header-text-color: $primary-color !default;
-$current-menu-item-background: lighten($primary-color, 12%) !default;
-$hover-menu-item-background: lighten($primary-color, 12%) !default;
-$table-stripe-color: lighten($primary-color, 57%) !default;
+$current-menu-item-background: color.adjust($primary-color, $lightness: 12%) !default;
+$hover-menu-item-background: color.adjust($primary-color, $lightness: 12%) !default;
+$table-stripe-color: color.adjust($primary-color, $lightness: 57%) !default;
 $table-selected-color: #d9e4ec !default;
+$shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.1) !default;
+$shadow-md: 0 1px 2px rgba(0, 0, 0, 0.37) !default;
+$shadow-lg: 0 1px 6px rgba(0, 0, 0, 0.26) !default;
+$shadow-inset: inset 0 1px 4px #ddd !default;
+$shadow-none: none !default;
+$text-shadow-light: 0 1px 0 rgba(255, 255, 255, 0.9) !default;
+$text-shadow-dark: 0 1px 0 rgba(0, 0, 0, 0.6) !default;
+
+$font-family-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
+
 $error-color: #932419 !default;
 $blank-slate-primary-color: #AAA !default;
 $breadcrumbs-color: #8a949e !default;

data/app/assets/stylesheets/active_admin/pages/_logged_out.scss

@@ -5,7 +5,7 @@ body.logged_out {
     width: 500px;
     margin: 70px auto;
     #active_admin_content {
-      @include shadow;
+      box-shadow: $shadow-md;
       background: #fff;
       padding: 13px 30px;
     }
@@ -14,7 +14,7 @@ body.logged_out {
   h2 {
     @include section-header;
     @include primary-gradient;
-    @include text-shadow(#000);
+  text-shadow: $text-shadow-dark;
     box-shadow: 0 1px 3px rgba(0,0,0,0.3);
     border: none;
     color: #fff;
@@ -22,23 +22,27 @@ body.logged_out {
   }
 
   #login {
-    /* Login Form */
+    display: flex;
+    flex-direction: column;
     form {
       fieldset {
-        @include no-shadow;
+        box-shadow: $shadow-none;
         background: none;
         padding: 0;
+        margin-bottom: 0;
         li { padding: 10px 0; }
 
         input[type=text], input[type=email], input[type=password] {
           width: 70%;
         }
         &.buttons { margin-left: 20%; }
-        margin-bottom: 0;
       }
     }
 
-    a { float: right; margin-top: -32px; }
+    a {
+      align-self: flex-end;
+      margin-top: -32px;
+    }
   }
 
 }

data/app/assets/stylesheets/active_admin/structure/_footer.scss

@@ -9,6 +9,13 @@
 }
 
 // -------------------------------------- Index Footer (Under Table)
-#index_footer { padding-top: 5px; text-align: right; font-size: 0.85em; }
+#index_footer {
+  padding-top: 5px;
+  font-size: 0.85em;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
 
 .index_content { clear: both; }