mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 09:11:21 -05:00
Merge pull request #175 from uxbox/250/review-color-variables
Change color variables
This commit is contained in:
commit
043cf27ace
18 changed files with 93 additions and 1260 deletions
|
@ -1,75 +0,0 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
// Colors
|
||||
$color-white: #ffffff;
|
||||
$color-black: #000000;
|
||||
$color-gray: #90969d;
|
||||
|
||||
// Main color
|
||||
$color-primary: #78dbbe;
|
||||
|
||||
// Secondary colors
|
||||
$color-success: #b6dd75;
|
||||
$color-complete : #a599c6;
|
||||
$color-warning: #e6a16f;
|
||||
$color-danger: #de4762;
|
||||
$color-info: #59b9e2;
|
||||
|
||||
// Mixing Color varriable for creating both light and dark colors
|
||||
$mix-percentage-dark: 81%;
|
||||
$mix-percentage-darker: 60%;
|
||||
$mix-percentage-light: 80%;
|
||||
$mix-percentage-lighter: 20%;
|
||||
|
||||
// Gray scale
|
||||
$color-gray-light: mix($color-gray, $color-white, $mix-percentage-light);
|
||||
$color-gray-lighter: mix($color-gray, $color-white, $mix-percentage-lighter);
|
||||
$color-gray-dark: mix($color-gray, $color-black, $mix-percentage-dark);
|
||||
$color-gray-darker: mix($color-gray, $color-black, $mix-percentage-darker);
|
||||
|
||||
// Lighter colors
|
||||
$color-success-light: mix($color-success, $color-white, $mix-percentage-light);
|
||||
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter);
|
||||
|
||||
$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light);
|
||||
$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter);
|
||||
|
||||
$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light);
|
||||
$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter);
|
||||
|
||||
$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light);
|
||||
$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter);
|
||||
|
||||
$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light);
|
||||
$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter);
|
||||
|
||||
$color-info-light: mix($color-info, $color-white, $mix-percentage-light);
|
||||
$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter);
|
||||
|
||||
// Darker colors
|
||||
$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark);
|
||||
$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker);
|
||||
|
||||
$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark);
|
||||
$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker);
|
||||
|
||||
$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark);
|
||||
$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker);
|
||||
|
||||
$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark);
|
||||
$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker);
|
||||
|
||||
$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark);
|
||||
$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker);
|
||||
|
||||
$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark);
|
||||
$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker);
|
||||
|
||||
// bg transparent
|
||||
$color-dark-bg: rgba(0,0,0,.4);
|
||||
$color-light-bg: rgba(255,255,255,.6);
|
|
@ -2,25 +2,32 @@
|
|||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
// Colors
|
||||
$color-white: #ffffff;
|
||||
$color-black: #000000;
|
||||
$color-gray: #90969d;
|
||||
$color-canvas: #E8E9EA;
|
||||
|
||||
// Main color
|
||||
$color-primary: #31EFB8;
|
||||
|
||||
// Secondary colors
|
||||
$color-success: #b6dd75;
|
||||
$color-success: #49D793;
|
||||
$color-complete : #a599c6;
|
||||
$color-warning: #e6a16f;
|
||||
$color-danger: #de4762;
|
||||
$color-warning: #FC8802;
|
||||
$color-danger: #E65244;
|
||||
$color-info: #59b9e2;
|
||||
|
||||
// Gray scale
|
||||
$color-gray-10: #E3E3E3;
|
||||
$color-gray-20: #b1b2b5;
|
||||
$color-gray-30: #7B7D85;
|
||||
$color-gray-40: #64666A;
|
||||
$color-gray-50: #303236;
|
||||
$color-gray-60: #1F1F1F;
|
||||
|
||||
// Mixing Color variable for creating both light and dark colors
|
||||
$mix-percentage-dark: 81%;
|
||||
$mix-percentage-darker: 60%;
|
||||
|
@ -28,19 +35,6 @@ $mix-percentage-light: 80%;
|
|||
$mix-percentage-lighter: 20%;
|
||||
$mix-percentage-lightest: 10%;
|
||||
|
||||
// Gray scale
|
||||
$color-gray-light: mix($color-gray, $color-white, $mix-percentage-light);
|
||||
$color-gray-lighter: mix($color-gray, $color-white, $mix-percentage-lighter);
|
||||
$color-gray-lightest: mix($color-gray, $color-white, $mix-percentage-lightest);
|
||||
$color-gray-dark: mix($color-gray, $color-black, $mix-percentage-dark);
|
||||
$color-gray-darker: mix($color-gray, $color-black, $mix-percentage-darker);
|
||||
$color-gray-10: #E3E3E3;
|
||||
$color-gray-20: #b1b2b5;
|
||||
$color-gray-30: #7B7D85;
|
||||
$color-gray-40: #64666A;
|
||||
$color-gray-50: #303236;
|
||||
$color-gray-60: #1F1F1F;
|
||||
|
||||
// Lighter colors
|
||||
$color-success-light: mix($color-success, $color-white, $mix-percentage-light);
|
||||
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter);
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -67,10 +67,10 @@
|
|||
|
||||
.btn-gray {
|
||||
@extend %btn;
|
||||
background: $color-gray;
|
||||
background: $color-gray-30;
|
||||
color: $color-white;
|
||||
&:hover {
|
||||
background: $color-gray-dark;
|
||||
background: $color-gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -259,7 +259,7 @@ ul.slider-dots {
|
|||
}
|
||||
|
||||
.tag {
|
||||
background-color: $color-gray-light;
|
||||
background-color: $color-gray-20;
|
||||
border-radius: 3px;
|
||||
color: $color-white;
|
||||
cursor: pointer;
|
||||
|
@ -270,7 +270,7 @@ ul.slider-dots {
|
|||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-gray-dark;
|
||||
background-color: $color-gray-40;
|
||||
}
|
||||
|
||||
&.tag-primary {
|
||||
|
@ -539,7 +539,7 @@ input.element-name {
|
|||
& + label {
|
||||
|
||||
&:before {
|
||||
box-shadow: inset 0 0 0 5px $color-gray-light ;
|
||||
box-shadow: inset 0 0 0 5px $color-gray-20 ;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -596,7 +596,7 @@ input[type=radio]:checked + label:before{
|
|||
& + label {
|
||||
|
||||
&:after {
|
||||
background-color: $color-gray-lighter;
|
||||
background-color: $color-gray-10;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
grid-template-rows: 40px 1fr;
|
||||
grid-template-columns: 14.5rem 1fr;
|
||||
grid-template-areas: "header header" "sidebar content";
|
||||
border-right: 1px solid $color-gray;
|
||||
border-right: 1px solid $color-gray-30;
|
||||
|
||||
& .main-bar {
|
||||
grid-area: header;
|
||||
|
@ -47,7 +47,7 @@
|
|||
|
||||
.library-header-navigation-item {
|
||||
margin: 0 $size-6;
|
||||
color: $color-gray;
|
||||
color: $color-gray-30;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
|
@ -257,7 +257,7 @@
|
|||
}
|
||||
|
||||
.library-card-footer {
|
||||
border-top: 1px solid $color-gray-lighter;
|
||||
border-top: 1px solid $color-gray-10;
|
||||
padding: $size-2 $size-2 $size-2 $size-4;
|
||||
display: grid;
|
||||
grid-template-rows: 50% 50%;
|
||||
|
@ -289,7 +289,7 @@
|
|||
}
|
||||
|
||||
.library-card-footer-color-label {
|
||||
color: $color-gray;
|
||||
color: $color-gray-30;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
|
@ -326,7 +326,7 @@
|
|||
|
||||
& .sketch-picker {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid $color-gray-lighter !important;
|
||||
border: 1px solid $color-gray-10 !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
& input {
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
.login {
|
||||
align-items: center;
|
||||
background-color: $color-gray-dark;
|
||||
background-color: $color-gray-40;
|
||||
background-image: url("/images/login-bg.jpg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
@ -45,7 +45,7 @@
|
|||
margin-bottom: $big*2;
|
||||
|
||||
@include placeholder {
|
||||
color: $color-gray;
|
||||
color: $color-gray-30;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
@ -58,7 +58,7 @@
|
|||
|
||||
&:focus {
|
||||
background-color: $color-white;
|
||||
border-color: $color-gray-lighter;
|
||||
border-color: $color-gray-10;
|
||||
}
|
||||
|
||||
&.success {
|
||||
|
@ -87,7 +87,7 @@
|
|||
margin: $big 0;
|
||||
|
||||
label {
|
||||
color: $color-gray-light;
|
||||
color: $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -22,14 +22,14 @@
|
|||
}
|
||||
|
||||
h4 {
|
||||
color: $color-gray-dark;
|
||||
color: $color-gray-40;
|
||||
font-size: $fs16;
|
||||
font-weight: bold;
|
||||
margin-bottom: $x-small;
|
||||
}
|
||||
|
||||
.date-ribbon {
|
||||
background-color: lighten($color-gray-light, 12%);
|
||||
background-color: lighten($color-gray-20, 12%);
|
||||
color: $color-white;
|
||||
font-size: $fs12;
|
||||
font-weight: bold;
|
||||
|
@ -39,7 +39,7 @@
|
|||
}
|
||||
|
||||
.activity-input {
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
border-bottom: 1px solid $color-gray-10;
|
||||
display: flex;
|
||||
font-size: $fs13;
|
||||
padding: $small;
|
||||
|
@ -70,7 +70,7 @@
|
|||
}
|
||||
|
||||
.activity-time {
|
||||
color: $color-gray-light;
|
||||
color: $color-gray-20;
|
||||
font-size: $fs11;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
fill: $color-gray-20;
|
||||
height: 1rem;
|
||||
margin: 0 .5rem;
|
||||
width: 1rem;
|
||||
|
@ -30,7 +30,7 @@
|
|||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $color-gray-darker;
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
|
@ -89,7 +89,7 @@
|
|||
|
||||
.btn-palette {
|
||||
align-items: center;
|
||||
border: 2px solid $color-gray-lighter;
|
||||
border: 2px solid $color-gray-10;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
@ -97,14 +97,14 @@
|
|||
justify-content: center;
|
||||
padding: .6rem;
|
||||
svg {
|
||||
fill: $color-gray-lighter;
|
||||
fill: $color-gray-10;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
&:hover {
|
||||
border-color: $color-gray-dark;
|
||||
border-color: $color-gray-40;
|
||||
svg {
|
||||
fill: $color-gray-dark;
|
||||
fill: $color-gray-40;
|
||||
}
|
||||
}
|
||||
&.current {
|
||||
|
@ -143,26 +143,26 @@
|
|||
flex-basis: 66px;
|
||||
|
||||
.color {
|
||||
background-color: $color-gray-lighter;
|
||||
background-color: $color-gray-10;
|
||||
border: 2px solid $color-gray-60;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.color-text {
|
||||
color: $color-gray-light;
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
}
|
||||
&.current {
|
||||
.color {
|
||||
border-color: $color-gray-darker;
|
||||
border-color: $color-gray-50;
|
||||
}
|
||||
.color-text {
|
||||
color: $color-gray-darker;
|
||||
color: $color-gray-50;
|
||||
font-weight: bold;
|
||||
}
|
||||
&::before {
|
||||
background-color: $color-gray-darker;
|
||||
background-color: $color-gray-50;
|
||||
border-radius: 3px;
|
||||
color: $color-white;
|
||||
content: "selected";
|
||||
|
@ -175,10 +175,10 @@
|
|||
}
|
||||
&:hover {
|
||||
.color {
|
||||
border-color: $color-gray-darker;
|
||||
border-color: $color-gray-50;
|
||||
}
|
||||
.color-text {
|
||||
color: $color-gray-darker;
|
||||
color: $color-gray-50;
|
||||
}
|
||||
}
|
||||
&.add-color {
|
||||
|
@ -186,14 +186,14 @@
|
|||
.color {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border: 3px dashed $color-gray-lighter;
|
||||
border: 3px dashed $color-gray-10;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: .6rem;
|
||||
svg {
|
||||
fill: $color-gray-lighter;
|
||||
fill: $color-gray-10;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
@ -203,13 +203,13 @@
|
|||
}
|
||||
&:hover {
|
||||
.color {
|
||||
border-color: $color-gray;
|
||||
border-color: $color-gray-30;
|
||||
svg {
|
||||
fill: $color-gray;
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
}
|
||||
.color-text {
|
||||
color: $color-gray-dark;
|
||||
color: $color-gray-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -220,7 +220,7 @@
|
|||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
fill: $color-gray-20;
|
||||
height: 25px;
|
||||
transform: rotate(45deg);
|
||||
width: 25px;
|
||||
|
@ -234,7 +234,7 @@
|
|||
|
||||
.color-tooltip {
|
||||
background-color: $color-gray-50;
|
||||
border: 1px solid $color-gray-lighter;
|
||||
border: 1px solid $color-gray-10;
|
||||
border-radius: 3px;
|
||||
left: -102px;
|
||||
padding: 1rem;
|
||||
|
@ -251,8 +251,8 @@
|
|||
&::after {
|
||||
background-color: $color-gray-50;
|
||||
bottom: -32px;
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
border-right: 1px solid $color-gray-lighter;
|
||||
border-bottom: 1px solid $color-gray-10;
|
||||
border-right: 1px solid $color-gray-10;
|
||||
content: "";
|
||||
height: 20px;
|
||||
left: 105px;
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
cursor: pointer;
|
||||
svg {
|
||||
transform: rotate(45deg);
|
||||
fill: $color-gray;
|
||||
fill: $color-gray-30;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
@ -48,7 +48,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
fill: $color-gray;
|
||||
fill: $color-gray-30;
|
||||
height: 20px;
|
||||
margin: 0 10px;
|
||||
width: 20px;
|
||||
|
@ -57,7 +57,7 @@
|
|||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-darker;
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -156,7 +156,7 @@
|
|||
}
|
||||
|
||||
&.add-file {
|
||||
border: 1px dashed $color-gray-light;
|
||||
border: 1px dashed $color-gray-20;
|
||||
justify-content: center;
|
||||
box-shadow: none;
|
||||
|
||||
|
@ -196,7 +196,7 @@
|
|||
width: 100%;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
fill: $color-gray-20;
|
||||
height: 14px;
|
||||
margin-right: $x-small;
|
||||
width: 14px;
|
||||
|
@ -279,8 +279,8 @@
|
|||
|
||||
// IMAGES SECTION
|
||||
&.images-th {
|
||||
border: 1px dashed $color-gray-light;
|
||||
border-bottom: 2px solid lighten($color-gray-light, 12%);
|
||||
border: 1px dashed $color-gray-20;
|
||||
border-bottom: 2px solid lighten($color-gray-20, 12%);
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
|
@ -311,7 +311,7 @@
|
|||
}
|
||||
|
||||
.color-data {
|
||||
color: $color-gray;
|
||||
color: $color-gray-30;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
@ -431,7 +431,7 @@
|
|||
padding-bottom: $medium;
|
||||
|
||||
&.title {
|
||||
color: $color-gray-darker;
|
||||
color: $color-gray-50;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -447,6 +447,11 @@
|
|||
margin: $size-4;
|
||||
padding: 3rem;
|
||||
width: 100%;
|
||||
|
||||
.grid-files-desc {
|
||||
color: $color-gray-40;
|
||||
margin-bottom: $medium;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-files-link-text {
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
padding: 3px 5px;
|
||||
|
||||
& svg {
|
||||
fill: $color-gray;
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: 15px;
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
background-color: $color-white;
|
||||
|
||||
.library-bar-inside {
|
||||
border-right: 1px solid $color-gray-lighter;
|
||||
border-right: 1px solid $color-gray-10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
@ -26,7 +26,7 @@
|
|||
li {
|
||||
background-color: $color-white;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $color-gray;
|
||||
color: $color-gray-30;
|
||||
cursor: pointer;
|
||||
font-size: $fs14;
|
||||
padding: .6rem;
|
||||
|
@ -108,7 +108,7 @@
|
|||
padding: 3px 5px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray;
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: 15px;
|
||||
|
@ -117,7 +117,7 @@
|
|||
}
|
||||
|
||||
.element-subtitle {
|
||||
color: $color-gray-light;
|
||||
color: $color-gray-20;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
|
@ -62,12 +62,12 @@
|
|||
.toggle-layout {
|
||||
|
||||
svg {
|
||||
fill: $color-gray;
|
||||
fill: $color-gray-30;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-gray-darker;
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -134,12 +134,12 @@
|
|||
margin: 1rem;
|
||||
|
||||
.big-svg {
|
||||
background-color: $color-gray-lighter;
|
||||
background-color: $color-gray-10;
|
||||
border-radius: $br-medium;
|
||||
padding: 3rem;
|
||||
|
||||
svg {
|
||||
fill: $color-gray;
|
||||
fill: $color-gray-30;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
@ -155,7 +155,7 @@
|
|||
}
|
||||
|
||||
.text {
|
||||
color: $color-gray-light;
|
||||
color: $color-gray-20;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
|
@ -251,8 +251,8 @@
|
|||
}
|
||||
|
||||
.confirm-dialog-cancel-button {
|
||||
border: 1px solid $color-gray;
|
||||
background: $color-gray-lightest;
|
||||
border: 1px solid $color-gray-30;
|
||||
background: $color-canvas;
|
||||
border-radius: 2px;
|
||||
padding: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
|
@ -262,7 +262,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $color-gray-light;
|
||||
background: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
.project-bar {
|
||||
background-color: $color-gray-50;
|
||||
border-right: 1px solid $color-gray-lighter;
|
||||
border-right: 1px solid $color-gray-10;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 50px;
|
||||
|
@ -27,7 +27,7 @@
|
|||
padding-top: 60px;
|
||||
|
||||
.project-name {
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
border-bottom: 1px solid $color-gray-10;
|
||||
font-size: $fs14;
|
||||
font-weight: bold;
|
||||
padding: 0 $small;
|
||||
|
@ -57,7 +57,7 @@
|
|||
position: relative;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
margin-right: $x-small;
|
||||
width: 12px;
|
||||
|
@ -84,13 +84,13 @@
|
|||
top: 40%;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
margin-right: $small;
|
||||
width: 12px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-gray-dark;
|
||||
fill: $color-gray-40;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
fill: $color-gray-light;
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
@ -41,7 +41,7 @@
|
|||
background-color: transparent;
|
||||
cursor: default;
|
||||
svg {
|
||||
fill: $color-gray-dark;
|
||||
fill: $color-gray-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -351,7 +351,7 @@
|
|||
}
|
||||
|
||||
.color-th {
|
||||
background-color: $color-gray-lighter;
|
||||
background-color: $color-gray-10;
|
||||
border: 1px solid $color-gray-10;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.tool-bar {
|
||||
background-color: $color-gray-dark;
|
||||
background-color: $color-gray-40;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
|
@ -27,7 +27,7 @@
|
|||
margin-bottom: $big;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
fill: $color-gray-20;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
.nav-item {
|
||||
margin: 0 $size-6;
|
||||
color: $color-gray;
|
||||
color: $color-gray-30;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
|
|
|
@ -175,7 +175,7 @@
|
|||
}
|
||||
|
||||
.workspace-frame-label {
|
||||
fill: $color-gray-dark;
|
||||
fill: $color-gray-40;
|
||||
font-size: $fs12;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue