From 2c90aeb4ee3e56f14ad72092aad03dfe54eed0fd Mon Sep 17 00:00:00 2001 From: Alexis POYEN <apoyen@grandlyon.com> Date: Mon, 12 May 2025 15:51:07 +0200 Subject: [PATCH] UI: add progress bar component --- ds-ml-css/components/progress-bar.scss | 69 ++++++++++++++++++++++++++ ds-ml-css/ds-ml.scss | 25 ++++++---- 2 files changed, 85 insertions(+), 9 deletions(-) create mode 100644 ds-ml-css/components/progress-bar.scss diff --git a/ds-ml-css/components/progress-bar.scss b/ds-ml-css/components/progress-bar.scss new file mode 100644 index 0000000..e0f0bb0 --- /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 57194b9..a2c32ee 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; +} -- GitLab