2016-03-18 16:37:10 +00:00
|
|
|
/*
|
|
|
|
* Layout
|
|
|
|
*/
|
2017-10-06 20:40:41 +00:00
|
|
|
$grid-size: 8px;
|
2018-07-24 21:17:49 +00:00
|
|
|
$gutter-collapsed-width: 62px;
|
|
|
|
$gutter-width: 290px;
|
|
|
|
$gutter-inner-width: 250px;
|
2018-03-19 09:47:50 +00:00
|
|
|
$sidebar-transition-duration: 0.3s;
|
2016-06-30 15:06:31 +00:00
|
|
|
$sidebar-breakpoint: 1024px;
|
2018-03-19 09:47:50 +00:00
|
|
|
$default-transition-duration: 0.15s;
|
2017-10-20 23:07:48 +00:00
|
|
|
$contextual-sidebar-width: 220px;
|
|
|
|
$contextual-sidebar-collapsed-width: 50px;
|
2018-11-02 13:07:17 +00:00
|
|
|
$toggle-sidebar-height: 48px;
|
2020-03-30 18:08:07 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
🚨 Do not use this spacing scale — it is deprecated and being removed. 🚨
|
|
|
|
See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
|
|
|
|
|
|
|
|
Instead, if you need a spacing class, add it to app/assets/stylesheets/framework/common.scss,
|
|
|
|
using the following values.
|
|
|
|
|
|
|
|
$gl-spacing-scale-0: 0;
|
|
|
|
$gl-spacing-scale-1: 2px;
|
|
|
|
$gl-spacing-scale-2: 4px;
|
|
|
|
$gl-spacing-scale-3: 8px;
|
|
|
|
$gl-spacing-scale-4: 12px;
|
|
|
|
$gl-spacing-scale-5: 16px;
|
|
|
|
$gl-spacing-scale-6: 24px;
|
|
|
|
$gl-spacing-scale-7: 32px;
|
|
|
|
$gl-spacing-scale-8: 40px;
|
|
|
|
$gl-spacing-scale-9: 48px;
|
|
|
|
$gl-spacing-scale-10: 56px;
|
|
|
|
$gl-spacing-scale-11: 64px;
|
|
|
|
$gl-spacing-scale-12: 80px;
|
|
|
|
$gl-spacing-scale-13: 96px;
|
|
|
|
|
|
|
|
E.g., a padding top of 96px can be added using:
|
|
|
|
.gl-shim-pt-13 {
|
|
|
|
padding-top: 96px;
|
|
|
|
}
|
|
|
|
|
|
|
|
Please use -shim- so it can be differentiated from the old scale classes.
|
|
|
|
|
|
|
|
These will be replaced when the Gitlab UI utilities are included.
|
|
|
|
**/
|
2019-05-07 17:46:33 +00:00
|
|
|
$spacing-scale: (
|
|
|
|
0: 0,
|
|
|
|
1: #{0.5 * $grid-size},
|
|
|
|
2: $grid-size,
|
|
|
|
3: #{2 * $grid-size},
|
|
|
|
4: #{3 * $grid-size},
|
|
|
|
5: #{4 * $grid-size}
|
|
|
|
);
|
2016-03-18 16:37:10 +00:00
|
|
|
|
2019-10-31 12:06:26 +00:00
|
|
|
/*
|
|
|
|
* Why another sizing scale???
|
|
|
|
* Great question, friend!
|
|
|
|
* This size scale is a "backport" of the equivalent set of "named" sizes
|
|
|
|
* (e.g. `xl` versus `70`) that came from the following design document as of 2019-10-23:
|
|
|
|
*
|
|
|
|
* https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/forms-spec-previews/
|
|
|
|
*
|
|
|
|
* (See `input-` items at the bottom)
|
|
|
|
*
|
|
|
|
* The presumption here is that these sizes will be standardized in GitLab UI and thus will be
|
|
|
|
* broadly useful here in the GitLab product when not using the GitLab UI components.
|
|
|
|
*/
|
|
|
|
$size-scale: (
|
|
|
|
'xs': #{10 * $grid-size},
|
|
|
|
's': #{20 * $grid-size},
|
|
|
|
'm': #{30 * $grid-size},
|
|
|
|
'l': #{40 * $grid-size},
|
|
|
|
'xl': #{70 * $grid-size}
|
|
|
|
);
|
|
|
|
|
2020-06-11 15:08:36 +00:00
|
|
|
// Color schema
|
|
|
|
$darken-normal-factor: 7% !default;
|
|
|
|
$darken-dark-factor: 10% !default;
|
|
|
|
$darken-border-factor: 5% !default;
|
|
|
|
$darken-border-dashed-factor: 25% !default;
|
|
|
|
|
|
|
|
$white: #fff !default;
|
|
|
|
$white-normal: #f0f0f0 !default;
|
|
|
|
$white-dark: #eaeaea !default;
|
|
|
|
$white-transparent: rgba(255, 255, 255, 0.8) !default;
|
|
|
|
|
|
|
|
$gray-lightest: #fdfdfd !default;
|
|
|
|
$gray-light: #fafafa !default;
|
|
|
|
$gray-lighter: #f9f9f9 !default;
|
|
|
|
$gray-normal: #f5f5f5 !default;
|
|
|
|
$gray-dark: darken($gray-light, $darken-dark-factor) !default;
|
|
|
|
$gray-darker: #eee !default;
|
|
|
|
$gray-darkest: #c4c4c4 !default;
|
|
|
|
|
|
|
|
$purple: #6d49cb !default;
|
|
|
|
$purple-light: #ede8fb !default;
|
|
|
|
|
|
|
|
$black: #000 !default;
|
|
|
|
$black-transparent: rgba(0, 0, 0, 0.3) !default;
|
|
|
|
$almost-black: #242424 !default;
|
|
|
|
|
|
|
|
$t-gray-a-02: rgba($black, 0.02) !default;
|
|
|
|
$t-gray-a-04: rgba($black, 0.04) !default;
|
|
|
|
$t-gray-a-06: rgba($black, 0.06) !default;
|
|
|
|
$t-gray-a-08: rgba($black, 0.08) !default;
|
|
|
|
|
2020-06-17 15:08:36 +00:00
|
|
|
$green-50: #ecf4ee !default;
|
|
|
|
$green-100: #c3e6cd !default;
|
|
|
|
$green-200: #91d4a8 !default;
|
|
|
|
$green-300: #52b87a !default;
|
|
|
|
$green-400: #2da160 !default;
|
|
|
|
$green-500: #108548 !default;
|
|
|
|
$green-600: #217645 !default;
|
|
|
|
$green-700: #24663b !default;
|
|
|
|
$green-800: #0d532a !default;
|
2020-06-11 15:08:36 +00:00
|
|
|
$green-900: #0a4020 !default;
|
|
|
|
$green-950: #072b15 !default;
|
|
|
|
|
2020-06-17 15:08:36 +00:00
|
|
|
$blue-50: #e9f3fc !default;
|
|
|
|
$blue-100: #cbe2f9 !default;
|
|
|
|
$blue-200: #9dc7f1 !default;
|
|
|
|
$blue-300: #63a6e9 !default;
|
|
|
|
$blue-400: #428fdc !default;
|
|
|
|
$blue-500: #1f75cb !default;
|
|
|
|
$blue-600: #1068bf !default;
|
|
|
|
$blue-700: #0b5cad !default;
|
|
|
|
$blue-800: #064787 !default;
|
|
|
|
$blue-900: #033464 !default;
|
|
|
|
$blue-950: #002850 !default;
|
2020-06-11 15:08:36 +00:00
|
|
|
|
2020-09-09 06:08:55 +00:00
|
|
|
$orange-50: #fdf1dd !default;
|
|
|
|
$orange-100: #f5d9a8 !default;
|
|
|
|
$orange-200: #e9be74 !default;
|
|
|
|
$orange-300: #d99530 !default;
|
|
|
|
$orange-400: #c17d10 !default;
|
|
|
|
$orange-500: #ab6100 !default;
|
|
|
|
$orange-600: #9e5400 !default;
|
|
|
|
$orange-700: #8f4700 !default;
|
|
|
|
$orange-800: #703800 !default;
|
|
|
|
$orange-900: #5c2900 !default;
|
|
|
|
$orange-950: #421f00 !default;
|
2020-06-11 15:08:36 +00:00
|
|
|
|
2020-06-16 21:08:20 +00:00
|
|
|
$red-50: #fcf1ef !default;
|
|
|
|
$red-100: #fdd4cd !default;
|
|
|
|
$red-200: #fcb5aa !default;
|
|
|
|
$red-300: #f57f6c !default;
|
|
|
|
$red-400: #ec5941 !default;
|
|
|
|
$red-500: #dd2b0e !default;
|
|
|
|
$red-600: #c91c00 !default;
|
|
|
|
$red-700: #ae1800 !default;
|
|
|
|
$red-800: #8d1300 !default;
|
|
|
|
$red-900: #660e00 !default;
|
|
|
|
$red-950: #4d0a00 !default;
|
2020-06-11 15:08:36 +00:00
|
|
|
|
2020-09-09 21:08:33 +00:00
|
|
|
$purple-50: #f4f0ff !default;
|
|
|
|
$purple-100: #e1d8f9 !default;
|
|
|
|
$purple-200: #cbbbf2 !default;
|
|
|
|
$purple-300: #ac93e6 !default;
|
|
|
|
$purple-400: #9475db !default;
|
|
|
|
$purple-500: #7b58cf !default;
|
|
|
|
$purple-600: #694cc0 !default;
|
|
|
|
$purple-700: #5943b6 !default;
|
|
|
|
$purple-800: #453894 !default;
|
|
|
|
$purple-900: #2f2a6b !default;
|
|
|
|
$purple-950: #232150 !default;
|
|
|
|
|
2020-06-11 15:08:36 +00:00
|
|
|
$gray-10: #fafafa !default;
|
|
|
|
$gray-50: #f0f0f0 !default;
|
|
|
|
$gray-100: #dbdbdb !default;
|
2020-07-13 15:09:08 +00:00
|
|
|
$gray-200: #bfbfbf !default;
|
2020-07-24 06:09:38 +00:00
|
|
|
$gray-300: #999 !default;
|
2020-07-29 21:09:52 +00:00
|
|
|
$gray-400: #868686 !default;
|
2020-07-30 18:09:39 +00:00
|
|
|
$gray-500: #666 !default;
|
2020-08-03 18:10:05 +00:00
|
|
|
$gray-600: #5e5e5e !default;
|
2020-08-17 21:09:56 +00:00
|
|
|
$gray-700: #525252 !default;
|
2020-08-18 21:09:57 +00:00
|
|
|
$gray-800: #404040 !default;
|
2020-07-15 09:09:34 +00:00
|
|
|
$gray-900: #303030 !default;
|
2020-06-11 15:08:36 +00:00
|
|
|
$gray-950: #1f1f1f !default;
|
2019-01-14 20:17:22 +00:00
|
|
|
|
2019-04-03 02:24:07 +00:00
|
|
|
$greens: (
|
|
|
|
'50': $green-50,
|
|
|
|
'100': $green-100,
|
|
|
|
'200': $green-200,
|
|
|
|
'300': $green-300,
|
|
|
|
'400': $green-400,
|
|
|
|
'500': $green-500,
|
|
|
|
'600': $green-600,
|
|
|
|
'700': $green-700,
|
|
|
|
'800': $green-800,
|
|
|
|
'900': $green-900,
|
|
|
|
'950': $green-950
|
|
|
|
);
|
|
|
|
|
|
|
|
$blues: (
|
|
|
|
'50': $blue-50,
|
|
|
|
'100': $blue-100,
|
|
|
|
'200': $blue-200,
|
|
|
|
'300': $blue-300,
|
|
|
|
'400': $blue-400,
|
|
|
|
'500': $blue-500,
|
|
|
|
'600': $blue-600,
|
|
|
|
'700': $blue-700,
|
|
|
|
'800': $blue-800,
|
|
|
|
'900': $blue-900,
|
|
|
|
'950': $blue-950
|
|
|
|
);
|
|
|
|
|
|
|
|
$oranges: (
|
|
|
|
'50': $orange-50,
|
|
|
|
'100': $orange-100,
|
|
|
|
'200': $orange-200,
|
|
|
|
'300': $orange-300,
|
|
|
|
'400': $orange-400,
|
|
|
|
'500': $orange-500,
|
|
|
|
'600': $orange-600,
|
|
|
|
'700': $orange-700,
|
|
|
|
'800': $orange-800,
|
|
|
|
'900': $orange-900,
|
|
|
|
'950': $orange-950
|
|
|
|
);
|
|
|
|
|
|
|
|
$reds: (
|
|
|
|
'50': $red-50,
|
|
|
|
'100': $red-100,
|
|
|
|
'200': $red-200,
|
|
|
|
'300': $red-300,
|
|
|
|
'400': $red-400,
|
|
|
|
'500': $red-500,
|
|
|
|
'600': $red-600,
|
|
|
|
'700': $red-700,
|
|
|
|
'800': $red-800,
|
|
|
|
'900': $red-900,
|
|
|
|
'950': $red-950
|
|
|
|
);
|
|
|
|
|
2020-09-09 21:08:33 +00:00
|
|
|
$purples: (
|
|
|
|
'50': $purple-50,
|
|
|
|
'100': $purple-100,
|
|
|
|
'200': $purple-200,
|
|
|
|
'300': $purple-300,
|
|
|
|
'400': $purple-400,
|
|
|
|
'500': $purple-500,
|
|
|
|
'600': $purple-600,
|
|
|
|
'700': $purple-700,
|
|
|
|
'800': $purple-800,
|
|
|
|
'900': $purple-900,
|
|
|
|
'950': $purple-950
|
|
|
|
);
|
|
|
|
|
2019-04-03 02:24:07 +00:00
|
|
|
$grays: (
|
2020-05-20 00:08:20 +00:00
|
|
|
'10': $gray-10,
|
2019-04-03 02:24:07 +00:00
|
|
|
'50': $gray-50,
|
|
|
|
'100': $gray-100,
|
|
|
|
'200': $gray-200,
|
|
|
|
'300': $gray-300,
|
|
|
|
'400': $gray-400,
|
|
|
|
'500': $gray-500,
|
|
|
|
'600': $gray-600,
|
|
|
|
'700': $gray-700,
|
|
|
|
'800': $gray-800,
|
|
|
|
'900': $gray-900,
|
|
|
|
'950': $gray-950
|
|
|
|
);
|
|
|
|
|
|
|
|
$color-ranges: (
|
|
|
|
'primary': $blues,
|
|
|
|
'secondary': $grays,
|
|
|
|
'success': $greens,
|
|
|
|
'warning': $oranges,
|
|
|
|
'danger': $reds
|
|
|
|
);
|
|
|
|
|
2017-09-11 15:44:42 +00:00
|
|
|
// GitLab themes
|
|
|
|
|
2017-07-07 12:28:06 +00:00
|
|
|
$indigo-50: #f7f7ff;
|
|
|
|
$indigo-100: #ebebfa;
|
|
|
|
$indigo-200: #d1d1f0;
|
|
|
|
$indigo-300: #a6a6de;
|
|
|
|
$indigo-400: #7c7ccc;
|
|
|
|
$indigo-500: #6666c4;
|
|
|
|
$indigo-600: #5b5bbd;
|
|
|
|
$indigo-700: #4b4ba3;
|
|
|
|
$indigo-800: #393982;
|
|
|
|
$indigo-900: #292961;
|
|
|
|
$indigo-950: #1a1a40;
|
2017-06-21 13:45:05 +00:00
|
|
|
|
2017-09-11 15:44:42 +00:00
|
|
|
$theme-blue-50: #f4f8fc;
|
|
|
|
$theme-blue-100: #e6edf5;
|
|
|
|
$theme-blue-200: #c8d7e6;
|
|
|
|
$theme-blue-300: #97b3cf;
|
|
|
|
$theme-blue-400: #648cb4;
|
|
|
|
$theme-blue-500: #4a79a8;
|
|
|
|
$theme-blue-600: #3e6fa0;
|
|
|
|
$theme-blue-700: #305c88;
|
|
|
|
$theme-blue-800: #25496e;
|
|
|
|
$theme-blue-900: #1a3652;
|
|
|
|
$theme-blue-950: #0f2235;
|
|
|
|
|
2018-06-07 07:37:02 +00:00
|
|
|
$theme-light-blue-50: #f2f7fc;
|
|
|
|
$theme-light-blue-100: #ebf1f7;
|
|
|
|
$theme-light-blue-200: #c9dcf2;
|
|
|
|
$theme-light-blue-300: #83abd4;
|
|
|
|
$theme-light-blue-400: #4d86bf;
|
|
|
|
$theme-light-blue-500: #367cc2;
|
|
|
|
$theme-light-blue-600: #3771ab;
|
|
|
|
$theme-light-blue-700: #2261a1;
|
|
|
|
|
2017-09-11 15:44:42 +00:00
|
|
|
$theme-green-50: #f2faf6;
|
|
|
|
$theme-green-100: #e4f3ea;
|
|
|
|
$theme-green-200: #c0dfcd;
|
|
|
|
$theme-green-300: #8ac2a1;
|
|
|
|
$theme-green-400: #52a274;
|
|
|
|
$theme-green-500: #35935c;
|
|
|
|
$theme-green-600: #288a50;
|
|
|
|
$theme-green-700: #1c7441;
|
|
|
|
$theme-green-800: #145d33;
|
|
|
|
$theme-green-900: #0d4524;
|
|
|
|
$theme-green-950: #072d16;
|
|
|
|
|
2018-06-07 07:37:02 +00:00
|
|
|
$theme-light-green-700: #156b39;
|
|
|
|
|
|
|
|
$theme-red-50: #fcf4f2;
|
|
|
|
$theme-red-100: #fae9e6;
|
|
|
|
$theme-red-200: #ebcac5;
|
|
|
|
$theme-red-300: #d99b91;
|
|
|
|
$theme-red-400: #b0655a;
|
|
|
|
$theme-red-500: #ad4a3b;
|
|
|
|
$theme-red-600: #9e4133;
|
|
|
|
$theme-red-700: #912f20;
|
|
|
|
$theme-red-800: #78291d;
|
|
|
|
$theme-red-900: #691a16;
|
|
|
|
$theme-red-950: #36140f;
|
|
|
|
|
|
|
|
$theme-light-red-50: #fff6f5;
|
|
|
|
$theme-light-red-100: #fae2de;
|
|
|
|
$theme-light-red-200: #f7d5d0;
|
|
|
|
$theme-light-red-300: #d9796a;
|
|
|
|
$theme-light-red-400: #cf604e;
|
|
|
|
$theme-light-red-500: #c24b38;
|
|
|
|
$theme-light-red-600: #b03927;
|
|
|
|
$theme-light-red-700: #a62e21;
|
|
|
|
|
2020-06-11 15:08:36 +00:00
|
|
|
$border-white-light: darken($white, $darken-border-factor) !default;
|
|
|
|
$border-white-normal: darken($white-normal, $darken-border-factor) !default;
|
2016-08-19 15:39:18 +00:00
|
|
|
|
2016-12-23 05:44:02 +00:00
|
|
|
$border-gray-light: darken($gray-light, $darken-border-factor);
|
2016-11-28 16:34:47 +00:00
|
|
|
$border-gray-normal: darken($gray-normal, $darken-border-factor);
|
2017-09-04 21:22:11 +00:00
|
|
|
$border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
|
2016-08-19 15:39:18 +00:00
|
|
|
|
2016-03-18 16:37:10 +00:00
|
|
|
/*
|
|
|
|
* UI elements
|
|
|
|
*/
|
2020-07-13 15:09:08 +00:00
|
|
|
$border-color: $gray-100;
|
2018-12-12 21:49:10 +00:00
|
|
|
$shadow-color: $t-gray-a-08;
|
2016-11-10 19:48:20 +00:00
|
|
|
$well-expand-item: #e8f2f7;
|
|
|
|
$well-inner-border: #eef0f2;
|
2016-11-30 13:25:25 +00:00
|
|
|
$well-light-border: #f1f1f1;
|
|
|
|
$well-light-text-color: #5b6169;
|
2016-03-18 16:37:10 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Text
|
|
|
|
*/
|
2016-12-02 19:43:33 +00:00
|
|
|
$gl-font-size: 14px;
|
2018-11-07 17:20:17 +00:00
|
|
|
$gl-font-size-xs: 11px;
|
2018-10-19 12:28:52 +00:00
|
|
|
$gl-font-size-small: 12px;
|
2018-12-07 14:11:42 +00:00
|
|
|
$gl-font-size-large: 16px;
|
2017-08-24 14:13:24 +00:00
|
|
|
$gl-font-weight-normal: 400;
|
|
|
|
$gl-font-weight-bold: 600;
|
2020-04-14 21:09:52 +00:00
|
|
|
$gl-text-color: $gray-900;
|
2020-08-17 21:09:56 +00:00
|
|
|
$gl-text-color-secondary: $gray-500;
|
2020-08-03 18:10:05 +00:00
|
|
|
$gl-text-color-tertiary: $gray-400;
|
2017-07-14 14:16:12 +00:00
|
|
|
$gl-text-color-quaternary: #d6d6d6;
|
2020-04-14 21:09:52 +00:00
|
|
|
$gl-text-color-inverted: $white;
|
2020-06-11 15:08:36 +00:00
|
|
|
$gl-text-color-secondary-inverted: rgba($white, 0.85);
|
2020-08-03 18:10:05 +00:00
|
|
|
$gl-text-color-disabled: $gray-400;
|
2016-10-24 19:49:06 +00:00
|
|
|
$gl-grayish-blue: #7f8fa4;
|
|
|
|
$gl-header-color: #4c4e54;
|
2019-11-06 00:06:13 +00:00
|
|
|
$gl-font-size-12: 12px;
|
|
|
|
$gl-font-size-14: 14px;
|
|
|
|
$gl-font-size-16: 16px;
|
|
|
|
$gl-font-size-28: 28px;
|
|
|
|
$gl-font-size-42: 42px;
|
2016-03-18 16:37:10 +00:00
|
|
|
|
2019-04-03 02:24:07 +00:00
|
|
|
$type-scale: (
|
|
|
|
1: 12px,
|
|
|
|
2: 14px,
|
|
|
|
3: 16px,
|
|
|
|
4: 20px,
|
|
|
|
5: 28px,
|
|
|
|
6: 42px
|
|
|
|
);
|
|
|
|
|
2016-03-18 16:37:10 +00:00
|
|
|
/*
|
|
|
|
* Lists
|
|
|
|
*/
|
2016-11-30 13:25:25 +00:00
|
|
|
$list-border: rgba(0, 0, 0, 0.05);
|
2016-08-04 13:00:18 +00:00
|
|
|
$list-text-height: 42px;
|
|
|
|
|
2016-03-18 16:37:10 +00:00
|
|
|
/*
|
|
|
|
* Code
|
|
|
|
*/
|
2018-07-24 21:17:49 +00:00
|
|
|
$code-font-size: 90%;
|
|
|
|
$code-line-height: 1.6;
|
2020-03-17 21:09:16 +00:00
|
|
|
$code-color: $gray-950;
|
2016-03-18 16:37:10 +00:00
|
|
|
|
2017-10-06 16:06:11 +00:00
|
|
|
/*
|
|
|
|
* Tooltips
|
|
|
|
*/
|
|
|
|
$tooltip-font-size: 12px;
|
|
|
|
|
2016-03-18 16:37:10 +00:00
|
|
|
/*
|
|
|
|
* Padding
|
|
|
|
*/
|
2018-02-02 21:50:09 +00:00
|
|
|
$gl-padding-4: 4px;
|
2020-05-13 12:07:54 +00:00
|
|
|
$gl-padding-6: 6px;
|
2018-06-15 22:28:17 +00:00
|
|
|
$gl-padding-8: 8px;
|
2019-05-30 18:15:57 +00:00
|
|
|
$gl-padding-12: 12px;
|
2018-06-15 22:28:17 +00:00
|
|
|
$gl-padding: 16px;
|
|
|
|
$gl-padding-24: 24px;
|
|
|
|
$gl-padding-32: 32px;
|
2019-02-07 15:14:56 +00:00
|
|
|
$gl-padding-50: 50px;
|
2017-07-06 16:33:18 +00:00
|
|
|
$gl-col-padding: 15px;
|
2016-06-06 18:11:49 +00:00
|
|
|
$gl-input-padding: 10px;
|
2016-01-14 12:59:28 +00:00
|
|
|
$gl-vert-padding: 6px;
|
2016-03-16 23:40:12 +00:00
|
|
|
$gl-padding-top: 10px;
|
2016-07-14 11:58:25 +00:00
|
|
|
$gl-sidebar-padding: 22px;
|
2017-12-21 15:05:47 +00:00
|
|
|
$gl-bar-padding: 3px;
|
2018-08-30 14:31:32 +00:00
|
|
|
$input-horizontal-padding: 12px;
|
2019-02-14 13:40:42 +00:00
|
|
|
$browser-scrollbar-size: 10px;
|
2016-03-18 16:37:10 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Misc
|
|
|
|
*/
|
2017-09-29 21:03:50 +00:00
|
|
|
$header-height: 40px;
|
2020-03-31 15:07:53 +00:00
|
|
|
$header-zindex: 1000;
|
2018-12-13 19:17:19 +00:00
|
|
|
$suggestion-header-height: 46px;
|
2018-05-25 10:08:53 +00:00
|
|
|
$ide-statusbar-height: 25px;
|
2016-03-18 16:37:10 +00:00
|
|
|
$fixed-layout-width: 1280px;
|
2016-12-02 20:38:04 +00:00
|
|
|
$limited-layout-width: 990px;
|
2017-07-11 12:59:04 +00:00
|
|
|
$container-text-max-width: 540px;
|
2016-11-30 20:37:54 +00:00
|
|
|
$gl-avatar-size: 40px;
|
2017-08-10 20:13:38 +00:00
|
|
|
$border-radius-default: 4px;
|
2017-10-16 17:53:12 +00:00
|
|
|
$border-radius-small: 2px;
|
2019-02-25 13:00:05 +00:00
|
|
|
$border-radius-large: 8px;
|
2018-09-06 09:43:14 +00:00
|
|
|
$default-icon-size: 18px;
|
2016-05-04 18:11:38 +00:00
|
|
|
$layout-link-gray: #7e7c7c;
|
2016-06-08 17:44:39 +00:00
|
|
|
$btn-side-margin: 10px;
|
|
|
|
$btn-sm-side-margin: 7px;
|
2018-06-12 20:19:01 +00:00
|
|
|
$btn-margin-5: 5px;
|
2016-11-30 13:25:25 +00:00
|
|
|
$count-arrow-border: #dce0e5;
|
2017-01-20 19:11:09 +00:00
|
|
|
$general-hover-transition-duration: 100ms;
|
2017-01-03 12:07:08 +00:00
|
|
|
$general-hover-transition-curve: linear;
|
2017-06-06 08:28:39 +00:00
|
|
|
$highlight-changes-color: rgb(235, 255, 232);
|
2017-07-31 08:07:51 +00:00
|
|
|
$performance-bar-height: 35px;
|
2019-03-05 00:19:41 +00:00
|
|
|
$system-header-height: 16px;
|
2018-04-02 14:26:59 +00:00
|
|
|
$system-footer-height: $system-header-height;
|
2018-01-19 09:38:34 +00:00
|
|
|
$flash-height: 52px;
|
2019-09-03 09:03:35 +00:00
|
|
|
$flash-container-top: 48px;
|
2018-01-19 09:38:34 +00:00
|
|
|
$context-header-height: 60px;
|
2018-03-19 09:47:50 +00:00
|
|
|
$breadcrumb-min-height: 48px;
|
2019-01-21 20:52:53 +00:00
|
|
|
$home-panel-title-row-height: 64px;
|
|
|
|
$home-panel-avatar-mobile-size: 24px;
|
2020-08-13 18:10:36 +00:00
|
|
|
$issuable-title-max-width: 350px;
|
|
|
|
$milestone-title-max-width: 75px;
|
2018-11-06 14:33:42 +00:00
|
|
|
$gl-line-height: 16px;
|
2020-05-13 12:07:54 +00:00
|
|
|
$gl-line-height-18: 18px;
|
2019-05-28 12:55:37 +00:00
|
|
|
$gl-line-height-20: 20px;
|
2018-11-20 23:36:14 +00:00
|
|
|
$gl-line-height-24: 24px;
|
2018-12-13 12:37:54 +00:00
|
|
|
$gl-line-height-14: 14px;
|
2017-01-03 12:07:08 +00:00
|
|
|
|
2019-03-20 11:38:48 +00:00
|
|
|
$issue-box-upcoming-bg: #8f8f8f;
|
|
|
|
$pages-group-name-color: #4c4e54;
|
|
|
|
|
2016-11-30 13:25:25 +00:00
|
|
|
/*
|
|
|
|
* Common component specific colors
|
|
|
|
*/
|
2017-10-04 19:29:41 +00:00
|
|
|
$user-mention-bg: rgba($blue-500, 0.044);
|
|
|
|
$user-mention-bg-hover: rgba($blue-500, 0.15);
|
2016-03-02 10:34:25 +00:00
|
|
|
|
2016-06-15 21:09:38 +00:00
|
|
|
/* tanuki logo colors */
|
|
|
|
$tanuki-red: #e24329;
|
|
|
|
$tanuki-orange: #fc6d26;
|
|
|
|
$tanuki-yellow: #fca326;
|
|
|
|
|
2014-05-16 10:47:34 +00:00
|
|
|
/*
|
2015-03-07 03:02:12 +00:00
|
|
|
* State colors:
|
2014-05-16 10:47:34 +00:00
|
|
|
*/
|
2018-08-21 17:52:31 +00:00
|
|
|
$green-500-focus: rgba($green-500, 0.4);
|
2016-04-01 19:27:39 +00:00
|
|
|
$gl-btn-active-background: rgba(0, 0, 0, 0.16);
|
|
|
|
$gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
|
2014-05-16 10:47:34 +00:00
|
|
|
|
2015-03-07 05:40:23 +00:00
|
|
|
/*
|
2012-12-01 12:49:21 +00:00
|
|
|
* Commit Diff Colors
|
|
|
|
*/
|
2017-04-13 17:25:47 +00:00
|
|
|
$added: #63c363;
|
|
|
|
$deleted: #f77;
|
|
|
|
$line-added: #ecfdf0;
|
2020-07-03 15:09:13 +00:00
|
|
|
$line-added-dark: #c7f0d2 !default;
|
2017-04-13 17:25:47 +00:00
|
|
|
$line-removed: #fbe9eb;
|
2020-07-03 15:09:13 +00:00
|
|
|
$line-removed-dark: #fac5cd !default;
|
2020-09-07 15:09:04 +00:00
|
|
|
/*
|
|
|
|
* The transparent colors are used in Monaco editor. Using full opacity colors
|
|
|
|
* would hide other layers (selected text, matching brackets).
|
|
|
|
*
|
|
|
|
* When the transparent colors get layered on white background, they create their
|
|
|
|
* full opacity counterparts (computed with https://stackoverflow.com/a/12228643/606571):
|
|
|
|
*
|
|
|
|
* - white + $line-added-transparent = $line-added
|
|
|
|
* - white + $line-added-transparent + $line-added-dark-transparent = $line-added-dark
|
|
|
|
*
|
|
|
|
* More details: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/41553
|
|
|
|
*/
|
|
|
|
$line-added-transparent: rgba(160, 245, 180, 0.2);
|
|
|
|
$line-added-dark-transparent: rgba(51, 188, 90, 0.2);
|
|
|
|
$line-removed-transparent: rgba(235, 145, 155, 0.2);
|
|
|
|
$line-removed-dark-transparent: rgba(246, 53, 85, 0.2);
|
2017-04-13 17:25:47 +00:00
|
|
|
$line-number-old: #f9d7dc;
|
|
|
|
$line-number-new: #ddfbe6;
|
|
|
|
$line-number-select: #fbf2da;
|
2020-04-13 15:09:20 +00:00
|
|
|
$line-target-blue: $blue-50;
|
2017-04-13 17:25:47 +00:00
|
|
|
$line-select-yellow: #fcf8e7;
|
|
|
|
$line-select-yellow-dark: #f0e2bd;
|
2020-06-11 15:08:36 +00:00
|
|
|
$dark-diff-match-bg: rgba($white, 0.3);
|
|
|
|
$dark-diff-match-color: rgba($white, 0.1);
|
2019-02-25 19:03:21 +00:00
|
|
|
$diff-image-info-color: #808080;
|
|
|
|
$diff-view-modes-color: #808080;
|
2016-11-30 13:25:25 +00:00
|
|
|
$diff-view-modes-border: #c1c1c1;
|
2017-10-07 04:25:17 +00:00
|
|
|
$diff-jagged-border-gradient-color: darken($white-normal, 8%);
|
2016-04-06 19:37:09 +00:00
|
|
|
|
2015-03-07 05:40:23 +00:00
|
|
|
/*
|
|
|
|
* Fonts
|
|
|
|
*/
|
2018-07-24 21:17:49 +00:00
|
|
|
$monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
|
2018-05-07 18:06:02 +00:00
|
|
|
'Courier New', 'andale mono', 'lucida console', monospace;
|
2019-05-15 08:14:09 +00:00
|
|
|
$regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell,
|
2018-10-04 08:19:51 +00:00
|
|
|
'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
|
|
'Noto Color Emoji';
|
2016-03-04 12:20:20 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Dropdowns
|
|
|
|
*/
|
2016-03-24 18:54:26 +00:00
|
|
|
$dropdown-width: 300px;
|
2018-01-08 22:04:33 +00:00
|
|
|
$dropdown-min-height: 40px;
|
|
|
|
$dropdown-max-height: 312px;
|
2019-03-07 04:35:12 +00:00
|
|
|
$dropdown-max-height-lg: 445px;
|
2017-09-27 18:07:49 +00:00
|
|
|
$dropdown-vertical-offset: 4px;
|
2018-03-19 09:47:50 +00:00
|
|
|
$dropdown-empty-row-bg: rgba(#000, 0.04);
|
|
|
|
$dropdown-shadow-color: rgba(#000, 0.1);
|
2016-03-15 19:56:28 +00:00
|
|
|
$dropdown-title-btn-color: #bfbfbf;
|
2016-11-30 13:25:25 +00:00
|
|
|
$dropdown-input-fa-color: #c7c7c7;
|
2018-08-09 18:11:56 +00:00
|
|
|
$dropdown-input-focus-shadow: rgba($blue-300, 0.4);
|
2020-06-11 15:08:36 +00:00
|
|
|
$dropdown-loading-bg: rgba($white, 0.6);
|
2016-11-18 20:19:44 +00:00
|
|
|
$dropdown-chevron-size: 10px;
|
2016-12-12 22:26:21 +00:00
|
|
|
$dropdown-toggle-active-border-color: darken($border-color, 14%);
|
2017-12-05 23:55:28 +00:00
|
|
|
$dropdown-fade-mask-height: 32px;
|
2018-05-30 17:28:28 +00:00
|
|
|
$dropdown-member-form-control-width: 163px;
|
2016-03-02 15:40:00 +00:00
|
|
|
|
2016-12-05 19:00:18 +00:00
|
|
|
/*
|
|
|
|
* Filtered Search
|
|
|
|
*/
|
2017-06-15 09:12:15 +00:00
|
|
|
$filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09);
|
2016-12-05 19:00:18 +00:00
|
|
|
|
2017-10-20 23:07:48 +00:00
|
|
|
/*
|
|
|
|
* Contextual Sidebar
|
|
|
|
*/
|
2020-06-11 15:08:36 +00:00
|
|
|
$link-active-background: rgba($black, 0.04);
|
|
|
|
$link-hover-background: rgba($gray-900, 0.06);
|
|
|
|
$inactive-badge-background: rgba($black, 0.08);
|
2018-04-19 14:43:20 +00:00
|
|
|
$sidebar-toggle-height: 60px;
|
2019-08-23 10:21:05 +00:00
|
|
|
$sidebar-toggle-width: 40px;
|
2018-04-19 14:43:20 +00:00
|
|
|
$sidebar-milestone-toggle-bottom-margin: 10px;
|
2017-10-20 23:07:48 +00:00
|
|
|
|
2016-04-01 19:27:39 +00:00
|
|
|
/*
|
|
|
|
* Buttons
|
|
|
|
*/
|
2020-06-11 15:08:36 +00:00
|
|
|
$btn-active-gray: $gray-50;
|
|
|
|
$btn-active-gray-light: $gray-50;
|
2016-12-23 05:44:02 +00:00
|
|
|
$btn-white-active: #848484;
|
2018-02-02 21:50:09 +00:00
|
|
|
$gl-btn-padding: 10px;
|
|
|
|
$gl-btn-line-height: 16px;
|
|
|
|
$gl-btn-vert-padding: 8px;
|
|
|
|
$gl-btn-horz-padding: 12px;
|
2018-12-07 14:11:42 +00:00
|
|
|
$gl-btn-small-font-size: 13px;
|
2018-12-12 19:46:54 +00:00
|
|
|
$gl-btn-small-line-height: 18px;
|
|
|
|
$gl-btn-xs-font-size: 13px;
|
|
|
|
$gl-btn-xs-line-height: 13px;
|
2016-04-01 19:27:39 +00:00
|
|
|
|
2016-12-01 23:41:22 +00:00
|
|
|
/*
|
|
|
|
* Badges
|
|
|
|
*/
|
2017-05-31 15:04:00 +00:00
|
|
|
$badge-bg: rgba(0, 0, 0, 0.07);
|
2016-12-01 23:41:22 +00:00
|
|
|
|
2018-06-08 18:58:30 +00:00
|
|
|
/*
|
|
|
|
* Pagination
|
|
|
|
*/
|
|
|
|
$pagination-padding-y: 6px;
|
|
|
|
$pagination-padding-x: 16px;
|
|
|
|
$pagination-line-height: 20px;
|
|
|
|
$pagination-disabled-color: #cdcdcd;
|
|
|
|
|
2017-08-07 02:29:37 +00:00
|
|
|
/*
|
|
|
|
* Status icons
|
|
|
|
*/
|
|
|
|
$status-icon-size: 22px;
|
|
|
|
|
2016-03-02 15:40:00 +00:00
|
|
|
/*
|
|
|
|
* Award emoji
|
|
|
|
*/
|
2018-03-19 09:47:50 +00:00
|
|
|
$award-emoji-menu-shadow: rgba(0, 0, 0, 0.175);
|
2017-04-06 13:38:09 +00:00
|
|
|
$award-emoji-positive-add-bg: #fed159;
|
|
|
|
$award-emoji-positive-add-lines: #bb9c13;
|
2019-02-13 09:03:07 +00:00
|
|
|
$award-emoji-width: 376px;
|
2019-03-22 17:05:56 +00:00
|
|
|
$award-emoji-width-xs: 90%;
|
2016-03-21 18:29:31 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Search Box
|
|
|
|
*/
|
2018-03-19 09:47:50 +00:00
|
|
|
$search-input-border-color: rgba($blue-400, 0.8);
|
2018-11-26 11:38:34 +00:00
|
|
|
$search-input-width: 200px;
|
2019-08-28 16:53:20 +00:00
|
|
|
$search-input-xl-width: 320px;
|
2016-03-30 07:48:39 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Notes
|
|
|
|
*/
|
2016-04-04 10:00:29 +00:00
|
|
|
$note-disabled-comment-color: #b2b2b2;
|
2016-11-30 13:25:25 +00:00
|
|
|
$note-targe3-outside: #fffff0;
|
|
|
|
$note-targe3-inside: #ffffd3;
|
2017-06-22 02:22:08 +00:00
|
|
|
$note-icon-gutter-width: 55px;
|
2016-11-30 13:25:25 +00:00
|
|
|
|
2018-08-01 19:43:50 +00:00
|
|
|
/*
|
|
|
|
* Identicon
|
|
|
|
*/
|
2020-06-11 15:08:36 +00:00
|
|
|
$identicon-red: #ffebee !default;
|
|
|
|
$identicon-purple: #f3e5f5 !default;
|
|
|
|
$identicon-indigo: #e8eaf6 !default;
|
|
|
|
$identicon-blue: #e3f2fd !default;
|
|
|
|
$identicon-teal: #e0f2f1 !default;
|
|
|
|
$identicon-orange: #fbe9e7 !default;
|
2018-08-01 19:43:50 +00:00
|
|
|
|
2016-11-30 13:25:25 +00:00
|
|
|
/*
|
|
|
|
* Calendar
|
|
|
|
*/
|
2016-04-15 07:32:01 +00:00
|
|
|
$calendar-hover-bg: #ecf3fe;
|
2018-03-19 09:47:50 +00:00
|
|
|
$calendar-border-color: rgba(#000, 0.1);
|
2016-11-30 13:25:25 +00:00
|
|
|
$calendar-user-contrib-text: #959494;
|
2016-04-20 09:11:22 +00:00
|
|
|
|
2016-09-22 11:56:38 +00:00
|
|
|
/*
|
2020-02-07 21:08:39 +00:00
|
|
|
* Value Stream Analytics
|
2016-09-22 11:56:38 +00:00
|
|
|
*/
|
|
|
|
$cycle-analytics-box-padding: 30px;
|
|
|
|
$cycle-analytics-box-text-color: #8c8c8c;
|
2016-10-20 23:24:36 +00:00
|
|
|
$cycle-analytics-big-font: 19px;
|
|
|
|
$cycle-analytics-light-gray: #bfbfbf;
|
2016-11-30 13:25:25 +00:00
|
|
|
$cycle-analytics-dismiss-icon-color: #b2b2b2;
|
2016-09-22 11:56:38 +00:00
|
|
|
|
2016-11-30 13:25:25 +00:00
|
|
|
/*
|
|
|
|
* CI
|
|
|
|
*/
|
|
|
|
$ci-skipped-color: #888;
|
2016-07-22 09:59:26 +00:00
|
|
|
|
2016-11-30 13:25:25 +00:00
|
|
|
/*
|
|
|
|
* Boards
|
|
|
|
*/
|
2016-12-02 19:43:33 +00:00
|
|
|
$issue-boards-font-size: 14px;
|
2018-11-07 17:20:17 +00:00
|
|
|
$issue-boards-card-shadow: rgba(0, 0, 0, 0.1);
|
2018-03-19 09:47:50 +00:00
|
|
|
/*
|
|
|
|
The following heights are used in boards.scss and are used for calculation of the board height.
|
|
|
|
They probably should be derived in a smarter way.
|
|
|
|
*/
|
|
|
|
$issue-boards-filter-height: 68px;
|
2020-08-05 15:09:59 +00:00
|
|
|
$issue-boards-filter-height-md: 110px;
|
|
|
|
$issue-boards-filter-height-sm: 299px;
|
2018-03-19 09:47:50 +00:00
|
|
|
$issue-boards-breadcrumbs-height-xs: 63px;
|
2018-05-07 18:06:02 +00:00
|
|
|
$issue-board-list-difference-xs: $header-height + $issue-boards-breadcrumbs-height-xs;
|
2018-03-19 09:47:50 +00:00
|
|
|
$issue-board-list-difference-sm: $header-height + $breadcrumb-min-height;
|
2020-08-05 15:09:59 +00:00
|
|
|
$issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height-md;
|
|
|
|
$issue-board-list-difference-lg: $issue-board-list-difference-sm + $issue-boards-filter-height;
|
2020-04-08 09:09:43 +00:00
|
|
|
/*
|
|
|
|
The following heights are used in environment_logs.scss and are used for calculation of the log viewer height.
|
|
|
|
*/
|
|
|
|
$environment-logs-breadcrumbs-height: 63px;
|
|
|
|
$environment-logs-breadcrumbs-height-md: $breadcrumb-min-height;
|
|
|
|
|
|
|
|
$environment-logs-difference-xs-up: $header-height + $environment-logs-breadcrumbs-height;
|
|
|
|
$environment-logs-difference-md-up: $header-height + $environment-logs-breadcrumbs-height-md;
|
2016-11-30 13:25:25 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Avatar
|
|
|
|
*/
|
2018-07-24 21:17:49 +00:00
|
|
|
$avatar-radius: 50%;
|
2016-11-30 13:25:25 +00:00
|
|
|
$gl-avatar-size: 40px;
|
2019-05-24 09:03:18 +00:00
|
|
|
$gl-avatar-border-opacity: 0.1;
|
2016-11-30 13:25:25 +00:00
|
|
|
|
2016-10-30 21:41:13 +00:00
|
|
|
/*
|
|
|
|
* Blame
|
|
|
|
*/
|
|
|
|
$blame-gray: #ededed;
|
|
|
|
$blame-cyan: #acd5f2;
|
|
|
|
$blame-blue: #254e77;
|
|
|
|
|
2016-11-30 13:25:25 +00:00
|
|
|
/*
|
|
|
|
* Builds
|
|
|
|
*/
|
|
|
|
$builds-trace-bg: #111;
|
2019-08-09 10:53:22 +00:00
|
|
|
$job-log-highlight-height: 18px;
|
2019-10-11 15:06:41 +00:00
|
|
|
$job-log-line-padding: 55px;
|
|
|
|
$job-line-number-width: 50px;
|
|
|
|
$job-line-number-margin: 43px;
|
|
|
|
$job-arrow-margin: 55px;
|
2016-11-30 13:25:25 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Commit Page
|
|
|
|
*/
|
2017-11-07 16:19:34 +00:00
|
|
|
$commit-max-width-marker-color: rgba(0, 0, 0, 0);
|
|
|
|
$commit-message-text-area-bg: rgba(0, 0, 0, 0);
|
2019-01-30 04:26:53 +00:00
|
|
|
$commit-stat-summary-height: 36px;
|
2016-11-30 13:25:25 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Common
|
|
|
|
*/
|
|
|
|
$common-gray-light: #bbb;
|
|
|
|
$common-gray-dark: #444;
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Files
|
|
|
|
*/
|
|
|
|
$logs-li-color: #888;
|
|
|
|
$logs-p-color: #333;
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Forms
|
|
|
|
*/
|
2017-07-06 16:33:18 +00:00
|
|
|
$input-height: 34px;
|
2016-11-30 13:25:25 +00:00
|
|
|
$input-danger-bg: #f2dede;
|
2020-05-20 00:08:20 +00:00
|
|
|
$input-group-addon-bg: $gray-10;
|
2016-11-30 13:25:25 +00:00
|
|
|
$gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
|
2017-03-23 16:04:25 +00:00
|
|
|
$gl-field-focus-shadow-error: rgba($red-500, 0.6);
|
2018-05-23 07:17:24 +00:00
|
|
|
$input-short-width: 200px;
|
|
|
|
$input-short-md-width: 280px;
|
2018-12-18 14:38:21 +00:00
|
|
|
$input-md-width: 240px;
|
|
|
|
$input-lg-width: 320px;
|
2016-11-30 13:25:25 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Help
|
|
|
|
*/
|
|
|
|
$document-index-color: #888;
|
|
|
|
$help-shortcut-header-color: #333;
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Issues
|
|
|
|
*/
|
2020-06-15 15:08:20 +00:00
|
|
|
$issues-today-bg: #f3fff2 !default;
|
|
|
|
$issues-today-border: #e1e8d5 !default;
|
2017-01-13 20:35:24 +00:00
|
|
|
$compare-display-color: #888;
|
2016-11-30 13:25:25 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Label
|
|
|
|
*/
|
2018-02-08 12:03:20 +00:00
|
|
|
$label-font-size: 12px;
|
2017-12-07 09:11:41 +00:00
|
|
|
$label-padding: 7px;
|
2018-02-05 22:00:17 +00:00
|
|
|
$label-padding-modal: 10px;
|
2016-11-30 13:25:25 +00:00
|
|
|
$label-gray-bg: #f8fafc;
|
|
|
|
$label-inverse-bg: #333;
|
2018-03-19 09:47:50 +00:00
|
|
|
$label-remove-border: rgba(0, 0, 0, 0.1);
|
2016-12-16 10:59:10 +00:00
|
|
|
$label-border-radius: 100px;
|
2016-11-30 13:25:25 +00:00
|
|
|
|
2017-04-19 19:48:48 +00:00
|
|
|
/*
|
|
|
|
* Animation
|
|
|
|
*/
|
|
|
|
$fade-in-duration: 200ms;
|
2018-03-19 09:47:50 +00:00
|
|
|
$fade-mask-transition-duration: 0.1s;
|
2017-12-05 23:55:28 +00:00
|
|
|
$fade-mask-transition-curve: ease-in-out;
|
2017-04-19 19:48:48 +00:00
|
|
|
|
2016-11-30 13:25:25 +00:00
|
|
|
/*
|
|
|
|
* Login
|
|
|
|
*/
|
|
|
|
$login-brand-holder-color: #888;
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Projects
|
|
|
|
*/
|
|
|
|
$project-option-descr-color: #54565b;
|
|
|
|
|
2019-04-05 21:59:57 +00:00
|
|
|
/*
|
|
|
|
* Monitor Charts
|
|
|
|
*/
|
|
|
|
$chart-tooltip-max-width: 512px;
|
|
|
|
|
2016-11-30 13:25:25 +00:00
|
|
|
/*
|
|
|
|
Stat Graph
|
|
|
|
*/
|
|
|
|
$stat-graph-common-bg: #f3f3f3;
|
|
|
|
$stat-graph-selection-fill: #333;
|
|
|
|
$stat-graph-selection-stroke: #333;
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Selects
|
|
|
|
*/
|
|
|
|
$select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
|
|
|
|
$select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Typography
|
|
|
|
*/
|
2017-07-08 12:53:12 +00:00
|
|
|
$body-text-shadow: rgba(255, 255, 255, 0.01);
|
2016-11-30 13:25:25 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* UI Dev Kit
|
|
|
|
*/
|
|
|
|
$ui-dev-kit-example-color: #bbb;
|
2016-12-05 17:04:36 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
Pipeline Graph
|
|
|
|
*/
|
2017-08-11 16:42:35 +00:00
|
|
|
$ci-action-icon-size: 22px;
|
2018-07-06 20:18:17 +00:00
|
|
|
$ci-action-icon-size-lg: 24px;
|
2017-08-11 16:42:35 +00:00
|
|
|
$pipeline-dropdown-line-height: 20px;
|
|
|
|
$pipeline-dropdown-status-icon-size: 18px;
|
2018-04-19 11:00:27 +00:00
|
|
|
$ci-action-dropdown-button-size: 24px;
|
|
|
|
$ci-action-dropdown-svg-size: 12px;
|
2017-01-30 22:53:18 +00:00
|
|
|
|
2017-06-19 15:59:10 +00:00
|
|
|
/*
|
2018-01-26 06:25:26 +00:00
|
|
|
CI variable lists
|
2017-06-19 15:59:10 +00:00
|
|
|
*/
|
2018-01-26 06:25:26 +00:00
|
|
|
$ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding});
|
2017-06-19 15:59:10 +00:00
|
|
|
|
2019-03-20 11:38:48 +00:00
|
|
|
/*
|
|
|
|
GitLab Plans
|
|
|
|
*/
|
|
|
|
$gl-gold-plan: #d4af37;
|
|
|
|
$gl-silver-plan: #91a1ab;
|
|
|
|
$gl-bronze-plan: #cd7f32;
|
|
|
|
|
|
|
|
/*
|
|
|
|
Cross-project Pipelines
|
|
|
|
*/
|
|
|
|
$linked-project-column-margin: 60px;
|
|
|
|
|
2017-07-06 19:37:31 +00:00
|
|
|
/*
|
|
|
|
Performance Bar
|
|
|
|
*/
|
|
|
|
$perf-bar-production: #222;
|
|
|
|
$perf-bar-staging: #291430;
|
|
|
|
$perf-bar-development: #4c1210;
|
|
|
|
$perf-bar-bucket-bg: #111;
|
2020-03-31 00:08:09 +00:00
|
|
|
$perf-bar-bucket-box-shadow-from: rgba($white, 0.2);
|
2018-03-19 09:47:50 +00:00
|
|
|
$perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
|
2018-10-09 11:13:28 +00:00
|
|
|
$perf-bar-canary-text: $orange-400;
|
2017-08-04 11:13:36 +00:00
|
|
|
|
2017-09-14 11:01:07 +00:00
|
|
|
/*
|
|
|
|
Issuable warning
|
|
|
|
*/
|
|
|
|
$issuable-warning-size: 24px;
|
2017-10-06 11:32:39 +00:00
|
|
|
$issuable-warning-icon-margin: 4px;
|
2017-10-07 04:25:17 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
Image Commenting cursor
|
|
|
|
*/
|
|
|
|
$image-comment-cursor-left-offset: 12;
|
2017-12-05 07:35:37 +00:00
|
|
|
$image-comment-cursor-top-offset: 12;
|
2017-11-13 16:51:14 +00:00
|
|
|
|
2019-03-20 11:38:48 +00:00
|
|
|
/*
|
|
|
|
Add GitLab Slack Application
|
|
|
|
*/
|
|
|
|
$add-to-slack-popup-max-width: 400px;
|
|
|
|
$add-to-slack-gif-max-width: 850px;
|
|
|
|
$add-to-slack-well-max-width: 750px;
|
|
|
|
$add-to-slack-logo-size: 100px;
|
|
|
|
|
2017-11-13 16:51:14 +00:00
|
|
|
/*
|
|
|
|
Popup
|
|
|
|
*/
|
|
|
|
$popup-triangle-size: 15px;
|
|
|
|
$popup-triangle-border-size: 1px;
|
|
|
|
$popup-box-shadow-color: rgba(90, 90, 90, 0.05);
|
2018-01-04 18:31:05 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
Multi file editor
|
|
|
|
*/
|
|
|
|
$border-color-settings: #e1e1e1;
|
2018-01-09 09:08:28 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
Modals
|
|
|
|
*/
|
2019-07-05 19:20:49 +00:00
|
|
|
$modal-body-height: 80px;
|
2018-12-04 08:42:27 +00:00
|
|
|
$modal-border-color: #e9ecef;
|
2019-07-09 20:00:40 +00:00
|
|
|
$modal-border-radius: 0.25rem;
|
2018-04-06 18:30:58 +00:00
|
|
|
|
2018-06-06 07:50:38 +00:00
|
|
|
$priority-label-empty-state-width: 114px;
|
2018-11-07 17:22:15 +00:00
|
|
|
|
2019-05-16 18:05:56 +00:00
|
|
|
/*
|
|
|
|
Popovers
|
|
|
|
*/
|
|
|
|
$popover-max-width: 384px;
|
2020-07-13 15:09:08 +00:00
|
|
|
$popover-box-shadow: 0 2px 3px 1px $gray-100;
|
2019-05-16 18:05:56 +00:00
|
|
|
|
2018-11-07 17:22:15 +00:00
|
|
|
/*
|
2020-08-19 00:10:34 +00:00
|
|
|
Issue Analytics
|
2018-11-07 17:22:15 +00:00
|
|
|
*/
|
|
|
|
$issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
|
2019-01-30 04:26:53 +00:00
|
|
|
|
2019-01-22 08:29:41 +00:00
|
|
|
/*
|
|
|
|
Merge Requests
|
|
|
|
*/
|
2019-06-13 16:31:07 +00:00
|
|
|
$mr-tabs-height: 48px;
|
2019-01-22 08:29:41 +00:00
|
|
|
$mr-version-controls-height: 56px;
|
2019-10-16 12:06:32 +00:00
|
|
|
$mr-widget-margin-left: 40px;
|
2019-01-30 04:26:53 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
Compare Branches
|
|
|
|
*/
|
|
|
|
$compare-branches-sticky-header-height: 68px;
|
2019-03-25 17:07:01 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
Bootstrap 4.2.0 introduced new icons for validating forms.
|
|
|
|
Our design system does not use those, so we are disabling them for now:
|
|
|
|
- Docs: https://getbootstrap.com/docs/4.3/components/forms/#server-side
|
|
|
|
- Issue: https://gitlab.com/gitlab-org/design.gitlab.com/issues/242
|
|
|
|
*/
|
|
|
|
$enable-validation-icons: false;
|