@ebay/skin/dist/variables/variables.less

Skin - CSS modules that represent the brand eBay

// Responsive Breakpoints
// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
// most mobile devices would be higher in screen width than the smallest viewport width.

// The variables with underscores are to be considered constants. They can be read, but should not be modified.
@_screen-size-XS: 320px;
@_screen-size-SM: 512px;
@_screen-size-MD: 768px;
@_screen-size-LG: 1024px;
@_screen-size-XL: 1280px;
@_screen-size-XL2: 1440px;
@_screen-size-XL3: 1680px;
@_screen-size-XL4: 1920px;

@_page-grid-max-width: 1584px;
@_page-grid-number-cols-small: 8;
@_page-grid-number-cols-large: 16;
@_page-grid-outside-margins-small: 16px;
@_page-grid-outside-margins-large: 32px;
@_page-grid-outside-margins-max: 48px;
@_page-grid-column-gaps-small: var(--spacing-100);
@_page-grid-column-gaps-large: var(--spacing-200);
@_page-grid-row-gaps-small: var(--spacing-100);
@_page-grid-row-gaps-large: var(--spacing-200);

@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/";
@marketsans-fontname: "Market Sans";
@marketsans-filename-regular: "MarketSans-Regular-WebS";
@marketsans-filename-bold: "MarketSans-Bold-WebS";

@font-family-default: @marketsans-fontname, Arial, sans-serif;
// TODO: remove these in next major version
@font-weight-regular: 500;
@font-weight-bold: 700;

@font-size-12: 0.75rem;
@font-size-14: 0.875rem;
@font-size-16: 1rem;
@font-size-18: 1.125rem; // secret size
@font-size-20: 1.25rem;
@font-size-24: 1.5rem;
@font-size-30: 1.875rem;
@font-size-36: 2.25rem;
@font-size-46: 2.875rem;
@font-size-64: 4rem;

@spacing-25: @spacing-100 * 0.25;
@spacing-50: @spacing-100 * 0.5;
@spacing-75: @spacing-100 * 0.75;
@spacing-100: 8px;
@spacing-125: @spacing-100 * 1.25;
@spacing-150: @spacing-100 * 1.5;
@spacing-200: @spacing-100 * 2;
@spacing-250: @spacing-100 * 2.5;
@spacing-300: @spacing-100 * 3;
@spacing-400: @spacing-100 * 4;
@spacing-450: @spacing-100 * 4.5;
@spacing-600: @spacing-100 * 6;
@spacing-700: @spacing-100 * 7;
@spacing-800: @spacing-100 * 8;

@font-size-giant-3: @font-size-46;
@font-size-giant-2: @font-size-36;
@font-size-giant-1: @font-size-30;
@font-size-large-2: @font-size-24;
@font-size-large-1: @font-size-20;
@font-size-medium: @font-size-16;
@font-size-regular: @font-size-14;
@font-size-small: @font-size-12;