91 lines
2.3 KiB
SCSS
91 lines
2.3 KiB
SCSS
|
// 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);
|