Skip to content
Snippets Groups Projects
Commit 3bf80b0f authored by Marlène SIMONDANT's avatar Marlène SIMONDANT
Browse files

Merge radio buttons

parents 49f9a8d7 50185bcc
Branches
No related tags found
1 merge request!6Review radio
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
/* status of radio-button or checkbox field*/ /* status of radio-button or checkbox field*/
.status { .status {
display: flex; display: flex;
font-size: var(--ml-small-font-size);
gap: var(--ml-small-px); gap: var(--ml-small-px);
} }
...@@ -76,11 +77,11 @@ ...@@ -76,11 +77,11 @@
.rich-radio-button { .rich-radio-button {
display: block; display: block;
position: relative; position: relative;
padding-left: calc(var(--ml-radio-button-size) + 32px); padding-left: calc(var(--ml-radio-button-size) + 16px);
padding-top: var(--ml-small-px); padding-top: var(--ml-small-px);
padding-bottom: var(--ml-small-px); padding-bottom: var(--ml-small-px);
padding-right: var(--ml-small-px); padding-right: var(--ml-small-px);
margin-bottom: var(--ml-xxlarge-px); margin-bottom: var(--ml-xxxlarge-px);
cursor: pointer; cursor: pointer;
font-size: var(--ml-medium-font-size); font-size: var(--ml-medium-font-size);
-webkit-user-select: none; -webkit-user-select: none;
...@@ -114,7 +115,7 @@ ...@@ -114,7 +115,7 @@
.checkbox-wrapper { .checkbox-wrapper {
position: absolute; position: absolute;
top: 0; top: 0;
left: 20px; left: 3px;
height: var(--ml-radio-button-size); height: var(--ml-radio-button-size);
width: var(--ml-radio-button-size); width: var(--ml-radio-button-size);
padding: 3px; padding: 3px;
...@@ -165,7 +166,7 @@ ...@@ -165,7 +166,7 @@
} }
&.radio-button-small { &.radio-button-small {
padding-left: calc(var(--ml-small-radio-button-size) + 32px); padding-left: calc(var(--ml-small-radio-button-size) + 16px);
.radio-wrapper { .radio-wrapper {
height: var(--ml-small-radio-button-size); height: var(--ml-small-radio-button-size);
...@@ -185,7 +186,7 @@ ...@@ -185,7 +186,7 @@
} }
&.checkbox-small { &.checkbox-small {
padding-left: calc(var(--ml-small-radio-button-size) + 32px); padding-left: calc(var(--ml-small-radio-button-size) + 16px);
.checkbox-wrapper { .checkbox-wrapper {
height: var(--ml-small-radio-button-size); height: var(--ml-small-radio-button-size);
...@@ -232,13 +233,13 @@ ...@@ -232,13 +233,13 @@
.radio-add-text { .radio-add-text {
position: absolute; position: absolute;
top: var(--ml-radio-button-size); top: var(--ml-radio-button-size);
left: calc(var(--ml-radio-button-size) + 32px); left: calc(var(--ml-radio-button-size) + 16px);
color: var(--ml-secondary); color: var(--ml-secondary);
font-size: 12px; font-size: 12px;
} }
.rich-radio-button .radio-add-text { .rich-radio-button .radio-add-text {
top: calc(var(--ml-radio-button-size) + 32px); top: calc(var(--ml-radio-button-size) + 16px);
} }
/* Focus */ /* Focus */
......
...@@ -107,7 +107,7 @@ body.dark { ...@@ -107,7 +107,7 @@ body.dark {
--ml-warning: var(--ml-o300); --ml-warning: var(--ml-o300);
--ml-success: var(--ml-g300); --ml-success: var(--ml-g300);
--ml-info: var(--ml-b300); --ml-info: var(--ml-b300);
--ml-error: var(--ml-r300); --ml-error: var(--ml-r500);
--ml-disabled: var(--ml-n700); --ml-disabled: var(--ml-n700);
--ml-neutral: var(--ml-n850); --ml-neutral: var(--ml-n850);
......
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
top: 4px; top: 4px;
width: 6px; width: 6px;
height: 3px; height: 3px;
border-left: 2px solid #fff; border-left: 2px solid var(--ml-text-color);
border-bottom: 2px solid #fff; border-bottom: 2px solid var(--ml-text-color);
transform: rotate(-45deg); transform: rotate(-45deg);
border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
} }
...@@ -49,7 +49,15 @@ ...@@ -49,7 +49,15 @@
top: 3px; top: 3px;
width: 2px; width: 2px;
height: 8px; height: 8px;
background: linear-gradient(to bottom, #fff 0 60%, #fff 60%, transparent 60%, transparent 75%, #fff 75%, #fff 100%); background: linear-gradient(
to bottom,
var(--ml-text-color) 0 60%,
var(--ml-text-color) 60%,
transparent 60%,
transparent 75%,
var(--ml-text-color) 75%,
var(--ml-text-color) 100%
);
border-radius: 1px; border-radius: 1px;
} }
} }
...@@ -76,7 +84,13 @@ ...@@ -76,7 +84,13 @@
top: 3px; top: 3px;
width: 2px; width: 2px;
height: 8px; height: 8px;
background: linear-gradient(to bottom, #fff 0 20%, #fff 20% 30%, transparent 30% 35%, #fff 35% 100%); background: linear-gradient(
to bottom,
var(--ml-text-color) 0 20%,
var(--ml-text-color) 20% 30%,
transparent 30% 35%,
var(--ml-text-color) 35% 100%
);
border-radius: 1px; border-radius: 1px;
} }
} }
...@@ -107,7 +121,12 @@ ...@@ -107,7 +121,12 @@
top: 8px; top: 8px;
width: 2px; width: 2px;
height: 6px; height: 6px;
background: linear-gradient(to bottom, #fff 0 65%, transparent 65% 80%, #fff 80% 100%); background: linear-gradient(
to bottom,
var(--ml-text-color) 0 65%,
transparent 65% 80%,
var(--ml-text-color) 80% 100%
);
border-radius: 1px; border-radius: 1px;
} }
} }
......
body.theme-purple.light { body.theme-purple.light {
--ml-text-color: #ffffff;
--ml-text-button-primary: #ffffff; --ml-text-button-primary: #ffffff;
--ml-text-button-primary-hover: #ffffff; --ml-text-button-primary-hover: #ffffff;
--ml-text-button-primary-disabled: #8993a4; --ml-text-button-primary-disabled: #8993a4;
...@@ -23,6 +25,8 @@ body.theme-purple.light { ...@@ -23,6 +25,8 @@ body.theme-purple.light {
} }
body.theme-purple.dark { body.theme-purple.dark {
--ml-text-color: #1b1c22;
--ml-text-button-primary: #1b1c22; --ml-text-button-primary: #1b1c22;
--ml-text-button-primary-hover: #1b1c22; --ml-text-button-primary-hover: #1b1c22;
--ml-text-button-primary-disabled: #8993a4; --ml-text-button-primary-disabled: #8993a4;
...@@ -48,6 +52,8 @@ body.theme-purple.dark { ...@@ -48,6 +52,8 @@ body.theme-purple.dark {
// Maquette à faire pour le theme red // Maquette à faire pour le theme red
body.theme-red.light { body.theme-red.light {
--ml-text-color: #ffffff;
--ml-text-button-primary: #ffffff; --ml-text-button-primary: #ffffff;
--ml-text-button-primary-hover: #ffffff; --ml-text-button-primary-hover: #ffffff;
--ml-text-button-primary-disabled: #8993a4; --ml-text-button-primary-disabled: #8993a4;
...@@ -72,6 +78,8 @@ body.theme-red.light { ...@@ -72,6 +78,8 @@ body.theme-red.light {
} }
body.theme-red.dark { body.theme-red.dark {
--ml-text-color: #1b1c22;
--ml-text-button-primary: #1b1c22; --ml-text-button-primary: #1b1c22;
--ml-text-button-primary-hover: #1b1c22; --ml-text-button-primary-hover: #1b1c22;
--ml-text-button-primary-disabled: #8993a4; --ml-text-button-primary-disabled: #8993a4;
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
--ml-large-px: 12px; --ml-large-px: 12px;
--ml-xlarge-px: 16px; --ml-xlarge-px: 16px;
--ml-xxlarge-px: 20px; --ml-xxlarge-px: 20px;
--ml-xxxlarge-px: 24px;
/* FONT SIZE */ /* FONT SIZE */
--ml-xsmall-font-size: 12px; --ml-xsmall-font-size: 12px;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment