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.
 
 
 
 

532 lines
10 KiB

@import "./Lesson/index.scss";
.course {
&-light{
.course{
&__header {
border-bottom: 2px solid $gray12;
}
&__info {
&--description {
a {
color: $gray5;
}
li {
color: $gray5;
}
h1 {
color: $gray5;
}
p {
color: $gray6;
}
.course-info-items {
background-color: #9cdf5222;
i {
color: $green;
}
}
}
}
&__options {
&--rate {
border: none;
background-color: $gray12;
box-shadow: none;
color: $gray5;
}
&--button {
background-color: $gray12;
border: none;
color: $gray5;
transition: all 0.3s;
&:hover {
color: $gray5;
background-color: $gray;
}
}
}
&__list {
&--header {
h2 {
color: $green;
}
p {
color: $gray7;
}
}
}
}
}
&-dark{
.course{
&__header {
border-bottom: 2px solid $gray5;
}
&__info {
&--description {
a {
color: $gray5;
}
h1{
color: white;
}
li {
color: $gray5;
}
p {
color: $gray6;
}
.course-info-items {
background-color: #08793d23;
i {
color: $green;
}
}
}
}
&__options {
&--rate {
border: 2px solid $gray7;
box-shadow: 0px 0px 20px #f7ff0179;
color: white;
}
&--button {
background-color: #313131;
border: 1px solid $gray7;
color: white;
&:hover {
color: white;
}
}
}
&__list {
&--header {
h2 {
color: $green;
}
p {
color: $gray7;
}
}
}
}
}
&__header {
padding: 30px 0px 45px;
}
&__info {
&--image {
margin-left: 20px;
img {
border-top-left-radius: 9px;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
border-bottom-left-radius: 24px;
}
}
&--description {
padding-top: 5px;
h1 {
margin-top: 12px;
}
p {
margin-top: 25px;
}
.course-info-items {
padding: 10px;
border-radius: 10px;
}
}
}
&__options {
&--rate {
border-radius: 15px;
padding-top: 20px;
}
&--button {
padding: 8px;
text-align: center;
margin-top: 15px;
}
}
&__list {
margin-bottom: 30px;
border-radius: 10px;
&--header {
padding: 20px 0px 20px !important;
border: 0px !important;
}
}
}
@media screen and (min-width: 1441px) {
.course {
main {
max-width: 1350px;
}
&__info {
flex: 4;
&--image {
img {
// width: 320px;
height: 420px;
}
}
&--description {
a {
font-size: 17px;
}
li {
font-size: 17px;
}
h1 {
font-size: 50px;
}
p {
font-size: 16px;
}
.course-info-items {
width: 220px;
margin-top: 20px;
& img {
margin-left: 5px;
width: 50px;
}
i {
font-size: 18px;
font-family: numeralLight;
}
p {
font-size: 14px;
margin: 0px;
}
}
}
}
&__options {
flex: 2;
&--rate {
width: 315px;
height: 200px;
margin-bottom: 30px;
&__number {
div {
font-size: 20px;
}
i {
font-size: 15px;
}
b {
font-size: 50px;
}
span {
font-size: 18px;
transform: translateY(4px);
margin-right: 10px;
}
}
h2 {
margin-top: 15px;
font-size: 20px;
}
}
&--button {
width: 315px;
height: 66px;
padding: 0px 30px;
font-size: 18px;
border-radius: 40px;
}
}
&__list {
&--header {
h2 {
font-size: 25px;
}
p {
font-size: 13px;
}
}
}
}
}
@media screen and (min-width: 1008px) and (max-width: 1440px) {
.course {
main {
max-width: 1250px;
padding: 0px 10px;
}
&__info {
flex: 3;
&--image {
img {
// width: 250px;
height: 350px;
}
}
&--description {
h1 {
font-size: calc(100vw / 50);
}
p {
font-size: calc(100vw / 100);
}
.course-info-items {
width: 45%;
margin-top: 20px;
& img {
margin-left: 10px;
width: 40px;
}
i {
font-size: calc(100vw / 120);
font-family: numeralLight;
}
p {
font-size: calc(100vw / 130);
margin: 0px;
}
}
}
}
&__options {
flex: 2;
&--rate {
width: 70%;
height: 160px;
margin-bottom: 30px;
&__number {
margin-bottom: 15px;
i {
font-size: calc(100vw / 100);
}
b {
font-size: calc(100vw / 50);
}
span {
font-size: 18px;
transform: translateY(4px);
margin-right: 10px;
}
}
h2 {
margin-top: 5px;
font-size: calc(100vw / 80);
}
}
&--button {
width: 70%;
height: 59px;
padding: 0px 30px;
font-size: calc(100vw / 100);
border-radius: 40px;
}
}
&__list {
&--header {
h2 {
font-size: calc(100vw / 65);
}
p {
font-size: calc(100vw / 100);
}
}
}
}
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.course {
main {
max-width: 900px;
padding: 0px 20px;
p {
margin-top: 20px;
color: $gray6;
font-size: calc(100vw / 45);
}
}
&__header {
padding: 0px;
padding-bottom: 20px;
padding-top: 20px;
}
&__info {
flex: 3;
&--image {
img {
// width: 200px;
height: 280px;
}
}
&--description {
a {
font-size: calc(100vw / 50);
}
// li{
// font-size: calc(100vw / 90);
// }
h1 {
font-size: calc(100vw / 25);
margin-top: 0px;
}
i {
color: $green;
font-size: calc(100vw / 40);
}
}
}
&__options {
// display : none !important;
flex: 2;
&--rate {
// width: 70%;
// height: 160px;
// margin-bottom: 30px;
border: none;
box-shadow: 0px 0px 0px #f7ff01b3;
&__number {
i {
font-size: calc(100vw / 40);
color: white;
}
b {
font-size: calc(100vw / 40);
}
span {
font-size: calc(100vw / 28);
transform: translateY(4px);
}
}
h2 {
margin-top: 5px;
font-size: calc(100vw / 40);
}
}
&--button {
width: 48%;
// height: 59px;
padding: 10px 5px;
font-size: calc(100vw / 45);
border-radius: 30px;
color: $gray6;
margin-top: 30px;
img {
width: 30px;
}
}
}
&__list {
&--header {
h2 {
font-size: calc(100vw / 35);
margin-top: 20px;
}
p {
margin-top: 0px;
font-size: calc(100vw / 50);
color: $gray7;
}
}
}
}
}
@media screen and (max-width: 640px) {
.course {
margin-top: 20px;
&__header {
padding: 0px;
padding-bottom: 20px;
}
main {
max-width: 500px;
padding: 0px 10px;
p {
margin-top: 20px;
color: $gray7;
font-size: calc(100vw / 30);
}
}
&__info {
flex: 3;
&--image {
img {
width: 150px;
height: 220px;
}
}
&--description {
a {
font-size: calc(100vw / 30);
}
li {
font-size: calc(100vw / 90);
}
h1 {
font-size: calc(100vw / 18);
margin-top: 0px;
}
i {
color: $green;
font-size: calc(100vw / 30);
}
}
}
&__options {
// display : none !important;
flex: 2;
&--rate {
// width: 70%;
// height: 160px;
// margin-bottom: 30px;
border: none;
box-shadow: 0px 0px 0px #f7ff01b3;
&__number {
i {
font-size: calc(100vw / 40);
color: white;
}
b {
font-size: calc(100vw / 30);
}
span {
font-size: calc(100vw / 28);
transform: translateY(4px);
}
}
h2 {
margin-top: 5px;
font-size: calc(100vw / 40);
}
}
&--button {
width: 48%;
// height: 59px;
padding: 5px 5px;
font-size: calc(100vw / 35);
border-radius: 40px;
color: $gray6;
img {
width: 25px;
}
}
}
&__list {
&--header {
h2 {
font-size: calc(100vw / 25);
margin-top: 20px;
}
p {
margin-top: 0px;
font-size: calc(100vw / 35);
color: $gray6;
}
}
}
}
}