mirror of
https://github.com/penpot/penpot.git
synced 2025-06-04 18:11:41 +02:00
Merge pull request #4781 from penpot/ladybenko-8110-clean-global-css
✨ Clean global css styles
This commit is contained in:
Alejandro
GitHub
commit
4e5eabbf05
43 changed files with 350 additions and 5850 deletions
|
|
@ -48,7 +48,6 @@
|
|||
"@storybook/react-vite": "^7.6.17",
|
||||
"@storybook/testing-library": "^0.2.2",
|
||||
"@types/node": "^20.11.20",
|
||||
"animate.css": "^4.1.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"concurrently": "^8.2.2",
|
||||
"draft-js": "git+https://github.com/penpot/draft-js.git#commit=4a99b2a6020b2af97f6dc5fa1b4275ec16b559a0",
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export default defineConfig({
|
|||
use: { ...devices["Desktop Chrome"] },
|
||||
testDir: "./playwright/ui/visual-specs",
|
||||
expect: {
|
||||
toHaveScreenshot: { maxDiffPixelRatio: 0.01 },
|
||||
toHaveScreenshot: { maxDiffPixelRatio: 0.005 },
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -4,13 +4,27 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// 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;
|
||||
$lh-115: 1.15;
|
||||
$lh-133: 1.33;
|
||||
$size-4: 1rem;
|
||||
|
||||
:root {
|
||||
--font-family: "worksans", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: lighten($color-gray-10, 5%);
|
||||
color: $color-gray-20;
|
||||
background-color: var(--db-primary);
|
||||
color: var(--df-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-family);
|
||||
|
|
@ -29,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%;
|
||||
|
|
@ -79,63 +81,26 @@ p {
|
|||
font-size: $fs12;
|
||||
margin-bottom: 1rem;
|
||||
line-height: $lh-133;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
font-size: $fs16;
|
||||
line-height: $lh-143;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: $lh-133;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
line-height: $lh-143;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: $fw700;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $fs34;
|
||||
font-weight: $fw500;
|
||||
line-height: $lh-115;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
font-size: $fs38;
|
||||
line-height: $lh-125;
|
||||
}
|
||||
|
||||
&.supertitle {
|
||||
font-size: $fs44;
|
||||
font-weight: $fw300;
|
||||
line-height: $lh-115;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
font-size: $fs44;
|
||||
line-height: $lh-125;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $fs24;
|
||||
font-weight: $fw300;
|
||||
line-height: $lh-115;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
font-size: $fs32;
|
||||
line-height: $lh-125;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -149,106 +114,8 @@ 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 $color-gray-60;
|
||||
border-top: solid 1px var(--db-primary);
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-bottom: 0;
|
||||
|
|
@ -270,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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,89 +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
|
||||
|
||||
// New UI colors
|
||||
$db-primary: #18181a;
|
||||
$db-secondary: #000000;
|
||||
$db-tertiary: #212426;
|
||||
$db-quaternary: #2e3434;
|
||||
|
||||
$df-primary: #ffffff;
|
||||
$df-secondary: #8f9da3;
|
||||
|
||||
$da-primary: #7efff5;
|
||||
$da-primary-muted: rgba(126, 255, 245, 0.3);
|
||||
$da-secondary: #bb97d8;
|
||||
$da-tertiary: #00d1b8;
|
||||
|
||||
$d-shadow: rgba(0, 0, 0, 0.6);
|
||||
|
||||
// Colors
|
||||
$color-white: #ffffff;
|
||||
$color-black: #000000;
|
||||
$color-canvas: #e8e9ea;
|
||||
$color-dashboard: #f6f6f6;
|
||||
|
||||
// Main color
|
||||
$color-primary: #31efb8;
|
||||
|
||||
// Secondary colors
|
||||
$color-success: #49d793;
|
||||
$color-complete: #a599c6;
|
||||
$color-warning: #fc8802;
|
||||
$color-danger: #e65244;
|
||||
$color-info: #59b9e2;
|
||||
|
||||
// Gray scale
|
||||
$color-gray-10: #e3e3e3;
|
||||
$color-gray-20: #b1b2b5;
|
||||
$color-gray-30: #7b7d85;
|
||||
$color-gray-40: #64666a;
|
||||
$color-gray-50: #303236;
|
||||
$color-gray-60: #1f1f1f;
|
||||
|
||||
// Mixing Color variable for creating both light and dark colors
|
||||
$mix-percentage-dark: 81%;
|
||||
$mix-percentage-darker: 60%;
|
||||
$mix-percentage-lighter: 20%;
|
||||
|
||||
// Lighter colors
|
||||
|
||||
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de
|
||||
|
||||
$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1
|
||||
|
||||
$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda
|
||||
|
||||
// Darker colors
|
||||
$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b;
|
||||
|
||||
$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); //#867ca0
|
||||
$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77
|
||||
|
||||
$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); //#28c295;
|
||||
$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e
|
||||
|
||||
$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02;
|
||||
|
||||
$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237
|
||||
|
||||
$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88;
|
||||
|
||||
// bg transparent
|
||||
$color-dark-bg: rgba(0, 0, 0, 0.4);
|
||||
|
||||
// Transform scss variables into css variables to use them onto cljs files
|
||||
:root {
|
||||
// Secondary colors;
|
||||
|
||||
--color-info: #{$color-info};
|
||||
--color-canvas: #e8e9ea;
|
||||
|
||||
// Gray scale;
|
||||
|
||||
--color-gray-20: #{$color-gray-20};
|
||||
--color-gray-60: #{$color-gray-60};
|
||||
}
|
||||
|
|
@ -4,64 +4,18 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// Font sizes
|
||||
$fs8: 0.5rem;
|
||||
$fs9: 0.5625rem;
|
||||
$fs10: 0.625rem;
|
||||
$fs11: 0.6875rem;
|
||||
$fs12: 0.75rem;
|
||||
$fs13: 0.8125rem;
|
||||
$fs14: 0.875rem;
|
||||
$fs15: 0.9375rem;
|
||||
$fs16: 1rem;
|
||||
$fs17: 1.0625rem;
|
||||
$fs18: 1.125rem;
|
||||
$fs19: 1.1875rem;
|
||||
$fs20: 1.25rem;
|
||||
$fs21: 1.315rem;
|
||||
$fs22: 1.375rem;
|
||||
$fs23: 1.4375rem;
|
||||
$fs24: 1.5rem;
|
||||
$fs26: 1.625rem;
|
||||
$fs30: 1.875rem;
|
||||
$fs32: 2rem;
|
||||
$fs34: 2.125rem;
|
||||
$fs36: 2.25rem;
|
||||
$fs38: 2.375rem;
|
||||
$fs40: 2.5rem;
|
||||
$fs42: 2.675rem;
|
||||
$fs44: 2.75rem;
|
||||
$fs80: 5rem;
|
||||
@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
|
||||
$filepath: "/fonts/" + $file;
|
||||
|
||||
// Font weight
|
||||
// Taken from https://fonts.google.com/specimen/Work+Sans
|
||||
$fw100: 100; // Thin
|
||||
$fw200: 200; // Extra Light
|
||||
$fw300: 300; // Light
|
||||
$fw400: 400; // Regular (CSS value: 'normal')
|
||||
$fw500: 500; // Medium
|
||||
$fw600: 600; // Semi Bold
|
||||
$fw700: 700; // Bold (CSS value: 'bold')
|
||||
$fw800: 800; // Extra Bold
|
||||
$fw900: 900; // Black
|
||||
|
||||
// Line height
|
||||
// Value are predefined as unitless (ratio to font size in %), because that is the best approach for browsers according to https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#values
|
||||
$lh-normal: normal; // line-height depends of font-family, font-size, your browser, maybe your OS http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
|
||||
$lh-088: 0.88;
|
||||
$lh-100: 1;
|
||||
$lh-115: 1.15; // original $title-lh-sm
|
||||
$lh-125: 1.25; // original $title-lh
|
||||
$lh-128: 1.28;
|
||||
$lh-133: 1.33; // original $base-lh-sm
|
||||
$lh-143: 1.43; // original $base-lh
|
||||
$lh-145: 1.45;
|
||||
$lh-150: 1.5;
|
||||
$lh-188: 1.88;
|
||||
$lh-192: 1.92;
|
||||
$lh-200: 2;
|
||||
$lh-236: 2.36;
|
||||
$lh-500: 5;
|
||||
@font-face {
|
||||
font-family: "#{$style-name}";
|
||||
src:
|
||||
url($filepath + ".woff2") format("woff2"),
|
||||
url($filepath + ".ttf") format("truetype");
|
||||
font-weight: unquote($weight);
|
||||
font-style: unquote($style);
|
||||
}
|
||||
}
|
||||
|
||||
// Work Sans
|
||||
@include font-face("worksans", "WorkSans-Thin", "100");
|
||||
|
|
@ -105,3 +59,6 @@ $lh-500: 5;
|
|||
@include font-face("vazirmatn", "Vazirmatn-Bold", bold);
|
||||
@include font-face("vazirmatn", "Vazirmatn-ExtraBold", "800");
|
||||
@include font-face("vazirmatn", "Vazirmatn-Black", "900");
|
||||
|
||||
// Space mono
|
||||
@include font-face("robotomono", "RobotoMono-Regular", normal);
|
||||
|
|
|
|||
|
|
@ -1,69 +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
|
||||
|
||||
// Padding & Margin sizes
|
||||
$size-1: 0.25rem;
|
||||
$size-2: 0.5rem;
|
||||
$size-3: 0.75rem;
|
||||
$size-4: 1rem;
|
||||
$size-5: 1.5rem;
|
||||
$size-6: 2rem;
|
||||
|
||||
// Border radius
|
||||
$br0: 0px;
|
||||
$br2: 2px;
|
||||
$br3: 3px;
|
||||
$br4: 4px;
|
||||
$br5: 5px;
|
||||
$br6: 6px;
|
||||
$br7: 7px;
|
||||
$br8: 8px;
|
||||
$br10: 10px;
|
||||
$br12: 12px;
|
||||
$br25: 25px;
|
||||
$br50: 50px;
|
||||
$br99: 99px;
|
||||
$br-circle: 50%; // Need to be investigated, before we can use variable
|
||||
|
||||
.row-flex {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-bottom: $size-1;
|
||||
|
||||
&.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.center {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.row-grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.column-half {
|
||||
margin-right: $size-2;
|
||||
}
|
||||
|
||||
// Display
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.display {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
/*
|
||||
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #23241f;
|
||||
}
|
||||
|
||||
.hljs,
|
||||
.hljs-tag,
|
||||
.hljs-subst {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.hljs-strong,
|
||||
.hljs-emphasis {
|
||||
color: #a8a8a2;
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-quote,
|
||||
.hljs-number,
|
||||
.hljs-regexp,
|
||||
.hljs-literal,
|
||||
.hljs-link {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-class {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: $fw700;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-name,
|
||||
.hljs-attr {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-attribute {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.hljs-params,
|
||||
.hljs-class .hljs-title {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-type,
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-addition,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-deletion,
|
||||
.hljs-meta {
|
||||
color: #75715e;
|
||||
}
|
||||
|
|
@ -1,163 +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
|
||||
|
||||
/// This mixin allows you to add styles to a specific Media query inside the style selector specifying which Breaking Point you want to choose.
|
||||
/// @group Mixins
|
||||
/// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile).
|
||||
$bp-min-720: "(min-width: 720px)";
|
||||
$bp-min-1020: "(min-width: 1020px)";
|
||||
$bp-min-1366: "(min-width: 1366px)";
|
||||
$bp-max-1366: "(max-width: 1366px)";
|
||||
$bp-min-2556: "(min-width: 2556px)";
|
||||
|
||||
@mixin bp($point) {
|
||||
@if $point == mobile {
|
||||
@media #{$bp-min-720} {
|
||||
@content;
|
||||
}
|
||||
} @else if $point == tablet {
|
||||
@media #{$bp-min-1020} {
|
||||
@content;
|
||||
}
|
||||
} @else if $point == desktop {
|
||||
@media #{$bp-min-1366} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Advanced positioning
|
||||
// ----------------
|
||||
@mixin position(
|
||||
$type,
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
position: $type;
|
||||
$allowed_types: absolute relative fixed;
|
||||
@if not index($allowed_types, $type) {
|
||||
@warn "Unknown position: #{$type}.";
|
||||
}
|
||||
@each $data in top $top, right $right, bottom $bottom, left $left {
|
||||
#{nth($data, 1)}: nth($data, 2);
|
||||
}
|
||||
}
|
||||
@mixin absolute(
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
@include position(absolute, $top, $right, $bottom, $left);
|
||||
}
|
||||
@mixin relative(
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
@include position(relative, $top, $right, $bottom, $left);
|
||||
}
|
||||
@mixin fixed(
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
@include position(fixed, $top, $right, $bottom, $left);
|
||||
}
|
||||
|
||||
/// Center an element vertically and horizontally with an absolute position.
|
||||
/// @group Mixins
|
||||
|
||||
@mixin centerer {
|
||||
@include absolute(50%, null, null, 50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/// This mixing allow you to add placeholder colors in all available browsers
|
||||
/// @group Mixins
|
||||
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
@content;
|
||||
}
|
||||
|
||||
&:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
@content;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
@content;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Allows you to visually
|
||||
/// @group Mixins
|
||||
|
||||
@mixin hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
|
||||
$filepath: "/fonts/" + $file;
|
||||
@font-face {
|
||||
font-family: "#{$style-name}";
|
||||
src:
|
||||
url($filepath + ".woff2") format("woff2"),
|
||||
url($filepath + ".ttf") format("truetype");
|
||||
font-weight: unquote($weight);
|
||||
font-style: unquote($style);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tooltipShow {
|
||||
&:hover {
|
||||
.icon-tooltip {
|
||||
display: block;
|
||||
left: 2rem;
|
||||
animation: tooltipAppear 0.2s linear;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.icon-tooltip {
|
||||
display: block;
|
||||
left: 2rem;
|
||||
animation: tooltipAppear 0.2s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin paragraph-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
background-color: $color-gray-50;
|
||||
bottom: -3px;
|
||||
content: "...";
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
// TODO: Legacy sass vars. We should not be using Sass vars here in this
|
||||
// file at all.
|
||||
$lh-143: 1.43;
|
||||
|
||||
/*
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
|
|
@ -97,6 +101,9 @@ video {
|
|||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
// TODO: Changing line-height to 1 (as it should be) makes the visual tests
|
||||
// fail with a max pixel diff ratio of 0.005.
|
||||
// We should tackle this later.
|
||||
line-height: $lh-143;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -118,7 +125,7 @@ section {
|
|||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: $lh-100;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
|
|
|
|||
|
|
@ -1,10 +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
|
||||
|
||||
$autocomplete: 30000;
|
||||
$index-lightbox-shadow: 60000;
|
||||
$index-lightbox: 60001;
|
||||
$index-lightbox-close-x: 200;
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -13,6 +13,7 @@
|
|||
--db-primary-60: #{color.change(#18181a, $alpha: 0.6)};
|
||||
--db-secondary: #000000;
|
||||
--db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
|
||||
--db-secondary-40: #{color.change(#000000, $alpha: 0.4)};
|
||||
--db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
|
||||
--db-tertiary: #212426;
|
||||
--db-quaternary: #2e3434;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "sass:math";
|
||||
@import "common/dependencies/mixin";
|
||||
|
||||
// Typography scale
|
||||
$fs-base: 16;
|
||||
|
|
@ -24,3 +23,6 @@ $fs-36: math.div(36, $fs-base) + rem;
|
|||
$fw400: 400; // Regular (CSS value: 'normal')
|
||||
$fw500: 500; // Medium
|
||||
$fw700: 700; // Bold (CSS value: 'bold')
|
||||
|
||||
// Line heights
|
||||
$lh-150: 1.5;
|
||||
|
|
|
|||
|
|
@ -4,27 +4,15 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
//#################################################
|
||||
// Import libraries
|
||||
//#################################################
|
||||
|
||||
@use "sass:color";
|
||||
|
||||
//#################################################
|
||||
// MAIN STYLES
|
||||
//#################################################
|
||||
|
||||
@import "common/dependencies/colors";
|
||||
@import "common/dependencies/helpers";
|
||||
@import "common/dependencies/mixin";
|
||||
@import "common/dependencies/fonts";
|
||||
@import "common/dependencies/reset";
|
||||
@import "common/dependencies/animations";
|
||||
@import "common/dependencies/z-index";
|
||||
@import "common/dependencies/highlightjs-theme";
|
||||
|
||||
@import "animate";
|
||||
@import "common/refactor/color-defs.scss";
|
||||
@import "common/dependencies/fonts";
|
||||
@import "common/dependencies/animations";
|
||||
|
||||
@import "common/refactor/themes.scss";
|
||||
@import "common/refactor/design-tokens.scss";
|
||||
|
||||
|
|
@ -33,20 +21,19 @@
|
|||
//#################################################
|
||||
|
||||
@import "common/base";
|
||||
@import "main/layouts/main-layout";
|
||||
@import "main/layouts/not-found";
|
||||
|
||||
//#################################################
|
||||
// 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";
|
||||
|
||||
//#################################################
|
||||
// Partials
|
||||
//#################################################
|
||||
|
||||
@import "main/partials/debug-icons-preview";
|
||||
// TODO: encapsulate pencil loader into its own component
|
||||
// https: //tree.taiga.io/project/penpot/task/8217
|
||||
@import "main/partials/loader";
|
||||
@import "main/partials/workspace";
|
||||
|
|
|
|||
|
|
@ -1,52 +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
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard-layout {
|
||||
background-color: $color-white;
|
||||
display: grid;
|
||||
grid-template-rows: 50px 1fr;
|
||||
grid-template-columns: 40px 256px 1fr;
|
||||
height: 100vh;
|
||||
|
||||
.dashboard-sidebar {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 2;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
grid-row: 1 / span 2;
|
||||
padding: 1rem 1rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.verify-token {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
|
||||
svg#loader-pencil {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
#screenshot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
.not-found-layout {
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: 120px auto;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.not-found-header {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
|
||||
svg {
|
||||
height: 55px;
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
.not-found-content {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 2;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.image {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
svg {
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-message {
|
||||
color: $color-black;
|
||||
font-size: $fs80;
|
||||
line-height: $lh-188; // Original value was 150px; 150px/80px = 187.5 % => lh-188 (rounded)
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.desc-message {
|
||||
color: $color-black;
|
||||
font-size: $fs26;
|
||||
font-weight: $fw300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sign-info {
|
||||
margin-top: 20px;
|
||||
color: $color-black;
|
||||
font-size: $fs16;
|
||||
font-weight: $fw200;
|
||||
text-align: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
b {
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
.debug-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
h1 {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.debug-icons-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
h2 {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.subtitle-old {
|
||||
color: #ff3277;
|
||||
}
|
||||
|
||||
.icon-item,
|
||||
.cursor-item,
|
||||
.icon-item-old {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 10px;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
fill: none;
|
||||
color: transparent;
|
||||
stroke: #91fadb;
|
||||
}
|
||||
|
||||
span {
|
||||
color: white;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
word-break: break-word;
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-item div,
|
||||
.icon-item-old svg {
|
||||
stroke: #aab5ba;
|
||||
}
|
||||
|
||||
.cursor-item {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +1,6 @@
|
|||
// full width BG
|
||||
.loader-content {
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
// full with loader CSS
|
||||
svg#loader-icon {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
animation: loaderColor 5s infinite ease;
|
||||
}
|
||||
|
||||
#loader-pen1 {
|
||||
animation: pen1 2s infinite ease;
|
||||
}
|
||||
|
||||
#loader-pen2 {
|
||||
animation: pen2 2s infinite ease;
|
||||
}
|
||||
|
||||
#loader-pen3 {
|
||||
animation: pen3 2s infinite ease;
|
||||
}
|
||||
|
||||
// btn pencil loader
|
||||
svg#loader-pencil {
|
||||
fill: $color-primary-darker;
|
||||
fill: var(--color-accent-tertiary);
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.text-editor,
|
||||
.rich-text {
|
||||
color: $color-black;
|
||||
color: var(--app-black);
|
||||
height: 100%;
|
||||
font-family: sourcesanspro;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,363 +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
|
||||
|
||||
$width-left-toolbar: 48px;
|
||||
|
||||
$width-settings-bar: 256px;
|
||||
$width-settings-bar-min: 255px;
|
||||
$width-settings-bar-max: 500px;
|
||||
|
||||
$height-palette: 79px;
|
||||
$height-palette-min: 54px;
|
||||
$height-palette-max: 80px;
|
||||
|
||||
#workspace {
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
background-color: $color-canvas;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header header header header"
|
||||
"toolbar left-sidebar viewport right-sidebar"
|
||||
"toolbar left-sidebar color-palette right-sidebar";
|
||||
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: auto auto 1fr auto;
|
||||
|
||||
.workspace-header {
|
||||
grid-area: header;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.left-toolbar {
|
||||
grid-area: toolbar;
|
||||
width: $width-left-toolbar;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.settings-bar.settings-bar-left {
|
||||
min-width: $width-settings-bar;
|
||||
max-width: 500px;
|
||||
width: var(--width, $width-settings-bar);
|
||||
grid-area: left-sidebar;
|
||||
}
|
||||
|
||||
.settings-bar.settings-bar-right {
|
||||
height: 100%;
|
||||
width: var(--width, $width-settings-bar);
|
||||
grid-area: right-sidebar;
|
||||
|
||||
&.not-expand {
|
||||
max-width: $width-settings-bar;
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-content {
|
||||
grid-area: viewport;
|
||||
}
|
||||
|
||||
.color-palette {
|
||||
grid-area: color-palette;
|
||||
max-height: $height-palette-max;
|
||||
height: var(--height, $height-palette);
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-content {
|
||||
background-color: $color-canvas;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
grid-area: viewport;
|
||||
&.scrolling {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
&.no-tool-bar-right {
|
||||
width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
|
||||
right: 0;
|
||||
|
||||
.coordinates {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-tool-bar-left {
|
||||
width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
|
||||
|
||||
&.no-tool-bar-right {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.coordinates {
|
||||
background-color: $color-dark-bg;
|
||||
border-radius: $br3;
|
||||
bottom: 0px;
|
||||
padding-left: 5px;
|
||||
position: fixed;
|
||||
right: calc(#{$width-settings-bar} + 14px);
|
||||
text-align: center;
|
||||
width: 125px;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 2px;
|
||||
transition: bottom 0.5s;
|
||||
z-index: 2;
|
||||
|
||||
&.color-palette-open {
|
||||
bottom: 5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
font-size: $fs12;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-tooltip {
|
||||
background-color: $color-dark-bg;
|
||||
border-radius: $br3;
|
||||
color: $color-white;
|
||||
font-size: $fs12;
|
||||
padding: 3px 8px;
|
||||
transition: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.workspace-viewport {
|
||||
overflow: hidden;
|
||||
transition: none;
|
||||
display: grid;
|
||||
grid-template-rows: 20px 1fr;
|
||||
grid-template-columns: 20px 1fr;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
cursor: none;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1 / span 2;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.viewport-overlays {
|
||||
cursor: initial;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
.pixel-overlay {
|
||||
left: 0;
|
||||
pointer-events: initial;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.render-shapes {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frame-thumbnail-wrapper {
|
||||
.fills,
|
||||
.frame-clip-def {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.viewport-controls {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.page-canvas,
|
||||
.page-layout {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Rules */
|
||||
|
||||
.empty-rule-square {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
}
|
||||
|
||||
.horizontal-rule {
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
z-index: 13;
|
||||
|
||||
rect {
|
||||
fill: $color-canvas;
|
||||
}
|
||||
path {
|
||||
stroke: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-rule {
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 2 / span 1;
|
||||
z-index: 13;
|
||||
|
||||
rect {
|
||||
fill: $color-canvas;
|
||||
}
|
||||
path {
|
||||
stroke: $color-gray-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-frame-label {
|
||||
font-size: $fs12;
|
||||
}
|
||||
|
||||
.multiuser-cursor {
|
||||
z-index: 10000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
width: fit-content;
|
||||
font-family: worksans;
|
||||
padding: 2px 12px;
|
||||
border-radius: $br4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
font-size: $fs12;
|
||||
line-height: $lh-150;
|
||||
}
|
||||
|
||||
.viewport-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-top: 2rem;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 12;
|
||||
pointer-events: none;
|
||||
|
||||
.path-actions,
|
||||
.viewport-actions-container {
|
||||
pointer-events: initial;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: white;
|
||||
border-radius: $br3;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid $color-gray-20;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.viewport-actions-container {
|
||||
padding-left: 1rem;
|
||||
gap: 12px;
|
||||
color: var(--color-gray-60);
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.viewport-actions-title {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.grid-edit-board-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.viewport-actions-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-right: 1px solid $color-gray-20;
|
||||
}
|
||||
|
||||
.viewport-actions-entry {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 0 0.25rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: $br3;
|
||||
|
||||
svg {
|
||||
pointer-events: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
cursor: initial;
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-toggled {
|
||||
background: $color-black;
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewport-actions-entry-wide {
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
|
||||
svg {
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.path-actions > :first-child .viewport-actions-entry {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.path-actions > :last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.path-actions > :last-child .viewport-actions-entry {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.cursors :as c]
|
||||
[app.main.ui.debug.components-preview :as cm]
|
||||
[app.main.ui.debug.icons-preview :refer [icons-preview]]
|
||||
[app.main.ui.frame-preview :as frame-preview]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.messages :as msgs]
|
||||
|
|
@ -76,11 +76,7 @@
|
|||
|
||||
:debug-icons-preview
|
||||
(when *assert*
|
||||
[:div.debug-preview
|
||||
[:h1 "Cursors"]
|
||||
[:& c/debug-preview]
|
||||
[:h1 "Icons"]
|
||||
[:& i/debug-icons-preview]])
|
||||
[:& icons-preview])
|
||||
|
||||
(:dashboard-search
|
||||
:dashboard-projects
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.components.button-link
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.util.keyboard :as kbd]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
|
@ -18,8 +20,8 @@
|
|||
(when (kbd/enter? event)
|
||||
(when (fn? on-click)
|
||||
(on-click event)))))]
|
||||
[:a.btn-primary.btn-large.button-link
|
||||
{:class class
|
||||
[:a
|
||||
{:class (dm/str class " " (stl/css :button))
|
||||
:tab-index "0"
|
||||
:on-click on-click
|
||||
:on-key-down on-key-down}
|
||||
|
|
|
|||
28
frontend/src/app/main/ui/components/button_link.scss
Normal file
28
frontend/src/app/main/ui/components/button_link.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
// 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";
|
||||
|
||||
.button {
|
||||
appearance: none;
|
||||
align-items: center;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-family: "worksans", sans-serif;
|
||||
justify-content: center;
|
||||
min-width: 25px;
|
||||
padding: 0 1rem;
|
||||
transition: all 0.4s;
|
||||
text-decoration: none !important;
|
||||
|
||||
height: 40px;
|
||||
|
||||
svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
title (unchecked-get props "title")
|
||||
default (unchecked-get props "default")
|
||||
nillable? (unchecked-get props "nillable")
|
||||
class (d/nilv (unchecked-get props "className") "input-text")
|
||||
class (d/nilv (unchecked-get props "className") "")
|
||||
|
||||
min-value (d/parse-double min-value)
|
||||
max-value (d/parse-double max-value)
|
||||
|
|
|
|||
|
|
@ -5,11 +5,7 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.cursors
|
||||
(:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn collect-cursors]])
|
||||
(:require
|
||||
[app.util.timers :as ts]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
(:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn collect-cursors]]))
|
||||
|
||||
;; Static cursors
|
||||
(def ^:cursor comments (cursor-ref :comments 0 2 20))
|
||||
|
|
@ -53,28 +49,3 @@
|
|||
(def default
|
||||
"A collection of all icons"
|
||||
(collect-cursors))
|
||||
|
||||
(mf/defc debug-preview
|
||||
{::mf/wrap-props false}
|
||||
[]
|
||||
(let [rotation (mf/use-state 0)
|
||||
entries (->> (seq (js/Object.entries default))
|
||||
(sort-by first))]
|
||||
|
||||
(mf/with-effect []
|
||||
(ts/interval 100 #(reset! rotation inc)))
|
||||
|
||||
[:section.debug-icons-preview
|
||||
(for [[key value] entries]
|
||||
(let [value (if (fn? value) (value @rotation) value)]
|
||||
[:div.cursor-item {:key key}
|
||||
[:div {:style {:width "100px"
|
||||
:height "100px"
|
||||
:background-image (-> value (str/replace #"(url\(.*\)).*" "$1"))
|
||||
:background-size "contain"
|
||||
:background-repeat "no-repeat"
|
||||
:background-position "center"
|
||||
:cursor value}}]
|
||||
|
||||
[:span {:style {:white-space "nowrap"
|
||||
:margin-right "1rem"}} (pr-str key)]]))]))
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@
|
|||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
// TODO: Legacy sass variables. We should remove them in favor of DS tokens.
|
||||
$bp-max-1366: "(max-width: 1366px)";
|
||||
|
||||
$thumbnail-default-width: $s-252; // Default width
|
||||
$thumbnail-default-height: $s-168; // Default width
|
||||
|
||||
|
|
|
|||
54
frontend/src/app/main/ui/debug/icons_preview.cljs
Normal file
54
frontend/src/app/main/ui/debug/icons_preview.cljs
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
(ns app.main.ui.debug.icons-preview
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.ui.cursors :as c]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.timers :as ts]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc icons-gallery
|
||||
{::mf/wrap-props false
|
||||
::mf/private true}
|
||||
[]
|
||||
(let [entries (->> (seq (js/Object.entries i/default))
|
||||
(sort-by first))]
|
||||
[:section {:class (stl/css :gallery)}
|
||||
(for [[key val] entries]
|
||||
[:div {:class (stl/css :gallery-item)
|
||||
:key key
|
||||
:title key}
|
||||
val
|
||||
[:span key]])]))
|
||||
|
||||
(mf/defc cursors-gallery
|
||||
{::mf/wrap-props false
|
||||
::mf/private true}
|
||||
[]
|
||||
(let [rotation (mf/use-state 0)
|
||||
entries (->> (seq (js/Object.entries c/default))
|
||||
(sort-by first))]
|
||||
|
||||
(mf/with-effect []
|
||||
(ts/interval 100 #(reset! rotation inc)))
|
||||
|
||||
[:section {:class (stl/css :gallery)}
|
||||
(for [[key value] entries]
|
||||
(let [value (if (fn? value) (value @rotation) value)]
|
||||
[:div {:key key :class (stl/css :gallery-item)}
|
||||
[:div {:class (stl/css :cursor)
|
||||
:style {:background-image (-> value (str/replace #"(url\(.*\)).*" "$1"))
|
||||
:cursor value}}]
|
||||
|
||||
[:span (pr-str key)]]))]))
|
||||
|
||||
|
||||
(mf/defc icons-preview
|
||||
{::mf/wrap-props false}
|
||||
[]
|
||||
[:article {:class (stl/css :container)}
|
||||
[:h2 {:class (stl/css :title)} "Cursors"]
|
||||
[:& cursors-gallery]
|
||||
[:h2 {:class (stl/css :title)} "Icons"]
|
||||
[:& icons-gallery]])
|
||||
|
||||
51
frontend/src/app/main/ui/debug/icons_preview.scss
Normal file
51
frontend/src/app/main/ui/debug/icons_preview.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
row-gap: 1rem;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include bigTitleTipography;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
grid-template-rows: repeat(auto-fill, 120px);
|
||||
gap: 1rem;
|
||||
|
||||
--cell-size: 64px;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
row-gap: 0.5rem;
|
||||
grid-template-rows: var(--cell-size) 1fr;
|
||||
padding: 0.5rem;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
word-break: break-word;
|
||||
@include bodySmallTypography;
|
||||
|
||||
svg {
|
||||
width: var(--cell-size);
|
||||
height: var(--cell-size);
|
||||
fill: none;
|
||||
color: transparent;
|
||||
stroke: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.cursor {
|
||||
width: var(--cell-size);
|
||||
height: var(--cell-size);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
|
@ -86,8 +86,9 @@
|
|||
[:& palette {:layout layout
|
||||
:on-change-palette-size on-resize-palette}])
|
||||
|
||||
[:section.workspace-content
|
||||
[:section
|
||||
{:key (dm/str "workspace-" page-id)
|
||||
:class (stl/css :workspace-content)
|
||||
:ref node-ref}
|
||||
|
||||
[:section {:class (stl/css :workspace-viewport)}
|
||||
|
|
@ -203,9 +204,9 @@
|
|||
[:& (mf/provider ctx/current-page-id) {:value page-id}
|
||||
[:& (mf/provider ctx/components-v2) {:value components-v2?}
|
||||
[:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
|
||||
[:section#workspace-refactor {:class (stl/css :workspace)
|
||||
:style {:background-color background-color
|
||||
:touch-action "none"}}
|
||||
[:section {:class (stl/css :workspace)
|
||||
:style {:background-color background-color
|
||||
:touch-action "none"}}
|
||||
[:& context-menu]
|
||||
|
||||
(if ^boolean file-ready?
|
||||
|
|
|
|||
|
|
@ -6,21 +6,9 @@
|
|||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
// Work Sans
|
||||
@include font-face("worksans", "WorkSans-Regular", normal);
|
||||
@include font-face("worksans", "WorkSans-Medium", "500");
|
||||
@include font-face("worksans", "WorkSans-Bold", bold);
|
||||
|
||||
// Space mono
|
||||
@include font-face("robotomono", "RobotoMono-Regular", normal);
|
||||
|
||||
:global(:root) {
|
||||
--s-4: 0.25rem;
|
||||
--layer-indentation-size: calc(var(--s-4) * 6);
|
||||
}
|
||||
|
||||
.workspace {
|
||||
@extend .new-scrollbar;
|
||||
--layer-indentation-size: calc($s-4 * 6);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
|
|
@ -42,6 +30,10 @@
|
|||
}
|
||||
|
||||
.workspace-content {
|
||||
background-color: var(--color-canvas);
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
grid-area: viewport;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.coordinates
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.streams :as ms]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
|
|
@ -13,8 +14,9 @@
|
|||
(mf/defc coordinates
|
||||
[{:keys [colorpalette?]}]
|
||||
(let [coords (hooks/use-rxsub ms/mouse-position)]
|
||||
[:ul.coordinates {:class (when colorpalette? "color-palette-open")}
|
||||
[:span {:alt "x"}
|
||||
[:div {:class (stl/css-case :container-color-palette-open colorpalette?
|
||||
:container true)}
|
||||
[:span {:alt "x" :class (stl/css :coordinate)}
|
||||
(str "X: " (:x coords "-"))]
|
||||
[:span {:alt "y"}
|
||||
[:span {:alt "y" :class (stl/css :coordinate)}
|
||||
(str "Y: " (:y coords "-"))]]))
|
||||
|
|
|
|||
33
frontend/src/app/main/ui/workspace/coordinates.scss
Normal file
33
frontend/src/app/main/ui/workspace/coordinates.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
// 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
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
$width-settings-bar: 256px;
|
||||
|
||||
.container {
|
||||
background-color: var(--db-primary);
|
||||
border-radius: $br-4;
|
||||
bottom: 0px;
|
||||
padding: $s-2 $s-8;
|
||||
position: fixed;
|
||||
right: calc(#{$width-settings-bar} + #{$s-24});
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: bottom 0.5s;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.container-color-palette-open {
|
||||
bottom: $s-64;
|
||||
}
|
||||
|
||||
.coordinate {
|
||||
color: var(--df-primary);
|
||||
font-size: $fs-12;
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
calculate-padding-left (+ rulers-width (or left-sidebar-size min-left-sidebar-width) left-padding 1)]
|
||||
|
||||
#js {"paddingLeft" (dm/str calculate-padding-left "px")
|
||||
"paddingRight" "calc(var(--s-4) * 70)"}))
|
||||
"paddingRight" "280px"}))
|
||||
|
||||
(mf/defc palette
|
||||
[{:keys [layout on-change-palette-size]}]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.viewport
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.colors :as clr]
|
||||
[app.common.data :as d]
|
||||
|
|
@ -276,9 +277,9 @@
|
|||
(hooks/setup-shortcuts node-editing? drawing-path? text-editing? grid-editing?)
|
||||
(hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
|
||||
|
||||
[:div.viewport {:style #js {"--zoom" zoom} :data-testid "viewport"}
|
||||
[:div {:class (stl/css :viewport) :style #js {"--zoom" zoom} :data-testid "viewport"}
|
||||
[:& top-bar/top-bar {:layout layout}]
|
||||
[:div.viewport-overlays
|
||||
[:div {:class (stl/css :viewport-overlays)}
|
||||
;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap
|
||||
;; inside a foreign object "dummy" so this awkward behaviour is take into account
|
||||
[:svg {:style {:top 0 :left 0 :position "fixed" :width "100%" :height "100%" :opacity (when-not (dbg/enabled? :html-text) 0)}}
|
||||
|
|
@ -308,8 +309,9 @@
|
|||
:layout layout
|
||||
:viewport-ref viewport-ref}])]
|
||||
|
||||
[:svg.render-shapes
|
||||
[:svg
|
||||
{:id "render"
|
||||
:class (stl/css :render-shapes)
|
||||
:xmlns "http://www.w3.org/2000/svg"
|
||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
:xmlns:penpot "https://penpot.app/xmlns"
|
||||
|
|
@ -359,7 +361,7 @@
|
|||
:key (str "viewport" page-id)
|
||||
:view-box (utils/format-viewbox vbox)
|
||||
:ref on-viewport-ref
|
||||
:class (dm/str @cursor (when drawing-tool " drawing"))
|
||||
:class (dm/str @cursor (when drawing-tool " drawing") " " (stl/css :viewport-controls))
|
||||
:style {:touch-action "none"}
|
||||
:fill "none"
|
||||
|
||||
|
|
|
|||
49
frontend/src/app/main/ui/workspace/viewport.scss
Normal file
49
frontend/src/app/main/ui/workspace/viewport.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
// 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
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.viewport {
|
||||
cursor: none;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1 / span 2;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.viewport-controls {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.render-shapes {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.viewport-overlays {
|
||||
cursor: initial;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
.pixel-overlay {
|
||||
left: 0;
|
||||
pointer-events: initial;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.viewport.presence
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.refs :as refs]
|
||||
|
|
@ -40,15 +41,15 @@
|
|||
(dm/str (str/slice fullname 0 12) "...")
|
||||
fullname)]
|
||||
|
||||
[:g.multiuser-cursor {:transform transform}
|
||||
[:g {:class (stl/css :multiuser-cursor) :transform transform}
|
||||
[:path {:fill bg-color :d pointer-path}]
|
||||
[:g {:transform "translate(17 -10)"}
|
||||
[:foreignObject {:x -0.3
|
||||
:y -12.5
|
||||
:width 300
|
||||
:height 120}
|
||||
[:div.profile-name {:style {:background-color bg-color
|
||||
:color fg-color}}
|
||||
[:div {:class (stl/css :profile-name)
|
||||
:style {:background-color bg-color :color fg-color}}
|
||||
fullname]]]]))
|
||||
|
||||
(mf/defc active-cursors
|
||||
|
|
@ -74,8 +75,3 @@
|
|||
:zoom zoom
|
||||
:profile (get users (:profile-id session))
|
||||
:key (dm/str (:id session))}])))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
18
frontend/src/app/main/ui/workspace/viewport/presence.scss
Normal file
18
frontend/src/app/main/ui/workspace/viewport/presence.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@use "refactor/common-refactor.scss" as *;
|
||||
|
||||
.profile-name {
|
||||
width: fit-content;
|
||||
font-family: worksans;
|
||||
padding: 2px 12px;
|
||||
border-radius: $br-4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
font-size: $fs-12;
|
||||
line-height: $lh-150;
|
||||
}
|
||||
|
||||
.multiuser-cursor {
|
||||
z-index: 10000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
:pattern-units "userSpaceOnUse"}
|
||||
[:path {:d "M 1 0 L 0 0 0 1"
|
||||
:style {:fill "none"
|
||||
:stroke (if (dbg/enabled? :pixel-grid) "red" "var(--color-info)")
|
||||
:stroke (if (dbg/enabled? :pixel-grid) "red" "var(--status-color-info-500)")
|
||||
:stroke-opacity (if (dbg/enabled? :pixel-grid) 1 "0.2")
|
||||
:stroke-width (str (/ 1 zoom))}}]]]
|
||||
[:rect {:x (:x vbox)
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@
|
|||
(ifn? type) (type (:type error))
|
||||
:else false))]
|
||||
(when show?
|
||||
[:ul.form-errors
|
||||
[:ul
|
||||
[:li {:key (:code error)} (tr (:message error))]])))
|
||||
|
||||
(defn error-class
|
||||
|
|
|
|||
|
|
@ -4417,13 +4417,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"animate.css@npm:^4.1.1":
|
||||
version: 4.1.1
|
||||
resolution: "animate.css@npm:4.1.1"
|
||||
checksum: 10c0/28fcf5a5f502e4c12186846d22aa1cd63b835955160a97116930c78bff8a89135aa5c57f94010252a29456ada7cfc8ed8791cac02521ec6402befaf883937159
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"ansi-colors@npm:^1.0.1":
|
||||
version: 1.1.0
|
||||
resolution: "ansi-colors@npm:1.1.0"
|
||||
|
|
@ -7922,7 +7915,6 @@ __metadata:
|
|||
"@storybook/react-vite": "npm:^7.6.17"
|
||||
"@storybook/testing-library": "npm:^0.2.2"
|
||||
"@types/node": "npm:^20.11.20"
|
||||
animate.css: "npm:^4.1.1"
|
||||
autoprefixer: "npm:^10.4.19"
|
||||
compression: "npm:^1.7.4"
|
||||
concurrently: "npm:^8.2.2"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue