mirror of
https://github.com/hashicorp/vault.git
synced 2026-05-05 12:26:34 +02:00
90 lines
2.0 KiB
SCSS
90 lines
2.0 KiB
SCSS
@use '../utils/box-shadow_variables';
|
|
@use '../utils/size_variables';
|
|
|
|
/**
|
|
* Copyright IBM Corp. 2016, 2025
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
.progress {
|
|
appearance: none;
|
|
background: var(--token-color-surface-faint);
|
|
border: none;
|
|
box-shadow: inset box-shadow_variables.$box-link-shadow;
|
|
border-radius: var(--token-border-radius-x-small);
|
|
display: block;
|
|
height: size_variables.$size-6;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
width: 100%;
|
|
|
|
&.is-small {
|
|
height: 0.5rem;
|
|
}
|
|
&.is-narrow {
|
|
width: 30px;
|
|
}
|
|
&.is-medium {
|
|
height: size_variables.$size-5;
|
|
width: 120px;
|
|
}
|
|
}
|
|
|
|
// style the container in chrome
|
|
.progress[value]::-webkit-progress-bar {
|
|
background-color: #ededed;
|
|
box-shadow: inset box-shadow_variables.$box-link-shadow;
|
|
}
|
|
|
|
// style the bar in chrome
|
|
.progress[value]::-webkit-progress-value {
|
|
background-color: #4a4a4a;
|
|
border-radius: var(--token-border-radius-x-small);
|
|
transition: width 1s size_variables.$easing;
|
|
}
|
|
|
|
// style the bar in firefox
|
|
.progress[value]::-moz-progress-bar {
|
|
border-radius: var(--token-border-radius-x-small);
|
|
transition: width 1s size_variables.$easing;
|
|
}
|
|
|
|
.progress::-ms-fill {
|
|
background-color: #4a4a4a;
|
|
border: none;
|
|
}
|
|
|
|
// is-success and is-info are the two types of progress bars we have
|
|
.progress.is-info::-webkit-progress-value {
|
|
background-color: #3e8ed0;
|
|
}
|
|
|
|
.progress.is-info::-moz-progress-bar {
|
|
background-color: #3e8ed0;
|
|
}
|
|
|
|
.progress.is-info::-ms-fill {
|
|
background-color: #3e8ed0;
|
|
}
|
|
|
|
.progress.is-info:indeterminate {
|
|
background-image: linear-gradient(to right, #3e8ed0 30%, #ededed 30%);
|
|
}
|
|
|
|
.progress.is-success::-webkit-progress-value {
|
|
background-color: var(--token-color-palette-green-200);
|
|
}
|
|
|
|
.progress.is-success::-moz-progress-bar {
|
|
background-color: var(--token-color-palette-green-200);
|
|
}
|
|
|
|
.progress.is-success::-ms-fill {
|
|
background-color: var(--token-color-palette-green-200);
|
|
}
|
|
|
|
.progress.is-success:indeterminate {
|
|
background-image: linear-gradient(to right, var(--token-color-palette-green-200) 30%, #ededed 30%);
|
|
}
|