mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-06 22:57:02 +02:00
f18a0643d3
* update greys to use hds tokens * update blue vars * remove unused color vars * replace remaining colors, add hex codes in commnets * update kv rgp color * remove color_variables file and use hds tokens directly
90 lines
2.0 KiB
SCSS
90 lines
2.0 KiB
SCSS
@use '../utils/box-shadow_variables';
|
|
@use '../utils/size_variables';
|
|
|
|
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
.progress {
|
|
appearance: none;
|
|
background: var(--token-color-palette-neutral-50);
|
|
border: none;
|
|
box-shadow: inset box-shadow_variables.$box-link-shadow;
|
|
border-radius: size_variables.$radius;
|
|
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: size_variables.$radius;
|
|
transition: width 1s size_variables.$easing;
|
|
}
|
|
|
|
// style the bar in firefox
|
|
.progress[value]::-moz-progress-bar {
|
|
border-radius: size_variables.$radius;
|
|
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%);
|
|
}
|