debian-mirror-gitlab/app/assets/stylesheets/framework/variables.scss

/*
 * Layout
 */
$grid-size: 8px;
$gutter-collapsed-width: 62px;
$gutter-width: 290px;
$gutter-inner-width: 250px;
$sidebar-breakpoint: 1024px;
$default-transition-duration: 0.15s;
$contextual-sidebar-width: 256px;
$contextual-sidebar-collapsed-width: 56px;
$toggle-sidebar-height: 48px;
$super-sidebar-width: 256px;
$super-sidebar-z-index: 600;
$super-sidebar-overlay-z-index: 599;
$top-bar-z-index: 210;

/**
  🚨 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.
**/
$spacing-scale: (
  0: 0,
  1: #{0.5 * $grid-size},
  2: $grid-size,
  3: #{2 * $grid-size},
  4: #{3 * $grid-size},
  5: #{4 * $grid-size}
);

/* Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 */
$gl-spacing-scale-48: 48 * $grid-size;
$gl-spacing-scale-75: 75 * $grid-size;
/* End gitlab-ui#1709 */

/*
 * 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}
);

// Color schema
$darken-normal-factor: 7% !default;
$darken-dark-factor: 10% !default;
$darken-border-factor: 5% !default;
$darken-border-dashed-factor: 25% !default;

$purple: #6d49cb !default;
$purple-light: #ede8fb !default;

$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;
$green-900: #0a4020 !default;
$green-950: #072b15 !default;

$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;

$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;

$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;

$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;

$gray-10: #fbfafd !default;
$gray-50: #ececef !default;
$gray-100: #dcdcde !default;
$gray-200: #bfbfc3 !default;
$gray-300: #a4a3a8 !default;
$gray-400: #89888d !default;
$gray-500: #737278 !default;
$gray-600: #626168 !default;
$gray-700: #535158 !default;
$gray-800: #434248 !default;
$gray-900: #333238 !default;
$gray-950: #1f1e24 !default;

$gray-lightest: lighten($gray-10, 1) !default;
$gray-light: $gray-10 !default;
$gray-lighter: lighten($gray-50, 4) !default;
$gray-normal: lighten($gray-50, 2) !default;
$gray-dark: darken($gray-light, $darken-dark-factor) !default;
$gray-darker: $gray-50 !default;
$gray-darkest: $gray-200 !default;

$t-gray-a-02: rgba($gray-950, 0.02) !default;
$t-gray-a-04: rgba($gray-950, 0.04) !default;
$t-gray-a-06: rgba($gray-950, 0.06) !default;
$t-gray-a-08: rgba($gray-950, 0.08) !default;
$t-gray-a-16: rgba($gray-950, 0.16) !default;
$t-gray-a-24: rgba($gray-950, 0.24) !default;

$white: #fff !default;
$white-normal: $gray-50 !default;
$white-dark: darken($gray-50, 2) !default;
$white-transparent: rgba($white, 0.8) !default;

$black: #000 !default;
$black-transparent: $t-gray-a-24 !default;
$almost-black: $gray-950 !default;

$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
);

$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
);

$grays: (
  '10': $gray-10,
  '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
);

// GitLab themes

$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;
// To do this variant right for darkmode, we need to create a variable for it.
$indigo-900-alpha-008: rgba($indigo-900, 0.08);

$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;

$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;

$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;

$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;

// Data visualization color palette

$data-viz-blue-50: #e9ebff !default;
$data-viz-blue-100: #d2dcff !default;
$data-viz-blue-200: #b7c6ff !default;
$data-viz-blue-300: #97acff !default;
$data-viz-blue-400: #7992f5 !default;
$data-viz-blue-500: #617ae2 !default;
$data-viz-blue-600: #4e65cd !default;
$data-viz-blue-700: #3f51ae !default;
$data-viz-blue-800: #374291 !default;
$data-viz-blue-900: #303470 !default;
$data-viz-blue-950: #2a2b59 !default;

$border-white-light: darken($white, $darken-border-factor) !default;
$border-white-normal: darken($white-normal, $darken-border-factor) !default;

$border-gray-light: darken($gray-light, $darken-border-factor);
$border-gray-normal: darken($gray-normal, $darken-border-factor);
$border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);

/*
 * UI elements
 */
$contextual-sidebar-bg-color: $gray-10;
$contextual-sidebar-border-color: #e9e9e9;
$border-color: $gray-100;
$shadow-color: $t-gray-a-08;
$well-expand-item: #e8f2f7 !default;
$well-inner-border: #eef0f2 !default;
$well-light-border: #f1f1f1;
$well-light-text-color: #5b6169;
$nav-active-bg: $t-gray-a-08;

/*
 * Text
 */
$gl-font-size: 14px;
$gl-font-size-small: 12px;
$gl-font-size-large: 16px;
$gl-font-weight-normal: 400;
$gl-font-weight-bold: 600;
$gl-text-color: $gray-900;
$gl-text-color-secondary: $gray-500 !default;
$gl-text-color-tertiary: $gray-400;
$gl-text-color-quaternary: #d6d6d6;
$gl-text-color-inverted: $white;
$gl-text-color-secondary-inverted: rgba($white, 0.85);
$gl-text-color-disabled: $gray-400;
$link-color: $blue-500 !default;
$link-hover-color: $blue-500 !default;
$gl-grayish-blue: #7f8fa4;
$gl-header-color: #4c4e54;
$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;

$type-scale: (
  1: 12px,
  2: 14px,
  3: 16px,
  4: 20px,
  5: 28px,
  6: 42px
);

/*
 * Lists
 */
$list-border: rgba(0, 0, 0, 0.05);
$list-text-height: 42px;

/*
 * Code
 */
$code-font-size: 90%;
$code-line-height: 1.6;
$code-color: $gray-950;

/*
 * Tooltips
 */
$tooltip-font-size: 12px;

/*
 * Padding
 */
$gl-padding-4: 4px;
$gl-padding-6: 6px;
$gl-padding-8: 8px;
$gl-padding-12: 12px;
$gl-padding: 16px;
$gl-padding-24: 24px;
$gl-padding-32: 32px;
$gl-input-padding: 10px;
$gl-vert-padding: 6px;
$gl-padding-top: 10px;
$gl-sidebar-padding: 22px;
$input-horizontal-padding: 12px;
$browser-scrollbar-size: 10px;

/*
 * Misc
 */
$header-height: var(--header-height, 48px);
$header-zindex: 1000;
$zindex-dropdown-menu: 300;
$ide-statusbar-height: 25px;
$fixed-layout-width: 1280px;
$limited-layout-width: 990px;
$container-text-max-width: 540px;
$gl-avatar-size: 40px;
$border-radius-default: 4px;
$border-radius-small: 2px;
$border-radius-large: 8px;
$default-icon-size: 16px;
$layout-link-gray: #7e7c7c;
$btn-side-margin: $grid-size;
$btn-sm-side-margin: 7px;
$count-arrow-border: #dce0e5;
$general-hover-transition-duration: 100ms;
$general-hover-transition-curve: linear;
$highlight-changes-color: rgb(235, 255, 232);
$performance-bar-height: 35px;
$system-header-height: 16px;
$system-footer-height: $system-header-height;
$mr-review-bar-height: calc(2rem + 13px);
$flash-height: 52px;
$context-header-height: 60px;
$top-bar-height: 48px;
$home-panel-title-row-height: 64px;
$home-panel-avatar-mobile-size: 24px;
$issuable-title-max-width: 350px;
$milestone-title-max-width: 75px;
$gl-line-height: 16px;
$gl-line-height-18: 18px;
$gl-line-height-20: 20px;
$gl-line-height-24: 24px;
$gl-line-height-14: 14px;

$pages-group-name-color: #4c4e54;

/*
 * Calculated heights
 */
$calc-application-bars-height: calc(var(--system-header-height) + var(--performance-bar-height));
$calc-application-header-height: calc(#{$header-height} + #{$calc-application-bars-height} + var(--top-bar-height));
$calc-application-footer-height: var(--system-footer-height);
$calc-application-viewport-height: calc(100vh - #{$calc-application-header-height} - #{$calc-application-footer-height});

/*
* Common component specific colors
*/
$user-mention-bg: rgba($blue-500, 0.044);
$user-mention-bg-hover: rgba($blue-500, 0.15);

/* tanuki logo colors */
$tanuki-red: #e24329;
$tanuki-orange: #fc6d26;
$tanuki-yellow: #fca326;

/*
 * State colors:
 */
$green-500-focus: rgba($green-500, 0.4);
$gl-btn-active-background: rgba(0, 0, 0, 0.16);
$gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;

/*
 * Commit Diff Colors
 */
$added: #63c363;
$deleted: #f77;
$line-added: #ecfdf0;
$line-added-dark: #c7f0d2 !default;
$line-removed: #fbe9eb;
$line-removed-dark: #fac5cd !default;
/*
 * 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:
 *
 *  - 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);
$line-number-old: #f9d7dc;
$line-number-new: #ddfbe6;
$line-number-select: #fbf2da;
$line-number-commented: #dae5fb;
$line-target-blue: $blue-50;
$line-select-yellow: #fcf8e7;
$line-select-yellow-dark: #f0e2bd;
$line-commented-blue: #e8effc;
$line-commented-blue-dark: #bccef0;
$dark-diff-match-bg: rgba($white, 0.3);
$dark-diff-match-color: rgba($white, 0.1);
$diff-image-info-color: #808080;
$diff-view-modes-color: #808080;
$diff-view-modes-border: #c1c1c1;
$diff-jagged-border-gradient-color: darken($white-normal, 8%);

/*
 * Fonts
 */
$monospace-font: var(--default-mono-font, 'Menlo'), 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
  'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
$regular-font: var(--default-regular-font, -apple-system), BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
  Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
  'Segoe UI Symbol', 'Noto Color Emoji';
$gl-monospace-font: $monospace-font;
$gl-regular-font: $regular-font;

/*
* Dropdowns
*/
$dropdown-width: 300px;
$dropdown-min-height: 40px;
$dropdown-max-height: 312px;
$dropdown-max-height-lg: 445px;
$dropdown-vertical-offset: 4px;
$dropdown-empty-row-bg: rgba(#000, 0.04);
$dropdown-shadow-color: rgba(#000, 0.1);
$dropdown-title-btn-color: #bfbfbf;
$dropdown-input-focus-shadow: rgba($blue-300, 0.4);
$dropdown-loading-bg: rgba($white, 0.6);
$dropdown-chevron-size: 10px;
$dropdown-toggle-active-border-color: darken($border-color, 14%);
$dropdown-fade-mask-height: 32px;
$dropdown-member-form-control-width: 163px;

/*
* Filtered Search
*/
$filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09);

/*
* Contextual Sidebar
*/
$link-active-background: rgba($black, 0.04);
$link-hover-background: rgba($gray-900, 0.06);
$inactive-badge-background: rgba($black, 0.08);
$sidebar-toggle-height: 60px;
$sidebar-toggle-width: 40px;
$sidebar-milestone-toggle-bottom-margin: 10px;
$sidebar-avatar-size: 32px;
$sidebar-top-item-lr-margin: 8px;
$sidebar-top-item-tb-margin: 1px;

/*
* Buttons
*/
$btn-active-gray: $gray-50;
$btn-active-gray-light: $gray-50;
$btn-white-active: #848484;
$gl-btn-padding: 10px;
$gl-btn-line-height: 16px;
$gl-btn-vert-padding: 8px;
$gl-btn-horz-padding: 12px;
$gl-btn-small-font-size: 13px;
$gl-btn-small-line-height: 18px;

/*
* Badges
*/
$badge-bg: rgba($black, 0.07);

/*
* Pagination
*/
$pagination-padding-y: 6px;
$pagination-padding-x: 16px;
$pagination-line-height: 20px;
$pagination-disabled-color: #cdcdcd;

/*
 *  Status icons
 */
$status-icon-size: 22px;


/*
* Social Icons
*/
$discord: #5865f2;
$linkedin: #2867b2;
$skype: #0078d7;
$twitter: #1d9bf0;

/*
 *  Award emoji
 */
$award-emoji-menu-shadow: rgba(0, 0, 0, 0.175);
$award-emoji-positive-add-bg: #fed159;
$award-emoji-positive-add-lines: #bb9c13;
$award-emoji-width: 376px;
$award-emoji-width-xs: 90%;

/*
 * Search Box
 */
$search-input-border-color: rgba($blue-400, 0.8);
$search-input-width: 200px;
$search-input-xl-width: 320px;

/*
 *  Notes
 */
$note-disabled-comment-color: #b2b2b2;
$note-targe3-outside: #fffff0;
$note-targe3-inside: #ffffd3;

/*
* Calendar
*/
$calendar-user-contrib-text: #959494;

/*
* CI
*/
$ci-skipped-color: #888;

/*
* Boards
*/
$issue-boards-font-size: 14px;
$issue-boards-card-shadow: rgba(0, 0, 0, 0.1);
$issue-boards-filter-height: 68px;
/*
 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: $top-bar-height;

$environment-logs-difference-xs-up: calc(#{$header-height} + #{$environment-logs-breadcrumbs-height});
$environment-logs-difference-md-up: calc(#{$header-height} + #{$environment-logs-breadcrumbs-height-md});

/*
* Avatar
*/
$avatar-radius: 50%;
$gl-avatar-size: 40px;
$gl-avatar-border-opacity: 0.1;

/*
* Blame
*/
$blame-gray: #ededed;
$blame-cyan: #acd5f2;
$blame-blue: #254e77;

/*
* Builds
*/
$builds-log-bg: #111;
$job-log-highlight-height: 18px;
$job-log-line-padding: 55px;
$job-line-number-width: 50px;
$job-line-number-margin: 43px;
$job-arrow-margin: 55px;

/*
 * Calendar
 */
// See https://gitlab.com/gitlab-org/gitlab/-/issues/332150 to align with Pajamas Design System
$calendar-activity-colors: (
  $gray-50,
  $data-viz-blue-100,
  $data-viz-blue-400,
  $data-viz-blue-700,
  $data-viz-blue-950,
) !default;

/*
* Commit Page
*/
$commit-max-width-marker-color: rgba(0, 0, 0, 0);
$commit-message-text-area-bg: rgba(0, 0, 0, 0);
$commit-stat-summary-height: 32px;

/*
* Files
*/
$logs-li-color: #888;
$logs-p-color: #333;

/*
* Forms
*/
$input-height: 32px;
$input-danger-bg: #f2dede;
$input-group-addon-bg: $gray-10;
$gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
$gl-field-focus-shadow-error: rgba($red-500, 0.6);
$input-short-width: 200px;
$input-short-md-width: 280px;
$input-md-width: 240px;
$input-lg-width: 320px;

/*
* Help
*/
$document-index-color: #888;
$help-shortcut-header-color: #333;

/*
* Label
*/
$label-font-size: 12px;
$label-padding: 7px;
$label-padding-modal: 10px;
$label-gray-bg: #f8fafc;
$label-inverse-bg: #333;
$label-remove-border: rgba(0, 0, 0, 0.1);
$label-border-radius: 100px;

/*
* Animation
*/
$fade-in-duration: 200ms;
$fade-mask-transition-duration: 0.1s;
$fade-mask-transition-curve: ease-in-out;

/*
* Login
*/
$login-brand-holder-color: #888;

/*
Stat Graph
*/
$stat-graph-common-bg: #f3f3f3;
$stat-graph-selection-fill: #333;
$stat-graph-selection-stroke: #333;

/*
* Typography
*/
$body-text-shadow: rgba(255, 255, 255, 0.01);

/*
* UI Dev Kit
*/
$ui-dev-kit-example-color: #bbb;

/*
Pipeline Graph
*/
$ci-action-icon-size: 22px;
$ci-action-icon-size-lg: 24px;
$pipeline-dropdown-line-height: 20px;
$ci-action-dropdown-button-size: 24px;
$ci-action-dropdown-svg-size: 12px;

/*
CI variable lists
*/
$ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding});

/*
GitLab Plans
*/
$gl-ultimate-plan: #d4af37;
$gl-premium-plan: #91a1ab;
$gl-bronze-plan: #cd7f32;

/*
Cross-project Pipelines
 */
$linked-project-column-margin: 60px;

/*
Performance Bar
*/
$perf-bar-production: $gray-950;
$perf-bar-staging: $indigo-950;
$perf-bar-development: $red-950;
$perf-bar-bucket-bg: $black;
$perf-bar-bucket-box-shadow-from: rgba($white, 0.2);
$perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
$perf-bar-canary-text: $orange-400;

/*
Issuable warning
*/
$issuable-warning-size: 24px;
$issuable-warning-icon-margin: 4px;

/*
Image Commenting cursor
*/
$image-comment-cursor-left-offset: 12;
$image-comment-cursor-top-offset: 12;

/*
Security & Compliance Carousel
*/
$security-and-compliance-carousel-image-carousel-width: 1000px;
$security-and-compliance-carousel-image-discover-footer-max-width: 500px;
$security-and-compliance-carousel-image-discover-text-carousel-max-width: 650px;
$security-and-compliance-carousel-image-discover-text-carousel-caption-height: 100%;
$security-and-compliance-carousel-image-discover-text-carousel-caption-max-width: 500px;
$security-and-compliance-carousel-control-icon-width: 10px;
$security-and-compliance-carousel-control-position: -5%;
$security-and-compliance-carousel-inner-width: 90%;
$security-and-compliance-carousel-indicators-bottom: -20px;
$security-and-compliance-carousel-indicators-bottom-lg: -15px;
$security-and-compliance-carousel-indicators-dimension: 6px;
$security-and-compliance-carousel-indicators-border-radius: 100%;
$security-and-compliance-carousel-prev-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
$security-and-compliance-carousel-next-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");

/*
Popup
*/
$popup-triangle-size: 15px;
$popup-triangle-border-size: 1px;
$popup-box-shadow-color: rgba(90, 90, 90, 0.05);

/*
Multi file editor
*/
$border-color-settings: #e1e1e1;

/*
Modals
*/
$modal-body-height: 80px;
$modal-border-color: #e9ecef;
$modal-border-radius: 0.25rem;

$priority-label-empty-state-width: 114px;

/*
Popovers
*/
$popover-max-width: 384px;
$popover-box-shadow: 0 2px 3px 1px $gray-100;

/*
Issue Analytics
*/
$issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);

/*
Merge requests
*/
$mr-tabs-height: 48px;

/*
Compare Branches
*/
$compare-branches-sticky-header-height: 32px;

/*
Board Swimlanes
*/
$board-swimlanes-headers-height: 64px;

/*
Source Editor theme overrides
*/
$source-editor-hover-light-text-color: #ececef;
$source-editor-hover-dark-text-color: #333238;

/**
 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;