progress.css
Same filename in this branch
Same filename and directory in other branches
- 10 core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
- 10 core/themes/olivero/css/components/progress.css
- 10 core/themes/claro/css/components/progress.css
- 10 core/themes/starterkit_theme/css/components/progress.css
- 11.x core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
- 11.x core/themes/olivero/css/components/progress.css
- 11.x core/themes/claro/css/components/progress.css
- 11.x core/themes/starterkit_theme/css/components/progress.css
- 9 core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
- 9 core/themes/olivero/css/components/progress.css
- 9 core/themes/seven/css/classy/components/progress.css
- 9 core/themes/claro/css/components/progress.css
- 9 core/themes/bartik/css/classy/components/progress.css
- 9 core/themes/starterkit_theme/css/components/progress.css
- 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
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/2815083
- * @preserve
- */
-
- /**
- * @file
- * Visual styles for progress bar.
- *
- * @see progress.js
- */
-
- .progress::after {
- display: table;
- clear: both;
- content: "";
- }
-
- .progress--small .progress__track {
- height: calc(0.5rem - 2px);
- }
-
- .progress--small .progress__bar {
- width: calc(0.5rem - 2px);
- min-width: calc(0.5rem - 2px);
- height: calc(0.5rem - 2px);
- }
-
- .progress--small .progress__label {
- font-size: 0.889rem;
- }
-
- .progress__track {
- height: calc(1rem - 2px);
- margin-top: 0;
- border: 1px #8e929c solid;
- border-radius: 1rem;
- background-color: #d4d4d8;
- }
-
- .progress__bar {
- width: calc(1rem - 2px);
- min-width: calc(1rem - 2px);
- height: calc(1rem - 2px);
- margin-top: -1px;
- margin-left: -1px; /* LTR */
- transition: width 0.5s ease-out;
- border: 1px #003cc5 solid;
- border-radius: 1rem;
- background-color: #003cc5;
- }
-
- [dir="rtl"] .progress__bar {
- margin-right: -1px;
- margin-left: 0;
- }
-
- @media screen and (-ms-high-contrast: active) {
- .progress__bar {
- background-color: windowText;
- }
- }
-
- .progress__label {
- margin-bottom: 0.5rem;
- font-size: 1rem;
- font-weight: bold;
- }
-
- .progress__description,
- .progress__percentage {
- overflow: hidden;
- margin-top: 0.5rem;
- color: #545560;
- font-size: 0.79rem;
- }
-
- @media screen and (prefers-reduced-motion: reduce) {
- .progress__bar {
- transition: none;
- }
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.