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