page species single
This commit is contained in:
Julie Blanc
parent
6bd3c46bdf
commit
09d4bc5204
19 changed files with 2402 additions and 161 deletions
|
|
@ -49,6 +49,7 @@
|
|||
@include icon(20px);
|
||||
|
||||
}
|
||||
|
||||
.text{
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
|
|
@ -59,6 +60,10 @@
|
|||
|
||||
}
|
||||
|
||||
.btn-download .icon{
|
||||
@include icon(16px);
|
||||
}
|
||||
|
||||
label.btn-action{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
276
assets/css/components/_calendar.scss
Normal file
276
assets/css/components/_calendar.scss
Normal file
|
|
@ -0,0 +1,276 @@
|
|||
.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);
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
|
||||
.family{
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
&:target{
|
||||
padding-top: var(--top-target);
|
||||
}
|
||||
.family__header{
|
||||
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 2ch;
|
||||
margin-bottom: calc(var(--spacing)*1.5);
|
||||
|
||||
border-radius: var(--radius-small);
|
||||
background-color: var(--color-violet-light);
|
||||
color: var(--color-violet);
|
||||
border: var(--w-border) solid var(--color-violet);
|
||||
|
||||
.title{
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
|
||||
.nbr-species{
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
#view-edit:checked ~ .page-species .family .species-list,
|
||||
#view-edit:checked ~ .page-species .species-list,
|
||||
#view-list:checked ~ .page-species .family .species-list,
|
||||
#view-list:checked ~ .page-species .species-list {
|
||||
#view-edit:checked ~ .page-species-list .family .species-list,
|
||||
#view-edit:checked ~ .page-species-list .species-list,
|
||||
#view-list:checked ~ .page-species-list .family .species-list,
|
||||
#view-list:checked ~ .page-species-list .species-list {
|
||||
display: block;
|
||||
|
||||
|
||||
|
|
@ -90,8 +90,8 @@
|
|||
}
|
||||
|
||||
|
||||
#view-edit:checked ~ .page-species .family .species-list,
|
||||
#view-edit:checked ~ .page-species .species-list{
|
||||
#view-edit:checked ~ .page-species-list .family .species-list,
|
||||
#view-edit:checked ~ .page-species-list .species-list{
|
||||
.taxon .btn-edit{
|
||||
display: block!important;
|
||||
z-index: 30;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue