/* * Layout */ $grid-size: 8px; $gutter-collapsed-width: 62px; $gutter-width: 290px; $gutter-inner-width: 250px; $sidebar-transition-duration: 0.3s; $sidebar-breakpoint: 1024px; $default-transition-duration: 0.15s; $contextual-sidebar-width: 220px; $contextual-sidebar-collapsed-width: 50px; $toggle-sidebar-height: 48px; $spacing-scale: ( 0: 0, 1: #{0.5 * $grid-size}, 2: $grid-size, 3: #{2 * $grid-size}, 4: #{3 * $grid-size}, 5: #{4 * $grid-size} ); /* * 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%; $darken-dark-factor: 10%; $darken-border-factor: 5%; $darken-border-dashed-factor: 25%; $white-light: #fff; $white-normal: #f0f0f0; $white-dark: #eaeaea; $white-transparent: rgba(255, 255, 255, 0.8); $gray-lightest: #fdfdfd; $gray-light: #fafafa; $gray-lighter: #f9f9f9; $gray-normal: #f5f5f5; $gray-dark: darken($gray-light, $darken-dark-factor); $gray-darker: #eee; $gray-darkest: #c4c4c4; $purple: #6d49cb; $purple-light: #ede8fb; $black: #000; $black-transparent: rgba(0, 0, 0, 0.3); $almost-black: #242424; $t-gray-a-02: rgba($black, 0.02); $t-gray-a-04: rgba($black, 0.04); $t-gray-a-06: rgba($black, 0.06); $t-gray-a-08: rgba($black, 0.08); $gl-gray-100: #ddd; $gl-gray-200: #ccc; $gl-gray-350: #aaa; $gl-gray-400: #999; $gl-gray-500: #777; $gl-gray-600: #666; $gl-gray-700: #555; $green-50: #f1fdf6; $green-100: #dcf5e7; $green-200: #b3e6c8; $green-300: #75d09b; $green-400: #37b96d; $green-500: #1aaa55; $green-600: #168f48; $green-700: #12753a; $green-800: #0e5a2d; $green-900: #0a4020; $green-950: #072b15; $blue-50: #f6fafe; $blue-100: #e4f0fb; $blue-200: #b8d6f4; $blue-300: #73afea; $blue-400: #418cd8; $blue-500: #1f78d1; $blue-600: #1b69b6; $blue-700: #17599c; $blue-800: #134a81; $blue-900: #0f3b66; $blue-950: #0a2744; $orange-50: #fffaf4; $orange-100: #fff1de; $orange-200: #fed69f; $orange-300: #fdbc60; $orange-400: #fca429; $orange-500: #fc9403; $orange-600: #de7e00; $orange-700: #c26700; $orange-800: #a35200; $orange-900: #853c00; $orange-950: #592800; $red-50: #fef6f5; $red-100: #fbe5e1; $red-200: #f2b4a9; $red-300: #ea8271; $red-400: #e05842; $red-500: #db3b21; $red-600: #c0341d; $red-700: #a62d19; $red-800: #8b2615; $red-900: #711e11; $red-950: #4b140b; $gray-50: #fafafa; $gray-100: #f2f2f2; $gray-200: #dfdfdf; $gray-300: #ccc; $gray-400: #bababa; $gray-500: #a7a7a7; $gray-600: #919191; $gray-700: #707070; $gray-800: #4f4f4f; $gray-900: #2e2e2e; $gray-950: #1f1f1f; $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 ); $grays: ( '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; $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; $border-white-light: darken($white-light, $darken-border-factor); $border-white-normal: darken($white-normal, $darken-border-factor); $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); $border-gray-dark: darken($white-normal, $darken-border-factor); /* * UI elements */ $border-color: #e5e5e5; $shadow-color: $t-gray-a-08; $well-expand-item: #e8f2f7; $well-inner-border: #eef0f2; $well-light-border: #f1f1f1; $well-light-text-color: #5b6169; /* * Text */ $gl-font-size: 14px; $gl-font-size-xs: 11px; $gl-font-size-small: 12px; $gl-font-size-large: 16px; $gl-font-weight-normal: 400; $gl-font-weight-bold: 600; $gl-text-color: #2e2e2e; $gl-text-color-secondary: #707070; $gl-text-color-tertiary: #919191; $gl-text-color-quaternary: #d6d6d6; $gl-text-color-inverted: rgba(255, 255, 255, 1); $gl-text-color-secondary-inverted: rgba(255, 255, 255, 0.85); $gl-text-color-disabled: #919191; $gl-grayish-blue: #7f8fa4; $gl-gray-dark: #313236; $gl-gray-light: #5c5c5c; $gl-header-color: #4c4e54; $gl-font-size-12: 12px; $gl-font-size-14: 14px; $gl-font-size-16: 16px; $gl-font-size-20: 20px; $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; /* * Tooltips */ $tooltip-font-size: 12px; /* * Padding */ $gl-padding-4: 4px; $gl-padding-8: 8px; $gl-padding-12: 12px; $gl-padding: 16px; $gl-padding-24: 24px; $gl-padding-32: 32px; $gl-padding-50: 50px; $gl-col-padding: 15px; $gl-input-padding: 10px; $gl-vert-padding: 6px; $gl-padding-top: 10px; $gl-sidebar-padding: 22px; $gl-bar-padding: 3px; $input-horizontal-padding: 12px; $browser-scrollbar-size: 10px; /* * Misc */ $header-height: 40px; $suggestion-header-height: 46px; $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: 18px; $layout-link-gray: #7e7c7c; $btn-side-margin: 10px; $btn-sm-side-margin: 7px; $btn-margin-5: 5px; $sidebar-block-hover-color: #ebebeb; $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; $flash-height: 52px; $flash-container-top: 48px; $context-header-height: 60px; $breadcrumb-min-height: 48px; $home-panel-title-row-height: 64px; $home-panel-avatar-mobile-size: 24px; $gl-line-height: 16px; $gl-line-height-20: 20px; $gl-line-height-24: 24px; $gl-line-height-14: 14px; $issue-box-upcoming-bg: #8f8f8f; $pages-group-name-color: #4c4e54; /* * 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; $line-removed: #fbe9eb; $line-removed-dark: #fac5cd; $line-number-old: #f9d7dc; $line-number-new: #ddfbe6; $line-number-select: #fbf2da; $line-target-blue: #f6faff; $line-select-yellow: #fcf8e7; $line-select-yellow-dark: #f0e2bd; $dark-diff-match-bg: rgba(255, 255, 255, 0.3); $dark-diff-match-color: rgba(255, 255, 255, 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: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; $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'; /* * 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-fa-color: #c7c7c7; $dropdown-input-focus-shadow: rgba($blue-300, 0.4); $dropdown-loading-bg: rgba(#fff, 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(0, 0, 0, 0.04); $link-hover-background: rgba(0, 0, 0, 0.06); $inactive-badge-background: rgba(0, 0, 0, 0.08); $sidebar-toggle-height: 60px; $sidebar-toggle-width: 40px; $sidebar-milestone-toggle-bottom-margin: 10px; /* * Buttons */ $btn-active-gray: #ececec; $btn-active-gray-light: #e4e7ed; $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; $gl-btn-xs-font-size: 13px; $gl-btn-xs-line-height: 13px; /* * Badges */ $badge-bg: rgba(0, 0, 0, 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; /* * 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; $location-icon-color: #e7e9ed; /* * Notes */ $note-disabled-comment-color: #b2b2b2; $note-targe3-outside: #fffff0; $note-targe3-inside: #ffffd3; $note-icon-gutter-width: 55px; /* * Identicon */ $identicon-red: #ffebee; $identicon-purple: #f3e5f5; $identicon-indigo: #e8eaf6; $identicon-blue: #e3f2fd; $identicon-teal: #e0f2f1; $identicon-orange: #fbe9e7; /* * Calendar */ $calendar-hover-bg: #ecf3fe; $calendar-border-color: rgba(#000, 0.1); $calendar-user-contrib-text: #959494; /* * Value Stream Analytics */ $cycle-analytics-box-padding: 30px; $cycle-analytics-box-text-color: #8c8c8c; $cycle-analytics-big-font: 19px; $cycle-analytics-light-gray: #bfbfbf; $cycle-analytics-dismiss-icon-color: #b2b2b2; /* * CI */ $ci-skipped-color: #888; /* * Boards */ $issue-boards-font-size: 14px; $issue-boards-card-shadow: rgba(0, 0, 0, 0.1); /* 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; $issue-boards-breadcrumbs-height-xs: 63px; $issue-board-list-difference-xs: $header-height + $issue-boards-breadcrumbs-height-xs; $issue-board-list-difference-sm: $header-height + $breadcrumb-min-height; $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height; /* * 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-trace-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; /* * 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: 36px; /* * Common */ $common-gray-light: #bbb; $common-gray-dark: #444; /* * Files */ $logs-li-color: #888; $logs-p-color: #333; /* * Forms */ $input-height: 34px; $input-danger-bg: #f2dede; $input-group-addon-bg: #f7f8fa; $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; $accepting-mr-label-color: #69d100; /* * Issues */ $issues-today-bg: #f3fff2; $issues-today-border: #e1e8d5; $compare-display-color: #888; /* * 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; /* * Projects */ $project-option-descr-color: #54565b; $project-network-controls-color: #888; $feature-toggle-color: #fff; $feature-toggle-text-color: #fff; $feature-toggle-color-enabled: #4a8bee; /* * Monitor Charts */ $chart-tooltip-max-width: 512px; /* 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 */ $kdb-bg: #fcfcfc; $kdb-border-bottom: #bbb; $kdb-shadow: #bbb; $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; $pipeline-dropdown-status-icon-size: 18px; $ci-action-dropdown-button-size: 24px; $ci-action-dropdown-svg-size: 12px; $pipelines-table-header-height: 40px; /* CI variable lists */ $ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding}); /* Filtered Search */ $filter-name-resting-color: #f8f8f8; $filter-name-text-color: rgba(0, 0, 0, 0.55); $filter-value-text-color: rgba(0, 0, 0, 0.85); $filter-name-selected-color: #ebebeb; $filter-value-selected-color: #d7d7d7; /* Animation Functions */ $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1); /* GitLab Plans */ $gl-gold-plan: #d4af37; $gl-silver-plan: #91a1ab; $gl-bronze-plan: #cd7f32; /* Cross-project Pipelines */ $linked-project-column-margin: 60px; /* Performance Bar */ $perf-bar-production: #222; $perf-bar-staging: #291430; $perf-bar-development: #4c1210; $perf-bar-bucket-bg: #111; $perf-bar-bucket-box-shadow-from: rgba($white-light, 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; /* 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; $double-headed-arrow-width: 100px; $double-headed-arrow-height: 25px; $right-arrow-size: 16px; /* 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; /* Issues Analytics */ $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15); /* Merge Requests */ $mr-tabs-height: 48px; $mr-version-controls-height: 56px; $mr-widget-margin-left: 40px; /* Compare Branches */ $compare-branches-sticky-header-height: 68px; /** 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; /* Licenses */ $license-header-cell-width: 150px;