Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -05:00
Code Issues Activity

workspace heacer refctor

Browse source
This commit is contained in:
Juan de la Cruz 2019-12-16 13:01:17 +01:00
parent 1a33c266e3
commit 861d1041b6
5 changed files with 389 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
frontend/resources/styles/common/dependencies/colors-v2.scss Normal file
View file

@ -0,0 +1,75 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Colors
$color-white: #ffffff;
$color-black: #000000;
$color-gray: #90969d;
// Main color
$color-primary: #78dbbe;
// Secondary colors
$color-success: #b6dd75;
$color-complete : #a599c6;
$color-warning: #e6a16f;
$color-danger: #de4762;
$color-info: #59b9e2;
// Mixing Color varriable for creating both light and dark colors
$mix-percentage-dark: 81%;
$mix-percentage-darker: 60%;
$mix-percentage-light: 80%;
$mix-percentage-lighter: 20%;
// Gray scale
$color-gray-light: mix($color-gray, $color-white, $mix-percentage-light);
$color-gray-lighter: mix($color-gray, $color-white, $mix-percentage-lighter);
$color-gray-dark: mix($color-gray, $color-black, $mix-percentage-dark);
$color-gray-darker: mix($color-gray, $color-black, $mix-percentage-darker);
// Lighter colors
$color-success-light: mix($color-success, $color-white, $mix-percentage-light);
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter);
$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light);
$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter);
$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light);
$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter);
$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light);
$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter);
$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light);
$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter);
$color-info-light: mix($color-info, $color-white, $mix-percentage-light);
$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter);
// Darker colors
$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark);
$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker);
$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark);
$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker);
$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark);
$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker);
$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark);
$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker);
$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark);
$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker);
$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark);
$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker);
// bg transparent
$color-dark-bg: rgba(0,0,0,.4);
$color-light-bg: rgba(255,255,255,.6);

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

@ -11,7 +11,7 @@ $color-black: #000000;
$color-gray: #90969d;
// Main color
$color-primary: #78dbbe;
$color-primary: #31EFB8;
// Secondary colors
$color-success: #b6dd75;
@ -31,6 +31,10 @@ $color-gray-light: mix($color-gray, $color-white, $mix-percentage-light);
$color-gray-lighter: mix($color-gray, $color-white, $mix-percentage-lighter);
$color-gray-dark: mix($color-gray, $color-black, $mix-percentage-dark);
$color-gray-darker: mix($color-gray, $color-black, $mix-percentage-darker);
$color-gray-30: #b1b2b5;
$color-gray-40: #7B7D85;
$color-gray-50: #303236;
$color-gray-60: #1F1F1F;
// Lighter colors
$color-success-light: mix($color-success, $color-white, $mix-percentage-light);

10
frontend/resources/styles/common/dependencies/uxbox-light.scss
View file

@ -19,18 +19,18 @@ $ui-flavour: $color-gray;
// Change next colors for more customization
// Background colors
$primary-ui-bg: $color-white;
$secondary-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
$primary-ui-bg: $color-gray-50;
$secondary-ui-bg: $color-gray-60;
$dark-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
// Border color
$intense-ui-border: $ui-flavour;
$medium-ui-border: mix($ui-flavour, $color-white, $mix-percentage-light);
$soft-ui-border: lighten($medium-ui-border, 18%);
$soft-ui-border: $color-gray-60;
// Icon colors
$intense-ui-icons: mix($ui-flavour, $color-black, $mix-percentage-dark);
$medium-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-light);
$intense-ui-icons: $color-gray-30;
$medium-ui-icons: $color-gray-40;
$soft-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-lighter);
// Text colors

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

@ -0,0 +1,292 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.workspace-bar {
align-items: center;
background-color: $primary-ui-bg;
border-bottom: 1px solid $soft-ui-border;
display: flex;
height: 50px;
padding: $x-small $medium $x-small 65px;
position: relative;
z-index: 11;
.main-icon {
align-items: center;
background-color: $secondary-ui-bg;
cursor: pointer;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 50px;
a {
height: 35px;
svg {
fill: $medium-ui-icons;
height: 35px;
width: 35px;
}
&:hover {
svg {
fill: $main-ui-color;
}
}
}
}
.project-tree-btn {
align-items: center;
background-color: $secondary-ui-bg;
border-radius: $br-small;
border: 1px solid transparent;
cursor: pointer;
display: flex;
padding: $x-small $x-small $x-small $medium;
width: 164px;
svg {
fill: $intense-ui-icons;
height: 20px;
margin-right: $small;
width: 20px;
}
span {
color: $intense-ui-text;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:hover {
background-color: $dark-ui-bg;
border-color: $soft-ui-border;
}
&.selected {
background-color: $main-ui-color;
svg {
fill: $color-white;
}
span {
color: $color-white;
}
}
}
.workspace-options {
display: flex;
.options-btn {
align-items: center;
border-right: 4px double $soft-ui-border;
display: flex;
margin: 0;
&:last-child {
border: none;
}
li {
align-items: center;
background-color: $secondary-ui-bg;
border: 1px solid transparent;
border-radius: $br-small;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 30px;
justify-content: center;
margin: 0 $small;
position: relative;
width: 30px;
a {
padding-top: 6px;
}
svg {
fill: $intense-ui-icons;
height: 18px;
width: 18px;
}
&:hover {
background-color: $dark-ui-bg;
border-color: $soft-ui-border;
}
&.selected {
background-color: $main-ui-color;
svg {
fill: $color-white;
}
}
&.view-mode {
background-color: $intense-ui-icons;
svg {
fill: $secondary-ui-bg;
}
&:hover {
background-color: $color-white;
border-color: $soft-ui-border;
svg {
fill: $intense-ui-icons;
}
}
}
}
}
.options-view {
align-items: center;
display: flex;
justify-content: content;
margin: 0;
li {
align-items: center;
display: flex;
flex-shrink: 0;
height: 30px;
margin: 0 $small;
position: relative;
width: 60px;
&.zoom-input {
width: 85px;
padding: 0 25px;
position: relative;
.add-zoom,
.remove-zoom {
align-items: center;
border-radius: 50%;
border: 1px solid $intense-ui-border;
cursor: pointer;
color: $intense-ui-border;
display: none;
flex-shrink: 0;
font-size: $fs20;
font-weight: bold;
height: 20px;
justify-content: center;
position: absolute;
top: 5px;
width: 20px;
&:hover {
border-color: $color-primary;
color: $color-primary;
}
}
.add-zoom {
left: -5px;
}
.remove-zoom {
padding-top: 4px;
right: -5px;
}
&:hover {
.add-zoom,
.remove-zoom {
display: flex;
@include animation(0s,.3s,fadeIn);
}
}
}
}
}
}
}
.options-btn {
align-items: center;
border-right: 4px double $soft-ui-border;
display: flex;
margin: 0;
&:last-child {
border: none;
}
li {
align-items: center;
background-color: $secondary-ui-bg;
border: 1px solid transparent;
border-radius: $br-small;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 30px;
justify-content: center;
margin: 0 $small;
position: relative;
width: 30px;
a {
padding-top: 6px;
}
svg {
fill: $intense-ui-icons;
height: 18px;
width: 18px;
}
&:hover {
background-color: $dark-ui-bg;
border-color: $soft-ui-border;
}
&.selected {
background-color: $main-ui-color;
svg {
fill: $color-white;
}
}
}
}

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

@ -10,7 +10,7 @@
background-color: $primary-ui-bg;
border-bottom: 1px solid $soft-ui-border;
display: flex;
height: 50px;
height: 40px;
padding: $x-small $medium $x-small 65px;
position: relative;
z-index: 11;
@ -28,12 +28,12 @@
width: 50px;
a {
height: 35px;
height: 30px;
svg {
fill: $medium-ui-icons;
height: 35px;
width: 35px;
height: 30px;
width: 30px;
}
@ -107,7 +107,7 @@
li {
align-items: center;
background-color: $secondary-ui-bg;
background-color: transparent;
border: 1px solid transparent;
border-radius: $br-small;
cursor: pointer;
@ -130,15 +130,18 @@
}
&:hover {
background-color: $dark-ui-bg;
border-color: $soft-ui-border;
background-color: $color-primary;
svg {
fill: $color-gray-50;
}
}
&.selected {
background-color: $main-ui-color;
svg {
fill: $color-white;
fill: $color-primary;
}
}