active_frontend 2.1.0 → 3.0.0

data/vendor/assets/stylesheets/form.scss

@@ -9,20 +9,22 @@
 fieldset { border: 0; }
 legend {
   border: 0;
-  border-bottom: 1px solid rgba(230,237,242,1);
-  color: rgba(43,50,53,1);
+  border-bottom: 1px solid rgba(243,243,243,1);
+  color: rgba(34,34,34,1);
   display: block;
   font-size: 16px;
   font-weight: bold;
+  letter-spacing: 1px;
   line-height: 25px;
   margin-bottom: 20px;
   padding: 0;
+  text-transform: uppercase;
   width: 100%;
 }
 label {
-  color: rgba(43,50,53,1);
+  color: rgba(34,34,34,1);
   display: block;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: bold;
   margin: 5px 0 5px 0;
 }
@@ -45,18 +47,18 @@ input[type="color"],
   -webkit-appearance: none;
   -moz-appearance: none;
   background: rgba(255,255,255,1);
-  border: 1px solid rgba(230,237,242,1);
+  border: 1px solid rgba(243,243,243,1);
   border-radius: 0;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  color: rgba(43,50,53,1);
+  color: rgba(34,34,34,1);
   display: block;
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
   line-height: 1;
   margin-bottom: 5px;
-  padding: 13px 0 10px 0;
+  padding: 12px 0 11px 0;
   text-indent: 10px;
   -webkit-transition: border linear 0.2s;
   transition: border linear 0.2s;
@@ -83,7 +85,7 @@ input[type="search"]:focus,
 input[type="tel"]:focus,
 input[type="color"]:focus,
 .uneditable-input:focus {
-  border-color: rgba(0,132,255,1);
+  border-color: rgba(27,192,109,1);
   outline: 0;
   outline: thin dotted \9;
   -webkit-transition: background 150ms linear;
@@ -106,11 +108,11 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
   background: rgba(255,255,255,1);
-  border: 1px solid rgba(230,237,242,1);
+  border: 1px solid rgba(243,243,243,1);
   border-radius: 0;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  color: rgba(43,50,53,1);
+  color: rgba(34,34,34,1);
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
@@ -122,10 +124,7 @@ select {
   width: 100%;
   vertical-align: middle;
 }
-select[multiple] {
-  border-radius: 2px;
-  padding-left: 10px;
-}
+select[multiple] { padding-left: 10px; }
 select[multiple],
 select[size] { height: auto; }
 select:focus,
@@ -143,34 +142,34 @@ select.datetime {
 }
 input:-moz-placeholder,
 textarea:-moz-placeholder {
-  color: rgba(136,153,166,1);
+  color: rgba(200,200,200,1);
   font-weight: 200;
 }
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
-  color: rgba(136,153,166,1);
+  color: rgba(200,200,200,1);
   font-weight: 200;
 }
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
-  color: rgba(136,153,166,1);
+  color: rgba(200,200,200,1);
   font-weight: 200;
 }
 input:focus:invalid,
 textarea:focus:invalid,
 select:focus:invalid {
-  border-color: rgba(255,59,48,1);
-  color: rgba(255,59,48,1);
+  border-color: rgba(225,80,80,1);
+  color: rgba(225,80,80,1);
 }
 input:focus:invalid:focus,
 textarea:focus:invalid:focus,
-select:focus:invalid:focus { border-color: rgba(255,59,48,1); }
+select:focus:invalid:focus { border-color: rgba(225,80,80,1); }
 input[disabled],
 textarea[disabled],
 select[disabled],
 .uneditable-input {
-  background: rgba(245,248,250,1);
-  color: rgba(136,153,166,1) !important;
+  background: rgba(249,249,249,1);
+  color: rgba(200,200,200,1) !important;
   cursor: not-allowed;
 }
 .uneditable-input { font-weight: normal; }
@@ -183,7 +182,7 @@ select.form-input-initial-width {
 /* # Components
 ================================================== */
 .form-header {
-  border-bottom: 1px solid rgba(230,237,242,1);
+  border-bottom: 1px solid rgba(243,243,243,1);
   margin-bottom: 30px;
   padding-bottom: 5px;
 }
@@ -195,15 +194,15 @@ select.form-input-initial-width {
 .form-header h6 { margin-bottom: 0; }
 .form-error-messages { margin-bottom: 40px; }
 .form-error-messages h4 {
-  background: rgba(245,248,250,1);
-  border: 1px solid rgba(230,237,242,1);
+  background: rgba(249,249,249,1);
+  border: 1px solid rgba(243,243,243,1);
   margin: 0;
   padding: 5px 10px;
 }
 .form-error-messages ul {
-  border-bottom: 1px solid rgba(230,237,242,1);
-  border-right: 1px solid rgba(230,237,242,1);
-  border-left: 1px solid rgba(230,237,242,1);
+  border-bottom: 1px solid rgba(243,243,243,1);
+  border-right: 1px solid rgba(243,243,243,1);
+  border-left: 1px solid rgba(243,243,243,1);
 }
 .form-error-messages li {
   display: block;
@@ -240,11 +239,11 @@ select.form-input-initial-width {
 .form-input-group input,
 .form-file-group input { margin: 0; }
 .form-input-group-addon {
-  background: rgba(245,248,250,1);
-  border: 1px solid rgba(230,237,242,1);
+  background: rgba(249,249,249,1);
+  border: 1px solid rgba(243,243,243,1);
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  color: rgba(136,153,166,1);
+  color: rgba(200,200,200,1);
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
@@ -266,24 +265,17 @@ select.form-input-initial-width {
   vertical-align: middle;
 }
 .form-file-group-button {
-  border-color: rgba(230,237,242,1);
-  padding-bottom: 12px;
-  padding-top: 12px;
-}
-.form-file-group-addon:first-child .form-file-group-button {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-.form-file-group-addon:last-child .form-file-group-button  {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-color: rgba(243,243,243,1);
+  margin-right: -1px;
+  padding-bottom: 13px;
+  padding-top: 13px;
 }
 .form-input-group-addon:first-child,
 .form-file-group-addon:first-child,
-.form-file-group-addon:first-child .form-file-group-button { border-right: 0; }
+.form-file-group-addon:first-child .form-file-group-button { border-width-right: 1px; }
 .form-input-group-addon:last-child,
 .form-file-group-addon:last-child,
-.form-file-group-addon:last-child .form-file-group-button { border-left: 0; }
+.form-file-group-addon:last-child .form-file-group-button { border-width-left: 1px; }
 .form-input-group-addon input[type="radio"],
 .form-input-group-addon input[type="checkbox"] { margin: 0; }
 .form-input-inline {
@@ -295,16 +287,16 @@ select.form-input-initial-width {
 .form-button-inline {
   margin: 0;
   padding-bottom: 13px;
-  padding-top: 11px;
+  padding-top: 13px;
 }
 .form-help-block {
-  color: rgba(136,153,166,1);
+  color: rgba(200,200,200,1);
   display: block;
   font-size: 12px;
   margin-bottom: 15px;
 }
 .form-footer {
-  border-top: 1px solid rgba(230,237,242,1);
+  border-top: 1px solid rgba(243,243,243,1);
   margin-top: 30px;
   padding: 20px 0 0 0;
 }

data/vendor/assets/stylesheets/header.scss

@@ -1,7 +1,7 @@
 /* Table of Contents
 ==================================================
 # Header
-# Application
+# Alternate
 # Media Queries */
 
 /* # Header
@@ -14,185 +14,191 @@
   z-index: 1030;
 }
 .header {
-  background: rgba(255,255,255,1);
-  border-bottom: 1px solid rgba(225,232,237,1);
-  box-shadow: 0 1px 3px rgba(225,232,237,1);
+  background: rgba(24,24,24,1);
   box-sizing: border-box;
-  height: 80px;
-  padding: 0 10px;
+  height: 65px;
+  padding: 15px 0;
   width: 100%;
 }
+.header-brand { float: left; }
 .header-brand > a {
-  color: rgba(0,132,255,1);
-  float: left;
-  font-size: 44px;
-  line-height: 88px;
+  color: rgba(255,255,255,1);
+  font-size: 30px;
+  line-height: 40px;
   text-decoration: none;
 }
 .header-brand > a > img {
   border-radius: 0;
-  height: 80px;
+  height: 30px;
 }
-.header-trunk {
+.header-search {
+  float: left;
+  margin: -3px 0 0 20px;
+  width: 280px;
+}
+.header-search > input { margin: 0; }
+.header-nav {
   float: left;
   list-style-type: none;
-  margin: 0 0 0 20px;
+  margin: 9px 0 0 20px;
   padding: 0;
 }
-.header-trunk > li { float: left; }
-.header-trunk > li.btn-group a { border-radius: 0; }
-.header-trunk > li.btn-group + li.btn-group { margin: 0; }
-.header-trunk > li > a {
-  background: rgba(255,255,255,1);
-  border-radius: 0;
-  border-right: 1px solid rgba(230,237,242,1);
-  box-sizing: border-box;
-  color: rgba(102,117,127,1);
-  display: block;
-  font-size: 13px;
+.header-nav > li {
+  float: left;
+  margin-right: 25px;
+}
+.header-nav > li:last-child { margin: 0; }
+.header-nav > li.btn-group + li.btn-group { margin-left: 0; }
+.header-nav > li > a {
+  color: rgba(102,102,102,1);
+  font-size: 12px;
   font-weight: 500;
-  line-height: 13px;
   letter-spacing: 1px;
-  overflow: hidden;
-  padding: 33px 15px 32px 15px;
-  text-align: center;
+  line-height: 12px;
   text-decoration: none;
   text-transform: uppercase;
-  text-overflow: ellipsis;
-  vertical-align: middle;
-  white-space: nowrap;
-  width: 220px;
-}
-.header-trunk > li:first-child > a { border-left: 1px solid rgba(230,237,242,1); }
-.header-trunk > li > a > .badge,
-.header-trunk > li > a > .label {
-  display: inline-block;
-  font-size: 10px;
-  letter-spacing: 0;
-  line-height: 10px;
-  min-width: 10px;
-  padding: 4px;
-  text-transform: none;
-  vertical-align: middle;
-}
-.header-trunk > li.header-trunk-navicon a {
-  font-size: 32px;
-  line-height: 32px;
-  padding: 24px 10px 20px 10px;
-  width: 74px;
-}
-.header-trunk > li > ul.dropdown-menu {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  box-shadow: 0 1px 2px rgba(225,232,237,1);
-  margin: 0 0 0 -1px;
-  padding: 10px 0;
-  width: calc(100% + 1px);
-}
-.header-trunk > li > ul.dropdown-menu > li.divider { margin: 14px 0 10px 0; }
-.header-trunk > li > ul.dropdown-menu > li > a > i {
-  display: inline-block;
-  text-align: center;
-  width: 12px;
-}
-.header-trunk > li .badge,
-.header-trunk > li .label { margin: -8px 0 -6px 0; }
-.header-search {
-  float: left;
-  margin: 19px 0 0 20px;
-  width: 280px;
 }
-.header-search > input { margin: 0; }
-.header-nav {
+.header-nav > li > a.active,
+.header-nav > li > a:active,
+.header-nav > li > a:hover,
+.header-nav > li > a:focus { color: rgba(255,255,255,1); }
+.header-nav-alt {
   float: right;
   list-style-type: none;
-  margin: 26px 0 10px 0;
+  margin: 4px 0 0 0;
   padding: 0;
 }
-.header-nav > li {
-  color: rgba(43,50,53,1);
+.header-nav-alt > li {
+  color: rgba(255,255,255,1);
   display: inline-block;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
+  letter-spacing: 1px;
+  line-height: 12px;
   margin-left: 15px;
-  line-height: 13px;
+  text-transform: uppercase;
 }
-.header-nav > li:first-child { margin-left: 0; }
-.header-nav > li > a {
-  border: 1px solid transparent;
-  border-radius: 2px;
-  color: rgba(102,117,127,1);
+.header-nav-alt > li:first-child { margin-left: 0; }
+.header-nav-alt > li > a {
+  border: 2px solid transparent;
+  color: rgba(255,255,255,1);
   letter-spacing: 1px;
-  padding: 14px 0 13px 0;
-  text-decoration: none;
+  padding: 11px 0 9px 0;
   text-transform: uppercase;
 }
-.header-nav > li.bordered > a {
-  border-color: rgba(230,237,242,1);
-  padding-right: 20px;
+.header-nav-alt > li > a.active,
+.header-nav-alt > li > a:active,
+.header-nav-alt > li > a:hover,
+.header-nav-alt > li > a:focus { color: rgba(102,102,102,1); }
+.header-nav-alt > li.inverse > a {
+  background: rgba(255,255,255,1);
+  border-color: rgba(230,230,230,1);
+  color: rgba(34,34,34,1);
   padding-left: 20px;
+  padding-right: 20px;
 }
+.header-nav-alt > li.inverse > a:hover { border-color: rgba(150,150,150,1); }
+.header-toolchain {
+  float: right;
+  list-style-type: none;
+  margin: 2px 25px 0 0;
+  padding: 0;
+}
+.header-toolchain > li {
+  float: left;
+  margin-left: 15px;
+}
+.header-toolchain > li:first-child { margin: 0; }
+.header-toolchain > li.btn-group + li.btn-group { margin-left: 0; }
+.header-toolchain > li > a {
+  color: rgba(102,102,102,1);
+  font-size: 30px;
+  line-height: 30px;
+  text-decoration: none;
+}
+.header-toolchain > li > a.active,
+.header-toolchain > li > a:active,
+.header-toolchain > li > a:hover,
+.header-toolchain > li > a:focus { color: rgba(255,255,255,1); }
 .header-user {
   float: right;
   font-size: 13px;
-  margin: 19px 0 0 15px;
+  margin: -1px 0 0 20px;
 }
 .header-user > a {
-  color: rgba(102,117,127,1);
+  color: rgba(255,255,255,1);
   text-decoration: none;
 }
 .header-user img,
 .header-user-placeholder {
-  background: rgba(176,193,206,1);
-  color: rgba(255,255,255,1);
+  background: rgba(255,255,255,1);
   border-radius: 500px;
+  color: rgba(34,34,34,1);
   display: inline-block;
-  height: 40px;
+  height: 36px;
   margin: 0;
   padding: 0;
   text-align: center;
-  width: 40px;
+  width: 36px;
   vertical-align: middle;
 }
 .header-user-placeholder > i {
-  font-size: 26px;
-  line-height: 44px;
+  font-size: 20px;
+  line-height: 36px;
 }
 .header-user > ul.dropdown-menu { margin: -8px 10px 0 0; }
 .header-toggle > a {
-  color: rgba(102,117,127,1);
+  color: rgba(255,255,255,1);
   float: right;
   font-size: 40px;
   padding: 4px 0px 3px 14px;
   text-decoration: none;
 }
 
-/* # Application
+/* # Alternate
 ================================================== */
-.header-app { height: 60px; }
-.header-app .header-brand > a { line-height: 67px; }
-.header-app .header-brand > a > img { height: 60px; }
-.header-app .header-trunk > li > a { padding: 23px 15px 22px 15px; }
-.header-app .header-trunk > li.header-trunk-navicon a { padding: 13px 10px 11px 10px; }
-.header-app .header-search { margin-top: 9px; }
-.header-app .header-nav { margin-top: 17px; }
-.header-app .header-user { margin-top: 10px; }
+.header.header-alt { background: transparent; }
+.header.header-alt .header-brand > a { color: rgba(34,34,34,1) }
+.header.header-alt .header-nav > li > a { color: rgba(102,102,102,1); }
+.header.header-alt .header-nav > li > a.active,
+.header.header-alt .header-nav > li > a:active,
+.header.header-alt .header-nav > li > a:hover,
+.header.header-alt .header-nav > li > a:focus { color: rgba(34,34,34,1); }
+.header.header-alt .header-nav-alt > li { color: rgba(34,34,34,1); }
+.header.header-alt .header-nav-alt > li > a { color: rgba(34,34,34,1); }
+.header.header-alt .header-nav-alt > li > a.active,
+.header.header-alt .header-nav-alt > li > a:active,
+.header.header-alt .header-nav-alt > li > a:hover,
+.header.header-alt .header-nav-alt > li > a:focus { color: rgba(102,102,102,1); }
+.header.header-alt .header-nav-alt > li.inverse > a {
+ background: rgba(34,34,34,1);
+ border-color: rgba(4,4,4,1);
+ color: rgba(255,255,255,1);
+}
+.header.header-alt .header-nav-alt > li.inverse > a:hover { background: rgba(54,54,54,1); }
+.header.header-alt .header-toolchain > li > a { color: rgba(102,102,102,1); }
+.header.header-alt .header-toolchain > li > a.active,
+.header.header-alt .header-toolchain > li > a:active,
+.header.header-alt .header-toolchain > li > a:hover,
+.header.header-alt .header-toolchain > li > a:focus { color: rgba(34,34,34,1); }
+.header.header-alt .header-user > a { color: rgba(34,34,34,1); }
+.header.header-alt .header-user img,
+.header.header-alt .header-user-placeholder {
+  background: rgba(34,34,34,1);
+  color: rgba(255,255,255,1);
+}
+.header.header-alt .header-toggle > a { color: rgba(34,34,34,1); }
 
 /* # Media Queries
 ================================================== */
-@media only screen and (min-width: 768px) and (max-width: 959px) {
-  .header-trunk > li > a { width: 180px; }
-}
 @media only screen and (max-width: 767px) {
   .header {
     height: 50px;
     padding: 0;
   }
-  .header-brand > a,
-  .header-app .header-brand > a {
+  .header-brand > a {
     font-size: 36px;
     line-height: 57px;
   }
-  .header-brand > a > img,
-  .header-app .header-brand > a > img { height: 50px; }
+  .header-brand > a > img { height: 50px; }
 }