Skip to content
Snippets Groups Projects
Commit cd27c323 authored by Etienne LOUPIAS's avatar Etienne LOUPIAS
Browse files

Merge branch 'test-accordion' into 'dev' 

Accordion

See merge request !1
parents 3bf80b0f abf9bd40
No related branches found
No related tags found
1 merge request!1Accordion
Hide whitespace changes
Inline Side-by-side
ds-ml-css/components/accordion.scss
+ 37
− 31
View file @ cd27c323
/* ********************************************************************************************* */ details.accordion {
/* * ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION * */
/* * ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION * */
/* ********************************************************************************************* */
/* accordion CSS rules */ summary {
.accordion-btn { display: flex;
border: none; align-items: center;
border-top: solid var(--ml-neutral) 2px; justify-content: space-between;
border-bottom: transparent solid 2px; border-top: 2px solid var(--ml-border-accent-primary);
background-color: var(--ml-background); border-bottom: 2px solid transparent;
cursor: pointer; cursor: pointer;
padding: 18px; padding: 18px;
width: 100%; }
text-align: left;
summary::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease-in-out;
margin-top: 2px;
flex-shrink: 0;
}
summary:hover {
background-color: var(--ml-background-button-secondary-hover);
}
} }
.accordion-btn:last-of-type { details.accordion:last-of-type summary {
border-bottom: solid var(--ml-neutral) 2px; border-bottom-color: var(--ml-border-accent-primary);
} }
.accordion-btn:hover { details.accordion[open] summary::after {
background-color: var(--ml-m200); transform: rotate(-135deg);
border: none;
border-top: transparent solid 2px;
border-bottom: transparent solid 2px;
} }
.accordion-btn.expanded { details.accordion[open] summary {
background-color: var(--ml-m400); background-color: var(--ml-background-button-secondary);
border: none;
border-top: transparent solid 2px;
border-bottom: transparent solid 2px;
} }
.accordion-panel { details.accordion > div:first-of-type {
margin: 10px 18px; margin: 16px;
padding: 0 5px; padding: 0 8px;
background-color: var(--ml-neutral); background-color: var(--ml-background-accent-secondary);
display: none;
overflow: hidden; overflow: hidden;
} }
ds-ml-css/ds-ml-theme.scss
+ 28
− 4
View file @ cd27c323
...@@ -8,12 +8,18 @@ body.theme-purple.light { ...@@ -8,12 +8,18 @@ body.theme-purple.light {
--ml-text-button-secondary-hover: #422c7e; --ml-text-button-secondary-hover: #422c7e;
--ml-text-button-secondary-disabled: #c1c7d0; --ml-text-button-secondary-disabled: #c1c7d0;
--ml-border-accent-primary: #ebecf0;
--ml-border-accent-secondary: #f4f5f7;
--ml-border-accent-tertiary: #fafbfc;
--ml-border-button-primary: #744ddd; --ml-border-button-primary: #744ddd;
--ml-border-button-primary-hover: #422c7e; --ml-border-button-primary-hover: #422c7e;
--ml-border-button-secondary: #744ddd; //#1B1C22; // bug dans couleurs maquette --ml-border-button-secondary: #744ddd; //#1b1c22; // bug dans couleurs maquette
--ml-border-button-secondary-hover: #744ddd; //#353A47; // bug dans couleurs maquette --ml-border-button-secondary-hover: #744ddd; //#353A47; // bug dans couleurs maquette
--ml-border-button-disabled: #c1c7d0; --ml-border-button-disabled: #c1c7d0;
--ml-background-accent-secondary: #dfe1e6;
--ml-background-button-primary: #744ddd; --ml-background-button-primary: #744ddd;
--ml-background-button-primary-hover: #422c7e; --ml-background-button-primary-hover: #422c7e;
--ml-background-button-primary-disabled: #ebecf0; --ml-background-button-primary-disabled: #ebecf0;
...@@ -34,12 +40,18 @@ body.theme-purple.dark { ...@@ -34,12 +40,18 @@ body.theme-purple.dark {
--ml-text-button-secondary-hover: #ddd0ff; --ml-text-button-secondary-hover: #ddd0ff;
--ml-text-button-secondary-disabled: #4f5561; --ml-text-button-secondary-disabled: #4f5561;
--ml-border-accent-primary: #576377;
--ml-border-accent-secondary: #4f5561;
--ml-border-accent-tertiary: #353a47;
--ml-border-button-primary: #b79dff; --ml-border-button-primary: #b79dff;
--ml-border-button-primary-hover: #744ddd; //#DDD0FF; // bug dans couleurs maquette --ml-border-button-primary-hover: #744ddd; //#ddd0ff; // bug dans couleurs maquette
--ml-border-button-secondary: #b79dff; //#FFFFFF; // bug dans couleurs maquette --ml-border-button-secondary: #b79dff; //#ffffff; // bug dans couleurs maquette
--ml-border-button-secondary-hover: #ddd0ff; //#DFE1E6; // bug dans couleurs maquette --ml-border-button-secondary-hover: #ddd0ff; //#dfe1e6; // bug dans couleurs maquette
--ml-border-button-disabled: #4f5561; --ml-border-button-disabled: #4f5561;
--ml-background-accent-secondary: #4f5561;
--ml-background-button-primary: #b79dff; --ml-background-button-primary: #b79dff;
--ml-background-button-primary-hover: #744ddd; --ml-background-button-primary-hover: #744ddd;
--ml-background-button-primary-disabled: #353a47; --ml-background-button-primary-disabled: #353a47;
...@@ -61,12 +73,18 @@ body.theme-red.light { ...@@ -61,12 +73,18 @@ body.theme-red.light {
--ml-text-button-secondary-hover: #b50028; --ml-text-button-secondary-hover: #b50028;
--ml-text-button-secondary-disabled: #c1c7d0; --ml-text-button-secondary-disabled: #c1c7d0;
--ml-border-accent-primary: #ebecf0;
--ml-border-accent-secondary: #f4f5f7;
--ml-border-accent-tertiary: #fafbfc;
--ml-border-button-primary: #e60028; --ml-border-button-primary: #e60028;
--ml-border-button-primary-hover: #b50028; --ml-border-button-primary-hover: #b50028;
--ml-border-button-secondary: #e60028; --ml-border-button-secondary: #e60028;
--ml-border-button-secondary-hover: #e60028; --ml-border-button-secondary-hover: #e60028;
--ml-border-button-disabled: #c1c7d0; --ml-border-button-disabled: #c1c7d0;
--ml-background-accent-secondary: #dfe1e6;
--ml-background-button-primary: #e60028; --ml-background-button-primary: #e60028;
--ml-background-button-primary-hover: #b50028; --ml-background-button-primary-hover: #b50028;
--ml-background-button-primary-disabled: #ffedf0; --ml-background-button-primary-disabled: #ffedf0;
...@@ -87,12 +105,18 @@ body.theme-red.dark { ...@@ -87,12 +105,18 @@ body.theme-red.dark {
--ml-text-button-secondary-hover: #fe8896; --ml-text-button-secondary-hover: #fe8896;
--ml-text-button-secondary-disabled: #c1c7d0; --ml-text-button-secondary-disabled: #c1c7d0;
--ml-border-accent-primary: #ebecf0;
--ml-border-accent-secondary: #f4f5f7;
--ml-border-accent-tertiary: #fafbfc;
--ml-border-button-primary: #fe8896; --ml-border-button-primary: #fe8896;
--ml-border-button-primary-hover: #e60028; --ml-border-button-primary-hover: #e60028;
--ml-border-button-secondary: #fe8896; --ml-border-button-secondary: #fe8896;
--ml-border-button-secondary-hover: #fe8896; --ml-border-button-secondary-hover: #fe8896;
--ml-border-button-disabled: #c1c7d0; --ml-border-button-disabled: #c1c7d0;
--ml-background-accent-secondary: #4f5561;
--ml-background-button-primary: #fe8896; --ml-background-button-primary: #fe8896;
--ml-background-button-primary-hover: #e60028; --ml-background-button-primary-hover: #e60028;
--ml-background-button-primary-disabled: #353a47; --ml-background-button-primary-disabled: #353a47;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment