_progress.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. //
  2. // Progress animations
  3. //
  4. @keyframes progress-bar-stripes {
  5. from { background-position: $spacer-y 0; }
  6. to { background-position: 0 0; }
  7. }
  8. //
  9. // Basic progress bar
  10. //
  11. .progress {
  12. display: block;
  13. width: 100%;
  14. height: $spacer-y; // todo: make a new var for this
  15. margin-bottom: $spacer-y;
  16. }
  17. .progress[value] {
  18. // IE10 uses `color` to set the bar background-color
  19. color: #0074d9;
  20. // Remove Firefox and Opera border
  21. border: 0;
  22. // Reset the default appearance
  23. appearance: none;
  24. }
  25. .progress[value]::-webkit-progress-bar {
  26. background-color: #eee;
  27. @include border-radius($border-radius);
  28. @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
  29. }
  30. .progress[value]::-webkit-progress-value::before {
  31. content: attr(value);
  32. }
  33. .progress[value]::-webkit-progress-value {
  34. background-color: #0074d9;
  35. border-top-left-radius: $border-radius;
  36. border-bottom-left-radius: $border-radius;
  37. }
  38. .progress[value="100"]::-webkit-progress-value {
  39. border-top-right-radius: $border-radius;
  40. border-bottom-right-radius: $border-radius;
  41. }
  42. // Firefox styles must be entirely separate or it busts Webkit styles.
  43. //
  44. // Commented out for now because linter.
  45. //
  46. // $-moz-document url-prefix() {
  47. // .progress[value] {
  48. // background-color: #eee;
  49. // .border-radius($border-radius);
  50. // .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
  51. // }
  52. // .progress[value]::-moz-progress-bar {
  53. // background-color: #0074d9;
  54. // border-top-left-radius: $border-radius;
  55. // border-bottom-left-radius: $border-radius;
  56. // }
  57. // .progress[value="0"]::-moz-progress-bar {
  58. // color: $gray-light;
  59. // min-width: 2rem;
  60. // background-color: transparent;
  61. // background-image: none;
  62. // }
  63. // .progress[value="100"]::-moz-progress-bar {
  64. // border-top-right-radius: $border-radius;
  65. // border-bottom-right-radius: $border-radius;
  66. // }
  67. // }
  68. // IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
  69. @media screen and (min-width:0\0) {
  70. .progress {
  71. background-color: #eee;
  72. @include border-radius($border-radius);
  73. @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
  74. }
  75. .progress-bar {
  76. display: inline-block;
  77. height: $spacer-y;
  78. text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
  79. background-color: #0074d9;
  80. border-top-left-radius: $border-radius;
  81. border-bottom-left-radius: $border-radius;
  82. }
  83. .progress[width^="0"] {
  84. min-width: 2rem;
  85. color: $gray-light;
  86. background-color: transparent;
  87. background-image: none;
  88. }
  89. .progress[width="100%"] {
  90. border-top-right-radius: $border-radius;
  91. border-bottom-right-radius: $border-radius;
  92. }
  93. }
  94. //
  95. // Striped
  96. //
  97. .progress-striped[value]::-webkit-progress-value {
  98. @include gradient-striped();
  99. background-size: $spacer-y $spacer-y;
  100. }
  101. .progress-striped[value]::-moz-progress-bar {
  102. @include gradient-striped();
  103. background-size: $spacer-y $spacer-y;
  104. }
  105. // IE9
  106. @media screen and (min-width:0\0) {
  107. .progress-bar-striped {
  108. @include gradient-striped();
  109. background-size: $spacer-y $spacer-y;
  110. }
  111. }
  112. //
  113. // Animated
  114. //
  115. .progress-animated[value]::-webkit-progress-value {
  116. animation: progress-bar-stripes 2s linear infinite;
  117. }
  118. .progress-animated[value]::-moz-progress-bar {
  119. animation: progress-bar-stripes 2s linear infinite;
  120. }
  121. // IE9
  122. @media screen and (min-width:0\0) {
  123. .progress-animated .progress-bar-striped {
  124. animation: progress-bar-stripes 2s linear infinite;
  125. }
  126. }
  127. //
  128. // Variations
  129. //
  130. .progress-success {
  131. @include progress-variant($progress-bar-success-bg);
  132. }
  133. .progress-info {
  134. @include progress-variant($progress-bar-info-bg);
  135. }
  136. .progress-warning {
  137. @include progress-variant($progress-bar-warning-bg);
  138. }
  139. .progress-danger {
  140. @include progress-variant($progress-bar-danger-bg);
  141. }