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

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

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

33
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{
border:none;
}
@ -98,7 +106,7 @@ header[role="banner"]{
box-sizing: content-box;
z-index:100;
}
&:hover{
@include hover{
&>section{
transition-delay: 0s;
max-height:20em;
@ -221,7 +229,7 @@ header[role="banner"]{
box-sizing: content-box;
z-index: 30;
}
&:hover{
@include hover{
ul{
transition-delay: 0s;
max-height:50em;
@ -262,7 +270,7 @@ header[role="banner"]{
}
}
}
&:hover{
@include hover{
div.actions{
opacity:1;
}
@ -384,7 +392,7 @@ header[role="banner"]{
// outline: 1px solid blue;
// transition-delay: 2s;
}
&:hover{
@include hover{
&>ul.links{
transition-delay: 0s;
height:2em;
@ -1091,13 +1099,15 @@ article.card{
.mdi.unflag{
cursor: pointer;
}
.tool.samples:hover{
.tool.samples{
@include hover{
.tool-content{
max-width:140px;
}
}
}
}
}
&.linkedmaterialcard{
width:$linkedmaterialcard_width;
height:$linkedmaterialcard_height;
@ -1200,7 +1210,7 @@ article.card{
transition: all 0.2s ease-in-out;
transition-delay: 0.1s;
}
&:hover{
@include hover{
.tool-content{
transition: all 0.3s ease-in-out;
opacity: 1;
@ -1226,7 +1236,10 @@ article.card{
font-size: 0.756em;
color: #bbb;
transition: color 0.3s ease-in-out;
&:hover, &.isActive{
@include hover{
color:#1a1a1a;
}
&.isActive{
color:#1a1a1a;
}
}
@ -1271,7 +1284,7 @@ article.card{
transition: opacity 0.2s ease-in-out;
}
&:hover{
@include hover{
nav.tools{
opacity:1;
}
@ -1419,9 +1432,11 @@ article.card{
}
}
section.tool.note{
&:hover div.tool-content{
@include hover{
div.tool-content{
max-height: 370px;
}
}
div.tool-content{
textarea,
textarea:focus,