mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
135 lines
5.2 KiB
SCSS
135 lines
5.2 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;
|
|
|
|
$white: var(--white);
|
|
$gray-100: var(--gray-100);
|
|
$gray-200: var(--gray-200);
|
|
$gray-300: var(--gray-300);
|
|
$gray-400: var(--gray-400);
|
|
$gray-500: var(--gray-500);
|
|
$gray-600: var(--gray-600);
|
|
$gray-700: var(--gray-700);
|
|
$gray-800: var(--gray-800);
|
|
$gray-900: var(--gray-900);
|
|
$black: var(--black);
|
|
|
|
$blue: var(--blue);
|
|
$indigo: var(--indigo);
|
|
$purple: var(--purple);
|
|
$pink: var(--pink);
|
|
$red: var(--red);
|
|
$orange: var(--orange);
|
|
$yellow: var(--yellow);
|
|
$green: var(--green);
|
|
$teal: var(--teal);
|
|
$cyan: var(--cyan);
|
|
|
|
$theme-colors: (
|
|
'best': $purple,
|
|
);
|
|
|
|
$yiq-contrasted-threshold: var(--yiq-contrasted-threshold);
|
|
|
|
$alert-bg-level: -10;
|
|
$alert-border-level: -9;
|
|
$alert-color-level: 5;
|
|
|
|
$list-group-item-bg-level: -11;
|
|
$list-group-item-color-level: 6;
|
|
|
|
// 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;
|
|
|
|
// Hard coded for scss compilation to pass
|
|
$b-toast-background-opacity: 100%;
|
|
|
|
// Import default variables after the above setup to compute all other variables.
|
|
@import '~bootstrap/scss/functions.scss';
|
|
@import '_functions-override.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;
|