active_frontend 10.3.0 → 11.0.0

data/vendor/assets/stylesheets/_loader.scss

@@ -1,32 +1,17 @@
 /* Table of Contents
 ==================================================
 # Keyframes
-# Loader
-# Media Queries */
+# Loader */
 
 /* # Keyframes
 ================================================== */
 @-webkit-keyframes loader-spinner {
-  0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  0% { @include transform(0); }
+  100% { @include transform(360deg); }
 }
 @keyframes loader-spinner {
-  0% {
-    -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  0% { @include transform(0); }
+  100% { @include transform(360deg); }
 }
 
 /* # Loader
@@ -37,6 +22,7 @@
   left: 0;
   pointer-events: none;
   position: fixed;
+  right: 0;
   top: 0;
   width: 100%;
   z-index: 9999;
@@ -54,9 +40,7 @@
   pointer-events: none;
   position: absolute;
   right: 0;
-  -webkit-transform: rotate(3deg) translate(0,-4px);
-      -ms-transform: rotate(3deg) translate(0,-4px);
-          transform: rotate(3deg) translate(0,-4px);
+  @include transform(rotate(3deg) translate(0, -4px));
   width: 100px;
 }
 .loader-spinner {
@@ -68,9 +52,7 @@
   z-index: 9999;
 }
 .loader-spinner-icon {
-  -webkit-animation: loader-spinner 400ms linear infinite;
-      -ms-animation: loader-spinner 400ms linear infinite;
-          animation: loader-spinner 400ms linear infinite;
+  @include animation(loader-spinner 400ms linear infinite);
   border: solid 2px $color-transparent;
   border-left-color: $color-primary;
   border-top-color: $color-primary;
@@ -79,13 +61,4 @@
   height: 18px;
   pointer-events: none;
   width: 18px;
-}
-
-/* # Media Queries
-================================================== */
-@media only screen and (max-width: 767px) {
-  .loader-backdrop {
-    height: 2px;
-    background: $color-transparent;
-  }
 }

data/vendor/assets/stylesheets/_mixin.scss

@@ -0,0 +1,90 @@
+/* Table of Contents
+==================================================
+# Mixin */
+
+/* # Mixin
+================================================== */
+@mixin animation($animation) {
+  -webkit-animation: $animation;
+      -ms-animation: $animation;
+          animation: $animation;
+}
+@mixin animation-delay($delay) {
+  -webkit-animation-delay: $delay;
+      -ms-animation-delay: $delay;
+          animation-delay: $delay;
+}
+@mixin animation-duration($duration) {
+  -webkit-animation-duration: $duration;
+      -ms-animation-duration: $duration;
+          animation-duration: $duration;
+}
+@mixin animation-fill-mode($mode) {
+  -webkit-animation-fill-mode: $mode;
+      -ms-animation-fill-mode: $mode;
+          animation-fill-mode: $mode;
+}
+@mixin animation-name($name) {
+  -webkit-animation-name: $name;
+      -ms-animation-name: $name;
+          animation-name: $name;
+}
+@mixin animation-timing-function($function) {
+  -webkit-animation-timing-function: $function;
+      -ms-animation-timing-function: $function;
+          animation-timing-function: $function;
+}
+@mixin appearance($appearance) {
+  -webkit-appearance: $appearance;
+      -ms-appearance: $appearance;
+          appearance: $appearance;
+}
+@mixin backface-visibility ($visibility) {
+  -webkit-backface-visibility: $visibility;
+      -ms-backface-visibility: $visibility;
+          backface-visibility: $visibility;
+}
+@mixin background-size($size) {
+  -webkit-background-size: $size;
+      -ms-background-size: $size;
+          background-size: $size;
+}
+@mixin dimensions($height, $width) {
+  height: $height;
+  width: $width;
+}
+@mixin overflow-scrolling($scroll) {
+  -webkit-overflow-scrolling: $scroll;
+      -ms-overflow-scrolling: $scroll;
+          overflow-scrolling: $scroll;
+}
+@mixin tap-highlight-color($color) {
+  -webkit-tap-highlight-color: $color;
+      -ms-tap-highlight-color: $color;
+          tap-highlight-color: $color;
+}
+@mixin text-size-adjust($size) {
+  -webkit-text-size-adjust: $size;
+      -ms-text-size-adjust: $size;
+          text-size-adjust: $size;
+}
+@mixin transform($transform) {
+  -webkit-transform: $transform;
+      -ms-transform: $transform;
+          transform: $transform;
+}
+@mixin transform-origin($origin) {
+  -webkit-transform-origin: $origin;
+      -ms-transform-origin: $origin;
+          transform-origin: $origin;
+}
+@mixin transition($transition) {
+  -webkit-transition: $transition;
+      -ms-transition: $transition;
+          transition: $transition;
+}
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+      -ms-user-select: $select;
+          user-select: $select;
+}

data/vendor/assets/stylesheets/_modal.scss

@@ -1,12 +1,13 @@
 /* Table of Contents
 ==================================================
 # Modal
+# Colors
 # Media Queries */
 
 /* # Modal
 ================================================== */
 .modal-backdrop {
-  background: rgba(35,41,55,0.9);
+  background: transparentize($color-black, 0.1);
   bottom: 0;
   height: 100%;
   left: 0;
@@ -28,7 +29,7 @@
   background: $color-white;
   background-clip: padding-box;
   border-radius: 3px;
-  box-shadow: 0 0 3px rgba(0,0,0,0.3);
+  box-shadow: 0 0 3px transparentize($color-dark-black, 0.7);
   display: none;
   left: 50%;
   margin-left: -280px;
@@ -39,62 +40,54 @@
   z-index: 1050;
 }
 .modal.fade {
-  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-      -ms-transition: opacity 0.3s linear, top 0.3s ease-out;
-          transition: opacity 0.3s linear, top 0.3s ease-out;
+  @include transition((opacity 0.2s linear, top 0.4s ease-in-out));
   top: -100%;
 }
 .modal.fade.in { top: 15%; }
 .modal-header {
-  background: $color-white;
   border-bottom: 1px solid $color-haze;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
-  padding: 22px 15px 20px 15px;
+  padding: 23px 15px 20px 15px;
 }
 .modal-header > h3 {
-  color: $color-black;
   font-size: 14px;
   letter-spacing: 1px;
-  line-height: 14px;
+  line-height: 1;
   margin: 0;
+  padding: 0;
   text-align: center;
   text-transform: uppercase;
 }
 .modal-body {
-  border-bottom: 1px solid $color-haze;
   max-height: 300px;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 15px 18px;
-  position: relative;
 }
 .modal-body .container { width: 100%; }
 .modal-body p:last-child { margin-bottom: 0; }
 .modal-footer {
+  border-top: 1px solid $color-haze;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
-  margin-bottom: 0;
-  padding: 0;
 }
 .modal-footer:after { clear: both; }
-.modal-footer-btn,
-button.modal-footer-btn,
-input.modal-footer-btn {
-  -webkit-appearance: none;
-      -ms-appearance: none;
-          appearance: none;
-  background: $color-white;
+.modal-footer-btn {
+  @include appearance(none);
+  background: $color-transparent;
   border: 0;
+  border-right: 1px solid $color-haze;
   box-sizing: border-box;
-  color: $color-black !important;
+  color: inherit;
   cursor: pointer;
   float: left;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   font-size: 11px;
   font-weight: bold;
-  line-height: 11px;
+  line-height: 1;
   margin: 0;
-  padding: 22px 0;
+  padding: 22px 0 23px 0;
   text-align: center;
   text-indent: 0;
   text-rendering: geometricPrecision;
@@ -103,27 +96,26 @@ input.modal-footer-btn {
   vertical-align: middle;
   width: 100%;
 }
-.modal-footer-btn:first-child,
-button.modal-footer-btn:first-child,
-input.modal-footer-btn:first-child { border-bottom-left-radius: 3px; }
-.modal-footer-btn:last-child,
-button.modal-footer-btn:last-child,
-input.modal-footer-btn:last-child { border-bottom-right-radius: 3px; }
-.modal-footer-btn[disabled],
-button.modal-footer-btn[disabled],
-input.modal-footer-btn[disabled] {
-  color: $color-gray !important;
+.modal-footer-btn:last-child { border-right: 0; }
+.modal-footer-btn[disabled] {
+  color: $color-gray;
   cursor: not-allowed;
 }
-.modal-footer-btn-group > .modal-footer-btn,
-.modal-footer-btn-group > button.modal-footer-btn,
-.modal-footer-btn-group > input.modal-footer-btn {
-  border-right: 1px solid $color-haze;
-  width: 50%;
+.modal-footer-btn-group > .modal-footer-btn { width: 50%; }
+
+/* # Colors
+================================================== */
+.modal-dark {
+  background: $color-black;
+  color: $color-white;
 }
-.modal-footer-btn-group > .modal-footer-btn:last-child,
-.modal-footer-btn-group > button.modal-footer-btn:last-child,
-.modal-footer-btn-group > input.modal-footer-btn:last-child { border-right: none; }
+.modal-light { background: $color-light-haze; }
+.modal-dark .modal-header,
+.modal-dark .modal-footer,
+.modal-dark .modal-footer-btn { border-color: $color-dark-black; }
+.modal-light .modal-header,
+.modal-light .modal-footer,
+.modal-light .modal-footer-btn { border-color: $color-dark-haze; }
 
 /* # Media Queries
 ================================================== */

data/vendor/assets/stylesheets/_nav_and_tab.scss

@@ -19,7 +19,7 @@
   display: block;
   font-size: 14px;
   font-weight: bold;
-  line-height: 14px;
+  line-height: 1;
 }
 .nav > li > a:hover,
 .nav > li > a:active,
@@ -52,7 +52,7 @@
 .nav-list > li > a {
   color: $color-dark-gray;
   font-weight: bold;
-  padding: 11px 15px;
+  padding: 13px 15px 11px 15px;
 }
 .nav-list > li > a:hover,
 .nav-list > li > a:focus { background: $color-haze; }
@@ -104,7 +104,7 @@
   border-radius: 2px;
   color: $color-dark-gray;
   margin-right: 3px;
-  padding: 9px 10px;
+  padding: 10px 10px 9px 10px;
 }
 .nav-pills > li > a:hover,
 .nav-pills > li > a:active,
@@ -121,8 +121,9 @@
 .nav-tabs.nav-stacked { border-bottom: 0; }
 .nav-tabs.nav-stacked > li > a {
   background: $color-light-haze;
+  border-bottom: 0;
   color: $color-dark-gray;
-  padding: 10px 10px 8px 10px;
+  padding: 12px 10px 10px 10px;
 }
 .nav-tabs.nav-stacked > li:first-child > a {
   border-top-right-radius: 2px;
@@ -133,22 +134,22 @@
   border-bottom-left-radius: 2px;
 }
 .nav-tabs.nav-stacked > li > a:hover,
-.nav-tabs.nav-stacked > li > a:active,
 .nav-tabs.nav-stacked > li > a:focus {
   background: $color-haze;
   z-index: 2;
 }
+.nav-tabs.nav-stacked > li > a:active,
 .nav-tabs.nav-stacked > .active > a {
   background: $color-primary;
-  border-bottom: 0;
   color: $color-white;
-  padding: 10px;
 }
 .nav-pills.nav-stacked > li > a {
   margin-bottom: 3px;
-  padding: 10px;
+  padding: 12px 10px 10px 10px;
 }
 .nav-pills.nav-stacked > li:last-child > a { margin-bottom: 0; }
+.nav-tabs .dropdown-toggle,
+.nav-pills .dropdown-toggle { margin-bottom: -1px; }
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
 .nav > li.dropdown.open.active > a:hover,

data/vendor/assets/stylesheets/_navbar.scss

@@ -6,29 +6,29 @@
 
 /* # Navbar
 ================================================== */
-.navbar-fixed {
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  z-index: 1030;
-}
 .navbar {
   background: $color-white;
   border-collapse: separate;
   border-top: 1px solid $color-haze;
   box-sizing: border-box;
   display: table;
-  height: 48px;
+  height: 50px;
   table-layout: fixed;
   width: 100%;
 }
+.navbar-fixed {
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  z-index: 1030;
+}
 .navbar > a {
-  color: $color-dark-gray;
+  color: $color-gray;
   display: table-cell;
   float: none;
   font-size: 27px;
-  padding: 10px 0;
+  padding-top: 10px;
   text-align: center;
   width: 1%;
 }
@@ -36,6 +36,14 @@
 .navbar > a.active,
 .navbar > a:active,
 .navbar > a:focus { color: $color-primary; }
+.navbar > a.filled {
+  background: $color-primary;
+  color: $color-white;
+}
+.navbar > a.filled:hover,
+.navbar > a.filled.active,
+.navbar > a.filled:active,
+.navbar > a.filled:focus { background: darken($color-primary, 5%); }
 
 /* # Colors
 ================================================== */
@@ -43,7 +51,6 @@
   background: $color-black;
   border-color: $color-dark-black;
 }
-.navbar-dark > a { color: $color-white; }
 .navbar-light {
   background: $color-light-haze;
   border-color: $color-dark-haze;

data/vendor/assets/stylesheets/_pagination.scss

@@ -1,6 +1,8 @@
 /* Table of Contents
 ==================================================
-# Pagination */
+# Pagination
+# Alignments
+# Colors */
 
 /* # Pagination
 ================================================== */
@@ -12,12 +14,13 @@
 .pagination > ul > li {
   display: inline-block;
   font-size: 14px;
+  font-weight: normal;
   line-height: 14px;
   margin-right: 2px;
 }
 .pagination > ul > li > a,
 .pagination > ul > li.active {
-  background: $color-light-haze;
+  background: $color-white;
   border-radius: 500px;
   color: $color-black;
   display: inline-block;
@@ -25,7 +28,7 @@
   text-align: center;
   text-decoration: none;
 }
-.pagination > ul > li > a { padding: 10px 12px 8px 12px; }
+.pagination > ul > li > a,
 .pagination > ul > li.active { padding: 10px 12px 8px 12px; }
 .pagination > ul > li > a:active,
 .pagination > ul > li.active {
@@ -33,10 +36,34 @@
   color: $color-white;
 }
 .pagination > ul > li > a:hover,
-.pagination > ul > li > a:focus { background: $color-haze; }
+.pagination > ul > li > a:focus { background: $color-light-haze; }
 .pagination > ul > li.pagination-icon > a { padding: 9px 10px 7px 10px; }
 .pagination > ul > li.pagination-icon:first-child > a { padding-right: 13px; }
 .pagination > ul > li.pagination-icon:last-child > a { padding-left: 13px; }
-.pagination-centered { text-align: center; }
+
+/* # Alignments
+================================================== */
+.pagination-center { text-align: center; }
 .pagination-right { text-align: right; }
-.pagination-left { text-align: left; }
+.pagination-left { text-align: left; }
+
+/* # Colors
+================================================== */
+.pagination-dark > ul > li > a,
+.pagination-dark > ul > li.active {
+  background: $color-black;
+  color: $color-white;
+}
+.pagination-light > ul > li > a,
+.pagination-light > ul > li.active { background: $color-light-haze; }
+.pagination-dark > ul > li > a:active,
+.pagination-dark > ul > li.active,
+.pagination-light > ul > li > a:active,
+.pagination-light > ul > li.active {
+  background: $color-primary;
+  color: $color-white;
+}
+.pagination-dark > ul > li > a:hover,
+.pagination-dark > ul > li > a:focus { background: $color-light-black; }
+.pagination-light > ul > li > a:hover,
+.pagination-light > ul > li > a:focus { background: $color-haze; }