@dialpad/dialtone-css
Version:
Dialpad's design system
76 lines (65 loc) • 1.74 kB
text/less
//
// DIALTONE
// COMPONENTS: ITEM LAYOUT
//
// Custom layout to enable developer to use list-item like stack.
// It is used as base for `dt-list-item` component
// visit https://dialtone.dialpad.com/components/item_layout
//
// TABLE OF CONTENTS
// • BASE STYLE
//
// ============================================================================
// $ BASE STYLE
// ----------------------------------------------------------------------------
.d-item-layout {
display: flex;
align-items: stretch;
min-height: calc(var(--dt-size-550) + var(--dt-size-300));
padding: var(--dt-space-300) var(--dt-space-400);
font-size: var(--dt-font-size-200);
line-height: var(--dt-font-line-height-300);
> .d-item-layout__content {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
min-width: var(--dt-size-0);
> .d-item-layout__subtitle {
color: var(--dt-color-foreground-tertiary);
font-size: var(--dt-font-size-100);
}
> .d-item-layout__subtitle-with-title {
margin-top: var(--dt-space-200-negative);
}
> .d-item-layout__bottom {
margin-top: var(--dt-space-200);
}
}
> .d-item-layout__right,
> .d-item-layout__left {
display: flex;
align-items: center;
min-width: var(--dt-size-600);
min-height: inherit;
}
> .d-item-layout__right {
flex-shrink: 0;
padding-left: var(--dt-space-400);
}
> .d-item-layout__left {
justify-content: flex-end;
padding-right: var(--dt-space-400);
}
> .d-item-layout__selected {
display: flex;
align-items: center;
}
}
.d-item-layout--custom {
display: grid;
.d-item-layout__content {
display: grid;
grid-auto-rows: auto;
}
}