454 lines
8 KiB
SCSS
454 lines
8 KiB
SCSS
/**
|
|
* Prefilled mixins
|
|
* Mixins with fixed values
|
|
*/
|
|
|
|
@keyframes blinking-dot {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
75% {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes blinking-scroll-button {
|
|
0% {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
@mixin str-truncated($max-width: 82%) {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
max-width: $max-width;
|
|
}
|
|
|
|
/**
|
|
* Mixin for fixed width container
|
|
*/
|
|
@mixin fixed-width-container {
|
|
max-width: $limited-layout-width - ($gl-padding * 2);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/*
|
|
* Base mixin for lists in GitLab
|
|
*/
|
|
@mixin basic-list {
|
|
margin: 5px 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
> li {
|
|
@include clearfix;
|
|
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid $gray-darker;
|
|
display: block;
|
|
margin: 0;
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
&.active {
|
|
background: $gray-light;
|
|
|
|
a {
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|
|
}
|
|
|
|
&.hide {
|
|
display: none;
|
|
}
|
|
|
|
&.light {
|
|
a {
|
|
color: $gl-text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin basic-list-stats {
|
|
.stats {
|
|
float: right;
|
|
line-height: $list-text-height;
|
|
color: $gl-text-color-secondary;
|
|
|
|
span {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin webkit-prefix($property, $value) {
|
|
#{'-webkit-' + $property}: $value;
|
|
#{$property}: $value;
|
|
}
|
|
|
|
/* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
|
|
@mixin on-webkit-only {
|
|
/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
|
|
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin keyframes($animation-name) {
|
|
@keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin include-keyframes($animation-name) {
|
|
@include webkit-prefix(animation-name, $animation-name);
|
|
@include keyframes($animation-name) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Mixin for status badges, as used for pipelines and commit signatures
|
|
*/
|
|
@mixin status-color($color-light, $color-main, $color-dark) {
|
|
color: $color-main;
|
|
border-color: $color-main;
|
|
|
|
&:not(span):hover {
|
|
background-color: $color-light;
|
|
color: $color-dark;
|
|
border-color: $color-dark;
|
|
}
|
|
}
|
|
|
|
@mixin green-status-color {
|
|
@include status-color($green-100, $green-500, $green-700);
|
|
}
|
|
|
|
@mixin fade($gradient-direction, $gradient-color) {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
position: absolute;
|
|
bottom: 12px;
|
|
width: 43px;
|
|
height: 30px;
|
|
transition-duration: 0.3s;
|
|
transform: translateZ(0);
|
|
background: linear-gradient(to $gradient-direction,
|
|
$gradient-color 45%,
|
|
rgba($gradient-color, 0.4));
|
|
|
|
&.scrolling {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition-duration: 0.3s;
|
|
}
|
|
|
|
.fa,
|
|
svg {
|
|
position: relative;
|
|
top: 5px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@mixin scrolling-links() {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@mixin triangle($color, $border-color, $size, $border-size) {
|
|
&::before,
|
|
&::after {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
border: solid transparent;
|
|
content: '';
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::before {
|
|
border-color: transparent;
|
|
border-bottom-color: $border-color;
|
|
border-width: ($size + $border-size);
|
|
margin-left: -($size + $border-size);
|
|
}
|
|
|
|
&::after {
|
|
border-color: transparent;
|
|
border-bottom-color: $color;
|
|
border-width: $size;
|
|
margin-left: -$size;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Mixin that fixes wrapping issues with long strings (e.g. URLs)
|
|
*
|
|
* Note: the width needs to be set for it to work in Firefox
|
|
*/
|
|
@mixin overflow-break-word {
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/*
|
|
* Mixin that handles the container for the job logs (CI/CD and kubernetes pod logs)
|
|
*/
|
|
@mixin build-trace($background: $black) {
|
|
background: $background;
|
|
color: $gray-darkest;
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
font-size: 12px;
|
|
border-radius: 0;
|
|
border: 0;
|
|
padding: $grid-size;
|
|
|
|
.bash {
|
|
display: block;
|
|
}
|
|
|
|
&.build-trace-rounded {
|
|
border-radius: $gl-border-radius-base;
|
|
}
|
|
}
|
|
|
|
// Used in EE for Web Terminal
|
|
@mixin build-trace-bar($height) {
|
|
height: $height;
|
|
min-height: $height;
|
|
background: $gray-light;
|
|
border: 1px solid $border-color;
|
|
color: $gl-text-color;
|
|
padding: $grid-size;
|
|
}
|
|
|
|
@mixin build-trace-top-bar($height) {
|
|
@include build-trace-bar($height);
|
|
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: $header-height;
|
|
|
|
.with-performance-bar & {
|
|
top: $header-height + $performance-bar-height;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Mixin that handles the position of the controls placed on the top bar
|
|
*/
|
|
@mixin build-controllers($control-font-size, $flex-direction, $with-grow, $flex-grow-size, $svg-display: block, $svg-top: 2px) {
|
|
display: flex;
|
|
font-size: $control-font-size;
|
|
justify-content: $flex-direction;
|
|
align-items: center;
|
|
align-self: baseline;
|
|
@if $with-grow {
|
|
flex-grow: $flex-grow-size;
|
|
}
|
|
|
|
svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
display: $svg-display;
|
|
top: $svg-top;
|
|
}
|
|
|
|
.controllers-buttons {
|
|
color: $gl-text-color;
|
|
margin: 0 $grid-size;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.btn-scroll.animate {
|
|
.scroll-arrow {
|
|
animation: blinking-scroll-button 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.scroll-dot {
|
|
animation: blinking-scroll-button 1.5s ease-in-out infinite;
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.btn-scroll:disabled,
|
|
.btn-refresh:disabled {
|
|
opacity: 0.35;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
@mixin build-loader-animation {
|
|
position: relative;
|
|
white-space: initial;
|
|
|
|
.dot {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin: auto auto 12px;
|
|
border-radius: 50%;
|
|
animation: blinking-dot 1s linear infinite;
|
|
background: $white;
|
|
|
|
&:nth-child(2) {
|
|
animation-delay: 0.33s;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
animation-delay: 0.66s;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin borderless-status-icon($color) {
|
|
svg {
|
|
border: 1px solid $color;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
@mixin emoji-menu-toggle-button {
|
|
line-height: 1;
|
|
padding: 0;
|
|
min-width: 16px;
|
|
color: $gray-400;
|
|
fill: $gray-400;
|
|
|
|
.fa {
|
|
position: relative;
|
|
font-size: 16px;
|
|
}
|
|
|
|
svg {
|
|
@include btn-svg;
|
|
margin: 0;
|
|
}
|
|
|
|
.award-control-icon-positive,
|
|
.award-control-icon-super-positive {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
&:hover,
|
|
&.is-active {
|
|
.danger-highlight {
|
|
color: $red-500;
|
|
}
|
|
|
|
.link-highlight {
|
|
color: $blue-600;
|
|
fill: $blue-600;
|
|
}
|
|
|
|
.award-control-icon-neutral {
|
|
opacity: 0;
|
|
}
|
|
|
|
.award-control-icon-positive {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.is-active {
|
|
.award-control-icon-positive {
|
|
opacity: 0;
|
|
}
|
|
|
|
.award-control-icon-super-positive {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Mixin that handles the size and right margin of avatars.
|
|
*/
|
|
@mixin avatar-size($size, $margin-right) {
|
|
width: $size;
|
|
height: $size;
|
|
margin-right: $margin-right;
|
|
}
|
|
|
|
@mixin code-icon-size() {
|
|
width: $gl-font-size * $code-line-height * 0.9;
|
|
height: $gl-font-size * $code-line-height * 0.9;
|
|
}
|
|
|
|
@mixin avatar-counter($border-radius: 1em) {
|
|
background-color: $gray-darkest;
|
|
color: $white;
|
|
border: 1px solid $gray-normal;
|
|
border-radius: $border-radius;
|
|
font-family: $regular-font;
|
|
font-size: 9px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
@mixin middle-dot-divider {
|
|
&::after {
|
|
// Duplicate `content` property used as a fallback
|
|
// scss-lint:disable DuplicateProperty
|
|
content: '\00B7'; // middle dot fallback if browser does not support alternative content
|
|
content: '\00B7' / ''; // tell screen readers to ignore the content https://www.w3.org/TR/css-content-3/#accessibility
|
|
padding: 0 0.375rem;
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|
|
|
|
&:last-child {
|
|
&::after {
|
|
content: '';
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|