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

Create sample themes: meterial-design, high-contrast

stable
Xavier Julián 2015-06-19 15:35:32 +02:00 committed by David Barragán Merino
parent 6d202e923e
commit ac8894e62d
72 changed files with 984 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app-loader/app-loader.coffee
View File

@ -4,7 +4,7 @@ window.taigaConfig = {
"eventsUrl": null,
"debug": true,
"defaultLanguage": "en",
"themes": ["taiga"],
"themes": ["taiga", "material-design", "high-contrast"],
"defaultTheme": "taiga",
"publicRegisterEnabled": true,
"feedbackEnabled": true,

2
app/modules/home/projects/home-project-list.scss
View File

@ -7,7 +7,7 @@
padding: 1rem;
text-overflow: ellipsis;
&:hover {
border-color: $fresh-taiga;
border-color: $primary-light;
transition: all .3s linear;
p {
color: $gray;

16
app/modules/navigation-bar/navigation-bar.scss
View File

@ -1,11 +1,11 @@
$dropdown-width: 350px;
.navbar {
background: rgba($black, .5);
display: flex;
height: $navbar;
justify-content: space-between;
position: relative;
&:after {
background: url('../images/menu-vert.png') repeat top left;
background-size: 200%;
bottom: 0;
content: '';
@ -24,6 +24,7 @@
}
.nav-left {
>a {
color: $white;
padding: .5rem 1.5rem;
&.logo {
background: rgba($black, .2);
@ -41,6 +42,7 @@
.nav-right {
margin-left: auto;
a {
color: $white;
padding: .5rem 2rem;
}
}
@ -48,10 +50,12 @@
color: $white;
display: inline-block;
transition: all .2s linear;
&.active,
svg path {
fill: darken($primary-dark, 8%);
}
&:hover {
background: rgba($black, .2);
color: $fresh-taiga;
color: $primary-light;
svg path {
fill: $white;
}
@ -77,7 +81,7 @@
height: 1.2rem;
max-width: 1.2rem;
path {
fill: $dark-taiga;
fill: $top-icon-color;
transition: all .2s;
}
}
@ -130,7 +134,7 @@
padding: .8rem .5rem;
&:hover {
background: rgba($white, .1);
color: $fresh-taiga;
color: $primary-light;
}
&.see-more-projects-btn,
&.create-organization-btn,

2
app/modules/profile/styles/profile-contacts.scss
View File

@ -16,7 +16,7 @@
&:hover,
&.active {
border-bottom: 2px solid $gray-light;
color: $green-taiga;
color: $primary;
}
}
}

2
app/modules/profile/styles/profile-content-tabs.scss
View File

@ -18,7 +18,7 @@
top: 1px;
transition: color .2s linear;
.icon {
color: $green-taiga;
color: $primary;
transition: color .2s linear;
}
}

2
app/modules/profile/styles/profile-favorites.scss
View File

@ -14,7 +14,7 @@
&:hover,
&.active {
border-bottom: 2px solid $gray-light;
color: $green-taiga;
color: $primary;
}
}
}

2
app/modules/profile/styles/profile-sidebar.scss
View File

@ -16,7 +16,7 @@
color: $gray-light;
}
a {
color: $green-taiga;
color: $primary;
}
.trans-button {
margin-bottom: 1rem;

2
app/modules/projects/listing/projects-listing.scss
View File

@ -58,7 +58,7 @@
}
.active {
.icon {
color: $star-fill;
color: $primary-light;
}
}
}

2
app/modules/projects/listing/styles/project-list.scss
View File

@ -47,7 +47,7 @@
.project-list-single {
background: $white;
&:hover {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
cursor: move;
transition: background .3s;
.drag {

4
app/modules/user-timeline/user-timeline/user-timeline.scss
View File

@ -7,13 +7,13 @@
margin-bottom: 0;
}
a {
color: $green-taiga;
color: $primary;
&:first-child {
@extend %bold;
color: $gray;
}
&:hover {
color: $fresh-taiga;
color: $primary-light;
}
}
blockquote {

12
app/styles/components/buttons.scss
View File

@ -46,7 +46,7 @@
&.active {
span,
.icon {
color: $green-taiga;
color: $primary;
}
}
}
@ -59,10 +59,10 @@
.button-green,
a.button-green {
@extend %button;
background: $green-taiga;
background: $primary;
&:hover,
&.active {
background: $fresh-taiga;
background: $primary-light;
color: $white;
}
}
@ -73,7 +73,7 @@ a.button-gray {
background: $gray;
&:hover,
&.active {
background: $fresh-taiga;
background: $primary-light;
color: $white;
}
}
@ -111,13 +111,13 @@ a.button-gray {
.button-bulk {
@extend %button;
background: $green-taiga;
background: $primary;
padding: .35rem .5rem;
.icon {
margin-right: 0;
}
&:hover {
background: $fresh-taiga;
background: $primary-light;
}
}

2
app/styles/components/check.scss
View File

@ -39,7 +39,7 @@
}
input:checked {
+ div {
background-color: $fresh-taiga;
background-color: $primary-light;
margin-left: 50%;
transition: all .2s linear;
}

2
app/styles/components/created-by.scss
View File

@ -23,7 +23,7 @@
}
.created-user {
@extend %large;
color: $green-taiga;
color: $primary;
cursor: default;
&.editable {
cursor: pointer;

20
app/styles/components/kanban-task.scss
View File

@ -1,6 +1,6 @@
.kanban-task {
background: $postit;
border: 1px solid $postit-hover;
background: $card;
border: 1px solid $card-hover;
box-shadow: none;
cursor: move;
margin: .2rem;
@ -11,7 +11,7 @@
&:hover {
.icon-edit,
.icon-drag-h {
color: $postit-dark-hover;
color: $card-dark;
display: block;
opacity: 1;
transition: color .3s linear, opacity .3s linear;
@ -34,12 +34,12 @@
}
}
.kanban-tagline {
border-color: $postit-hover;
border-color: $card-hover;
display: flex;
height: .6rem;
}
.kanban-tag {
border-top: .3rem solid $postit-hover;
border-top: .3rem solid $card-hover;
flex-basis: 0;
flex-grow: 1;
height: .6rem;
@ -66,7 +66,7 @@
img {
margin: 0 auto;
&:hover {
border: 2px solid $green-taiga;
border: 2px solid $primary;
transition: border .3s linear;
}
}
@ -77,7 +77,7 @@
padding: 0 .5rem 0 .8rem;
}
.task-assigned {
color: $postit-dark-hover;
color: $card-dark;
display: block;
}
.task-num {
@ -90,12 +90,12 @@
.icon-edit,
.icon-drag-h {
@extend %large;
color: $postit-hover;
color: $card-hover;
opacity: 0;
position: absolute;
transition: opacity .2s linear;
&:hover {
color: darken($postit-hover, 15%);
color: darken($card-hover, 15%);
transition: color .3s linear;
}
}
@ -144,7 +144,7 @@
}
.task-points {
@extend %small;
color: darken($postit-hover, 15%);
color: darken($card-hover, 15%);
margin: 0;
span {
display: inline-block;

2
app/styles/components/markdown-help.scss
View File

@ -8,7 +8,7 @@ a.help-button {
transition: color .2s linear;
}
.icon {
color: $fresh-taiga;
color: $primary-light;
transition: color .2s linear;
}
}

2
app/styles/components/notification-message.scss
View File

@ -1,5 +1,5 @@
.notification-message-success {
background: rgba($fresh-taiga, .95);
background: rgba($primary-light, .95);
box-shadow: 0 25px 10px -15px rgba(0, 0, 0, .05);
opacity: 1;
right: -370px;

2
app/styles/components/paginator.scss
View File

@ -24,7 +24,7 @@
}
.active {
span {
background: $fresh-taiga;
background: $primary-light;
}
}
.dots {

10
app/styles/components/summary.scss
View File

@ -15,7 +15,7 @@ $summary-background: $grayer;
}
.data {
.number {
color: $fresh-taiga;
color: $primary-light;
}
}
.number {
@ -82,7 +82,7 @@ $summary-background: $grayer;
position: relative;
width: 15%;
.current-progress {
background: $fresh-taiga;
background: $primary-light;
height: 24px;
}
.defined-points {
@ -97,7 +97,7 @@ $summary-background: $grayer;
position: absolute;
}
.closed-points-progress {
background: $fresh-taiga;
background: $primary-light;
height: 24px;
position: absolute;
}
@ -136,11 +136,11 @@ $summary-background: $grayer;
float: right;
transition: color .3s linear;
&:hover {
color: $fresh-taiga;
color: $primary-light;
transition: color .3s linear;
}
&.active {
color: $fresh-taiga;
color: $primary-light;
}
&.active:hover {
color: $green-taiga;

4
app/styles/components/tag.scss
View File

@ -22,7 +22,7 @@
border: 1px solid $gray-light;
z-index: 99910;
.ui-state-focus {
background: $fresh-taiga;
background: $primary-light;
}
li {
cursor: pointer;
@ -49,7 +49,7 @@
.add-tag {
color: $gray-light;
&:hover {
color: $fresh-taiga;
color: $primary-light;
}
}
.icon-plus {

20
app/styles/components/taskboard-task.scss
View File

@ -1,6 +1,6 @@
.taskboard-task {
background: $postit;
border: 1px solid $postit-hover;
background: $card;
border: 1px solid $card-hover;
box-shadow: none;
cursor: move;
margin: .2rem;
@ -8,7 +8,7 @@
&:hover {
.icon-edit,
.icon-drag-h {
color: $postit-dark-hover;
color: $card-dark;
display: block;
opacity: 1;
transition: color .3s linear, opacity .3s linear;
@ -37,12 +37,12 @@
}
}
.taskboard-tagline {
border-color: $postit-hover;
border-color: $card-hover;
display: flex;
height: .6rem;
}
.taskboard-tag {
border-top: .3rem solid $postit-hover;
border-top: .3rem solid $card-hover;
flex-basis: 0;
flex-grow: 1;
height: .6rem;
@ -64,7 +64,7 @@
img {
margin: 0 auto;
&:hover {
border: 2px solid $green-taiga;
border: 2px solid $primary;
transition: border .3s linear;
}
}
@ -86,10 +86,10 @@
}
.task-assigned {
@extend %small;
color: $postit-dark-hover;
color: $card-dark;
display: block;
&:hover {
color: $green-taiga;
color: $primary;
}
}
.task-num {
@ -113,11 +113,11 @@
.icon-drag-h {
@extend %large;
bottom: .5rem;
color: $postit-hover;
color: $card-hover;
opacity: 0;
position: absolute;
&:hover {
color: $postit-dark-hover;
color: $card-dark;
}
}
.icon-edit {

4
app/styles/components/wysiwyg.scss
View File

@ -40,9 +40,9 @@
}
}
a {
color: $green-taiga;
color: $primary;
&:hover {
color: $fresh-taiga;
color: $primary-light;
}
}
p {

19
app/styles/core/base.scss
View File

@ -5,8 +5,6 @@ html {
}
body {
@extend %text;
background: $white; // fallback
color: $grayer;
line-height: 1.3;
min-height: 100%;
width: 100%;
@ -17,15 +15,6 @@ body {
}
&.loading-project {
overflow: hidden;
.projects-nav-overlay {
opacity: 1;
overflow: hidden;
transition: opacity 1s ease;
div {
opacity: 1;
transition: opacity 1s ease;
}
}
}
}
@ -38,7 +27,6 @@ body {
}
.master {
background: $white;
height: 100%;
min-height: 100%;
position: relative;
@ -57,7 +45,6 @@ body {
}
.menu-secondary {
background: $whitish;
flex: 0 0 auto;
min-height: $main-height;
min-width: 0;
@ -84,17 +71,11 @@ body {
}
.menu-tertiary {
background-color: $dark-taiga;
flex: 0 0 auto;
min-height: $main-height;
width: 250px;
}
.extrabar {
background: $whitish;
}
%main,
.main {
flex: 4;
flex-basis: 600px;

13
app/styles/core/elements.scss
View File

@ -3,16 +3,13 @@
// Blockquotes
blockquote,
blockquote p {
color: $gray;
line-height: 1.25rem;
}
blockquote {
border-left: 5px solid $whitish;
margin: 0 0 20px;
padding: .5rem 1.25rem;
cite {
@extend %small;
color: $gray;
display: block;
&:before {
content: '\2014 \0020';
@ -59,14 +56,14 @@ sup {
}
.is-selected {
.pika-button {
background: $green-taiga;
background: $primary;
border-radius: 0 !important;
box-shadow: inset 0 1px 3px $green-taiga;
box-shadow: inset 0 1px 3px $primary;
}
}
.is-today {
.pika-button {
color: $green-taiga;
color: $primary;
}
&.is-selected {
button {
@ -76,9 +73,9 @@ sup {
}
.pika-button {
&:hover {
background: $fresh-taiga !important; //Important added because plugin has it :S
background: $primary-light !important; //Important added because plugin has it :S
border-radius: 0 !important; //Important added because plugin has it :S
box-shadow: inset 0 1px 3px $fresh-taiga !important; //Important added because plugin has it :S
box-shadow: inset 0 1px 3px $primary-light !important; //Important added because plugin has it :S
}
}
}

10
app/styles/core/forms.scss
View File

@ -19,17 +19,11 @@ input[type="date"],
input[type="password"],
select,
textarea {
background: $whitish;
border: 1px solid $gray-light;
color: $grayer;
border: 1px solid;
margin: 0;
padding: 8px;
width: 100%;
@include placeholder {
color: darken($gray-light, 10%);
}
&.checksley-error {
border: 1px solid $red;
transition: border .3s linear;
}
}
@ -42,14 +36,12 @@ textarea {
.checksley-error-list {
@extend %small;
background: rgba($whitish, .8);
margin-bottom: 0;
padding: 0 .5rem;
position: absolute;
right: 2rem;
top: 10px;
li {
color: $red;
padding: .2rem;
}
}

4
app/styles/core/typography.scss
View File

@ -53,7 +53,7 @@ h1 {
max-width: 40%;
}
.green {
color: $green-taiga;
color: $primary;
}
.date {
@include ellipsis(500px);
@ -92,10 +92,8 @@ hr {
// __Links__
a,
a:visited {
color: $grayer;
text-decoration: none;
&:hover {
color: $green-taiga;
transition: color .3s linear;
}
}

12
app/styles/dependencies/helpers.scss
View File

@ -16,7 +16,6 @@
%mono {font-family: 'courier new', 'monospace';}
%lightbox {
background: rgba($white, .95);
bottom: 0;
display: none;
left: 0;
@ -62,17 +61,6 @@
}
}
// Background
%triangled-bg {
background: url('/images/bg.png') no-repeat center center;
background-size: cover;
}
%background-taiga {
background: url('/images/invitation_bg.jpg') no-repeat center center;
background-size: cover;
}
%loading-spinner {
animation-timing-function: ease-in-out;
animation: rotate 1.5s cubic-bezier(.00, .05, .87, 1.04) infinite alternate;

2
app/styles/dependencies/mixins.scss
View File

@ -57,7 +57,7 @@
border: 0;
}
&:hover {
color: $fresh-taiga;
color: $primary-light;
transition: color .3s linear;
&.point {
color: $white;

5
app/styles/layout/admin-project-values.scss
View File

@ -37,8 +37,3 @@
display: inline-block;
}
}
//.project-values-options {
// margin-bottom: 1rem;
// text-align: right;
//}

2
app/styles/layout/invitation.scss
View File

@ -84,7 +84,7 @@
}
.button-blackish {
&:hover {
background: $green-taiga;
background: $primary;
}
}
.login-form {

8
app/styles/layout/login.scss
View File

@ -41,17 +41,11 @@
form {
margin-bottom: 1rem;
}
input {
background: $white;
@include placeholder {
color: $gray-light;
}
}
.login-text,
.register-text {
text-align: center;
a:hover {
color: $fresh-taiga;
color: $primary-light;
}
}
.button {

4
app/styles/layout/not-found.scss
View File

@ -25,9 +25,9 @@
margin-bottom: 3rem;
}
a {
color: $green-taiga;
color: $primary;
&:hover {
color: $fresh-taiga;
color: $primary-light;
}
}
}

2
app/styles/layout/team.scss
View File

@ -3,7 +3,7 @@
margin: 1rem 0;
span {
&:last-child {
color: $green-taiga;
color: $primary;
}
}
}

12
app/styles/layout/us-detail.scss
View File

@ -103,7 +103,7 @@
padding: 0 .2rem;
}
a:hover {
color: $green-taiga;
color: $primary;
}
a:first-child {
border: 0;
@ -237,7 +237,7 @@
.us-detail-status {
@extend %large;
color: $green-taiga;
color: $primary;
vertical-align: middle;
}
@ -247,7 +247,7 @@
margin-bottom: 1rem;
position: relative;
.current-progress {
background: $fresh-taiga;
background: $primary-light;
height: 26px;
left: 0;
position: absolute;
@ -281,7 +281,7 @@
text-align: center;
transition: color .3s linear;
&.active {
background: rgba($fresh-taiga, .9);
background: rgba($primary-light, .9);
color: $whitish;
}
&:first-child {
@ -316,7 +316,7 @@
text-align: center;
&:hover,
&.active {
background: $fresh-taiga;
background: $primary-light;
color: $white;
}
}
@ -381,7 +381,7 @@
}
}
&.active {
background: $green-taiga;
background: $primary;
}
}
.item-block {

4
app/styles/modules/admin/admin-custom-attributes.scss
View File

@ -24,7 +24,7 @@
}
}
.row:hover {
background: rgba($fresh-taiga, .05);
background: rgba($primary-light, .05);
cursor: move;
transition: background .2s linear;
.icon-drag-v,
@ -89,7 +89,7 @@
transition: color .2s linear;
vertical-align: middle;
&:hover {
color: $green-taiga;
color: $primary;
transition: color .2s linear;
}
}

2
app/styles/modules/admin/admin-functionalities.scss
View File

@ -19,7 +19,7 @@
vertical-align: top;
width: 32%;
&.active {
background-color: rgba($green-taiga, .3);
background-color: rgba($primary, .3);
opacity: 1;
}
.icon {

3
app/styles/modules/admin/admin-membership-table.scss
View File

@ -55,9 +55,6 @@
.pending {
background-color: $red-light;
color: $white;
.icon {
float: rsdsdfdvsdvight;
}
&:hover {
background-color: $red;
color: $white;

4
app/styles/modules/admin/admin-project-profile.scss
View File

@ -54,8 +54,8 @@
}
.privacy-project:checked {
+ label {
background: $fresh-taiga;
border: 1px solid $fresh-taiga;
background: $primary-light;
border: 1px solid $primary-light;
span {
color: $white;
}

2
app/styles/modules/admin/admin-roles.scss
View File

@ -27,7 +27,7 @@
margin-left: .5rem;
transition: color.3s linear;
&:hover {
color: $green-taiga;
color: $primary;
transition: color.3s linear;
}
}

4
app/styles/modules/admin/admin-submenu.scss
View File

@ -15,12 +15,12 @@
justify-content: space-between;
padding: 1rem 0 1rem 1rem;
&:hover {
background: lighten($dark-taiga, 3%);
background: lighten($primary-dark, 3%);
color: $white;
transition: all .2s;
}
&.active {
background: lighten($dark-taiga, 10%);
background: lighten($primary-dark, 10%);
color: $white;
transition: all .2s;
}

12
app/styles/modules/admin/admin-third-parties-webhooks.scss
View File

@ -47,10 +47,10 @@
vertical-align: middle;
}
a {
color: $green-taiga;
color: $primary;
margin-left: .5rem;
&:hover {
color: $fresh-taiga;
color: $primary-light;
}
}
}
@ -65,7 +65,7 @@
transition: color .2s linear;
vertical-align: middle;
&:hover {
color: $green-taiga;
color: $primary;
transition: color .2s linear;
}
@ -102,7 +102,7 @@
padding: .5rem;
transition: background .2s linear;
&:hover {
background: rgba($fresh-taiga, .1);
background: rgba($primary-light, .1);
transition: background .2s linear;
}
&.history-single-open {
@ -127,7 +127,7 @@
margin-right: .5rem;
width: .8rem;
&.history-success {
background: $fresh-taiga;
background: $primary-light;
}
&.history-error {
background: $red;
@ -149,7 +149,7 @@
@extend %small;
color: $gray-light;
&:hover {
color: $fresh-taiga;
color: $primary-light;
transition: color .2s linear;
}
}

4
app/styles/modules/admin/project-values.scss
View File

@ -33,7 +33,7 @@
}
.project-values-row {
&:hover {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
cursor: move;
transition: background .2s ease-in;
.icon {
@ -72,7 +72,7 @@
color: $gray;
margin-right: .5rem;
&:hover {
color: $green-taiga;
color: $primary;
transition: color .3s linear;
.icon-delete {
color: $red;

12
app/styles/modules/backlog/backlog-table.scss
View File

@ -67,7 +67,7 @@
@include popover(200px, 0, 65%, '', '');
a {
&.active {
background: $fresh-taiga;
background: $primary-light;
color: $white;
}
}
@ -90,7 +90,7 @@
text-align: center;
&:hover,
&.active {
background: $fresh-taiga;
background: $primary-light;
color: $white;
}
}
@ -122,7 +122,7 @@
flex-wrap: nowrap;
position: relative;
&:hover {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
transition: background .2s ease-in;
.us-settings,
.icon-drag-v {
@ -134,7 +134,7 @@
border-bottom: 0;
}
&.ui-sortable-helper {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
box-shadow: 1px 1px 10px rgba($black, .1);
transition: background .2s ease-in;
}
@ -151,7 +151,7 @@
width: 100%;
}
.row-selected {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
transition: background .2s ease-in;
}
.user-story-name {
@ -163,7 +163,7 @@
margin-right: 1rem;
vertical-align: super;
&:checked+a {
color: $fresh-taiga;
color: $primary-light;
transition: color .2s ease-in;
}
}

8
app/styles/modules/backlog/sprints.scss
View File

@ -69,7 +69,7 @@
transition: all .2s linear;
}
&:hover {
color: $fresh-taiga;
color: $primary-light;
transition: color .2s linear;
}
}
@ -82,7 +82,7 @@
transition: opacity .2s ease-in;
vertical-align: baseline;
&:hover {
color: $green-taiga;
color: $primary;
transition: color .2s ease-in;
}
}
@ -126,7 +126,7 @@
position: relative;
width: 100%;
.current-progress {
background: $green-taiga;
background: $primary;
border-radius: 2px;
height: 8px;
left: 0;
@ -158,7 +158,7 @@
height: 40px;
}
&.ui-sortable-helper {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
box-shadow: 1px 1px 10px rgba($black, .1);
transition: background .2s ease-in;
}

9
app/styles/modules/backlog/taskboard-table.scss
View File

@ -91,7 +91,7 @@ $column-margin: 0 10px 0 0;
margin-right: .3rem;
transition: color .2s linear;
&:hover {
color: $green-taiga;
color: $primary;
}
&.hfold,
&.hunfold {
@ -178,9 +178,6 @@ $column-margin: 0 10px 0 0;
}
}
}
.taskboard-tasks-box {
background: $whitish;
}
.taskboard-userstory-box {
padding: .5rem .5rem .5rem 1.5rem;
@ -191,7 +188,7 @@ $column-margin: 0 10px 0 0;
top: .7rem;
transition: color .2s linear;
&:hover {
color: $green-taiga;
color: $primary;
}
&.icon-plus {
right: 2rem;
@ -234,7 +231,7 @@ $column-margin: 0 10px 0 0;
.points-list {
a {
color: $green-taiga;
color: $primary;
margin-left: .5rem;
&:hover {
span {

2
app/styles/modules/common/assigned-to.scss
View File

@ -33,7 +33,7 @@
}
.user-assigned {
@extend %large;
color: $green-taiga;
color: $primary;
cursor: default;
line-height: 1.5rem;
&.editable {

12
app/styles/modules/common/attachments.scss
View File

@ -23,7 +23,7 @@
color: $grayer;
cursor: pointer;
&:hover {
color: $green-taiga;
color: $primary;
transition: color .2s ease-in;
}
}
@ -45,7 +45,7 @@
}
}
&.ui-sortable-helper {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
box-shadow: 1px 1px 10px rgba($black, .1);
transition: background .2s ease-in;
}
@ -96,7 +96,7 @@
display: block;
position: absolute;
&:hover {
color: $green-taiga;
color: $primary;
}
}
.settings {
@ -143,7 +143,7 @@
}
}
.percentage {
background: rgba($green-taiga, .1);
background: rgba($primary, .1);
bottom: 0;
height: 40px;
left: 0;
@ -162,11 +162,11 @@
color: $gray-light;
}
.more-attachments-num {
color: $green-taiga;
color: $primary;
margin-left: .5rem;
}
&:hover {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
transition: background .2s ease-in;
}
}

2
app/styles/modules/common/category-config.scss
View File

@ -28,7 +28,7 @@
margin-right: .1rem;
width: 15px;
&.active {
background: $green-taiga;
background: $primary;
}
&.inactive {
background: $gray;

6
app/styles/modules/common/colors-table.scss
View File

@ -24,7 +24,7 @@
justify-content: center;
padding: 1rem;
&:hover {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
cursor: move;
transition: background .2s ease-in;
.icon {
@ -117,7 +117,7 @@
margin-right: 1rem;
opacity: 0;
&:hover {
color: $green-taiga;
color: $primary;
transition: all .2s ease-in;
}
&.icon-check-square {
@ -131,7 +131,7 @@
}
.icon-check-square {
@extend %large;
color: $green-taiga;
color: $primary;
}
}

2
app/styles/modules/common/custom-fields.scss
View File

@ -43,7 +43,7 @@
color: $gray-light;
}
a:hover {
color: $green-taiga;
color: $primary;
}
}
}

2
app/styles/modules/common/external-reference.scss
View File

@ -20,7 +20,7 @@
padding: 0 .2rem;
transition: color .3s linear;
&:hover {
color: $green-taiga;
color: $primary;
}
&:first-child {
border: 0;

18
app/styles/modules/common/history.scss
View File

@ -6,7 +6,7 @@
padding: .5rem;
&:hover {
.icon {
color: $green-taiga;
color: $primary;
transform: rotate(180deg);
transition: all .2s linear;
}
@ -58,7 +58,7 @@
color: $grayer;
}
&:hover {
color: $green-taiga;
color: $primary;
transition: color .2s ease-in;
}
}
@ -119,7 +119,7 @@
display: block;
padding: 1rem 0 1rem 1rem;
&:hover {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
transition: background .2s ease-in;
}
}
@ -130,7 +130,7 @@
display: block;
padding: 1rem;
.prev-comments-num {
color: $green-taiga;
color: $primary;
margin-left: .5rem;
}
}
@ -180,7 +180,7 @@
color: $gray-light;
margin-left: .3rem;
&:hover {
color: $green-taiga;
color: $primary;
transition: color .2s linear;
}
}
@ -206,12 +206,12 @@
vertical-align: baseline;
}
&:hover {
color: $green-taiga;
color: $primary;
transition: color .2s linear;
}
}
.username {
color: $green-taiga;
color: $primary;
margin-bottom: .5rem;
}
.activity-user {
@ -223,7 +223,7 @@
}
}
.activity-username {
color: $green-taiga;
color: $primary;
margin-bottom: .5rem;
}
.activity-content {
@ -272,7 +272,7 @@
display: block;
padding: 1rem;
.prev-activity-num {
color: $green-taiga;
color: $primary;
margin-left: .5rem;
}
}

12
app/styles/modules/common/lightbox.scss
View File

@ -57,8 +57,8 @@
.requirement,
.iocaine {
&:hover {
background: $fresh-taiga;
border: 1px solid $green-taiga;
background: $primary-light;
border: 1px solid $primary;
color: $white;
transition: all .2s ease-in;
}
@ -79,8 +79,8 @@
.team-requirement,
.iocaine-flag {
input:checked+label {
background: $green-taiga;
border: 1px solid $green-taiga;
background: $primary;
border: 1px solid $primary;
color: $white;
}
@ -400,7 +400,7 @@
padding: 3px;
position: relative;
.bar {
background: $fresh-taiga;
background: $primary-light;
height: 24px;
position: absolute;
transition: width .1s linear;
@ -477,7 +477,7 @@
position: relative;
&:hover,
&.active {
background: lighten($green-taiga, 55%);
background: lighten($primary, 55%);
cursor: pointer;
}
&:hover {

9
app/styles/modules/common/nav.scss
View File

@ -1,8 +1,6 @@
$label-arrow-wh: 12px;
tg-project-menu {
background-color: $dark-taiga;
background-image: url('../images/menu.png');
background-position: 0 -300px;
min-height: $main-height;
padding: 1rem 0;
@ -22,7 +20,7 @@ tg-project-menu {
}
a:hover {
background: rgba($black, .2);
color: $fresh-taiga;
color: $primary-light;
transition: color .3s linear;
.helper {
@extend %small;
@ -52,7 +50,6 @@ tg-project-menu {
}
}
svg path {
fill: $white;
opacity: 1;
}
span {
@ -70,9 +67,9 @@ tg-project-menu {
}
.active {
background: rgba($black, .2);
color: $fresh-taiga;
color: $primary-light;
svg path {
fill: $fresh-taiga;
fill: $primary-light;
opacity: 1;
}
}

141
app/styles/modules/common/projects-nav.scss
View File

@ -1,141 +0,0 @@
.projects-nav {
background-color: $menu;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
overflow: hidden;
padding: 2rem 1rem;
position: fixed;
top: 0;
transform: translate3d(-300px, 0, 0);
width: 300px;
z-index: 99;
form {
flex-shrink: 0;
}
h1 {
color: $white;
flex-shrink: 0;
margin-bottom: 2rem;
text-align: center;
}
input {
background-color: $gray;
color: $whitish;
}
.icon-search {
position: absolute;
right: .7rem;
top: .7rem;
}
ul {
left: 0;
margin-bottom: 0;
margin-top: 1rem;
position: relative;
top: 0;
width: 100%;
}
.projects-pagination {
display: flex;
flex-direction: column;
margin-top: 1rem;
min-height: 1px; //firefox bug #2057
}
.create-project-button-wrapper {
display: flex;
flex-shrink: 0;
margin-top: 1rem;
.create-project-button {
flex-grow: 8;
margin-right: .2rem;
text-align: center;
}
.import-project-button {
flex-grow: 1;
padding-left: .5rem;
padding-right: .5rem;
text-align: center;
.icon {
color: $grayer;
margin: 0;
}
}
}
.v-pagination-previous,
.v-pagination-next {
flex-shrink: 0;
}
}
.projects-list {
a {
@extend %large;
@extend %title;
color: $whitish;
display: block;
padding: 1rem;
position: relative;
text-transform: uppercase;
width: 100%;
&.active,
&:hover {
background-color: $gray;
color: $green-taiga;
transition: background-color .3s linear;
.icon {
opacity: 1;
transition: opacity .3s linear;
}
}
.project-name {
display: block;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.icon {
color: $whitish;
opacity: 0;
position: absolute;
right: 1rem;
top: 1rem;
}
li {
border-bottom: 2px solid $gray;
}
}
.projects-nav-overlay {
// @include transition (all 1s ease);
@extend %background-taiga;
// background-blend-mode: multiply;
// background-color: $green-taiga;
bottom: 0;
display: none;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 99900;
.container {
left: -200px;
margin: 0 auto;
margin-top: 15%;
opacity: 0;
position: relative;
transform: translateY(-50%);
width: 150px;
}
p {
@extend %medium;
color: $fresh-taiga;
padding-top: 20px;
text-align: center;
}
}

4
app/styles/modules/common/related-tasks.scss
View File

@ -19,7 +19,7 @@
color: $grayer;
cursor: pointer;
&:hover {
color: $green-taiga;
color: $primary;
transition: color .2s ease-in;
}
}
@ -153,7 +153,7 @@
}
.iocaine,
.iocaine:hover {
background: rgba($fresh-taiga, .3);
background: rgba($primary-light, .3);
.icon-iocaine {
@extend %large;
display: inline-block;

12
app/styles/modules/common/wizard.scss
View File

@ -1,6 +1,6 @@
.wizard-create-project {
@extend %lightbox;
background: url('/images/invitation_bg.jpg') no-repeat center center;
@extend %background-taiga;
background-size: cover;
color: $white;
text-align: center;
@ -77,7 +77,7 @@
}
input:checked {
+label {
background: rgba($fresh-taiga, .7);
background: rgba($primary-light, .7);
transition: background .3s ease-in;
}
}
@ -90,7 +90,7 @@
text-align: center;
transition: background .3s ease-in;
&:hover {
background: rgba($green-taiga, .7);
background: rgba($primary, .7);
transition: background .3s ease-in;
}
.icon {
@ -160,12 +160,8 @@
left: 25%;
}
&:nth-child(2) {
// left: 50%;
left: 75%;
}
// &:nth-child(3) {
// left: 75%;
// }
}
}
.progress-bar-wrapper {
@ -173,7 +169,7 @@
height: .5rem;
}
.bar {
background: rgba($fresh-taiga, .9);
background: rgba($primary-light, .9);
height: .5rem;
left: 0;
position: absolute;

2
app/styles/modules/create-project.scss
View File

@ -47,7 +47,7 @@
margin-bottom: .5rem;
text-align: center;
&:hover {
background: $fresh-taiga;
background: $primary-light;
}
}
a {

4
app/styles/modules/filters/filters.scss
View File

@ -75,7 +75,7 @@
}
.custom-filters {
.title {
color: $green-taiga;
color: $primary;
}
}
a {
@ -84,7 +84,7 @@
padding: .5rem 0 .5rem .5rem;
transition: color .2s ease-in;
&:hover {
color: $green-taiga;
color: $primary;
transition: color .2s ease-in;
.icon {
opacity: 1;

6
app/styles/modules/home-project.scss
View File

@ -49,9 +49,6 @@
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
a {
display: block;
}
li {
margin-right: .14rem;
width: 24%;
@ -59,6 +56,9 @@
margin-right: 0;
}
}
a {
display: block;
}
img {
border-radius: .2rem;
width: 100%;

4
app/styles/modules/issues/issues-table.scss
View File

@ -6,7 +6,7 @@
}
.row {
&:hover {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
transition: background .2s ease-in;
}
.icon {
@ -14,7 +14,7 @@
}
}
.row-selected {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
transition: background .2s ease-in;
}
.title {

2
app/styles/modules/kanban/kanban-table.scss
View File

@ -87,7 +87,7 @@ $column-margin: 0 10px 0 0;
margin-right: .3rem;
transition: color .2s linear;
&:hover {
color: $green-taiga;
color: $primary;
}
&.hfold,
&.hunfold {

5
app/styles/modules/search/search-result-table.scss
View File

@ -1,5 +1,4 @@
.search-result-table {
.empty {
.title {
border: 0;
@ -13,7 +12,7 @@
justify-content: space-between;
padding: .5rem;
&:hover {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
transition: background .2s ease-in;
}
.ref {
@ -40,7 +39,7 @@
}
}
.row-selected {
background: lighten($green-taiga, 60%);
background: lighten($primary, 60%);
transition: background .2s ease-in;
}

2
app/styles/modules/team/team-filters.scss
View File

@ -18,7 +18,7 @@
padding: 1rem 0 1rem 1rem;
&:hover,
&.active {
color: $green-taiga;
color: $primary;
transition: color .3s linear;
}
&.active.icon {

2
app/styles/modules/team/team-table.scss
View File

@ -28,7 +28,7 @@
color: $grayer;
}
.top {
color: $fresh-taiga;
color: $primary-light;
opacity: 1;
}
&:hover {

4
app/styles/modules/user-settings/mail-notifications-table.scss
View File

@ -33,7 +33,7 @@
display: none;
&:checked {
+label {
background: $green-taiga;
background: $primary;
transition: background .3s linear;
}
}
@ -45,7 +45,7 @@
display: block;
padding: .5rem;
&:hover {
background: $fresh-taiga;
background: $primary-light;
cursor: pointer;
transition: background .3s linear;
}

2
app/styles/modules/wiki/wiki-summary.scss
View File

@ -22,7 +22,7 @@
}
.username {
@extend %large;
color: $fresh-taiga;
color: $primary-light;
white-space: nowrap;
}
}

117
app/themes/high-contrast/custom.scss Normal file
View File

@ -0,0 +1,117 @@
// Any styles in this stylesheet will override any previous defined style in Taiga.
// 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!
.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;
}
.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;
}
.master,
.menu-secondary,
.menu-tertiary,
.extrabar {
background: $white;
border-left: 1px solid $black;
border-right: 1px solid $black;
}
.button-gray {
background: $black;
}
.settings-nav {
.active {
background: $black;
color: $white;
}
}
.admin-submenu ul a {
color: $black;
}
.policy-table {
input:checked {
+label {
color: $white;
}
}
label {
color: $black;
&:hover {
color: $white;
}
}
}
.admin-common .admin-subtitle {
color: $black;
}
.admin-functionalities .functionality.active {
background: $white;
border: 1px solid $black;
}
.admin-membership-table {
.avatar .email,
.delete {
color: $black;
}
}

237
app/themes/high-contrast/variables.scss Executable file
View File

@ -0,0 +1,237 @@
//*************************
//** COLORS
//************************
// Colors
$black: #000;
$blackish: #212121;
$grayer: #212121;
$gray: #757575;
$gray-light: #f5f5f5;
$whitish: #f5f5f5;
$white: #fff;
// Primary colors
$primary-light: #212121;
$primary: #000;
$primary-dark: #000;
//Warning colors
$red-light: #ff0062;
$red: #ff2400;
//Card color
$card: #F0EFD1;
$card-hover: $black;
$card-dark: $black;
$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: $white;
}
// Tertiary panel
.menu-tertiary {
background-color: $white;
}
// Extra bar panel
.extrabar {
background: $white;
}
//**************************
//** TYPOGRAPHY
//**************************
// 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: Arial, Helvetica, sans-serif; }
%light {font-family: Arial, Helvetica, sans-serif; font-weight: 100; }
%text {font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
%bold {font-family: Arial, Helvetica, sans-serif; font-weight:800; }
%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);
}
// Background images
%triangled-bg {
background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center;
background-size: cover;
}
%background-taiga {
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;
}
}

5
app/themes/material-design/custom.scss Normal file
View File

@ -0,0 +1,5 @@
// Any styles in this stylesheet will override any previous defined style in Taiga.
// 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!

246
app/themes/material-design/variables.scss Executable file
View File

@ -0,0 +1,246 @@
//*************************
//** 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;
}
}

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

@ -0,0 +1,5 @@
// Any styles in this stylesheet will override any previous defined style in Taiga.
// 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!

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

@ -1,5 +1,8 @@
// Colors
//*************************
//** COLORS
//************************
// Colors
$black: #000;
$blackish: #050505;
$grayer: #444;
@ -8,29 +11,226 @@ $gray-light: #b8b8b8;
$whitish: #f5f5f5;
$white: #fff;
$green-taiga: #72a114;
$fresh-taiga: #9dce0a;
$dark-taiga: #879b89;
// Primary colors
$primary-light: #9dce0a;
$primary: #72a114;
$primary-dark: #879b89;
//Warning colors
$red-light: #ff8282;
$red: #f00;
$postit: #fff8e4;
$postit-hover: #f1e8cd;
$postit-dark-hover: #cfc29b;
//Card color
$card: #fff8e4;
$card-hover: #f1e8cd;
$card-dark: #cfc29b;
//Loading bar
$green-japanese-laurel: #237400;
$green-olive: #618000;
$red-amaranth: #e43050;
$purple-eggplant: #810061;
$yellow-pear: #bbe831;
$menu: #232323;
$star-fill: #edd400;
//*************************
//** 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;
}
//**************************
//** TYPOGRAPHY
//**************************
// 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: $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);
}
// Background images
%triangled-bg {
background: url('/images/bg.png') no-repeat center center;
background-size: cover;
}
%background-taiga {
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 menu values
$top-icon-color: #11241f;
$dropdown-width: 350px;
$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;
}
}