You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

282 lines
5.0 KiB

.lesson {
transition: all 0.3s;
overflow : hidden;
border-bottom: 1px solid $gray9;
&-light {
header {
background-color : $gray13;
border: 1px solid $gray9;
h4 {
color: $green6;
}
div {
color: $gray5;
}
}
.lesson{
&__files{
border-left: 1px solid $gray9;
border-right: 1px solid $gray9;
p{
color: $gray5;
background-color: $gray12;
}
&--sample{
&:hover{
background-color: $gray12;
}
color: $gray5;
a{
color: $gray5;
}
}
&--active{
// border-bottom: 1px solid $gray11;
}
}
}
}
&-dark{
header {
background-color: #414141;
h4 {
color: $green;
}
div {
color: $gray10;
}
}
.lesson{
&__files{
border-left: 1px solid $gray9;
border-right: 1px solid $gray9;
p{
color: white;
background-color: $gray1;
}
&--sample{
&:hover{
background-color: rgb(58, 58, 58);
}
color: white;
a{
color: white;
}
}
&--active{
// border-bottom: 1px solid $gray9;
}
}
}
}
&__active{
// border-bottom-left-radius: 10px;
// border-bottom-right-radius: 10px;
}
header {
// border: 1px solid $gray9 !important;
border-top-right-radius: 5px !important;
border-top-left-radius: 5px;
padding: 5px 15px !important;
cursor: pointer;
h4 {
margin: 0px;
}
img{
width: 40px;
}
}
&__files{
padding : 0px !important;
transition: all 0.15s ease-in;
overflow: hidden;
p{
padding: 10px 20px;
margin: 0px !important;
}
& img{
width: 30px;
margin-right: 15px;
}
&--sample{
transition: all 0.5s;
cursor: pointer;
padding: 5px 0px;
&___active{
transition: all 0.5s;
transform: scale(1.3);
}
li{
text-align: center;
}
h5{
margin-right: 30px;
margin-bottom: 0px;
}
}
}
}
@media screen and (min-width: 1441px) {
.lesson {
header {
img{
margin-right: 5px;
}
h4 {
font-size: 18px;
margin-right: 30px;
}
div {
font-size: 16px;
}
}
&__duration{
width: 175px;
text-align: center;
}
&__files{
&--sample{
li{
width : 120px;
font-size: 16px;
}
h5{
font-size: 16px;
}
}
}
}
}
@media screen and (min-width: 1008px) and (max-width: 1440px) {
.lesson {
header {
img{
margin-right: 5px;
width : 30px;
}
h4 {
font-size: calc(100vw / 95);
margin-right: 30px;
}
div {
font-size: calc(100vw / 95);
}
}
&__duration{
width: 170px;
text-align: center;
}
&__files{
&--sample{
li{
width : 120px;
font-size: calc(100vw / 95);
}
h5{
font-size: calc(100vw/ 100);
}
}
&--active{
padding: 5px !important;
}
}
}
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.lesson {
border-radius: 10px;
margin-bottom: 15px;
header {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
h4 {
font-size: calc(100vw / 40);
}
div {
font-size: calc(100vw / 50);
}
img{
width: 30px;
}
}
&__duration{
text-align: center;
}
&__files{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding : 0px !important;
&--sample{
margin-bottom: 20px;
img{
width: 30px;
}
li{
font-size: calc(100vw / 40);
width: 100px;
}
h5{
font-size: calc(100vw/ 43);
margin-right: 10px;
}
}
&--active{
padding: 25px 5px !important;
}
}
}
}
@media screen and (max-width: 640px) {
.lesson {
// border-radius: 10px;
margin-bottom: 15px;
header {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 5px 5px !important;
h4 {
font-size: calc(100vw / 30);
}
div {
font-size: calc(100vw / 35);
}
img{
width: 30px;
}
}
&__duration{
text-align: center;
}
&__files{
// border-bottom-left-radius: 10px;
// border-bottom-right-radius: 10px;
padding: 0px !important;
&--sample{
img{
width: 30px;
}
li{
font-size: calc(100vw / 33);
width: 60px;
}
h5{
font-size: calc(100vw/ 33);
margin-right: 15px;
}
}
&--active{
padding: 15px 5px !important;
}
}
}
}