sluice styling

js/components/header.js

@@ -92,7 +92,7 @@ let Header = React.createClass({
                 aclObject={this.state.whitelabel}
                 aclName="acl_view_powered_by">
                     <li>
-                        <a className="pull-right" href="https://www.ascribe.io/" target="_blank">
+                        <a className="pull-right ascribe-powered-by" href="https://www.ascribe.io/" target="_blank">
                             <span id="powered">{getLangText('powered by')} </span>
                             <span className="icon-ascribe-logo"></span>
                         </a>

sass/ascribe_custom_style.scss

@@ -21,7 +21,8 @@ $ascribe--button-secondary-bg-color: white;
 
 $ascribe--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png';
 
-$ascribe--font: 'canada-type-gibson', sans-serif !important;
+//$ascribe--font: 'canada-type-gibson', sans-serif !important;
+$ascribe--font: 'gibson-local', sans-serif !important;
 $ascribe--font-weight: 300 !important;
 
 html,
@@ -150,27 +151,20 @@ hr {
 .ascribe-icon {
     font-size: 1.2em;
     font-weight: $ascribe--font-weight;
+}
+
+.icon-ascribe-search{
     color: $ascribe--button-default-color;
 }
 
+.ascribe-accordion-list {
+    margin-bottom: 1em;
+}
 .ascribe-accordion-list-item {
     border: 1px solid $ascribe-blue-border;
     -webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,.18);
 	   -moz-box-shadow: 0 2px 2px -2px rgba(0,0,0,.18);
 	        box-shadow: 0 2px 2px -2px rgba(0,0,0,.18);
-    margin-bottom: 1em;
-    &:hover {
-        //-webkit-transform: scale(1.005);
-        //   -moz-transform: scale(1.005);
-        //    -ms-transform: scale(1.005);
-        //     -o-transform: scale(1.005);
-        //        transform: scale(1.005);
-      //  -webkit-transition: all 0.1s ease;
-      //   -moz-transition: all 0.1s ease;
-      // -o-transition: all 0.1s ease;
-      //-ms-transition: all 0.1s ease;
-      //    transition: all 0.1s ease;
-    }
 }
 
 .ascribe-accordion-list-item .wrapper {
@@ -351,6 +345,9 @@ hr {
         }
     }
 }
+// buttons!
+// thought of the day:
+// "every great atrocity is the result of people just following orders"
 
 // disabled buttons
 .btn-default.disabled,
@@ -375,37 +372,6 @@ fieldset[disabled] .btn-default.active {
     border-color: darken($ascribe--button-default-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-default-color;
-
-    &:hover,
-    &:active {
-        background-color: $ascribe--button-default-color !important;
-        border-color: $ascribe--button-default-color !important;
-        color: white;
-    }
-}
-
-.btn-wide {
-    font-weight: $ascribe--font-weight;
-}
-
-.btn-spinner, .btn-spinner:hover {
-    background-color: $ascribe--button-default-color;
-    border-color: $ascribe--button-default-color;
-    [class^="spinner-wrapper-"] {
-        color: white;
-        .spinner-circle {
-            border-color: white;
-        }
-    }
-}
-
 .btn-default {
     background-color: $ascribe--button-default-color;
     border-color: $ascribe--button-default-color;
@@ -468,6 +434,34 @@ fieldset[disabled] .btn-secondary.active {
     }
 }
 
+.ascribe-piece-list-toolbar-filter-widget button {
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: $ascribe--button-default-color;
+
+    &:hover,
+    &:active {
+        background-color: $ascribe--button-default-color !important;
+        border-color: $ascribe--button-default-color !important;
+        color: white;
+    }
+}
+
+.btn-wide {
+    font-weight: $ascribe--font-weight;
+}
+
+.btn-spinner, .btn-spinner:hover {
+    background-color: $ascribe--button-default-color;
+    border-color: $ascribe--button-default-color;
+    [class^="spinner-wrapper-"] {
+        color: white;
+        .spinner-circle {
+            border-color: white;
+        }
+    }
+}
+
 .btn-secondary .spinner-wrapper {
     .spinner-circle,
     .spinner-inner {
@@ -554,7 +548,7 @@ fieldset[disabled] .btn-secondary.active {
         }
     }
     &:hover {
-        border-left: 3px solid rgba(169, 68, 66, .5)!important;
+        border-left: 3px solid rgba($ascribe-red-error, .5)!important;
     }
 }
 

sass/ascribe_navbar.scss

@@ -10,9 +10,4 @@
 
 .navbar-right {
     margin-right: 0;
-}
+}
-
-
-.img-brand {
-    height: 60px;
-}

sass/main.scss

@@ -87,35 +87,12 @@ hr {
     display: inline;
 }
 
-
+.ascribe-powered-by {
-.truncate {
+    font-size: 11px!important;
-    overflow: hidden;
+    text-transform: none!important;
-    text-overflow: ellipsis;
+    font-weight: normal!important;
-    white-space: nowrap;
-    width: 4em;
-
-    @media only screen and (min-width: 400px) {
-        width: 8em;
-    }
-
-    @media only screen and (min-width: 600px) {
-        width: 12em;
-    }
-
-    @media only screen and (min-width: 1000px) {
-        width: 14em;
-    }
-
-    @media only screen and (min-width: 1200px) {
-        width: 16em;
-    }
-
-    @media only screen and (min-width: 1400px) {
-        width: 18em;
-    }
 }
 
-
 .clear-paddings {
     padding-left: 0;
     padding-right: 0;
@@ -164,12 +141,13 @@ hr {
 }
 
 .btn-delete {
-    background-color: rgba(0, 0, 0, 0);
+    background-color: rgba(0, 0, 0, 0)!important;
-    border: 1px solid rgba(0, 0, 0, 0);
+    border: 1px solid rgba(0, 0, 0, 0)!important;
     color: #888;
 
     &:hover {
-        border: 1px solid $ascribe-brand-danger;
+        background-color: $ascribe-brand-danger !important;
+        border: 1px solid $ascribe-brand-danger !important;
     }
 }
 

sass/whitelabel/index.scss

@@ -1,3 +1,3 @@
 @import 'prize/index';
 @import 'wallet/index';
-@import 'wallet/ikonotv/ikonotv_landing';
+

sass/whitelabel/prize/index.scss

@@ -1,5 +1,4 @@
-@import 'landing';
+@import 'sluice/sluice_custom_style';
-@import 'rating';
 
 .ascribe-prize-app {
     border-radius: 0;

sass/whitelabel/prize/landing.scss

@@ -1,34 +0,0 @@
-.wp {
-    height: 100%;
-    max-width: 90%;
-    margin: auto;
-    /* We need this, otherwise piece list will have a scrollbar */
-}
-
-.hero {
-    font-family: 'Nunito', sans-serif;
-    font-weight: 300;
-
-    overflow: hidden;
-    text-align: center;
-
-    > img {
-        margin-top: 5em;
-        margin-bottom: 5em;
-    }
-}
-
-.wp-landing-wrapper {
-    text-align: center;
-    font-family: 'Nunito', sans-serif;
-    font-weight: 300;
-
-    > .enter {
-        margin-top: 2em;
-        > p {
-            margin-top: 2em;
-        }
-    }
-}
-
-

sass/whitelabel/prize/rating.scss

@@ -1,34 +0,0 @@
-
-.rating-container .rating-stars {
-    width: 25px;
-    color: #02b6a3;
-}
-
-#list-rating {
-    > a > span > span > .rating-container .rating-stars {
-        color: #000;
-    }
-    > span > span > span > .rating-container .rating-stars {
-        color: #000;
-    }
-    > span > span > .rating-container .rating-stars {
-        color: #000;
-    }
-}
-.react-rating-caption {
-    font-size: 1em;
-}
-
-.rating-list {
-    margin-left: 1.5em;
-    font-size: 0.9em;
-    margin-bottom: 0.3em;
-    color: #333;
-}
-
-.rating-note {
-    color: #666;
-    font-style: italic;
-    padding: 0.7em;
-
-}

sass/whitelabel/prize/sluice/sluice_custom_style.scss

@@ -0,0 +1,243 @@
+$sluice--nav-bg-color: #fcfcfc;
+$sluice--nav-fg-prim-color: #1E1E1E;
+$sluice--button-color: $sluice--nav-fg-prim-color;
+
+.wp {
+    height: 100%;
+    max-width: 90%;
+    margin: auto;
+    /* We need this, otherwise piece list will have a scrollbar */
+}
+
+.hero {
+    font-family: 'Nunito', sans-serif;
+    font-weight: 300;
+
+    overflow: hidden;
+    text-align: center;
+
+    > img {
+        margin-top: 5em;
+        margin-bottom: 5em;
+    }
+}
+
+.wp-landing-wrapper {
+    text-align: center;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 300;
+
+    > .enter {
+        margin-top: 2em;
+        > p {
+            margin-top: 2em;
+        }
+    }
+}
+
+
+.rating-container {
+    color: lighten($sluice--nav-fg-prim-color, 80%) !important;
+    .rating-stars {
+        width: 25px;
+        color: $sluice--nav-fg-prim-color !important;
+    }
+}
+
+#list-rating {
+    > a > span > span > .rating-container .rating-stars {
+        color: #000;
+    }
+    > span > span > span > .rating-container .rating-stars {
+        color: #000;
+    }
+    > span > span > .rating-container .rating-stars {
+        color: #000;
+    }
+}
+.react-rating-caption {
+    font-size: 1em;
+}
+
+.rating-list {
+    margin-left: 1.5em;
+    font-size: 0.9em;
+    margin-bottom: 0.3em;
+    color: #333;
+}
+
+.rating-note {
+    color: #666;
+    font-style: italic;
+    padding: 0.7em;
+
+}
+
+.client--sluice {
+    .navbar-default {
+        background-color: $sluice--nav-bg-color;
+        box-shadow: none;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    .navbar-nav > li > a,
+    .navbar-nav > li > .active a {
+        color: $sluice--nav-fg-prim-color;
+        background-color: $sluice--nav-bg-color;
+    }
+    .navbar-nav > li > a:hover {
+        color: lighten($sluice--nav-fg-prim-color, 40%);
+    }
+    .navbar-nav > .active a,
+    .navbar-nav > .active a:hover,
+    .navbar-nav > .active a:focus {
+        color: $sluice--nav-fg-prim-color;
+        border-bottom-color: $sluice--nav-fg-prim-color;
+        background-color: $sluice--nav-bg-color;
+    }
+    .dropdown-menu > li > a:hover,
+    .dropdown-menu > li > a:focus {
+        color: lighten($sluice--nav-fg-prim-color, 40%);
+        background-color: $sluice--nav-bg-color;
+    }
+    .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: lighten($sluice--nav-fg-prim-color, 40%);
+        background-color: $sluice--nav-bg-color;
+    }
+    .dropdown-menu {
+        background-color: $sluice--nav-bg-color;
+    }
+
+    .dropdown-menu > li > a {
+        color: $sluice--nav-fg-prim-color;
+    }
+
+    .navbar-toggle .icon-bar {
+        background-color: $sluice--nav-fg-prim-color;
+    }
+
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        background-color: $sluice--nav-bg-color;
+    }
+}
+
+.client--sluice .ascribe-footer {
+    display: none;
+}
+
+
+.client--sluice .icon-ascribe-search{
+    color: $sluice--button-color;
+}
+
+.client--sluice .ascribe-piece-list-toolbar .btn-ascribe-add{
+    display: none;
+}
+
+// disabled buttons
+.client--sluice {
+    .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($sluice--button-color, 20%);
+        border-color: darken($sluice--button-color, 20%);
+    }
+}
+
+// buttons!
+// thought of the day:
+// "every great atrocity is the result of people just following orders"
+.client--sluice {
+    .ascribe-piece-list-toolbar-filter-widget button {
+        color: $sluice--button-color !important;
+        background-color: transparent !important;
+        border-color: transparent !important;
+
+        &:hover,
+        &:active {
+            background-color: $sluice--button-color !important;
+            border-color: $sluice--button-color !important;
+            color: white !important;
+        }
+    }
+
+    .btn-wide,
+    .btn-default {
+        background-color: $sluice--button-color;
+        border-color: $sluice--button-color;
+
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: darken($sluice--button-color, 20%);
+            border-color: darken($sluice--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($sluice--button-color, 20%);
+        border-color: darken($sluice--button-color, 20%);
+    }
+
+    .pager li > a, .pager li > span {
+        background-color: $sluice--button-color;
+        border-color: $sluice--button-color;
+    }
+}
+
+// spinner!
+.client--sluice {
+    .btn-spinner {
+        color: $sluice--button-color;
+    }
+    .spinner-circle {
+        border-color: $sluice--button-color;
+    }
+    .spinner-inner {
+        color: $sluice--button-color;
+    }
+}
+
+// intercom stuff
+.client--sluice {
+    #intercom-container .intercom-launcher-button {
+        background-color: $sluice--button-color !important;;
+        border-color: $sluice--button-color !important;;
+    }
+}
+
+// notifications
+.client--sluice .ascribe-global-notification-success {
+    background-color: lighten($sluice--button-color, 50%);
+}
+
+// progress bar
+.client--sluice .ascribe-progress-bar > .progress-bar {
+    background-color: $sluice--button-color;
+}

sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss

@@ -2,7 +2,7 @@ $ikono--landing-bg-color: #093;
 $ikono--bg-color: #06c;
 $ikono--button-color: $ikono--bg-color;
 $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png';
-
+$ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
 
 @include keyframes(color-loop) {
     0%  { background: $ikono--landing-bg-color; }
@@ -12,7 +12,10 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
 
 
 .client--ikonotv {
-    font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
+    font-family: $ikono--font;
+    h1, h3 {
+        font-family: $ikono--font;
+    }
 }
 
 
@@ -24,13 +27,6 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
     background-color: $ikono--bg-color;
     box-shadow: none;
 
-    // this is a horrible hack
-    .navbar-nav > li > a[href="https://www.ascribe.io/"] {
-        font-size: 11px;
-        text-transform: none;
-        font-weight: normal;
-    }
-
     .navbar-nav > li > a,
     .navbar-nav > li > .active a {
         text-transform: uppercase;
@@ -232,7 +228,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
     display: none;
 }
 
-.client--ikonotv .ascribe-icon {
+.client--ikonotv .icon-ascribe-search{
     color: $ikono--button-color;
 }
 
@@ -240,6 +236,21 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
     display: none;
 }
 
+// spinner!
+.client--ikonotv {
+
+    .btn-spinner {
+        color: $ikono--button-color;
+    }
+    .spinner-circle {
+        border-color: $ikono--button-color;
+    }
+    .spinner-inner {
+        font-family: $ascribe--font;
+        color: $ikono--button-color;
+    }
+}
+
 .ikonotv-landing {
     /* center all text on the page */
     text-align: center;
@@ -285,7 +296,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
                 }
             }
         }
-    
+
         > h2 {
             font-weight: 600;
             font-size: 2.75em;
@@ -371,15 +382,15 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
 // "every great atrocity is the result of people just following orders"
 .client--ikonotv {
     .ascribe-piece-list-toolbar-filter-widget button {
-        background-color: transparent;
+        color: $ikono--button-color !important;
-        border: 1px solid transparent;
+        background-color: transparent !important;
-        color: $ikono--button-color;
+        border-color: transparent !important;
 
         &:hover,
         &:active {
             background-color: $ikono--button-color !important;
             border-color: $ikono--button-color !important;
-            color: white;
+            color: white !important;
         }
     }
 
@@ -437,10 +448,42 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
 
 // properties!
 .client--ikonotv {
+    input {
+        background-color: white;
+    }
+    .ascribe-property {
+        > div,
+        > input,
+        > pre,
+        > select,
+        > span:not(.glyphicon),
+        > textarea {
+            font-family: $ikono--font;
+        }
+        > div {
+            > div:not(.file-drag-and-drop div) {
+                font-family: $ikono--font;
+            }
+        }
+    }
     .is-focused {
         border-left-color: $ikono--button-color !important;
         background-color: rgba($ikono--button-color, .05);
     }
+    .is-error {
+        > div {
+            > span {
+                color: white !important;
+            }
+            > input,
+            > textarea {
+                color: rgba($ascribe-red-error, 1) !important;
+            }
+        }
+        &:hover {
+            border-left: 3px solid rgba($ascribe-red-error, .5)!important;
+        }
+    }
     .ascribe-property-wrapper:hover {
         border-left-color: rgba($ikono--button-color, .5);
     }
@@ -464,7 +507,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
 
 // notifications
 .client--ikonotv .ascribe-global-notification-success {
-    background-color: $ikono--button-color;
+    background-color: lighten($ikono--button-color, 20%);
 }
 
 // progress bar

sass/whitelabel/wallet/index.scss

@@ -1,3 +1,5 @@
+@import 'ikonotv/ikonotv_custom_style';
+
 .ascribe-wallet-app {
     border-radius: 0;
     padding-top: 70px;