ORIENT/themes/modern/assets/css/components/2-layout/responsive.scss

514 lines
11 KiB
SCSS
Executable File

@include xxlg-xxxlg {
.auto__container {
max-width: 1240px;
}
// slider start
// slider end
.heading__content-body-link {
font-size: 16px;
}
.heading__content-body-para {
font-size: 16px;
h3 {
font-size: 18px;
line-height: 30px;
}
}
.main__sidebar-title {
font-size: 16px;
}
.about__para {
font-size: 16px;
}
.address__inner {
font-size: 16px;
}
.form__input label {
font-size: 16px;
}
}
@include xlg-xxlg {
.auto__container {
max-width: 1040px;
padding: 0 25px;
}
.banner {
margin: 40px 0;
}
.slider {
height: 450px;
&__item {
height: 450px;
}
&__nav {
a {
height: 33.3%;
span {
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
line-height: 22px;
}
}
}
}
.event {
&__header {
margin-bottom: 40px;
}
&__body {
&-row {
margin: 0 -10px;
}
&-image {
margin: 0 10px;
width: calc(40% - 20px);
a.progressive {
height: 300px;
}
}
&-column {
margin: 0 10px;
width: calc(30% - 20px);
& .card {
&:last-child {
display: none;
}
}
}
}
}
.main {
&__body {
&-header {
margin-bottom: 40px;
}
&-column {
a.progressive {
height: 240px;
}
}
&-card {
margin: -50px 15px 0 15px;
}
}
&__sidebar {
&-title {
margin-bottom: 40px;
}
a.progressive {
margin-bottom: 40px;
}
*-tag {
margin-bottom: 40px;
}
}
}
.card {
padding: 15px;
&__link {
max-height: 66px;
font-size: 14px;
line-height: 22px;
}
}
.partner {
&__title {
margin-bottom: 40px;
}
}
.heading {
&__row {
margin-bottom: 40px;
}
&__title {
margin-bottom: 40px;
}
&__content {
padding: 15px 0 15px 15px;
width: calc(60% - 15px);
&-header {
margin-bottom: 15px;
&__slogan {
}
}
&-body {
&-para {
height: 88px;
font-size: 14px;
line-height: 22px;
}
&-link {
height: 44px;
font: 14px;
line-height: 22px;
}
}
}
a.progressive {
height: 250px;
}
}
.form {
&__title {
margin-bottom: 40px;
}
&__input {
label {
height: 60px;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.news {
&__inner {
padding: 40px 0;
}
&__image {
margin: 20px 0;
}
&__body {
&-row {
&-image {
margin: 0 10px;
width: calc(50% - 20px);
}
}
}
}
}
@include lg-xlg {
.hero {
margin-top: 30px;
}
.slider {
&__nav {
display: none;
}
&__inner {
width: 100%;
margin: 0;
}
}
.header {
&__slogan {
display: none;
}
&__search {
display: none;
}
.hamBtn {
display: block;
width: 35px;
background: none;
height: 25px;
display: flex;
flex-direction: column;
-ms-flex-direction: column;
justify-content: space-between;
span {
width: 100%;
height: 5px;
border-radius: 10px;
background: $text-light-black;
}
}
}
.subheader__inner {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 0;
overflow: hidden;
opacity: 0;
background: rgba($color: #000000, $alpha: 0.5);
z-index: 1000;
@include transition;
.close {
width: 30px;
height: 30px;
position: absolute;
left: 30px;
top: 30px;
display: block;
img {
width: 100%;
height: 100%;
}
}
.nav {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: calc(100% - 50px);
overflow-y: scroll;
background: $text-light-black;
&__inner {
flex-direction: column;
-ms-flex-direction: column;
&-link {
display: block;
text-align: center;
margin-right: 0;
padding: 20px;
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
width: calc(100% - 40px);
&::before {
display: none;
}
}
}
}
.language {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
padding: 15px 0;
justify-content: center;
background: $color-grey;
}
&.showMenu {
width: 100%;
opacity: 1;
}
}
.event {
&__body {
&-image {
width: calc(50% - 20px);
}
&-column {
width: calc(50% - 20px);
&:last-child {
display: none;
}
}
}
}
.main {
&__sidebar {
display: none;
}
&__content {
width: 100%;
margin: 0;
}
&__body {
&-column {
a.progressive {
height: 300px;
}
}
}
}
.footer {
&__inner {
flex-direction: column;
-ms-flex-direction: column;
justify-content: center;
}
&__social {
margin-top: 20px;
}
&__copyright {
text-align: center;
}
}
.mr-top-bot {
margin: 40px 0;
}
.about {
padding: 40px 0;
}
.news {
&__sidebar {
display: none;
}
&__content {
width: 100%;
margin-right: 0;
}
}
.terms {
padding: 40px 0;
&__title {
margin-bottom: 20px;
}
&__para {
margin-bottom: 20px;
}
}
}
@include sm-md {
.hero {
margin-top: 0;
}
.slider {
height: 350px;
&__item {
height: 350px;
}
}
.event {
&__body {
&-row {
margin: 0;
flex-direction: column;
-ms-flex-direction: column;
}
&-image {
width: 100%;
margin: 15px 0;
a.progressive {
height: auto;
}
}
&-column {
width: 100%;
margin: 15px 0;
}
}
}
.main {
&__body {
&-row {
flex-direction: column;
-ms-flex-direction: column;
margin: 0;
}
&-column {
width: 100%;
margin: 15px 0;
a.progressive {
height: auto;
}
}
}
&__banner {
margin-bottom: 40px;
}
}
.heading {
&__row {
margin-bottom: 20px;
flex-direction: column;
-ms-flex-direction: column;
}
&__image {
width: 100%;
}
&__content {
padding: 20px 0;
width: 100%;
&-body {
&-para {
height: 120px;
}
}
}
a.progressive {
height: auto;
img {
height: unset;
width: 100%;
object-fit: unset;
-o-object-fit: unset;
}
}
}
.form {
&__row {
flex-direction: column;
-ms-flex-direction: column;
}
&__input {
margin-bottom: 20px;
&:first-child {
width: 100%;
margin-right: 0;
}
&:last-child {
width: 100%;
margin-left: 0;
}
label {
height: unset;
}
}
&__btn {
width: 100%;
}
}
.main {
&__inner.contact {
padding: 0;
}
}
.news {
&__body {
&-row {
margin: 0;
flex-direction: column;
-ms-flex-direction: column;
&-image {
margin: 15px 0;
width: 100%;
}
}
}
&__footer {
flex-direction: column;
-ms-flex-direction: column;
}
}
}
@include xsm-sm {
.auto__container {
padding: 0 15px;
}
.slider {
height: 300px;
&__item {
height: 300px;
}
}
.partnerSlider {
overflow: hidden;
&__item {
margin-right: 0;
}
}
.footer {
&__social {
flex-wrap: wrap;
justify-content: center;
&-link {
margin: 5px;
}
}
}
.subheader {
&__inner {
.close {
width: 20px;
height: 20px;
top: 15px;
left: 15px;
}
}
.nav {
width: calc(100% - 50px);
}
.language {
width: calc(100% - 50px);
}
}
}