@sandlada/material-design-css
Version:
A ready-made npm package for a collection of css styles in the material design style.
327 lines (308 loc) • 24.4 kB
CSS
@layer material-design-system {
.padding-0 { padding: var(--md-sys-measurement-space0); }
.padding-25 { padding: var(--md-sys-measurement-space25); }
.padding-50 { padding: var(--md-sys-measurement-space50); }
.padding-75 { padding: var(--md-sys-measurement-space75); }
.padding-100 { padding: var(--md-sys-measurement-space100); }
.padding-125 { padding: var(--md-sys-measurement-space125); }
.padding-150 { padding: var(--md-sys-measurement-space150); }
.padding-175 { padding: var(--md-sys-measurement-space175); }
.padding-200 { padding: var(--md-sys-measurement-space200); }
.padding-250 { padding: var(--md-sys-measurement-space250); }
.padding-300 { padding: var(--md-sys-measurement-space300); }
.padding-400 { padding: var(--md-sys-measurement-space400); }
.padding-450 { padding: var(--md-sys-measurement-space450); }
.padding-500 { padding: var(--md-sys-measurement-space500); }
.padding-600 { padding: var(--md-sys-measurement-space600); }
.padding-700 { padding: var(--md-sys-measurement-space700); }
.padding-800 { padding: var(--md-sys-measurement-space800); }
.padding-900 { padding: var(--md-sys-measurement-space900); }
.padding-inline-0 { padding-inline: var(--md-sys-measurement-space0); }
.padding-inline-25 { padding-inline: var(--md-sys-measurement-space25); }
.padding-inline-50 { padding-inline: var(--md-sys-measurement-space50); }
.padding-inline-75 { padding-inline: var(--md-sys-measurement-space75); }
.padding-inline-100 { padding-inline: var(--md-sys-measurement-space100); }
.padding-inline-125 { padding-inline: var(--md-sys-measurement-space125); }
.padding-inline-150 { padding-inline: var(--md-sys-measurement-space150); }
.padding-inline-175 { padding-inline: var(--md-sys-measurement-space175); }
.padding-inline-200 { padding-inline: var(--md-sys-measurement-space200); }
.padding-inline-250 { padding-inline: var(--md-sys-measurement-space250); }
.padding-inline-300 { padding-inline: var(--md-sys-measurement-space300); }
.padding-inline-400 { padding-inline: var(--md-sys-measurement-space400); }
.padding-inline-450 { padding-inline: var(--md-sys-measurement-space450); }
.padding-inline-500 { padding-inline: var(--md-sys-measurement-space500); }
.padding-inline-600 { padding-inline: var(--md-sys-measurement-space600); }
.padding-inline-700 { padding-inline: var(--md-sys-measurement-space700); }
.padding-inline-800 { padding-inline: var(--md-sys-measurement-space800); }
.padding-inline-900 { padding-inline: var(--md-sys-measurement-space900); }
.padding-inline-start-0 { padding-inline-start: var(--md-sys-measurement-space0); }
.padding-inline-start-25 { padding-inline-start: var(--md-sys-measurement-space25); }
.padding-inline-start-50 { padding-inline-start: var(--md-sys-measurement-space50); }
.padding-inline-start-75 { padding-inline-start: var(--md-sys-measurement-space75); }
.padding-inline-start-100 { padding-inline-start: var(--md-sys-measurement-space100); }
.padding-inline-start-125 { padding-inline-start: var(--md-sys-measurement-space125); }
.padding-inline-start-150 { padding-inline-start: var(--md-sys-measurement-space150); }
.padding-inline-start-175 { padding-inline-start: var(--md-sys-measurement-space175); }
.padding-inline-start-200 { padding-inline-start: var(--md-sys-measurement-space200); }
.padding-inline-start-250 { padding-inline-start: var(--md-sys-measurement-space250); }
.padding-inline-start-300 { padding-inline-start: var(--md-sys-measurement-space300); }
.padding-inline-start-400 { padding-inline-start: var(--md-sys-measurement-space400); }
.padding-inline-start-450 { padding-inline-start: var(--md-sys-measurement-space450); }
.padding-inline-start-500 { padding-inline-start: var(--md-sys-measurement-space500); }
.padding-inline-start-600 { padding-inline-start: var(--md-sys-measurement-space600); }
.padding-inline-start-700 { padding-inline-start: var(--md-sys-measurement-space700); }
.padding-inline-start-800 { padding-inline-start: var(--md-sys-measurement-space800); }
.padding-inline-start-900 { padding-inline-start: var(--md-sys-measurement-space900); }
.padding-inline-end-0 { padding-inline-end: var(--md-sys-measurement-space0); }
.padding-inline-end-25 { padding-inline-end: var(--md-sys-measurement-space25); }
.padding-inline-end-50 { padding-inline-end: var(--md-sys-measurement-space50); }
.padding-inline-end-75 { padding-inline-end: var(--md-sys-measurement-space75); }
.padding-inline-end-100 { padding-inline-end: var(--md-sys-measurement-space100); }
.padding-inline-end-125 { padding-inline-end: var(--md-sys-measurement-space125); }
.padding-inline-end-150 { padding-inline-end: var(--md-sys-measurement-space150); }
.padding-inline-end-175 { padding-inline-end: var(--md-sys-measurement-space175); }
.padding-inline-end-200 { padding-inline-end: var(--md-sys-measurement-space200); }
.padding-inline-end-250 { padding-inline-end: var(--md-sys-measurement-space250); }
.padding-inline-end-300 { padding-inline-end: var(--md-sys-measurement-space300); }
.padding-inline-end-400 { padding-inline-end: var(--md-sys-measurement-space400); }
.padding-inline-end-450 { padding-inline-end: var(--md-sys-measurement-space450); }
.padding-inline-end-500 { padding-inline-end: var(--md-sys-measurement-space500); }
.padding-inline-end-600 { padding-inline-end: var(--md-sys-measurement-space600); }
.padding-inline-end-700 { padding-inline-end: var(--md-sys-measurement-space700); }
.padding-inline-end-800 { padding-inline-end: var(--md-sys-measurement-space800); }
.padding-inline-end-900 { padding-inline-end: var(--md-sys-measurement-space900); }
.padding-block-0 { padding-block: var(--md-sys-measurement-space0); }
.padding-block-25 { padding-block: var(--md-sys-measurement-space25); }
.padding-block-50 { padding-block: var(--md-sys-measurement-space50); }
.padding-block-75 { padding-block: var(--md-sys-measurement-space75); }
.padding-block-100 { padding-block: var(--md-sys-measurement-space100); }
.padding-block-125 { padding-block: var(--md-sys-measurement-space125); }
.padding-block-150 { padding-block: var(--md-sys-measurement-space150); }
.padding-block-175 { padding-block: var(--md-sys-measurement-space175); }
.padding-block-200 { padding-block: var(--md-sys-measurement-space200); }
.padding-block-250 { padding-block: var(--md-sys-measurement-space250); }
.padding-block-300 { padding-block: var(--md-sys-measurement-space300); }
.padding-block-400 { padding-block: var(--md-sys-measurement-space400); }
.padding-block-450 { padding-block: var(--md-sys-measurement-space450); }
.padding-block-500 { padding-block: var(--md-sys-measurement-space500); }
.padding-block-600 { padding-block: var(--md-sys-measurement-space600); }
.padding-block-700 { padding-block: var(--md-sys-measurement-space700); }
.padding-block-800 { padding-block: var(--md-sys-measurement-space800); }
.padding-block-900 { padding-block: var(--md-sys-measurement-space900); }
.padding-block-start-0 { padding-block-start: var(--md-sys-measurement-space0); }
.padding-block-start-25 { padding-block-start: var(--md-sys-measurement-space25); }
.padding-block-start-50 { padding-block-start: var(--md-sys-measurement-space50); }
.padding-block-start-75 { padding-block-start: var(--md-sys-measurement-space75); }
.padding-block-start-100 { padding-block-start: var(--md-sys-measurement-space100); }
.padding-block-start-125 { padding-block-start: var(--md-sys-measurement-space125); }
.padding-block-start-150 { padding-block-start: var(--md-sys-measurement-space150); }
.padding-block-start-175 { padding-block-start: var(--md-sys-measurement-space175); }
.padding-block-start-200 { padding-block-start: var(--md-sys-measurement-space200); }
.padding-block-start-250 { padding-block-start: var(--md-sys-measurement-space250); }
.padding-block-start-300 { padding-block-start: var(--md-sys-measurement-space300); }
.padding-block-start-400 { padding-block-start: var(--md-sys-measurement-space400); }
.padding-block-start-450 { padding-block-start: var(--md-sys-measurement-space450); }
.padding-block-start-500 { padding-block-start: var(--md-sys-measurement-space500); }
.padding-block-start-600 { padding-block-start: var(--md-sys-measurement-space600); }
.padding-block-start-700 { padding-block-start: var(--md-sys-measurement-space700); }
.padding-block-start-800 { padding-block-start: var(--md-sys-measurement-space800); }
.padding-block-start-900 { padding-block-start: var(--md-sys-measurement-space900); }
.padding-block-end-0 { padding-block-end: var(--md-sys-measurement-space0); }
.padding-block-end-25 { padding-block-end: var(--md-sys-measurement-space25); }
.padding-block-end-50 { padding-block-end: var(--md-sys-measurement-space50); }
.padding-block-end-75 { padding-block-end: var(--md-sys-measurement-space75); }
.padding-block-end-100 { padding-block-end: var(--md-sys-measurement-space100); }
.padding-block-end-125 { padding-block-end: var(--md-sys-measurement-space125); }
.padding-block-end-150 { padding-block-end: var(--md-sys-measurement-space150); }
.padding-block-end-175 { padding-block-end: var(--md-sys-measurement-space175); }
.padding-block-end-200 { padding-block-end: var(--md-sys-measurement-space200); }
.padding-block-end-250 { padding-block-end: var(--md-sys-measurement-space250); }
.padding-block-end-300 { padding-block-end: var(--md-sys-measurement-space300); }
.padding-block-end-400 { padding-block-end: var(--md-sys-measurement-space400); }
.padding-block-end-450 { padding-block-end: var(--md-sys-measurement-space450); }
.padding-block-end-500 { padding-block-end: var(--md-sys-measurement-space500); }
.padding-block-end-600 { padding-block-end: var(--md-sys-measurement-space600); }
.padding-block-end-700 { padding-block-end: var(--md-sys-measurement-space700); }
.padding-block-end-800 { padding-block-end: var(--md-sys-measurement-space800); }
.padding-block-end-900 { padding-block-end: var(--md-sys-measurement-space900); }
.margin-0 { margin: var(--md-sys-measurement-space0); }
.margin-25 { margin: var(--md-sys-measurement-space25); }
.margin-50 { margin: var(--md-sys-measurement-space50); }
.margin-75 { margin: var(--md-sys-measurement-space75); }
.margin-100 { margin: var(--md-sys-measurement-space100); }
.margin-125 { margin: var(--md-sys-measurement-space125); }
.margin-150 { margin: var(--md-sys-measurement-space150); }
.margin-175 { margin: var(--md-sys-measurement-space175); }
.margin-200 { margin: var(--md-sys-measurement-space200); }
.margin-250 { margin: var(--md-sys-measurement-space250); }
.margin-300 { margin: var(--md-sys-measurement-space300); }
.margin-400 { margin: var(--md-sys-measurement-space400); }
.margin-450 { margin: var(--md-sys-measurement-space450); }
.margin-500 { margin: var(--md-sys-measurement-space500); }
.margin-600 { margin: var(--md-sys-measurement-space600); }
.margin-700 { margin: var(--md-sys-measurement-space700); }
.margin-800 { margin: var(--md-sys-measurement-space800); }
.margin-900 { margin: var(--md-sys-measurement-space900); }
.margin-inline-0 { margin-inline: var(--md-sys-measurement-space0); }
.margin-inline-25 { margin-inline: var(--md-sys-measurement-space25); }
.margin-inline-50 { margin-inline: var(--md-sys-measurement-space50); }
.margin-inline-75 { margin-inline: var(--md-sys-measurement-space75); }
.margin-inline-100 { margin-inline: var(--md-sys-measurement-space100); }
.margin-inline-125 { margin-inline: var(--md-sys-measurement-space125); }
.margin-inline-150 { margin-inline: var(--md-sys-measurement-space150); }
.margin-inline-175 { margin-inline: var(--md-sys-measurement-space175); }
.margin-inline-200 { margin-inline: var(--md-sys-measurement-space200); }
.margin-inline-250 { margin-inline: var(--md-sys-measurement-space250); }
.margin-inline-300 { margin-inline: var(--md-sys-measurement-space300); }
.margin-inline-400 { margin-inline: var(--md-sys-measurement-space400); }
.margin-inline-450 { margin-inline: var(--md-sys-measurement-space450); }
.margin-inline-500 { margin-inline: var(--md-sys-measurement-space500); }
.margin-inline-600 { margin-inline: var(--md-sys-measurement-space600); }
.margin-inline-700 { margin-inline: var(--md-sys-measurement-space700); }
.margin-inline-800 { margin-inline: var(--md-sys-measurement-space800); }
.margin-inline-900 { margin-inline: var(--md-sys-measurement-space900); }
.margin-inline-start-0 { margin-inline-start: var(--md-sys-measurement-space0); }
.margin-inline-start-25 { margin-inline-start: var(--md-sys-measurement-space25); }
.margin-inline-start-50 { margin-inline-start: var(--md-sys-measurement-space50); }
.margin-inline-start-75 { margin-inline-start: var(--md-sys-measurement-space75); }
.margin-inline-start-100 { margin-inline-start: var(--md-sys-measurement-space100); }
.margin-inline-start-125 { margin-inline-start: var(--md-sys-measurement-space125); }
.margin-inline-start-150 { margin-inline-start: var(--md-sys-measurement-space150); }
.margin-inline-start-175 { margin-inline-start: var(--md-sys-measurement-space175); }
.margin-inline-start-200 { margin-inline-start: var(--md-sys-measurement-space200); }
.margin-inline-start-250 { margin-inline-start: var(--md-sys-measurement-space250); }
.margin-inline-start-300 { margin-inline-start: var(--md-sys-measurement-space300); }
.margin-inline-start-400 { margin-inline-start: var(--md-sys-measurement-space400); }
.margin-inline-start-450 { margin-inline-start: var(--md-sys-measurement-space450); }
.margin-inline-start-500 { margin-inline-start: var(--md-sys-measurement-space500); }
.margin-inline-start-600 { margin-inline-start: var(--md-sys-measurement-space600); }
.margin-inline-start-700 { margin-inline-start: var(--md-sys-measurement-space700); }
.margin-inline-start-800 { margin-inline-start: var(--md-sys-measurement-space800); }
.margin-inline-start-900 { margin-inline-start: var(--md-sys-measurement-space900); }
.margin-inline-end-0 { margin-inline-end: var(--md-sys-measurement-space0); }
.margin-inline-end-25 { margin-inline-end: var(--md-sys-measurement-space25); }
.margin-inline-end-50 { margin-inline-end: var(--md-sys-measurement-space50); }
.margin-inline-end-75 { margin-inline-end: var(--md-sys-measurement-space75); }
.margin-inline-end-100 { margin-inline-end: var(--md-sys-measurement-space100); }
.margin-inline-end-125 { margin-inline-end: var(--md-sys-measurement-space125); }
.margin-inline-end-150 { margin-inline-end: var(--md-sys-measurement-space150); }
.margin-inline-end-175 { margin-inline-end: var(--md-sys-measurement-space175); }
.margin-inline-end-200 { margin-inline-end: var(--md-sys-measurement-space200); }
.margin-inline-end-250 { margin-inline-end: var(--md-sys-measurement-space250); }
.margin-inline-end-300 { margin-inline-end: var(--md-sys-measurement-space300); }
.margin-inline-end-400 { margin-inline-end: var(--md-sys-measurement-space400); }
.margin-inline-end-450 { margin-inline-end: var(--md-sys-measurement-space450); }
.margin-inline-end-500 { margin-inline-end: var(--md-sys-measurement-space500); }
.margin-inline-end-600 { margin-inline-end: var(--md-sys-measurement-space600); }
.margin-inline-end-700 { margin-inline-end: var(--md-sys-measurement-space700); }
.margin-inline-end-800 { margin-inline-end: var(--md-sys-measurement-space800); }
.margin-inline-end-900 { margin-inline-end: var(--md-sys-measurement-space900); }
.margin-block-0 { margin-block: var(--md-sys-measurement-space0); }
.margin-block-25 { margin-block: var(--md-sys-measurement-space25); }
.margin-block-50 { margin-block: var(--md-sys-measurement-space50); }
.margin-block-75 { margin-block: var(--md-sys-measurement-space75); }
.margin-block-100 { margin-block: var(--md-sys-measurement-space100); }
.margin-block-125 { margin-block: var(--md-sys-measurement-space125); }
.margin-block-150 { margin-block: var(--md-sys-measurement-space150); }
.margin-block-175 { margin-block: var(--md-sys-measurement-space175); }
.margin-block-200 { margin-block: var(--md-sys-measurement-space200); }
.margin-block-250 { margin-block: var(--md-sys-measurement-space250); }
.margin-block-300 { margin-block: var(--md-sys-measurement-space300); }
.margin-block-400 { margin-block: var(--md-sys-measurement-space400); }
.margin-block-450 { margin-block: var(--md-sys-measurement-space450); }
.margin-block-500 { margin-block: var(--md-sys-measurement-space500); }
.margin-block-600 { margin-block: var(--md-sys-measurement-space600); }
.margin-block-700 { margin-block: var(--md-sys-measurement-space700); }
.margin-block-800 { margin-block: var(--md-sys-measurement-space800); }
.margin-block-900 { margin-block: var(--md-sys-measurement-space900); }
.margin-block-start-0 { margin-block-start: var(--md-sys-measurement-space0); }
.margin-block-start-25 { margin-block-start: var(--md-sys-measurement-space25); }
.margin-block-start-50 { margin-block-start: var(--md-sys-measurement-space50); }
.margin-block-start-75 { margin-block-start: var(--md-sys-measurement-space75); }
.margin-block-start-100 { margin-block-start: var(--md-sys-measurement-space100); }
.margin-block-start-125 { margin-block-start: var(--md-sys-measurement-space125); }
.margin-block-start-150 { margin-block-start: var(--md-sys-measurement-space150); }
.margin-block-start-175 { margin-block-start: var(--md-sys-measurement-space175); }
.margin-block-start-200 { margin-block-start: var(--md-sys-measurement-space200); }
.margin-block-start-250 { margin-block-start: var(--md-sys-measurement-space250); }
.margin-block-start-300 { margin-block-start: var(--md-sys-measurement-space300); }
.margin-block-start-400 { margin-block-start: var(--md-sys-measurement-space400); }
.margin-block-start-450 { margin-block-start: var(--md-sys-measurement-space450); }
.margin-block-start-500 { margin-block-start: var(--md-sys-measurement-space500); }
.margin-block-start-600 { margin-block-start: var(--md-sys-measurement-space600); }
.margin-block-start-700 { margin-block-start: var(--md-sys-measurement-space700); }
.margin-block-start-800 { margin-block-start: var(--md-sys-measurement-space800); }
.margin-block-start-900 { margin-block-start: var(--md-sys-measurement-space900); }
.margin-block-end-0 { margin-block-end: var(--md-sys-measurement-space0); }
.margin-block-end-25 { margin-block-end: var(--md-sys-measurement-space25); }
.margin-block-end-50 { margin-block-end: var(--md-sys-measurement-space50); }
.margin-block-end-75 { margin-block-end: var(--md-sys-measurement-space75); }
.margin-block-end-100 { margin-block-end: var(--md-sys-measurement-space100); }
.margin-block-end-125 { margin-block-end: var(--md-sys-measurement-space125); }
.margin-block-end-150 { margin-block-end: var(--md-sys-measurement-space150); }
.margin-block-end-175 { margin-block-end: var(--md-sys-measurement-space175); }
.margin-block-end-200 { margin-block-end: var(--md-sys-measurement-space200); }
.margin-block-end-250 { margin-block-end: var(--md-sys-measurement-space250); }
.margin-block-end-300 { margin-block-end: var(--md-sys-measurement-space300); }
.margin-block-end-400 { margin-block-end: var(--md-sys-measurement-space400); }
.margin-block-end-450 { margin-block-end: var(--md-sys-measurement-space450); }
.margin-block-end-500 { margin-block-end: var(--md-sys-measurement-space500); }
.margin-block-end-600 { margin-block-end: var(--md-sys-measurement-space600); }
.margin-block-end-700 { margin-block-end: var(--md-sys-measurement-space700); }
.margin-block-end-800 { margin-block-end: var(--md-sys-measurement-space800); }
.margin-block-end-900 { margin-block-end: var(--md-sys-measurement-space900); }
.gap-0 { gap: var(--md-sys-measurement-space0); }
.gap-25 { gap: var(--md-sys-measurement-space25); }
.gap-50 { gap: var(--md-sys-measurement-space50); }
.gap-75 { gap: var(--md-sys-measurement-space75); }
.gap-100 { gap: var(--md-sys-measurement-space100); }
.gap-125 { gap: var(--md-sys-measurement-space125); }
.gap-150 { gap: var(--md-sys-measurement-space150); }
.gap-175 { gap: var(--md-sys-measurement-space175); }
.gap-200 { gap: var(--md-sys-measurement-space200); }
.gap-250 { gap: var(--md-sys-measurement-space250); }
.gap-300 { gap: var(--md-sys-measurement-space300); }
.gap-400 { gap: var(--md-sys-measurement-space400); }
.gap-450 { gap: var(--md-sys-measurement-space450); }
.gap-500 { gap: var(--md-sys-measurement-space500); }
.gap-600 { gap: var(--md-sys-measurement-space600); }
.gap-700 { gap: var(--md-sys-measurement-space700); }
.gap-800 { gap: var(--md-sys-measurement-space800); }
.gap-900 { gap: var(--md-sys-measurement-space900); }
.col-gap-0 { column-gap: var(--md-sys-measurement-space0); }
.col-gap-25 { column-gap: var(--md-sys-measurement-space25); }
.col-gap-50 { column-gap: var(--md-sys-measurement-space50); }
.col-gap-75 { column-gap: var(--md-sys-measurement-space75); }
.col-gap-100 { column-gap: var(--md-sys-measurement-space100); }
.col-gap-125 { column-gap: var(--md-sys-measurement-space125); }
.col-gap-150 { column-gap: var(--md-sys-measurement-space150); }
.col-gap-175 { column-gap: var(--md-sys-measurement-space175); }
.col-gap-200 { column-gap: var(--md-sys-measurement-space200); }
.col-gap-250 { column-gap: var(--md-sys-measurement-space250); }
.col-gap-300 { column-gap: var(--md-sys-measurement-space300); }
.col-gap-400 { column-gap: var(--md-sys-measurement-space400); }
.col-gap-450 { column-gap: var(--md-sys-measurement-space450); }
.col-gap-500 { column-gap: var(--md-sys-measurement-space500); }
.col-gap-600 { column-gap: var(--md-sys-measurement-space600); }
.col-gap-700 { column-gap: var(--md-sys-measurement-space700); }
.col-gap-800 { column-gap: var(--md-sys-measurement-space800); }
.col-gap-900 { column-gap: var(--md-sys-measurement-space900); }
.row-gap-0 { row-gap: var(--md-sys-measurement-space0); }
.row-gap-25 { row-gap: var(--md-sys-measurement-space25); }
.row-gap-50 { row-gap: var(--md-sys-measurement-space50); }
.row-gap-75 { row-gap: var(--md-sys-measurement-space75); }
.row-gap-100 { row-gap: var(--md-sys-measurement-space100); }
.row-gap-125 { row-gap: var(--md-sys-measurement-space125); }
.row-gap-150 { row-gap: var(--md-sys-measurement-space150); }
.row-gap-175 { row-gap: var(--md-sys-measurement-space175); }
.row-gap-200 { row-gap: var(--md-sys-measurement-space200); }
.row-gap-250 { row-gap: var(--md-sys-measurement-space250); }
.row-gap-300 { row-gap: var(--md-sys-measurement-space300); }
.row-gap-400 { row-gap: var(--md-sys-measurement-space400); }
.row-gap-450 { row-gap: var(--md-sys-measurement-space450); }
.row-gap-500 { row-gap: var(--md-sys-measurement-space500); }
.row-gap-600 { row-gap: var(--md-sys-measurement-space600); }
.row-gap-700 { row-gap: var(--md-sys-measurement-space700); }
.row-gap-800 { row-gap: var(--md-sys-measurement-space800); }
.row-gap-900 { row-gap: var(--md-sys-measurement-space900); }
}