Add color util classes for backgrounds and text
We have a range of shades for most of the theme colors Grouped them into color maps the same way Bootstrap does for $grays already Also add type scale utils
This commit is contained in:
parent
645303c7e7
commit
c4c6dcb68c
|
@ -6,40 +6,29 @@
|
|||
*= require cropper.css
|
||||
*/
|
||||
|
||||
/*
|
||||
* Welcome to GitLab css!
|
||||
* If you need to add or modify UI component that is common for many pages
|
||||
* like a table or typography then make changes in the framework/ directory.
|
||||
* If you need to add unique style that should affect only one page - use pages/
|
||||
* directory.
|
||||
*/
|
||||
|
||||
// Welcome to GitLab css!
|
||||
// If you need to add or modify UI component that is common for many pages
|
||||
// like a table or typography then make changes in the framework/ directory.
|
||||
// If you need to add unique style that should affect only one page - use pages/
|
||||
// directory.
|
||||
@import "../../../node_modules/at.js/dist/css/jquery.atwho";
|
||||
@import "../../../node_modules/pikaday/scss/pikaday";
|
||||
@import "../../../node_modules/dropzone/dist/basic";
|
||||
@import "../../../node_modules/select2/select2";
|
||||
|
||||
/*
|
||||
* GitLab UI framework
|
||||
*/
|
||||
// GitLab UI framework
|
||||
@import "framework";
|
||||
|
||||
/*
|
||||
* Font icons
|
||||
*/
|
||||
// Font icons
|
||||
@import "font-awesome";
|
||||
|
||||
/*
|
||||
* Page specific styles (issues, projects etc):
|
||||
*/
|
||||
// Page specific styles (issues, projects etc):
|
||||
@import "pages/**/*";
|
||||
|
||||
/*
|
||||
* Component specific styles, will be moved to gitlab-ui
|
||||
*/
|
||||
// Component specific styles, will be moved to gitlab-ui
|
||||
@import "components/**/*";
|
||||
|
||||
/*
|
||||
* Styles for JS behaviors.
|
||||
*/
|
||||
// Styles for JS behaviors.
|
||||
@import "behaviors";
|
||||
|
||||
@import "utilities";
|
||||
|
|
|
@ -110,6 +110,84 @@ $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;
|
||||
|
@ -219,6 +297,15 @@ $gl-gray-dark: #313236;
|
|||
$gl-gray-light: #5c5c5c;
|
||||
$gl-header-color: #4c4e54;
|
||||
|
||||
$type-scale: (
|
||||
1: 12px,
|
||||
2: 14px,
|
||||
3: 16px,
|
||||
4: 20px,
|
||||
5: 28px,
|
||||
6: 42px
|
||||
);
|
||||
|
||||
/*
|
||||
* Lists
|
||||
*/
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
@each $variant, $range in $color-ranges {
|
||||
@each $suffix, $color in $range {
|
||||
#{'.bg-#{$variant}-#{$suffix}'} {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
#{'.text-#{$variant}-#{$suffix}'} {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $index, $size in $type-scale {
|
||||
#{'.text-#{$index}'} {
|
||||
font-size: $size;
|
||||
}
|
||||
}
|
|
@ -12,7 +12,7 @@ led by the [GitLab UI WG](https://gitlab.com/gitlab-com/www-gitlab-com/merge_req
|
|||
We have a few internal utility classes in [`common.scss`](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/framework/common.scss)
|
||||
and we use [Bootstrap's Utility Classes](https://getbootstrap.com/docs/4.3/utilities/)
|
||||
|
||||
New utility classes should be added to [`common.scss`](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/framework/common.scss).
|
||||
New utility classes should be added to [`utilities.scss`](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/utilities.scss).
|
||||
|
||||
### Naming
|
||||
|
||||
|
|
Loading…
Reference in New Issue