Packages
corex
0.1.0-alpha.7
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/layout.css
@import "../main.css";
@import "./scrollbar.css";
@layer components {
.layout {
@apply scrollbar;
display: flex;
flex-direction: column;
min-height: 100vh;
color: var(--color-root--text);
background: var(--color-root);
}
.layout__header {
position: sticky;
top: 0;
z-index: 10;
height: var(--spacing-ui-lg);
background: var(--color-layer);
color: var(--color-layer--text);
border-bottom: 1px solid var(--color-layer--border);
display: flex;
align-items: center;
}
.layout__header__content,
.layout__footer__content,
.layout__side__content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-inline: auto;
width: 100%;
padding-inline: var(--spacing-ui-padding);
padding-block: var(--spacing-ui-padding-sm);
}
.layout__footer {
background: var(--color-layer);
color: var(--color-layer--text);
border-bottom: 1px solid var(--color-layer--border);
display: flex;
align-items: center;
min-height: var(--spacing-ui-lg);
}
.layout__wrapper {
display: flex;
flex: 1;
width: 100%;
justify-content: center;
margin-inline: auto;
background-color: var(--color-root);
position: relative;
}
.layout__side,
.layout__aside {
@apply scrollbar scrollbar--sm;
position: sticky;
top: calc(var(--spacing-ui-lg));
align-self: flex-start;
background: var(--color-layer);
color: var(--color-layer--text);
min-width: var(--container-micro);
max-width: var(--container-ui);
width: auto;
height: calc(100vh - var(--spacing-ui-lg));
overflow-y: auto;
}
.layout__aside-mobile {
background: var(--color-layer);
color: var(--color-layer--text);
width: 100%;
}
.layout__main {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
width: 100%;
margin-inline: auto;
position: relative;
}
.layout__main__wrapper {
display: flex;
flex-direction: row;
width: 100%;
flex: 1;
justify-content: flex-start;
align-items: center;
}
.layout__content {
display: flex;
flex-direction: column;
width: 100%;
flex: 1;
justify-content: flex-start;
align-items: center;
padding: var(--spacing-ui-padding);
gap: var(--spacing-ui-gap);
}
.layout__article {
width: 100%;
max-width: var(--breakpoint-lg);
padding: var(--spacing-ui-padding);
color: var(--color-layer--text);
border-radius: var(--radius-ui);
}
.layout .layout__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--spacing-ui-gap);
}
.layout .layout__side,
.layout .layout__aside {
display: none;
}
@media (min-width: theme("breakpoint.md")) {
.layout .layout__side {
display: flex;
}
}
@media (min-width: theme("breakpoint.lg")) {
.layout .layout__aside {
display: flex;
}
}
.layout .layout__aside-mobile {
display: flex;
}
@media (min-width: theme("breakpoint.lg")) {
.layout .layout__aside-mobile {
display: none;
}
}
.layout .layout__side__mobile {
display: flex;
}
@media (min-width: theme("breakpoint.md")) {
.layout .layout__side__mobile {
display: none;
}
}
.layout--boxed {
.layout__header__content,
.layout__footer__content,
.layout__wrapper {
max-width: var(--breakpoint-xl);
}
.layout__article {
max-width: var(--breakpoint-lg);
}
}
}