taiga-front/app/themes/material-design/variables.scss

//*************************
//** COLORS
//************************

// Colors
$black: #000;
$blackish: #212121;
$grayer: #424242;
$gray: #757575;
$gray-light: #bdbdbd;
$whitish: #f5f5f5;
$white: #fff;

// Primary colors
$primary-light: #8c9eff;
$primary: #3f51b5;
$primary-dark: #1a237e;

//Warning colors
$red-light: #ff5252;
$red: #f44336;

//Card color
$card: #fff8e4;
$card-hover: #f1e8cd;
$card-dark: #cfc29b;

$green-japanese-laurel: #009688;
$green-olive: #cddc39;
$red-amaranth: #e91e63;
$purple-eggplant: #9c27b0;
$yellow-pear: #ffc107;

//*************************
//** LAYOUT
//*************************

// Default body color and background
body {
    background: $white; // fallback
    color: $grayer;
}

// Main
.master {
    background: $white;
}

// Secondary panel
.menu-secondary {
    background: lighten($primary-light, 22%);
}

// Tertiary panel
.menu-tertiary {
    background-color: $primary-dark;
}

// Extra bar panel
.extrabar {
   background: lighten($primary-light, 22%);
}


//**************************
//** TYPOGRAPHY
//**************************

@each $font-face in OpenSans-CondLight, OpenSans-Light, opensans-regular, opensans-semibold, taiga {
    @font-face {
        font-family: '#{$font-face}';
        src: url('../fonts/#{$font-face}.eot?#iefix') format('embedded-opentype'),
            url('../fonts/#{$font-face}.woff') format('woff'),
            url('../fonts/#{$font-face}.ttf')  format('truetype'),
            url('../fonts/#{$font-face}.svg#{$font-face}') format('svg');
    }
}

// Font Sizes
%xsmall {font-size: .75rem;}
%small {font-size: .9rem;}
%medium {font-size: 1rem;}
%large {font-size: 1.2rem;}
%larger {font-size: 1.6rem;}
%xlarge {font-size: 2rem;}
%xxlarge {font-size: 3rem;}

// Font Types
%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; }
%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; }
%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; }
%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif; }
%taiga {font-family: 'taiga';}
%mono {font-family: 'courier new', 'monospace';}

// Titles
h1,
h2,
h3,
h4,
h5,
h6 {
    color: $blackish;
}

a {
    color: $grayer;
    &:hover {
        color: $primary;
    }
}

//**************************
//** SCAFFOLDING
//**************************

//Forms
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="password"],
select,
textarea {
    background: $whitish;
    border-color: $primary;
    color: $grayer;
    @include placeholder {
        color: darken($gray-light, 10%);
    }
    &.checksley-error {
        border: 1px solid $red;
    }
}


// Input errors
.checksley-error-list {
    background: rgba($whitish, .8);
    color: $red;
}

// Blockquote
blockquote {
    border-left: 5px solid $primary-light;
}

blockquote,
blockquote p {
    color: $gray;
}

cite {
    color: $gray;
}

// lightbox
%lightbox {
    background: rgba($white, .95);
}

// Background images
%triangled-bg {
    background: url('https://lh4.googleusercontent.com/-k7YewfrSQ_Q/VGdNZND0NBI/AAAAAAAAD1A/UDZBeSGR7iM/w1465-h824-no/Ultimate%2BMaterial%2BLollipop%2BCollection%2B-%2B480') no-repeat center center;
    background-size: cover;
}

%background-taiga {
    background: url('https://lh6.googleusercontent.com/-2l_mJ5g6j4k/VGdNZCpaERI/AAAAAAAAD2o/zCx5Z3cYv6Y/w1465-h824-no/Ultimate%2BMaterial%2BLollipop%2BCollection%2B-%2B497') no-repeat center center;
    background-size: cover;
}

.summary {
    background: $grayer;
    color: $white;
}


//************************
//** NAVIGATION
//***********************

// Top navigation bar
.navbar {
    background: rgba($red-amaranth, .6);
    &:after {
        background: url('../images/menu-vert.png') repeat top left;
    }
}

$top-icon-color: $white;
$dropdown-color: rgba(darken($primary-dark, 20%), 1);

//In project left navigation bar
tg-project-menu {
    background-color: rgba(darken($primary-dark, 15%), 1);
    background-image: none;
}

.main-nav {
    svg path {
        fill: $white;
    }
}

//*****************************
//** TASKBOARD
//******************************

//Taskboard table
.taskboard-table-header {
    .task-colum-name {
        background: lighten($primary-light, 20%);
        border-top: 3px solid $primary;
        .icon {
            color: $primary;
        }
    }
}
.taskboard-table-body {
    .taskboard-tasks-box {
        background: $whitish;
    }
}

//*****************************
//** KANBAN
//******************************

//Kanban table
.kanban-table-header {
    .task-colum-name {
        background: lighten($primary-light, 20%);
        border-top: 3px solid $primary;
        .icon {
            color: $primary;
        }
    }
}

.kanban-table-body {
    .kanban-uses-box {
        background: $whitish;
    }
}