Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-13 07:21:40 -05:00
Code Issues Activity

💄 Adds new modal and toolbar styles

Browse source
This commit is contained in:
elhombretecla 2023-08-10 11:40:13 +02:00 • committed by Alejandro Alonso
parent 6420188675
commit bf0a676b83
9 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -159,8 +159,6 @@
--radio-btn-foreground-color-selected: var(--color-accent-primary);
--radio-btn-border-color-selected: var(--color-background-quaternary);
--modal-background-color: var(--color-background-primary);
--library-name-foreground-color: var(--color-foreground-primary);
--library-content-foreground-color: var(--color-foreground-secondary);
@ -188,7 +186,7 @@
--user-count-background-color: var(--color-background-secondary);
--user-count-foreground-color: var(--color-accent-primary);
--modal-background-color: var(--color-background-quaternary);
--modal-background-color: var(--color-background-primary);
--modal-foreground-color: var(--color-foreground-primary);
--modal-foreground-color-secondary: var(--color-foreground-secondary);
}

7
frontend/resources/styles/common/refactor/mixins.scss
View file

@ -30,6 +30,13 @@
}
@mixin titleTipography {
font-family: "worksans", sans-serif;
font-size: $fs-12;
font-weight: $fw400;
line-height: 1.2;
}
@mixin titleBigTipography {
font-family: "worksans", sans-serif;
font-size: $fs-14;
font-weight: $fw400;

2
frontend/src/app/main/ui/components/title_bar.scss
View file

@ -27,7 +27,7 @@
color: var(--title-foreground-color);
}
.title-only {
margin-left: $s-8;
// margin-left: $s-8;
}
.toggle-btn {

3
frontend/src/app/main/ui/workspace/left_header.scss
View file

@ -32,11 +32,12 @@
height: $s-16;
width: 100%;
padding-bottom: $s-2;
margin-top: -2px;
color: var(--title-foreground-color);
cursor: pointer;
}
.file-name {
@include titleTipography;
@include titleBigTipography;
text-transform: none;
color: var(--title-foreground-color-hover);
}

2
frontend/src/app/main/ui/workspace/left_toolbar.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"}
{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"}

7
frontend/src/app/main/ui/workspace/left_toolbar.scss
View file

@ -18,7 +18,7 @@
border-radius: $s-8;
z-index: $z-index-2;
background-color: var(--color-background-primary);
transition: top 1s, height 1s, opacity 1s;
transition: top 0.3s, height 0.3s, opacity 0.3s;
.main-toolbar-options {
position: relative;
@ -26,18 +26,19 @@
align-items: center;
margin: 0;
opacity: $op-10;
transition: opacity 1s ease;
transition: opacity 0.3s ease;
li {
position: relative;
button {
@extend .button-primary;
@extend .button-tertiary;
height: $s-36;
width: $s-36;
flex-shrink: 0;
background-color: transparent;
border-radius: $s-8;
border: none;
margin: 0 $s-2;
svg {
@extend .button-icon;

10
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -5,6 +5,7 @@
// Copyright (c) KALEIDOS INC
@import "refactor/common-refactor.scss";
.modal-overlay {
@include flexCenter;
position: fixed;
@ -15,6 +16,7 @@
z-index: $z-index-modal;
background-color: var(--overlay-color);
pointer-events: none; // This is to allow outside click that closes modal.
.modal-dialog {
position: relative;
height: $s-520;
@ -50,11 +52,13 @@
.updates-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $s-24;
gap: $s-32;
padding-top: $s-24;
height: 100%;
max-height: $s-400;
.section {
display: flex;
flex-direction: column;
height: calc(100% - $s-12);
:global(.title-spacing-lib) {
margin: 0 0 $s-24 calc(-1 * $s-8);
@ -63,8 +67,8 @@
.section-list-shared {
height: 100%;
max-height: $s-320;
margin-top: $s-12;
overflow: auto;
scrollbar-gutter: stable;
.section-list-item {
display: grid;
grid-template-columns: 1fr auto;
@ -128,7 +132,7 @@
margin-bottom: $s-12;
}
.libraries-search {
margin-bottom: $s-12;
margin: $s-12 0;
.search-icon {
@include flexCenter;
padding: 0 0 0 $s-8;

2
frontend/src/app/main/ui/workspace/palette.scss
View file

@ -30,7 +30,7 @@
padding: $s-0 $s-0 $s-8 $s-8;
border-radius: $br-8;
background-color: var(--palette-background-color);
transition: right 1s, opacity 1s, width 1s;
transition: right 0.3s, opacity 0.2s, width 0.3s;
&.wide {
width: 100%;
}

1
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -21,6 +21,7 @@
margin-top: $s-2;
margin-bottom: $s-4;
padding-right: $s-8;
margin-left: $s-8;
.page-name {
@include tabTitleTipography;
padding: 0 $s-12;