progress.css

Same filename in this branch
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
  2. 8.9.x core/themes/seven/css/classy/components/progress.css
  3. 8.9.x core/themes/bartik/css/classy/components/progress.css
  4. 8.9.x core/themes/classy/css/components/progress.css
Same filename and directory in other branches
  1. 10 core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
  2. 10 core/themes/olivero/css/components/progress.css
  3. 10 core/themes/claro/css/components/progress.css
  4. 10 core/themes/starterkit_theme/css/components/progress.css
  5. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
  6. 11.x core/themes/olivero/css/components/progress.css
  7. 11.x core/themes/claro/css/components/progress.css
  8. 11.x core/themes/starterkit_theme/css/components/progress.css
  9. 9 core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
  10. 9 core/themes/olivero/css/components/progress.css
  11. 9 core/themes/seven/css/classy/components/progress.css
  12. 9 core/themes/claro/css/components/progress.css
  13. 9 core/themes/bartik/css/classy/components/progress.css
  14. 9 core/themes/starterkit_theme/css/components/progress.css
  15. 9 core/themes/classy/css/components/progress.css

Visual styles for progress bar.

See also

progress.js

File

core/themes/claro/css/components/progress.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Visual styles for progress bar.
  10. *
  11. * @see progress.js
  12. */
  13. .progress::after {
  14. display: table;
  15. clear: both;
  16. content: "";
  17. }
  18. .progress--small .progress__track {
  19. height: calc(0.5rem - 2px);
  20. }
  21. .progress--small .progress__bar {
  22. width: calc(0.5rem - 2px);
  23. min-width: calc(0.5rem - 2px);
  24. height: calc(0.5rem - 2px);
  25. }
  26. .progress--small .progress__label {
  27. font-size: 0.889rem;
  28. }
  29. .progress__track {
  30. height: calc(1rem - 2px);
  31. margin-top: 0;
  32. border: 1px #8e929c solid;
  33. border-radius: 1rem;
  34. background-color: #d4d4d8;
  35. }
  36. .progress__bar {
  37. width: calc(1rem - 2px);
  38. min-width: calc(1rem - 2px);
  39. height: calc(1rem - 2px);
  40. margin-top: -1px;
  41. margin-left: -1px; /* LTR */
  42. transition: width 0.5s ease-out;
  43. border: 1px #003cc5 solid;
  44. border-radius: 1rem;
  45. background-color: #003cc5;
  46. }
  47. [dir="rtl"] .progress__bar {
  48. margin-right: -1px;
  49. margin-left: 0;
  50. }
  51. @media screen and (-ms-high-contrast: active) {
  52. .progress__bar {
  53. background-color: windowText;
  54. }
  55. }
  56. .progress__label {
  57. margin-bottom: 0.5rem;
  58. font-size: 1rem;
  59. font-weight: bold;
  60. }
  61. .progress__description,
  62. .progress__percentage {
  63. overflow: hidden;
  64. margin-top: 0.5rem;
  65. color: #545560;
  66. font-size: 0.79rem;
  67. }
  68. @media screen and (prefers-reduced-motion: reduce) {
  69. .progress__bar {
  70. transition: none;
  71. }
  72. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.