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.
208 lines
3.6 KiB
208 lines
3.6 KiB
.lesson { |
|
transition: all 0.5 ease-in; |
|
&__active{ |
|
border-bottom-left-radius: 10px; |
|
border-bottom-right-radius: 10px; |
|
} |
|
header { |
|
background-color: #414141; |
|
// border: 1px solid #b3b3b3 !important; |
|
padding: 5px 15px !important; |
|
cursor: pointer; |
|
h4 { |
|
color: #9cdf52; |
|
margin: 0px; |
|
|
|
} |
|
div { |
|
color: #cccccc; |
|
} |
|
img{ |
|
width: 40px; |
|
} |
|
} |
|
&__files{ |
|
padding : 0px !important; |
|
border-left: 1px solid #b3b3b3; |
|
border-right: 1px solid #b3b3b3; |
|
transition: all 0.4s ease-in; |
|
& img{ |
|
width: 40px; |
|
} |
|
&--sample{ |
|
margin-bottom: 15px; |
|
color: white; |
|
li{ |
|
text-align: center; |
|
} |
|
h5{ |
|
margin-right: 30px; |
|
margin-bottom: 0px; |
|
} |
|
} |
|
&--active{ |
|
padding : 30px 15px 20px !important; |
|
border-bottom: 1px solid #b3b3b3; |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1441px) { |
|
.lesson { |
|
header { |
|
img{ |
|
margin-right: 5px; |
|
} |
|
h4 { |
|
font-size: 21px; |
|
margin-right: 30px; |
|
} |
|
div { |
|
font-size: 18px; |
|
} |
|
} |
|
&__duration{ |
|
width: 260px; |
|
text-align: center; |
|
} |
|
&__files{ |
|
&--sample{ |
|
li{ |
|
width : 120px; |
|
font-size: 19px; |
|
} |
|
h5{ |
|
font-size: 19px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
|
.lesson { |
|
header { |
|
img{ |
|
margin-right: 5px; |
|
} |
|
h4 { |
|
font-size: calc(100vw / 75); |
|
margin-right: 30px; |
|
} |
|
div { |
|
font-size: calc(100vw / 80); |
|
} |
|
} |
|
&__duration{ |
|
width: 250px; |
|
text-align: center; |
|
} |
|
&__files{ |
|
&--sample{ |
|
li{ |
|
width : 120px; |
|
font-size: calc(100vw / 75); |
|
} |
|
h5{ |
|
font-size: calc(100vw/ 75); |
|
} |
|
|
|
} |
|
&--active{ |
|
padding: 15px 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; |
|
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: 5px; |
|
} |
|
} |
|
&--active{ |
|
padding: 15px 5px !important; |
|
|
|
} |
|
} |
|
} |
|
}
|
|
|