yunohost-admin/app/src/scss/_variables.scss

101 lines
4.3 KiB
SCSS

// ╭─────────────────────────────────────────────────────────────────╮
// │ │
// │ /!\ DO NOT IMPORT OR DEFINE ACTUAL RULES INTO THIS FILE /!\ │
// │ │
// │ Only things that disappear after scss compilation is allowed. │
// │ │
// ╰─────────────────────────────────────────────────────────────────╯
//
// This file is magically imported into every components so that scss variables,
// functions and mixins can be accessed.
// But if some rules are defined here, they will be copied into the final build as many
// times as there are components…
// ╭─────────────────────────────╮
// │ ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮ │
// │ │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯ │
// │ └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵ │
// ╰─────────────────────────────╯
//
// Bootstrap and BootstrapVue overrides.
// Bootstrap default: `app/node_modules/bootstrap/scss/_variables.scss`
// BootstrapVue default: `app/node_modules/bootstrap-vue/src/_variables.scss`
// TODO: add a feature so the user can set some css variables to change the global aspects ?
// For exemple, turning rounding of elements off, the bases colors, etc.
// $enable-rounded: false;
$font-size-base: .9rem;
$font-weight-bold: 500;
$purple: #9932cc;
$theme-colors: (
'best': $purple,
);
// Replace font-weight 300 with 200
$font-weight-light: 200;
$display1-weight: 200;
$display2-weight: 200;
$display3-weight: 200;
$display4-weight: 200;
$lead-font-weight: 200;
// Set fonts
$font-family-sans-serif: 'FiraGO', 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$font-family-monospace: 'Fira Code', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
$h2-font-size: $font-size-base * 1.5;
$h3-font-size: $font-size-base * 1.4;
$h4-font-size: $font-size-base * 1.25;
$h5-font-size: $font-size-base * 1.1;
$alert-padding-x: 1rem;
$card-spacer-y: .6rem;
$card-spacer-x: 1rem;
$list-group-item-padding-x: 1rem;
// Import default variables after the above setup to compute all other variables.
@import '~bootstrap/scss/functions.scss';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins.scss';
@import '~bootstrap-vue/src/variables';
$body-color: $gray-800;
$hr-border-color: $gray-200;
$list-group-action-color: $gray-800;
// ╭──────────────────────────────────────╮
// │ ┌─╴╭─╮┌─╮╷ ╭ ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
// │ ├─╴│ │├┬╯├┴╮╶─╴├─┤│││├─╴╰─╮│ ││││├─╴ │
// │ ╵ ╰─╯╵ ╰╵ ╵ ╵ ╵╰╯╯╰─╴╶─╯╰─╯╵╵╵╰─╴ │
// ╰──────────────────────────────────────╯
//
// Fork-awesome variable overrides.
// default: `app/node_modules/fork-awesome/scss/_variables.scss`
$fa-font-path: '~fork-awesome/fonts';
$fa-font-size-base: $font-size-base;
@import '~fork-awesome/scss/variables';
// ╭────────────────────╮
// │ ╭─╴╷ ╷╭─╴╶┬╴╭─╮╭╮╮ │
// │ │ │ │╰─╮ │ │ ││││ │
// │ ╰─╴╰─╯╶─╯ ╵ ╰─╯╵╵╵ │
// ╰────────────────────╯
$thin-border: $hr-border-width solid $hr-border-color;
$btn-padding-y-xs: .25rem;
$btn-padding-x-xs: .35rem;
$btn-line-height-xs: 1.5;