No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_progress.scss 1.3KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. //
  2. // Progress
  3. //
  4. // Progress container
  5. .progress-wrapper {
  6. position: relative;
  7. padding-top: 1.5rem;
  8. }
  9. // General styles
  10. .progress {
  11. height: 8px;
  12. margin-bottom: $spacer;
  13. overflow: hidden;
  14. border-radius: $border-radius-sm;
  15. background-color: $progress-bg;
  16. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  17. .sr-only {
  18. width: auto;
  19. height: 20px;
  20. margin: 0 0 0 30px;
  21. left: 0;
  22. clip: auto;
  23. line-height: 20px;
  24. font-size: 13px;
  25. }
  26. }
  27. // Progress inner elements
  28. .progress-heading {
  29. font-size: 14px;
  30. font-weight: 500;
  31. margin: 0 0 2px;
  32. padding: 0;
  33. }
  34. .progress-bar {
  35. box-shadow: none;
  36. border-radius: 0;
  37. height: auto;
  38. }
  39. .progress-info{
  40. margin-bottom: .5rem;
  41. display: flex;
  42. align-items: center;
  43. justify-content: space-between;
  44. }
  45. .progress-label {
  46. span {
  47. display: inline-block;
  48. color: $primary;
  49. font-size: .625rem;
  50. font-weight: 600;
  51. text-transform: uppercase;
  52. background: rgba($primary, .1);
  53. padding: .25rem 1rem;
  54. border-radius: 30px;
  55. }
  56. }
  57. .progress-percentage {
  58. text-align: right;
  59. span {
  60. display: inline-block;
  61. color: $gray-600;
  62. font-size: .875rem;
  63. font-weight: 600;
  64. }
  65. }