jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add generic node tailwind constants classes (#614)

Browse source 
Improves code verbosity and organization of Tailwind classes.
This commit is contained in:
anovazzi1 2023-07-05 21:01:04 -03:00 • committed by GitHub
commit 5c6f35b4ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 402 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -82,30 +82,30 @@ export default function GenericNode({
<div
className={classNames(
selected ? "border border-ring" : "border",
"prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background"
"generic-node-div"
)}
>
<div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 ">
<div className="flex w-full items-center truncate">
<div className="generic-node-div-title">
<div className="generic-node-title-arrangement">
<Icon
strokeWidth={1.5}
className="h-10 w-10 rounded p-1"
className="generic-node-icon"
style={{
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
}}
/>
<div className="ml-2 truncate">
<div className="generic-node-tooltip-div">
<ShadTooltip
delayDuration={1500}
content={data.node.display_name}
>
<div className="ml-2 truncate text-primary">
<div className="generic-node-tooltip-div text-primary">
{data.node.display_name}
</div>
</ShadTooltip>
</div>
</div>
<div className="flex gap-3">
<div className="round-button-div">
<button
className="relative"
onClick={(event) => {
@ -114,14 +114,14 @@ export default function GenericNode({
}}
></button>
</div>
<div className="flex gap-3">
<div className="round-button-div">
<div>
<Tooltip
title={
!validationStatus ? (
"Validating..."
) : (
<div className="max-h-96 overflow-auto">
<div className="generic-node-validation-div">
{validationStatus.params ||
""
.split("\n")
@ -130,29 +130,29 @@ export default function GenericNode({
)
}
>
<div className="relative top-[3px] h-5 w-5">
<div className="generic-node-status-position">
<div
className={classNames(
validationStatus && validationStatus.valid
? "h-4 w-4 rounded-full bg-status-green opacity-100"
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
? "green-status"
: "status-build-animation",
"status-div"
)}
></div>
<div
className={classNames(
validationStatus && !validationStatus.valid
? "h-4 w-4 rounded-full bg-status-red opacity-100"
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
? "red-status"
: "status-build-animation",
"status-div"
)}
></div>
<div
className={classNames(
!validationStatus || isBuilding
? "h-4 w-4 rounded-full bg-status-yellow opacity-100"
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
? "yellow-status"
: "status-build-animation",
"status-div"
)}
></div>
</div>
@ -161,8 +161,8 @@ export default function GenericNode({
</div>
</div>
<div className="h-full w-full py-5 text-foreground">
<div className="w-full px-5 pb-3 text-sm text-muted-foreground">
<div className="generic-node-desc">
<div className="generic-node-desc-text">
{data.node.description}
</div>
@ -221,7 +221,7 @@ export default function GenericNode({
<div
className={classNames(
Object.keys(data.node.template).length < 1 ? "hidden" : "",
"flex w-full justify-center"
"flex-max-width justify-center"
)}
>
{" "}

10
src/frontend/src/alerts/error/index.tsx
View file

@ -39,19 +39,19 @@ export default function ErrorAlert({
removeAlert(id);
}, 500);
}}
className="mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl"
className="error-build-message"
>
<div className="flex">
<div className="flex-shrink-0">
<XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
<XCircle className="error-build-message-circle" aria-hidden="true" />
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-error-foreground">
<h3 className="error-build-foreground">
{title}
</h3>
{list.length !== 0 ? (
<div className="mt-2 text-sm text-error-foreground">
<ul className="list-disc space-y-1 pl-5">
<div className="error-build-message-div">
<ul className="error-build-message-list">
{list.map((item, index) => (
<li key={index}>{item}</li>
))}

6
src/frontend/src/alerts/success/index.tsx
View file

@ -34,17 +34,17 @@ export default function SuccessAlert({
setShow(false);
removeAlert(id);
}}
className="mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl"
className="success-alert"
>
<div className="flex">
<div className="flex-shrink-0">
<CheckCircle2
className="h-5 w-5 text-status-green"
className="success-alert-icon"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-success-foreground">
<p className="success-alert-message">
{title}
</p>
</div>

4
src/frontend/src/components/EditFlowSettingsComponent/index.tsx
View file

@ -44,10 +44,10 @@ export const EditFlowSettings: React.FC<InputProps> = ({
return (
<>
<Label>
<div className="flex justify-between">
<div className="edit-flow-arrangement">
<span className="font-medium">Name</span>{" "}
{isMaxLength && (
<span className="ml-10 animate-pulse text-status-red">
<span className="edit-flow-span">
Character limit reached
</span>
)}

36
src/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -18,13 +18,13 @@ export default function ExtraSidebar() {
<aside
className={` ${
isStackedOpen ? "w-52" : "w-0 "
} flex flex-shrink-0 flex-col overflow-hidden border-r transition-all duration-500`}
} unused-side-bar-aside`}
>
<div className="flex h-full w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide">
<div className="flex w-full flex-grow flex-col">
<div className="unused-side-bar-arrangement">
<div className="unused-side-bar-division">
{extraNavigation.options ? (
<div className="p-4">
<nav className="flex-1 space-y-1">
<nav className="unused-side-bar-nav">
{extraNavigation.options.map((item) =>
!item.children ? (
<div key={item.name}>
@ -32,17 +32,17 @@ export default function ExtraSidebar() {
to={item.href}
className={classNames(
item.href.split("/")[2] === current[4]
? "bg-muted text-foreground"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
"group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium"
? "unused-side-bar-link-colors-true"
: "unused-side-bar-link-colors-false",
"unused-side-bar-link"
)}
>
<item.icon
className={classNames(
item.href.split("/")[2] === current[4]
? "text-ring"
: "text-ring group-hover:text-accent-foreground",
"mr-3 h-6 w-6 flex-shrink-0"
: "unused-side-bar-icon-false",
"unused-side-bar-icon"
)}
/>
{item.name}
@ -59,20 +59,20 @@ export default function ExtraSidebar() {
<Disclosure.Button
className={classNames(
item.href.split("/")[2] === current[4]
? "bg-muted text-foreground"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
"group flex w-full items-center rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-1 focus:ring-ring"
? "unused-side-bar-link-colors-true"
: "unused-side-bar-link-colors-false",
"unused-side-bar-disclosure"
)}
>
<item.icon
className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-accent-foreground"
className="unused-side-bar-disclosure-icon"
aria-hidden="true"
/>
<span className="flex-1">{item.name}</span>
<svg
className={classNames(
open ? "rotate-90 text-ring" : "text-ring",
"transition-rotate ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground"
open ? "unused-side-bar-svg-true" : "text-ring",
"unused-side-bar-svg"
)}
viewBox="0 0 20 20"
aria-hidden="true"
@ -90,9 +90,9 @@ export default function ExtraSidebar() {
to={subItem.href}
className={classNames(
subItem.href.split("/")[3] === current[5]
? "bg-muted text-foreground"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
? "unused-side-bar-link-colors-true"
: "unused-side-bar-link-colors-false",
"unused-side-bar-disclosure-panel"
)}
>
{subItem.name}

18
src/frontend/src/components/cardComponent/index.tsx
View file

@ -28,24 +28,24 @@ export const CardComponent = ({
return (
<Card className="group">
<CardHeader>
<CardTitle className="flex w-full items-center gap-4">
<CardTitle className="card-component-title-display">
<span
className={
"flex h-7 w-7 items-center justify-center rounded-full text-2xl " +
"card-component-image " +
gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
}
></span>
<span className="inline-block w-full flex-1 break-words truncate-doubleline">
<span className="card-component-title-size">
{flow.name}
</span>
{onDelete && (
<button className="flex self-start" onClick={onDelete}>
<Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
<button className="card-component-delete-button" onClick={onDelete}>
<Trash2 className="card-component-delete-icon" />
</button>
)}
</CardTitle>
<CardDescription className="pb-2 pt-2">
<div className="truncate-doubleline">
<CardDescription className="card-component-desc">
<div className="card-component-desc-text">
{flow.description}
{/* {flow.description} */}
</div>
@ -53,8 +53,8 @@ export const CardComponent = ({
</CardHeader>
<CardFooter>
<div className="flex w-full items-end justify-between gap-2">
<div className="flex flex-wrap gap-2">
<div className="card-component-footer-arrangement">
<div className="card-component-footer">
{/* <Badge variant="secondary">Agent</Badge>
<Badge variant="secondary">
<div className="w-3">

9
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -30,10 +30,10 @@ export default function CodeAreaComponent({
return (
<div
className={
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
disabled ? "code-area-component" : "w-full"
}
>
<div className="flex w-full items-center">
<div className="code-area-input-positioning">
<span
onClick={() => {
openPopUp(
@ -69,10 +69,7 @@ export default function CodeAreaComponent({
}}
>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className="ml-3 h-6 w-6 hover:text-accent-foreground"
/>
<ExternalLink strokeWidth={1.5} className="code-area-external-link" />
)}
</button>
</div>

24
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -38,20 +38,20 @@ export default function Dropdown({
<Listbox.Button
className={
editNode
? "border-1 input-edit-node relative pr-8"
: "input-primary py-2 pl-3 pr-10 text-left"
? "dropdown-component-outline"
: "dropdown-component-false-outline"
}
>
<span className="block w-full truncate bg-background">
<span className="dropdown-component-display">
{internalValue}
</span>
<span
className={
"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
"dropdown-component-arrow"
}
>
<ChevronsUpDown
className="h-5 w-5 text-muted-foreground"
className="dropdown-component-arrow-color"
aria-hidden="true"
/>
</span>
@ -67,8 +67,8 @@ export default function Dropdown({
<Listbox.Options
className={classNames(
editNode
? "z-10 mt-1 max-h-60 w-[215px] overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
: "nowheel overflow-y z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
? "dropdown-component-true-options "
: "dropdown-component-false-options ",
apiModal ? "mb-2 w-[250px]" : "absolute"
)}
>
@ -79,8 +79,8 @@ export default function Dropdown({
classNames(
active ? " bg-accent" : "",
editNode
? "relative cursor-default select-none py-0.5 pl-3 pr-12"
: "relative cursor-default select-none py-2 pl-3 pr-9"
? "dropdown-component-false-option"
: "dropdown-component-true-option"
)
}
value={option}
@ -100,14 +100,14 @@ export default function Dropdown({
<span
className={classNames(
active ? "text-background " : "",
"absolute inset-y-0 right-0 flex items-center pr-4"
"dropdown-component-choosal"
)}
>
<Check
className={
active
? "h-5 w-5 text-black"
: "h-5 w-5 text-black"
? "dropdown-component-check-icon"
: "dropdown-component-check-icon"
}
aria-hidden="true"
/>

2
src/frontend/src/components/floatComponent/index.tsx
View file

@ -32,7 +32,7 @@ export default function FloatComponent({
return (
<div
className={
"w-full " + (disabled ? "pointer-events-none cursor-not-allowed" : "")
"w-full " + (disabled ? "float-component-pointer" : "")
}
>
<input

16
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -47,19 +47,19 @@ export const MenuBar = ({ flows, tabId }) => {
let current_flow = flows.find((flow) => flow.id === tabId);
return (
<div className="flex items-center gap-2">
<div className="round-button-div">
<Link to="/">
<ChevronLeft className="w-4" />
</Link>
<div className="flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium">
<div className="header-menu-bar">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
className="flex max-w-[200px] items-center gap-2"
className="header-menu-bar-display"
variant="primary"
size="sm"
>
<div className="flex-1 truncate">{current_flow.name}</div>
<div className="header-menu-flow-name">{current_flow.name}</div>
<ChevronDown className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
@ -71,7 +71,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Plus className="mr-2 h-4 w-4" />
<Plus className="header-menu-options" />
New
</DropdownMenuItem>
<DropdownMenuItem
@ -80,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Settings2 className="mr-2 h-4 w-4 " />
<Settings2 className="header-menu-options " />
Settings
</DropdownMenuItem>
<DropdownMenuItem
@ -89,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Undo className="mr-2 h-4 w-4 " />
<Undo className="header-menu-options " />
Undo
</DropdownMenuItem>
<DropdownMenuItem
@ -98,7 +98,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Redo className="mr-2 h-4 w-4 " />
<Redo className="header-menu-options " />
Redo
</DropdownMenuItem>
<DropdownMenuSeparator />

32
src/frontend/src/components/headerComponent/index.tsx
View file

@ -36,8 +36,8 @@ export default function Header() {
fetchStars();
}, []);
return (
<div className="flex h-12 w-full items-center justify-between border-b bg-muted">
<div className="flex w-96 items-center justify-start gap-2">
<div className="header-arrangement">
<div className="header-start-display">
<Link to="/">
<span className="ml-4 text-2xl">⛓️</span>
</Link>
@ -45,7 +45,7 @@ export default function Header() {
<MenuBar flows={flows} tabId={tabId} />
)}
</div>
<div className="flex items-center gap-2">
<div className="round-button-div">
<Link to="/">
<Button
className="gap-2"
@ -69,17 +69,17 @@ export default function Header() {
</Button>
</Link>
</div>
<div className="flex w-96 justify-end px-2">
<div className="ml-auto mr-2 flex items-center gap-5">
<div className="header-end-division">
<div className="header-end-display">
<a
href="https://github.com/logspace-ai/langflow"
target="_blank"
rel="noreferrer"
className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
className="header-github-link"
>
<FaGithub className="mr-2 h-5 w-5" />
Star
<div className="-mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm">
<div className="header-github-display">
{stars}
</div>
</a>
@ -89,7 +89,7 @@ export default function Header() {
rel="noreferrer"
className="text-muted-foreground"
>
<FaTwitter className="h-5 w-5 hover:text-accent-foreground" />
<FaTwitter className="side-bar-button-size" />
</a>
<a
href="https://discord.gg/EqksyE2EX9"
@ -97,24 +97,24 @@ export default function Header() {
rel="noreferrer"
className="text-muted-foreground"
>
<FaDiscord className="h-5 w-5 hover:text-accent-foreground" />
<FaDiscord className="side-bar-button-size" />
</a>
<Separator orientation="vertical" />
<button
className="text-muted-foreground hover:text-accent-foreground "
className="extra-side-bar-save-disable"
onClick={() => {
setDark(!dark);
}}
>
{dark ? (
<SunIcon className="h-5 w-5" />
<SunIcon className="side-bar-button-size" />
) : (
<MoonIcon className="h-5 w-5" />
<MoonIcon className="side-bar-button-size" />
)}
</button>
<button
className="relative text-muted-foreground hover:text-accent-foreground"
className="extra-side-bar-save-disable relative"
onClick={(event: React.MouseEvent<HTMLElement>) => {
setNotificationCenter(false);
const { top, left } = (
@ -128,15 +128,15 @@ export default function Header() {
>
<AlertDropdown />
</div>
<div className="fixed left-0 top-0 h-screen w-screen"></div>
<div className="header-notifications-box"></div>
</>
);
}}
>
{notificationCenter && (
<div className="absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive"></div>
<div className="header-notifications"></div>
)}
<Bell className="h-5 w-5" aria-hidden="true" />
<Bell className="side-bar-button-size" aria-hidden="true" />
</button>
</div>
</div>

14
src/frontend/src/components/inputComponent/index.tsx
View file

@ -32,7 +32,7 @@ export default function InputComponent({
<div
className={
disabled
? "pointer-events-none relative cursor-not-allowed"
? "input-component-div"
: "relative"
}
>
@ -61,8 +61,8 @@ export default function InputComponent({
<button
className={classNames(
editNode
? "absolute inset-y-0 right-0 items-center pr-2 text-muted-foreground"
: "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground"
? "input-component-true-button"
: "input-component-false-button"
)}
onClick={() => {
setPwdVisible(!pwdVisible);
@ -78,8 +78,8 @@ export default function InputComponent({
stroke="currentColor"
className={classNames(
editNode
? "absolute bottom-0.5 right-2 h-5 w-5"
: "absolute bottom-2 right-3 h-5 w-5"
? "input-component-true-svg"
: "input-component-false-svg"
)}
>
<path
@ -97,8 +97,8 @@ export default function InputComponent({
stroke="currentColor"
className={classNames(
editNode
? "absolute bottom-0.5 right-2 h-5 w-5"
: "absolute bottom-2 right-3 h-5 w-5"
? "input-component-true-svg"
: "input-component-false-svg"
)}
>
<path

4
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -94,10 +94,10 @@ export default function InputFileComponent({
return (
<div
className={
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
disabled ? "input-component-div" : "w-full"
}
>
<div className="flex w-full items-center">
<div className="input-file-component">
<span
onClick={handleButtonClick}
className={

294
src/frontend/src/index.css
View file

@ -176,9 +176,15 @@ The cursor: default; property value restores the browser's default cursor style
.extra-side-bar-save-disable {
@apply text-muted-foreground
}
.extra-side-bar-save-disable:hover {
@apply hover:text-accent-foreground
}
.side-bar-button-size {
@apply h-5 w-5
}
.side-bar-button-size:hover {
@apply hover:text-accent-foreground
}
.side-bar-buttons-arrangement {
@apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2
}
@ -298,4 +304,292 @@ The cursor: default; property value restores the browser's default cursor style
.community-pages-flows-panel {
@apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
}
.generic-node-div {
@apply relative flex w-96 flex-col justify-center rounded-lg bg-background
}
.generic-node-div-title {
@apply flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4
}
.generic-node-title-arrangement {
@apply flex-max-width items-center truncate
}
.generic-node-icon {
@apply h-10 w-10 rounded p-1
}
.generic-node-tooltip-div {
@apply ml-2 truncate
}
.generic-node-validation-div {
@apply max-h-96 overflow-auto
}
.generic-node-status-position {
@apply relative top-[3px] h-5 w-5
}
.generic-node-status-animation {
@apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
}
.generic-node-status {
@apply h-4 w-4 rounded-full opacity-100
}
.green-status {
@apply generic-node-status bg-status-green
}
.red-status {
@apply generic-node-status bg-status-red
}
.yellow-status {
@apply generic-node-status bg-status-yellow
}
.status-build-animation {
@apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
}
.status-div {
@apply absolute w-4 duration-200 ease-in-out
}
.status-div:hover {
@apply hover:text-accent-foreground hover:transition-all
}
.generic-node-desc {
@apply h-full w-full py-5 text-foreground
}
.generic-node-desc-text {
@apply w-full px-5 pb-3 text-sm text-muted-foreground
}
.alert-icon {
@apply h-5 w-5
}
.alert-font-size {
@apply text-sm font-medium
}
.error-build-message {
@apply mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl
}
.error-build-message-circle {
@apply text-status-red alert-icon
}
.error-build-text {
@apply text-error-foreground
}
.error-build-foreground {
@apply error-build-text alert-font-size
}
.error-build-message-div {
@apply mt-2 text-sm error-build-text
}
.error-build-message-list {
@apply list-disc space-y-1 pl-5
}
.success-alert {
@apply mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl
}
.success-alert-icon {
@apply alert-icon text-status-green
}
.success-alert-message {
@apply alert-font-size text-success-foreground
}
.card-component-title-display {
@apply round-button-div flex-max-width
}
.card-component-image {
@apply flex h-7 w-7 items-center justify-center rounded-full text-2xl
}
.card-component-title-size {
@apply inline-block w-full flex-1 break-words truncate-doubleline
}
.card-component-delete-button {
@apply flex self-start
}
.card-component-delete-icon {
@apply h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100
}
.card-component-desc {
@apply pb-2 pt-2
}
.card-component-desc-text {
@apply truncate-doubleline
}
.card-component-footer-arrangement {
@apply flex-max-width items-end justify-between gap-2
}
.card-component-footer {
@apply flex flex-wrap gap-2
}
.unused-side-bar-aside {
@apply flex flex-shrink-0 flex-col overflow-hidden border-r transition-all duration-500
}
.unused-side-bar-arrangement {
@apply flex h-full w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide
}
.unused-side-bar-division {
@apply flex-max-width flex-grow flex-col
}
.unused-side-bar-nav {
@apply flex-1 space-y-1
}
.unused-side-bar-link {
@apply flex-max-width items-center rounded-md py-2 pl-2 text-sm font-medium
}
.unused-side-bar-link-colors-true {
@apply bg-muted text-foreground
}
.unused-side-bar-link-colors-false {
@apply bg-background text-muted-foreground hover:bg-muted hover:text-foreground
}
.unused-side-bar-icon {
@apply mr-3 flex-shrink-0 h-6 w-6
}
.unused-side-bar-icon-false {
@apply text-ring group-hover:text-accent-foreground
}
.unused-side-bar-disclosure {
@apply unused-side-bar-link pr-1 text-left
}
.unused-side-bar-disclosure:focus {
@apply focus:outline-none focus:ring-1 focus:ring-ring
}
.unused-side-bar-disclosure-icon {
@apply unused-side-bar-icon text-ring group-hover:text-accent-foreground
}
.unused-side-bar-svg-true {
@apply text-ring rotate-90
}
.unused-side-bar-svg {
@apply ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground
}
.unused-side-bar-disclosure-panel {
@apply flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium
}
.code-area-component {
@apply pointer-events-none w-full cursor-not-allowed
}
.code-area-input-positioning {
@apply flex-max-width items-center
}
.code-area-external-link {
@apply w-6 h-6 ml-3
}
.code-area-external-link:hover {
@apply hover:text-accent-foreground
}
.dropdown-component-outline {
@apply border-1 input-edit-node relative pr-8
}
.dropdown-component-false-outline {
@apply input-primary py-2 pl-3 pr-10 text-left
}
.dropdown-component-display {
@apply block w-full truncate bg-background
}
.dropdown-component-arrow {
@apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2
}
.dropdown-component-arrow-color {
@apply h-5 w-5 extra-side-bar-save-disable
}
.dropdown-component-options {
@apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm
}
.dropdown-component-true-options {
@apply dropdown-component-options w-[215px]
}
.dropdown-component-false-options {
@apply dropdown-component-options w-full
}
.dropdown-component-option {
@apply relative cursor-default select-none
}
.dropdown-component-false-option {
@apply dropdown-component-option py-0.5 pl-3 pr-12
}
.dropdown-component-true-option {
@apply dropdown-component-option py-2 pl-3 pr-9
}
.dropdown-component-choosal {
@apply absolute inset-y-0 right-0 flex items-center pr-4
}
.dropdown-component-check-icon {
@apply h-5 w-5 text-black
}
.edit-flow-arrangement {
@apply flex justify-between
}
.edit-flow-span {
@apply ml-10 animate-pulse text-status-red
}
.float-component-pointer {
@apply pointer-events-none cursor-not-allowed
}
.header-menu-bar {
@apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium
}
.header-menu-bar-display {
@apply flex max-w-[200px] items-center gap-2
}
.header-menu-flow-name {
@apply flex-1 truncate
}
.header-menu-options {
@apply mr-2 h-4 w-4
}
.header-arrangement {
@apply flex-max-width h-12 items-center justify-between border-b bg-muted
}
.header-start-display {
@apply flex w-96 items-center justify-start gap-2
}
.header-end-division {
@apply flex w-96 justify-end px-2
}
.header-end-display {
@apply ml-auto mr-2 flex items-center gap-5
}
.header-github-link {
@apply inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
}
.header-github-display {
@apply -mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm
}
.header-notifications-box {
@apply fixed left-0 top-0 h-screen w-screen
}
.header-notifications {
@apply absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive
}
.input-component-div {
@apply pointer-events-none relative cursor-not-allowed
}
.input-component-button {
@apply absolute inset-y-0 right-0 items-center text-muted-foreground
}
.input-component-true-button {
@apply input-component-button pr-2
}
.input-component-false-button {
@apply input-component-button px-4
}
.input-component-true-svg {
@apply absolute bottom-0.5 right-2 side-bar-button-size
}
.input-component-false-svg {
@apply absolute bottom-2 right-3 side-bar-button-size
}
.input-file-component {
@apply flex-max-width items-center
}
}