src/pages/courses/course/styles.ts
import styled, { createGlobalStyle } from "styled-components";
export const StyledCoursePage = styled.div`
padding-top: 40px;
section {
margin-bottom: 40px;
@media (max-width: 991px) {
margin-bottom: 20px;
}
&.with-border {
padding-bottom: 45px;
border-bottom: 1px solid
${({ theme }) => (theme.mode === "dark" ? theme.gray1 : theme.gray5)};
}
&.padding-right {
padding-right: 150px;
@media (max-width: 991px) {
padding-right: 70px;
}
@media (max-width: 768px) {
padding-right: 0;
}
}
}
.sidebar-col {
padding-bottom: 45px;
}
.course-main-info {
h1 {
margin-top: 5px;
margin-bottom: 10px;
@media (max-width: 991px) {
font-size: 30px;
}
}
.image-wrapper {
margin-top: 13px;
img {
border-radius: ${({ theme }) => theme.cardRadius}px;
}
@media (max-width: 991px) {
display: flex;
justify-content: center;
width: 100%;
img {
display: block;
margin: 0 auto;
}
}
}
.labels-row {
display: flex;
justify-content: flex-start;
align-items: flex-start;
column-gap: 20px;
margin: 35px 0;
@media (max-width: 991px) {
margin: 35px 0 0;
}
@media (max-width: 374px) {
flex-direction: column;
row-gap: 16px;
}
&--bottom {
column-gap: 45px;
margin-top: 120px;
margin-bottom: 0;
flex-wrap: wrap;
@media (max-width: 991px) {
column-gap: 0;
margin-top: 55px;
}
@media (max-width: 374px) {
flex-direction: row;
}
.single-label {
@media (max-width: 991px) {
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 20px;
}
}
}
}
}
.course-tutor {
.ranking-row {
display: none !important;
}
}
.course-ratings {
@media (max-width: 991px) {
margin-top: 40px;
}
}
.course-description,
.course-description-short {
p {
font-size: 16px;
}
}
.course-companies {
display: flex;
justify-content: flex-start;
align-items: center;
@media (max-width: 768px) {
flex-direction: column;
align-items: flex-start;
}
.companies-row {
display: flex;
justify-content: flex-start;
align-items: center;
column-gap: 70px;
.single-company {
max-height: 85px;
max-width: 65px;
}
@media (max-width: 768px) {
column-gap: 0;
justify-content: space-between;
width: 100%;
}
}
p {
max-width: 220px;
margin-right: 50px;
}
}
.course-description {
/* padding: 50px 45px;
margin: 45px 0; */
/* background-color: ${({ theme }) =>
theme.mode === "dark" ? theme.gray1 : theme.gray5};
border-radius: ${({ theme }) => theme.cardRadius}px; */
}
.course-tutor {
a {
text-decoration: none !important;
}
}
.single-content {
box-sizing: border-box;
}
`;
export const ModalOverwriteGlobal = createGlobalStyle`
.ReactModal__Overlay {
z-index: 1500 !important;
}
`;