From 8aa25e68719e77ed47689aeffb0e9e9c03aa008c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Tue, 8 Sep 2015 15:21:36 +0200 Subject: [PATCH 1/2] Fix theme variables and custom stylesheets --- app/themes/high-contrast/custom.scss | 351 ++++++++++++++++++---- app/themes/high-contrast/variables.scss | 170 +---------- app/themes/material-design/custom.scss | 167 ++++++++++ app/themes/material-design/variables.scss | 168 +---------- app/themes/taiga/custom.scss | 168 ++++++++++- app/themes/taiga/variables.scss | 167 +--------- 6 files changed, 634 insertions(+), 557 deletions(-) diff --git a/app/themes/high-contrast/custom.scss b/app/themes/high-contrast/custom.scss index 4486c097..776f07eb 100644 --- a/app/themes/high-contrast/custom.scss +++ b/app/themes/high-contrast/custom.scss @@ -4,62 +4,17 @@ // Fezzik: I'm on the Brute Squad. // Max: [sees Fezzik's size] You are the Brute Squad! -.working-on .duty-id, -.watching .duty-id, -.activity-item p, -.table-team .avatar .position, -.points-per-role > li, -.private path { - color: $black; -} -.navbar a:hover { - color: $white; +//************************* +//** LAYOUT +//************************* + +// Default body color and background +body { + background: $white; // fallback + color: $grayer; } -.points-per-role > li:first-child { - 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; -} +// Main .master, .menu-secondary, @@ -70,10 +25,298 @@ h6 { 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 { 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 { .active { background: $black; diff --git a/app/themes/high-contrast/variables.scss b/app/themes/high-contrast/variables.scss index 365e34fa..54db8be6 100755 --- a/app/themes/high-contrast/variables.scss +++ b/app/themes/high-contrast/variables.scss @@ -31,36 +31,8 @@ $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: $white; -} - -// Tertiary panel -.menu-tertiary { - background-color: $white; -} - -// Extra bar panel -.extrabar { - background: $white; -} - +$top-icon-color: $white; +$dropdown-color: rgba(darken($primary-dark, 20%), 1); //************************** //** TYPOGRAPHY @@ -83,69 +55,6 @@ body { %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: $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 { 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-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; - } -} diff --git a/app/themes/material-design/custom.scss b/app/themes/material-design/custom.scss index 32e735da..173605d4 100644 --- a/app/themes/material-design/custom.scss +++ b/app/themes/material-design/custom.scss @@ -3,3 +3,170 @@ // Max: Beat it or I'll call the Brute Squad! // Fezzik: I'm on the Brute Squad. // Max: [sees Fezzik's size] You are the Brute Squad! + +//************************* +//** 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; + } +} diff --git a/app/themes/material-design/variables.scss b/app/themes/material-design/variables.scss index e33b43e1..0ee30c4f 100755 --- a/app/themes/material-design/variables.scss +++ b/app/themes/material-design/variables.scss @@ -31,36 +31,8 @@ $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%); -} - +$top-icon-color: $white; +$dropdown-color: rgba(darken($primary-dark, 20%), 1); //************************** //** TYPOGRAPHY @@ -93,68 +65,6 @@ body { %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); @@ -170,77 +80,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-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; - } -} diff --git a/app/themes/taiga/custom.scss b/app/themes/taiga/custom.scss index 32e735da..daf12698 100644 --- a/app/themes/taiga/custom.scss +++ b/app/themes/taiga/custom.scss @@ -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! -// Fezzik: I'm on the Brute Squad. -// Max: [sees Fezzik's size] You are the Brute Squad! +// 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; +} + + + +// 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; + } +} diff --git a/app/themes/taiga/variables.scss b/app/themes/taiga/variables.scss index c8595aa5..96d36e86 100755 --- a/app/themes/taiga/variables.scss +++ b/app/themes/taiga/variables.scss @@ -31,35 +31,8 @@ $red-amaranth: #e43050; $purple-eggplant: #810061; $yellow-pear: #bbe831; -//************************* -//** LAYOUT -//************************* - -// 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; -} +$top-icon-color: #11241f; +$dropdown-color: rgba(darken($grayer, 20%), 1); //************************** @@ -83,68 +56,6 @@ body { %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: $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 { background: rgba($white, .95); @@ -160,77 +71,3 @@ cite { background: url('/images/invitation_bg.jpg') no-repeat center center; 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; - } -} From fa0009c5edebb1f2410d5b39de81f84813aaecd7 Mon Sep 17 00:00:00 2001 From: Juanfran Date: Wed, 16 Sep 2015 08:05:21 +0200 Subject: [PATCH 2/2] move material-design font-face to custom.scss --- app/themes/material-design/custom.scss | 14 ++++++++++++++ app/themes/material-design/variables.scss | 14 -------------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/app/themes/material-design/custom.scss b/app/themes/material-design/custom.scss index 173605d4..667b7ba6 100644 --- a/app/themes/material-design/custom.scss +++ b/app/themes/material-design/custom.scss @@ -4,6 +4,20 @@ // Fezzik: I'm on 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 //************************* diff --git a/app/themes/material-design/variables.scss b/app/themes/material-design/variables.scss index 0ee30c4f..57ce0eb9 100755 --- a/app/themes/material-design/variables.scss +++ b/app/themes/material-design/variables.scss @@ -34,20 +34,6 @@ $yellow-pear: #ffc107; $top-icon-color: $white; $dropdown-color: rgba(darken($primary-dark, 20%), 1); -//************************** -//** 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;}