You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
cartodb/assets/stylesheets/variables/sizes.scss

91 lines
2.3 KiB

// Layout
$sLayout-width: 940px;
// Margins
$sMargin-section: 40px; // To separate main section
$sMargin-group: 28px; // To separate groups inside a section
$sMargin-element: 20px; // To separate elements inside a group
$sMargin-elementInline: 12px; // To separate inline elements
$sMargin-min: 4px; // Minimum margin, special cases only
$sMargin-formRow: 20px; // Each row in a form should have a margin-bottom of this value.
// Font sizes
$sFontSize-smaller: 10px;
$sFontSize-small: 11px;
$sFontSize-smallUpperCase: 12px;
$sFontSize-normal: 13px;
$sFontSize-large: 15px;
$sFontSize-larger: 16px;
$sFontSize-largest: 18px;
$sFontSize-huge: 26px;
$sFontSize-mega: 32px;
// Font weights
$sFontWeight-small: 300;
$sFontWeight-lighter: 300;
$sFontWeight-normal: 500;
$sFontWeight-bold: 700;
// Line heights
$sLineHeight-smaller: 15px;
$sLineHeight-small: 16px;
$sLineHeight-normal: 20px;
$sLineHeight-large: 22px;
$sLineHeight-larger: 24px;
$sLineHeight-largest: 27px;
$sLineHeight-button: 15px;
// Buttons
$sButton-height: 40px;
$sButton-border: 1px;
$sButton-borderRadius: 4px;
// Avatars
$sAvatar-borderRadiusSmall: 2px;
$sAvatar-borderRadius: 4px;
$sAvatar-public: 96px;
$sAvatar-big: 60px;
$sAvatar-medium: 42px;
$sAvatar-default: 36px;
$sAvatar-small: 20px;
$sAvatar-meta: 16px;
// Icons
$sIcon-borderRadius: 3px;
$sIcon-layout: 40px;
$sIcon-layoutFontSize: 22px;
$sIcon-action: 20px;
$sIcon-actionPadding: 10px;
$sIcon-inlineWithText: 12px;
$sIcon-inlineWithTextPadding: 10px;
// Cards, e.g. maps, change-privacy-options
$sCard-width: 300px;
$sCard-borderRadius: 4px;
// Forms
$sForms-elementHeight: 40px;
$sForms-borderRadius: 4px;
// Spinner
$sSpinner-default: 36px;
$sSpinner-mini: 12px;
// Media query breakpoints
$sMedia-max: 1000px;
$sMedia-max-embed: 1300px;
$sMedia-desktop: 960px;
$sMedia-tablet: 760px;
$sMedia-mobile: 400px;
$sMedia-s: 480px;
$sMedia-l: 759px;
$sMedia-xl: 1200px;
$sMedia-xxl: 1600px;
$sMedia-min-w-vertical: 600px;
$sMedia-max-w-vertical: 759px;
// Dialog
$sDialogInner-Height: calc(100vh - 430px);