mirror of https://github.com/keeweb/keeweb.git
94 lines
2.5 KiB
SCSS
94 lines
2.5 KiB
SCSS
// Typography
|
|
$base-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Helvetica',
|
|
'Roboto', 'Arial', 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'STXihei',
|
|
'华文细黑', sans-serif;
|
|
$heading-font-family: $base-font-family;
|
|
$monospace-font-family: 'SFMono-Regular', Monaco, Consolas, 'Lucida Console', monospace;
|
|
|
|
// Font Sizes
|
|
$base-font-size: 12px;
|
|
$large-pass-font-size: 22px;
|
|
|
|
// Line height
|
|
$base-line-height: 1.5;
|
|
$heading-line-height: 1.2;
|
|
|
|
// Other Sizes
|
|
$base-border-radius: 1px;
|
|
$base-spacing: $base-line-height * 1em;
|
|
$small-spacing: $base-spacing / 2;
|
|
$tiny-spacing: $small-spacing / 2;
|
|
$base-z-index: 0;
|
|
$base-padding-v: 0.5em;
|
|
$base-padding-h: 1em;
|
|
$mobile-back-button-height: 3em;
|
|
$base-padding: $base-padding-v $base-padding-h;
|
|
$medium-padding-v: 1em;
|
|
$medium-padding-h: 1.2em;
|
|
$medium-padding: $medium-padding-v $medium-padding-h;
|
|
$base-padding-px: 5px 10px;
|
|
$modal-icon-size: 6em;
|
|
$large-padding: 2em;
|
|
$titlebar-padding-small: 24px;
|
|
$titlebar-padding-large: 40px;
|
|
|
|
// Borders
|
|
@function base-border() {
|
|
@return 1px solid var(--base-border-color);
|
|
}
|
|
@function light-border() {
|
|
@return 1px solid var(--light-border-color);
|
|
}
|
|
@function selected-border-width() {
|
|
@return var(--selected-border-width);
|
|
}
|
|
@function selected-border() {
|
|
@return selected-border-width() solid var(--action-color);
|
|
}
|
|
@function selected-hover-border() {
|
|
@return var(--accent-border-width) solid var(--action-color);
|
|
}
|
|
@function selected-transparent-border() {
|
|
@return var(--accent-border-width) solid transparent;
|
|
}
|
|
@function focused-outline() {
|
|
@return 1px solid var(--action-color);
|
|
}
|
|
|
|
// Forms
|
|
@function form-box-shadow() {
|
|
@return inset 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
}
|
|
@function form-box-shadow-focus() {
|
|
@return form-box-shadow(),
|
|
0 0 var(--focus-shadow-blur) var(--focus-shadow-spread) var(--form-box-shadow-color-focus);
|
|
}
|
|
@function form-box-shadow-focus-error() {
|
|
@return form-box-shadow(),
|
|
0 0 var(--focus-shadow-blur) var(--focus-shadow-spread)
|
|
var(--form-box-shadow-color-focus-error);
|
|
}
|
|
|
|
// Shadows
|
|
@function dropdown-box-shadow() {
|
|
@return 0 0 50px var(--dropdown-box-shadow-color);
|
|
}
|
|
|
|
// Animations
|
|
$base-duration: 150ms;
|
|
$base-timing: ease;
|
|
$slow-transition-in: $base-duration * 2 ease-in;
|
|
$slow-transition-out: $base-duration ease-out;
|
|
$tip-transition-in: 500ms $ease-in-expo;
|
|
$tip-transition-out: $slow-transition-out;
|
|
|
|
// Math
|
|
$sqrt2: 1.41;
|
|
|
|
$z-index-no-modal: 10000;
|
|
$z-index-modal: 100000;
|
|
|
|
// Screen sizes
|
|
$tablet-width: 736px;
|
|
$mobile-width: 620px;
|