Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New colors updates (#11261)

Browse Source 
* Update $purple-400

* Update colors.scss

Adds new colors and updates existing variables.
This commit is contained in:
Tressley Cahill
2019-07-22 13:00:39 -04:00
committed by Matteo Pagliazzi
parent c99d62228f
commit 2f6584378d
3 changed files with 124 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/assets/scss/colors.scss
+36 -29
View File
@@ -5,9 +5,6 @@
$white: #FFFFFF;
$black: #1A181D;
$header-color: #D5C8FF;
$header-dark-background: #271B3D;
$gray-10: #34313A;
$gray-50: #4E4A57;
$gray-100: #686274;
@@ -18,13 +15,7 @@ $gray-500: #E1E0E3;
$gray-600: #EDECEE;
$gray-700: #F9F9F9;
$purple-50: #36205D;
$purple-100: #432874;
$purple-200: #4F2A93;
$purple-300: #6133B4;
$purple-400: #925CF3;
$purple-500: #BDA8FF;
$red-1: #6C0406;
$red-10: #F23035;
$red-50: #F74E52;
$red-100: #FF6165;
@@ -35,39 +26,55 @@ $maroon-50: #C92B2B;
$maroon-100: #DE3F3F;
$maroon-500: #F19595;
$yellow-5: #EE9109;
$yellow-10: #FFA623;
$yellow-50: #FFB445;
$yellow-100: #FFBE5D;
$yellow-500: #FFD9A0;
$orange-1: #7F3300;
$orange-10: #F47825;
$orange-50: #FA8537;
$orange-100: #FF944C;
$orange-500: #FFBF98;
$orange-500: #FFC8A7;
$yellow-1: #794B00;
$yellow-5: #EE9109;
$yellow-10: #FFA624;
$yellow-50: #FFB445;
$yellow-100: #FFBE5D;
$yellow-500: #FEDEAD;
$green-1: #005737;
$green-10: #1CA372;
$green-50: #20B780;
$green-100: #24CC8F;
$green-500: #77F4C7;
$teal-1: #005158;
$teal-10: #26A0AB;
$teal-50: #34B5C1;
$teal-100: #3BCAD7;
$teal-500: #8EEDF6;
$blue-1: #033F5E;
$blue-10: #2995CD;
$blue-50: #46A7D9;
$blue-100: #50B5E9;
$blue-500: #A9DCF6;
$teal-10: #20B2BF;
$teal-50: #3BCAD7;
$teal-100: #5EDDE9;
$teal-500: #A5F7FF;
$purple-50: #36205D;
$purple-100: #432874;
$purple-200: #4F2A93;
$purple-300: #6133B4;
$purple-400: #925CF3;
$purple-500: #BDA8FF;
$purple-600: #D5C8FF;
$green-10: #24CC8F;
$green-50: #3FDAA2;
$green-100: #5AEAB2;
$green-500: #A6FFDF;
$header-color: #D5C8FF;
$header-dark-background: #271B3D;
$suggested-item-color: #D5C8FF;
$healer-color: #cf8229;
$healer-color: #FFA624;
$rogue-color: #4F2A93;
$warrior-color: #B01515;
$wizard-color: #1f6ea2;
$warrior-color: #C92B2B;
$wizard-color: #2995CD;
$gems-color: #24CC8F;
$gold-color: #FFA623;
$gold-color: #FFA624;
$hourglass-color: #2995CD;
website/client/assets/scss/create-task.scss
+86 -86
View File
@@ -1,86 +1,86 @@
.create-task-area {
position: absolute;
right: 24px;
top: -24px;
z-index: 999;
align-items: center;
}
.slide-tasks-btns-leave-active, .slide-tasks-btns-enter-active {
max-width: 320px;
transition: all 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.slide-tasks-btns-enter, .slide-tasks-btns-leave-to {
max-width: 0;
opacity: 0;
overflow-x: hidden;
}
.diamond-btn {
margin-left: 24px;
background: $white;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
cursor: pointer;
color: $gray-200;
transform: rotate(45deg);
&:hover:not(.create-btn) {
color: $purple-400;
box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
}
.svg-icon {
width: 20px;
height: 20px;
transform: rotate(-45deg);
&.icon-habit {
width: 24px;
height: 16px;
}
&.icon-daily {
width: 21.6px;
height: 18px;
}
&.icon-todo {
width: 18px;
height: 18px;
}
&.icon-reward {
width: 23.4px;
height: 18px;
}
}
}
.create-btn {
color: $white;
background-color: $green-10;
height: 48px;
width: 48px;
.svg-icon {
width: 16px;
height: 16px;
transform: rotate(-45deg);
transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
}
&.open {
background: $gray-200 !important;
.svg-icon {
transform: rotate(-90deg);
}
}
}
.create-task-area {
position: absolute;
right: 24px;
top: -24px;
z-index: 999;
align-items: center;
}
.slide-tasks-btns-leave-active, .slide-tasks-btns-enter-active {
max-width: 320px;
transition: all 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.slide-tasks-btns-enter, .slide-tasks-btns-leave-to {
max-width: 0;
opacity: 0;
overflow-x: hidden;
}
.diamond-btn {
margin-left: 24px;
background: $white;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
cursor: pointer;
color: $gray-200;
transform: rotate(45deg);
&:hover:not(.create-btn) {
color: $purple-400;
box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
}
.svg-icon {
width: 20px;
height: 20px;
transform: rotate(-45deg);
&.icon-habit {
width: 24px;
height: 16px;
}
&.icon-daily {
width: 21.6px;
height: 18px;
}
&.icon-todo {
width: 18px;
height: 18px;
}
&.icon-reward {
width: 23.4px;
height: 18px;
}
}
}
.create-btn {
color: $white;
background-color: $green-100;
height: 48px;
width: 48px;
.svg-icon {
width: 16px;
height: 16px;
transform: rotate(-45deg);
transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
}
&.open {
background: $gray-200 !important;
.svg-icon {
transform: rotate(-90deg);
}
}
}
website/client/assets/scss/task.scss
+2 -2
View File
@@ -139,7 +139,7 @@
&-good { // green
&-control {
&-bg {
background: $green-10 !important;
background: $green-100 !important;
&:hover {
.habit-control { background: rgba(26, 24, 29, 0.48) !important; }
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
@@ -151,7 +151,7 @@
}
&-modal {
&-bg { background: $green-10 !important; }
&-bg { background: $green-100 !important; }
&-icon { color: $green-10 !important; }
&-text { color: #1ca372 !important; }
&-option-disabled:hover {