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

View File

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

View File

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

View File

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