insomnia/packages/insomnia-app/app/ui/css/constants/dimensions.less
Evans Y 955131472a * Implemented normal, monospace font selection and on-pff for font variant (#1213)
ligatures

* Make font-size and font-family based on CSS variables
2018-10-17 13:26:19 -04:00

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;
}