Packages
corex
0.1.0-alpha.27
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
priv/design/components/floating-panel.css
@import "../main.css";
@import "./scrollbar.css";
@layer components {
.floating-panel [data-scope="floating-panel"][data-part="trigger"] {
@apply ui-trigger;
}
.floating-panel
[data-scope="floating-panel"][data-part="trigger"][data-state="open"]
[data-closed] {
display: none;
}
.floating-panel
[data-scope="floating-panel"][data-part="trigger"][data-state="closed"]
[data-open] {
display: none;
}
.floating-panel [data-part="title"] {
@apply ui-label;
}
.floating-panel [data-scope="floating-panel"][data-part="positioner"] {
z-index: 50;
}
.floating-panel
[data-scope="floating-panel"][data-part="positioner"]:has(
[data-scope="floating-panel"][data-part="content"][data-state="closed"]
) {
display: none;
}
.floating-panel
[data-scope="floating-panel"][data-part="positioner"]:has(
[data-scope="floating-panel"][data-part="content"][data-topmost]
) {
z-index: 999999;
}
.floating-panel [data-scope="floating-panel"][data-part="content"] {
display: flex;
flex-direction: column;
z-index: var(--z-index);
position: relative;
min-height: var(--spacing-ui);
box-shadow: var(--shadow-ui);
&[data-topmost] {
z-index: 999999;
}
&[data-behind] {
opacity: 0.8;
}
&:focus-visible {
outline: 2px solid var(--color-ui--text);
outline-offset: 0;
border-radius: var(--radius-ui);
}
}
.floating-panel [data-scope="floating-panel"][data-part="stage-trigger"],
.floating-panel [data-scope="floating-panel"][data-part="close-trigger"] {
@apply ui-trigger ui-trigger--square ui-trigger--sm;
min-height: var(--spacing-mini);
}
[data-scope="floating-panel"][data-part="body"] {
@apply scrollbar scrollbar--sm;
position: relative;
overflow: auto;
flex: 1 1 auto;
min-height: fit-content;
height: var(--height);
padding: var(--spacing-ui-padding);
background-color: var(--color-root);
border-radius: 0 0 var(--radius-ui) var(--radius-ui);
border: 1px solid var(--color-ui--border);
border-block-start: 0;
& p {
margin-block: 0;
}
}
[data-scope="floating-panel"][data-part="header"] {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: var(--spacing-micro-padding);
gap: var(--spacing-mini-gap);
}
[data-scope="floating-panel"][data-part="drag-trigger"] {
background-color: var(--color-layer);
border: 1px solid var(--color-ui--border);
border-radius: var(--radius-ui) var(--radius-ui) 0 0;
&:focus-visible {
outline: none;
}
}
[data-scope="floating-panel"][data-part="control"] {
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: var(--spacing-mini-gap);
}
[data-scope="floating-panel"][data-part="resize-trigger"] {
&[data-axis="n"],
&[data-axis="s"] {
height: 6px;
max-width: 90%;
}
&[data-axis="e"],
&[data-axis="w"] {
width: 6px;
max-height: 90%;
}
&[data-axis="ne"],
&[data-axis="nw"],
&[data-axis="se"],
&[data-axis="sw"] {
width: 10px;
height: 10px;
}
}
}