taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #638 from taigaio/issue/3165/css-repeat 

Fix theme variables and custom stylesheets
stable
Juanfran 2015-09-16 08:07:16 +02:00
parent 5b100cec1c fa0009c5ed
commit 8c8bd4ee92
6 changed files with 648 additions and 571 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

351
app/themes/high-contrast/custom.scss
View File

@ -4,62 +4,17 @@
// Fezzik: I'm on the Brute Squad. // Fezzik: I'm on the Brute Squad.
// Max: [sees Fezzik's size] You are the Brute Squad! // Max: [sees Fezzik's size] You are the Brute Squad!
.working-on .duty-id, //*************************
.watching .duty-id, //** LAYOUT
.activity-item p, //*************************
.table-team .avatar .position,
.points-per-role > li, // Default body color and background
.private path { body {
color: $black; background: $white; // fallback
} color: $grayer;
.navbar a:hover {
color: $white;
} }
.points-per-role > li:first-child { // Main
background: $black;
}
.login-main {
color: $white;
a {
color: $white;
}
}
.home-project-list {
li {
border: 1px solid $black;
}
p {
color: $black;
}
}
.main-nav .active {
background: $white;
svg path {
fill: $black;
}
}
// Titles
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Arial, Helvetica, sans-serif;
.date {
color: $black;
}
}
.tag {
background: $white;
border: 1px solid $black;
}
.master, .master,
.menu-secondary, .menu-secondary,
@ -70,10 +25,298 @@ h6 {
border-right: 1px solid $black; border-right: 1px solid $black;
} }
.master {
background: $white;
}
// Secondary panel
.menu-secondary {
background: $white;
}
// Tertiary panel
.menu-tertiary {
background-color: $white;
}
// Extra bar panel
.extrabar {
background: $white;
}
//*************************
//** TITLES
//*************************
h1,
h2,
h3,
h4,
h5,
h6 {
color: $blackish;
font-family: Arial, Helvetica, sans-serif;
.date {
color: $black;
}
}
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: $white;
border-color: $black;
color: $black;
@include placeholder {
color: $black;
}
&.checksley-error {
border: 1px solid $red;
}
}
// Input errors
.checksley-error-list {
background: rgba($whitish, .8);
color: $red;
}
// Blockquote
blockquote {
border-left: 5px solid $gray;
}
blockquote,
blockquote p {
color: $black;
}
cite {
color: $black;
}
.button-gray { .button-gray {
background: $black; background: $black;
} }
.tag {
background: $white;
border: 1px solid $black;
}
.summary {
background: $grayer;
color: $white;
}
//************************
//** NAVIGATION
//***********************
// Top navigation bar
.navbar {
background: $black;
&:after {
background: url('../images/menu-vert.png') repeat top left;
}
a {
:hover {
color: $white;
}
svg path {
fill: $white;
}
}
}
//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;
}
.active {
background: $white;
svg path {
fill: $black;
}
}
}
//*****************************
//** TASKBOARD
//******************************
//Taskboard table
.taskboard-table-header {
.task-colum-name {
background: lighten($white, 20%);
border-top: 3px solid $black;
.icon {
color: $black;
}
}
}
.taskboard-table-body {
.taskboard-tasks-box {
background: $white;
border: 1px solid $black;
}
}
//*****************************
//** KANBAN
//******************************
//Kanban table
.kanban-table-header {
.task-colum-name {
background: lighten($white, 20%);
border-top: 3px solid $black;
.icon {
color: $black;
}
}
}
.kanban-table-body {
.kanban-uses-box {
background: $whitish;
}
}
.working-on .duty-id,
.watching .duty-id,
.activity-item p,
.table-team .avatar .position,
.points-per-role > li,
.private path {
color: $black;
}
.points-per-role > li:first-child {
background: $black;
}
//*****************************
//** TICKET DETAIL
//******************************
.us-created-by {
.created-by {
.created-title,
.created-date {
color: $black;
}
}
}
.duty-custom-fields {
.custom-field-data {
.custom-field-description {
color: $black;
}
}
}
.us-detail-settings {
.button-gray {
background: none;
border: 1px solid $black;
color: $black;
&:hover,
&.active {
color: $white;
}
span {
color: $black;
}
}
}
.more-attachments {
span {
color: $black;
}
}
.history-tabs {
a {
color: $black;
}
}
//*****************************
//** LOGIN
//******************************
.login-main {
color: $white;
a {
color: $white;
}
}
//*****************************
//** HOME
//******************************
.home-project-list {
li {
border: 1px solid $black;
}
p {
color: $black;
}
}
//*****************************
//** PROFILE
//******************************
.profile-content-tabs {
.tab {
color: $blackish;
}
}
.profile-sidebar {
p {
color: $blackish;
}
}
//*****************************
//** ADMIN
//******************************
.settings-nav { .settings-nav {
.active { .active {
background: $black; background: $black;

170
app/themes/high-contrast/variables.scss
View File

@ -31,36 +31,8 @@ $red-amaranth: #e91e63;
$purple-eggplant: #9c27b0; $purple-eggplant: #9c27b0;
$yellow-pear: #ffc107; $yellow-pear: #ffc107;
//************************* $top-icon-color: $white;
//** LAYOUT $dropdown-color: rgba(darken($primary-dark, 20%), 1);
//*************************
// Default body color and background
body {
background: $white; // fallback
color: $grayer;
}
// Main
.master {
background: $white;
}
// Secondary panel
.menu-secondary {
background: $white;
}
// Tertiary panel
.menu-tertiary {
background-color: $white;
}
// Extra bar panel
.extrabar {
background: $white;
}
//************************** //**************************
//** TYPOGRAPHY //** TYPOGRAPHY
@ -83,69 +55,6 @@ body {
%taiga {font-family: 'taiga';} %taiga {font-family: 'taiga';}
%mono {font-family: 'courier new', 'monospace';} %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: $white;
border-color: $black;
color: $black;
@include placeholder {
color:$black;
}
&.checksley-error {
border: 1px solid $red;
}
}
// Input errors
.checksley-error-list {
background: rgba($whitish, .8);
color: $red;
}
// Blockquote
blockquote {
border-left: 5px solid $gray;
}
blockquote,
blockquote p {
color: $black;
}
cite {
color: $black;
}
// lightbox
%lightbox { %lightbox {
background: rgba($white, .95); background: rgba($white, .95);
} }
@ -160,78 +69,3 @@ cite {
background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center; background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center;
background-size: cover; background-size: cover;
} }
.summary {
background: $grayer;
color: $white;
}
//************************
//** NAVIGATION
//***********************
// Top navigation bar
.navbar {
background: $black;
&: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($white, 20%);
border-top: 3px solid $black;
.icon {
color: $black;
}
}
}
.taskboard-table-body {
.taskboard-tasks-box {
background: $white;
border: 1px solid $black;
}
}
//*****************************
//** KANBAN
//******************************
//Kanban table
.kanban-table-header {
.task-colum-name {
background: lighten($white, 20%);
border-top: 3px solid $black;
.icon {
color: $black;
}
}
}
.kanban-table-body {
.kanban-uses-box {
background: $whitish;
}
}

181
app/themes/material-design/custom.scss
View File

@ -3,3 +3,184 @@
// Max: Beat it or I'll call the Brute Squad! // Max: Beat it or I'll call the Brute Squad!
// Fezzik: I'm on the Brute Squad. // Fezzik: I'm on the Brute Squad.
// Max: [sees Fezzik's size] You are the Brute Squad! // Max: [sees Fezzik's size] You are the Brute Squad!
//**************************
//** 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');
}
}
//*************************
//** 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%);
}
// 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;
}
.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;
}
}
//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;
}
}

182
app/themes/material-design/variables.scss
View File

@ -31,50 +31,8 @@ $red-amaranth: #e91e63;
$purple-eggplant: #9c27b0; $purple-eggplant: #9c27b0;
$yellow-pear: #ffc107; $yellow-pear: #ffc107;
//************************* $top-icon-color: $white;
//** LAYOUT $dropdown-color: rgba(darken($primary-dark, 20%), 1);
//*************************
// 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 // Font Sizes
%xsmall {font-size: .75rem;} %xsmall {font-size: .75rem;}
@ -93,68 +51,6 @@ body {
%taiga {font-family: 'taiga';} %taiga {font-family: 'taiga';}
%mono {font-family: 'courier new', 'monospace';} %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
%lightbox { %lightbox {
background: rgba($white, .95); background: rgba($white, .95);
@ -170,77 +66,3 @@ cite {
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: 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; 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;
}
}

168
app/themes/taiga/custom.scss
View File

@ -1,5 +1,165 @@
// Any styles in this stylesheet will override any previous defined style in Taiga. //*************************
//** LAYOUT
//*************************
// Max: Beat it or I'll call the Brute Squad! // Default body color and background
// Fezzik: I'm on the Brute Squad. body {
// Max: [sees Fezzik's size] You are the Brute Squad! background: $white; // fallback
color: $grayer;
}
// Main
.master {
background: $white;
}
// Secondary panel
.menu-secondary {
background: $whitish;
}
// Tertiary panel
.menu-tertiary {
background-color: $primary-dark;
}
// Extra bar panel
.extrabar {
background: $whitish;
}
// 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: $gray-light;
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 $whitish;
}
blockquote,
blockquote p {
color: $gray;
}
cite {
color: $gray;
}
.summary {
background: $grayer;
color: $white;
}
//************************
//** NAVIGATION
//***********************
// Top navigation bar
.navbar {
background: rgba($black, .5);
&:after {
background: url('../images/menu-vert.png') repeat top left;
}
}
//In project left navigation bar
tg-project-menu {
background-color: $primary-dark;
background-image: url('../images/menu.png');
}
.main-nav {
svg path {
fill: $white;
}
}
//*****************************
//** TASKBOARD
//******************************
//Taskboard table
.taskboard-table-header {
.task-colum-name {
background: $whitish;
border-top: 3px solid $gray-light;
.icon {
color: $gray-light;
}
}
}
.taskboard-table-body {
.taskboard-tasks-box {
background: $whitish;
}
}
//*****************************
//** KANBAN
//******************************
//Kanban table
.kanban-table-header {
.task-colum-name {
background: $whitish;
border-top: 3px solid $gray-light;
.icon {
color: $gray-light;
}
}
}
.kanban-table-body {
.kanban-uses-box {
background: $whitish;
}
}

167
app/themes/taiga/variables.scss
View File

@ -31,35 +31,8 @@ $red-amaranth: #e43050;
$purple-eggplant: #810061; $purple-eggplant: #810061;
$yellow-pear: #bbe831; $yellow-pear: #bbe831;
//************************* $top-icon-color: #11241f;
//** LAYOUT $dropdown-color: rgba(darken($grayer, 20%), 1);
//*************************
// Default body color and background
body {
background: $white; // fallback
color: $grayer;
}
// Main
.master {
background: $white;
}
// Secondary panel
.menu-secondary {
background: $whitish;
}
// Tertiary panel
.menu-tertiary {
background-color: $primary-dark;
}
// Extra bar panel
.extrabar {
background: $whitish;
}
//************************** //**************************
@ -83,68 +56,6 @@ body {
%taiga {font-family: 'taiga';} %taiga {font-family: 'taiga';}
%mono {font-family: 'courier new', 'monospace';} %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: $gray-light;
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 $whitish;
}
blockquote,
blockquote p {
color: $gray;
}
cite {
color: $gray;
}
// lightbox // lightbox
%lightbox { %lightbox {
background: rgba($white, .95); background: rgba($white, .95);
@ -160,77 +71,3 @@ cite {
background: url('/images/invitation_bg.jpg') no-repeat center center; background: url('/images/invitation_bg.jpg') no-repeat center center;
background-size: cover; background-size: cover;
} }
.summary {
background: $grayer;
color: $white;
}
//************************
//** NAVIGATION
//***********************
// Top navigation bar
.navbar {
background: rgba($black, .5);
&:after {
background: url('../images/menu-vert.png') repeat top left;
}
}
$top-icon-color: #11241f;
$dropdown-color: rgba(darken($grayer, 20%), 1);
//In project left navigation bar
tg-project-menu {
background-color: $primary-dark;
background-image: url('../images/menu.png');
}
.main-nav {
svg path {
fill: $white;
}
}
//*****************************
//** TASKBOARD
//******************************
//Taskboard table
.taskboard-table-header {
.task-colum-name {
background: $whitish;
border-top: 3px solid $gray-light;
.icon {
color: $gray-light;
}
}
}
.taskboard-table-body {
.taskboard-tasks-box {
background: $whitish;
}
}
//*****************************
//** KANBAN
//******************************
//Kanban table
.kanban-table-header {
.task-colum-name {
background: $whitish;
border-top: 3px solid $gray-light;
.icon {
color: $gray-light;
}
}
}
.kanban-table-body {
.kanban-uses-box {
background: $whitish;
}
}