onion/sass/main.scss

// If you import a new .scss file, make sure to restart gulp
// otherwise it will not be included

$BASE_URL: '<%= BASE_URL %>';

@import 'mixins';
@import 'ascribe_variables';
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
@import '../node_modules/react-star-rating/dist/css/react-star-rating.min';
@import '../node_modules/react-datepicker/dist/react-datepicker';
@import 'glyphicons-social';
@import 'ascribe_theme';
@import './ascribe-fonts/style';
@import './ascribe-fonts/ascribe-fonts';
@import 'ascribe_login';
@import 'ascribe_table';
@import 'ascribe_accordion_list';
@import 'ascribe_piece_list_bulk_modal';
@import 'ascribe_piece_list_toolbar';
@import 'ascribe_edition';
@import 'ascribe_textarea';
@import 'ascribe_media_player';
@import 'ascribe_uploader';
@import 'ascribe_footer';
@import 'ascribe_global_action';
@import 'ascribe_global_notification';
@import 'ascribe_notification_list';
@import 'ascribe_notification_page';
@import 'ascribe_piece_register';
@import 'offset_right';
@import 'ascribe_settings';
@import 'ascribe_slides_container';
@import 'ascribe_form';
@import 'ascribe_panel';
@import 'ascribe_collapsible';
@import 'ascribe_acl_information';

@import 'lib/buttons';
@import 'lib/modals';

@import 'whitelabel/index';


html,
body {
    background-color: #fdfdfd;
    font-family: 'Source Sans Pro';
    height: 100%;
}

html {
    overflow-y: scroll;
}

.ascribe-default-app {
    overflow-x: hidden;
    padding-top: 70px;
}

hr {
    margin-bottom: 15px;
}

#main {
    height: 100%;
}

.hidden {
    display: none;
}

.no-margin {
    margin: 0;
    margin-left: 0;
    margin-right: 0;
}

.no-padding {
    padding: 0;
}

.inline {
    display: inline;
}

.navbar-default {
    border: 0;
    border-color: #ccc;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    font-size: .8em;
    margin-bottom: 1.5em;

    .navbar-nav > li > a {
        border: 1px solid rgba(0, 0, 0, 0);
    }

    .navbar-nav > .active {
        a {
            background-color: transparent !important;
            border-bottom: 1px solid #02b6a3;
            color: #02b6a3;

            > span {
                color: #02b6a3;
            }

            &:hover,
            &:focus {
                background-color: transparent;
                border-bottom: 1px solid #02b6a3;
                color: #02b6a3;

                > span {
                    color: #02b6a3;
                }
            }
        }
    }
}



.img-brand {
    height: 60px;
}

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

.navbar-right {
    margin-right: 0;
}

.clear-paddings {
    padding-left: 0;
    padding-right: 0;
}

.clear-margins {
    margin-bottom: 0;
    margin-top: 0;
}

.ascribe-color {
    color: $ascribe-color-green;
}

.ascribe-subheader {
    padding-bottom: 10px;
    margin-top: -10px;

    a {
        color: #222;
        cursor: pointer;
        font-size: .8em;
    }
}

.tooltip-inner {
    background-color: #fcfafa;
    border: 1px solid;
    border-radius: 0;
    color: #000;
    max-width: 300px;
    padding: 3px 8px;
    text-align: center;
    text-decoration: none;
}

// Taken from http://stackoverflow.com/a/20548578
.vcenter {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

.filter-glyph {
    color: white;
}

.btn-delete {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0);
    color: #888;

    &:hover {
        border: 1px solid $ascribe-brand-danger;
    }
}

.btn-ascribe {
    border: 1px solid #444;
    border-radius: 0 !important;
    font-family: sans-serif !important;
    line-height: 2em;
    margin-left: 0 !important;
    font-family: sans-serif !important;
    border-radius: 0 !important;
    color: #222 !important;
}

.btn-ascribe:active, .btn-ascribe:hover {
    color: #FFF !important;
    background-color: #444;
}

.btn-ascribe-sm {
    font-size: 12px;
    line-height: 1.3em;
}

.btn-ascribe-green,
.btn-ascribe-green-inv {
    border: 1px solid #48dacb;
    border-radius: 0 !important;
    font-family: sans-serif !important;
    line-height: 2em;
    margin-left: 0 !important;
}

.btn-ascribe-green,
.btn-ascribe-green-inv:active,
.btn-ascribe-green-inv:hover {
    background-color: #fff;
    border: 1px solid rgba(2, 182, 163, .5);
    color: rgba(2, 182, 163, 0.5);
}

.btn-ascribe-green:active,
.btn-ascribe-green:hover,
.btn-ascribe-green-inv {
    background-color: rgba(2, 182, 163, .5);
    border: 1px solid rgba(2, 182, 163, .5);
    color: white;
}

.ascribe-detail-title {
    font-size: 2em;
    margin-top: 0;
}

.ascribe-detail-property {
    padding-bottom: .4em;
}

.ascribe-detail-property-label {
    font-size: .8em;
}

.ascribe-detail-property-value {
    text-overflow: ellipsis;
}

::-webkit-input-placeholder { // WebKit browsers
    font-size: .9em;
    font-style: italic;
}

:-moz-placeholder { // Mozilla Firefox 4 to 18
    font-size: .9em;
    font-style: italic;
}

::-moz-placeholder { // Mozilla Firefox 19+
    font-size: .9em;
    font-style: italic;
}

:-ms-input-placeholder { // Internet Explorer 10+
    font-size: .9em;
    font-style: italic;
}

.textarea-ascribe-message {
    height: 13em !important;
}

.input-checkbox-ascribe {
    line-height: 1.6;
    margin-left: 1.6em;
    margin-right: auto;
    text-align: left;
    width: 90%;
}

// columns of same height styles
// http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
.row-full-height {
    height: 100%;
}

.col-full-height {
    height: 100%;
    vertical-align: middle;
}

.row-same-height {
    display: table;
    // fix overflow
    table-layout: fixed;
    width: 100%;
}

.col-xs-height {
    display: table-cell;
    float: none !important;
}

@media (min-width: 768px) {
    .col-sm-height {
        display: table-cell;
        float: none !important;
    }
}

@media (min-width: 992px) {
    .col-md-height {
        display: table-cell;
        float: none !important;
    }
}

@media (min-width: 1200px) {
    .col-lg-height {
        display: table-cell;
        float: none !important;
    }
}

// vertical alignment styles

.col-top {
    vertical-align: top;
}

.col-middle {
    vertical-align: middle;
}

.col-bottom {
    vertical-align: bottom;
}

.ascribe-button-list button, .ascribe-margin-1px {
    margin-right: 1px;
    margin-top: 1px;
}

.margin-left-2px {
    margin-left: 2px;
}

.spin {
    -moz-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    -moz-transform-origin: 55% 70%;
    -o-transform-origin: 55% 70%;
    -webkit-transform-origin: 55% 70%;
    display: inline-block;
    transform-origin: 55% 70%;
    width: 10px;
    height: 10px;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg);}
}

@-o-keyframes spin {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(360deg);}
}

@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(360deg);}
}

@-keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg);}
}

.btn-default {
    .glyph-ascribe-spool {
        color: white;
    }
}

.fullpage-spinner {
    padding-bottom: 30%;
    padding-top: 30%;
    text-align: center;

    > span {
        font-size: 2em;
    }
}


.disable-select {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.link-ascribe {
    color: #666;

    &:hover {
        color: #000;
    }
}

.ascribe-loading-position {
    padding-bottom: 30%;
    padding-top: 30%;
    text-align: center;
}

.ascribe-progress-bar {
    margin-bottom: 0;
    > .progress-bar {
        background-color: $ascribe-color-green;
    }
}

.ascribe-progress-bar-xs {
    height: 12px;
}

.ascribe-piece-list-filter-display {
    padding-left: 10px;
    padding-right: 10px;

    > span {
        font-size: 1.1em;
        font-weight: 600;
        color: #616161;

        padding-left: .3em;
    }

    > hr {
        margin-top: .15em;
        margin-bottom: .1em;
        border-color: #ccc;
    }
}

.error-wrapper {
    width: 100%;
    text-align: center;

    padding: 5% 20% 5% 20%;

    > h1 {
        font-size: 10em;
        font-weight: 600;
        margin-bottom: .25em;
    }

    > p {
        font-size: 2em;
    }
}