Verified Commit dfa16ab2 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3332431 by Gauravvvv, smustgrave: Refactor Claro's progress stylesheet

parent 92f58710

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

+11 −14
Original line number Diff line number Diff line
@@ -43,7 +43,7 @@ 


.progress__track {

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

  margin-top: 0;

  margin-block-start: 0;

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

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

  background-color: var(--progress-track-bg-color);
@@ -53,27 +53,30 @@ 
  width: var(--progress-bar-default-size);

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

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

  margin-top: calc(var(--progress-bar-border-size) * -1);

  margin-left: calc(var(--progress-bar-border-size) * -1); /* LTR */

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

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

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

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

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

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

}



[dir="rtl"] .progress__bar {

  margin-right: calc(var(--progress-bar-border-size) * -1);

  margin-left: 0;

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



  .progress__bar {

    transition: none;

  }

}



@media (forced-colors: active) {



  .progress__bar {

    background-color: canvastext;

  }

}



.progress__label {

  margin-bottom: var(--progress-bar-spacing-size);

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

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

  font-weight: bold;

}
@@ -81,13 +84,7 @@ 
.progress__description,

.progress__percentage {

  overflow: hidden;

  margin-top: var(--progress-bar-spacing-size);

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

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

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

}
 


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

  .progress__bar {

    transition: none;

  }

}

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

+23 −28
Original line number Diff line number Diff line
@@ -20,22 +20,25 @@ 
  content: "";

}



.progress--small .progress__track {

.progress--small {

  & .progress__track {

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

  }

.progress--small .progress__bar {



  & .progress__bar {

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

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

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

  }



.progress--small .progress__label {

  & .progress__label {

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

  }

}



.progress__track {

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

  margin-top: 0;

  margin-block-start: 0;

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

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

  background-color: var(--progress-track-bg-color);
@@ -45,26 +48,24 @@ 
  width: var(--progress-bar-default-size);

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

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

  margin-top: calc(var(--progress-bar-border-size) * -1);

  margin-left: calc(var(--progress-bar-border-size) * -1); /* LTR */

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

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

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

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

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

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

}

[dir="rtl"] .progress__bar {

  margin-right: calc(var(--progress-bar-border-size) * -1);

  margin-left: 0;



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

    transition: none;

  }



  @media (forced-colors: active) {

  .progress__bar {

    background-color: canvastext;

  }

}



.progress__label {

  margin-bottom: var(--progress-bar-spacing-size);

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

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

  font-weight: bold;

}
@@ -72,13 +73,7 @@ 
.progress__description,

.progress__percentage {

  overflow: hidden;

  margin-top: var(--progress-bar-spacing-size);

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

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

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

}
 


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

  .progress__bar {

    transition: none;

  }

}