276 lines
11 KiB
SCSS
276 lines
11 KiB
SCSS
.calendar-svg{
|
||
--svg-color: var(--color-green);
|
||
transform: rotate(-90deg);
|
||
|
||
|
||
.mois{
|
||
--svg-color: var(--color-light);
|
||
}
|
||
.saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.background{
|
||
--svg-color: var(--color-x-light);
|
||
|
||
}
|
||
.both{
|
||
--svg-color: var(--color-green);
|
||
display: none;
|
||
}
|
||
.fleurs{
|
||
--svg-color: var(--color-green);
|
||
display: none;
|
||
}
|
||
|
||
.fruits{
|
||
--svg-color: var(--color-orange);
|
||
display: none;
|
||
}
|
||
.none{
|
||
--svg-color: var(--color-x-light);
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
.calendrier + .group-caption{
|
||
|
||
.caption{
|
||
font-size: var(--fs-small);
|
||
margin: 0;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1ch;
|
||
padding-bottom: calc(var(--spacing)*0.25);
|
||
&::before{
|
||
content: "";
|
||
display: block;
|
||
width: 16px;
|
||
height: 16px;
|
||
background-color: var(--color-green);
|
||
border-radius: var(--radius-small);
|
||
|
||
}
|
||
&.caption-fructification::before{
|
||
background-color: var(--color-orange);
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
.calendar-svg[data-fleurs*=jan] .jan .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=feb] .fev .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=mar] .mar .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=apr] .avr .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=may] .mai .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=jun] .jun .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=jul] .jul .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=aug] .aou .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=sep] .sep .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=oct] .oct .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=nov] .nov .fleurs{ display: block; }
|
||
.calendar-svg[data-fleurs*=dec] .dec .fleurs{ display: block; }
|
||
|
||
.calendar-svg[data-fruits*=jan] .jan .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=feb] .fev .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=mar] .mar .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=apr] .avr .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=may] .mai .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=jun] .jun .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=jul] .jul .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=aug] .aou .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=sep] .sep .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=oct] .oct .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=nov] .nov .fruits{ display: block; }
|
||
.calendar-svg[data-fruits*=dec] .dec .fruits{ display: block; }
|
||
|
||
|
||
.calendar-svg[data-fruits*=jan][data-fleurs*=jan] .jan .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=jan][data-fleurs*=jan] .jan .both{ display: block; }
|
||
.calendar-svg[data-fruits*=feb][data-fleurs*=feb] .fev .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=feb][data-fleurs*=feb] .fev .both{ display: block; }
|
||
.calendar-svg[data-fruits*=mar][data-fleurs*=mar] .mar .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=mar][data-fleurs*=mar] .mar .both{ display: block; }
|
||
.calendar-svg[data-fruits*=apr][data-fleurs*=apr] .avr .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=apr][data-fleurs*=apr] .avr .both{ display: block; }
|
||
.calendar-svg[data-fruits*=may][data-fleurs*=may] .mai .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=may][data-fleurs*=may] .mai .both{ display: block; }
|
||
.calendar-svg[data-fruits*=jun][data-fleurs*=jun] .jun .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=jun][data-fleurs*=jun] .jun .both{ display: block; }
|
||
.calendar-svg[data-fruits*=jul][data-fleurs*=jul] .jul .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=jul][data-fleurs*=jul] .jul .both{ display: block; }
|
||
.calendar-svg[data-fruits*=aug][data-fleurs*=aug] .aou .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=aug][data-fleurs*=aug] .aou .both{ display: block; }
|
||
.calendar-svg[data-fruits*=sep][data-fleurs*=sep] .sep .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=sep][data-fleurs*=sep] .sep .both{ display: block; }
|
||
.calendar-svg[data-fruits*=oct][data-fleurs*=oct] .oct .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=oct][data-fleurs*=oct] .oct .both{ display: block; }
|
||
.calendar-svg[data-fruits*=nov][data-fleurs*=nov] .nov .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=nov][data-fleurs*=nov] .nov .both{ display: block; }
|
||
.calendar-svg[data-fruits*=dec][data-fleurs*=dec] .dec .fleurs{ display: none; }
|
||
.calendar-svg[data-fruits*=dec][data-fleurs*=dec] .dec .both{ display: block; }
|
||
|
||
|
||
/* Don’t display ".none" when fruits or fleurs */
|
||
|
||
.calendar-svg[data-fleurs*=jan] .jan .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=feb] .fev .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=mar] .mar .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=avr] .avr .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=may] .mai .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=jun] .jun .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=jul] .jul .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=aug] .aou .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=sep] .sep .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=oct] .oct .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=nov] .nov .none{ display: none; }
|
||
.calendar-svg[data-fleurs*=dec] .dec .none{ display: none; }
|
||
|
||
.calendar-svg[data-fruits*=jan] .jan .none{ display: none; }
|
||
.calendar-svg[data-fruits*=feb] .fev .none{ display: none; }
|
||
.calendar-svg[data-fruits*=mar] .mar .none{ display: none; }
|
||
.calendar-svg[data-fruits*=apr] .avr .none{ display: none; }
|
||
.calendar-svg[data-fruits*=may] .mai .none{ display: none; }
|
||
.calendar-svg[data-fruits*=jun] .jun .none{ display: none; }
|
||
.calendar-svg[data-fruits*=jul] .jul .none{ display: none; }
|
||
.calendar-svg[data-fruits*=aug] .aou .none{ display: none; }
|
||
.calendar-svg[data-fruits*=sep] .sep .none{ display: none; }
|
||
.calendar-svg[data-fruits*=oct] .oct .none{ display: none; }
|
||
.calendar-svg[data-fruits*=nov] .nov .none{ display: none; }
|
||
.calendar-svg[data-fruits*=dec] .dec .none{ display: none; }
|
||
|
||
|
||
/* Display mounth when something */
|
||
|
||
|
||
.calendar-svg[data-fleurs*=jan] .jan .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=feb] .fev .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=mar] .mar .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=apr] .avr .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=may] .mai .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=jun] .jun .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=jul] .jul .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=aug] .aou .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=sep] .sep .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=oct] .oct .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=nov] .nov .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fleurs*=dec] .dec .mois{ --svg-color: var(--color-txt); }
|
||
|
||
.calendar-svg[data-fruits*=jan] .jan .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=feb] .fev .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=mar] .mar .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=apr] .avr .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=may] .mai .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=jun] .jun .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=jul] .jul .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=aug] .aou .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=sep] .sep .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=oct] .oct .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=nov] .nov .mois{ --svg-color: var(--color-txt); }
|
||
.calendar-svg[data-fruits*=dec] .dec .mois{ --svg-color: var(--color-txt); }
|
||
|
||
|
||
|
||
/* SAISONS */
|
||
|
||
.calendar-svg[data-fleurs*=mar] .printemps .saison,
|
||
.calendar-svg[data-fruits*=mar] .printemps .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=mar] .printemps .background,
|
||
.calendar-svg[data-fruits*=mar] .printemps .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=apr] .printemps .saison,
|
||
.calendar-svg[data-fruits*=apr] .printemps .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=apr] .printemps .background,
|
||
.calendar-svg[data-fruits*=apr] .printemps .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=may] .printemps .saison,
|
||
.calendar-svg[data-fruits*=may] .printemps .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=may] .printemps .background,
|
||
.calendar-svg[data-fruits*=may] .printemps .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=jun] .ete .saison,
|
||
.calendar-svg[data-fruits*=jun] .ete .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=jun] .ete .background,
|
||
.calendar-svg[data-fruits*=jun] .ete .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=jul] .ete .saison,
|
||
.calendar-svg[data-fruits*=jul] .ete .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=jul] .ete .background,
|
||
.calendar-svg[data-fruits*=jul] .ete .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=aug] .ete .saison,
|
||
.calendar-svg[data-fruits*=aug] .ete .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=aug] .ete .background,
|
||
.calendar-svg[data-fruits*=aug] .ete .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=sep] .automne .saison,
|
||
.calendar-svg[data-fruits*=sep] .automne .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=sep] .automne .background,
|
||
.calendar-svg[data-fruits*=sep] .automne .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=oct] .automne .saison,
|
||
.calendar-svg[data-fruits*=oct] .automne .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=oct] .automne .background,
|
||
.calendar-svg[data-fruits*=oct] .automne .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=nov] .automne .saison,
|
||
.calendar-svg[data-fruits*=nov] .automne .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=nov] .automne .background,
|
||
.calendar-svg[data-fruits*=nov] .automne .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=dec] .hiver .saison,
|
||
.calendar-svg[data-fruits*=dec] .hiver .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=dec] .hiver .background,
|
||
.calendar-svg[data-fruits*=dec] .hiver .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=jan] .hiver .saison,
|
||
.calendar-svg[data-fruits*=jan] .hiver .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=jan] .hiver .background,
|
||
.calendar-svg[data-fruits*=jan] .hiver .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|
||
.calendar-svg[data-fleurs*=fev] .hiver .saison,
|
||
.calendar-svg[data-fruits*=fev] .hiver .saison{
|
||
--svg-color: var(--white);
|
||
}
|
||
.calendar-svg[data-fleurs*=fev] .hiver .background,
|
||
.calendar-svg[data-fruits*=fev] .hiver .background{
|
||
--svg-color: var(--color-txt);
|
||
}
|