203 lines
3.5 KiB
SCSS
203 lines
3.5 KiB
SCSS
/**
|
|
* Prefilled mixins
|
|
* Mixins with fixed values
|
|
*/
|
|
|
|
@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 markdown tables
|
|
*/
|
|
@mixin markdown-table {
|
|
width: 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 $list-border-light;
|
|
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;
|
|
|
|
span {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin bulleted-list {
|
|
> ul {
|
|
list-style-type: disc;
|
|
|
|
ul {
|
|
list-style-type: circle;
|
|
|
|
ul {
|
|
list-style-type: square;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin dark-diff-match-line {
|
|
color: $dark-diff-match-bg;
|
|
background: $dark-diff-match-color;
|
|
}
|
|
|
|
@mixin webkit-prefix($property, $value) {
|
|
#{'-webkit-' + $property}: $value;
|
|
#{$property}: $value;
|
|
}
|
|
|
|
/* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
|
|
@mixin on-webkit-only {
|
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin keyframes($animation-name) {
|
|
@-webkit-keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
|
|
@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: .3s;
|
|
-webkit-transform: translateZ(0);
|
|
background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));
|
|
|
|
&.scrolling {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition-duration: .3s;
|
|
}
|
|
|
|
.fa {
|
|
position: relative;
|
|
top: 5px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@mixin scrolling-links() {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
display: flex;
|
|
|
|
&::-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;
|
|
}
|
|
}
|