WIP, preparing styles for the new corporate identity

sass/ascribe_custom_style.scss

@@ -0,0 +1,296 @@
+$ascribe--bg-color: #06c;
+$ascribe--button-color: $ascribe--bg-color;
+$ascribe--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png';
+
+
+body {
+    font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
+}
+
+
+.navbar-default {
+    background-color: $ascribe--bg-color;
+
+    .navbar-nav > li > a,
+    .navbar-nav > li > .active a {
+        text-transform: uppercase;
+        border-bottom-color: transparent;
+        font-size: 14px;
+        font-weight: bold;
+    }
+
+    .navbar-nav > li > a {
+        color: white;
+    }
+
+    .navbar-nav > .active a,
+    .navbar-nav > .active a:hover,
+    .navbar-nav > .active a:focus {
+        color: black;
+        borderjbottom-color: transparent;
+        background-color: transparent;
+    }
+
+    .navbar-nav > .active {
+        background-color: white;
+    }
+
+    .navbar-toggle .icon-bar {
+        background-color: white;
+    }
+
+    .navbar-nav > .open > a,
+    .navbar-nav > .open > a:hover,
+    .navbar-nav > .open > a:focus,
+    .dropdown-menu > .active > a,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus {
+        color: white;
+        background-color: $ascribe--bg-color;
+    }
+
+    .img-brand.navbar-brand {
+        width: 0;
+        height: 0;
+        padding-right: 120px;
+        padding-bottom: 36px;
+        padding-left: 30px;
+        background-image: url($ascribe--logo);
+        background-color: transparent;
+        background-position: center 4px;
+        background-repeat: no-repeat;
+        background-size: 150px;
+        margin-bottom: 0;
+        position: relative;
+    }
+
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+
+.route--landing {
+    animation: color-loop 20s;
+    -moz-animation: color-loop 20s infinite;
+    -webkit-animation: color-loop 20s infinite;
+    
+    margin: 0;
+    width: 100%;
+    padding: 5em 1em;
+}
+
+
+.route--login,
+.route--signup {
+
+    .ascribe-btn-login {
+        display: block;
+        margin: 50px auto 0;
+        width: auto;
+        padding: 10px 30px;
+        text-transform: uppercase;
+        font-weight: bold;
+        width: 180px;
+    }
+
+    .ascribe-btn-login-spinner {
+        background-color: $ascribe--button-color;
+    }
+
+    .ascribe-form-header {
+        background-image: url($ascribe--logo);
+        background-color: transparent;
+        background-position: center 0;
+        background-repeat: no-repeat;
+        background-size: 300px;
+        margin-bottom: 0;
+        height: 150px;
+        position: relative;
+
+        h3 {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            color: white;
+            text-align: center;
+            font-size: 22px;
+            text-indent: -99999px;
+            font-size: 0;
+        }
+    }
+
+    .ascribe-settings-wrapper {
+        background-color: transparent;
+
+        &:hover {
+            border-left: 3px solid transparent;
+        }
+
+        &.is-focused {
+            border-left: 3px solid transparent !important;
+        }
+    }
+
+    .ascribe-settings-property {
+        border: none;
+    }
+
+    .ascribe-settings-property > span {
+        color: white;
+    }
+
+    .ascribe-settings-property > input {
+        padding: 10px;
+        background-color: #fff;
+        margin-top: .1em;
+
+        &:focus {
+            background-color: #ffff00;
+        }
+    }
+
+    .checkbox,
+    .checkbox a {
+        color: white !important;
+    }
+
+    .ascribe-login-text {
+        color: white;
+        text-align: center;
+
+        a {
+            color: white;
+            text-decoration: underline;
+        }
+    }
+}
+
+
+.route--login,
+.route--signup {
+    .ascribe-form-bordered {
+        border: none;
+    }
+}
+
+
+// disabled buttons
+.btn-default.disabled,
+.btn-default.disabled:hover,
+.btn-default.disabled:focus,
+.btn-default.disabled.focus,
+.btn-default.disabled:active,
+.btn-default.disabled.active,
+.btn-default[disabled],
+.btn-default[disabled]:hover,
+.btn-default[disabled]:focus,
+.btn-default[disabled].focus,
+.btn-default[disabled]:active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default,
+fieldset[disabled] .btn-default:hover,
+fieldset[disabled] .btn-default:focus,
+fieldset[disabled] .btn-default.focus,
+fieldset[disabled] .btn-default:active,
+fieldset[disabled] .btn-default.active {
+    background-color: darken($ascribe--button-color, 20%);
+    border-color: darken($ascribe--button-color, 20%);
+}
+
+// buttons!
+// thought of the day:
+// "every great atrocity is the result of people just following orders"
+.ascribe-piece-list-toolbar-filter-widget button {
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: $ascribe--button-color;
+
+    &:hover,
+    &:active {
+        background-color: $ascribe--button-color !important;
+        border-color: $ascribe--button-color !important;
+        color: white;
+    }
+}
+
+.ascribe-btn-login,
+.btn-default {
+    background-color: $ascribe--button-color;
+    border-color: $ascribe--button-color;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:active:hover,
+    &:active:focus,
+    &:active.focus,
+    &.active:hover,
+    &.active:focus,
+    &.active.focus {
+        background-color: darken($ascribe--button-color, 20%);
+        border-color: darken($ascribe--button-color, 20%);
+    }
+}
+
+.open > .btn-default.dropdown-toggle:hover,
+.open > .btn-default.dropdown-toggle:focus,
+.open > .btn-default.dropdown-toggle.focus,
+.open > .btn-default.dropdown-toggle.dropdown-toggle {
+    background-color: darken($ascribe--button-color, 20%);
+    border-color: darken($ascribe--button-color, 20%);
+}
+
+.pager li > a, .pager li > span {
+    background-color: $ascribe--button-color;
+    border-color: $ascribe--button-color;
+}
+
+// inputs!
+.ascribe-input-glyph > .form-group > .input-group > .input-group-addon > .filter-glyph {
+    color: $ascribe--button-color;
+}
+
+.ascribe-input-glyph > .form-group > .input-group > .input-group-addon,
+.ascribe-input-glyph > .form-group > .input-group input {
+    border-color: $ascribe--button-color;
+}
+
+.ascribe-settings-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
+.ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before {
+    color: $ascribe--button-color;
+}
+
+
+// properties!
+.is-focused {
+    border-left-color: $ascribe--button-color !important;
+    background-color: rgba($ascribe--button-color, .05);
+}
+.ascribe-settings-wrapper:hover {
+    border-left-color: rgba($ascribe--button-color, .5);
+}
+
+.ascribe-accordion-list-item .wrapper:hover {
+    background-color: rgba($ascribe--button-color, .05);
+}
+
+
+// intercom stuff
+#intercom-container .intercom-launcher-button {
+    background-color: $ascribe--button-color !important;
+    border-color: $ascribe--button-color !important;
+}
+
+
+// notifications
+.ascribe-global-notification-success {
+    background-color: $ascribe--button-color;
+}
+
+// progress bar
+.ascribe-progress-bar > .progress-bar {
+    background-color: $ascribe--button-color;
+}

sass/ascribe_login.scss

@@ -14,7 +14,7 @@ $break-small: 764px;
     //margin-left: 1.2em;
 
     &:hover {
-        background-color: rgba(2, 182, 163, .8);
+        opacity: .3;
         border: 0;
         color: white;
     }

sass/main.scss

@@ -34,6 +34,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_form';
 @import 'ascribe_panel';
 @import 'ascribe_collapsible';
+@import 'ascribe_custom_style';
 
 @import 'whitelabel/index';
 
@@ -93,28 +94,28 @@ hr {
         border: 1px solid rgba(0, 0, 0, 0);
     }
 
-    .navbar-nav > .active {
+//     .navbar-nav > .active {
-        a {
+//         a {
-            background-color: transparent !important;
+//             background-color: transparent !important;
-            border-bottom: 1px solid #02b6a3;
+//             border-bottom: 1px solid #02b6a3;
-            color: #02b6a3;
+//             color: #02b6a3;
-
+// 
-            > span {
+//             > span {
-                color: #02b6a3;
+//                 color: #02b6a3;
-            }
+//             }
-
+// 
-            &:hover,
+//             &:hover,
-            &:focus {
+//             &:focus {
-                background-color: transparent;
+//                 background-color: transparent;
-                border-bottom: 1px solid #02b6a3;
+//                 border-bottom: 1px solid #02b6a3;
-                color: #02b6a3;
+//                 color: #02b6a3;
-
+// 
-                > span {
+//                 > span {
-                    color: #02b6a3;
+//                     color: #02b6a3;
-                }
+//                 }
-            }
+//             }
-        }
+//         }
-    }
+//     }
 }