From 9a2ee806e444c444443863365382f0d7875165aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 20 Jun 2024 14:58:19 +0200 Subject: [PATCH] :sparkles: Clean up base scss --- frontend/resources/styles/common/base.scss | 151 +++--------------- .../resources/styles/common/framework.scss | 30 ---- frontend/resources/styles/main-default.scss | 9 +- .../sidebar/options/menus/measures.cljs | 2 +- .../sidebar/options/menus/svg_attrs.cljs | 1 - 5 files changed, 25 insertions(+), 168 deletions(-) delete mode 100644 frontend/resources/styles/common/framework.scss diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index ecbda4ab9..f764e045f 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -7,15 +7,16 @@ // TODO: Legacy sass vars. We should use DS tokens. $color-gray-50: #303236; $fs12: 0.75rem; +$fs14: 0.875rem; $fs18: 1.125rem; $fs24: 1.5rem; $fs34: 2.125rem; $fs44: 2.75rem; $fw300: 300; $fw500: 500; -$fw700: 700; $lh-115: 1.15; $lh-133: 1.33; +$size-4: 1rem; :root { --font-family: "worksans", sans-serif; @@ -42,27 +43,15 @@ body { * { box-sizing: border-box; scrollbar-width: thin; - // transition: all .4s ease; } +// Firefox-only hack @-moz-document url-prefix() { * { scrollbar-width: auto; } } -.global-zeroclipboard-container { - transition: none; - - #global-zeroclipboard-flash-bridge { - transition: none; - } - - object { - transition: none; - } -} - img { height: auto; width: 100%; @@ -102,25 +91,12 @@ ul { margin-bottom: 1rem; } -strong { - font-weight: $fw700; -} - -.relative { - position: relative; -} - h1 { font-size: $fs34; font-weight: $fw500; line-height: $lh-115; - - &.supertitle { - font-size: $fs44; - font-weight: $fw300; - line-height: $lh-115; - } } + h2 { font-size: $fs24; font-weight: $fw300; @@ -138,104 +114,6 @@ h4 { font-weight: $fw300; } -@-webkit-keyframes rotation { - from { - -webkit-transform: rotate(0deg); - } - to { - -webkit-transform: rotate(359deg); - } -} - -@-webkit-keyframes rotation-negative { - from { - -webkit-transform: rotate(0deg); - } - to { - -webkit-transform: rotate(-359deg); - } -} - -@keyframes tooltipAppear { - 0% { - opacity: 0; - display: none; - } - 1% { - display: block; - opacity: 0; - left: 3rem; - } - 100% { - opacity: 1; - left: 2rem; - } -} - -@keyframes show { - 0% { - opacity: 0; - display: none; - } - 1% { - display: block; - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes hide { - 0% { - opacity: 1; - display: block; - } - 99% { - opacity: 0; - display: block; - } - 100% { - display: none; - } -} - -.hide { - display: none !important; - transition: all 0.5s ease; -} - -.visuallyHidden { - opacity: 0 !important; - transition: all 0.5s ease; -} - -.show { - animation: show 0.4s linear; - display: block !important; -} - -.center { - margin: 0 auto; - text-align: center; -} - -.hidden-input { - display: none; -} - -.bold { - font-weight: $fw700 !important; -} - -.nopd { - padding: 0 !important; -} - -.move-cursor { - cursor: move; -} - hr { border-top: solid 1px var(--db-primary); border-right: 0; @@ -259,7 +137,22 @@ input[type="number"] { user-select: text; } -[data-hidden="true"] { - display: none; - pointer-events: none; +input, +select { + box-sizing: border-box; + font-family: "worksans", sans-serif; + font-size: $fs14; + margin-bottom: $size-4; + -webkit-appearance: none; + -moz-appearance: none; +} + +[draggable] { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; + /* Required to make elements draggable in old WebKit */ + -khtml-user-drag: element; + -webkit-user-drag: element; } diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss deleted file mode 100644 index 74fd77d23..000000000 --- a/frontend/resources/styles/common/framework.scss +++ /dev/null @@ -1,30 +0,0 @@ -// 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 - -// TODO: These are legacy Sass vars that are now only used in this file. -// We should switch them for the new DS tokens. -$size-4: 1rem; -$fs14: 0.875rem; - -input, -select { - box-sizing: border-box; - font-family: "worksans", sans-serif; - font-size: $fs14; - margin-bottom: $size-4; - -webkit-appearance: none; - -moz-appearance: none; -} - -[draggable] { - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - user-select: none; - /* Required to make elements draggable in old WebKit */ - -khtml-user-drag: element; - -webkit-user-drag: element; -} diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index 7b7004f4f..aca47fd48 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -4,12 +4,6 @@ // // Copyright (c) KALEIDOS INC -//################################################# -// Import libraries -//################################################# - -@use "sass:color"; - //################################################# // MAIN STYLES //################################################# @@ -32,7 +26,8 @@ // Commons //################################################# -@import "common/framework"; +// TODO: remove this stylesheet once the new text editor is in place +// https: //tree.taiga.io/project/penpot/us/8165 @import "main/partials/texts"; //################################################# diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 8b40932b4..ffec58e41 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -480,7 +480,7 @@ [:div {:class (stl/css :radius-1) :title (tr "workspace.options.radius")} [:span {:class (stl/css :icon)} i/corner-radius] - [:input.input-text + [:input {:type "number" :placeholder "Mixed" :min 0 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs index 7c4a5a500..1d6d00966 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs @@ -36,7 +36,6 @@ [:span {:class (stl/css :attr-name)} label] [:div {:class (stl/css :attr-input)} [:input {:value value - :class "input-text" :on-change handle-change}]] [:div {:class (stl/css :attr-actions)} [:button {:class (stl/css :attr-action-btn)