147 lines
2.3 KiB
SCSS
147 lines
2.3 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: none;
|
|
}
|
|
|
|
&.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;
|
|
|
|
svg {
|
|
fill: $color-dark;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
fill: $color-main;
|
|
}
|
|
}
|
|
|
|
@mixin green-status-color {
|
|
@include status-color($green-50, $green-500, $green-700);
|
|
}
|