drone/web/src/components/ExecutionStatus/ExecutionStatus.module.scss
2023-09-24 07:33:16 +00:00

131 lines
2.4 KiB
SCSS

/*
* Copyright 2023 Harness, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.main {
--fgColor: var(--green-500);
--bgColor: var(--green-50);
--primary-7: var(--fgColor) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center;
border-radius: 4px;
padding: 2px 6px 2px 5px !important;
font-weight: 700 !important;
font-size: 10px !important;
line-height: 10px !important;
align-self: end;
color: var(--fgColor) !important;
background-color: var(--bgColor) !important;
> span {
padding-right: 5px !important;
}
&.iconOnly {
padding: 5px !important;
> span {
padding-right: 0 !important;
}
}
&.noBackground {
--bgColor: transparent !important;
}
&.waiting {
svg {
> circle {
fill: var(--orange-700) !important;
}
}
}
&.executionWaiting {
svg {
> circle {
fill: #b0b1c3 !important;
}
}
}
&.pending {
--fgColor: var(--grey-600);
--bgColor: var(--grey-100);
}
&.running {
--fgColor: var(--orange-900);
--bgColor: var(--orange-100);
svg {
> circle {
fill: var(--fgColor) !important;
}
}
}
&.runningBlue {
svg {
> circle {
fill: var(--primary-6) !important;
}
}
}
&.success {
--fgColor: var(--green-800);
--bgColor: var(--green-50);
svg {
path {
fill: var(--green-700) !important;
}
g {
stroke: var(--green-700) !important;
}
}
}
&.failure {
--fgColor: var(--red-900);
--bgColor: var(--red-50);
svg {
path {
fill: var(--red-600) !important;
}
g {
stroke: var(--red-600) !important;
}
}
}
&.error {
--fgColor: var(--red-900);
--bgColor: var(--red-50);
svg {
path:last-of-type {
--primary-7: var(--white) !important;
}
}
}
}