active_frontend 6.6.2 → 7.0.0

data/vendor/assets/stylesheets/_form.scss

@@ -11,8 +11,8 @@
 fieldset { border: 0; }
 legend {
   border: 0;
-  border-bottom: 1px solid rgba(230,237,242,1);
-  color: rgba(85,94,113,1);
+  border-bottom: 1px solid $color-haze;
+  color: $color-gray-dark;
   display: block;
   font-size: 16px;
   font-weight: bold;
@@ -24,7 +24,7 @@ legend {
   width: 100%;
 }
 label {
-  color: rgba(35,41,55,1);
+  color: $color-black;
   display: block;
   font-size: 13px;
   font-weight: bold;
@@ -50,11 +50,11 @@ input[type="color"],
 .form-select > select {
   -webkit-appearance: none;
   appearance: none;
-  background: rgba(255,255,255,1);
-  border: 1px solid rgba(230,237,242,1);
+  background: $color-white;
+  border: 1px solid $color-haze;
   border-radius: 0;
   box-sizing: border-box;
-  color: rgba(35,41,55,1);
+  color: $color-black;
   display: block;
   font-size: 16px;
   font-style: normal;
@@ -91,7 +91,7 @@ input[type="search"]:focus,
 input[type="tel"]:focus,
 input[type="color"]:focus,
 .uneditable-input:focus {
-  border-color: rgba(0,102,255,1);
+  border-color: $color-blue;
   outline: 0;
   outline: thin dotted \9;
   -webkit-transition: background 150ms linear;
@@ -133,34 +133,34 @@ select.datetime {
 }
 input:-moz-placeholder,
 textarea:-moz-placeholder {
-  color: rgba(136,153,166,1);
+  color: $color-gray;
   font-weight: 200;
 }
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
-  color: rgba(136,153,166,1);
+  color: $color-gray;
   font-weight: 200;
 }
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
-  color: rgba(136,153,166,1);
+  color: $color-gray;
   font-weight: 200;
 }
 input:focus:invalid,
 textarea:focus:invalid,
 select:focus:invalid {
-  border-color: rgba(240,35,17,1);
-  color: rgba(240,35,17,1);
+  border-color: $color-red;
+  color: $color-red;
 }
 input:focus:invalid:focus,
 textarea:focus:invalid:focus,
-select:focus:invalid:focus { border-color: rgba(240,35,17,1); }
+select:focus:invalid:focus { border-color: $color-red; }
 input[disabled],
 textarea[disabled],
 select[disabled],
 .uneditable-input {
-  background: rgba(245,248,250,1);
-  color: rgba(136,153,166,1) !important;
+  background: $color-haze-light;
+  color: $color-gray !important;
   cursor: not-allowed;
 }
 .uneditable-input { font-weight: normal; }
@@ -173,7 +173,7 @@ select.form-input-initial-width {
 /* # Components
 ================================================== */
 .form-header {
-  border-bottom: 1px solid rgba(230,237,242,1);
+  border-bottom: 1px solid $color-haze;
   margin-bottom: 30px;
   padding-bottom: 5px;
 }
@@ -184,17 +184,17 @@ select.form-input-initial-width {
 .form-header > h5,
 .form-header > h6 { margin-bottom: 0; }
 .form-error-messages {
-  background: rgba(255,255,255,1);
+  background: $color-white;
   margin-bottom: 40px;
 }
 .form-error-messages > h4 {
-  background: rgba(245,248,250,1);
-  border: 1px solid rgba(230,237,242,1);
+  background: $color-haze-light;
+  border: 1px solid $color-haze;
   margin: 0;
   padding: 5px 10px;
 }
 .form-error-messages > ul {
-  border: 1px solid rgba(230,237,242,1);
+  border: 1px solid $color-haze;
   border-top: 0;
 }
 .form-error-messages > ul > li {
@@ -241,9 +241,9 @@ select.form-input-initial-width {
   vertical-align: middle;
 }
 .form-input-group-addon {
-  background: rgba(245,248,250,1);
-  border: 1px solid rgba(230,237,242,1);
-  color: rgba(136,153,166,1);
+  background: $color-haze-light;
+  border: 1px solid $color-haze;
+  color: $color-gray;
   font-size: 16px;
   font-style: normal;
   font-weight: normal;
@@ -251,7 +251,7 @@ select.form-input-initial-width {
 }
 .form-file-group-addon { padding: 0; }
 .form-file-group-button {
-  border-color: rgba(230,237,242,1);
+  border-color: $color-haze;
   margin-right: -1px;
   padding-bottom: 14px;
   padding-top: 14px;
@@ -276,7 +276,7 @@ select.form-input-initial-width {
   padding-top: 14px;
 }
 .form-help-block {
-  color: rgba(136,153,166,1);
+  color: $color-gray;
   display: block;
   font-size: 12px;
   margin-bottom: 15px;
@@ -294,7 +294,7 @@ select.form-input-initial-width {
   position: absolute;
 }
 .form-select::after {
-  color: rgba(35,41,55,1);
+  color: $color-black;
   content: "\f3d0";
   font-family: "Ionicons";
   font-size: 18px;
@@ -307,8 +307,8 @@ select.form-input-initial-width {
   top: 50%;
 }
 .form-select::before {
-  background: rgba(255,255,255,0);
-  border: 1px solid rgba(230,237,242,1);
+  background: rgba(0,0,0,0);
+  border: 1px solid $color-haze;
   border-left: 0;
   bottom: 0;
   right: 0;
@@ -321,11 +321,13 @@ select.form-input-initial-width {
   text-overflow: '';
 }
 .form-select > select[disabled] {
-  background: rgba(245,248,250,1);
-  color: rgba(136,153,166,1);
+  background: $color-haze-light;
+  color: $color-gray;
 }
 .form-footer {
-  border-top: 1px solid rgba(230,237,242,1);
+  border-top: 1px solid $color-haze;
+  font-size: 12px !important;
+  line-height: 20px !important;
   margin-top: 30px;
   padding: 20px 0 0 0;
 }
@@ -365,7 +367,6 @@ select.form-input-initial-width {
   padding-bottom: 6px;
   padding-top: 8px;
 }
-
 .form-inline.form-inline-alt > input[type="submit"],
 .form-inline.form-inline-alt > input[type="reset"],
 .form-inline.form-inline-alt > input[type="button"] {

data/vendor/assets/stylesheets/_header.scss

@@ -15,8 +15,8 @@
   z-index: 1030;
 }
 .header {
-  background: rgba(255,255,255,1);
-  border-bottom: 2px solid rgba(245,248,250,1);
+  background: $color-white;
+  border-bottom: 2px solid $color-haze-light;
   box-sizing: border-box;
   height: 65px;
   padding: 15px 0;
@@ -25,7 +25,7 @@
 .header-app { width: calc(100% - 280px); }
 .header-brand { float: left; }
 .header-brand > a {
-  color: $primary-color;
+  color: $color-primary;
   font-size: 30px;
   line-height: 40px;
   text-decoration: none;
@@ -43,7 +43,7 @@
 .header-nav,
 .header-nav-alt,
 .header-toolchain {
-  color: rgba(35,41,55,1);
+  color: $color-black;
   list-style-type: none;
   padding: 0;
 }
@@ -60,7 +60,7 @@
 .header-toolchain > li { float: left; }
 .header-nav > li,
 .header-nav-alt > li {
-  color: rgba(35,41,55,1);
+  color: $color-black;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 1px;
@@ -68,7 +68,7 @@
   margin-left: 15px;
   text-transform: uppercase;
 }
-.header-nav > li { margin-right: 25px; }
+.header-nav > li { margin-right: 20px; }
 .header-toolchain > li { margin-left: 15px; }
 .header-nav > li:last-child,
 .header-toolchain > li:first-child { margin: 0; }
@@ -82,7 +82,7 @@
 .header-nav > li > a,
 .header-nav-alt > li > a,
 .header-toolchain > li > a {
-  color: rgba(35,41,55,1);
+  color: $color-black;
   text-decoration: none;
 }
 .header-nav-alt > li > a { padding: 15px 0 14px 0; }
@@ -101,27 +101,26 @@
 .header-toolchain > li > a:hover,
 .header-toolchain > li > a.active,
 .header-toolchain > li > a:active,
-.header-toolchain > li > a:focus { color: $primary-color; }
+.header-toolchain > li > a:focus { color: $color-primary; }
 .header-nav-alt > li.inverse > a {
-  background: $primary-color;
-  border: 1px solid $primary-color;
-  border-radius: 2px;
+  background: $color-primary;
+  border: 1px solid $color-primary;
+  border-radius: 3px;
   box-sizing: border-box;
-  color: rgba(255,255,255,1);
+  color: $color-white;
   padding-left: 20px;
   padding-right: 20px;
 }
 .header-nav-alt > li.inverse.outline > a {
   background: transparent;
-  color: $primary-color;
+  color: $color-primary;
 }
 .header-nav-alt > li.inverse > a:hover,
 .header-nav-alt > li.inverse > a.active,
 .header-nav-alt > li.inverse > a:active,
 .header-nav-alt > li.inverse > a:focus {
-  background: rgba(35,41,55,1);
-  border-color: rgba(35,41,55,1);
-  color: rgba(255,255,255,1);
+  background: $color-primary;
+  color: $color-white;
 }
 .header-user {
   float: right;
@@ -129,18 +128,18 @@
   margin: 0 0 0 20px;
 }
 .header-user > a {
-  color: rgba(35,41,55,1);
+  color: $color-black;
   text-decoration: none;
 }
 .header-user > a:hover,
 .header-user > a.active,
 .header-user > a:active,
-.header-user > a:focus { color: $primary-color; }
+.header-user > a:focus { color: $color-primary; }
 .header-user > a > img,
 .header-user-placeholder {
-  background: rgba(85,94,113,1);
+  background: $color-gray-dark;
   border-radius: 500px;
-  color: rgba(255,255,255,1);
+  color: $color-white;
   display: inline-block;
   height: 36px;
   margin: 0;
@@ -155,7 +154,7 @@
 }
 .header-user > ul.dropdown-menu { margin: -5px 10px 0 0; }
 .header-toggle > a {
-  color: $primary-color;
+  color: $color-primary;
   float: right;
   font-size: 40px;
   padding: 4px 0px 3px 14px;
@@ -166,8 +165,8 @@
 ================================================== */
 .header-dark,
 .header-primary { border-color: rgba(0,0,0,0.2); }
-.header-dark { background: rgba(35,41,55,1); }
-.header-primary { background: $primary-color; }
+.header-dark { background: $color-black; }
+.header-primary { background: $color-primary; }
 .header-dark .header-nav > li > a,
 .header-dark .header-nav-alt > li > a,
 .header-dark .header-nav-alt > li.inverse > a:hover,
@@ -175,7 +174,7 @@
 .header-dark .header-nav-alt > li.inverse > a:active,
 .header-dark .header-nav-alt > li.inverse > a:focus,
 .header-dark .header-toolchain > li > a,
-.header-dark .header-user > a { color: rgba(136,153,166,1); }
+.header-dark .header-user > a { color: $color-gray; }
 .header-primary .header-nav > li > a,
 .header-primary .header-nav-alt > li > a,
 .header-primary .header-nav-alt > li.inverse > a:hover,
@@ -183,7 +182,7 @@
 .header-primary .header-nav-alt > li.inverse > a:active,
 .header-primary .header-nav-alt > li.inverse > a:focus,
 .header-primary .header-toolchain > li > a,
-.header-primary .header-user > a { color: rgba(255,255,255,1); }
+.header-primary .header-user > a { color: $color-white; }
 .header-dark .header-brand > a,
 .header-primary .header-brand > a,
 .header-dark .header-nav > li > a:hover,
@@ -206,7 +205,7 @@
 .header-dark .header-user > img,
 .header-dark .header-user-placeholder,
 .header-dark .header-toggle > a,
-.header-primary .header-toggle > a { color: rgba(255,255,255,1) }
+.header-primary .header-toggle > a { color: $color-white }
 .header-primary .header-nav > li > a:hover,
 .header-primary .header-nav > li > a.active,
 .header-primary .header-nav > li > a:active,
@@ -225,35 +224,35 @@
 .header-primary .header-user > a:active,
 .header-primary .header-user > a:focus,
 .header-primary .header-user > img,
-.header-primary .header-user-placeholder { color: rgba(35,41,55,1) }
+.header-primary .header-user-placeholder { color: $color-black }
 .header-dark .header-nav-alt > li.inverse > a,
 .header-primary .header-nav-alt > li.inverse > a {
  background: transparent;
- border-color: rgba(255,255,255,1);
+ border-color: $color-white;
 }
-.header-primary .header-nav-alt > li.inverse > a { color:rgba(255,255,255,1); }
+.header-primary .header-nav-alt > li.inverse > a { color:$color-white; }
 .header-dark .header-nav-alt > li.inverse > a:hover,
 .header-dark .header-nav-alt > li.inverse > a.active,
 .header-dark .header-nav-alt > li.inverse > a:active,
-.header-dark .header-nav-alt > li.inverse > a:focus { border-color: rgba(136,153,166,1); }
+.header-dark .header-nav-alt > li.inverse > a:focus { border-color: $color-gray; }
 .header-primary .header-nav-alt > li.inverse > a:hover,
 .header-primary .header-nav-alt > li.inverse > a.active,
 .header-primary .header-nav-alt > li.inverse > a:active,
 .header-primary .header-nav-alt > li.inverse > a:focus {
-  border-color: rgba(35,41,55,1);
-  color: rgba(35,41,55,1);
+  border-color: $color-black;
+  color: $color-black;
 }
 .header-dark .header-user > img,
-.header-dark .header-user-placeholder { background: rgba(136,153,166,1); }
+.header-dark .header-user-placeholder { background: $color-gray; }
 .header-light {
-  background: rgba(245,248,250,1);
-  border-color: rgba(225,232,237,1);
+  background: $color-haze-light;
+  border-color: $color-haze-dark;
 }
 
 /* # Styles
 ================================================== */
 .header-borderless { border-bottom-color: transparent !important; }
-.header-border-alt { border-bottom-color: $primary-color !important; }
+.header-border-alt { border-bottom-color: $color-primary !important; }
 
 /* # Media Queries
 ================================================== */
@@ -268,7 +267,7 @@
 }
 @media only screen and (max-width: 767px) {
   .header {
-    border-color: rgba(230,237,242,1);
+    border-color: $color-haze;
     height: 50px;
     padding: 0;
   }
@@ -280,8 +279,8 @@
   .header-dark,
   .header-primary,
   .header-primary-phone { border-color: rgba(0,0,0,0.2); }
-  .header-light { border-color: rgba(225,232,237,1); }
-  .header-primary-phone { background: $primary-color; }
+  .header-light { border-color: $color-haze-dark; }
+  .header-primary-phone { background: $color-primary; }
   .header-primary-phone .header-brand > a,
-  .header-primary-phone .header-toggle > a { color: rgba(255,255,255,1); }
+  .header-primary-phone .header-toggle > a { color: $color-white; }
 }

data/vendor/assets/stylesheets/_label_and_badge.scss

@@ -6,10 +6,10 @@
 ================================================== */
 .badge,
 .label {
-  background: rgba(240,243,245,1);
-  border: 1px solid rgba(240,243,245,1);
+  background: $color-haze;
+  border: 1px solid $color-haze;
   border-radius: 2px;
-  color: rgba(35,41,55,1);
+  color: $color-black;
   display: inline-block;
   padding: 6px;
   font-size: 12px;
@@ -41,72 +41,72 @@
 .badge-white,
 .label-white,
 .badge-yellow,
-.label-yellow { color: rgba(255,255,255,1); }
+.label-yellow { color: $color-white; }
 .badge-black,
 .label-black {
-  background: rgba(35,41,55,1);
-  border-color: rgba(35,41,55,1);
+  background: $color-black;
+  border-color: $color-black;
 }
 .badge-blue,
 .label-blue {
-  background: rgba(0,102,255,1);
-  border-color: rgba(0,102,255,1);
+  background: $color-blue;
+  border-color: $color-blue;
 }
 .badge-green,
 .label-green {
-  background: rgba(0,200,0,1);
-  border-color: rgba(0,200,0,1);
+  background: $color-green;
+  border-color: $color-green;
 }
 .badge-orange,
 .label-orange {
-  background: rgba(255,82,0,1);
-  border-color: rgba(255,82,0,1);
+  background: $color-orange;
+  border-color: $color-orange;
 }
 .badge-purple,
 .label-purple {
-  background: rgba(128,0,255,1);
-  border-color: rgba(128,0,255,1);
+  background: $color-purple;
+  border-color: $color-purple;
 }
 .badge-red,
 .label-red {
-  background: rgba(240,35,17,1);
-  border-color: rgba(240,35,17,1);
+  background: $color-red;
+  border-color: $color-red;
 }
 .badge-smoke,
 .label-smoke {
-  background: rgba(85,94,113,1);
-  border-color: rgba(85,94,113,1);
+  background: $color-gray-dark;
+  border-color: $color-gray-dark;
 }
 .badge-white,
 .label-white {
-  background: rgba(255,255,255,1);
-  border-color: rgba(255,255,255,1);
+  background: $color-white;
+  border-color: $color-white;
 }
 .badge-yellow,
 .label-yellow {
-  background: rgba(255,245,0,1);
-  border-color: rgba(255,245,0,1);
+  background: $color-yellow;
+  border-color: $color-yellow;
 }
 .badge.badge-outline,
 .label.label-outline {
   background: transparent;
-  color: rgba(85,94,113,1);
+  color: $color-gray-dark;
 }
 .badge-black.badge-outline,
-.label-black.label-outline { color: rgba(35,41,55,1); }
+.label-black.label-outline { color: $color-black; }
 .badge-blue.badge-outline,
-.label-blue.label-outline { color: rgba(0,102,255,1); }
+.label-blue.label-outline { color: $color-blue; }
 .badge-green.badge-outline,
-.label-green.label-outline { color: rgba(0,200,0,1); }
+.label-green.label-outline { color: $color-green; }
 .badge-orange.badge-outline,
-.label-orange.label-outline { color: rgba(255,82,0,1); }
+.label-orange.label-outline { color: $color-orange; }
 .badge-purple.badge-outline,
-.label-purple.label-outline { color: rgba(128,0,255,1); }
+.label-purple.label-outline { color: $color-purple; }
 .badge-red.badge-outline,
-.label-red.label-outline { color: rgba(240,35,17,1); }
+.label-red.label-outline { color: $color-red; }
 .badge-smoke.badge-outline,
-.label-smoke.label-outline { color: rgba(85,94,113,1); }
+.label-smoke.label-outline { color: $color-gray-dark; }
 .badge-white.badge-outline,
-.label-white.label-outline { color: rgba(255,255,255,1); }
+.label-white.label-outline { color: $color-white; }
 .badge-yellow.badge-outline,
-.label-yellow.label-outline { color: rgba(255,245,0,1); }
+.label-yellow.label-outline { color: $color-yellow; }