|
| 1 | +// Responsive Breakpoints |
| 2 | +// The first breakpoint simply indicates minimum support level. It should not be used with media queries. |
| 3 | +// Mobile-first means the default layout applies to mobile and there should be no mimimums even though |
| 4 | +// most mobile devices would be higher in screen width than the smallest viewport width. |
| 5 | + |
| 6 | +// The variables with underscores are to be considered constants. They can be read, but should not be modified. |
| 7 | +@_screen-size-XS: 320px; |
| 8 | +@_screen-size-SM: 512px; |
| 9 | +@_screen-size-MD: 768px; |
| 10 | +@_screen-size-LG: 1024px; |
| 11 | +@_screen-size-XL: 1280px; |
| 12 | +@_screen-size-XL2: 1440px; |
| 13 | +@_screen-size-XL3: 1680px; |
| 14 | +@_screen-size-XL4: 1920px; |
| 15 | + |
| 16 | +@_page-grid-max-width: 1584px; |
| 17 | +@_page-grid-number-cols-small: 8; |
| 18 | +@_page-grid-number-cols-large: 16; |
| 19 | +@_page-grid-outside-margins-small: 16px; |
| 20 | +@_page-grid-outside-margins-large: 32px; |
| 21 | +@_page-grid-outside-margins-max: 48px; |
| 22 | +@_page-grid-column-gaps-small: var(--spacing-100); |
| 23 | +@_page-grid-column-gaps-large: var(--spacing-200); |
| 24 | +@_page-grid-row-gaps-small: var(--spacing-100); |
| 25 | +@_page-grid-row-gaps-large: var(--spacing-200); |
| 26 | + |
| 27 | +@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/"; |
| 28 | +@marketsans-fontname: "Market Sans"; |
| 29 | +@marketsans-filename-regular: "MarketSans-Regular-WebS"; |
| 30 | +@marketsans-filename-bold: "MarketSans-SemiBold-WebS"; |
| 31 | + |
| 32 | +@font-family-default: @marketsans-fontname, Arial, sans-serif; |
| 33 | +// TODO: remove these in next major version |
| 34 | +@font-weight-regular: 500; |
| 35 | +@font-weight-bold: 700; |
| 36 | + |
| 37 | +@font-size-12: 0.75rem; |
| 38 | +@font-size-14: 0.875rem; |
| 39 | +@font-size-16: 1rem; |
| 40 | +@font-size-18: 1.125rem; // secret size |
| 41 | +@font-size-20: 1.25rem; |
| 42 | +@font-size-24: 1.5rem; |
| 43 | +@font-size-30: 1.875rem; |
| 44 | +@font-size-36: 2.25rem; |
| 45 | +@font-size-46: 2.875rem; |
| 46 | +@font-size-64: 4rem; |
| 47 | + |
| 48 | +@spacing-25: @spacing-100 * 0.25; |
| 49 | +@spacing-50: @spacing-100 * 0.5; |
| 50 | +@spacing-75: @spacing-100 * 0.75; |
| 51 | +@spacing-100: 8px; |
| 52 | +@spacing-125: @spacing-100 * 1.25; |
| 53 | +@spacing-150: @spacing-100 * 1.5; |
| 54 | +@spacing-200: @spacing-100 * 2; |
| 55 | +@spacing-250: @spacing-100 * 2.5; |
| 56 | +@spacing-300: @spacing-100 * 3; |
| 57 | +@spacing-400: @spacing-100 * 4; |
| 58 | +@spacing-450: @spacing-100 * 4.5; |
| 59 | +@spacing-600: @spacing-100 * 6; |
| 60 | +@spacing-700: @spacing-100 * 7; |
| 61 | +@spacing-800: @spacing-100 * 8; |
| 62 | + |
| 63 | +@font-size-giant-3: @font-size-46; |
| 64 | +@font-size-giant-2: @font-size-36; |
| 65 | +@font-size-giant-1: @font-size-30; |
| 66 | +@font-size-large-2: @font-size-24; |
| 67 | +@font-size-large-1: @font-size-20; |
| 68 | +@font-size-medium: @font-size-16; |
| 69 | +@font-size-regular: @font-size-14; |
| 70 | +@font-size-small: @font-size-12; |
0 commit comments