trestle 0.8.13 → 0.9.0

data/{app/assets/stylesheets/trestle/_custom.scss → frontend/theme/trestle/_variables.scss}

@@ -1,4 +1,4 @@
-// This file is left as an extension point for user customization.
+// This file is left as a (deprecated) extension point for user configuration.
 //
 // It will be overridden by the similarly named file within
 // the app/assets folder of the Rails application.

data/frontend/theme/trestle/theme.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+@import "theme/functions";
+@import "theme/variables";
+@import "theme/defaults";
+
+@import "theme/bootstrap/color-vars";
+@import "theme/bootstrap/links";
+@import "theme/bootstrap/tables";
+@import "theme/bootstrap/forms";
+@import "theme/bootstrap/buttons";
+@import "theme/bootstrap/dropdown";
+@import "theme/bootstrap/custom-forms";
+@import "theme/bootstrap/nav";
+@import "theme/bootstrap/pagination";
+@import "theme/bootstrap/badge";
+@import "theme/bootstrap/alert";
+@import "theme/bootstrap/progress";
+@import "theme/bootstrap/list-group";
+@import "theme/bootstrap/utilities";
+
+@import "theme/trestle/background";
+@import "theme/trestle/headers";
+@import "theme/trestle/navigation";
+@import "theme/trestle/navbar";
+@import "theme/trestle/datepicker";
+@import "theme/trestle/select2";
+@import "theme/trestle/tags";
+@import "theme/trestle/turbolinks";

data/frontend/theme/trestle/theme/_defaults.scss

@@ -0,0 +1,152 @@
+// Theme colors to override
+
+$theme-colors: (
+  "primary": #4d6bb2
+) !default;
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark:  #212529 !default;
+$yiq-text-light: #ffffff !default;
+
+
+// Links
+
+$link-color:       theme-color("primary") !default;
+$link-hover-color: darken($link-color, 15%) !default;
+
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: 15% !default;
+
+
+// Components
+
+$component-active-bg: theme-color("primary") !default;
+
+
+// Tables
+
+$table-bg-level:     -11 !default;
+$table-border-level: -7 !default;
+
+
+// Buttons + Forms
+
+$input-btn-focus-width:      .2rem !default;
+$input-btn-focus-color:      rgba($component-active-bg, 0.25) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$btn-focus-width:            $input-btn-focus-width !default;
+
+
+// Forms
+
+$input-focus-border-color: lighten($component-active-bg, 25%) !default;
+$input-focus-width:        $input-btn-focus-width !default;
+$input-focus-box-shadow:   $input-btn-focus-box-shadow !default;
+
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), 0.5) !default;
+$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
+
+$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;
+$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
+
+$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
+$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
+
+$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
+$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
+
+$custom-select-focus-border-color: $input-focus-border-color !default;
+$custom-select-focus-width:        $input-focus-width !default;
+$custom-select-focus-box-shadow:   0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
+
+$custom-range-thumb-bg:        $component-active-bg !default;
+$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
+
+$custom-file-focus-border-color: $input-focus-border-color !default;
+$custom-file-focus-box-shadow:   $input-focus-box-shadow !default;
+
+
+// Navs
+
+$nav-pills-link-active-bg: $component-active-bg !default;
+
+
+// Navbar
+
+$sidebar-mobile-toggle-bg:     transparent !default;
+$sidebar-mobile-toggle-color:  white !default;
+$sidebar-mobile-toggle-border: 1px solid rgba($sidebar-mobile-toggle-color, 0.15) !default;
+
+$sidebar-mobile-toggle-active-bg:     rgba($sidebar-mobile-toggle-color, 0.1) !default;
+$sidebar-mobile-toggle-active-border: $sidebar-mobile-toggle-border !default;
+
+$sidebar-mobile-toggle-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$sidebar-mobile-toggle-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+
+
+// Dropdowns
+
+$dropdown-link-active-bg: $component-active-bg !default;
+
+
+// Pagination
+
+$pagination-color:               $link-color !default;
+
+$pagination-focus-box-shadow:    $input-btn-focus-box-shadow !default;
+
+$pagination-hover-color:         $link-hover-color !default;
+
+$pagination-active-bg:           $component-active-bg !default;
+$pagination-active-border-color: $pagination-active-bg !default;
+
+
+// Badges
+
+$badge-focus-width: $input-btn-focus-width !default;
+
+
+// Alerts
+
+$alert-bg-level:     -10 !default;
+$alert-border-level: -9 !default;
+$alert-color-level:  6 !default;
+
+
+// Progress bars
+
+$progress-bar-bg: theme-color("primary") !default;
+
+
+// List group
+
+$list-group-active-bg:           $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+
+// Select2
+
+$s2bs-input-border-focus:            $input-focus-border-color !default;
+$s2bs-form-control-focus-box-shadow: $input-focus-box-shadow !default;
+$s2bs-dropdown-link-active-bg:       $dropdown-link-active-bg !default;
+
+
+// Trestle
+
+$theme-bg:       null !default;
+$theme-bg-color: darken(theme-color("primary"), 15%) !default;
+
+$sidebar-active-border-color: theme-color("primary") !default;
+
+$tag-bg:      lighten(theme-color("primary"), 10%) !default;
+$tag-border:  theme-color("primary") !default;
+
+$tag-hover-bg:     theme-color("primary") !default;
+$tag-hover-border: darken(theme-color("primary"), 10%) !default;

data/frontend/theme/trestle/theme/_functions.scss

@@ -0,0 +1,44 @@
+// Replace `$search` with `$replace` in `$string`
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// Color contrast
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
+
+// Retrieve color Sass maps
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, black, white);
+  $level: abs($level);
+
+  @return mix($color-base, $color, $level * $theme-color-interval);
+}
+
+@function gradient-mask($color, $alpha) {
+  $mask: rgba($color, $alpha);
+  @return linear-gradient($mask, $mask);
+}

data/frontend/theme/trestle/theme/_variables.scss

@@ -0,0 +1,15 @@
+$theme-colors: null !default;
+
+// Import deprecated user-defined variables
+@import "trestle/_variables";
+
+$brand-primary: false !default;
+
+@if $brand-primary != false {
+  $theme-colors: (
+    "primary": $brand-primary
+  );
+}
+
+// Import user-defined theme variables
+@import "trestle/_theme";

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

@@ -0,0 +1,19 @@
+@mixin alert-variant($background, $border, $color) {
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+
+  hr {
+    border-top-color: darken($border, 5%);
+  }
+
+  .alert-link {
+    color: darken($color, 10%);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
+}

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

@@ -0,0 +1,25 @@
+@mixin badge-variant($bg) {
+  color: color-yiq($bg);
+  background-color: $bg;
+
+  @at-root a#{&} {
+    &:hover,
+    &:focus {
+      color: color-yiq($bg);
+      background-color: darken($bg, 10%);
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
+    }
+  }
+}
+
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

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

@@ -0,0 +1,90 @@
+@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
+  color: color-yiq($background);
+  background-color: $background;
+  border-color: $border;
+
+  &:hover {
+    color: color-yiq($hover-background);
+    background-color: $hover-background;
+    border-color: $hover-border;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    color: color-yiq($background);
+    background-color: $background;
+    border-color: $border;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: color-yiq($active-background);
+    background-color: $active-background;
+    border-color: $active-border;
+
+    &:focus {
+      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+    }
+  }
+}
+
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+  color: $color;
+  border-color: $color;
+
+  &:hover {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: color-yiq($active-background);
+    background-color: $active-background;
+    border-color: $active-border;
+
+    &:focus {
+      box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+.btn-link {
+  color: $link-color;
+
+  &:hover {
+    color: $link-hover-color;
+  }
+}

data/frontend/theme/trestle/theme/bootstrap/_color-vars.scss

@@ -0,0 +1,11 @@
+:root {
+  @each $color, $value in $theme-colors {
+    --#{$color}: #{$value};
+
+    --#{$color}-rgb: #{red($value), green($value), blue($value)};
+
+    --#{$color}-hue: #{hue($value)};
+    --#{$color}-saturation: #{saturation($value)};
+    --#{$color}-lightness: #{lightness($value)};
+  }
+}

data/frontend/theme/trestle/theme/bootstrap/_custom-forms.scss

@@ -0,0 +1,93 @@
+.custom-control-input {
+  &:checked ~ .custom-control-label::before {
+    border-color: $custom-control-indicator-checked-border-color;
+    background-color: $custom-control-indicator-checked-bg;
+  }
+
+  &:focus ~ .custom-control-label::before {
+    box-shadow: $custom-control-indicator-focus-box-shadow;
+  }
+
+  &:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: $custom-control-indicator-focus-border-color;
+  }
+
+  &:not(:disabled):active ~ .custom-control-label::before {
+    background-color: $custom-control-indicator-active-bg;
+    border-color: $custom-control-indicator-active-border-color;
+  }
+}
+
+.custom-checkbox {
+  .custom-control-input:indeterminate ~ .custom-control-label {
+    &::before {
+      border-color: $custom-checkbox-indicator-indeterminate-border-color;
+      background-color: $custom-checkbox-indicator-indeterminate-bg;
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+    &:indeterminate ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+  }
+}
+
+.custom-radio {
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+  }
+}
+
+.custom-switch {
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+  }
+}
+
+.custom-select {
+  &:focus {
+    border-color: $custom-select-focus-border-color;
+    box-shadow: $custom-select-focus-box-shadow;
+  }
+}
+
+.custom-file-input {
+  &:focus ~ .custom-file-label {
+    border-color: $custom-file-focus-border-color;
+    box-shadow: $custom-file-focus-box-shadow;
+  }
+}
+
+.custom-range {
+  &::-webkit-slider-thumb {
+    background-color: $custom-range-thumb-bg;
+
+    &:active {
+      background-color: $custom-range-thumb-active-bg;
+    }
+  }
+
+  &::-moz-range-thumb {
+    background-color: $custom-range-thumb-bg;
+
+    &:active {
+      background-color: $custom-range-thumb-active-bg;
+    }
+  }
+
+  &::-ms-thumb {
+    background-color: $custom-range-thumb-bg;
+
+    &:active {
+      background-color: $custom-range-thumb-active-bg;
+    }
+  }
+}