diff options
| author | Clement Ho <clemmakesapps@gmail.com> | 2019-04-05 17:04:54 +0000 |
|---|---|---|
| committer | Clement Ho <clemmakesapps@gmail.com> | 2019-04-05 17:04:54 +0000 |
| commit | 9e0302cca79b40ed118d1334be7e9abf00c432eb (patch) | |
| tree | c06016c7836d26275bc0f6518ca73ba3328ed3f1 /doc/development | |
| parent | a35a23cde338590b984156a7e8ea45f5f30742a9 (diff) | |
| parent | a9346f332a607deaaf21fca54dded285bfe2d8e2 (diff) | |
| download | gitlab-ce-9e0302cca79b40ed118d1334be7e9abf00c432eb.tar.gz | |
Merge branch 'css-color-utils' into 'master'
Add color util classes for backgrounds and text
See merge request gitlab-org/gitlab-ce!26898
Diffstat (limited to 'doc/development')
| -rw-r--r-- | doc/development/fe_guide/style_guide_scss.md | 10 |
1 files changed, 9 insertions, 1 deletions
diff --git a/doc/development/fe_guide/style_guide_scss.md b/doc/development/fe_guide/style_guide_scss.md index 6f6b361f423..548d72bea93 100644 --- a/doc/development/fe_guide/style_guide_scss.md +++ b/doc/development/fe_guide/style_guide_scss.md @@ -12,7 +12,15 @@ 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). Existing classes include: + +**Background color**: `.bg-variant-shade` e.g. `.bg-warning-400` +**Text color**: `.text-variant-shade` e.g. `.text-success-500` +- variant is one of 'primary', 'secondary', 'success', 'warning', 'error' +- shade is on of the shades listed on [colors](https://design.gitlab.com/foundations/colors/) + +**Font size**: `.text-size` e.g. `.text-2` +- **size** is number from 1-6 from our [Type scale](https://design.gitlab.com/foundations/typography) ### Naming |