ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

sluice styling

This commit is contained in:
diminator 2015-10-14 12:12:06 +02:00
parent 0a07106ae8
commit a457439347
12 changed files with 363 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/header.js
View File

@ -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>

7
sass/ascribe-fonts/ascribe-fonts.scss
View File

File diff suppressed because one or more lines are too long

86
sass/ascribe_custom_style.scss
View File

@ -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;
}
}

7
sass/ascribe_navbar.scss
View File

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

38
sass/main.scss
View File

@ -87,35 +87,12 @@ hr {
display: inline;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
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;
}
.ascribe-powered-by {
font-size: 11px!important;
text-transform: none!important;
font-weight: normal!important;
}
.clear-paddings {
padding-left: 0;
padding-right: 0;
@ -164,12 +141,13 @@ hr {
}
.btn-delete {
background-color: rgba(0, 0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0)!important;
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;
}
}

2
sass/whitelabel/index.scss
View File

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

3
sass/whitelabel/prize/index.scss
View File

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

34
sass/whitelabel/prize/landing.scss
View File

@ -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;
}
}
}

34
sass/whitelabel/prize/rating.scss
View File

@ -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;
}

243
sass/whitelabel/prize/sluice/sluice_custom_style.scss Normal file
View File

@ -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;
}

75
sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss → sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
View File

@ -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;
border: 1px solid transparent;
color: $ikono--button-color;
color: $ikono--button-color !important;
background-color: transparent !important;
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

2
sass/whitelabel/wallet/index.scss
View File

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