mm
This commit is contained in:
45
packages/css/utility/height.css
Normal file
45
packages/css/utility/height.css
Normal file
@@ -0,0 +1,45 @@
|
||||
@layer utility {
|
||||
.h-item-xs {
|
||||
/* 24px minimum touch size for text line */
|
||||
height: var(--height-item-xs);
|
||||
}
|
||||
.h-item-sm {
|
||||
/* 28px save space for most used size */
|
||||
height: var(--height-item-sm);
|
||||
}
|
||||
.h-item-md {
|
||||
/* 34px most used size */
|
||||
height: var(--height-item-md);
|
||||
}
|
||||
.h-item-lg {
|
||||
/* 44px maximum touch size without waste */
|
||||
height: var(--height-item-lg);
|
||||
}
|
||||
.h-item-xl {
|
||||
/* 64px navigation bar */
|
||||
height: var(--height-item-xl);
|
||||
}
|
||||
.h-item-2xl {
|
||||
/* 64px navigation bar */
|
||||
height: var(--height-item-2xl);
|
||||
}
|
||||
/* -------------- */
|
||||
.h-inline-xs {
|
||||
height: calc(var(--font-size-xs) * var(--line-height-xs));
|
||||
}
|
||||
.h-inline-sm {
|
||||
height: calc(var(--font-size-sm) * var(--line-height-sm));
|
||||
}
|
||||
.h-inline-md {
|
||||
height: calc(var(--font-size-md) * var(--line-height-md));
|
||||
}
|
||||
.h-inline-lg {
|
||||
height: calc(var(--font-size-lg) * var(--line-height-lg));
|
||||
}
|
||||
.h-inline-xl {
|
||||
height: calc(var(--font-size-xl) * var(--line-height-xl));
|
||||
}
|
||||
.h-inline-2xl {
|
||||
height: calc(var(--font-size-2xl) * var(--line-height-2xl));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user