Generateurv2/frontend/styles/exos/ExercicesPage.module.scss

145 lines
2.8 KiB
SCSS
Raw Normal View History

2022-05-18 10:15:54 +02:00
@import "../variables";
@import "../global_components";
@import "../mixins";
.all_exos--full_container {
/* width: 70vw;
height: 92vh;
margin: 0 auto;
overflow: scroll;
//scrollbar-width: none;
position: relative; */
overflow: scroll;
2022-06-24 13:42:16 +02:00
// height: 92vh;
position: relative;
2022-05-18 10:15:54 +02:00
@include no-scroll;
}
.all_exos--container {
width: 98%;
//height: 90%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-flow: dense;
grid-gap: calc(4 * 8px);
margin: 0 auto;
//position: relative;
}
.all_exos--title {
2022-06-11 23:39:03 +02:00
& h1 {
font-size: 3.5rem;
font-weight: bolder;
margin: 0;
width: 100%;
}
& p {
font-size: 1.1em;
width: 100%;
}
2022-05-18 10:15:54 +02:00
grid-column: 1/-1;
display: flex;
2022-06-11 23:39:03 +02:00
flex-direction: column;
2022-05-18 10:15:54 +02:00
justify-content: center;
align-items: center;
text-align: center;
@include up(840) {
grid-column: 1 / 3;
text-align: left;
/* &.is-paginated {
grid-column: -3 / -1;
} */
}
}
.all_exos--head {
width: 100%;
//height: 10%;
display: flex;
justify-content: space-between;
@include down(840) {
flex-direction: column;
2022-06-11 23:39:03 +02:00
& > * {
width: 100% !important;
2022-05-18 10:15:54 +02:00
}
}
// margin-bottom: 5%;
height: max-content;
}
.new-container {
display: flex;
align-items: center;
width: 50%;
2022-06-11 23:39:03 +02:00
@include down(840) {
& > button {
width: 100%;
}
2022-05-18 10:15:54 +02:00
}
& button {
@extend .exo-btn;
background-color: transparent;
border: 1px solid $primary;
color: $primary;
font-size: 0.9em;
&:hover {
color: $background-dark;
background-color: $primary;
}
}
}
.search-full-container {
width: 40%;
float: right;
margin-bottom: 2%;
display: flex;
flex-direction: column;
2022-06-24 13:42:16 +02:00
align-items: flex-end;
2022-05-18 10:15:54 +02:00
}
.loader-btn-container {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.toggler-sort {
width: max-content;
padding: 0.8%;
transition: 0.3s;
border: 1px solid $border;
border-radius: 4px;
display: flex;
align-items: center;
margin: 0 1%;
&:hover {
background-color: rgba($color: $background-light, $alpha: 0.6);
}
}
.toggler-active {
background-color: rgba($color: $background-light, $alpha: 0.6);
}
2022-06-24 13:42:16 +02:00
.select {
border: none;
border-bottom-color: currentcolor;
border-bottom-style: none;
border-bottom-width: medium;
background: transparent;
color: white;
width: max-content;
float: right;
border-bottom: $border 1px solid;
padding: 10px;
transition: 0.3s ease;
font-weight: 500;
&:focus {
border-bottom: $contrast 1px solid;
}
}