Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues 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>
body {
background-color: lighten($dark-ui-bg, 5%);
color: $medium-ui-text;
background-color: lighten($color-gray-10, 5%);
color: $color-gray-20;
display: flex;
flex-direction: column;
font-family: "sourcesanspro", sans-serif;
@ -55,7 +55,7 @@ svg {
a {
cursor: pointer;
color: $main-ui-color;
color: $color-primary;
&:hover {
color: $color-primary-dark;
@ -209,7 +209,7 @@ h4 {
}
hr {
border-top: solid 1px $soft-ui-border;
border-top: solid 1px $color-gray-60;
border-right: 0;
border-left: 0;
border-bottom: 0;

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

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

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

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

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

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

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

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

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

@ -11,7 +11,7 @@
//#################################################
@import 'common/dependencies/colors';
@import 'common/dependencies/uxbox-light';
//@import 'common/dependencies/uxbox-light';
//@import 'common/dependencies/uxbox-dark';
@import 'common/dependencies/helpers';
@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>
.activity-bar {
background-color: $primary-ui-bg;
background-color: $color-gray-50;
bottom: 0;
height: 100%;
position: fixed;

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

@ -8,8 +8,8 @@
.color-palette {
@include animation(0,.5s,fadeInUp);
align-items: center;
background-color: $primary-ui-bg;
border-top: 1px solid $soft-ui-border;
background-color: $color-gray-50;
border-top: 1px solid $color-gray-60;
display: flex;
padding: 1rem;
position: absolute;
@ -77,7 +77,7 @@
}
}
&.current {
background-color: $main-ui-color;
background-color: $color-primary;
border-color: $color-white;
svg {
fill: $color-white;
@ -111,7 +111,7 @@
flex-basis: 66px;
.color {
background-color: $color-gray-lighter;
border: 2px solid $soft-ui-border;
border: 2px solid $color-gray-60;
border-radius: 50%;
flex-shrink: 0;
margin-bottom: .4rem;
@ -153,7 +153,7 @@
margin-left: 1.5rem;
.color {
align-items: center;
background-color: $primary-ui-bg;
background-color: $color-gray-50;
border: 3px dashed $color-gray-lighter;
cursor: pointer;
display: flex;
@ -201,7 +201,7 @@
}
.color-tooltip {
background-color: $primary-ui-bg;
background-color: $color-gray-50;
border: 1px solid $color-gray-lighter;
border-radius: 3px;
left: -102px;
@ -217,7 +217,7 @@
max-width: 100px;
}
&::after {
background-color: $primary-ui-bg;
background-color: $color-gray-50;
bottom: -32px;
border-bottom: 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 {
color: $intense-ui-text;
color: $color-gray-60;
font-size: $fs13;
margin: 5px;
padding: 5px;
@ -58,7 +58,7 @@
}
span {
color: $medium-ui-text;
color: $color-gray-20;
font-size: $fs12;
}
@ -154,27 +154,27 @@
.color-info {
input {
border: 1px solid $intense-ui-border;
border: 1px solid $color-gray-40;
border-radius: $br-small;
color: $soft-ui-text;
color: $color-gray-10;
margin: 3px 0 0 $x-small;
padding: 0 $x-small;
width: 58px;
font-size: $fs13;
&:focus {
border-color: $soft-ui-text;
border-color: $color-gray-10;
}
}
}
.type {
color: $soft-ui-text;
color: $color-gray-10;
margin-right: $x-small;
}
.number {
color: $intense-ui-text;
color: $color-gray-60;
}
}
@ -190,14 +190,14 @@
width: auto;
span {
color: $medium-ui-text;
color: $color-gray-20;
font-size: $fs12;
}
.inputs-area {
.input-text {
color: $intense-ui-text;
color: $color-gray-60;
font-size: $fs13;
margin: 5px;
padding: 5px;

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -7,7 +7,7 @@
.main-bar {
align-items: center;
background-color: $primary-ui-bg;
background-color: $color-gray-50;
display: flex;
height: 60px;
padding: $x-small $medium;
@ -17,7 +17,7 @@
.main-logo {
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
height: 40px;
width: 120px;
}
@ -35,11 +35,11 @@
li {
a {
color: $soft-ui-text;
color: $color-gray-10;
padding: 1rem;
&:hover {
color: $intense-ui-text;
color: $color-gray-60;
}
}
@ -47,7 +47,7 @@
&.current {
a {
color: $intense-ui-text;
color: $color-gray-60;
}
}
@ -64,7 +64,7 @@
position: relative;
span {
color: $medium-ui-text;
color: $color-gray-20;
margin: $small;
}
@ -76,9 +76,9 @@
}
.dropdown {
background-color: $secondary-ui-bg;
background-color: $color-gray-60;
border-radius: $br-small;
border: 1px solid $soft-ui-border;
border: 1px solid $color-gray-60;
min-width: 150px;
padding: 0 $small;
position: absolute;
@ -93,23 +93,23 @@
padding: $small 0;
svg {
fill: $medium-ui-text;
fill: $color-gray-20;
height: 12px;
width: 12px;
}
span {
color: $medium-ui-text;
color: $color-gray-20;
}
&:hover {
span {
color: $intense-ui-text;
color: $color-gray-60;
}
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 {
align-items: center;
background-color: $primary-ui-bg;
background-color: $color-gray-50;
display: flex;
height: 40px;
padding: $x-small $medium;
@ -18,7 +18,7 @@
padding-top: $x-small;
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 30px;
width: 100px;
}
@ -38,11 +38,11 @@
a {
border-bottom: 2px solid transparent;
color: $soft-ui-text;
color: $color-gray-10;
margin: $x-small $big;
&:hover {
border-color: $main-ui-color;
border-color: $color-primary;
}
}
@ -50,7 +50,7 @@
&.current {
a {
border-color: $main-ui-color;
border-color: $color-primary;
}
}
@ -67,7 +67,7 @@
position: relative;
span {
color: $medium-ui-text;
color: $color-gray-20;
margin: $small;
}
@ -108,11 +108,11 @@
&:hover {
span {
color: $intense-ui-text;
color: $color-gray-60;
}
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>
.project-bar {
background-color: $primary-ui-bg;
background-color: $color-gray-50;
border-right: 1px solid $color-gray-lighter;
bottom: 0;
height: 100%;

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

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

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

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

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

@ -19,7 +19,7 @@
.figure-btn {
align-items: center;
background-color: $secondary-ui-bg;
background-color: $color-gray-60;
border-radius: 3px;
border: 1px solid transparent;
cursor: pointer;
@ -31,18 +31,18 @@
width: 54px;
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 40px;
width: 40px;
}
&:hover {
background-color: $dark-ui-bg;
border-color: $soft-ui-border;
background-color: $color-gray-10;
border-color: $color-gray-60;
}
&.selected {
background-color: $main-ui-color;
background-color: $color-primary;
svg {
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>
.layers-tools {
border-top: 1px solid $medium-ui-border;
border-top: 1px solid $color-gray-20;
bottom: 0;
display: flex;
height: 30px;
@ -25,12 +25,12 @@
cursor: pointer;
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
height: 14px;
width: 14px;
&:hover {
fill: $intense-ui-text;
fill: $color-gray-60;
}
}
@ -40,7 +40,7 @@
svg {
cursor: auto;
fill: $soft-ui-icons;
fill: $color-gray-60;
}
}
@ -92,7 +92,7 @@
width: 100%;
ul {
border-left: 6px solid $intense-ui-border;
border-left: 6px solid $color-gray-40;
margin: 0;
}
@ -124,14 +124,14 @@
.element-list-body {
align-items: center;
border-bottom: 1px solid $soft-ui-border;
border-bottom: 1px solid $color-gray-60;
display: flex;
padding: $small;
transition: none;
width: 100%;
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
height: 13px;
margin-right: 8px;
width: 13px;
@ -147,7 +147,7 @@
.element-icon {
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
}
}
@ -157,7 +157,7 @@
width: 12px;
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
transform: rotate(90deg);
width: 10px;
}
@ -169,7 +169,7 @@
&:hover {
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
}
}
@ -198,7 +198,7 @@
min-height: 16px;
display: block;
color: $medium-ui-text;
color: $color-gray-20;
font-size: $fs13;
overflow-x: hidden;
text-overflow: ellipsis;
@ -210,13 +210,13 @@
.element-icon {
svg {
fill: $main-ui-color;
fill: $color-primary;
}
}
span {
color: $main-ui-color;
color: $color-primary;
}
}
@ -224,38 +224,38 @@
.selected {
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
}
}
&:hover {
border-color: $main-ui-color;
border-color: $color-primary;
.element-icon {
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
}
}
span {
color: $intense-ui-text;
color: $color-gray-60;
}
}
&.drag-top {
border-top: 40px solid $soft-ui-border !important;
border-top: 40px solid $color-gray-60 !important;
}
&.drag-bottom {
border-bottom: 40px solid $soft-ui-border !important;
border-bottom: 40px solid $color-gray-60 !important;
}
&.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>
.layers-tools {
border-top: 1px solid $medium-ui-border;
border-top: 1px solid $color-gray-20;
bottom: 0;
display: flex;
height: 30px;
@ -25,12 +25,12 @@
cursor: pointer;
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
height: 14px;
width: 14px;
&:hover {
fill: $intense-ui-text;
fill: $color-gray-60;
}
}
@ -40,7 +40,7 @@
svg {
cursor: auto;
fill: $soft-ui-icons;
fill: $color-gray-60;
}
}
@ -92,7 +92,7 @@
width: 100%;
ul {
border-left: 6px solid $intense-ui-border;
border-left: 6px solid $color-gray-40;
margin: 0;
}
@ -130,7 +130,7 @@
width: 100%;
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
height: 13px;
margin-right: 8px;
width: 13px;
@ -145,7 +145,7 @@
.block-element {
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
}
}
}
@ -153,7 +153,7 @@
.element-icon {
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
}
}
@ -163,7 +163,7 @@
width: 12px;
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
transform: rotate(90deg);
width: 10px;
}
@ -175,7 +175,7 @@
&:hover {
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
}
}
@ -204,7 +204,7 @@
min-height: 16px;
display: block;
color: $medium-ui-text;
color: $color-gray-20;
font-size: $fs13;
overflow-x: hidden;
text-overflow: ellipsis;
@ -216,26 +216,26 @@
.element-icon {
svg {
fill: $main-ui-color;
fill: $color-primary;
}
}
span {
color: $main-ui-color;
color: $color-primary;
}
&:hover {
background-color: $main-ui-color;
background-color: $color-primary;
.element-icon,
.element-actions {
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
}
}
.element-name {
color: $intense-ui-text;
color: $color-gray-60;
}
}
@ -244,39 +244,39 @@
.selected {
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
}
}
&:hover {
background-color: $main-ui-color;
background-color: $color-primary;
.element-icon,
.element-actions {
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
}
}
span {
color: $intense-ui-text;
color: $color-gray-60;
}
}
&.drag-top {
border-top: 40px solid $soft-ui-border !important;
border-top: 40px solid $color-gray-60 !important;
}
&.drag-bottom {
border-bottom: 40px solid $soft-ui-border !important;
border-bottom: 40px solid $color-gray-60 !important;
}
&.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 {
align-items: center;
border-bottom: 1px solid $soft-ui-border;
border-bottom: 1px solid $color-gray-60;
display: flex;
padding: $x-small;
width: 100%;
span {
color: $intense-ui-text;
color: $color-gray-60;
font-size: $fs14;
font-weight: bold;
max-width: 80%;
@ -26,7 +26,7 @@
.add-page {
align-items: center;
background-color: $soft-ui-icons;
background-color: $color-gray-60;
border-radius: $br-small;
border: 1px solid transparent;
cursor: pointer;
@ -36,14 +36,14 @@
padding: $x-small;
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 16px;
width: 16px;
}
&:hover {
background-color: $dark-ui-bg;
border-color: $soft-ui-border;
background-color: $color-gray-10;
border-color: $color-gray-60;
}
}
@ -61,7 +61,7 @@
.page-icon {
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
height: 15px;
margin-right: $x-small;
width: 15px;
@ -70,7 +70,7 @@
}
span {
color: $medium-ui-text;
color: $color-gray-20;
font-size: $fs14;
max-width: 75%;
overflow-x: hidden;
@ -86,13 +86,13 @@
a {
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
height: 15px;
margin-left: $x-small;
width: 15px;
&:hover {
fill: $intense-ui-icons;
fill: $color-gray-20;
}
}
@ -106,13 +106,13 @@
.page-icon {
svg {
fill: $main-ui-color;
fill: $color-primary;
}
}
span {
color: $main-ui-color;
color: $color-primary;
}
}
@ -122,13 +122,13 @@
.page-icon {
svg {
fill: $main-ui-color;
fill: $color-primary;
}
}
span {
color: $main-ui-color;
color: $color-primary;
font-weight: bold;
}
@ -147,14 +147,14 @@
.element-list-body {
align-items: center;
border-bottom: 1px solid $soft-ui-border;
border-bottom: 1px solid $color-gray-60;
display: flex;
padding: $small;
transition: none;
width: 100%;
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
height: 13px;
margin-right: 8px;
width: 13px;
@ -170,7 +170,7 @@
.element-icon {
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
}
}
@ -180,7 +180,7 @@
width: 12px;
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
transform: rotate(90deg);
width: 10px;
}
@ -192,7 +192,7 @@
&:hover {
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
}
}
@ -221,7 +221,7 @@
min-height: 16px;
display: block;
color: $medium-ui-text;
color: $color-gray-20;
font-size: $fs13;
overflow-x: hidden;
text-overflow: ellipsis;
@ -233,13 +233,13 @@
.element-icon {
svg {
fill: $main-ui-color;
fill: $color-primary;
}
}
span {
color: $main-ui-color;
color: $color-primary;
}
}
@ -247,24 +247,24 @@
.selected {
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
}
}
&:hover {
border-color: $main-ui-color;
border-color: $color-primary;
.element-icon {
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
}
}
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 {
align-items: center;
background-color: $soft-ui-icons;
background-color: $color-gray-60;
border-radius: $br-small;
border: 1px solid transparent;
cursor: pointer;
@ -22,16 +22,16 @@
padding: $x-small;
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 16px;
width: 16px;
}
&:hover {
background-color: $main-ui-color;
background-color: $color-primary;
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
}
}
}
@ -48,7 +48,7 @@
.page-icon {
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
height: 13px;
margin-right: $small;
width: 13px;
@ -57,7 +57,7 @@
}
span {
color: $medium-ui-text;
color: $color-gray-20;
font-size: $fs13;
max-width: 75%;
overflow-x: hidden;
@ -73,7 +73,7 @@
a {
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
height: 15px;
margin-left: $x-small;
opacity: .6;
@ -90,16 +90,16 @@
}
&:hover {
background-color: $main-ui-color;
background-color: $color-primary;
.page-icon {
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
}
span {
color: $intense-ui-text;
color: $color-gray-60;
}
}
@ -116,13 +116,13 @@
.page-icon {
svg {
fill: $main-ui-color;
fill: $color-primary;
}
}
span {
color: $main-ui-color;
color: $color-primary;
}
}
@ -132,12 +132,12 @@
.page-icon {
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
}
}
span {
color: $intense-ui-text;
color: $color-gray-60;
}
}
@ -152,7 +152,7 @@
width: 100%;
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
height: 13px;
margin-right: 8px;
width: 13px;
@ -167,7 +167,7 @@
&.dragging {
// 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 {
align-items: center;
background-color: $secondary-ui-bg;
background-color: $color-gray-60;
border-radius: 3px;
cursor: pointer;
display: flex;
@ -22,17 +22,17 @@
width: 54px;
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 35px;
width: 35px;
}
&:hover {
background-color: $dark-ui-bg;
background-color: $color-gray-10;
}
&.selected {
background-color: $main-ui-color;
background-color: $color-primary;
svg {
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>
.settings-bar {
background-color: $primary-ui-bg;
background-color: $color-gray-50;
bottom: 0;
height: 100%;
position: fixed;
@ -28,7 +28,7 @@
height: 100%;
.tool-window {
border-bottom: 1px solid $medium-ui-border;
border-bottom: 1px solid $color-gray-20;
display: flex;
flex-direction: column;
flex: 1;
@ -36,19 +36,19 @@
.tool-window-bar {
align-items: center;
border-bottom: 1px solid $medium-ui-border;
border-bottom: 1px solid $color-gray-20;
display: flex;
flex-shrink: 0;
padding: 2px $x-small;
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 12px;
width: 12px;
}
span {
color: $intense-ui-text;
color: $color-gray-60;
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>
.settings-bar {
background-color: $primary-ui-bg;
background-color: $color-gray-50;
bottom: 0;
height: 100%;
position: fixed;
@ -28,7 +28,7 @@
height: 100%;
.tool-window {
border-bottom: 1px solid $soft-ui-border;
border-bottom: 1px solid $color-gray-60;
display: flex;
flex-direction: column;
flex: 1;
@ -41,13 +41,13 @@
padding: $small;
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 12px;
width: 12px;
}
span {
color: $soft-ui-text;
color: $color-gray-10;
font-size: $fs14;
}

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

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

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

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

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

@ -7,8 +7,8 @@
.workspace-bar {
align-items: center;
background-color: $primary-ui-bg;
border-bottom: 1px solid $soft-ui-border;
background-color: $color-gray-50;
border-bottom: 1px solid $color-gray-60;
display: flex;
height: 40px;
padding: $x-small $medium $x-small 65px;
@ -17,7 +17,7 @@
.main-icon {
align-items: center;
background-color: $secondary-ui-bg;
background-color: $color-gray-60;
cursor: pointer;
display: flex;
height: 100%;
@ -31,7 +31,7 @@
height: 30px;
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
height: 30px;
width: 30px;
@ -40,7 +40,7 @@
&:hover {
svg {
fill: $main-ui-color;
fill: $color-primary;
}
}
@ -56,14 +56,14 @@
padding: $x-small;
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 20px;
margin-right: $small;
width: 20px;
}
span {
color: $soft-ui-text;
color: $color-gray-10;
font-size: $fs14;
overflow-x: hidden;
text-overflow: ellipsis;
@ -78,7 +78,7 @@
.options-btn {
align-items: center;
border-right: 4px double $soft-ui-border;
border-right: 4px double $color-gray-60;
display: flex;
margin: 0;
@ -105,7 +105,7 @@
}
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 18px;
width: 18px;
}
@ -128,7 +128,7 @@
&:hover {
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
}
}
@ -161,7 +161,7 @@
position: relative;
span {
color: $medium-ui-text;
color: $color-gray-20;
font-size: $fs15;
}
@ -169,9 +169,9 @@
.remove-zoom {
align-items: center;
border-radius: 50%;
border: 1px solid $intense-ui-border;
border: 1px solid $color-gray-40;
cursor: pointer;
color: $intense-ui-border;
color: $color-gray-40;
display: none;
flex-shrink: 0;
font-size: $fs20;
@ -218,7 +218,7 @@
.options-btn {
align-items: center;
border-right: 4px double $soft-ui-border;
border-right: 4px double $color-gray-60;
display: flex;
margin: 0;
@ -228,7 +228,7 @@
li {
align-items: center;
background-color: $secondary-ui-bg;
background-color: $color-gray-60;
border: 1px solid transparent;
border-radius: $br-small;
cursor: pointer;
@ -245,18 +245,18 @@
}
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 18px;
width: 18px;
}
&:hover {
background-color: $dark-ui-bg;
border-color: $soft-ui-border;
background-color: $color-gray-10;
border-color: $color-gray-60;
}
&.selected {
background-color: $main-ui-color;
background-color: $color-primary;
svg {
fill: $color-white;
@ -273,7 +273,7 @@
display: flex;
.view-mode {
background-color: $intense-ui-icons;
background-color: $color-gray-20;
align-items: center;
border-radius: $br-small;
cursor: pointer;
@ -290,16 +290,16 @@
}
svg {
fill: $secondary-ui-bg;
fill: $color-gray-60;
height: 18px;
width: 18px;
}
&:hover {
background-color: $main-ui-color;
background-color: $color-primary;
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>
.workspace-content {
background-color: $canvas-bg;
background-color: $color-canvas;
display: flex;
height: 100%;
/* width: 100%; */
@ -115,10 +115,10 @@
top: 0px;
rect {
fill: $canvas-bg;
fill: $color-canvas;
}
path {
stroke: $medium-ui-text;
stroke: $color-gray-20;
}
}
@ -128,10 +128,10 @@
left: 0px;
rect {
fill: $canvas-bg;
fill: $color-canvas;
}
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 {
background-color: $primary-ui-bg;
border-top: 1px solid $soft-ui-border;
background-color: $color-gray-50;
border-top: 1px solid $color-gray-60;
border-right: 0;
display: flex;
flex-shrink: 0;
@ -25,7 +25,7 @@
width: 100%;
@include bp(tablet) {
border-right: 1px solid $soft-ui-border;
border-right: 1px solid $color-gray-60;
border-top: 0;
height: 100%;
width: 70px;
@ -44,7 +44,7 @@
li {
align-items: center;
background-color: $secondary-ui-bg;
background-color: $color-gray-60;
border: 1px solid transparent;
border-radius: $br-small;
cursor: pointer;
@ -61,18 +61,18 @@
}
svg {
fill: $intense-ui-icons;
fill: $color-gray-20;
height: 24px;
width: 24px;
}
&:hover {
background-color: $dark-ui-bg;
border-color: $soft-ui-border;
background-color: $color-gray-10;
border-color: $color-gray-60;
}
&.selected {
background-color: $main-ui-color;
background-color: $color-primary;
svg {
fill: $color-white;
@ -85,8 +85,8 @@
}
.view-sitemap {
background-color: $primary-ui-bg;
border-top: 1px solid $soft-ui-border;
background-color: $color-gray-50;
border-top: 1px solid $color-gray-60;
border-right: 0;
display: flex;
flex-direction: column;
@ -96,13 +96,13 @@
overflow: scroll;
.sitemap-title {
border-bottom: 1px solid $soft-ui-border;
border-bottom: 1px solid $color-gray-60;
padding: $small;
font-weight: bold;
}
@include bp(tablet) {
border-right: 1px solid $soft-ui-border;
border-right: 1px solid $color-gray-60;
border-top: 0;
height: 100%;
width: 220px;
@ -116,7 +116,7 @@
li {
align-items: center;
border-bottom: 1px solid $soft-ui-border;
border-bottom: 1px solid $color-gray-60;
cursor: pointer;
display: flex;
flex-direction: row;
@ -126,7 +126,7 @@
.page-icon {
svg {
fill: $medium-ui-icons;
fill: $color-gray-30;
height: 15px;
margin-right: $x-small;
width: 15px;
@ -135,7 +135,7 @@
}
span {
color: $medium-ui-text;
color: $color-gray-20;
font-size: $fs14;
max-width: 75%;
overflow-x: hidden;
@ -151,13 +151,13 @@
a {
svg {
fill: $soft-ui-icons;
fill: $color-gray-60;
height: 15px;
margin-left: $x-small;
width: 15px;
&:hover {
fill: $intense-ui-icons;
fill: $color-gray-20;
}
}
@ -171,13 +171,13 @@
.page-icon {
svg {
fill: $main-ui-color;
fill: $color-primary;
}
}
span {
color: $main-ui-color;
color: $color-primary;
}
}
@ -187,13 +187,13 @@
.page-icon {
svg {
fill: $main-ui-color;
fill: $color-primary;
}
}
span {
color: $main-ui-color;
color: $color-primary;
font-weight: bold;
}
@ -213,7 +213,7 @@
}
.view-canvas {
background-color: $secondary-ui-bg;
background-color: $color-gray-60;
width: 100%;
overflow: scroll;
display: flex;

3
package-lock.json generated Normal file
View file

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