Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 04:49:03 -05:00
Code Issues Activity

🐛 Fix typographies in update modal

Browse source
This commit is contained in:
Eva Marco 2024-03-13 13:17:39 +01:00
parent b41b3de46d
commit 18fc08d418
4 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -32,6 +32,12 @@
background: var(--text-editor-selection-background-color); background: var(--text-editor-selection-background-color);
color: var(--text-editor-selection-foreground-color); color: var(--text-editor-selection-foreground-color);
} }
::placeholder,
::-webkit-input-placeholder {
@include bodySmallTypography;
color: var(--input-placeholder-color);
}
} }
// BUTTONS // BUTTONS
@ -39,7 +45,7 @@
@include buttonStyle; @include buttonStyle;
@include flexCenter; @include flexCenter;
@include focusPrimary; @include focusPrimary;
@include uppercaseTitleTipography; @include headlineSmallTypography;
background-color: var(--button-primary-background-color-rest); background-color: var(--button-primary-background-color-rest);
border: $s-1 solid var(--button-primary-border-color-rest); border: $s-1 solid var(--button-primary-border-color-rest);
color: var(--button-primary-foreground-color-rest); color: var(--button-primary-foreground-color-rest);
@ -303,7 +309,7 @@
} }
.input-label { .input-label {
@include uppercaseTitleTipography; @include headlineSmallTypography;
@include flexCenter; @include flexCenter;
width: $s-20; width: $s-20;
padding-left: $s-8; padding-left: $s-8;
@ -401,6 +407,7 @@
background-color: var(--input-background-color); background-color: var(--input-background-color);
} }
::placeholder { ::placeholder {
@include bodySmallTypography;
color: var(--input-placeholder-color); color: var(--input-placeholder-color);
} }
&:hover { &:hover {

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

@ -28,7 +28,7 @@
width: 100%; width: 100%;
.tab-container-tab-title { .tab-container-tab-title {
@include flexCenter; @include flexCenter;
@include uppercaseTitleTipography; @include headlineSmallTypography;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 0 $s-8; padding: 0 $s-8;

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

@ -19,7 +19,7 @@
.title, .title,
.title-only, .title-only,
.inspect-title { .inspect-title {
@include uppercaseTitleTipography; @include headlineSmallTypography;
display: grid; display: grid;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;

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

@ -6,7 +6,7 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
// Library // Library modal
.modal-overlay { .modal-overlay {
@extend .modal-overlay-base; @extend .modal-overlay-base;
} }
@ -122,8 +122,8 @@
} }
.section-title { .section-title {
@include bodyLargeTypography; @include headlineSmallTypography;
color: var(--modal-title-foreground-color); color: var(--title-foreground-color);
margin-bottom: $s-12; margin-bottom: $s-12;
} }
@ -226,7 +226,7 @@
.item-update { .item-update {
@extend .button-primary; @extend .button-primary;
@include uppercaseTitleTipography; @include headlineSmallTypography;
height: $s-32; height: $s-32;
min-width: $s-92; min-width: $s-92;
padding: $s-8 $s-24; padding: $s-8 $s-24;
@ -238,7 +238,7 @@
} }
.item-contents { .item-contents {
@include bodyLargeTypography; @include bodyMediumTypography;
color: var(--library-content-foreground-color); color: var(--library-content-foreground-color);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -310,6 +310,6 @@
.primary-button { .primary-button {
@extend .button-primary; @extend .button-primary;
@include uppercaseTitleTipography; @include headlineSmallTypography;
padding: $s-0 $s-16; padding: $s-0 $s-16;
} }