@dialpad/dialtone-css
Version:
Dialpad's design system
171 lines (155 loc) • 6.43 kB
text/less
//
// DIALTONE
// UTILITIES: SIZING
//
// These are sizing utility classes for Dialpad's design system Dialtone.
// For further documentation of these and other classes,
// visit https://dialtone.dialpad.com/utilities/sizing
//
// TABLE OF CONTENTS
// • HEIGHT
// - PERCENTAGES
// - MAX-HEIGHT
// - MIN-HEIGHT
// - FIXED
// • WIDTH
// - FLUID
// - MAX-WIDTH
// - MIN-WIDTH
// - FIXED
//
// ============================================================================
// $ HEIGHT
// ============================================================================
// $$ PERCENTAGES
// ----------------------------------------------------------------------------
.d-h10p { height: 10% ; }
.d-h20p { height: 20% ; }
.d-h25p { height: 25% ; }
.d-h30p { height: 30% ; }
.d-h40p { height: 40% ; }
.d-h50p { height: 50% ; }
.d-h60p { height: 60% ; }
.d-h70p { height: 70% ; }
.d-h75p { height: 75% ; }
.d-h80p { height: 80% ; }
.d-h90p { height: 90% ; }
.d-h100p { height: 100% ; }
// $$ MAX-HEIGHT
// ----------------------------------------------------------------------------
.d-hmx10p { max-height: 10% ; }
.d-hmx20p { max-height: 20% ; }
.d-hmx25p { max-height: 25% ; }
.d-hmx30p { max-height: 30% ; }
.d-hmx40p { max-height: 40% ; }
.d-hmx50p { max-height: 50% ; }
.d-hmx60p { max-height: 60% ; }
.d-hmx70p { max-height: 70% ; }
.d-hmx75p { max-height: 75% ; }
.d-hmx80p { max-height: 80% ; }
.d-hmx90p { max-height: 90% ; }
.d-hmx100p { max-height: 100% ; }
// $$ MIN-HEIGHT
// ----------------------------------------------------------------------------
.d-hmn10p { min-height: 10% ; }
.d-hmn20p { min-height: 20% ; }
.d-hmn25p { min-height: 25% ; }
.d-hmn30p { min-height: 30% ; }
.d-hmn40p { min-height: 40% ; }
.d-hmn50p { min-height: 50% ; }
.d-hmn60p { min-height: 60% ; }
.d-hmn70p { min-height: 70% ; }
.d-hmn75p { min-height: 75% ; }
.d-hmn80p { min-height: 80% ; }
.d-hmn90p { min-height: 90% ; }
.d-hmn100p { min-height: 100% ; }
// $$ FIXED
// ----------------------------------------------------------------------------
.d-h100vh { height: 100vh ; }
.d-h-auto { height: auto ; }
.d-h-unset { height: unset ; }
.d-h-fit-content { height: fit-content ; }
.d-h-max-content { height: max-content ; }
.d-h-min-content { height: min-content ; }
.d-hmn-auto { min-height: auto ; }
.d-hmn-unset { min-height: unset ; }
.d-hmn-fit-content { min-height: fit-content ; }
.d-hmn-max-content { min-height: max-content ; }
.d-hmn-min-content { min-height: min-content ; }
.d-hmx-auto { max-height: auto ; }
.d-hmx-unset { max-height: unset ; }
.d-hmx-fit-content { max-height: fit-content ; }
.d-hmx-max-content { max-height: max-content ; }
.d-hmx-min-content { max-height: min-content ; }
// ============================================================================
// $ WIDTH
// ============================================================================
// $$ FLUID
// ----------------------------------------------------------------------------
.d-w10p { width: 10% ; }
.d-w20p { width: 20% ; }
.d-w25p { width: 25% ; }
.d-w30p { width: 30% ; }
.d-w40p { width: 40% ; }
.d-w50p { width: 50% ; }
.d-w60p { width: 60% ; }
.d-w70p { width: 70% ; }
.d-w75p { width: 75% ; }
.d-w80p { width: 80% ; }
.d-w90p { width: 90% ; }
.d-w100p { width: 100% ; }
// $$ MAX-WIDTH
// ----------------------------------------------------------------------------
.d-wmx10p { max-width: 10% ; }
.d-wmx20p { max-width: 20% ; }
.d-wmx25p { max-width: 25% ; }
.d-wmx30p { max-width: 30% ; }
.d-wmx40p { max-width: 40% ; }
.d-wmx50p { max-width: 50% ; }
.d-wmx60p { max-width: 60% ; }
.d-wmx70p { max-width: 70% ; }
.d-wmx75p { max-width: 75% ; }
.d-wmx80p { max-width: 80% ; }
.d-wmx90p { max-width: 90% ; }
.d-wmx100p { max-width: 100% ; }
// $$ MIN-WIDTH
// ----------------------------------------------------------------------------
.d-wmn10p { min-width: 10% ; }
.d-wmn20p { min-width: 20% ; }
.d-wmn25p { min-width: 25% ; }
.d-wmn30p { min-width: 30% ; }
.d-wmn40p { min-width: 40% ; }
.d-wmn50p { min-width: 50% ; }
.d-wmn60p { min-width: 60% ; }
.d-wmn70p { min-width: 70% ; }
.d-wmn75p { min-width: 75% ; }
.d-wmn80p { min-width: 80% ; }
.d-wmn90p { min-width: 90% ; }
.d-wmn100p { min-width: 100% ; }
// $$ FIXED
// ----------------------------------------------------------------------------
.d-w60ch { width: 60ch ; }
.d-w75ch { width: 75ch ; }
.d-w90ch { width: 90ch ; }
.d-w100vw { width: 100vw ; }
.d-w-auto { width: auto ; }
.d-w-unset { width: unset ; }
.d-w-fit-content { width: fit-content ; }
.d-w-max-content { width: max-content ; }
.d-w-min-content { width: min-content ; }
.d-wmn60ch { min-width: 60ch ; }
.d-wmn75ch { min-width: 75ch ; }
.d-wmn90ch { min-width: 90ch ; }
.d-wmn-fit-content { min-width: fit-content ; }
.d-wmn-max-content { min-width: max-content ; }
.d-wmn-min-content { min-width: min-content ; }
.d-wmn-auto { min-width: auto ; }
.d-wmn-unset { min-width: unset ; }
.d-wmx60ch { max-width: 60ch ; }
.d-wmx75ch { max-width: 75ch ; }
.d-wmx90ch { max-width: 90ch ; }
.d-wmx-auto { max-width: auto ; }
.d-wmx-unset { max-width: unset ; }
.d-wmx-fit-content { max-width: fit-content ; }
.d-wmx-max-content { max-width: max-content ; }
.d-wmx-min-content { max-width: min-content ; }