3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-04 09:35:53 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix color theme general issue

Browse source
This commit is contained in:
Juan de la Cruz 2020-03-03 13:14:37 +01:00
parent c217f65677
commit 2728e03e76
35 changed files with 433 additions and 429 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/resources/styles/common/base.scss
View file

@ -6,8 +6,8 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
body { body {
background-color: lighten($dark-ui-bg, 5%); background-color: lighten($color-gray-10, 5%);
color: $medium-ui-text; color: $color-gray-20;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: "sourcesanspro", sans-serif; font-family: "sourcesanspro", sans-serif;
@ -55,7 +55,7 @@ svg {
a { a {
cursor: pointer; cursor: pointer;
color: $main-ui-color; color: $color-primary;
&:hover { &:hover {
color: $color-primary-dark; color: $color-primary-dark;
@ -209,7 +209,7 @@ h4 {
} }
hr { hr {
border-top: solid 1px $soft-ui-border; border-top: solid 1px $color-gray-60;
border-right: 0; border-right: 0;
border-left: 0; border-left: 0;
border-bottom: 0; border-bottom: 0;

1
frontend/resources/styles/common/dependencies/colors.scss
View file

@ -9,6 +9,7 @@
$color-white: #ffffff; $color-white: #ffffff;
$color-black: #000000; $color-black: #000000;
$color-gray: #90969d; $color-gray: #90969d;
$color-canvas: #E8E9EA;
// Main color // Main color
$color-primary: #31EFB8; $color-primary: #31EFB8;

2
frontend/resources/styles/common/dependencies/mixin.scss
View file

@ -154,7 +154,7 @@
position: relative; position: relative;
&::after { &::after {
background-color: $primary-ui-bg; background-color: $color-gray-50;
bottom: -3px; bottom: -3px;
content: "..."; content: "...";
padding-left: 10px; padding-left: 10px;

58
frontend/resources/styles/common/framework-v2.scss
View file

@ -35,7 +35,7 @@
.btn-primary { .btn-primary {
@extend %btn; @extend %btn;
align-items: center; align-items: center;
background: $main-ui-color; background: $color-primary;
color: $color-white; color: $color-white;
justify-content: center; justify-content: center;
display: flex; display: flex;
@ -185,7 +185,7 @@ ul.slider-dots {
&.current, &.current,
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
} }
} }
@ -319,7 +319,7 @@ ul.slider-dots {
width: 100%; width: 100%;
&::after { &::after {
color: $soft-ui-text; color: $color-gray-10;
font-size: $fs12; font-size: $fs12;
height: 20px; height: 20px;
position: absolute; position: absolute;
@ -366,9 +366,9 @@ ul.slider-dots {
input, input,
select { select {
background-color: $input-bg; background-color: $color-gray-50;
box-sizing: border-box; box-sizing: border-box;
color: $intense-ui-text; color: $color-gray-60;
font-family: "sourcesanspro", sans-serif; font-family: "sourcesanspro", sans-serif;
font-size: $fs16; font-size: $fs16;
margin-bottom: $medium; margin-bottom: $medium;
@ -402,8 +402,8 @@ input[type="checkbox"]:focus {
.input-text { .input-text {
border: none; border: none;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
background-color: $input-bg; background-color: $color-gray-50;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
padding: $small $big $small $small; padding: $small $big $small $small;
@ -414,7 +414,7 @@ input[type="checkbox"]:focus {
} }
&:focus { &:focus {
border-color: $intense-ui-border; border-color: $color-gray-40;
box-shadow: none; box-shadow: none;
@include placeholder { @include placeholder {
@ -442,7 +442,7 @@ input[type="checkbox"]:focus {
// Element-name // Element-name
input.element-name { input.element-name {
border: 1px solid $soft-ui-border; border: 1px solid $color-gray-60;
border-radius: $br-small; border-radius: $br-small;
font-size: $fs13; font-size: $fs13;
margin: 0px; margin: 0px;
@ -489,9 +489,9 @@ input.element-name {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 10px; margin-right: 10px;
background-color: $primary-ui-bg; background-color: $color-gray-50;
border: 1px solid $soft-ui-border; border: 1px solid $color-gray-60;
box-shadow: inset 0 0 0 0 $main-ui-color ; box-shadow: inset 0 0 0 0 $color-primary ;
box-sizing: border-box; box-sizing: border-box;
} }
@ -751,7 +751,7 @@ input[type=range]::-webkit-slider-runnable-track {
cursor: pointer; cursor: pointer;
animate: 0.2s; animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: $secondary-ui-bg; background: $color-gray-60;
border-radius: 25px; border-radius: 25px;
border: 0px solid #000101; border: 0px solid #000101;
} }
@ -761,13 +761,13 @@ input[type=range]::-webkit-slider-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $intense-ui-icons; background: $color-gray-20;
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -8px; margin-top: -8px;
} }
input[type=range]:focus::-webkit-slider-runnable-track { input[type=range]:focus::-webkit-slider-runnable-track {
background: $secondary-ui-bg; background: $color-gray-60;
} }
input[type=range]::-moz-range-track { input[type=range]::-moz-range-track {
width: 100%; width: 100%;
@ -775,7 +775,7 @@ input[type=range]::-moz-range-track {
cursor: pointer; cursor: pointer;
animate: 0.2s; animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: $secondary-ui-bg; background: $color-gray-60;
border-radius: 25px; border-radius: 25px;
border: 0px solid #000101; border: 0px solid #000101;
} }
@ -785,7 +785,7 @@ input[type=range]::-moz-range-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $intense-ui-icons; background: $color-gray-20;
cursor: pointer; cursor: pointer;
} }
input[type=range]::-ms-track { input[type=range]::-ms-track {
@ -799,13 +799,13 @@ input[type=range]::-ms-track {
color: transparent; color: transparent;
} }
input[type=range]::-ms-fill-lower { input[type=range]::-ms-fill-lower {
background: $secondary-ui-bg; background: $color-gray-60;
border: 0px solid #000101; border: 0px solid #000101;
border-radius: 50px; border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
} }
input[type=range]::-ms-fill-upper { input[type=range]::-ms-fill-upper {
background: $secondary-ui-bg; background: $color-gray-60;
border: 0px solid #000101; border: 0px solid #000101;
border-radius: 50px; border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
@ -816,14 +816,14 @@ input[type=range]::-ms-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $intense-ui-icons; background: $color-gray-20;
cursor: pointer; cursor: pointer;
} }
input[type=range]:focus::-ms-fill-lower { input[type=range]:focus::-ms-fill-lower {
background: $secondary-ui-bg; background: $color-gray-60;
} }
input[type=range]:focus::-ms-fill-upper { input[type=range]:focus::-ms-fill-upper {
background: $secondary-ui-bg; background: $color-gray-60;
} }
// Scroll bar (chrome) // Scroll bar (chrome)
@ -838,11 +838,11 @@ input[type=range]:focus::-ms-fill-upper {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: $scrollbar-bg; background-color: $color-gray-20;
&:hover { &:hover {
background-color: darken($scrollbar-bg, 14%); background-color: darken($color-gray-20, 14%);
outline: 2px solid $main-ui-color; outline: 2px solid $color-primary;
} }
} }
@ -855,9 +855,9 @@ input[type=range]:focus::-ms-fill-upper {
&:hover { &:hover {
&::after { &::after {
background-color: $primary-ui-bg; background-color: $color-gray-50;
border-radius: $br-small; border-radius: $br-small;
color: $medium-ui-text; color: $color-gray-20;
content: attr(alt); content: attr(alt);
font-size: $fs11; font-size: $fs11;
font-weight: bold; font-weight: bold;
@ -905,10 +905,10 @@ input[type=range]:focus::-ms-fill-upper {
&::after { &::after {
align-items: center; align-items: center;
background-color: $input-bg; background-color: $color-gray-50;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0; border-radius: 0;
color: $intense-ui-text; color: $color-gray-60;
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;

58
frontend/resources/styles/common/framework.scss
View file

@ -35,7 +35,7 @@
.btn-primary { .btn-primary {
@extend %btn; @extend %btn;
align-items: center; align-items: center;
background: $main-ui-color; background: $color-primary;
color: $color-white; color: $color-white;
justify-content: center; justify-content: center;
display: flex; display: flex;
@ -185,7 +185,7 @@ ul.slider-dots {
&.current, &.current,
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
} }
} }
@ -319,7 +319,7 @@ ul.slider-dots {
width: 100%; width: 100%;
&::after { &::after {
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs12; font-size: $fs12;
height: 20px; height: 20px;
position: absolute; position: absolute;
@ -366,9 +366,9 @@ ul.slider-dots {
input, input,
select { select {
background-color: $input-bg; background-color: $color-gray-50;
box-sizing: border-box; box-sizing: border-box;
color: $intense-ui-text; color: $color-gray-60;
font-family: "sourcesanspro", sans-serif; font-family: "sourcesanspro", sans-serif;
font-size: $fs16; font-size: $fs16;
margin-bottom: $medium; margin-bottom: $medium;
@ -402,8 +402,8 @@ input[type="checkbox"]:focus {
.input-text { .input-text {
border: none; border: none;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
background-color: $input-bg; background-color: $color-gray-50;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
padding: $small $big $small $small; padding: $small $big $small $small;
@ -414,7 +414,7 @@ input[type="checkbox"]:focus {
} }
&:focus { &:focus {
border-color: $intense-ui-border; border-color: $color-gray-40;
box-shadow: none; box-shadow: none;
@include placeholder { @include placeholder {
@ -442,10 +442,10 @@ input[type="checkbox"]:focus {
// Element-name // Element-name
input.element-name { input.element-name {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border: 1px solid $intense-ui-border; border: 1px solid $color-gray-40;
border-radius: $br-small; border-radius: $br-small;
color: $intense-ui-text; color: $color-gray-60;
font-size: $fs13; font-size: $fs13;
margin: 0px; margin: 0px;
padding: 3px; padding: 3px;
@ -491,9 +491,9 @@ input.element-name {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 10px; margin-right: 10px;
background-color: $primary-ui-bg; background-color: $color-gray-50;
border: 1px solid $soft-ui-border; border: 1px solid $color-gray-60;
box-shadow: inset 0 0 0 0 $main-ui-color ; box-shadow: inset 0 0 0 0 $color-primary ;
box-sizing: border-box; box-sizing: border-box;
} }
@ -753,7 +753,7 @@ input[type=range]::-webkit-slider-runnable-track {
cursor: pointer; cursor: pointer;
animate: 0.2s; animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: $secondary-ui-bg; background: $color-gray-60;
border-radius: 25px; border-radius: 25px;
border: 0px solid #000101; border: 0px solid #000101;
} }
@ -763,13 +763,13 @@ input[type=range]::-webkit-slider-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $intense-ui-icons; background: $color-gray-20;
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -8px; margin-top: -8px;
} }
input[type=range]:focus::-webkit-slider-runnable-track { input[type=range]:focus::-webkit-slider-runnable-track {
background: $secondary-ui-bg; background: $color-gray-60;
} }
input[type=range]::-moz-range-track { input[type=range]::-moz-range-track {
width: 100%; width: 100%;
@ -777,7 +777,7 @@ input[type=range]::-moz-range-track {
cursor: pointer; cursor: pointer;
animate: 0.2s; animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: $secondary-ui-bg; background: $color-gray-60;
border-radius: 25px; border-radius: 25px;
border: 0px solid #000101; border: 0px solid #000101;
} }
@ -787,7 +787,7 @@ input[type=range]::-moz-range-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $intense-ui-icons; background: $color-gray-20;
cursor: pointer; cursor: pointer;
} }
input[type=range]::-ms-track { input[type=range]::-ms-track {
@ -801,13 +801,13 @@ input[type=range]::-ms-track {
color: transparent; color: transparent;
} }
input[type=range]::-ms-fill-lower { input[type=range]::-ms-fill-lower {
background: $secondary-ui-bg; background: $color-gray-60;
border: 0px solid #000101; border: 0px solid #000101;
border-radius: 50px; border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
} }
input[type=range]::-ms-fill-upper { input[type=range]::-ms-fill-upper {
background: $secondary-ui-bg; background: $color-gray-60;
border: 0px solid #000101; border: 0px solid #000101;
border-radius: 50px; border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
@ -818,14 +818,14 @@ input[type=range]::-ms-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $intense-ui-icons; background: $color-gray-20;
cursor: pointer; cursor: pointer;
} }
input[type=range]:focus::-ms-fill-lower { input[type=range]:focus::-ms-fill-lower {
background: $secondary-ui-bg; background: $color-gray-60;
} }
input[type=range]:focus::-ms-fill-upper { input[type=range]:focus::-ms-fill-upper {
background: $secondary-ui-bg; background: $color-gray-60;
} }
// Scroll bar (chrome) // Scroll bar (chrome)
@ -840,11 +840,11 @@ input[type=range]:focus::-ms-fill-upper {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: $scrollbar-bg; background-color: $color-gray-20;
&:hover { &:hover {
background-color: darken($scrollbar-bg, 14%); background-color: darken($color-gray-20, 14%);
outline: 2px solid $main-ui-color; outline: 2px solid $color-primary;
} }
} }
@ -859,7 +859,7 @@ input[type=range]:focus::-ms-fill-upper {
&::after { &::after {
background-color: $color-white; background-color: $color-white;
border-radius: $br-small; border-radius: $br-small;
color: $intense-ui-text; color: $color-gray-60;
content: attr(alt); content: attr(alt);
font-size: $fs11; font-size: $fs11;
font-weight: bold; font-weight: bold;
@ -910,7 +910,7 @@ input[type=range]:focus::-ms-fill-upper {
background-color: $color-white; background-color: $color-white;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0; border-radius: 0;
color: $intense-ui-text; color: $color-gray-60;
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;

2
frontend/resources/styles/main.scss
View file

@ -11,7 +11,7 @@
//################################################# //#################################################
@import 'common/dependencies/colors'; @import 'common/dependencies/colors';
@import 'common/dependencies/uxbox-light'; //@import 'common/dependencies/uxbox-light';
//@import 'common/dependencies/uxbox-dark'; //@import 'common/dependencies/uxbox-dark';
@import 'common/dependencies/helpers'; @import 'common/dependencies/helpers';
@import 'common/dependencies/mixin'; @import 'common/dependencies/mixin';

2
frontend/resources/styles/main/partials/activity-bar.scss
View file

@ -6,7 +6,7 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.activity-bar { .activity-bar {
background-color: $primary-ui-bg; background-color: $color-gray-50;
bottom: 0; bottom: 0;
height: 100%; height: 100%;
position: fixed; position: fixed;

14
frontend/resources/styles/main/partials/color-palette.scss
View file

@ -8,8 +8,8 @@
.color-palette { .color-palette {
@include animation(0,.5s,fadeInUp); @include animation(0,.5s,fadeInUp);
align-items: center; align-items: center;
background-color: $primary-ui-bg; background-color: $color-gray-50;
border-top: 1px solid $soft-ui-border; border-top: 1px solid $color-gray-60;
display: flex; display: flex;
padding: 1rem; padding: 1rem;
position: absolute; position: absolute;
@ -77,7 +77,7 @@
} }
} }
&.current { &.current {
background-color: $main-ui-color; background-color: $color-primary;
border-color: $color-white; border-color: $color-white;
svg { svg {
fill: $color-white; fill: $color-white;
@ -111,7 +111,7 @@
flex-basis: 66px; flex-basis: 66px;
.color { .color {
background-color: $color-gray-lighter; background-color: $color-gray-lighter;
border: 2px solid $soft-ui-border; border: 2px solid $color-gray-60;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
margin-bottom: .4rem; margin-bottom: .4rem;
@ -153,7 +153,7 @@
margin-left: 1.5rem; margin-left: 1.5rem;
.color { .color {
align-items: center; align-items: center;
background-color: $primary-ui-bg; background-color: $color-gray-50;
border: 3px dashed $color-gray-lighter; border: 3px dashed $color-gray-lighter;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -201,7 +201,7 @@
} }
.color-tooltip { .color-tooltip {
background-color: $primary-ui-bg; background-color: $color-gray-50;
border: 1px solid $color-gray-lighter; border: 1px solid $color-gray-lighter;
border-radius: 3px; border-radius: 3px;
left: -102px; left: -102px;
@ -217,7 +217,7 @@
max-width: 100px; max-width: 100px;
} }
&::after { &::after {
background-color: $primary-ui-bg; background-color: $color-gray-50;
bottom: -32px; bottom: -32px;
border-bottom: 1px solid $color-gray-lighter; border-bottom: 1px solid $color-gray-lighter;
border-right: 1px solid $color-gray-lighter; border-right: 1px solid $color-gray-lighter;

18
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -48,7 +48,7 @@
} }
.input-text { .input-text {
color: $intense-ui-text; color: $color-gray-60;
font-size: $fs13; font-size: $fs13;
margin: 5px; margin: 5px;
padding: 5px; padding: 5px;
@ -58,7 +58,7 @@
} }
span { span {
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs12; font-size: $fs12;
} }
@ -154,27 +154,27 @@
.color-info { .color-info {
input { input {
border: 1px solid $intense-ui-border; border: 1px solid $color-gray-40;
border-radius: $br-small; border-radius: $br-small;
color: $soft-ui-text; color: $color-gray-10;
margin: 3px 0 0 $x-small; margin: 3px 0 0 $x-small;
padding: 0 $x-small; padding: 0 $x-small;
width: 58px; width: 58px;
font-size: $fs13; font-size: $fs13;
&:focus { &:focus {
border-color: $soft-ui-text; border-color: $color-gray-10;
} }
} }
} }
.type { .type {
color: $soft-ui-text; color: $color-gray-10;
margin-right: $x-small; margin-right: $x-small;
} }
.number { .number {
color: $intense-ui-text; color: $color-gray-60;
} }
} }
@ -190,14 +190,14 @@
width: auto; width: auto;
span { span {
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs12; font-size: $fs12;
} }
.inputs-area { .inputs-area {
.input-text { .input-text {
color: $intense-ui-text; color: $color-gray-60;
font-size: $fs13; font-size: $fs13;
margin: 5px; margin: 5px;
padding: 5px; padding: 5px;

14
frontend/resources/styles/main/partials/dashboard-bar-v2.scss
View file

@ -32,15 +32,15 @@
.input-select { .input-select {
background-color: transparent; background-color: transparent;
border-color: $soft-ui-border; border-color: $color-gray-60;
font-size: $fs14; font-size: $fs14;
margin-bottom: 0; margin-bottom: 0;
margin-left: $medium; margin-left: $medium;
padding: 3px 25px 3px 3px; padding: 3px 25px 3px 3px;
option { option {
color: $intense-ui-text; color: $color-gray-60;
background: $secondary-ui-bg; background: $color-gray-60;
} }
} }
@ -52,9 +52,9 @@
margin-left: $small; margin-left: $small;
.input-text { .input-text {
background: $input-bg; background: $color-gray-50;
border: 0; border: 0;
color: $intense-ui-text; color: $color-gray-60;
padding: 4px 8px; padding: 4px 8px;
margin: 0; margin: 0;
max-width: 160px; max-width: 160px;
@ -62,14 +62,14 @@
.clear-search { .clear-search {
align-items: center; align-items: center;
background: $input-bg; background: $color-gray-50;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 28px; height: 28px;
padding: 0 5px; padding: 0 5px;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 15px; height: 15px;
transform: rotate(45deg); transform: rotate(45deg);
width: 15px; width: 15px;

14
frontend/resources/styles/main/partials/dashboard-bar.scss
View file

@ -32,15 +32,15 @@
.input-select { .input-select {
background-color: transparent; background-color: transparent;
border-color: $soft-ui-border; border-color: $color-gray-60;
font-size: $fs14; font-size: $fs14;
margin-bottom: 0; margin-bottom: 0;
margin-left: $medium; margin-left: $medium;
padding: 3px 25px 3px 3px; padding: 3px 25px 3px 3px;
option { option {
color: $intense-ui-text; color: $color-gray-60;
background: $secondary-ui-bg; background: $color-gray-60;
} }
} }
@ -52,9 +52,9 @@
margin-left: $small; margin-left: $small;
.input-text { .input-text {
background: $input-bg; background: $color-gray-50;
border: 0; border: 0;
color: $intense-ui-text; color: $color-gray-60;
padding: 4px 8px; padding: 4px 8px;
margin: 0; margin: 0;
max-width: 160px; max-width: 160px;
@ -62,14 +62,14 @@
.clear-search { .clear-search {
align-items: center; align-items: center;
background: $input-bg; background: $color-gray-50;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 28px; height: 28px;
padding: 0 5px; padding: 0 5px;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 15px; height: 15px;
transform: rotate(45deg); transform: rotate(45deg);
width: 15px; width: 15px;

32
frontend/resources/styles/main/partials/dashboard-grid-v2.scss
View file

@ -25,13 +25,13 @@
width: 100%; width: 100%;
.edit { .edit {
padding: 5px 10px; padding: 5px 10px;
background: $primary-ui-bg; background: $color-gray-50;
border: none; border: none;
height: 100%; height: 100%;
} }
.close { .close {
padding: 5px 10px; padding: 5px 10px;
background: $primary-ui-bg; background: $color-gray-50;
cursor: pointer; cursor: pointer;
svg { svg {
transform: rotate(45deg); transform: rotate(45deg);
@ -126,7 +126,7 @@
width: 100%; width: 100%;
h3 { h3 {
color: $intense-ui-text; color: $color-gray-60;
font-size: $fs16; font-size: $fs16;
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
@ -138,7 +138,7 @@
} }
span.date { span.date {
color: $soft-ui-text; color: $color-gray-10;
font-size: $fs12; font-size: $fs12;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -174,14 +174,14 @@
// PROJECTS, ELEMENTS & ICONS GRID // PROJECTS, ELEMENTS & ICONS GRID
&.project-th { &.project-th {
background-color: $primary-ui-bg; background-color: $color-gray-50;
border-bottom: 2px solid lighten($soft-ui-border, 12%); border-bottom: 2px solid lighten($color-gray-60, 12%);
&:hover { &:hover {
border-color: $main-ui-color; border-color: $color-primary;
h3 { h3 {
color: $main-ui-color; color: $color-primary;
} }
} }
@ -216,7 +216,7 @@
margin-right: 0; margin-right: 0;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
margin-right: 0; margin-right: 0;
} }
@ -235,7 +235,7 @@
margin-right: 0; margin-right: 0;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
} }
&:hover { &:hover {
@ -257,11 +257,11 @@
// IMAGES SECTION // IMAGES SECTION
&.images-th { &.images-th {
background-color: $primary-ui-bg; background-color: $color-gray-50;
border-bottom: 2px solid lighten($color-gray-light, 12%); border-bottom: 2px solid lighten($color-gray-light, 12%);
&:hover { &:hover {
border-color: $main-ui-color; border-color: $color-primary;
} }
} }
@ -338,7 +338,7 @@
.multiselect-bar { .multiselect-bar {
@include animation(0,.5s,fadeInUp); @include animation(0,.5s,fadeInUp);
align-items: center; align-items: center;
background-color: $primary-ui-bg; background-color: $color-gray-50;
display: flex; display: flex;
left: 0; left: 0;
justify-content: center; justify-content: center;
@ -363,12 +363,12 @@
svg { svg {
cursor: pointer; cursor: pointer;
fill: $medium-ui-icons; fill: $color-gray-30;
height: 20px; height: 20px;
width: 20px; width: 20px;
&:hover { &:hover {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
@ -393,7 +393,7 @@
position: relative; position: relative;
.move-list { .move-list {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-radius: $br-small; border-radius: $br-small;
bottom: 30px; bottom: 30px;
display: flex; display: flex;

32
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -24,13 +24,13 @@
width: 100%; width: 100%;
.edit { .edit {
padding: 5px 10px; padding: 5px 10px;
background: $primary-ui-bg; background: $color-gray-50;
border: none; border: none;
height: 100%; height: 100%;
} }
.close { .close {
padding: 5px 10px; padding: 5px 10px;
background: $primary-ui-bg; background: $color-gray-50;
cursor: pointer; cursor: pointer;
svg { svg {
transform: rotate(45deg); transform: rotate(45deg);
@ -124,7 +124,7 @@
width: 100%; width: 100%;
h3 { h3 {
color: $intense-ui-text; color: $color-gray-60;
font-size: $fs15; font-size: $fs15;
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
@ -136,7 +136,7 @@
} }
span.date { span.date {
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs12; font-size: $fs12;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -150,13 +150,13 @@
justify-content: center; justify-content: center;
span { span {
color: $intense-ui-text; color: $color-gray-60;
font-size: $fs15; font-size: $fs15;
} }
&:hover { &:hover {
background-color: $color-white; background-color: $color-white;
border: 2px solid $main-ui-color; border: 2px solid $color-primary;
} }
} }
@ -164,10 +164,10 @@
// PROJECTS, ELEMENTS & ICONS GRID // PROJECTS, ELEMENTS & ICONS GRID
&.project-th { &.project-th {
background-color: $color-white; background-color: $color-white;
// border: 2px solid $dark-ui-bg; // border: 2px solid $color-gray-10;
&:hover { &:hover {
border-color: $main-ui-color; border-color: $color-primary;
} }
.project-th-actions { .project-th-actions {
@ -200,7 +200,7 @@
margin-right: 0; margin-right: 0;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
margin-right: 0; margin-right: 0;
} }
@ -219,14 +219,14 @@
margin-right: 0; margin-right: 0;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
} }
&:hover { &:hover {
transform: scale(1.4); transform: scale(1.4);
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
} }
} }
@ -245,7 +245,7 @@
border-bottom: 2px solid lighten($color-gray-light, 12%); border-bottom: 2px solid lighten($color-gray-light, 12%);
&:hover { &:hover {
border-color: $main-ui-color; border-color: $color-primary;
} }
} }
@ -322,7 +322,7 @@
.multiselect-bar { .multiselect-bar {
@include animation(0,.5s,fadeInUp); @include animation(0,.5s,fadeInUp);
align-items: center; align-items: center;
background-color: $primary-ui-bg; background-color: $color-gray-50;
display: flex; display: flex;
left: 0; left: 0;
justify-content: center; justify-content: center;
@ -347,12 +347,12 @@
svg { svg {
cursor: pointer; cursor: pointer;
fill: $medium-ui-icons; fill: $color-gray-30;
height: 20px; height: 20px;
width: 20px; width: 20px;
&:hover { &:hover {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
@ -377,7 +377,7 @@
position: relative; position: relative;
.move-list { .move-list {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-radius: $br-small; border-radius: $br-small;
bottom: 30px; bottom: 30px;
display: flex; display: flex;

16
frontend/resources/styles/main/partials/library-bar-v2.scss
View file

@ -6,7 +6,7 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.library-bar { .library-bar {
background-color: $primary-ui-bg; background-color: $color-gray-50;
bottom: 0; bottom: 0;
height: 100%; height: 100%;
left: 0; left: 0;
@ -21,14 +21,14 @@
.library-tabs { .library-tabs {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin: 0; margin: 0;
padding-top: 12px; padding-top: 12px;
li { li {
background-color: darken($secondary-ui-bg, 10%); background-color: darken($color-gray-60, 10%);
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-top-right-radius: 3px; border-top-right-radius: 3px;
color: $color-gray; color: $color-gray;
@ -44,8 +44,8 @@
} }
&.current { &.current {
background-color: $primary-ui-bg; background-color: $color-gray-50;
color: $main-ui-color; color: $color-primary;
} }
} }
@ -61,7 +61,7 @@
padding-bottom: 20px; padding-bottom: 20px;
li { li {
border-bottom: 1px solid $secondary-ui-bg; border-bottom: 1px solid $color-gray-60;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -84,7 +84,7 @@
} }
.close { .close {
background: $primary-ui-bg; background: $color-gray-50;
cursor: pointer; cursor: pointer;
padding: 5px 10px; padding: 5px 10px;
@ -103,7 +103,7 @@
&:hover, &:hover,
&.current { &.current {
background-color: $main-ui-color; background-color: $color-primary;
span.element-title, span.element-title,
.element-subtitle { .element-subtitle {

34
frontend/resources/styles/main/partials/library-bar.scss
View file

@ -22,7 +22,7 @@
.library-tabs { .library-tabs {
align-items: center; align-items: center;
background-color: $color-white; background-color: $color-white;
border-bottom: 1px solid $medium-ui-border; border-bottom: 1px solid $color-gray-20;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin: 0; margin: 0;
@ -39,12 +39,12 @@
width: 118px; width: 118px;
&:hover { &:hover {
color: $intense-ui-text; color: $color-gray-60;
} }
&.current { &.current {
border-color: $main-ui-color; border-color: $color-primary;
color: $intense-ui-text; color: $color-gray-60;
} }
} }
@ -67,7 +67,7 @@
padding: $small $medium; padding: $small $medium;
span.element-title { span.element-title {
color: $intense-ui-text; color: $color-gray-60;
font-size: $fs14; font-size: $fs14;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -75,8 +75,8 @@
} }
&.recent-projects { &.recent-projects {
border-top: 1px solid $dark-ui-bg; border-top: 1px solid $color-gray-10;
border-bottom: 1px solid $dark-ui-bg; border-bottom: 1px solid $color-gray-10;
} }
input.element-title { input.element-title {
@ -86,7 +86,7 @@
} }
.close { .close {
background: $primary-ui-bg; background: $color-gray-50;
cursor: pointer; cursor: pointer;
padding: 5px 10px; padding: 5px 10px;
@ -104,15 +104,15 @@
} }
&:hover { &:hover {
background-color: $main-ui-color; background-color: $color-primary;
color: $intense-ui-text; color: $color-gray-60;
} }
&.current { &.current {
span.element-title, span.element-title,
.element-subtitle { .element-subtitle {
color: $intense-ui-text; color: $color-gray-60;
font-weight: bold; font-weight: bold;
} }
input.element-title { input.element-title {
@ -140,7 +140,7 @@
.add-project { .add-project {
align-items: center; align-items: center;
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-radius: $br-small; border-radius: $br-small;
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
@ -150,16 +150,16 @@
padding: $x-small; padding: $x-small;
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
&:hover { &:hover {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
} }
} }
} }
@ -174,7 +174,7 @@
.input-text { .input-text {
background: $color-white; background: $color-white;
border: 0; border: 0;
color: $intense-ui-text; color: $color-gray-60;
font-size: $fs14; font-size: $fs14;
padding: 4px 8px; padding: 4px 8px;
margin: 0; margin: 0;
@ -190,7 +190,7 @@
padding: 0 5px; padding: 0 5px;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 15px; height: 15px;
transform: rotate(45deg); transform: rotate(45deg);
width: 15px; width: 15px;

28
frontend/resources/styles/main/partials/lightbox.scss
View file

@ -23,7 +23,7 @@
.lightbox-body { .lightbox-body {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
border-radius: $br-medium; border-radius: $br-medium;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -117,7 +117,7 @@
} }
span { span {
color: $intense-ui-text; color: $color-gray-60;
font-size: $fs12; font-size: $fs12;
margin-left: $small; margin-left: $small;
} }
@ -162,7 +162,7 @@
&:hover { &:hover {
.big-svg { .big-svg {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $color-white; fill: $color-white;
@ -185,7 +185,7 @@
.clipboard-item { .clipboard-item {
align-items: center; align-items: center;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
padding: $small; padding: $small;
@ -196,7 +196,7 @@
svg { svg {
height: 20px; height: 20px;
fill: $medium-ui-border; fill: $color-gray-20;
margin-right: $medium; margin-right: $medium;
width: 20px; width: 20px;
} }
@ -206,10 +206,10 @@
&:hover { &:hover {
span { span {
color: $main-ui-color; color: $color-primary;
svg { svg {
fill: $main-ui-color fill: $color-primary
} }
} }
@ -234,7 +234,7 @@
// Export dialog // Export dialog
.content-col { .content-col {
align-items: center; align-items: center;
border-right: 1px solid $soft-ui-border; border-right: 1px solid $color-gray-60;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 300px; flex: 300px;
@ -252,7 +252,7 @@
.icon { .icon {
align-items: center; align-items: center;
background-color: $soft-ui-icons; background-color: $color-gray-60;
border-radius: $br-medium; border-radius: $br-medium;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
@ -261,7 +261,7 @@
width: 120px; width: 120px;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 50px; height: 50px;
width: 50px; width: 50px;
} }
@ -305,14 +305,14 @@
} }
:last-child { :last-child {
border-right: 1px solid $soft-ui-border; border-right: 1px solid $color-gray-60;
border-top-right-radius: $br-medium; border-top-right-radius: $br-medium;
border-bottom-right-radius: $br-medium; border-bottom-right-radius: $br-medium;
} }
li { li {
align-items: center; align-items: center;
border: 1px solid $soft-ui-border; border: 1px solid $color-gray-60;
border-right: none; border-right: none;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -322,7 +322,7 @@
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
color: $intense-ui-text; color: $color-gray-60;
} }
&.current { &.current {
@ -340,7 +340,7 @@
.library-item { .library-item {
border-radius: $br-medium; border-radius: $br-medium;
border: 1px solid $soft-ui-border; border: 1px solid $color-gray-60;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

24
frontend/resources/styles/main/partials/main-bar-v2.scss
View file

@ -7,7 +7,7 @@
.main-bar { .main-bar {
align-items: center; align-items: center;
background-color: $primary-ui-bg; background-color: $color-gray-50;
display: flex; display: flex;
height: 60px; height: 60px;
padding: $x-small $medium; padding: $x-small $medium;
@ -17,7 +17,7 @@
.main-logo { .main-logo {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 40px; height: 40px;
width: 120px; width: 120px;
} }
@ -35,11 +35,11 @@
li { li {
a { a {
color: $soft-ui-text; color: $color-gray-10;
padding: 1rem; padding: 1rem;
&:hover { &:hover {
color: $intense-ui-text; color: $color-gray-60;
} }
} }
@ -47,7 +47,7 @@
&.current { &.current {
a { a {
color: $intense-ui-text; color: $color-gray-60;
} }
} }
@ -64,7 +64,7 @@
position: relative; position: relative;
span { span {
color: $medium-ui-text; color: $color-gray-20;
margin: $small; margin: $small;
} }
@ -76,9 +76,9 @@
} }
.dropdown { .dropdown {
background-color: $secondary-ui-bg; background-color: $color-gray-60;
border-radius: $br-small; border-radius: $br-small;
border: 1px solid $soft-ui-border; border: 1px solid $color-gray-60;
min-width: 150px; min-width: 150px;
padding: 0 $small; padding: 0 $small;
position: absolute; position: absolute;
@ -93,23 +93,23 @@
padding: $small 0; padding: $small 0;
svg { svg {
fill: $medium-ui-text; fill: $color-gray-20;
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
span { span {
color: $medium-ui-text; color: $color-gray-20;
} }
&:hover { &:hover {
span { span {
color: $intense-ui-text; color: $color-gray-60;
} }
svg { svg {
fill: $intense-ui-text; fill: $color-gray-60;
} }
} }

16
frontend/resources/styles/main/partials/main-bar.scss
View file

@ -7,7 +7,7 @@
.main-bar { .main-bar {
align-items: center; align-items: center;
background-color: $primary-ui-bg; background-color: $color-gray-50;
display: flex; display: flex;
height: 40px; height: 40px;
padding: $x-small $medium; padding: $x-small $medium;
@ -18,7 +18,7 @@
padding-top: $x-small; padding-top: $x-small;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 30px; height: 30px;
width: 100px; width: 100px;
} }
@ -38,11 +38,11 @@
a { a {
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
color: $soft-ui-text; color: $color-gray-10;
margin: $x-small $big; margin: $x-small $big;
&:hover { &:hover {
border-color: $main-ui-color; border-color: $color-primary;
} }
} }
@ -50,7 +50,7 @@
&.current { &.current {
a { a {
border-color: $main-ui-color; border-color: $color-primary;
} }
} }
@ -67,7 +67,7 @@
position: relative; position: relative;
span { span {
color: $medium-ui-text; color: $color-gray-20;
margin: $small; margin: $small;
} }
@ -108,11 +108,11 @@
&:hover { &:hover {
span { span {
color: $intense-ui-text; color: $color-gray-60;
} }
svg { svg {
fill: $intense-ui-text; fill: $color-gray-60;
} }
} }

2
frontend/resources/styles/main/partials/project-bar.scss
View file

@ -6,7 +6,7 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.project-bar { .project-bar {
background-color: $primary-ui-bg; background-color: $color-gray-50;
border-right: 1px solid $color-gray-lighter; border-right: 1px solid $color-gray-lighter;
bottom: 0; bottom: 0;
height: 100%; height: 100%;

28
frontend/resources/styles/main/partials/sidebar-document-history.scss
View file

@ -8,15 +8,15 @@
.document-history { .document-history {
.history-tabs { .history-tabs {
background-color: $secondary-ui-bg; background-color: $color-gray-60;
display: flex; display: flex;
width: 100%; width: 100%;
li { li {
background: darken($secondary-ui-bg, 12%); background: darken($color-gray-60, 12%);
border-top-right-radius: $br-small; border-top-right-radius: $br-small;
border-top-left-radius: $br-small; border-top-left-radius: $br-small;
color: $intense-ui-text; color: $color-gray-60;
cursor: pointer; cursor: pointer;
font-size: $fs14; font-size: $fs14;
font-weight: bold; font-weight: bold;
@ -27,8 +27,8 @@
width: 50%; width: 50%;
&.selected { &.selected {
background-color: $primary-ui-bg; background-color: $color-gray-50;
color: $main-ui-color; color: $color-primary;
} }
} }
@ -42,7 +42,7 @@
li { li {
align-items: center; align-items: center;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: $fs14; font-size: $fs14;
@ -57,13 +57,13 @@
a { a {
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 15px; height: 15px;
margin-left: $x-small; margin-left: $x-small;
width: 15px; width: 15px;
&:hover { &:hover {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
@ -75,13 +75,13 @@
cursor: pointer; cursor: pointer;
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 12px; height: 12px;
margin-right: $small; margin-right: $small;
width: 12px; width: 12px;
&:hover { &:hover {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
@ -89,7 +89,7 @@
&.selected { &.selected {
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
@ -97,11 +97,11 @@
} }
&:hover { &:hover {
color: $main-ui-color; color: $color-primary;
} }
&.current { &.current {
color: $main-ui-color; color: $color-primary;
font-weight: bold; font-weight: bold;
span { span {
@ -109,7 +109,7 @@
display: flex; display: flex;
&::before { &::before {
background-color: $main-ui-color; background-color: $color-primary;
border-radius: 50%; border-radius: 50%;
content: ""; content: "";
height: 6px; height: 6px;

80
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -14,15 +14,15 @@
} }
.element-icons { .element-icons {
background-color: $secondary-ui-bg; background-color: $color-gray-60;
border: 1px solid $soft-ui-border; border: 1px solid $color-gray-60;
border-radius: $br-small; border-radius: $br-small;
display: flex; display: flex;
margin: $x-small; margin: $x-small;
li { li {
align-items: center; align-items: center;
border-right: 1px solid $soft-ui-border; border-right: 1px solid $color-gray-60;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -31,7 +31,7 @@
padding: $small; padding: $small;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 15px; height: 15px;
width: 15px; width: 15px;
} }
@ -39,13 +39,13 @@
&:hover { &:hover {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
&.selected { &.selected {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $color-white; fill: $color-white;
@ -62,12 +62,12 @@
} }
.element-set { .element-set {
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
color: $medium-ui-text; color: $color-gray-20;
margin: 0 $x-small; margin: 0 $x-small;
.element-set-title { .element-set-title {
color: $soft-ui-text; color: $color-gray-10;
font-size: $fs14; font-size: $fs14;
margin-top: $x-small; margin-top: $x-small;
padding: $x-small; padding: $x-small;
@ -81,7 +81,7 @@
li { li {
align-items: center; align-items: center;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: $small; padding: $small;
@ -90,7 +90,7 @@
.list-icon { .list-icon {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 15px; height: 15px;
margin-right: $x-small; margin-right: $x-small;
width: 15px; width: 15px;
@ -99,7 +99,7 @@
} }
span { span {
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs14; font-size: $fs14;
max-width: 75%; max-width: 75%;
overflow-x: hidden; overflow-x: hidden;
@ -116,13 +116,13 @@
a { a {
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 15px; height: 15px;
margin-left: $x-small; margin-left: $x-small;
width: 15px; width: 15px;
&:hover { &:hover {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
@ -136,13 +136,13 @@
.list-icon { .list-icon {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
span { span {
color: $main-ui-color; color: $color-primary;
} }
} }
@ -152,13 +152,13 @@
.list-icon { .list-icon {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
span { span {
color: $main-ui-color; color: $color-primary;
font-weight: bold; font-weight: bold;
} }
@ -185,37 +185,37 @@
padding: $small $x-small; padding: $small $x-small;
.input-text { .input-text {
background-color: $input-bg; background-color: $color-gray-50;
border-color: $intense-ui-border; border-color: $color-gray-40;
color: $soft-ui-text; color: $color-gray-10;
font-size: $fs13; font-size: $fs13;
margin: $x-small; margin: $x-small;
padding: $x-small; padding: $x-small;
width: 100%; width: 100%;
&:focus { &:focus {
color: lighten($soft-ui-text, 8%); color: lighten($color-gray-10, 8%);
border-color: $medium-ui-border; border-color: $color-gray-20;
} }
} }
.input-select { .input-select {
color: $soft-ui-text; color: $color-gray-10;
&:focus { &:focus {
color: lighten($soft-ui-text, 8%); color: lighten($color-gray-10, 8%);
} }
option { option {
color: $intense-ui-text; color: $color-gray-60;
background: $color-white; background: $color-white;
font-size: $fs12; font-size: $fs12;
} }
} }
span { span {
color: $soft-ui-text; color: $color-gray-10;
font-size: $fs12; font-size: $fs12;
} }
@ -224,12 +224,12 @@
width: 20%; width: 20%;
svg { svg {
fill: $medium-ui-text; fill: $color-gray-20;
height: 15px; height: 15px;
width: 15px; width: 15px;
&:hover { &:hover {
fill: $main-ui-color; fill: $color-primary;
} }
} }
@ -237,7 +237,7 @@
&.selected { &.selected {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
@ -276,8 +276,8 @@
width: 100%; width: 100%;
option { option {
color: $intense-ui-text; color: $color-gray-60;
background: $secondary-ui-bg; background: $color-gray-60;
font-size: $fs12; font-size: $fs12;
} }
} }
@ -286,7 +286,7 @@
.color-th { .color-th {
background-color: $color-gray-lighter; background-color: $color-gray-lighter;
border: 1px solid $intense-ui-border; border: 1px solid $color-gray-40;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
@ -296,20 +296,20 @@
&.palette-th { &.palette-th {
align-items: center; align-items: center;
border: 1px solid $medium-ui-icons; border: 1px solid $color-gray-30;
display: flex; display: flex;
justify-content: center; justify-content: center;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
&:hover { &:hover {
border-color: $main-ui-color; border-color: $color-primary;
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
@ -324,7 +324,7 @@
span { span {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 20px; height: 20px;
margin: $x-small $small; margin: $x-small $small;
width: 20px; width: 20px;
@ -334,7 +334,7 @@
&.current { &.current {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
@ -362,7 +362,7 @@
width: 15px; width: 15px;
.color-bar-select { .color-bar-select {
background-color: $primary-ui-bg; background-color: $color-gray-50;
height: 3px; height: 3px;
left: -4px; left: -4px;
position: absolute; position: absolute;

10
frontend/resources/styles/main/partials/sidebar-icons.scss
View file

@ -19,7 +19,7 @@
.figure-btn { .figure-btn {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
border-radius: 3px; border-radius: 3px;
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
@ -31,18 +31,18 @@
width: 54px; width: 54px;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 40px; height: 40px;
width: 40px; width: 40px;
} }
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-color: $soft-ui-border; border-color: $color-gray-60;
} }
&.selected { &.selected {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $color-white; fill: $color-white;

40
frontend/resources/styles/main/partials/sidebar-layers-v2.scss
View file

@ -6,7 +6,7 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.layers-tools { .layers-tools {
border-top: 1px solid $medium-ui-border; border-top: 1px solid $color-gray-20;
bottom: 0; bottom: 0;
display: flex; display: flex;
height: 30px; height: 30px;
@ -25,12 +25,12 @@
cursor: pointer; cursor: pointer;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 14px; height: 14px;
width: 14px; width: 14px;
&:hover { &:hover {
fill: $intense-ui-text; fill: $color-gray-60;
} }
} }
@ -40,7 +40,7 @@
svg { svg {
cursor: auto; cursor: auto;
fill: $soft-ui-icons; fill: $color-gray-60;
} }
} }
@ -92,7 +92,7 @@
width: 100%; width: 100%;
ul { ul {
border-left: 6px solid $intense-ui-border; border-left: 6px solid $color-gray-40;
margin: 0; margin: 0;
} }
@ -124,14 +124,14 @@
.element-list-body { .element-list-body {
align-items: center; align-items: center;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
padding: $small; padding: $small;
transition: none; transition: none;
width: 100%; width: 100%;
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 13px; height: 13px;
margin-right: 8px; margin-right: 8px;
width: 13px; width: 13px;
@ -147,7 +147,7 @@
.element-icon { .element-icon {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
} }
} }
@ -157,7 +157,7 @@
width: 12px; width: 12px;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
transform: rotate(90deg); transform: rotate(90deg);
width: 10px; width: 10px;
} }
@ -169,7 +169,7 @@
&:hover { &:hover {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
} }
} }
@ -198,7 +198,7 @@
min-height: 16px; min-height: 16px;
display: block; display: block;
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs13; font-size: $fs13;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -210,13 +210,13 @@
.element-icon { .element-icon {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
span { span {
color: $main-ui-color; color: $color-primary;
} }
} }
@ -224,38 +224,38 @@
.selected { .selected {
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
&:hover { &:hover {
border-color: $main-ui-color; border-color: $color-primary;
.element-icon { .element-icon {
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
span { span {
color: $intense-ui-text; color: $color-gray-60;
} }
} }
&.drag-top { &.drag-top {
border-top: 40px solid $soft-ui-border !important; border-top: 40px solid $color-gray-60 !important;
} }
&.drag-bottom { &.drag-bottom {
border-bottom: 40px solid $soft-ui-border !important; border-bottom: 40px solid $color-gray-60 !important;
} }
&.drag-inside { &.drag-inside {
border: 2px solid $main-ui-color !important; border: 2px solid $color-primary !important;
} }
} }

46
frontend/resources/styles/main/partials/sidebar-layers.scss
View file

@ -6,7 +6,7 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.layers-tools { .layers-tools {
border-top: 1px solid $medium-ui-border; border-top: 1px solid $color-gray-20;
bottom: 0; bottom: 0;
display: flex; display: flex;
height: 30px; height: 30px;
@ -25,12 +25,12 @@
cursor: pointer; cursor: pointer;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 14px; height: 14px;
width: 14px; width: 14px;
&:hover { &:hover {
fill: $intense-ui-text; fill: $color-gray-60;
} }
} }
@ -40,7 +40,7 @@
svg { svg {
cursor: auto; cursor: auto;
fill: $soft-ui-icons; fill: $color-gray-60;
} }
} }
@ -92,7 +92,7 @@
width: 100%; width: 100%;
ul { ul {
border-left: 6px solid $intense-ui-border; border-left: 6px solid $color-gray-40;
margin: 0; margin: 0;
} }
@ -130,7 +130,7 @@
width: 100%; width: 100%;
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 13px; height: 13px;
margin-right: 8px; margin-right: 8px;
width: 13px; width: 13px;
@ -145,7 +145,7 @@
.block-element { .block-element {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
} }
} }
} }
@ -153,7 +153,7 @@
.element-icon { .element-icon {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
} }
} }
@ -163,7 +163,7 @@
width: 12px; width: 12px;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
transform: rotate(90deg); transform: rotate(90deg);
width: 10px; width: 10px;
} }
@ -175,7 +175,7 @@
&:hover { &:hover {
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
@ -204,7 +204,7 @@
min-height: 16px; min-height: 16px;
display: block; display: block;
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs13; font-size: $fs13;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -216,26 +216,26 @@
.element-icon { .element-icon {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
span { span {
color: $main-ui-color; color: $color-primary;
} }
&:hover { &:hover {
background-color: $main-ui-color; background-color: $color-primary;
.element-icon, .element-icon,
.element-actions { .element-actions {
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
} }
} }
.element-name { .element-name {
color: $intense-ui-text; color: $color-gray-60;
} }
} }
@ -244,39 +244,39 @@
.selected { .selected {
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
&:hover { &:hover {
background-color: $main-ui-color; background-color: $color-primary;
.element-icon, .element-icon,
.element-actions { .element-actions {
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
} }
} }
span { span {
color: $intense-ui-text; color: $color-gray-60;
} }
} }
&.drag-top { &.drag-top {
border-top: 40px solid $soft-ui-border !important; border-top: 40px solid $color-gray-60 !important;
} }
&.drag-bottom { &.drag-bottom {
border-bottom: 40px solid $soft-ui-border !important; border-bottom: 40px solid $color-gray-60 !important;
} }
&.drag-inside { &.drag-inside {
border: 2px solid $main-ui-color !important; border: 2px solid $color-primary !important;
} }
} }

52
frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss
View file

@ -9,13 +9,13 @@
.project-title { .project-title {
align-items: center; align-items: center;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
padding: $x-small; padding: $x-small;
width: 100%; width: 100%;
span { span {
color: $intense-ui-text; color: $color-gray-60;
font-size: $fs14; font-size: $fs14;
font-weight: bold; font-weight: bold;
max-width: 80%; max-width: 80%;
@ -26,7 +26,7 @@
.add-page { .add-page {
align-items: center; align-items: center;
background-color: $soft-ui-icons; background-color: $color-gray-60;
border-radius: $br-small; border-radius: $br-small;
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
@ -36,14 +36,14 @@
padding: $x-small; padding: $x-small;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-color: $soft-ui-border; border-color: $color-gray-60;
} }
} }
@ -61,7 +61,7 @@
.page-icon { .page-icon {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 15px; height: 15px;
margin-right: $x-small; margin-right: $x-small;
width: 15px; width: 15px;
@ -70,7 +70,7 @@
} }
span { span {
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs14; font-size: $fs14;
max-width: 75%; max-width: 75%;
overflow-x: hidden; overflow-x: hidden;
@ -86,13 +86,13 @@
a { a {
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 15px; height: 15px;
margin-left: $x-small; margin-left: $x-small;
width: 15px; width: 15px;
&:hover { &:hover {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
@ -106,13 +106,13 @@
.page-icon { .page-icon {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
span { span {
color: $main-ui-color; color: $color-primary;
} }
} }
@ -122,13 +122,13 @@
.page-icon { .page-icon {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
span { span {
color: $main-ui-color; color: $color-primary;
font-weight: bold; font-weight: bold;
} }
@ -147,14 +147,14 @@
.element-list-body { .element-list-body {
align-items: center; align-items: center;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
padding: $small; padding: $small;
transition: none; transition: none;
width: 100%; width: 100%;
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 13px; height: 13px;
margin-right: 8px; margin-right: 8px;
width: 13px; width: 13px;
@ -170,7 +170,7 @@
.element-icon { .element-icon {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
} }
} }
@ -180,7 +180,7 @@
width: 12px; width: 12px;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
transform: rotate(90deg); transform: rotate(90deg);
width: 10px; width: 10px;
} }
@ -192,7 +192,7 @@
&:hover { &:hover {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
} }
} }
@ -221,7 +221,7 @@
min-height: 16px; min-height: 16px;
display: block; display: block;
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs13; font-size: $fs13;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -233,13 +233,13 @@
.element-icon { .element-icon {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
span { span {
color: $main-ui-color; color: $color-primary;
} }
} }
@ -247,24 +247,24 @@
.selected { .selected {
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
&:hover { &:hover {
border-color: $main-ui-color; border-color: $color-primary;
.element-icon { .element-icon {
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
span { span {
color: $intense-ui-text; color: $color-gray-60;
} }
} }

32
frontend/resources/styles/main/partials/sidebar-sitemap.scss
View file

@ -12,7 +12,7 @@
.add-page { .add-page {
align-items: center; align-items: center;
background-color: $soft-ui-icons; background-color: $color-gray-60;
border-radius: $br-small; border-radius: $br-small;
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
@ -22,16 +22,16 @@
padding: $x-small; padding: $x-small;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
&:hover { &:hover {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
} }
} }
} }
@ -48,7 +48,7 @@
.page-icon { .page-icon {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 13px; height: 13px;
margin-right: $small; margin-right: $small;
width: 13px; width: 13px;
@ -57,7 +57,7 @@
} }
span { span {
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs13; font-size: $fs13;
max-width: 75%; max-width: 75%;
overflow-x: hidden; overflow-x: hidden;
@ -73,7 +73,7 @@
a { a {
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 15px; height: 15px;
margin-left: $x-small; margin-left: $x-small;
opacity: .6; opacity: .6;
@ -90,16 +90,16 @@
} }
&:hover { &:hover {
background-color: $main-ui-color; background-color: $color-primary;
.page-icon { .page-icon {
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
} }
span { span {
color: $intense-ui-text; color: $color-gray-60;
} }
} }
@ -116,13 +116,13 @@
.page-icon { .page-icon {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
span { span {
color: $main-ui-color; color: $color-primary;
} }
} }
@ -132,12 +132,12 @@
.page-icon { .page-icon {
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
} }
} }
span { span {
color: $intense-ui-text; color: $color-gray-60;
} }
} }
@ -152,7 +152,7 @@
width: 100%; width: 100%;
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 13px; height: 13px;
margin-right: 8px; margin-right: 8px;
width: 13px; width: 13px;
@ -167,7 +167,7 @@
&.dragging { &.dragging {
// TODO: revisit this // TODO: revisit this
background-color: $dark-ui-bg; background-color: $color-gray-10;
} }
} }
} }

8
frontend/resources/styles/main/partials/sidebar-tools.scss
View file

@ -11,7 +11,7 @@
.tool-btn { .tool-btn {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -22,17 +22,17 @@
width: 54px; width: 54px;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 35px; height: 35px;
width: 35px; width: 35px;
} }
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
} }
&.selected { &.selected {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $color-white; fill: $color-white;

10
frontend/resources/styles/main/partials/sidebar-v2.scss
View file

@ -6,7 +6,7 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.settings-bar { .settings-bar {
background-color: $primary-ui-bg; background-color: $color-gray-50;
bottom: 0; bottom: 0;
height: 100%; height: 100%;
position: fixed; position: fixed;
@ -28,7 +28,7 @@
height: 100%; height: 100%;
.tool-window { .tool-window {
border-bottom: 1px solid $medium-ui-border; border-bottom: 1px solid $color-gray-20;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
@ -36,19 +36,19 @@
.tool-window-bar { .tool-window-bar {
align-items: center; align-items: center;
border-bottom: 1px solid $medium-ui-border; border-bottom: 1px solid $color-gray-20;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
padding: 2px $x-small; padding: 2px $x-small;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
span { span {
color: $intense-ui-text; color: $color-gray-60;
font-weight: bold; font-weight: bold;
} }

8
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -6,7 +6,7 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.settings-bar { .settings-bar {
background-color: $primary-ui-bg; background-color: $color-gray-50;
bottom: 0; bottom: 0;
height: 100%; height: 100%;
position: fixed; position: fixed;
@ -28,7 +28,7 @@
height: 100%; height: 100%;
.tool-window { .tool-window {
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
@ -41,13 +41,13 @@
padding: $small; padding: $small;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
span { span {
color: $soft-ui-text; color: $color-gray-10;
font-size: $fs14; font-size: $fs14;
} }

12
frontend/resources/styles/main/partials/user-settings.scss
View file

@ -12,21 +12,21 @@
li { li {
background-color: transparent; background-color: transparent;
border: 1px solid $medium-ui-border; border: 1px solid $color-gray-20;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
margin: $medium; margin: $medium;
padding: $small $medium; padding: $small $medium;
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-color: transparent; border-color: transparent;
} }
&.current { &.current {
background-color: $primary-ui-bg; background-color: $color-gray-50;
border: 0; border: 0;
color: $main-ui-color; color: $color-primary;
} }
} }
@ -42,14 +42,14 @@
width: 500px; width: 500px;
.user-settings-label { .user-settings-label {
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
font-weight: bold; font-weight: bold;
margin: $x-small 0 $medium 0; margin: $x-small 0 $medium 0;
padding: $medium; padding: $medium;
} }
.input-text { .input-text {
color: $intense-ui-text; color: $color-gray-60;
} }
.btn-primary { .btn-primary {

58
frontend/resources/styles/main/partials/workspace-bar-v2.scss
View file

@ -7,8 +7,8 @@
.workspace-bar { .workspace-bar {
align-items: center; align-items: center;
background-color: $primary-ui-bg; background-color: $color-gray-50;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
height: 50px; height: 50px;
padding: $x-small $medium $x-small 65px; padding: $x-small $medium $x-small 65px;
@ -17,7 +17,7 @@
.main-icon { .main-icon {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 100%; height: 100%;
@ -31,7 +31,7 @@
height: 35px; height: 35px;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 35px; height: 35px;
width: 35px; width: 35px;
@ -40,7 +40,7 @@
&:hover { &:hover {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
@ -51,7 +51,7 @@
.project-tree-btn { .project-tree-btn {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
border-radius: $br-small; border-radius: $br-small;
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
@ -60,26 +60,26 @@
width: 164px; width: 164px;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 20px; height: 20px;
margin-right: $small; margin-right: $small;
width: 20px; width: 20px;
} }
span { span {
color: $intense-ui-text; color: $color-gray-60;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-color: $soft-ui-border; border-color: $color-gray-60;
} }
&.selected { &.selected {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $color-white; fill: $color-white;
@ -97,7 +97,7 @@
.options-btn { .options-btn {
align-items: center; align-items: center;
border-right: 4px double $soft-ui-border; border-right: 4px double $color-gray-60;
display: flex; display: flex;
margin: 0; margin: 0;
@ -107,7 +107,7 @@
li { li {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
@ -124,18 +124,18 @@
} }
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-color: $soft-ui-border; border-color: $color-gray-60;
} }
&.selected { &.selected {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $color-white; fill: $color-white;
@ -144,18 +144,18 @@
} }
&.view-mode { &.view-mode {
background-color: $intense-ui-icons; background-color: $color-gray-20;
svg { svg {
fill: $secondary-ui-bg; fill: $color-gray-60;
} }
&:hover { &:hover {
background-color: $color-white; background-color: $color-white;
border-color: $soft-ui-border; border-color: $color-gray-60;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
@ -190,9 +190,9 @@
.remove-zoom { .remove-zoom {
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
border: 1px solid $intense-ui-border; border: 1px solid $color-gray-40;
cursor: pointer; cursor: pointer;
color: $intense-ui-border; color: $color-gray-40;
display: none; display: none;
flex-shrink: 0; flex-shrink: 0;
font-size: $fs20; font-size: $fs20;
@ -241,7 +241,7 @@
.options-btn { .options-btn {
align-items: center; align-items: center;
border-right: 4px double $soft-ui-border; border-right: 4px double $color-gray-60;
display: flex; display: flex;
margin: 0; margin: 0;
@ -251,7 +251,7 @@
li { li {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
@ -268,18 +268,18 @@
} }
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-color: $soft-ui-border; border-color: $color-gray-60;
} }
&.selected { &.selected {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $color-white; fill: $color-white;

46
frontend/resources/styles/main/partials/workspace-bar.scss
View file

@ -7,8 +7,8 @@
.workspace-bar { .workspace-bar {
align-items: center; align-items: center;
background-color: $primary-ui-bg; background-color: $color-gray-50;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
height: 40px; height: 40px;
padding: $x-small $medium $x-small 65px; padding: $x-small $medium $x-small 65px;
@ -17,7 +17,7 @@
.main-icon { .main-icon {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 100%; height: 100%;
@ -31,7 +31,7 @@
height: 30px; height: 30px;
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 30px; height: 30px;
width: 30px; width: 30px;
@ -40,7 +40,7 @@
&:hover { &:hover {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
@ -56,14 +56,14 @@
padding: $x-small; padding: $x-small;
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 20px; height: 20px;
margin-right: $small; margin-right: $small;
width: 20px; width: 20px;
} }
span { span {
color: $soft-ui-text; color: $color-gray-10;
font-size: $fs14; font-size: $fs14;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -78,7 +78,7 @@
.options-btn { .options-btn {
align-items: center; align-items: center;
border-right: 4px double $soft-ui-border; border-right: 4px double $color-gray-60;
display: flex; display: flex;
margin: 0; margin: 0;
@ -105,7 +105,7 @@
} }
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
@ -128,7 +128,7 @@
&:hover { &:hover {
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
} }
} }
@ -161,7 +161,7 @@
position: relative; position: relative;
span { span {
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs15; font-size: $fs15;
} }
@ -169,9 +169,9 @@
.remove-zoom { .remove-zoom {
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
border: 1px solid $intense-ui-border; border: 1px solid $color-gray-40;
cursor: pointer; cursor: pointer;
color: $intense-ui-border; color: $color-gray-40;
display: none; display: none;
flex-shrink: 0; flex-shrink: 0;
font-size: $fs20; font-size: $fs20;
@ -218,7 +218,7 @@
.options-btn { .options-btn {
align-items: center; align-items: center;
border-right: 4px double $soft-ui-border; border-right: 4px double $color-gray-60;
display: flex; display: flex;
margin: 0; margin: 0;
@ -228,7 +228,7 @@
li { li {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
@ -245,18 +245,18 @@
} }
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-color: $soft-ui-border; border-color: $color-gray-60;
} }
&.selected { &.selected {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $color-white; fill: $color-white;
@ -273,7 +273,7 @@
display: flex; display: flex;
.view-mode { .view-mode {
background-color: $intense-ui-icons; background-color: $color-gray-20;
align-items: center; align-items: center;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
@ -290,16 +290,16 @@
} }
svg { svg {
fill: $secondary-ui-bg; fill: $color-gray-60;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
&:hover { &:hover {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
} }
} }

10
frontend/resources/styles/main/partials/workspace.scss
View file

@ -6,7 +6,7 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.workspace-content { .workspace-content {
background-color: $canvas-bg; background-color: $color-canvas;
display: flex; display: flex;
height: 100%; height: 100%;
/* width: 100%; */ /* width: 100%; */
@ -115,10 +115,10 @@
top: 0px; top: 0px;
rect { rect {
fill: $canvas-bg; fill: $color-canvas;
} }
path { path {
stroke: $medium-ui-text; stroke: $color-gray-20;
} }
} }
@ -128,10 +128,10 @@
left: 0px; left: 0px;
rect { rect {
fill: $canvas-bg; fill: $color-canvas;
} }
path { path {
stroke: $medium-ui-text; stroke: $color-gray-20;
} }
} }

44
frontend/resources/styles/view/layouts/main-layout.scss
View file

@ -16,8 +16,8 @@
} }
.view-nav { .view-nav {
background-color: $primary-ui-bg; background-color: $color-gray-50;
border-top: 1px solid $soft-ui-border; border-top: 1px solid $color-gray-60;
border-right: 0; border-right: 0;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
@ -25,7 +25,7 @@
width: 100%; width: 100%;
@include bp(tablet) { @include bp(tablet) {
border-right: 1px solid $soft-ui-border; border-right: 1px solid $color-gray-60;
border-top: 0; border-top: 0;
height: 100%; height: 100%;
width: 70px; width: 70px;
@ -44,7 +44,7 @@
li { li {
align-items: center; align-items: center;
background-color: $secondary-ui-bg; background-color: $color-gray-60;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
@ -61,18 +61,18 @@
} }
svg { svg {
fill: $intense-ui-icons; fill: $color-gray-20;
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
&:hover { &:hover {
background-color: $dark-ui-bg; background-color: $color-gray-10;
border-color: $soft-ui-border; border-color: $color-gray-60;
} }
&.selected { &.selected {
background-color: $main-ui-color; background-color: $color-primary;
svg { svg {
fill: $color-white; fill: $color-white;
@ -85,8 +85,8 @@
} }
.view-sitemap { .view-sitemap {
background-color: $primary-ui-bg; background-color: $color-gray-50;
border-top: 1px solid $soft-ui-border; border-top: 1px solid $color-gray-60;
border-right: 0; border-right: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -96,13 +96,13 @@
overflow: scroll; overflow: scroll;
.sitemap-title { .sitemap-title {
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
padding: $small; padding: $small;
font-weight: bold; font-weight: bold;
} }
@include bp(tablet) { @include bp(tablet) {
border-right: 1px solid $soft-ui-border; border-right: 1px solid $color-gray-60;
border-top: 0; border-top: 0;
height: 100%; height: 100%;
width: 220px; width: 220px;
@ -116,7 +116,7 @@
li { li {
align-items: center; align-items: center;
border-bottom: 1px solid $soft-ui-border; border-bottom: 1px solid $color-gray-60;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -126,7 +126,7 @@
.page-icon { .page-icon {
svg { svg {
fill: $medium-ui-icons; fill: $color-gray-30;
height: 15px; height: 15px;
margin-right: $x-small; margin-right: $x-small;
width: 15px; width: 15px;
@ -135,7 +135,7 @@
} }
span { span {
color: $medium-ui-text; color: $color-gray-20;
font-size: $fs14; font-size: $fs14;
max-width: 75%; max-width: 75%;
overflow-x: hidden; overflow-x: hidden;
@ -151,13 +151,13 @@
a { a {
svg { svg {
fill: $soft-ui-icons; fill: $color-gray-60;
height: 15px; height: 15px;
margin-left: $x-small; margin-left: $x-small;
width: 15px; width: 15px;
&:hover { &:hover {
fill: $intense-ui-icons; fill: $color-gray-20;
} }
} }
@ -171,13 +171,13 @@
.page-icon { .page-icon {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
span { span {
color: $main-ui-color; color: $color-primary;
} }
} }
@ -187,13 +187,13 @@
.page-icon { .page-icon {
svg { svg {
fill: $main-ui-color; fill: $color-primary;
} }
} }
span { span {
color: $main-ui-color; color: $color-primary;
font-weight: bold; font-weight: bold;
} }
@ -213,7 +213,7 @@
} }
.view-canvas { .view-canvas {
background-color: $secondary-ui-bg; background-color: $color-gray-60;
width: 100%; width: 100%;
overflow: scroll; overflow: scroll;
display: flex; display: flex;

3
package-lock.json generated Normal file
View file

@ -0,0 +1,3 @@
{
"lockfileVersion": 1
}