112 lines
2.2 KiB
SCSS
112 lines
2.2 KiB
SCSS
|
@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;
|
||
|
|
height: 92vh;
|
||
|
|
@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 {
|
||
|
|
font-size: 2.4em;
|
||
|
|
font-weight: bolder;
|
||
|
|
grid-column: 1/-1;
|
||
|
|
display: flex;
|
||
|
|
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;
|
||
|
|
& > *{
|
||
|
|
width: 100%!important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// margin-bottom: 5%;
|
||
|
|
height: max-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
.new-container {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
width: 50%;
|
||
|
|
@include down(840){
|
||
|
|
& > button {width: 100%}
|
||
|
|
}
|
||
|
|
|
||
|
|
& 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;
|
||
|
|
}
|
||
|
|
.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);
|
||
|
|
}
|