mirror of
https://github.com/Kong/insomnia
synced 2024-11-08 23:00:30 +00:00
955131472a
ligatures * Make font-size and font-family based on CSS variables
86 lines
2.0 KiB
Plaintext
86 lines
2.0 KiB
Plaintext
/* Fonts */
|
|
html {
|
|
--font-size: 13px;
|
|
}
|
|
|
|
@font-size: var(--font-size);
|
|
@font-size-xxs: ~'calc(var(--font-size) * 0.6)';
|
|
@font-size-xs: ~'calc(var(--font-size) * 0.8)';
|
|
@font-size-sm: ~'calc(var(--font-size) * 0.9)';
|
|
@font-size-md: ~'calc(var(--font-size) * 1.0)';
|
|
@font-size-lg: ~'calc(var(--font-size) * 1.2)';
|
|
@font-size-xl: ~'calc(var(--font-size) * 1.35)';
|
|
@font-size-xxl: ~'calc(var(--font-size) * 1.5)';
|
|
@font-size-xxxl: ~'calc(var(--font-size) * 1.7)';
|
|
|
|
/* Padding */
|
|
@padding-md: ~'calc(var(--font-size) * 1.2)';
|
|
@padding-sm: ~'calc(var(--font-size) * 0.6)';
|
|
@padding-xs: ~'calc(var(--font-size) * 0.4)';
|
|
@padding-xxs: ~'calc(var(--font-size) * 0.2)';
|
|
@padding-lg: ~'calc(var(--font-size) * 2.5)';
|
|
@padding-xl: ~'calc(var(--font-size) * 5)';
|
|
|
|
/* Wrapper */
|
|
// line-height-md = x * 3.6
|
|
// line-height-sm = x * 3.6 * 0.8 (2.88)
|
|
// line-height-xs = x * 3.6 * 0.8 * 0.85 (2.448)
|
|
// line-height-xxs= x * 3.6 * 0.8 * 0.85 * 0.85 (2.08)
|
|
@line-height-md: ~'calc(var(--font-size) * 3.6)';
|
|
@line-height-sm: ~'calc(var(--font-size) * 2.88)';
|
|
@line-height-xs: ~'calc(var(--font-size) * 2.448)';
|
|
@line-height-xxs: ~'calc(var(--font-size) * 2.08)';
|
|
|
|
/* Nav */
|
|
@height-nav: @line-height-md;
|
|
|
|
/* Scrollbars */
|
|
@scrollbar-width: ~'calc(var(--font-size) * 0.6)';
|
|
|
|
/* Borders */
|
|
@radius-sm: ~'calc(var(--font-size) * 0.2)';
|
|
@radius-md: ~'calc(var(--font-size) * 0.3)';
|
|
|
|
/* Dropdowns */
|
|
@dropdown-min-width: ~'calc(var(--font-size) * 12)';
|
|
|
|
/* Modals */
|
|
@modal-width: ~'calc(var(--font-size) * 60)';
|
|
@modal-width-wide: ~'calc(var(--font-size) * 70)';
|
|
|
|
/* Other */
|
|
@drag-width: ~'calc(var(--font-size) * 0.5)';
|
|
|
|
/* Breakpoints */
|
|
@breakpoint-lg: 1100px;
|
|
@breakpoint-md: 880px;
|
|
@breakpoint-sm: 660px;
|
|
|
|
.txt-xxs {
|
|
font-size: @font-size-xxs !important;
|
|
}
|
|
|
|
.txt-xs {
|
|
font-size: @font-size-xs !important;
|
|
}
|
|
|
|
.txt-sm {
|
|
font-size: @font-size-sm !important;
|
|
}
|
|
|
|
.txt-md {
|
|
font-size: @font-size-md !important;
|
|
}
|
|
|
|
.txt-lg {
|
|
font-size: @font-size-lg !important;
|
|
}
|
|
|
|
.txt-xl {
|
|
font-size: @font-size-xl !important;
|
|
}
|
|
|
|
.txt-xxl {
|
|
font-size: @font-size-xxl !important;
|
|
}
|