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

replaced :hover by @media(hover: hover)

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-19 16:42:09 +01:00
parent c9edaaf3c4
commit 8cb32b1b48
2 changed files with 85 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19385,11 +19385,14 @@ header[role="banner"] {
top: 1.7em; top: 1.7em;
box-sizing: content-box; box-sizing: content-box;
z-index: 100; } z-index: 100; }
header[role="banner"] #block-userlogin:hover > section { @media (hover: hover) {
transition-delay: 0s; header[role="banner"] #block-userlogin {
max-height: 20em; /* solves sticky problem */ }
padding: 1em 1em; header[role="banner"] #block-userlogin:hover > section {
box-shadow: 0 0 10px #ccc; } transition-delay: 0s;
max-height: 20em;
padding: 1em 1em;
box-shadow: 0 0 10px #ccc; } }
header[role="banner"] #block-userlogin .form-item { header[role="banner"] #block-userlogin .form-item {
margin: 0; margin: 0;
position: relative; position: relative;
@ -19470,11 +19473,14 @@ header[role="banner"] {
top: 1.7em; top: 1.7em;
box-sizing: content-box; box-sizing: content-box;
z-index: 30; } z-index: 30; }
header[role="banner"] #user-flags:hover ul { @media (hover: hover) {
transition-delay: 0s; header[role="banner"] #user-flags {
max-height: 50em; /* solves sticky problem */ }
padding: 1em 1em; header[role="banner"] #user-flags:hover ul {
box-shadow: 0 0 10px #ccc; } transition-delay: 0s;
max-height: 50em;
padding: 1em 1em;
box-shadow: 0 0 10px #ccc; } }
header[role="banner"] #user-flags li { header[role="banner"] #user-flags li {
width: 100%; width: 100%;
display: flex; display: flex;
@ -19497,8 +19503,11 @@ header[role="banner"] {
color: #4e4d4d; } color: #4e4d4d; }
header[role="banner"] #user-flags li div.actions span.delete-btn.loading:before { header[role="banner"] #user-flags li div.actions span.delete-btn.loading:before {
animation: rotating 2s linear infinite; } animation: rotating 2s linear infinite; }
header[role="banner"] #user-flags li:hover div.actions { @media (hover: hover) {
opacity: 1; } header[role="banner"] #user-flags li {
/* solves sticky problem */ }
header[role="banner"] #user-flags li:hover div.actions {
opacity: 1; } }
header[role="banner"] #user-flags li.create-flag { header[role="banner"] #user-flags li.create-flag {
margin-top: 0.2em; } margin-top: 0.2em; }
header[role="banner"] #user-flags li.create-flag input { header[role="banner"] #user-flags li.create-flag input {
@ -19592,10 +19601,13 @@ header[role="banner"] {
margin: 0; margin: 0;
box-sizing: content-box; box-sizing: content-box;
transition: all 0.4s ease-in-out; } transition: all 0.4s ease-in-out; }
header[role="banner"] #block-languageswitcher:hover > ul.links { @media (hover: hover) {
transition-delay: 0s; header[role="banner"] #block-languageswitcher {
height: 2em; /* solves sticky problem */ }
padding: 0.3em 0; } header[role="banner"] #block-languageswitcher:hover > ul.links {
transition-delay: 0s;
height: 2em;
padding: 0.3em 0; } }
header[role="banner"] #block-languageswitcher li { header[role="banner"] #block-languageswitcher li {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -20034,8 +20046,11 @@ article.card {
background: rgba(255, 255, 255, 0.8); } background: rgba(255, 255, 255, 0.8); }
article.card.minicard > nav.tools .mdi.unflag { article.card.minicard > nav.tools .mdi.unflag {
cursor: pointer; } cursor: pointer; }
article.card.minicard > nav.tools .tool.samples:hover .tool-content { @media (hover: hover) {
max-width: 140px; } article.card.minicard > nav.tools .tool.samples {
/* solves sticky problem */ }
article.card.minicard > nav.tools .tool.samples:hover .tool-content {
max-width: 140px; } }
article.card.linkedmaterialcard { article.card.linkedmaterialcard {
width: 190px; width: 190px;
height: 110px; } height: 110px; }
@ -20118,12 +20133,15 @@ article.card {
overflow: hidden; overflow: hidden;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
transition-delay: 0.1s; } transition-delay: 0.1s; }
article.card nav.tools > *:hover .tool-content { @media (hover: hover) {
transition: all 0.3s ease-in-out; article.card nav.tools > * {
opacity: 1; /* solves sticky problem */ }
padding: 0.3em; article.card nav.tools > *:hover .tool-content {
max-height: 195px; transition: all 0.3s ease-in-out;
max-width: 200px; } opacity: 1;
padding: 0.3em;
max-height: 195px;
max-width: 200px; } }
article.card nav.tools .tool.flags .tool-content ul { article.card nav.tools .tool.flags .tool-content ul {
display: flex; display: flex;
flex-flow: row wrap; } flex-flow: row wrap; }
@ -20134,7 +20152,12 @@ article.card {
font-size: 0.756em; font-size: 0.756em;
color: #bbb; color: #bbb;
transition: color 0.3s ease-in-out; } transition: color 0.3s ease-in-out; }
article.card nav.tools .tool.flags span.flag:hover, article.card nav.tools .tool.flags span.flag.isActive { @media (hover: hover) {
article.card nav.tools .tool.flags span.flag {
/* solves sticky problem */ }
article.card nav.tools .tool.flags span.flag:hover {
color: #1a1a1a; } }
article.card nav.tools .tool.flags span.flag.isActive {
color: #1a1a1a; } color: #1a1a1a; }
article.card nav.tools .tool.flags li.create-flag { article.card nav.tools .tool.flags li.create-flag {
margin-top: 0.2em; margin-top: 0.2em;
@ -20161,8 +20184,11 @@ article.card {
font-weight: bold; } font-weight: bold; }
article.card nav.tools .tool.samples .tool-content ul li span.showroom { article.card nav.tools .tool.samples .tool-content ul li span.showroom {
font-weight: 400; } font-weight: 400; }
article.card:hover nav.tools { @media (hover: hover) {
opacity: 1; } article.card {
/* solves sticky problem */ }
article.card:hover nav.tools {
opacity: 1; } }
article.card section.images { article.card section.images {
position: relative; } position: relative; }
article.card section.images, article.card section.images * { article.card section.images, article.card section.images * {
@ -20251,8 +20277,11 @@ article.card {
padding-right: 0.5em; } padding-right: 0.5em; }
article.card.modal-card section.col-right section.tool.samples div.tool-content ul li span.showroom { article.card.modal-card section.col-right section.tool.samples div.tool-content ul li span.showroom {
font-weight: 500; } font-weight: 500; }
article.card.modal-card section.col-right section.tool.note:hover div.tool-content { @media (hover: hover) {
max-height: 370px; } article.card.modal-card section.col-right section.tool.note {
/* solves sticky problem */ }
article.card.modal-card section.col-right section.tool.note:hover div.tool-content {
max-height: 370px; } }
article.card.modal-card section.col-right section.tool.note div.tool-content textarea, article.card.modal-card section.col-right section.tool.note div.tool-content textarea,
article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus, article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus,
article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus-visible, article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus-visible,

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

@ -28,6 +28,14 @@ html{
} }
} }
@mixin hover{
@media (hover: hover) { /* solves sticky problem */
&:hover {
@content;
}
}
}
aside.messages{ aside.messages{
border:none; border:none;
} }
@ -98,7 +106,7 @@ header[role="banner"]{
box-sizing: content-box; box-sizing: content-box;
z-index:100; z-index:100;
} }
&:hover{ @include hover{
&>section{ &>section{
transition-delay: 0s; transition-delay: 0s;
max-height:20em; max-height:20em;
@ -221,7 +229,7 @@ header[role="banner"]{
box-sizing: content-box; box-sizing: content-box;
z-index: 30; z-index: 30;
} }
&:hover{ @include hover{
ul{ ul{
transition-delay: 0s; transition-delay: 0s;
max-height:50em; max-height:50em;
@ -262,7 +270,7 @@ header[role="banner"]{
} }
} }
} }
&:hover{ @include hover{
div.actions{ div.actions{
opacity:1; opacity:1;
} }
@ -384,7 +392,7 @@ header[role="banner"]{
// outline: 1px solid blue; // outline: 1px solid blue;
// transition-delay: 2s; // transition-delay: 2s;
} }
&:hover{ @include hover{
&>ul.links{ &>ul.links{
transition-delay: 0s; transition-delay: 0s;
height:2em; height:2em;
@ -1091,9 +1099,11 @@ article.card{
.mdi.unflag{ .mdi.unflag{
cursor: pointer; cursor: pointer;
} }
.tool.samples:hover{ .tool.samples{
.tool-content{ @include hover{
max-width:140px; .tool-content{
max-width:140px;
}
} }
} }
} }
@ -1200,7 +1210,7 @@ article.card{
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
transition-delay: 0.1s; transition-delay: 0.1s;
} }
&:hover{ @include hover{
.tool-content{ .tool-content{
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
opacity: 1; opacity: 1;
@ -1226,7 +1236,10 @@ article.card{
font-size: 0.756em; font-size: 0.756em;
color: #bbb; color: #bbb;
transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out;
&:hover, &.isActive{ @include hover{
color:#1a1a1a;
}
&.isActive{
color:#1a1a1a; color:#1a1a1a;
} }
} }
@ -1271,7 +1284,7 @@ article.card{
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
&:hover{ @include hover{
nav.tools{ nav.tools{
opacity:1; opacity:1;
} }
@ -1419,8 +1432,10 @@ article.card{
} }
} }
section.tool.note{ section.tool.note{
&:hover div.tool-content{ @include hover{
max-height: 370px; div.tool-content{
max-height: 370px;
}
} }
div.tool-content{ div.tool-content{
textarea, textarea,