mirror of
https://github.com/discourse/discourse.git
synced 2025-01-22 20:58:48 +08:00
59097b207f
Over the years we accrued many spelling mistakes in the code base. This PR attempts to fix spelling mistakes and typos in all areas of the code that are extremely safe to change - comments - test descriptions - other low risk areas
227 lines
6.2 KiB
SCSS
227 lines
6.2 KiB
SCSS
// --------------------------------------------------
|
|
// Variables used throughout the theme
|
|
// --------------------------------------------------
|
|
|
|
// Layout dimensions
|
|
// --------------------------------------------------
|
|
|
|
$small-width: 800px !default;
|
|
$medium-width: 995px !default;
|
|
$large-width: 1110px !default;
|
|
|
|
$input-padding: 4px 10px;
|
|
$topic-body-width: 690px;
|
|
$topic-body-width-padding: 11px;
|
|
$topic-avatar-width: 45px;
|
|
$reply-area-max-width: 1475px !default;
|
|
|
|
// Brand color variables
|
|
// --------------------------------------------------
|
|
|
|
$google: #ffffff !default;
|
|
$google-hover: darken($google, 5%) !default;
|
|
$instagram: #e1306c !default;
|
|
$instagram-hover: darken($instagram, 15%) !default;
|
|
$facebook: #1877f2 !default;
|
|
$facebook-hover: darken($facebook, 15%) !default;
|
|
$cas: #70ba61 !default;
|
|
$twitter: #1da1f2 !default;
|
|
$twitter-hover: darken($twitter, 10%) !default;
|
|
$github: #100e0f !default;
|
|
$github-hover: lighten($github, 20%) !default;
|
|
$discord: #7289da !default;
|
|
$discord-hover: darken($discord, 10%) !default;
|
|
|
|
// Badge color variables
|
|
// --------------------------------------------------
|
|
|
|
$gold: rgb(231, 195, 0) !default;
|
|
$silver: #c0c0c0 !default;
|
|
$bronze: #cd7f32 !default;
|
|
|
|
// Fonts
|
|
// --------------------------------------------------
|
|
|
|
$base-font-family: var(--font-family) !default;
|
|
$base-font-size-smallest: var(--base-font-size-smallest) !default;
|
|
$base-font-size-smaller: var(--base-font-size-smaller) !default;
|
|
$base-font-size: var(--base-font-size) !default;
|
|
$base-font-size-larger: var(--base-font-size-larger) !default;
|
|
$base-font-size-largest: var(--base-font-size-largest) !default;
|
|
$heading-font-family: var(--heading-font-family) !default;
|
|
|
|
// Font-size definitions, multiplier ^ (step / interval)
|
|
$font-up-6: var(--font-up-6) !default;
|
|
$font-up-5: var(--font-up-5) !default;
|
|
$font-up-4: var(--font-up-4) !default;
|
|
$font-up-3: var(--font-up-3) !default;
|
|
$font-up-2: var(--font-up-2) !default;
|
|
$font-up-1: var(--font-up-1) !default;
|
|
$font-0: var(--font-0);
|
|
$font-down-1: var(--font-down-1) !default;
|
|
$font-down-2: var(--font-down-2) !default;
|
|
$font-down-3: var(--font-down-3) !default;
|
|
$font-down-4: var(--font-down-4) !default;
|
|
$font-down-5: var(--font-down-5) !default;
|
|
$font-down-6: var(--font-down-6) !default;
|
|
|
|
$font-size-ios-input: var(--font-size-ios-input) !default;
|
|
|
|
// Common line-heights
|
|
$line-height-small: var(--line-height-small) !default;
|
|
$line-height-medium: var(--line-height-medium) !default;
|
|
$line-height-large: var(--line-height-large) !default;
|
|
|
|
@import "common/foundation/math";
|
|
|
|
// Z-index
|
|
// --------------------------------------------------
|
|
|
|
$z-layers: (
|
|
"max": 9999,
|
|
"modal": (
|
|
"tooltip": 1600,
|
|
"popover": 1500,
|
|
"dropdown": 1400,
|
|
"content": 1300,
|
|
"overlay": 1200,
|
|
),
|
|
"fullscreen": 1150,
|
|
"mobile-composer": 1100,
|
|
"ipad-header-nav": 1020,
|
|
"header": 1000,
|
|
"footer-nav": 900,
|
|
"tooltip": 600,
|
|
"composer": (
|
|
"dropdown": 700,
|
|
"tooltip": 600,
|
|
"popover": 500,
|
|
"content": 400,
|
|
),
|
|
"dropdown": 300,
|
|
"usercard": 200,
|
|
"timeline": 100,
|
|
"base": 1,
|
|
);
|
|
|
|
@function map-has-nested-keys($map, $keys...) {
|
|
@each $key in $keys {
|
|
@if not map-has-key($map, $key) {
|
|
@return false;
|
|
}
|
|
$map: map-get($map, $key);
|
|
}
|
|
@return true;
|
|
}
|
|
|
|
@function map-deep-get($map, $keys...) {
|
|
@each $key in $keys {
|
|
$map: map-get($map, $key);
|
|
}
|
|
@return $map;
|
|
}
|
|
|
|
@function z($layers...) {
|
|
@if not map-has-nested-keys($z-layers, $layers...) {
|
|
@warn "No layer defined for `#{inspect($layers...)}` in $z-layers map. Check variables.scss, property omitted.";
|
|
}
|
|
@return map-deep-get($z-layers, $layers...);
|
|
}
|
|
|
|
// Box-shadow
|
|
// --------------------------------------------------
|
|
|
|
$box-shadow: (
|
|
"modal": 0 8px 60px rgba(0, 0, 0, 0.6),
|
|
"composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
|
|
"menu-panel": 0 12px 12px rgba(0, 0, 0, 0.15),
|
|
"card": 0 4px 14px rgba(0, 0, 0, 0.15),
|
|
"dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
|
|
"header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
|
|
"footer-nav": 0 0 2px 0 rgba(0, 0, 0, 0.25),
|
|
"kbd": (
|
|
0 2px 0 rgba(0, 0, 0, 0.2),
|
|
0 0 0 1px dark-light-choose(#fff, #000) inset,
|
|
),
|
|
"focus": 0 0 3px 0 $tertiary,
|
|
"focus-danger": 0 0 6px 0 $danger,
|
|
);
|
|
|
|
@function shadow($key) {
|
|
@return map-get($box-shadow, $key);
|
|
}
|
|
|
|
// Color utilities
|
|
// --------------------------------------------------
|
|
|
|
// w3c definition of color brightness https://www.w3.org/TR/AERT#color-contrast
|
|
@function dc-color-brightness($color) {
|
|
@return (
|
|
(red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)
|
|
);
|
|
}
|
|
|
|
// Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2
|
|
@function srgb-scale($foreground, $background, $percent) {
|
|
$ratio: ($percent / 100%);
|
|
$iratio: 1 - $ratio;
|
|
$f_r2: red($foreground) * red($foreground);
|
|
$f_g2: green($foreground) * green($foreground);
|
|
$f_b2: blue($foreground) * blue($foreground);
|
|
$b_r2: red($background) * red($background);
|
|
$b_g2: green($background) * green($background);
|
|
$b_b2: blue($background) * blue($background);
|
|
$r_r2: $f_r2 * $ratio + $b_r2 * $iratio;
|
|
$r_g2: $f_g2 * $ratio + $b_g2 * $iratio;
|
|
$r_b2: $f_b2 * $ratio + $b_b2 * $iratio;
|
|
$r_r: sqrt($r_r2);
|
|
$r_g: sqrt($r_g2);
|
|
$r_b: sqrt($r_b2);
|
|
@return rgb($r_r, $r_g, $r_b);
|
|
}
|
|
|
|
// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
|
|
@function blend-primary-secondary($percent) {
|
|
@return srgb-scale($primary, $secondary, $percent);
|
|
}
|
|
|
|
@function blend-header-primary-background($percent) {
|
|
@return srgb-scale($header_primary, $header_background, $percent);
|
|
}
|
|
|
|
@function dark-light-diff(
|
|
$adjusted-color,
|
|
$comparison-color,
|
|
$lightness,
|
|
$darkness
|
|
) {
|
|
@if dc-color-brightness($adjusted-color) <
|
|
dc-color-brightness($comparison-color)
|
|
{
|
|
@return scale-color($adjusted-color, $lightness: $lightness);
|
|
} @else {
|
|
@return scale-color($adjusted-color, $lightness: $darkness);
|
|
}
|
|
}
|
|
@function dark-light-choose($light-theme-result, $dark-theme-result) {
|
|
@if is-light-color-scheme() {
|
|
@return $light-theme-result;
|
|
} @else {
|
|
@return $dark-theme-result;
|
|
}
|
|
}
|
|
|
|
@function is-light-color-scheme() {
|
|
@if dc-color-brightness($primary) < dc-color-brightness($secondary) {
|
|
@return true;
|
|
} @else {
|
|
@return false;
|
|
}
|
|
}
|
|
|
|
@function is-dark-color-scheme() {
|
|
@return not is-light-color-scheme();
|
|
}
|
|
|
|
@import "color_transformations";
|