debian-mirror-gitlab/app/assets/stylesheets/framework/icons.scss

88 lines
1.8 KiB
SCSS
Raw Normal View History

2022-07-23 23:45:48 +05:30
@mixin icon-styles($primary-color, $svg-color) {
svg,
.gl-icon {
fill: $primary-color;
}
// For the pipeline mini graph, we pass a custom 'gl-border' so that we can enforce
// a border of 1px instead of the thicker svg borders to adhere to design standards.
// If we implement the component with 'isBorderless' and also pass that border,
// this css is to dynamically apply the correct border color for those specific icons.
&.borderless {
border-color: $primary-color;
2017-08-17 22:00:37 +05:30
}
2022-07-16 23:28:13 +05:30
&.interactive {
&:hover {
2022-07-23 23:45:48 +05:30
background: $svg-color;
}
2022-07-16 23:28:13 +05:30
2022-07-23 23:45:48 +05:30
&:hover,
&.active {
box-shadow: 0 0 0 1px $primary-color;
2022-07-16 23:28:13 +05:30
}
}
2017-08-17 22:00:37 +05:30
}
2022-07-23 23:45:48 +05:30
.ci-status-icon-success,
.ci-status-icon-passed {
@include icon-styles($green-500, $green-100);
}
2021-01-03 14:25:43 +05:30
.ci-status-icon-error,
2017-08-17 22:00:37 +05:30
.ci-status-icon-failed {
2022-07-23 23:45:48 +05:30
@include icon-styles($red-500, $red-100);
2017-08-17 22:00:37 +05:30
}
.ci-status-icon-pending,
2020-03-13 15:44:24 +05:30
.ci-status-icon-waiting-for-resource,
2019-07-31 22:56:46 +05:30
.ci-status-icon-failed-with-warnings,
.ci-status-icon-success-with-warnings {
2022-07-23 23:45:48 +05:30
@include icon-styles($orange-500, $orange-100);
2019-12-21 20:55:43 +05:30
}
2017-08-17 22:00:37 +05:30
.ci-status-icon-running {
2022-07-23 23:45:48 +05:30
@include icon-styles($blue-500, $blue-100);
2017-08-17 22:00:37 +05:30
}
.ci-status-icon-canceled,
2021-03-11 19:13:27 +05:30
.ci-status-icon-disabled,
.ci-status-icon-scheduled,
.ci-status-icon-manual {
2022-07-23 23:45:48 +05:30
@include icon-styles($gray-900, $gray-100);
2017-08-17 22:00:37 +05:30
}
2021-11-11 11:23:49 +05:30
.ci-status-icon-notification,
2021-03-11 19:13:27 +05:30
.ci-status-icon-preparing,
2017-08-17 22:00:37 +05:30
.ci-status-icon-created,
2018-03-17 18:26:18 +05:30
.ci-status-icon-skipped,
.ci-status-icon-notfound {
2022-07-23 23:45:48 +05:30
@include icon-styles($gray-500, $gray-100);
2017-08-17 22:00:37 +05:30
}
2022-08-13 15:12:31 +05:30
.password-status-icon-success {
svg {
vertical-align: middle;
fill: $green-500;
}
}
2017-08-17 22:00:37 +05:30
.icon-link {
&:hover {
text-decoration: none;
}
}
2017-09-10 17:25:29 +05:30
.user-avatar-link {
text-decoration: none;
}
2019-02-15 15:39:39 +05:30
.circle-icon-container {
$border-size: 1px;
display: flex;
align-items: center;
justify-content: center;
2020-10-24 23:57:45 +05:30
color: $gray-500;
2019-02-15 15:39:39 +05:30
}