diff --git a/ds-ml-css/components/progress-bar.scss b/ds-ml-css/components/progress-bar.scss new file mode 100644 index 0000000000000000000000000000000000000000..e0f0bb0311023db29a8174c4fefa5f5f1a355c59 --- /dev/null +++ b/ds-ml-css/components/progress-bar.scss @@ -0,0 +1,69 @@ +/* ********************************************************************************************* */ +/* * PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGR * */ +/* * PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGR * */ +/* ********************************************************************************************* */ + +.progress-bar { + display: grid; + grid-template-rows: auto; + min-width: 48px; + max-width: 50%; + + label { + display: grid; + grid-template-columns: 85% 15%; + span { + text-align: right; + } + } + + progress { + height: 8px; + border: none; + border-radius: 4px; + margin-top: var(--ml-medium-px); + margin-bottom: var(--ml-medium-px); + } + + progress::-webkit-progress-bar, + progress::-moz-progress-bar { + background-color: var(--ml-m500); + } + + &.small { + progress { + height: 4px; + } + } + + &.success { + progress::-webkit-progress-bar, + progress::-moz-progress-bar { + background-color: var(--ml-text-success); + } + } + + &.error { + progress::-webkit-progress-bar, + progress::-moz-progress-bar { + background-color: var(--ml-text-error); + } + } + + .status { + display: flex; + gap: var(--ml-small-px); + } + + &.success { + .status { + color: var(--ml-text-success); + } + } + + &.error { + .status { + color: var(--ml-text-error); + } + } +} diff --git a/ds-ml-css/ds-ml.scss b/ds-ml-css/ds-ml.scss index 57194b97a7a3e828db7a77eaa7aeb9ed062c26ef..a2c32ee2e8765f4b9c939126971db2da0b9814cd 100644 --- a/ds-ml-css/ds-ml.scss +++ b/ds-ml-css/ds-ml.scss @@ -1,16 +1,23 @@ -@use 'ds-color-palet.scss'; -@use 'ds-ml-var.scss'; -@use 'ds-ml-color-var.scss'; +@use "ds-color-palet.scss"; +@use "ds-ml-var.scss"; +@use "ds-ml-color-var.scss"; // components -@use 'components/accordion.scss'; -@use 'components/badge.scss'; -@use 'components/button.scss'; -@use 'components/input.scss'; -@use 'components/radio-button-checkbox.scss'; +@use "components/accordion.scss"; +@use "components/badge.scss"; +@use "components/button.scss"; +@use "components/input.scss"; +@use "components/radio-button-checkbox.scss"; +@use "components/progress-bar.scss"; :root { /* define fonts */ - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; font-size: 16px; } + +/* additionnal description for radio-button, progress-bar*/ +.additionnal-description { + color: var(--ml-text-secondary); + margin: 0; +}