mirror of
https://github.com/elementor/hello-theme.git
synced 2026-08-04 18:11:47 +08:00
135 lines
2.7 KiB
SCSS
135 lines
2.7 KiB
SCSS
/**
|
|
* Responsive layouts
|
|
*/
|
|
|
|
@use "../reset/variables" as variables;
|
|
|
|
$containers: '.site-header .header-inner,.site-header:not(.dynamic-header), .site-footer .footer-inner, .site-footer:not(.dynamic-footer),body:not([class*="elementor-page-"]) .site-main, .page-header .entry-title';
|
|
|
|
#{$containers} {
|
|
margin-inline-start: auto;
|
|
margin-inline-end: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Media query sizes for small screens */
|
|
@custom-media --hello-screen-xs-and-below (width < #{variables.$screen-xs});
|
|
@custom-media --hello-screen-xs-and-above (width >= #{variables.$screen-xs});
|
|
@custom-media --hello-screen-xs-only (0 <= width < #{variables.$screen-xs});
|
|
|
|
/* Media query sizes for Medium screens */
|
|
@custom-media --hello-screen-sm-and-below (width < #{variables.$screen-sm});
|
|
@custom-media --hello-screen-sm-and-above (width >= #{variables.$screen-sm});
|
|
@custom-media --hello-screen-sm-only (#{variables.$screen-xs} <= width < #{variables.$screen-sm});
|
|
|
|
/* Media query sizes for Large screens */
|
|
@custom-media --hello-screen-md-and-below (width < #{variables.$screen-md});
|
|
@custom-media --hello-screen-md-and-above (width >= #{variables.$screen-md});
|
|
@custom-media --hello-screen-md-only (#{variables.$screen-sm} <= width < #{variables.$screen-md});
|
|
|
|
/* Media query sizes for Extra large screens */
|
|
@custom-media --hello-screen-xl-and-below (width < #{variables.$screen-xl});
|
|
@custom-media --hello-screen-xl-and-above (width >= #{variables.$screen-xl});
|
|
@custom-media --hello-screen-xl-only (#{variables.$screen-md} <= width < #{variables.$screen-xl});
|
|
|
|
@media (max-width: variables.$screen-xs - variables.$screen-diff){
|
|
|
|
#{$containers} {
|
|
padding-inline-start: 10px;
|
|
padding-inline-end: 10px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: variables.$screen-xs){
|
|
|
|
#{$containers} {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.site-header {
|
|
|
|
&.header-full-width {
|
|
|
|
.header-inner {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.site-footer {
|
|
|
|
&.footer-full-width {
|
|
|
|
.footer-inner {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: variables.$screen-sm){
|
|
|
|
#{$containers} {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.site-header {
|
|
|
|
&.header-full-width {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.site-footer {
|
|
|
|
&.footer-full-width {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: variables.$screen-md) {
|
|
|
|
#{$containers} {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.site-header {
|
|
|
|
&.header-full-width {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.site-footer {
|
|
|
|
&.footer-full-width {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: variables.$screen-xl) {
|
|
|
|
#{$containers} {
|
|
max-width: 1140px;
|
|
}
|
|
|
|
.site-header {
|
|
|
|
&.header-full-width {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.site-footer {
|
|
|
|
&.footer-full-width {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.site-header + .elementor {
|
|
min-height: calc( 100vh - 320px );
|
|
}
|
