@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%); }