1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00

Add style for buttons

This commit is contained in:
vrde 2015-09-21 16:23:18 +02:00
parent 887fc99edc
commit 865c21557c
3 changed files with 103 additions and 18 deletions

View File

@ -71,6 +71,9 @@ class AppGateway {
type = settings.type; type = settings.type;
subdomain = settings.subdomain; subdomain = settings.subdomain;
} }
window.document.body.classList.add('client--' + subdomain);
EventActions.applicationWillBoot(settings); EventActions.applicationWillBoot(settings);
window.appRouter = Router.run(getRoutes(type, subdomain), Router.HistoryLocation, (App) => { window.appRouter = Router.run(getRoutes(type, subdomain), Router.HistoryLocation, (App) => {
React.render( React.render(

View File

@ -32,7 +32,7 @@ let WalletApp = React.createClass({
} }
return ( return (
<div className={classNames('ascribe-wallet-app', 'client--' + subdomain, activeRoutes)}> <div className={classNames('ascribe-wallet-app', activeRoutes)}>
<div className='container'> <div className='container'>
{header} {header}
<RouteHandler /> <RouteHandler />

View File

@ -1,5 +1,6 @@
$ikono--bg-color: #0066cc; $ikono--landing-bg-color: #06c;
$ikono--button-color: #993399; $ikono--bg-color: #939;
$ikono--button-color: $ikono--bg-color;
$ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png'; $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png';
@ -81,27 +82,17 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
} }
.client--ikonotv .route--landing {
.client--ikonotv.route--landing .btn-default, background-color: $ikono--landing-bg-color;
.client--ikonotv.route--signup .ascribe-btn-login,
.client--ikonotv.route--login .ascribe-btn-login {
background-color: $ikono--button-color;
border: none;
}
.client--ikonotv.route--landing {
background-color: $ikono--bg-color;
margin: 0; margin: 0;
width: 100%; width: 100%;
padding: 5em 1em; padding: 5em 1em;
} }
.client--ikonotv.route--login, .client--ikonotv .route--login,
.client--ikonotv.route--signup { .client--ikonotv .route--signup {
background-color: $ikono--bg-color; background-color: $ikono--landing-bg-color;
.ascribe-btn-login { .ascribe-btn-login {
display: block; display: block;
@ -298,3 +289,94 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
} }
} }
} }
// buttons!
// thought of the day:
// "every great atrocity is the result of people just following orders"
.client--ikonotv {
.ascribe-piece-list-toolbar-filter-widget button {
background-color: transparent;
border: 1px solid transparent;
color: $ikono--button-color;
&:hover,
&:active {
background-color: $ikono--button-color !important;
border-color: $ikono--button-color !important;
color: white;
}
}
.ascribe-btn-login,
.btn-default {
background-color: $ikono--button-color;
border-color: $ikono--button-color;
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: darken($ikono--button-color, 20%);
border-color: darken($ikono--button-color, 20%);
}
}
.open > .btn-default.dropdown-toggle:hover,
.open > .btn-default.dropdown-toggle:focus,
.open > .btn-default.dropdown-toggle.focus {
background-color: darken($ikono--button-color, 20%);
border-color: darken($ikono--button-color, 20%);
}
.pager li > a, .pager li > span {
background-color: $ikono--button-color;
border-color: $ikono--button-color;
}
}
// inputs!
.client--ikonotv {
.ascribe-input-glyph > .form-group > .input-group > .input-group-addon > .filter-glyph {
color: $ikono--button-color;
}
.ascribe-input-glyph > .form-group > .input-group > .input-group-addon,
.ascribe-input-glyph > .form-group > .input-group input {
border-color: $ikono--button-color;
}
.ascribe-settings-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
.ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before {
color: $ikono--button-color;
}
}
// properties!
.client--ikonotv {
.is-focused {
border-left-color: $ikono--button-color !important;
background-color: rgba($ikono--button-color, .05);
}
.ascribe-settings-wrapper:hover {
border-left-color: rgba($ikono--button-color, .5);
}
}
.client--ikonotv {
.ascribe-accordion-list-item .wrapper:hover {
background-color: rgba($ikono--button-color, .05);
}
}
// intercom stuff
.client--ikonotv {
#intercom-container .intercom-launcher-button {
background-color: $ikono--button-color;
border-color: $ikono--button-color;
}
}