active_frontend 10.3.0 → 11.0.0

data/vendor/assets/stylesheets/_swoggle.scss

@@ -6,51 +6,29 @@
 
 /* # Variables
 ================================================== */
-$onblack-colors: (
-  dark-yellow:  $color-dark-yellow,
-  yellow:       $color-yellow,
-  light-yellow: $color-light-yellow
-);
 $ongray-colors: (
-  dark-haze:  $color-dark-haze,
-  haze:       $color-haze,
+  dark-haze: $color-dark-haze,
+  haze: $color-haze,
   light-haze: $color-light-haze,
-  white:      $color-white
+  white: $color-white
 );
 $onwhite-colors: (
-  dark-black:   $color-dark-black,
-  black:        $color-black,
-  light-black:  $color-light-black,
-  dark-gray:    $color-dark-gray,
-  gray:         $color-gray,
-  light-gray:   $color-light-gray,
-  dark-lime:    $color-dark-lime,
-  lime:         $color-lime,
-  light-lime:   $color-light-lime,
-  dark-green:   $color-dark-green,
-  green:        $color-green,
-  light-green:  $color-light-green,
-  dark-teal:    $color-dark-teal,
-  teal:         $color-teal,
-  light-teal:   $color-light-teal,
-  dark-blue:    $color-dark-blue,
-  blue:         $color-blue,
-  light-blue:   $color-light-blue,
-  dark-indigo:  $color-dark-indigo,
-  indigo:       $color-indigo,
-  light-indigo: $color-light-indigo,
-  dark-purple:  $color-dark-purple,
-  purple:       $color-purple,
-  light-purple: $color-light-purple,
-  dark-pink:    $color-dark-pink,
-  pink:         $color-pink,
-  light-pink:   $color-light-pink,
-  dark-red:     $color-dark-red,
-  red:          $color-red,
-  light-red:    $color-light-red,
-  dark-orange:  $color-dark-orange,
-  orange:       $color-orange,
-  light-orange: $color-light-orange
+  dark-black: $color-dark-black,
+  black: $color-black,
+  light-black: $color-light-black,
+  dark-gray: $color-dark-gray,
+  gray: $color-gray,
+  light-gray: $color-light-gray,
+  lime: $color-lime,
+  green: $color-green,
+  teal: $color-teal,
+  blue: $color-blue,
+  indigo: $color-indigo,
+  purple: $color-purple,
+  pink: $color-pink,
+  red: $color-red,
+  orange: $color-orange,
+  yellow: $color-yellow
 );
 
 /* # Swoggle
@@ -72,9 +50,10 @@ $onwhite-colors: (
   cursor: pointer;
   display: inline-block;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   font-size: 12px;
   font-weight: bold;
-  line-height: 12px;
+  line-height: 1;
   margin-top: -2px;
   min-width: 64px;
   overflow: hidden;
@@ -83,12 +62,8 @@ $onwhite-colors: (
   text-align: center;
   text-rendering: geometricPrecision;
   text-transform: uppercase;
-  -webkit-transition: all 0.5s ease-in-out;
-      -ms-transition: all 0.5s ease-in-out;
-          transition: all 0.5s ease-in-out;
-  -webkit-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  @include transition(all 0.5s ease-in-out);
+  @include user-select(none);
   vertical-align: middle;
 }
 .swoggle span,
@@ -104,47 +79,31 @@ $onwhite-colors: (
 .swoggle label {
   background: $color-white;
   border-radius: 500px;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding-bottom: 4px;
-  padding-top: 3px;
+  margin: 0;
+  padding: 3px 0 4px 0;
   width: 20%;
   z-index: 100;
 }
 .swoggle span {
-  padding-bottom: 0;
-  padding-top: 0;
+  padding: 0;
   width: 40%;
   z-index: 1;
 }
 .swoggle div {
   display: inline-block;
   position: relative;
-  -webkit-transform: translate3d(0,0,0);
-      -ms-transform: translate3d(0,0,0);
-          transform: translate3d(0,0,0);
+  @include transform(translate3d(0,0,0));
   top: 0;
   width: 150%;
 }
 .swoggle.swoggle-on div { margin-left: 0; }
 .swoggle.swoggle-off div { margin-left: -50%; }
-.swoggle.swoggle-animate div {
-  -webkit-transition: margin-left 0.5s;
-      -ms-transition: margin-left 0.5s;
-          transition: margin-left 0.5s;
-}
+.swoggle.swoggle-animate div { @include transition(margin-left 0.5s); }
 .swoggle.swoggle-disabled { cursor: not-allowed !important; }
 .swoggle.swoggle-readonly { cursor: default !important; }
 
 /* # Colors
 ================================================== */
-@each $name, $color in $onblack-colors {
-  .swoggle.swoggle-on.swoggle-#{$name} {
-    background: $color;
-    border-color: $color;
-    color: $color-black;
-  }
-}
 @each $name, $color in $ongray-colors {
   .swoggle.swoggle-on.swoggle-#{$name} {
     background: $color;

data/vendor/assets/stylesheets/_table.scss

@@ -1,6 +1,9 @@
 /* Table of Contents
 ==================================================
 # Table
+# Sizes
+# Styles
+# Colors
 # Media Queries */
 
 /* # Table
@@ -15,7 +18,6 @@ table {
 .table caption,
 .table th,
 .table td {
-  background: $color-white;
   border-top: 1px solid $color-haze;
   font-size: 16px;
   line-height: 25px;
@@ -28,7 +30,6 @@ table {
   border-top-width: 1px;
   font-size: 14px;
   font-weight: bold;
-  padding: 7px 10px;
 }
 .table th a { color: $color-black; }
 .table th.tablespy-sort-asc:before,
@@ -53,8 +54,8 @@ table {
   color: $color-black;
   font-size: 15px;
   font-weight: bold;
-  letter-spacing: 1px;
-  padding: 7px 10px;
+  letter-spacing: 1;
+  padding: 9px 10px 8px 10px;
   text-transform: uppercase;
 }
 .table caption + thead tr:first-child th,
@@ -66,18 +67,31 @@ table {
 .table tbody + tbody { border-top: 1px solid $color-haze; }
 .table-align-bottom th,
 .table-align-bottom td { vertical-align: bottom; }
+.table-align-middle th,
+.table-align-middle td { vertical-align: middle; }
 .table-align-top th,
 .table-align-top td { vertical-align: top; }
+
+/* # Sizes
+================================================== */
 .table-condensed caption,
 .table-condensed th,
 .table-condensed tfoot td {
   font-size: 13px;
   padding: 5px;
 }
+.table-condensed caption { padding-top: 7px; }
 .table-condensed td {
   font-size: 14px;
-  padding: 5px 5px 3px 5px;
+  padding: 6px 5px 3px 5px;
 }
+.table-scrollable {
+  height: 300px;
+  overflow: auto;
+}
+
+/* # Styles
+================================================== */
 .table-bordered {
   border: 1px solid $color-haze;
   border-collapse: separate;
@@ -107,10 +121,44 @@ table {
 .table-unbordered tbody,
 .table-unbordered th,
 .table-unbordered td { border: 0; }
-.table-scrollable {
-  height: 300px;
-  overflow: auto;
+
+/* # Colors
+================================================== */
+.table-dark caption,
+.table-dark th,
+.table-dark td {
+  background: $color-black;
+  border-color: $color-dark-black;
+  color: $color-white;
+}
+.table-dark th a { color: $color-white; }
+.table-dark tbody + tbody,
+.table-dark.table-bordered,
+.table-dark.table-bordered caption,
+.table-dark.table-bordered th,
+.table-dark.table-bordered td { border-color: $color-dark-black; }
+.table-dark.table-striped tbody > tr:nth-child(odd) > td,
+.table-dark.table-striped tbody > tr:nth-child(odd) > th { background: $color-light-black; }
+.table-dark.table-hover tbody tr:hover > td,
+.table-dark.table-hover tbody tr:hover > th { background: $color-dark-black; }
+.table-light caption,
+.table-light th,
+.table-light td {
+  background: $color-light-haze;
+  border-color: $color-dark-haze;
 }
+.table-light tbody + tbody,
+.table-light.table-bordered,
+.table-light.table-bordered caption,
+.table-light.table-bordered th,
+.table-light.table-bordered td { border-color: $color-dark-haze; }
+.table-light.table-striped tbody > tr:nth-child(odd) > td,
+.table-light.table-striped tbody > tr:nth-child(odd) > th { background: $color-haze; }
+.table-light.table-hover tbody tr:hover > td,
+.table-light.table-hover tbody tr:hover > th { background: $color-dark-haze; }
+.table-white caption,
+.table-white th,
+.table-white td { background: $color-white; }
 
 /* # Media Queries
 ================================================== */
@@ -118,11 +166,11 @@ table {
   .table-responsive {
     border: 1px solid $color-haze;
     max-height: 300px;
-    -webkit-overflow-scrolling: touch;
-        -ms-overflow-scrolling: touch;
-            overflow-scrolling: touch;
+    @include overflow-scrolling(touch);
     overflow: scroll;
   }
+  .table-responsive.table-dark { border-color: $color-dark-black; }
+  .table-responsive.table-light { border-color: $color-dark-haze; }
   .table-responsive > .table > thead > tr > th,
   .table-responsive > .table > tbody > tr > th,
   .table-responsive > .table > tfoot > tr > th,

data/vendor/assets/stylesheets/_timepicker.scss

@@ -8,9 +8,7 @@
   display: none;
   opacity: 1;
   padding: 5px 0;
-  -webkit-transition: none;
-      -ms-transition: none;
-          transition: none;
+  @include transition(none);
   visibility: visible;
 }
 .timepicker-widget.dropdown-menu.open {
@@ -72,7 +70,4 @@
 .timepicker-widget > table td > a:hover,
 .timepicker-widget > table td > a.active,
 .timepicker-widget > table td > a:active,
-.timepicker-widget > table td > a:focus {
-  color: $color-primary;
-  text-decoration: none;
-}
+.timepicker-widget > table td > a:focus { color: $color-primary; }

data/vendor/assets/stylesheets/_toolbar.scss

@@ -25,7 +25,7 @@
   border-bottom: 1px solid $color-haze;
   border-radius: 0;
   box-sizing: border-box;
-  color: $color-light-black;
+  color: $color-black;
   display: block;
   font-size: 21px;
   height: 55px;
@@ -47,19 +47,18 @@
 .toolbar > a[disabled]:active,
 .toolbar > a[disabled]:focus {
   background: $color-transparent;
-  color: $color-light-black;
+  color: $color-black;
   cursor: not-allowed;
   pointer-events: none;
 }
 .toolbar > .tooltip {
-  width: auto !important;
   min-width: 80px;
+  width: 80px;
 }
 
 /* # Colors
 ================================================== */
-.toolbar-dark,
-.toolbar-dark.toolbar-alt {
+.toolbar-dark {
   background: $color-black;
   border-color: $color-dark-black;
 }
@@ -71,8 +70,7 @@
   color: $color-gray;
   border-color: $color-dark-black;
 }
-.toolbar-light,
-.toolbar-light.toolbar-alt {
+.toolbar-light {
   background: $color-light-haze;
   border-color: $color-dark-haze;
 }

data/vendor/assets/stylesheets/_tooltip.scss

@@ -8,7 +8,7 @@
   color: $color-white;
   display: block;
   float: none;
-  font-family: 'Gotham', 'Helvetica', Helvetica, Arial, sans-serif;
+  font-family: $typography-sans-serif;
   font-size: 11px;
   font-style: normal;
   font-weight: bold;
@@ -20,7 +20,7 @@
   text-decoration: none;
   text-transform: none;
   visibility: visible;
-  z-index: 1070;
+  z-index: 1020;
 }
 .tooltip.in {
   opacity: 0.8;

data/vendor/assets/stylesheets/_transition.scss

@@ -6,8 +6,6 @@
 ================================================== */
 .fade {
   opacity: 0;
-  -webkit-transition: opacity 0.3s linear;
-      -ms-transition: opacity 0.3s linear;
-          transition: opacity 0.3s linear;
+  @include transition(opacity 0.3s linear);
 }
 .fade.in { opacity: 1; }

data/vendor/assets/stylesheets/_trunk.scss

@@ -31,7 +31,7 @@
 .trunk-user > li {
   font-size: 11px;
   font-weight: 500;
-  line-height: 11px;
+  line-height: 1;
   margin: 5px;
 }
 .trunk-nav > li {
@@ -53,8 +53,7 @@
   color: $color-primary;
   font-size: 12px;
   letter-spacing: 1px;
-  line-height: 12px;
-  padding: 8px 10px 5px 10px;
+  padding: 8px 10px;
   text-transform: uppercase;
 }
 .trunk-nav > li.divider { height: 0; }
@@ -65,34 +64,27 @@
 }
 .trunk-nav > li > a,
 .trunk-user > li > a {
-  -webkit-appearance: none;
-      -ms-appearance: none;
-          appearance: none;
+  @include appearance(none);
   border-radius: 2px;
   color: $color-dark-gray;
   cursor: pointer;
   display: block;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 1px;
-  line-height: 11px;
-  padding: 11px 0 9px 0;
+  padding: 11px 0 10px 0;
   text-align: center;
   text-decoration: none;
   text-rendering: geometricPrecision;
   text-transform: uppercase;
-  -webkit-transition: all 0.3s linear;
-      -ms-transition: all 0.3s linear;
-          transition: all 0.3s linear;
+  @include transition(all 0.3s linear);
   vertical-align: middle;
   white-space: nowrap;
 }
-.trunk-nav > li > a {
-  border: 1px solid $color-haze;
-  padding: 11px 0 9px 0;
-}
-.trunk-user > li > a { padding: 9px 0 7px 0; }
+.trunk-nav > li > a { border: 1px solid $color-haze; }
+.trunk-user > li > a { padding: 9px 0 8px 0; }
 .trunk-nav > li > a:hover,
 .trunk-nav > li > a:active,
 .trunk-nav > li > a.active,
@@ -118,7 +110,7 @@
 }
 .trunk-user > li.trunk-user-placeholder > i {
   font-size: 26px;
-  line-height: 44px;
+  line-height: 42px;
 }
 
 /* # Colors
@@ -171,7 +163,8 @@ only screen and (                min-resolution: 192dpi),
 only screen and (                min-resolution: 2dppx) {
   .trunk,
   .trunk-nav > li.title,
-  .trunk-nav > li.divider { border-width: 0.5px; }
+  .trunk-nav > li.divider,
+  .trunk-nav > li > a { border-width: 0.5px; }
   .trunk-nav > li.title,
   .trunk-nav > li > a,
   .trunk-user > li > a { letter-spacing: 0.5px; }

data/vendor/assets/stylesheets/_typeahead.scss

@@ -11,9 +11,7 @@
 .typeahead.dropdown-menu {
   display: none;
   opacity: 1;
-  -webkit-transition: none;
-      -ms-transition: none;
-          transition: none;
+  @include transition(none);
   visibility: visible;
 }
 .typeahead.dropdown-menu > li > a > b { color: $color-primary; }