trestle 0.8.13 → 0.9.0

data/frontend/theme/trestle/theme/bootstrap/_dropdown.scss

@@ -0,0 +1,6 @@
+.dropdown-item {
+  &.active,
+  &:active {
+    background-color: $dropdown-link-active-bg;
+  }
+}

data/frontend/theme/trestle/theme/bootstrap/_forms.scss

@@ -0,0 +1,6 @@
+.form-control {
+  &:focus {
+    border-color: $input-focus-border-color;
+    box-shadow: $input-focus-box-shadow;
+  }
+}

data/frontend/theme/trestle/theme/bootstrap/_links.scss

@@ -0,0 +1,7 @@
+a {
+  color: $link-color;
+
+  &:hover {
+    color: $link-hover-color;
+  }
+}

data/frontend/theme/trestle/theme/bootstrap/_list-group.scss

@@ -0,0 +1,31 @@
+.list-group-item {
+  &.active {
+    background-color: $list-group-active-bg;
+    border-color: $list-group-active-border-color;
+  }
+}
+
+@mixin list-group-item-variant($state, $background, $color) {
+  .list-group-item-#{$state} {
+    color: $color;
+    background-color: $background;
+
+    &.list-group-item-action {
+      &:hover,
+      &:focus {
+        color: $color;
+        background-color: darken($background, 5%);
+      }
+
+      &.active {
+        color: white;
+        background-color: $color;
+        border-color: $color;
+      }
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
+}

data/frontend/theme/trestle/theme/bootstrap/_nav.scss

@@ -0,0 +1,6 @@
+.nav-pills {
+  .nav-link.active,
+  .show > .nav-link {
+    background-color: $nav-pills-link-active-bg;
+  }
+}

data/frontend/theme/trestle/theme/bootstrap/_pagination.scss

@@ -0,0 +1,18 @@
+.page-link {
+  color: $pagination-color;
+
+  &:hover {
+    color: $pagination-hover-color;
+  }
+
+  &:focus {
+    box-shadow: $pagination-focus-box-shadow;
+  }
+}
+
+.page-item {
+  &.active .page-link {
+    background-color: $pagination-active-bg;
+    border-color: $pagination-active-border-color;
+  }
+}

data/frontend/theme/trestle/theme/bootstrap/_progress.scss

@@ -0,0 +1,3 @@
+.progress-bar {
+  background-color: $progress-bar-bg;
+}

data/frontend/theme/trestle/theme/bootstrap/_tables.scss

@@ -0,0 +1,41 @@
+@mixin table-row-variant($state, $background, $border: null) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table-#{$state} {
+    &,
+    > th,
+    > td {
+      background-color: $background;
+    }
+
+    @if $border != null {
+      th,
+      td,
+      thead th,
+      tbody + tbody {
+        border-color: $border;
+      }
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover {
+    $hover-background: darken($background, 5%);
+
+    .table-#{$state} {
+      &:hover {
+        background-color: $hover-background;
+
+        > td,
+        > th {
+          background-color: $hover-background;
+        }
+      }
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
+}

data/frontend/theme/trestle/theme/bootstrap/_utilities.scss

@@ -0,0 +1,3 @@
+@import "utilities/background";
+@import "utilities/borders";
+@import "utilities/text";

data/frontend/theme/trestle/theme/bootstrap/utilities/_background.scss

@@ -0,0 +1,17 @@
+@mixin bg-variant($parent, $color) {
+  #{$parent} {
+    background-color: $color !important;
+  }
+
+  a#{$parent},
+  button#{$parent} {
+    &:hover,
+    &:focus {
+      background-color: darken($color, 10%) !important;
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  @include bg-variant(".bg-#{$color}", $value);
+}

data/frontend/theme/trestle/theme/bootstrap/utilities/_borders.scss

@@ -0,0 +1,5 @@
+@each $color, $value in $theme-colors {
+  .border-#{$color} {
+    border-color: $value !important;
+  }
+}

data/frontend/theme/trestle/theme/bootstrap/utilities/_text.scss

@@ -0,0 +1,18 @@
+@mixin text-emphasis-variant($parent, $color) {
+  #{$parent} {
+    color: $color !important;
+  }
+
+  @if $emphasized-link-hover-darken-percentage != 0 {
+    a#{$parent} {
+      &:hover,
+      &:focus {
+        color: darken($color, $emphasized-link-hover-darken-percentage) !important;
+      }
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  @include text-emphasis-variant(".text-#{$color}", $value);
+}

data/frontend/theme/trestle/theme/trestle/_background.scss

@@ -0,0 +1,61 @@
+@if $theme-bg {
+  .theme-bg {
+    background: $theme-bg;
+  }
+
+
+  .theme-bg-dark {
+    background: gradient-mask(black, 0.1), $theme-bg;
+  }
+
+  .theme-bg-darker {
+    background: gradient-mask(black, 0.2), $theme-bg;
+  }
+
+  .theme-bg-darkest {
+    background: gradient-mask(black, 0.3), $theme-bg;
+  }
+
+
+  .theme-bg-light {
+    background: gradient-mask(white, 0.1), $theme-bg;
+  }
+
+  .theme-bg-lighter {
+    background: gradient-mask(white, 0.2), $theme-bg;
+  }
+
+  .theme-bg-lightest {
+    background: gradient-mask(white, 0.3), $theme-bg;
+  }
+} @else {
+  .theme-bg {
+    background-color: $theme-bg-color;
+  }
+
+
+  .theme-bg-dark {
+    background-color: darken($theme-bg-color, $theme-color-interval);
+  }
+
+  .theme-bg-darker {
+    background-color: darken($theme-bg-color, $theme-color-interval * 2);
+  }
+
+  .theme-bg-darkest {
+    background-color: darken($theme-bg-color, $theme-color-interval * 3);
+  }
+
+
+  .theme-bg-light {
+    background-color: lighten($theme-bg-color, $theme-color-interval);
+  }
+
+  .theme-bg-lighter {
+    background-color: lighten($theme-bg-color, $theme-color-interval * 2);
+  }
+
+  .theme-bg-lightest {
+    background-color: lighten($theme-bg-color, $theme-color-interval * 3);
+  }
+}

data/frontend/theme/trestle/theme/trestle/_datepicker.scss

@@ -0,0 +1,58 @@
+@if $theme-bg {
+  .flatpickr-calendar {
+    background: $theme-bg;
+  }
+} @else {
+  .flatpickr-calendar {
+    background-color: $theme-bg-color;
+  }
+}
+
+.flatpickr-calendar {
+  &.arrowTop {
+    &::after {
+      border-bottom-color: mix($theme-bg-color, white, 95%);
+    }
+  }
+}
+
+.flatpickr-months {
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    &:hover svg {
+      fill: lighten(theme-color("primary"), 15%);
+    }
+  }
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: theme-color("primary");
+  border-color: theme-color("primary");
+}
+
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  box-shadow: -10px 0 0 theme-color("primary");
+}
+
+.flatpickr-day.week.selected {
+  box-shadow: -5px 0 0 theme-color("primary"), 5px 0 0 theme-color("primary");
+}

data/frontend/theme/trestle/theme/trestle/_headers.scss

@@ -0,0 +1,4 @@
+.app-sidebar-header,
+.modal-header {
+  @extend .theme-bg;
+}

data/frontend/theme/trestle/theme/trestle/_navbar.scss

@@ -0,0 +1,15 @@
+.app-sidebar-header {
+  .navbar-toggler {
+    background: $sidebar-mobile-toggle-bg;
+    border: $sidebar-mobile-toggle-border;
+
+    &:hover, &:focus {
+      background: $sidebar-mobile-toggle-active-bg;
+      border: $sidebar-mobile-toggle-active-border;
+    }
+  }
+
+  .navbar-toggler-icon {
+    background-image: $sidebar-mobile-toggle-icon-bg;
+  }
+}

data/frontend/theme/trestle/theme/trestle/_navigation.scss

@@ -0,0 +1,5 @@
+.app-nav {
+  .active a {
+    border-color: $sidebar-active-border-color;
+  }
+}

data/frontend/theme/trestle/theme/trestle/_select2.scss

@@ -0,0 +1,22 @@
+.select2-container--bootstrap {
+  .select2-results__option {
+    &--highlighted[aria-selected] {
+      background-color: $s2bs-dropdown-link-active-bg;
+    }
+  }
+
+  &.select2-container--focus,
+  &.select2-container--open {
+    .select2-selection {
+      border-color: $s2bs-input-border-focus !important;
+      box-shadow: $s2bs-form-control-focus-box-shadow !important;
+    }
+  }
+
+  .select2-selection--multiple.tag-select {
+    .select2-selection__choice {
+      background-color: $tag-bg;
+      border-color: $tag-border;
+    }
+  }
+}

data/frontend/theme/trestle/theme/trestle/_tags.scss

@@ -0,0 +1,12 @@
+.tag {
+  background-color: $tag-bg;
+  border-color: $tag-border;
+}
+
+a.tag {
+  &:hover,
+  &:focus {
+    background-color: $tag-hover-bg;
+    border-color: $tag-hover-border;
+  }
+}

data/frontend/theme/trestle/theme/trestle/_turbolinks.scss

@@ -0,0 +1,3 @@
+.turbolinks-progress-bar {
+  background-color: theme-color("primary");
+}

data/lib/generators/trestle/install/install_generator.rb

@@ -10,10 +10,10 @@ module Trestle
       end
 
       def create_assets
-        template "_variables.scss", "app/assets/stylesheets/trestle/_variables.scss"
-        template "_custom.scss",    "app/assets/stylesheets/trestle/_custom.scss"
+        template "_theme.scss",  "app/assets/stylesheets/trestle/_theme.scss"
+        template "_custom.scss", "app/assets/stylesheets/trestle/_custom.scss"
 
-        template "custom.js",       "app/assets/javascripts/trestle/custom.js"
+        template "custom.js",    "app/assets/javascripts/trestle/custom.js"
       end
 
       def create_directory

data/lib/generators/trestle/install/templates/_theme.scss

@@ -0,0 +1,13 @@
+// This file may be used to override the Sass variables used within the Trestle
+// admin. It will be automatically included within all admin pages.
+//
+// A subset of Bootstrap and Trestle defaults can be set here.
+// For a detailed overview of the customizable variables, see the file
+// `frontend/theme/trestle/theme/_defaults.scss` within the Trestle source.
+
+// Customize admin theme colors:
+//
+//   $theme-colors: (
+//     "primary":   #337ab7,
+//     "secondary": #b3b53d
+//   );

data/lib/trestle.rb

@@ -1,9 +1,6 @@
 require "trestle/version"
 
 require "active_support/all"
-
-require "sass-rails"
-require "autoprefixer-rails"
 require "kaminari"
 
 module Trestle

data/lib/trestle/admin.rb

@@ -79,7 +79,11 @@ module Trestle
       end
 
       def human_admin_name
-        I18n.t("admin.breadcrumbs.#{i18n_key}", default: name.demodulize.underscore.sub(/_admin$/, '').titleize)
+        I18n.t("admin.breadcrumbs.#{i18n_key}", default: default_human_admin_name)
+      end
+
+      def default_human_admin_name
+        name.demodulize.underscore.sub(/_admin$/, '').titleize
       end
 
       def translate(key, options={})

data/lib/trestle/configuration.rb

@@ -22,6 +22,9 @@ module Trestle
     # Default timestamp precision
     option :timestamp_precision, :minutes
 
+    # Theme stylesheet compilation (requires Sass support)
+    option :theme, defined?(Sass) || defined?(SassC)
+
 
     ## Mounting Options
 

data/lib/trestle/engine.rb

@@ -1,16 +1,16 @@
+require "sprockets/railtie"
+
 module Trestle
   class Engine < ::Rails::Engine
     isolate_namespace Trestle
     self.routes.default_scope = {}
 
     # Application assets
-    config.assets.precompile << "trestle/admin.css" << "trestle/admin.js"
+    config.assets.precompile << "trestle/admin.css" << "trestle/admin.js" << "trestle/custom.css"
 
     # Vendor assets
     %w(eot svg ttf woff woff2).each do |ext|
-      config.assets.precompile << "trestle/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.#{ext}"
-      config.assets.precompile << "trestle/font-awesome/fonts/fontawesome-webfont.#{ext}"
-      config.assets.precompile << "trestle/ionicons/fonts/ionicons.#{ext}"
+      config.assets.precompile << "trestle/fa-*.#{ext}"
     end
 
     initializer "trestle.automount" do |app|
@@ -27,6 +27,14 @@ module Trestle
       end
     end
 
+    initializer "trestle.theme" do |app|
+      # Enable theme compilation
+      if Trestle.config.theme
+        app.config.assets.paths << root.join("frontend/theme").to_s
+        app.config.assets.precompile << "trestle/theme.css"
+      end
+    end
+
     initializer "trestle.turbolinks" do |app|
       # Optional turbolinks
       app.config.assets.precompile << "turbolinks.js" if Trestle.config.turbolinks