bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

converted responsive to @include col-mediaquery-max(3)

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-19 16:21:18 +01:00
parent 5188b01272
commit c9edaaf3c4
3 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -19352,7 +19352,7 @@ header[role="banner"] {
header[role="banner"] #block-sitebranding h1 { header[role="banner"] #block-sitebranding h1 {
margin: 0; margin: 0;
line-height: 1; } line-height: 1; }
@media (max-width: 375px) { @media (max-width: 436px) {
header[role="banner"] #block-sitebranding .slogan { header[role="banner"] #block-sitebranding .slogan {
display: none; } } display: none; } }
header[role="banner"] #block-socialmedialinks { header[role="banner"] #block-socialmedialinks {
@ -19361,7 +19361,7 @@ header[role="banner"] {
margin-right: 0.5em; } margin-right: 0.5em; }
header[role="banner"] #block-socialmedialinks li { header[role="banner"] #block-socialmedialinks li {
padding: 0; } padding: 0; }
@media (max-width: 375px) { @media (max-width: 654px) {
header[role="banner"] #block-socialmedialinks { header[role="banner"] #block-socialmedialinks {
display: none; } } display: none; } }
header[role="banner"] #block-userlogin { header[role="banner"] #block-userlogin {
@ -19436,7 +19436,7 @@ header[role="banner"] {
padding-top: 0.06em; } padding-top: 0.06em; }
header[role="banner"] #user-tools a.mdi-account { header[role="banner"] #user-tools a.mdi-account {
cursor: pointer; } cursor: pointer; }
@media (max-width: 375px) { @media (max-width: 654px) {
header[role="banner"] #user-tools a.mdi-account span { header[role="banner"] #user-tools a.mdi-account span {
display: none; } } display: none; } }
header[role="banner"] #user-tools .mdi-logout::before { header[role="banner"] #user-tools .mdi-logout::before {
@ -19453,7 +19453,7 @@ header[role="banner"] {
cursor: pointer; } cursor: pointer; }
header[role="banner"] #user-flags h2:before { header[role="banner"] #user-flags h2:before {
padding-right: 0.2em; } padding-right: 0.2em; }
@media (max-width: 375px) { @media (max-width: 654px) {
header[role="banner"] #user-flags h2 span { header[role="banner"] #user-flags h2 span {
display: none; } } display: none; } }
header[role="banner"] #user-flags ul { header[role="banner"] #user-flags ul {
@ -19529,12 +19529,12 @@ header[role="banner"] {
margin: 0; } margin: 0; }
header[role="banner"] #block-header ul.menu li { header[role="banner"] #block-header ul.menu li {
padding: 0; } padding: 0; }
@media (min-width: 1080px) { @media (max-width: 654px) {
header[role="banner"] #block-header ul.menu li { header[role="banner"] #block-header ul.menu li {
display: inline-block; } display: inline-block; }
header[role="banner"] #block-header ul.menu li:not(:first-of-type) { header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
margin-left: 0.5em; } } margin-left: 0.5em; } }
@media (max-width: 375px) { @media (max-width: 654px) {
header[role="banner"] #block-header { header[role="banner"] #block-header {
position: relative; position: relative;
/* Toggle Show/Hide Menu */ } /* Toggle Show/Hide Menu */ }
@ -19557,7 +19557,8 @@ header[role="banner"] {
text-align: right; } } text-align: right; } }
header[role="banner"] #block-languageswitcher { header[role="banner"] #block-languageswitcher {
text-align: right; text-align: right;
position: relative; } position: relative;
padding-right: 3px; }
header[role="banner"] #block-languageswitcher h2 { header[role="banner"] #block-languageswitcher h2 {
margin: 0.1em 0 0 0; margin: 0.1em 0 0 0;
font-size: 0.756em; font-size: 0.756em;

27
web/themes/custom/materiotheme/assets/styles/base/_responsive.scss
View File

@ -1,13 +1,16 @@
// use @include col-mediaquery-max(3) instead of below
// iphone 6/7/8 // iphone 6/7/8
@mixin responsive-mediaquery-phone() { // @mixin responsive-mediaquery-phone() {
@media (max-width: 375px) { // @media (max-width: 375px) {
@content; // @content;
} // }
} // }
//
//
@mixin responsive-mediaquery-desktop() { // @mixin responsive-mediaquery-desktop() {
@media (min-width: 1080px) { // @media (min-width: 1080px) {
@content; // @content;
} // }
} // }

20
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -9,7 +9,7 @@ $mdi-font-path: './mdi/fonts/';
@import './base/layout'; @import './base/layout';
@import './base/animations'; @import './base/animations';
@import './base/fonts'; @import './base/fonts';
@import './base/responsive'; // @import './base/responsive';
html{ html{
// background-color: red; // background-color: red;
@ -53,7 +53,7 @@ header[role="banner"]{
} }
.slogan{ .slogan{
@include responsive-mediaquery-phone(){ @include col-mediaquery-max(2){
display:none; display:none;
} }
} }
@ -66,7 +66,7 @@ header[role="banner"]{
li{ li{
padding:0; padding:0;
} }
@include responsive-mediaquery-phone(){ @include col-mediaquery-max(3){
display:none; display:none;
} }
} }
@ -175,7 +175,7 @@ header[role="banner"]{
@extend %header-fs; @extend %header-fs;
cursor: pointer; cursor: pointer;
span{ span{
@include responsive-mediaquery-phone(){ @include col-mediaquery-max(3){
display:none; display:none;
} }
} }
@ -199,7 +199,7 @@ header[role="banner"]{
cursor: pointer; cursor: pointer;
&:before{padding-right: 0.2em;} &:before{padding-right: 0.2em;}
span{ span{
@include responsive-mediaquery-phone(){ @include col-mediaquery-max(3){
display:none; display:none;
} }
} }
@ -313,7 +313,7 @@ header[role="banner"]{
} }
} }
} }
@include responsive-mediaquery-desktop(){ @include col-mediaquery-max(3){
ul.menu{ ul.menu{
li{ li{
display: inline-block; display: inline-block;
@ -323,7 +323,7 @@ header[role="banner"]{
} }
} }
} }
@include responsive-mediaquery-phone(){ @include col-mediaquery-max(3){
position: relative; position: relative;
label[for="block-header-menu"]{ label[for="block-header-menu"]{
@ -351,6 +351,7 @@ header[role="banner"]{
#block-languageswitcher{ #block-languageswitcher{
text-align: right; text-align: right;
position: relative; position: relative;
padding-right: 3px;
h2{ h2{
margin: 0.1em 0 0 0; margin: 0.1em 0 0 0;
font-size: 0.756em; font-size: 0.756em;
@ -419,6 +420,7 @@ header[role="banner"]{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
#block-pagetitle{} #block-pagetitle{}
#block-materiosapisearchblock{ #block-materiosapisearchblock{
align-self: flex-end; align-self: flex-end;
@ -429,7 +431,9 @@ header[role="banner"]{
#block-pagetitle{ #block-pagetitle{
width: max-content; width: max-content;
} }
#block-materiosapisearchblock{} #block-materiosapisearchblock{
}
} }
} }