drupal-erable/web/themes/erabletheme/scss/_fullpage.scss

189 lines
4.2 KiB
SCSS

.fullpage {
margin-bottom: 10vh;
padding-top: 3vh;
padding-bottom: 3vh;
background-color: white;
position: relative;
h2 {
margin-top: 5vh !important;
margin-bottom: 7vh;
z-index: 1;
position: relative;
width: auto;
display: inline-block;
@include main_title();
}
.legende {
display: block !important;
font-size: 0.8rem;
color: $dark_green;
}
.fullpage_content {
> h2 {
margin-bottom: 1rem;
}
.sous_titre {
font-size: $l_font_size;
padding: 0 $x_margin;
@include main_text_content();
}
p {
padding: 0 $x_margin;
margin-bottom: 2rem;
@include main_text_content();
}
p:first-of-type {
margin-top: 7vh;
}
.liens_fixed > div > div, .file_fixed > div > div {
padding: 0 calc($x_margin / 2);
text-align: right;
margin: 2rem 0;
@include fluo_button();
a {
display: inline-block;
}
@media (min-width: $breakpoint_desktop) {
margin-bottom: 0 !important;
margin: 0;
position: fixed;
left: 75vw;
bottom: 10vh;
> div {
height: 3vh;
}
a {
max-width: calc(25vw - $x_margin * 2);
}
}
}
.file_fixed span:last-of-type {
display: none;
}
h3, h4, h5, h6 {
margin-bottom: 1rem;
padding-left: $x_margin;
@include sous_titre();
}
}
.views-row {
margin-bottom: 8vh;
}
@media (min-width: $breakpoint_tablet) {
margin-top: 5vh;
padding-top: 0;
width: 75vw;
margin-left: 12.5vw;
}
@media (min-width: $breakpoint_desktop) {
margin-top: 13vh;
width: 50vw;
margin-left: 25%;
}
&.large-container {
@media (min-width: $breakpoint_tablet) {
width: auto;
margin-left: $x_margin;
margin-right: $x_margin;
}
}
}
main:has(#block-erabletheme-leprogramme-2) {
.fullpage {
@media (min-width: $breakpoint_tablet) {
width: 70vw;
margin-left: 2vw;
}
@media (min-width: $breakpoint_desktop) {
width: 50vw;
margin-left: 3vw;
margin-right: 24vw;
}
}
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) {
height: auto;
margin-top: 2vh;
margin-bottom: 2vh;
@media screen and (min-width: $breakpoint_tablet) {
margin-top: 5vh;
margin-bottom: 0;
}
@media screen and (min-width: $breakpoint_desktop) {
margin-top: 13vh;
}
> div {
width: auto;
display: inline-block;
@media screen and (min-width: $breakpoint_tablet) {
position: sticky;
top: 5vh;
width: 27vw;
}
@media screen and (min-width: $breakpoint_desktop) {
top: 12vh;
width: 22vw;
}
#block-erabletheme-leprogramme-2 {
padding: 1.5rem;
background-color: white;
margin-left: 2vw;
> h2 {
padding-bottom: 1rem;
border-bottom: solid 1px $teal;
display: flex;
justify-content: space-between;
cursor: pointer;
> span {
@include sous_titre();
}
> div {
mask-image: url('/themes/erabletheme/assets/icons/arrow-down-s-line.svg');
background-size: contain;
background-color: $teal;
width: 1.3rem;
height: 1.3rem;
color: $teal;
transform: rotate(0deg);
transition: transform 0.3s ease;
&.closed {
transform: rotate(180deg);
}
}
}
> ul {
max-height: 100vh;
overflow: hidden;
transition: max-height 0.6s ease;
> li {
margin: 1rem 0;
@include main_text_content();
> a {
color: black;
font-size: $m_font_size;
&:hover,
&.is-active {
font-weight: 800;
}
}
}
&.closed {
max-height: 0vh;
}
}
}
}
}