224 lines
6.1 KiB
SCSS
224 lines
6.1 KiB
SCSS
// --------------------------------------------------
|
|
// Variables used throughout the theme
|
|
// --------------------------------------------------
|
|
|
|
// Layout dimensions
|
|
// --------------------------------------------------
|
|
|
|
$small-width: 800px !default;
|
|
$medium-width: 995px !default;
|
|
$large-width: 1110px !default;
|
|
|
|
$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;
|
|
|
|
// 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";
|