3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-07 14:45:55 +02:00
Code Issues Projects Releases Packages Wiki Activity

WIP UI changes

Browse source
This commit is contained in:
elhombretecla 2020-10-20 11:31:24 +02:00
parent 65512d46c2
commit 6f58899f90
3 changed files with 25 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/resources/styles/common/dependencies/helpers.scss
View file

@ -6,11 +6,11 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Padding & Margin sizes // Padding & Margin sizes
$x-small: 5px; $x-small: 4px;
$small: 10px; $small: 8px;
$medium: 15px; $medium: 16px;
$big: 20px; $big: 20px;
$x-big: 30px; $x-big: 32px;
// New sizes // New sizes
$size-1: 0.25rem; $size-1: 0.25rem;

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

@ -13,7 +13,7 @@
.colorpicker-content { .colorpicker-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.5rem; padding: $small;
& > * { & > * {
width: 200px; width: 200px;
@ -21,7 +21,7 @@
.top-actions { .top-actions {
display: flex; display: flex;
margin-bottom: 0.25rem; margin-bottom: $x-small;
justify-content: space-between; justify-content: space-between;
.picker-btn { .picker-btn {
@ -50,7 +50,7 @@
margin: 0; margin: 0;
border: 1px solid $color-gray-20; border: 1px solid $color-gray-20;
border-radius: 2px; border-radius: 2px;
margin-left: 0.25rem; margin-left: $x-small;
} }
.active { .active {
@ -69,8 +69,8 @@
.gradient-stops { .gradient-stops {
height: 10px; height: 10px;
display: flex; display: flex;
margin-top: 0.5rem; margin-top: $small;
margin-bottom: 1rem; margin-bottom: $medium;
.gradient-background-wrapper { .gradient-background-wrapper {
height: 100%; height: 100%;
@ -303,11 +303,12 @@
background-position: 95% 48%; background-position: 95% 48%;
background-size: 10px; background-size: 10px;
margin: 0; margin: 0;
margin-bottom: 0.5rem; margin-bottom: $small;
width: 100%; width: 100%;
padding: 2px 0.25rem; padding: $x-small 0.25rem;
font-size: 0.75rem; font-size: 0.75rem;
color: $color-gray-40; color: $color-gray-40;
cursor: pointer;
border-color: $color-gray-10; border-color: $color-gray-10;
border-radius: 2px; border-radius: 2px;
@ -443,7 +444,7 @@
.colorpicker-tabs { .colorpicker-tabs {
display: flex; display: flex;
margin: 0.5rem 0; margin-bottom: $small;
border-radius: 5px; border-radius: 5px;
border: 1px solid $color-gray-10; border: 1px solid $color-gray-10;
height: 2rem; height: 2rem;
@ -491,7 +492,7 @@
background-color: $color-gray-50; background-color: $color-gray-50;
border: 1px solid $color-gray-30; border: 1px solid $color-gray-30;
border-radius: $br-small; border-radius: $br-small;
color: $color-gray-20; color: $color-white;
height: 20px; height: 20px;
margin: 5px 0 0 0; margin: 5px 0 0 0;
padding: 0 $x-small; padding: 0 $x-small;

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

@ -61,16 +61,22 @@
.element-set { .element-set {
border-bottom: 1px solid $color-gray-60; border-bottom: 1px solid $color-gray-60;
color: $color-gray-20; color: $color-gray-20;
margin: 0 $x-small; padding: $small $x-small;
.element-set-title { .element-set-title {
color: $color-gray-10; color: $color-gray-20;
display: flex; display: flex;
font-size: $fs13; font-size: $fs13;
padding: $small $x-small; padding: $x-small;
width: 100%; width: 100%;
align-items: center; align-items: center;
} }
&:hover {
.element-set-title {
color: $color-gray-10;
}
}
} }
.element-list { .element-list {
@ -185,7 +191,7 @@
background-color: $color-gray-50; background-color: $color-gray-50;
border: 1px solid transparent; border: 1px solid transparent;
border-bottom-color: $color-gray-40; border-bottom-color: $color-gray-40;
color: $color-gray-10; color: $color-white;
font-size: $fs12; font-size: $fs12;
margin: $x-small; margin: $x-small;
padding: $x-small; padding: $x-small;
@ -217,7 +223,7 @@
} }
.element-set-subtitle { .element-set-subtitle {
color: $color-gray-10; color: $color-gray-20;
font-size: $fs11; font-size: $fs11;
width: 12rem; width: 12rem;
} }