173 lines
4.5 KiB
SCSS
173 lines
4.5 KiB
SCSS
/**
|
|
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.
|
|
**/
|
|
@each $index, $size in $type-scale {
|
|
#{'.text-#{$index}'} {
|
|
font-size: $size;
|
|
}
|
|
}
|
|
|
|
@each $index, $size in $size-scale {
|
|
#{'.mw-#{$index}'} {
|
|
max-width: $size;
|
|
}
|
|
}
|
|
|
|
@each $index, $size in $type-scale {
|
|
#{'.lh-#{$index}'} {
|
|
line-height: $size;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 12 {
|
|
#{'.tab-width-#{$i}'} {
|
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
-moz-tab-size: $i;
|
|
tab-size: $i;
|
|
}
|
|
}
|
|
|
|
.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; }
|
|
.border-radius-default { border-radius: $border-radius-default; }
|
|
.border-radius-small { border-radius: $border-radius-small; }
|
|
.box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; }
|
|
|
|
// Override Bootstrap class with offset for system-header and
|
|
// performance bar when present
|
|
.fixed-top {
|
|
top: $calc-application-bars-height;
|
|
}
|
|
|
|
.gl-children-ml-sm-3 > * {
|
|
@include media-breakpoint-up(sm) {
|
|
@include gl-ml-3;
|
|
}
|
|
}
|
|
|
|
.gl-first-child-ml-sm-0 > a:first-child,
|
|
.gl-first-child-ml-sm-0 > button:first-child {
|
|
@include media-breakpoint-up(sm) {
|
|
@include gl-ml-0;
|
|
}
|
|
}
|
|
|
|
.mh-50vh { max-height: 50vh; }
|
|
|
|
.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;
|
|
}
|
|
|
|
.gl-min-h-100vh {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
// .gl-font-size-inherit will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1466
|
|
.gl-font-size-inherit,
|
|
.font-size-inherit { font-size: inherit; }
|
|
.gl-w-16 { width: px-to-rem($grid-size * 2); }
|
|
.gl-w-64 { width: px-to-rem($grid-size * 8); }
|
|
.gl-h-32 { height: px-to-rem($grid-size * 4); }
|
|
.gl-h-64 { height: px-to-rem($grid-size * 8); }
|
|
|
|
// 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; }
|
|
|
|
// This utility is used to force the z-index to match that of dropdown menu's
|
|
.gl-z-dropdown-menu\! {
|
|
z-index: $zindex-dropdown-menu !important;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
/**
|
|
Note: ::-webkit-scrollbar is a non-standard rule only
|
|
supported by webkit browsers.
|
|
|
|
It is added here to migrate components that use
|
|
scrolling-links() mixin from `app/assets/stylesheets/framework/mixins.scss`.
|
|
|
|
It should not be used elsewhere: it may impact accessibility as well as
|
|
add browser compatibility issues.
|
|
|
|
See: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
|
|
**/
|
|
.gl-webkit-scrollbar-display-none {
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465
|
|
.gl-focus-ring-border-1-gray-900\! {
|
|
@include gl-focus($gl-border-size-1, $gray-900, true);
|
|
}
|
|
|
|
.gl-sm-mr-0\! {
|
|
@include gl-media-breakpoint-down(md) {
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
.gl-sm-mb-5 {
|
|
@include gl-media-breakpoint-down(md) {
|
|
margin-bottom: $gl-spacing-scale-5;
|
|
}
|
|
}
|
|
|
|
.gl-md-w-15 {
|
|
@include gl-media-breakpoint-up(md) {
|
|
width: $gl-spacing-scale-15;
|
|
}
|
|
}
|
|
|
|
.gl-md-w-20 {
|
|
@include gl-media-breakpoint-up(md) {
|
|
width: $gl-spacing-scale-20;
|
|
}
|
|
}
|
|
|
|
.gl-md-w-30 {
|
|
@include gl-media-breakpoint-up(md) {
|
|
width: $gl-spacing-scale-30;
|
|
}
|
|
}
|
|
|
|
.gl-fill-orange-500 {
|
|
fill: $orange-500;
|
|
}
|
|
|
|
.gl-fill-red-500 {
|
|
fill: $red-500;
|
|
}
|
|
|
|
/**
|
|
Note: used by app/assets/javascripts/vue_shared/components/truncated_text/truncated_text.vue
|
|
Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab/-/issues/408643
|
|
|
|
Although this solution uses vendor-prefixes, it is supported by all browsers and it is
|
|
currently the only way to truncate text by lines. See https://caniuse.com/css-line-clamp
|
|
**/
|
|
.gl-truncate-text-by-line {
|
|
// stylelint-disable-next-line value-no-vendor-prefix
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: var(--lines);
|
|
-webkit-box-orient: vertical;
|
|
|
|
@include gl-media-breakpoint-down(sm) {
|
|
-webkit-line-clamp: var(--mobile-lines);
|
|
}
|
|
}
|