debian-mirror-gitlab/app/assets/stylesheets/utilities.scss

132 lines
3.2 KiB
SCSS
Raw Normal View History

2020-05-24 23:13:21 +05:30
/**
Please note: These are deprecated in favor of the Gitlab UI utility classes.
Check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss
to see the available utility classes. If you cannot find the class you need,
consider adding it to Gitlab UI before adding it here.
**/
2019-07-07 11:18:12 +05:30
@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;
}
}
2019-12-04 20:38:33 +05:30
2019-12-26 22:10:19 +05:30
@each $index, $size in $size-scale {
#{'.mw-#{$index}'} {
max-width: $size;
}
}
2020-03-13 15:44:24 +05:30
@each $index, $size in $type-scale {
#{'.lh-#{$index}'} {
line-height: $size;
}
}
@for $i from 1 through 12 {
#{'.tab-width-#{$i}'} {
2020-07-28 23:09:34 +05:30
/* stylelint-disable-next-line property-no-vendor-prefix */
2020-03-13 15:44:24 +05:30
-moz-tab-size: $i;
tab-size: $i;
}
}
2019-12-04 20:38:33 +05:30
.border-width-1px { border-width: 1px; }
.border-style-dashed { border-style: dashed; }
.border-style-solid { border-style: solid; }
.border-color-blue-300 { border-color: $blue-300; }
.border-color-default { border-color: $border-color; }
2020-04-22 19:07:51 +05:30
.border-radius-default { border-radius: $border-radius-default; }
2020-05-24 23:13:21 +05:30
.border-radius-small { border-radius: $border-radius-small; }
2019-12-26 22:10:19 +05:30
.box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; }
2020-03-13 15:44:24 +05:30
.gl-children-ml-sm-3 > * {
@include media-breakpoint-up(sm) {
@include gl-ml-3;
}
}
2020-01-01 13:55:28 +05:30
.mh-50vh { max-height: 50vh; }
2020-04-22 19:07:51 +05:30
.min-width-0 {
// By default flex items don't shrink below their minimum content size. To change this, set the item's min-width
min-width: 0;
}
2020-03-13 15:44:24 +05:30
.font-size-inherit { font-size: inherit; }
2020-04-08 14:13:33 +05:30
.gl-w-8 { width: px-to-rem($grid-size); }
.gl-w-16 { width: px-to-rem($grid-size * 2); }
2019-12-26 22:10:19 +05:30
.gl-w-64 { width: px-to-rem($grid-size * 8); }
2020-04-08 14:13:33 +05:30
.gl-h-8 { height: px-to-rem($grid-size); }
2020-03-13 15:44:24 +05:30
.gl-h-32 { height: px-to-rem($grid-size * 4); }
2019-12-26 22:10:19 +05:30
.gl-h-64 { height: px-to-rem($grid-size * 8); }
2020-01-01 13:55:28 +05:30
2020-10-24 23:57:45 +05:30
// Migrate this to Gitlab UI when FF is removed
// https://gitlab.com/groups/gitlab-org/-/epics/2882
.gl-h-200\! { height: px-to-rem($grid-size * 25) !important; }
2020-06-23 00:09:42 +05:30
.d-sm-table-column {
@include media-breakpoint-up(sm) {
display: table-column !important;
}
2020-05-24 23:13:21 +05:30
}
2020-01-01 13:55:28 +05:30
.gl-text-purple { color: $purple; }
.gl-bg-purple-light { background-color: $purple-light; }
2020-06-23 00:09:42 +05:30
// move this to GitLab UI once onboarding experiment is considered a success
.gl-py-8 {
padding-top: $gl-spacing-scale-8;
padding-bottom: $gl-spacing-scale-8;
2020-04-22 19:07:51 +05:30
}
2020-05-24 23:13:21 +05:30
2020-07-28 23:09:34 +05:30
.gl-transition-property-stroke-opacity {
transition-property: stroke-opacity;
}
.gl-transition-property-stroke {
transition-property: stroke;
}
.gl-top-66vh {
top: 66vh;
}
2020-11-24 15:15:51 +05:30
.gl-shadow-x0-y0-b3-s1-blue-500 {
box-shadow: inset 0 0 3px $gl-border-size-1 $blue-500;
}
2021-01-03 14:25:43 +05:30
// This utility is used to force the z-index to match that of dropdown menu's
.gl-z-dropdown-menu\! {
z-index: 300 !important;
2020-11-24 15:15:51 +05:30
}
2021-01-03 14:25:43 +05:30
.gl-flex-basis-quarter {
flex-basis: 25%;
2020-11-24 15:15:51 +05:30
}
2021-01-03 14:25:43 +05:30
.gl-md-ml-3 {
2020-11-24 15:15:51 +05:30
@media (min-width: $breakpoint-md) {
2021-01-03 14:25:43 +05:30
margin-left: $gl-spacing-scale-3;
2020-11-24 15:15:51 +05:30
}
}
2021-01-29 00:20:46 +05:30
// This is used to help prevent issues with margin collapsing.
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing.
.gl-force-block-formatting-context::after {
content: '';
display: flex;
}