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

.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;
}
}
}
}