@rolemodel/optics
Version:
Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.
139 lines (116 loc) • 4.08 kB
CSS
.sidebar {
/* Public API (customizable component options) */
/* Normal */
--_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
--_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
--_op-sidebar-border-color: var(--op-color-neutral-plus-four);
/* Width */
--_op-sidebar-rail-width: calc(22 * var(--op-size-unit)); /* 88px */
--_op-sidebar-compact-width: calc(42 * var(--op-size-unit)); /* 168px */
--_op-sidebar-drawer-width: calc(54 * var(--op-size-unit)); /* 216px */
--_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit)); /* 76px */
--_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
--_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
/* Spacing */
--_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
--_op-sidebar-brand-spacing: var(--op-space-medium);
--_op-sidebar-content-spacing: var(--op-space-x-small);
--_op-sidebar-content-item-spacing: var(--op-space-2x-small);
/* Animation */
--_op-sidebar-transition: var(--op-transition-sidebar);
/* Private API (component option defaults) */
--__op-sidebar-width: var(--_op-sidebar-drawer-width);
--__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
z-index: var(--op-z-index-sidebar);
display: flex;
width: var(--__op-sidebar-width);
min-width: var(--__op-sidebar-width);
flex-direction: column;
background-color: var(--_op-sidebar-background-color);
box-shadow: var(--op-border-right) var(--_op-sidebar-border-color);
color: var(--_op-sidebar-text-color);
overflow-y: auto;
transition: var(--_op-sidebar-transition);
/* Elements */
.sidebar__brand {
height: var(--__op-sidebar-brand-width);
padding: var(--_op-sidebar-brand-spacing);
margin-inline: auto;
img {
height: 100%;
}
}
.sidebar__content {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: var(--_op-sidebar-content-item-spacing);
padding-inline: var(--_op-sidebar-content-spacing);
> * {
justify-content: flex-start;
.material-symbols-outlined {
--__op-icon-font-size: var(--_op-icon-font-size-large);
--__op-icon-optical-size: var(--_op-icon-optical-size-large);
--__op-icon-weight: var(--_op-icon-weight-bold);
}
}
&.sidebar__content--start {
justify-content: start;
}
&.sidebar__content--center {
justify-content: center;
}
&.sidebar__content--end {
justify-content: end;
}
}
/* Modifiers */
&.sidebar--padded {
padding-block: var(--_op-sidebar-spacing);
}
/* Drawer Modifier */
&.sidebar--drawer {
/* Private API */
--__op-sidebar-width: var(--_op-sidebar-drawer-width);
--__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
}
/* Compact Modifier */
&.sidebar--compact {
/* Private API (component option defaults) */
--__op-sidebar-width: var(--_op-sidebar-compact-width);
--__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
/* Elements */
.sidebar__content {
> * {
/* Need to get icon-with-label behavior */
flex-direction: column;
padding: var(--op-space-small);
gap: var(--op-space-3x-small);
}
}
}
&.sidebar--rail {
/* Private API (component option defaults) */
--__op-sidebar-width: var(--_op-sidebar-rail-width);
--__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
/* Elements */
.sidebar__content {
align-items: center;
> * {
/* Need to get icon behavior */
width: var(--__op-btn-height);
min-width: var(--__op-btn-height);
justify-content: center;
padding: 0;
font-size: 0;
gap: 0;
}
}
}
/* Primary */
&.sidebar--primary {
--_op-sidebar-background-color: var(--op-color-primary-plus-six);
--_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
--_op-sidebar-border-color: var(--op-color-primary-plus-four);
}
}