kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

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:
Simon Knox 2019-04-03 13:24:07 +11:00
parent 645303c7e7
commit c4c6dcb68c
4 changed files with 117 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/assets/stylesheets/application.scss
View File

@ -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";

87
app/assets/stylesheets/framework/variables.scss
View File

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

17
app/assets/stylesheets/utilities.scss Normal file
View File

@ -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;
}
}

2
doc/development/fe_guide/style_guide_scss.md
View File

@ -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