mirror of
				https://github.com/twbs/bootstrap.git
				synced 2025-11-03 00:09:53 -05:00 
			
		
		
		
	- Rename `$enable-prefers-reduced-motion-media-query` to `$enable-reduced-motion` - Rename `$enable-pointer-cursor-for-buttons` to `$enable-button-pointers`
		
			
				
	
	
		
			46 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			46 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
// Disable animation if transitions are disabled
 | 
						|
@if $enable-transitions {
 | 
						|
  @keyframes progress-bar-stripes {
 | 
						|
    0% { background-position-x: $progress-height; }
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
.progress {
 | 
						|
  display: flex;
 | 
						|
  height: $progress-height;
 | 
						|
  overflow: hidden; // force rounded corners by cropping it
 | 
						|
  @include font-size($progress-font-size);
 | 
						|
  background-color: $progress-bg;
 | 
						|
  @include border-radius($progress-border-radius);
 | 
						|
  @include box-shadow($progress-box-shadow);
 | 
						|
}
 | 
						|
 | 
						|
.progress-bar {
 | 
						|
  display: flex;
 | 
						|
  flex-direction: column;
 | 
						|
  justify-content: center;
 | 
						|
  overflow: hidden;
 | 
						|
  color: $progress-bar-color;
 | 
						|
  text-align: center;
 | 
						|
  white-space: nowrap;
 | 
						|
  background-color: $progress-bar-bg;
 | 
						|
  @include transition($progress-bar-transition);
 | 
						|
}
 | 
						|
 | 
						|
.progress-bar-striped {
 | 
						|
  @include gradient-striped();
 | 
						|
  background-size: $progress-height $progress-height;
 | 
						|
}
 | 
						|
 | 
						|
@if $enable-transitions {
 | 
						|
  .progress-bar-animated {
 | 
						|
    animation: progress-bar-stripes $progress-bar-animation-timing;
 | 
						|
 | 
						|
    @if $enable-reduced-motion {
 | 
						|
      @media (prefers-reduced-motion: reduce) {
 | 
						|
        animation: none;
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 |