diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-20 14:34:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-20 14:34:42 +0000 |
commit | 9f46488805e86b1bc341ea1620b866016c2ce5ed (patch) | |
tree | f9748c7e287041e37d6da49e0a29c9511dc34768 /app/assets/stylesheets/framework/common.scss | |
parent | dfc92d081ea0332d69c8aca2f0e745cb48ae5e6d (diff) | |
download | gitlab-ce-9f46488805e86b1bc341ea1620b866016c2ce5ed.tar.gz |
Add latest changes from gitlab-org/gitlab@13-0-stable-ee
Diffstat (limited to 'app/assets/stylesheets/framework/common.scss')
-rw-r--r-- | app/assets/stylesheets/framework/common.scss | 59 |
1 files changed, 40 insertions, 19 deletions
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 320bd4adaaa..93361c21642 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -392,6 +392,10 @@ img.emoji { } /** COMMON CLASSES **/ +/** + 🚨 Do not use these classes — they are deprecated and being removed. 🚨 + See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details. +**/ .prepend-top-0 { margin-top: 0; } .prepend-top-2 { margin-top: 2px; } .prepend-top-4 { margin-top: $gl-padding-4; } @@ -434,6 +438,7 @@ img.emoji { .append-bottom-20 { margin-bottom: 20px; } .append-bottom-default { margin-bottom: $gl-padding; } .prepend-bottom-32 { margin-bottom: 32px; } +.ml-10 { margin-left: 4.5rem; } .inline { display: inline-block; } .center { text-align: center; } .block { display: block; } @@ -490,7 +495,8 @@ img.emoji { 🚨 Do not use these classes — they are 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 below using the following values. + Instead, if you need a spacing class, please use one from Gitlab UI — + https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss — which uses the following scale. $gl-spacing-scale-0: 0; $gl-spacing-scale-1: 2px; $gl-spacing-scale-2: 4px; @@ -505,21 +511,38 @@ img.emoji { $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. **/ @each $index, $padding in $spacing-scale { - #{'.gl-p-#{$index}'} { padding: $padding; } - #{'.gl-pl-#{$index}'} { padding-left: $padding; } - #{'.gl-pr-#{$index}'} { padding-right: $padding; } - #{'.gl-pt-#{$index}'} { padding-top: $padding; } - #{'.gl-pb-#{$index}'} { padding-bottom: $padding; } + #{'.gl-p-#{$index}-deprecated-no-really-do-not-use-me'} { padding: $padding; } + #{'.gl-pl-#{$index}-deprecated-no-really-do-not-use-me'} { padding-left: $padding; } + #{'.gl-pr-#{$index}-deprecated-no-really-do-not-use-me'} { padding-right: $padding; } + #{'.gl-pt-#{$index}-deprecated-no-really-do-not-use-me'} { padding-top: $padding; } + #{'.gl-pb-#{$index}-deprecated-no-really-do-not-use-me'} { padding-bottom: $padding; } +} + +/** + The zero-indexed classes will not change and do not need to be updated. + These can be removed when the Gitlab UI class include is merged. +**/ + +.gl-p-0 { + padding: 0; +} + +.gl-pl-0 { + padding-left: 0; +} + +.gl-pr-0 { + padding-right: 0; +} + +.gl-pt-0 { + padding-top: 0; +} + +.gl-pb-0 { + padding-bottom: 0; } /** @@ -610,15 +633,13 @@ img.emoji { } } -.gl-font-size-small { font-size: $gl-font-size-small; } -.gl-font-size-large { font-size: $gl-font-size-large; } +.gl-font-sm { font-size: $gl-font-size-small; } +.gl-font-lg { font-size: $gl-font-size-large; } +.gl-font-base { font-size: $gl-font-size-14; } .gl-line-height-24 { line-height: $gl-line-height-24; } .gl-font-size-0 { font-size: 0; } -.gl-font-size-12 { font-size: $gl-font-size-12; } -.gl-font-size-14 { font-size: $gl-font-size-14; } -.gl-font-size-16 { font-size: $gl-font-size-16; } .gl-font-size-28 { font-size: $gl-font-size-28; } .gl-font-size-42 { font-size: $gl-font-size-42; } |