mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Timothy Lau
6160773f30
## Summary This PR addresses a pending TODO comment left in https://github.com/facebook/react/pull/34499 https://github.com/facebook/react/blame/eb2f784e752ba690f032db4c3d87daac77a5a2aa/compiler/apps/playground/components/Editor/ConfigEditor.tsx#L37 This change removes the temporary workaround and replaces it with `<Activity>`, as originally intended. ## How did you test this change? - Updated the component to use `<Activity>` directly - Verified the editor renders correctly in both development and production builds. - The `<Activity>` UI updates as expected. https://github.com/user-attachments/assets/ce976123-da59-4579-b063-b308a9167b21
144 lines
2.8 KiB
CSS
144 lines
2.8 KiB
CSS
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
@font-face {
|
|
font-family: "Source Code Pro";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/fonts/Source-Code-Pro-Regular.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Optimistic Display";
|
|
src: url("/fonts/Optimistic_Display_W_Lt.woff2") format("woff2");
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Optimistic Display";
|
|
src: url("/fonts/Optimistic_Display_W_Md.woff2") format("woff2");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Optimistic Display";
|
|
src: url("/fonts/Optimistic_Display_W_Bd.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Chrome, Safari, Opera */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none; /* IE, Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
}
|
|
|
|
::view-transition-old(.slide-in) {
|
|
animation-name: slideOutLeft;
|
|
}
|
|
::view-transition-new(.slide-in) {
|
|
animation-name: slideInLeft;
|
|
}
|
|
::view-transition-group(.slide-in) {
|
|
z-index: 1;
|
|
}
|
|
::view-transition-old(.slide-out) {
|
|
animation-name: slideOutLeft;
|
|
}
|
|
::view-transition-new(.slide-out) {
|
|
animation-name: slideInLeft;
|
|
}
|
|
::view-transition-group(.slide-out) {
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes slideOutLeft {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
@keyframes slideInLeft {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
::view-transition-old(.container),
|
|
::view-transition-new(.container) {
|
|
height: 100%;
|
|
}
|
|
|
|
::view-transition-old(.accordion-container),
|
|
::view-transition-new(.accordion-container) {
|
|
height: 100%;
|
|
object-fit: none;
|
|
object-position: left;
|
|
}
|
|
|
|
::view-transition-old(.tab-highlight),
|
|
::view-transition-new(.tab-highlight) {
|
|
height: 100%;
|
|
}
|
|
::view-transition-group(.tab-text) {
|
|
z-index: 1;
|
|
}
|
|
|
|
::view-transition-old(.expand-accordion),
|
|
::view-transition-new(.expand-accordion) {
|
|
width: auto;
|
|
}
|
|
::view-transition-group(.expand-accordion) {
|
|
overflow: clip;
|
|
}
|
|
|
|
/**
|
|
* For some reason, the original Monaco editor is still visible to the
|
|
* left of the DiffEditor. This is a workaround for better visual clarity.
|
|
*/
|
|
.monaco-diff-editor .editor.original{
|
|
visibility: hidden !important;
|
|
}
|