progress.pcss.css

Same filename in this branch
  1. 11.1.x core/themes/olivero/css/components/progress.pcss.css

Visual styles for progress bar.

See also

progress.js

File

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

View source 
  1. /**

  2.  * @file

  3.  * Visual styles for progress bar.

  4.  *

  5.  * @see progress.js

  6.  */

  7. 

  8. :root {

  9.   --progress-bar-bg-color: var(--color-absolutezero);

  10.   --progress-bar-border-color: var(--color-absolutezero);

  11.   --progress-bar-label-font-size: var(--font-size-base);

  12.   --progress-bar-small-label-font-size: var(--font-size-label);

  13.   --progress-bar-default-size: calc(var(--space-m) - (2 * var(--progress-bar-border-size)));

  14.   --progress-bar-default-size-radius: var(--space-m);

  15. }

  16. 

  17. .progress::after {

  18.   display: table;

  19.   clear: both;

  20.   content: "";

  21. }

  22. 

  23. .progress--small {

  24.   & .progress__track {

  25.     height: var(--progress-bar-small-size);

  26.   }

  27. 

  28.   & .progress__bar {

  29.     width: var(--progress-bar-small-size);

  30.     min-width: var(--progress-bar-small-size);

  31.     height: var(--progress-bar-small-size);

  32.   }

  33. 

  34.   & .progress__label {

  35.     font-size: var(--progress-bar-small-label-font-size);

  36.   }

  37. }

  38. 

  39. .progress__track {

  40.   height: var(--progress-bar-default-size);

  41.   margin-block-start: 0;

  42.   border: var(--progress-bar-border-size) var(--progress-track-border-color) solid;

  43.   border-radius: var(--progress-bar-default-size-radius);

  44.   background-color: var(--progress-track-bg-color);

  45. }

  46. 

  47. .progress__bar {

  48.   width: var(--progress-bar-default-size);

  49.   min-width: var(--progress-bar-default-size);

  50.   height: var(--progress-bar-default-size);

  51.   margin-block-start: calc(var(--progress-bar-border-size) * -1);

  52.   margin-inline-start: calc(var(--progress-bar-border-size) * -1);

  53.   transition: var(--progress-bar-transition);

  54.   border: var(--progress-bar-border-size) var(--progress-bar-border-color) solid;

  55.   border-radius: var(--progress-bar-default-size-radius);

  56.   background-color: var(--progress-bar-bg-color);

  57. 

  58.   @media screen and (prefers-reduced-motion: reduce) {

  59.     transition: none;

  60.   }

  61. 

  62.   @media (forced-colors: active) {

  63.     background-color: canvastext;

  64.   }

  65. }

  66. 

  67. .progress__label {

  68.   margin-block-end: var(--progress-bar-spacing-size);

  69.   font-size: var(--progress-bar-label-font-size);

  70.   font-weight: bold;

  71. }

  72. 

  73. .progress__description,

  74. .progress__percentage {

  75.   overflow: hidden;

  76.   margin-block-start: var(--progress-bar-spacing-size);

  77.   color: var(--progress-bar-description-color);

  78.   font-size: var(--progress-bar-description-font-size);

  79. }