rails_admin 2.0.2 → 3.1.0.beta

data/{app/assets/stylesheets/rails_admin → src/rails_admin/styles}/base/theming.scss

@@ -6,13 +6,12 @@
 $avatar-size: 30px;
 
 body.rails_admin {
-
   .thumbnail {
     display: inline-block;
   }
 
-  /* room for upper navbar */
-  padding-top: $navbar-height;
+  /* Top navigation */
+  padding-top: $nav-link-height + $navbar-padding-y * 2;
 
   .navbar {
     .edit_user_root_link {
@@ -29,20 +28,29 @@ body.rails_admin {
     }
   }
 
-  .sidebar-nav {
+  /* Sidebar navigation */
+  .btn-toggle-nav {
     padding: 0;
-    background-color: $navbar-default-bg;
 
     .dropdown-header {
       padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) 3px;
       font-weight: bold;
-      color: $gray;
+      color: $gray-700;
       text-transform: uppercase;
     }
 
-    > .nav-stacked > li > a {
-      padding: $padding-base-vertical ($grid-gutter-width / 2);
-      border-radius: 0;
+    > li > a {
+      padding: ($navbar-padding-y / 2) ($grid-gutter-width / 2);
+
+      &.active {
+        background-color: map-get($theme-colors, primary);
+        color: color-contrast(map-get($theme-colors, primary));
+      }
+
+      &:hover {
+        background-color: map-get($theme-colors, primary);
+        color: color-contrast(map-get($theme-colors, primary));
+      }
 
       &.nav-level-1 {
         padding-left: $grid-gutter-width;
@@ -58,86 +66,17 @@ body.rails_admin {
     }
   }
 
-  label.input-group-addon {
-    cursor: pointer;
-  }
-
-  /* fat labels in forms */
-  .label.form-label {
-    padding: 7px 7px 8px 7px;
-  }
-
-  /* new/edit/export forms */
-  .form-horizontal {
+  /* Main form */
+  form.main {
     /* hide hidden fields controls by default */
     .control-group .hidden_type {
-      display:none;
-    }
-
-    .control-group {
-      .img-thumbnail {
-        margin-bottom: 10px;
-      }
-
-      .btn-remove-image {
-        &.btn-info {
-          margin-top: 10px;
-        }
-      }
-    }
-
-    legend {
-      cursor:pointer;
-      i {
-        vertical-align: inherit !important;
-      }
-    }
-
-    &.denser {
-      margin-top: 30px;
-      .controls .nav {
-        margin: 30px 0 0;
-      }
-      .remove_nested_fields,
-      .remove_nested_one_fields {
-        position:absolute;
-      }
-      p {
-        font-size: 12px;
-        line-height: 16px;
-      }
-      .help-block {
-        // margin-top: 0px;
-      }
-      .input-prepend, .input-append {
-        margin-bottom: 0px;
-        label {
-          margin-bottom: 0px;
-        }
-      }
-      legend {
-        margin-bottom: 30px;
-      }
-    }
-
-    /* We want input size to be used, unfixate input width */
-    input, textarea {
-      width:auto;
-    }
-    .help-block {
-      clear:left;
-    }
-    input[type=file] {
-      display:block;
+      display: none;
     }
 
     /* nested forms */
     .tab-content {
-      clear: both;
-
       .tab-pane {
-        @include clearfix;
-        border-left: 5px solid #049cdb;
+        border-left: 5px solid map-get($theme-colors, primary);
         position: relative;
 
         fieldset {
@@ -151,13 +90,12 @@ body.rails_admin {
 
         & > .remove_nested_fields,
         & > .remove_nested_one_fields {
-          display:block;
+          display: block;
           opacity: 0;
           position: absolute;
           top: 0px;
           left: 5px;
-          -webkit-transition: opacity .15s ease;
-          transition: opacity .15s ease;
+          transition: opacity 0.15s ease;
         }
         &:hover > .remove_nested_fields,
         &:hover > .remove_nested_one_fields,
@@ -169,7 +107,7 @@ body.rails_admin {
 
     /* double nesting, guys. Easy. */
     .tab-content .tab-content .tab-pane {
-      border-color: lighten(#049cdb, 20%);
+      border-color: lighten(map-get($theme-colors, info), 20%);
       margin-left: 10px;
 
       .form-group {
@@ -179,7 +117,7 @@ body.rails_admin {
 
     /* triple nesting!*/
     .tab-content .tab-content .tab-content .tab-pane {
-      border-color:lighten(#049cdb, 30%);
+      border-color: lighten(map-get($theme-colors, warning), 30%);
       margin-left: 20px;
 
       .form-group {
@@ -188,8 +126,8 @@ body.rails_admin {
     }
 
     /* totally awesome! nesting on 4 levels! */
-    .tab-content .tab-content .tab-content  .tab-content .tab-pane {
-      border-color:lighten(#049cdb, 40%);
+    .tab-content .tab-content .tab-content .tab-content .tab-pane {
+      border-color: lighten(map-get($theme-colors, success), 40%);
       margin-left: 30px;
 
       .form-group {
@@ -198,35 +136,21 @@ body.rails_admin {
     }
   }
 
-  // .modal {
-  //   width: 750px;
-  //   margin-left: -375px;
-  // }
-
-  /* nested nav */
-  .nav {
-    .nav-level-1 {
-      padding-left:30px;
-    }
-    .nav-level-2 {
-      padding-left:60px;
-    }
-    .nav-level-3 {
-      padding-left:90px;
-    }
-  }
-
-  /* tab links should match icon color */
+  /* Action tabs */
   .nav.nav-tabs {
-    margin-bottom: 20px;
-
-    li.icon a {
-      color: #000;
+    li.nav-item.icon + li.nav-item.dropdown {
+      margin-left: auto;
+    }
+    /* To silence Popper's warning: 'CSS "margin" styles cannot be used...' */
+    .dropdown-menu {
+      margin: 0;
     }
   }
 
   /* Table cells behaviour */
   .table {
+    height: 100%;
+
     // Cells
     > thead,
     > tbody,
@@ -238,39 +162,42 @@ body.rails_admin {
       }
     }
     .thumbnail {
-      float:left;
+      float: left;
       & + * {
-        clear:left;
+        clear: left;
       }
     }
     /* backport of Bootstrap 1.4 table headers */
     .header {
       cursor: pointer;
+      padding-right: 18px;
       &:after {
         content: "";
         float: right;
         margin-top: 7px;
+        margin-left: 8px;
+        margin-right: -16px;
         border-width: 0 4px 4px;
         border-style: solid;
-        border-color: #000 transparent;
+        border-color: $dark transparent;
         visibility: hidden;
       }
     }
     .headerSortUp,
     .headerSortDown {
-      background-color: rgba(141,192,219,.25);
-      text-shadow: 0 1px 1px rgba(255,255,255,.75);
+      background-color: rgba($info, 0.25);
+      text-shadow: 0 1px 1px rgba($light, 0.75);
     }
     .header:hover {
       &:after {
-        visibility:visible;
+        visibility: visible;
       }
     }
     .headerSortDown,
     .headerSortDown:hover {
       &:after {
-        visibility:visible;
-        @include opacity(60);
+        visibility: visible;
+        opacity: 60;
       }
     }
     .headerSortUp {
@@ -278,64 +205,131 @@ body.rails_admin {
         border-bottom: none;
         border-left: 4px solid transparent;
         border-right: 4px solid transparent;
-        border-top: 4px solid #000;
-        visibility:visible;
+        border-top: 4px solid $dark;
+        visibility: visible;
         @include box-shadow(none);
-        @include opacity(60);
+        opacity: 60;
       }
     }
 
+    th {
+      white-space: nowrap;
+    }
+
     /* text-overflow when cell content > 150px */
     td {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width:150px;
+      max-width: 150px;
+    }
+
+    th,
+    td {
+      padding: 5px 10px;
+    }
+
+    .sticky {
+      position: sticky;
+    }
+
+    th.last,
+    td.last {
+      position: sticky;
+      right: 0px;
     }
 
     /* icons */
     td.links {
       max-width: none;
       .list-inline {
-        margin:0px;
-        li { display:inline-block; }
+        margin-bottom: 0;
+        li {
+          display: inline-block;
+          padding: 0 3px;
+          .nav-link {
+            padding: 0 0.1em;
+          }
+        }
       }
     }
 
     /* Shrink to content width */
     .shrink {
-      width:1px;
-      white-space:nowrap;
+      width: 1px;
+      white-space: nowrap;
     }
 
     /* History */
     th.created_at {
-      width:160px;
+      width: 160px;
     }
     th.username {
-      width:140px;
+      width: 140px;
     }
     th.item {
-      width:60px;
+      width: 60px;
     }
   }
-}
 
-@media screen and (min-width: $grid-float-breakpoint) {
-  body.rails_admin {
-    .navbar {
-      .edit_user_root_link {
-        img {
-          top: (($navbar-height - $avatar-size) / 2);
-        }
+  /* Dashboard */
+  .table {
+    .progress {
+      height: 100%;
+    }
+  }
+
+  /* Index */
+  #filters_box {
+    .form-control {
+      display: inline-block;
+      vertical-align: middle;
+      width: auto;
+    }
+  }
+  #sidescroll {
+    margin-bottom: 20px;
+    overflow-x: auto;
+    .table {
+      margin-bottom: 0;
+    }
+
+    // Remove transparency on sticky cells.
+    $table-bg-default: if(
+      $table-bg == transparent,
+      if($body-bg == transparent, #fff, $body-bg),
+      $table-bg
+    ) !default;
+    .table-striped > tbody > tr > td,
+    .table-striped > thead > tr > th {
+      background-color: $table-bg-default;
+    }
+    $table-bg-header-sort: #e2eff6 !default;
+    .table .sticky,
+    .table .last {
+      &.headerSortUp,
+      &.headerSortDown {
+        background-color: $table-bg-header-sort;
       }
     }
+  }
+}
 
-    .sidebar-nav {
+@media screen and (min-width: map-get($grid-breakpoints, "sm")) {
+  body.rails_admin {
+    .btn-toggle-nav {
       position: fixed;
-      top: $navbar-height;
+      top: $nav-link-height + $navbar-padding-y * 2;
       bottom: 0;
       overflow-y: auto;
     }
   }
 }
+
+@media screen and (max-width: map-get($grid-breakpoints, "sm")) {
+  body.rails_admin {
+    .container {
+      padding: 0;
+    }
+  }
+}

data/src/rails_admin/styles/base/variables.scss

@@ -0,0 +1,3 @@
+/* RailsAdmin SASS variables */
+
+$font-size-base: 0.85rem !default;

data/src/rails_admin/styles/base.scss

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+/***  Variables & mixins ***/
+
+@import "base/variables";
+@import "base/mixins";
+
+/***  Libraries  ***/
+
+@import "flatpickr/dist/flatpickr";
+
+/*** Font-awesome ***/
+
+$fa-font-path: "~@fortawesome/fontawesome-free/webfonts" !default;
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+
+/***  Bootstrap  ***/
+
+@import "bootstrap/scss/bootstrap";
+
+/***  RailsAdmin  ***/
+
+@import "base/theming";
+@import "filtering-select";
+@import "filtering-multiselect";
+@import "widgets";

data/src/rails_admin/styles/filtering-multiselect.scss

@@ -0,0 +1,53 @@
+.ra-multiselect {
+  .ra-multiselect-header {
+    margin-bottom: 5px;
+    clear: right;
+    .help {
+      float: left;
+      font-size: 10px;
+    }
+    .ui-icon {
+      position: relative;
+      top: 10px;
+      left: 3px;
+    }
+  }
+
+  .ra-multiselect-search {
+    width: 180px;
+  }
+
+  .ra-multiselect-column {
+    float: left;
+    .wrapper {
+      overflow-x: auto;
+      select {
+        height: auto;
+        min-height: 120px;
+        margin-bottom: 5px;
+        min-width: 200px;
+      }
+    }
+  }
+
+  .ra-multiselect-center {
+    width: 30px;
+    padding-top: 15px;
+    text-align: center;
+    .fas {
+      margin: 5px auto;
+    }
+  }
+
+  span.fas,
+  a.fas {
+    color: $gray-400;
+    font-size: 16px;
+    margin-right: 4px;
+    text-decoration: none;
+
+    &:hover {
+      color: $gray-700;
+    }
+  }
+}

data/src/rails_admin/styles/filtering-select.scss

@@ -0,0 +1,70 @@
+.ui-widget {
+  font-family: Arial, sans-serif;
+  font-size: 1.1em;
+}
+.ui-widget .ui-widget {
+  font-size: 1em;
+}
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+  font-family: Arial, sans-serif;
+  font-size: 1em;
+}
+.ui-widget-content {
+  border: 1px solid #b6b6b6;
+  background: #ffffff;
+  color: #4f4f4f;
+}
+.ui-widget-content a {
+  color: #4f4f4f;
+}
+
+.ui-menu {
+  list-style: none;
+  padding: 2px;
+  margin: 0;
+  display: block;
+  float: left;
+}
+.ui-menu .ui-menu {
+  margin-top: -3px;
+}
+.ui-menu .ui-menu-item {
+  margin: 0;
+  padding: 0;
+  zoom: 1;
+  float: left;
+  clear: left;
+  width: 100%;
+}
+.ui-menu .ui-menu-item a {
+  text-decoration: none;
+  display: block;
+  padding: 0.2em 0.4em;
+  line-height: 1.5;
+  zoom: 1;
+}
+.ui-menu .ui-menu-item a.ui-state-hover,
+.ui-menu .ui-menu-item a.ui-state-active {
+  font-weight: normal;
+  margin: -1px;
+  background: #5f83b9;
+  color: #ffffff;
+  text-shadow: 0px 1px 1px #234386;
+  border-color: #466086;
+  border-radius: 0;
+}
+
+.ui-autocomplete {
+  position: absolute;
+  cursor: default;
+  z-index: 1056 !important;
+  border-radius: 0;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+}
+
+.ui-helper-hidden-accessible {
+  display: none;
+}

data/src/rails_admin/styles/widgets.scss

@@ -0,0 +1,26 @@
+iframe.wysihtml5-sandbox {
+  height: 250px !important;
+  width: 99.7% !important;
+}
+
+iframe.wysihtml5-sandbox,
+.wysihtml5-editor {
+  border: 1px solid #ccc !important;
+}
+
+.controls img.preview {
+  max-height: 200px;
+  max-width: 300px;
+}
+
+.controls.ui-sortable .sortables {
+  cursor: move;
+}
+
+.form-group.hidden_type {
+  display: none;
+}
+
+.links .inline.list-inline .disabled span {
+  color: $gray-600;
+}