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

💄 Update release modals to new design

Browse source
This commit is contained in:
Eva Marco 2024-02-29 14:28:15 +01:00 • committed by Alonso Torres
parent 238519cb69
commit 1f0683498f
73 changed files with 493 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/main/ui/comments.scss
View file

@ -19,7 +19,7 @@
}
.section-title {
@include bodyMedTipography;
@include bodySmallTypography;
height: $s-32;
display: flex;
align-items: center;
@ -55,7 +55,7 @@
// Comment-thread
.comment {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
flex-direction: column;
gap: $s-12;
@ -98,7 +98,7 @@
}
.content {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--color-foreground-primary);
}
@ -151,7 +151,7 @@
.comment-container {
position: relative;
.comment {
@include bodyMedTipography;
@include bodySmallTypography;
.author {
display: flex;
gap: $s-8;
@ -195,7 +195,7 @@
.content {
position: relative;
.text {
@include bodyMedTipography;
@include bodySmallTypography;
}
}
}

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

@ -71,7 +71,7 @@
.color-text {
@include twoLineTextEllipsis;
@include bodyMedTipography;
@include bodySmallTypography;
width: $s-80;
text-align: center;
margin-top: $s-2;

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

@ -46,7 +46,7 @@
.context-menu-item {
display: flex;
.context-menu-action {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
justify-content: flex-start;

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

@ -8,7 +8,7 @@
.editable-label-input {
@include textEllipsis;
@include bodyMedTipography;
@include bodySmallTypography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;

18
frontend/src/app/main/ui/components/forms.scss
View file

@ -41,7 +41,7 @@
.input-with-label {
@include flexColumn;
gap: $s-8;
@include bodyMedTipography;
@include bodySmallTypography;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
@ -143,7 +143,7 @@
}
.hint {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-text-foreground-color);
width: 99%;
}
@ -151,7 +151,7 @@
.checkbox {
@extend .input-checkbox;
.checkbox-label {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
flex-direction: row-reverse;
@ -186,7 +186,7 @@
background-color: var(--input-background-color);
.main-content {
@include flexColumn;
@include bodyMedTipography;
@include bodySmallTypography;
position: relative;
justify-content: center;
flex-grow: 1;
@ -231,7 +231,7 @@
select {
@extend .menu-dropdown;
@include bodyMedTipography;
@include bodySmallTypography;
box-sizing: border-box;
position: absolute;
top: 0;
@ -247,7 +247,7 @@
background-color: transparent;
cursor: pointer;
option {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--title-foreground-color-hover);
background-color: var(--menu-background-color);
appearance: none;
@ -276,7 +276,7 @@
overflow-y: hidden;
.inside-input {
@include removeInputStyle;
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
width: 100%;
max-width: calc(100% - $s-1);
@ -315,7 +315,7 @@
border: $s-1 solid var(--pill-background-color);
box-sizing: border-box;
.text {
@include bodyMedTipography;
@include bodySmallTypography;
padding-right: $s-8;
color: var(--pill-foreground-color);
}
@ -352,7 +352,7 @@
}
.radio-label {
@include bodyMedTipography;
@include bodySmallTypography;
@include flexRow;
align-items: flex-start;
gap: $s-8;

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

@ -12,7 +12,7 @@
--icon-color: var(--icon-foreground);
--text-color: var(--menu-foreground-color);
@extend .new-scrollbar;
@include bodyMedTipography;
@include bodySmallTypography;
position: relative;
display: grid;
grid-template-columns: 1fr auto;

2
frontend/src/app/main/ui/dashboard/change_owner.scss
View file

@ -28,7 +28,7 @@
}
.modal-content {
@include bodyMedTipography;
@include bodySmallTypography;
margin-bottom: $s-24;
}

6
frontend/src/app/main/ui/dashboard/import.scss vendored
View file

@ -28,7 +28,7 @@
}
.modal-content {
@include bodyMedTipography;
@include bodySmallTypography;
display: grid;
grid-template-columns: 1fr;
gap: $s-16;
@ -52,7 +52,7 @@
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}
@ -78,7 +78,7 @@
flex-grow: 1;
}
.file-name-label {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
gap: $s-12;

8
frontend/src/app/main/ui/dashboard/team.scss
View file

@ -612,7 +612,7 @@
}
}
.message {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--alert-foreground-color-error);
}
}
@ -636,7 +636,7 @@
}
}
.message {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--alert-foreground-color-warning);
}
}
@ -694,7 +694,7 @@
.modal-content {
@include flexColumn;
gap: $s-24;
@include bodyMedTipography;
@include bodySmallTypography;
margin-bottom: $s-24;
}
@ -703,7 +703,7 @@
}
.select-title {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-title-foreground-color);
}

4
frontend/src/app/main/ui/dashboard/team_form.scss
View file

@ -35,7 +35,7 @@
@extend .input-element-label;
label {
@include flexColumn;
@include bodyMedTipography;
@include bodySmallTypography;
align-items: flex-start;
width: 100%;
border: none;
@ -43,7 +43,7 @@
height: 100%;
input {
@include bodyMedTipography;
@include bodySmallTypography;
margin-top: $s-8;
}
}

2
frontend/src/app/main/ui/debug/components_preview.scss
View file

@ -53,7 +53,7 @@
flex-direction: column;
border-radius: $s-8;
h3 {
@include bodyMedTipography;
@include bodySmallTypography;
font-size: $fs-24;
width: 100%;
}

2
frontend/src/app/main/ui/delete_shared.scss
View file

@ -31,7 +31,7 @@
}
.modal-content {
@include bodyMedTipography;
@include bodySmallTypography;
margin-bottom: $s-24;
}

10
frontend/src/app/main/ui/export.scss
View file

@ -55,7 +55,7 @@
}
.export-progress-title {
@include bodyMedTipography;
@include bodyMediumTypography;
display: grid;
grid-template-columns: auto 1fr;
gap: $s-8;
@ -67,7 +67,7 @@
}
.progress {
@include bodyMedTipography;
@include bodyMediumTypography;
padding-left: $s-8;
margin: 0;
align-self: center;
@ -76,7 +76,7 @@
.retry-btn {
@include buttonStyle;
@include bodyMedTipography;
@include bodySmallTypography;
display: inline;
text-align: left;
color: var(--modal-link-foreground-color);
@ -128,10 +128,10 @@
.modal-content,
.no-selection {
@include bodyMedTipography;
@include bodySmallTypography;
margin-bottom: $s-24;
.modal-hint {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-text-foreground-color);
}
.modal-link {

4
frontend/src/app/main/ui/notifications/context_notification.scss
View file

@ -66,7 +66,7 @@
}
.context-text {
@include bodyMedTipography;
@include bodySmallTypography;
align-self: center;
color: var(--context-notification-fg-color);
margin: auto 0;
@ -78,7 +78,7 @@
.link,
.contain-html .context-text a {
@include bodyMedTipography;
@include bodySmallTypography;
align-self: center;
display: inline;
text-align: left;

4
frontend/src/app/main/ui/notifications/inline_notification.scss
View file

@ -32,7 +32,7 @@
}
.inline-text {
@include bodyMedTipography;
@include bodySmallTypography;
align-self: center;
}
@ -41,7 +41,7 @@
}
.link {
@include bodyMedTipography;
@include bodySmallTypography;
margin: 0;
height: 100%;
color: var(--modal-link-foreground-color);

4
frontend/src/app/main/ui/notifications/toast_notification.scss
View file

@ -69,7 +69,7 @@
}
.link {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-link-foreground-color);
margin: 0;
}
@ -81,7 +81,7 @@
}
.text {
@include bodyMedTipography;
@include bodySmallTypography;
align-self: center;
}

2
frontend/src/app/main/ui/onboarding.scss
View file

@ -45,7 +45,7 @@
}
.release {
@include bodyMedTipography;
@include bodySmallTypography;
position: absolute;
top: calc(-1 * $s-28);
right: 0;

8
frontend/src/app/main/ui/onboarding/team_choice.scss
View file

@ -26,7 +26,7 @@
}
.paginator {
@include bodyMedTipography;
@include bodySmallTypography;
position: absolute;
top: $s-40;
right: $s-100;
@ -140,7 +140,7 @@
@extend .input-element-label;
label {
@include flexColumn;
@include bodyMedTipography;
@include bodySmallTypography;
align-items: flex-start;
width: 100%;
border: none;
@ -148,7 +148,7 @@
height: 100%;
input {
@include bodyMedTipography;
@include bodySmallTypography;
margin-top: $s-8;
}
}
@ -185,7 +185,7 @@
}
.modal-hint {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-text-foreground-color);
text-align: right;
}

3
frontend/src/app/main/ui/releases.cljs
View file

@ -26,6 +26,7 @@
[app.main.ui.releases.v1-7]
[app.main.ui.releases.v1-8]
[app.main.ui.releases.v1-9]
[app.main.ui.releases.v2-0]
[app.util.object :as obj]
[app.util.timers :as tm]
[rumext.v2 :as mf]))
@ -90,4 +91,4 @@
(defmethod rc/render-release-notes "0.0"
[params]
(rc/render-release-notes (assoc params :version "1.19")))
(rc/render-release-notes (assoc params :version "2.0")))

7
frontend/src/app/main/ui/releases/common.cljs
View file

@ -5,15 +5,16 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.releases.common
(:require-macros [app.main.style :as stl])
(:require
[app.util.dom :as dom]
[rumext.v2 :as mf]))
(defmulti render-release-notes :version)
(mf/defc navigation-bullets
[{:keys [slide navigate total]}]
[:ul.step-dots
[:ul {:class (stl/css :step-dots)}
(for [i (range total)]
[:li {:class (dom/classnames :current (= slide i))
[:li {:class (stl/css-case :dot true
:current (= slide i))
:on-click #(navigate i)}])])

32
frontend/src/app/main/ui/releases/common.scss Normal file
View file

@ -0,0 +1,32 @@
// 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) KALEIDOS INC
@import "refactor/common-refactor.scss";
.step-dots {
display: grid;
grid-template-columns: none;
grid-auto-flow: column;
gap: $s-8;
height: fit-content;
width: fit-content;
margin: 0;
padding: 0;
align-self: center;
justify-self: flex-start;
}
.dot {
height: $s-12;
width: $s-12;
border-radius: $br-circle;
background-color: var(--modal-navigator-foreground-color-rest);
cursor: pointer;
}
.current {
background-color: var(--modal-navigator-foreground-color-active);
}

166
frontend/src/app/main/ui/releases/v2_0.cljs Normal file
View file

@ -0,0 +1,166 @@
;; 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) KALEIDOS INC
(ns app.main.ui.releases.v2-0
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.main.ui.releases.common :as c]
[rumext.v2 :as mf]))
;; TODO: Review all copies and alt text
(defmethod c/render-release-notes "2.0"
[{:keys [slide klass next finish navigate version]}]
(mf/html
(case slide
:start
[:div {:class (stl/css :modal-overlay)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
;; TODO: Review alt
[:img {:src "images/features/2.0-intro-image.png"
:class (stl/css :start-image)
:border "0"
:alt "Community code contributions"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"What's new?"]
[:div {:class (stl/css :verstion-tag)}
(dm/str "Version " version)]]
[:div {:class (stl/css :features-block)}
[:div {:class (stl/css :feature)}
[:h2 {:class (stl/css :feature-title)}
"CSS Grid Layout"]
[:p {:class (stl/css :feature-content)}
"Crea una estructura flexible para componer
los elementos de tu diseño y obten el código html/css."]]
[:div {:class (stl/css :feature)}
[:h2 {:class (stl/css :feature-title)}
"New Components"]
[:p {:class (stl/css :feature-content)}
"Ahora tus main components estarán en un espacio
físico, para que los puedas ver y gestionar fácilmente."]]
[:div {:class (stl/css :feature)}
[:h2 {:class (stl/css :feature-title)}
"New User Interface"]
[:p {:class (stl/css :feature-content)}
"Hemos hecho Penpot aún más bonito, y además
ahora puedes elegir entre tema oscuro y claro."]]]
[:div {:class (stl/css :navigation)}
[:button {:class (stl/css :next-btn)
:on-click next} "Continue"]]]]]]
0
[:div {:class (stl/css :modal-overlay)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
;; TODO: Review alt
[:img {:src "images/features/2.0-css-grid.gif"
:class (stl/css :start-image)
:border "0"
:alt "Community code contributions"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"css grid layout"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"¿Querías más flexibilidad para componer tus diseños?
Selecciona GridLayout para crear una estructura con los
márgenes y espacios que necesites. Los elementos de tu diseño
se adaptarán como un guante. Además tendrás en el momento el
código html y css con estándares web."]
[:p {:class (stl/css :feature-content)}
"Elige entre FlexLayout o GridLayout en tu panel lateral derecho."]]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 3}]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
1
[:div {:class (stl/css :modal-overlay)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-components.gif"
:class (stl/css :start-image)
:border "0"
:alt "Community code contributions"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"New components"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"Os hemos escuchado y ahora los main components están
disponibles en el archivo para gestionarlos más cómodamente."]
[:p {:class (stl/css :feature-content)}
"No te preocupes por tus archivos con main componentes v1,
al abrirlos con la nueva versión los encontrarás agrupados
en una página nueva, sanos y salvos."]]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 3}]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
2
[:div {:class (stl/css :modal-overlay)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.0-new-ui.gif"
:class (stl/css :start-image)
:border "0"
:alt "Community code contributions"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"REDISEÑO Y MEJORAS DE RENDIMIENTO"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"Le hemos dado una vuelta al interface y añadido
pequeñas mejoras de usabilidad.
Además, ahora puedes elegir entre tema oscuro y tema claro,
dignos de Dark Vader y Luke Skywalker."]
[:p {:class (stl/css :feature-content)}
"Aunque siempre estamos puliendo el rendimiento
y la estabilidad, en esta versión hemos
conseguido grandes mejoras en ese sentido."]
[:p {:class (stl/css :feature-content)}
"Que lo disfrutes!"]]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
:total 3}]
[:button {:on-click finish
:class (stl/css :next-btn)} "Let's go"]]]]]])))

90
frontend/src/app/main/ui/releases/v2_0.scss Normal file
View file

@ -0,0 +1,90 @@
// 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) KALEIDOS INC
@import "refactor/common-refactor.scss";
.modal-overlay {
@extend .modal-overlay-base;
}
.modal-container {
display: grid;
grid-template-columns: $s-324 1fr;
height: $s-500;
width: $s-888;
border-radius: $br-8;
background-color: var(--modal-background-color);
border: $s-2 solid var(--modal-border-color);
}
.start-image {
width: $s-324;
border-radius: $br-8 0 0 $br-8;
}
.modal-content {
padding: $s-40;
display: grid;
grid-template-rows: auto 1fr $s-32;
gap: $s-24;
}
.modal-header {
display: grid;
gap: $s-8;
}
.verstion-tag {
@include flexCenter;
@include headlineSmallTypography;
height: $s-32;
width: $s-96;
background-color: var(--communication-tag-background-color);
color: var(--communication-tag-foreground-color);
border-radius: $br-8;
}
.modal-title {
@include headlineLargeTypography;
color: var(--modal-title-foreground-color);
}
.features-block {
display: flex;
flex-direction: column;
gap: $s-16;
width: $s-440;
}
.feature {
display: flex;
flex-direction: column;
gap: $s-8;
}
.feature-title {
@include bodyLargeTypography;
color: var(--modal-title-foreground-color);
}
.feature-content {
@include bodyMediumTypography;
margin: 0;
color: var(--modal-text-foreground-color);
}
.navigation {
width: 100%;
display: grid;
grid-template-areas: "bullets button";
}
.next-btn {
@extend .button-primary;
width: $s-100;
justify-self: flex-end;
grid-area: button;
}

6
frontend/src/app/main/ui/settings/access_tokens.scss
View file

@ -191,7 +191,7 @@
.modal-content {
@include flexColumn;
gap: $s-24;
@include bodyMedTipography;
@include bodySmallTypography;
margin-bottom: $s-24;
}
@ -200,7 +200,7 @@
}
.select-title {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-title-foreground-color);
}
@ -223,7 +223,7 @@
.token-value {
@include textEllipsis;
@include bodyMedTipography;
@include bodySmallTypography;
flex-grow: 1;
}

4
frontend/src/app/main/ui/settings/change_email.scss
View file

@ -30,7 +30,7 @@
.modal-content {
@include flexColumn;
@include bodyMedTipography;
@include bodySmallTypography;
gap: $s-24;
margin-bottom: $s-24;
}
@ -40,7 +40,7 @@
}
.select-title {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-title-foreground-color);
}

4
frontend/src/app/main/ui/settings/delete_account.scss
View file

@ -30,7 +30,7 @@
.modal-content {
@include flexColumn;
@include bodyMedTipography;
@include bodySmallTypography;
gap: $s-24;
margin-bottom: $s-24;
}
@ -40,7 +40,7 @@
}
.select-title {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-title-foreground-color);
}

4
frontend/src/app/main/ui/viewer.scss
View file

@ -24,7 +24,7 @@
}
.empty-state {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--empty-message-foreground-color);
display: grid;
place-items: center;
@ -134,7 +134,7 @@
.counter {
@include flexCenter;
@include bodyMedTipography;
@include bodySmallTypography;
border-radius: $br-8;
width: $s-64;
height: $s-32;

4
frontend/src/app/main/ui/viewer/comments.scss
View file

@ -8,7 +8,7 @@
// COMMENT DROPDOWN ON HEADER
.view-options {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
position: relative;
@ -29,7 +29,7 @@
}
.dropdown-title {
@include bodyMedTipography;
@include bodySmallTypography;
flex-grow: 1;
color: var(--input-foreground-color-active);
}

8
frontend/src/app/main/ui/viewer/header.scss
View file

@ -62,7 +62,7 @@
}
.breadcrumb {
@include bodyMedTipography;
@include bodySmallTypography;
@include flexRow;
color: var(--title-foreground-color);
cursor: pointer;
@ -114,7 +114,7 @@
}
.current-frame {
@include bodyMedTipography;
@include bodySmallTypography;
@include flexRow;
flex-grow: 1;
color: var(--title-foreground-color-hover);
@ -198,7 +198,7 @@
.go-log-btn {
@extend .button-tertiary;
@include bodyMedTipography;
@include bodySmallTypography;
height: $s-32;
padding: 0 $s-8;
border-radius: $br-8;
@ -213,7 +213,7 @@
min-width: $s-64;
border-radius: $br-8;
.label {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--button-tertiary-foreground-color-rest);
}

2
frontend/src/app/main/ui/viewer/inspect/annotation.scss
View file

@ -15,7 +15,7 @@
}
.annotation-content {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--entry-foreground-color);
}

8
frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
View file

@ -78,7 +78,7 @@
grid-template-rows: 1fr 1fr;
}
.color-name-wrapper {
@include bodyMedTipography;
@include bodySmallTypography;
@include flexColumn;
padding: $s-8 $s-4 $s-8 $s-8;
height: $s-32;
@ -89,21 +89,21 @@
max-width: $s-124;
}
.color-name-library {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
text-align: left;
height: $s-16;
color: var(--menu-foreground-color-rest);
}
.color-value-wrapper {
@include bodyMedTipography;
@include bodySmallTypography;
height: $s-16;
color: var(--menu-foreground-color);
}
}
.opacity-info {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--menu-foreground-color);
padding: $s-8 0;
}

2
frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
View file

@ -36,7 +36,7 @@
border: $s-1 solid var(--menu-border-color-disabled);
margin-top: $s-4;
.content {
@include bodyMedTipography;
@include bodySmallTypography;
width: 100%;
padding: $s-4 0;
color: var(--color-foreground-secondary);

4
frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
View file

@ -50,7 +50,7 @@
}
.layer-title {
@include bodyMedTipography;
@include bodySmallTypography;
@include text-ellipsis;
height: $s-32;
padding: $s-8 0;
@ -79,7 +79,7 @@
}
.placeholder-label {
@include bodyMedTipography;
@include bodySmallTypography;
text-align: center;
width: $s-200;
color: var(--empty-message-foreground-color);

4
frontend/src/app/main/ui/viewer/interactions.scss
View file

@ -7,7 +7,7 @@
@use "common/refactor/common-refactor.scss" as *;
.view-options {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
position: relative;
@ -19,7 +19,7 @@
cursor: pointer;
}
.dropdown-title {
@include bodyMedTipography;
@include bodySmallTypography;
flex-grow: 1;
color: var(--input-foreground-color-active);
}

2
frontend/src/app/main/ui/viewer/login.scss
View file

@ -29,7 +29,7 @@
.modal-content {
@include flexColumn;
@include bodyMedTipography;
@include bodySmallTypography;
gap: $s-24;
max-height: $s-400;
width: $s-368;

6
frontend/src/app/main/ui/viewer/share_link.scss
View file

@ -34,7 +34,7 @@
}
.modal-content {
@include bodyMedTipography;
@include bodySmallTypography;
@include flexColumn;
gap: $s-24;
}
@ -86,7 +86,7 @@
}
.description {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--modal-text-foreground-color);
margin-bottom: $s-24;
}
@ -181,7 +181,7 @@
}
.count-pages,
.current-tag {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--input-foreground-color);
}

4
frontend/src/app/main/ui/viewer/thumbnails.scss
View file

@ -33,7 +33,7 @@
}
.counter {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--viewer-thumbnails-control-foreground-color);
}
@ -142,7 +142,7 @@
}
.thumbnail-info {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
text-align: center;
color: var(--viewer-thumbnails-control-foreground-color);

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

@ -97,6 +97,6 @@
}
.color-palette-empty {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--palette-text-color);
}

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

@ -33,7 +33,7 @@
.option-wrapper {
width: 100%;
.library-name {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--context-menu-foreground-color);
display: grid;
grid-template-columns: 1fr $s-24;

4
frontend/src/app/main/ui/workspace/comments.scss
View file

@ -110,7 +110,7 @@
}
}
.label {
@include bodyMedTipography;
@include bodySmallTypography;
}
&:hover {
.icon svg {
@ -164,7 +164,7 @@
}
.placeholder-label {
@include bodyMedTipography;
@include bodySmallTypography;
text-align: center;
width: $s-184;
color: var(--empty-message-foreground-color);

4
frontend/src/app/main/ui/workspace/context_menu.scss
View file

@ -37,7 +37,7 @@
cursor: pointer;
.title {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--menu-foreground-color);
}
.shortcut {
@ -45,7 +45,7 @@
gap: $s-2;
color: var(--menu-shortcut-foreground-color);
.shortcut-key {
@include bodyMedTipography;
@include bodySmallTypography;
@include flexCenter;
height: $s-20;
padding: $s-2 $s-6;

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

@ -36,7 +36,7 @@
width: $s-48;
border-radius: $br-8;
.label {
@include bodyMedTipography;
@include bodySmallTypography;
height: 100%;
padding: $s-8 0;
color: var(--button-tertiary-foreground-color-rest);

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

@ -113,7 +113,7 @@
}
.section-item {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
justify-content: space-between;

4
frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
View file

@ -45,7 +45,7 @@
border: $s-1 solid var(--input-border-color-focus);
input.element-name {
@include textEllipsis;
@include bodyMedTipography;
@include bodySmallTypography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;
@ -67,7 +67,7 @@
}
.name-block {
@include bodyMedTipography;
@include bodySmallTypography;
display: grid;
grid-template-columns: auto 1fr;
margin: 0;

8
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View file

@ -29,7 +29,7 @@
cursor: pointer;
.cell-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
display: none;
position: absolute;
@ -44,7 +44,7 @@
color: var(--assets-item-name-foreground-color);
input {
@include textEllipsis;
@include bodyMedTipography;
@include bodySmallTypography;
@include removeInputStyle;
height: auto;
padding: 0;
@ -132,13 +132,13 @@
}
.item-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
order: 2;
color: var(--assets-item-name-foreground-color);
input {
@include textEllipsis;
@include bodyMedTipography;
@include bodySmallTypography;
@include removeInputStyle;
height: $s-32;
padding: $s-4;

4
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
View file

@ -14,7 +14,7 @@
}
.file-name {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
justify-content: flex-start;
align-items: center;
@ -71,6 +71,6 @@
}
.no-found-text {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--not-found-foreground-color);
}

4
frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss
View file

@ -36,7 +36,7 @@
height: 10vh;
}
.cell-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
display: none;
position: absolute;
@ -110,7 +110,7 @@
}
.item-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
padding-left: $s-8;
color: var(--assets-item-name-foreground-color);

2
frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
View file

@ -45,7 +45,7 @@
}
.modal-content {
@include bodyMedTipography;
@include bodySmallTypography;
margin-bottom: $s-24;
}
.input-wrapper {

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

@ -59,7 +59,7 @@
}
.history-entry-empty-msg {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--empty-message-foreground-color);
}

4
frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
View file

@ -8,7 +8,7 @@
.element-name {
@include textEllipsis;
@include bodyMedTipography;
@include bodySmallTypography;
flex-grow: 1;
color: var(--context-hover-color, var(--layer-row-foreground-color));
&.selected {
@ -27,7 +27,7 @@
}
.element-name-input {
@include textEllipsis;
@include bodyMedTipography;
@include bodySmallTypography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;

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

@ -108,7 +108,7 @@
}
.focus-name {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
height: 100%;
@ -124,7 +124,7 @@
.focus-mode-tag {
@include flexCenter;
@include bodyMedTipography;
@include bodySmallTypography;
height: $s-20;
padding: $s-4 $s-6;
border: $s-1 solid var(--tag-background-color);
@ -160,7 +160,7 @@
.layer-filter-name {
@include flexCenter;
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--pill-foreground-color);
}
@ -174,7 +174,7 @@
left: $s-20;
width: $s-192;
.filter-menu-item {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
justify-content: space-between;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
View file

@ -57,7 +57,7 @@
}
}
.label {
@include bodyMedTipography;
@include bodySmallTypography;
flex-grow: 1;
display: flex;
align-items: center;

22
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View file

@ -96,7 +96,7 @@
}
.component-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
direction: rtl;
text-align: left;
@ -104,7 +104,7 @@
}
.component-parent-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
direction: rtl;
text-align: left;
@ -143,7 +143,7 @@
}
.copy-text {
@include bodyMedTipography;
@include bodySmallTypography;
height: 100%;
display: flex;
align-items: center;
@ -244,7 +244,7 @@
}
.path-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
direction: rtl;
height: $s-32;
@ -252,7 +252,7 @@
}
.path-name-last {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
height: $s-32;
padding: $s-8 0 $s-8 $s-2;
@ -260,7 +260,7 @@
}
.component-list-empty {
@include bodyMedTipography;
@include bodySmallTypography;
margin: 0 $s-4 0 $s-8;
color: $df-secondary;
}
@ -346,7 +346,7 @@
object-fit: contain;
}
.component-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
display: none;
position: absolute;
@ -431,7 +431,7 @@
}
.library-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
color: var(--title-foreground-color);
padding: $s-8 0 $s-8 $s-2;
@ -452,7 +452,7 @@
}
.component-group {
@include bodyMedTipography;
@include bodySmallTypography;
display: grid;
grid-template-columns: 1fr $s-12;
height: $s-32;
@ -495,7 +495,7 @@
// Component annotation
.component-annotation {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--entry-foreground-color);
border-radius: $br-8;
@ -613,7 +613,7 @@
}
.counter {
@include bodyMedTipography;
@include bodySmallTypography;
text-align: right;
color: var(--entry-foreground-color);
margin: 0 $s-8 $s-8 0;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
View file

@ -134,7 +134,7 @@
}
label {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
gap: $s-2;

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
View file

@ -55,12 +55,12 @@
}
.after {
@include bodyMedTipography;
@include bodySmallTypography;
margin-top: $s-1;
}
.interactions-help {
@include bodyMedTipography;
@include bodySmallTypography;
text-align: center;
color: var(--title-foreground-color);
}
@ -120,7 +120,7 @@
}
.interaction-name {
@include twoLineTextEllipsis;
@include bodyMedTipography;
@include bodySmallTypography;
padding-left: $s-4;
width: $s-92;
margin: auto 0;
@ -287,7 +287,7 @@
}
.flow-name-wrapper {
@include bodyMedTipography;
@include bodySmallTypography;
@include focusInput;
display: flex;
align-items: center;
@ -324,7 +324,7 @@
}
.flow-input-wrapper {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
height: $s-28;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
View file

@ -44,7 +44,7 @@
}
.select-name {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
justify-content: flex-start;
align-items: center;

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
View file

@ -26,7 +26,7 @@
}
.attr-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include twoLineTextEllipsis;
width: $s-88;
margin: auto $s-4;
@ -60,7 +60,7 @@
}
.attr-title {
@include bodyMedTipography;
@include bodySmallTypography;
font-size: $fs-10;
text-transform: uppercase;
margin-inline-start: $s-4;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
View file

@ -33,7 +33,7 @@
}
.multiple-text {
@include bodyMedTipography;
@include bodySmallTypography;
flex-grow: 1;
color: var(--input-foreground-color-active);
}

20
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View file

@ -72,7 +72,7 @@
.typography-name,
.typography-font {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
display: flex;
align-items: center;
@ -90,7 +90,7 @@
}
.font-name-wrapper {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
height: $s-32;
@ -169,7 +169,7 @@
color: var(--assets-item-name-foreground-color-hover);
}
.typography-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
display: flex;
align-items: center;
@ -178,7 +178,7 @@
color: var(--assets-item-name-foreground-color-hover);
}
.typography-font {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
margin-left: $s-6;
display: flex;
@ -207,14 +207,14 @@
--calcualted-width: calc(var(--width) - $s-48);
padding-left: $s-2;
.info-label {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
width: calc(var(--calcualted-width) / 2);
padding-top: $s-8;
color: var(--assets-item-name-foreground-color);
}
.info-content {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
padding-top: $s-8;
width: calc(var(--calcualted-width) / 2);
@ -254,7 +254,7 @@
position: relative;
}
.font-option {
@include bodyMedTipography;
@include bodySmallTypography;
@extend .asset-element;
padding: $s-8 0 $s-8 $s-8;
cursor: pointer;
@ -277,7 +277,7 @@
gap: $s-4;
.font-size-options {
@extend .asset-element;
@include bodyMedTipography;
@include bodySmallTypography;
flex-grow: 1;
width: $s-60;
margin: 0;
@ -331,7 +331,7 @@
.font-size-select {
@include removeInputStyle;
@include bodyMedTipography;
@include bodySmallTypography;
height: $s-32;
height: 100%;
width: 100%;
@ -410,7 +410,7 @@
}
.label {
@include bodyMedTipography;
@include bodySmallTypography;
flex-grow: 1;
}
}

4
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View file

@ -67,7 +67,7 @@
}
}
.color-name {
@include bodyMedTipography;
@include bodySmallTypography;
@include textEllipsis;
padding-inline: $s-6;
border-radius: $br-8;
@ -86,7 +86,7 @@
stroke: var(--detach-icon-foreground-color);
}
.color-input-wrapper {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
height: $s-28;

6
frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
View file

@ -112,7 +112,7 @@
}
.not-found {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--empty-message-foreground-color);
margin: $s-12;
}
@ -181,7 +181,7 @@
background-color: var(--pill-background-color);
.command-name {
@include bodyMedTipography;
@include bodySmallTypography;
margin-left: $s-2;
color: var(--pill-foreground-color);
}
@ -191,7 +191,7 @@
color: var(--pill-foreground-color);
.key {
@include bodyMedTipography;
@include bodySmallTypography;
@include flexCenter;
text-transform: capitalize;
height: $s-20;

6
frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
View file

@ -35,7 +35,7 @@
.view-only-mode {
@include flexCenter;
@include bodyMedTipography;
@include bodySmallTypography;
height: $s-20;
padding: $s-4 $s-6;
margin-right: $s-12;
@ -75,7 +75,7 @@
}
.page-element {
@include bodyMedTipography;
@include bodySmallTypography;
min-height: $s-32;
width: 100%;
cursor: pointer;
@ -139,7 +139,7 @@
}
input.element-name {
@include textEllipsis;
@include bodyMedTipography;
@include bodySmallTypography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;

4
frontend/src/app/main/ui/workspace/text_palette.scss
View file

@ -80,7 +80,7 @@
}
.typography-item {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
flex-direction: column;
justify-content: center;
@ -135,6 +135,6 @@
}
.text-palette-empty {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--palette-text-color);
}

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

@ -32,7 +32,7 @@
margin-bottom: 0;
}
.library-name {
@include bodyMedTipography;
@include bodySmallTypography;
color: var(--context-menu-foreground-color);
display: grid;
grid-template-columns: 1fr $s-24;

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

@ -26,7 +26,7 @@
cursor: pointer;
display: flex;
.content {
@include bodyMedTipography;
@include bodySmallTypography;
display: flex;
align-items: center;
height: $s-24;