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