Dalston: Fix Hover Reveal Cover Block Style to work with gradients.
This commit is contained in:
Allan Cole
parent
db67ce17e7
commit
a355bd6c57
1 changed files with 115 additions and 12 deletions
|
|
@ -1,3 +1,92 @@
|
|||
/**
|
||||
* Editor
|
||||
*/
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-10:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:not(.has-background-gradient):hover:before {
|
||||
opacity: .1;
|
||||
}
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-20:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:not(.has-background-gradient):hover:before {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-30:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:not(.has-background-gradient):hover:before {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-40:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:not(.has-background-gradient):hover:before {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-50:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50:not(.has-background-gradient):hover:before {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-60:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:not(.has-background-gradient):hover:before {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-70:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:not(.has-background-gradient):hover:before {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-80:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:not(.has-background-gradient):hover:before {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-90:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:not(.has-background-gradient):hover:before {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-100:not(.has-background-gradient):hover:before,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background:hover,
|
||||
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100:not(.has-background-gradient):hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Front End
|
||||
*/
|
||||
|
||||
/* Inner Container */
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal:not(.has-parallax) {
|
||||
|
|
@ -24,54 +113,68 @@
|
|||
|
||||
/* Dim */
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim:not(.has-background-gradient):before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-gradient .wp-block-cover__gradient-background {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
-moz-transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: .1;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-gradient:hover .wp-block-cover__gradient-background,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100:hover:before {
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100:hover:before,
|
||||
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100.has-background-gradient:hover .wp-block-cover__gradient-background {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue