I have this SASS code:
.card.job.card-border-color-6:hover .button {
background: #ffdedb;
transition: background 400ms ease-in-out;
}
.card.job.card-border-color-6 .button:hover {
background: hsl(14, 100%, 53%);
color: white;
transition: background 400ms ease-in-out;
}
But I want to make it generic, with some kind of wildcard syntax, something like this:
.card.job.card-border-color-*:hover .button {
background: #ffdedb;
transition: background 400ms ease-in-out;
}
.card.job.card-border-color-* .button:hover {
background: hsl(14, 100%, 53%);
color: white;
transition: background 400ms ease-in-out;
}
However this syntax is not correct, what is the correct way in Sass to write this code to make it generic?
Related
Why in Safari (on :hover) not the whole button turns to my hover-color ?
(Something wrong with padding I assume)
--- Result in Safari:
--- Result in Chrome (expected):
.btn,
a.btn{
background-color: #027BFF;
border-color: #007bff;
color: #fff;
border-radius: 0;
padding: 42px 20px;
transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out;
transition-property: color, background-color, border-color, box-shadow;
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
transition-delay: 0s, 0s, 0s, 0s;
}
.btn:hover, a.btn:hover {
background-color: pink;
color: #fff;
box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 5%);
cursor: pointer;
}
<span>Search</span>
I was having a similar issue with :hover in Safari. On hover, my a button was not filling in completely like your example.
I narrowed the bug down to my font-family:
body { font-family: Inter, 'Arial Narrow Bold', sans-serif; }
I have Inter imported via fonts.bunny.net and if I remove Inter and use a system font the :hover behaves as expected. The moment I use an imported font, the issue comes back.
I was able to fix it completely by using switching to Google Fonts instead of fonts.bunny.net
The problem seems to be with Safari's handling of box-shadow ->
.btn,
a.btn{
background-color: #027BFF;
border-color: #007bff;
color: #fff;
border-radius: 0;
padding: 42px 20px;
transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out;
transition-property: color, background-color, border-color, box-shadow;
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
transition-delay: 0s, 0s, 0s, 0s;
}
.btn:hover, a.btn:hover {
background-color: pink;
color: #fff;
/* box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 5%); */
cursor: pointer;
}
<span>Search</span>
so here is the situation. I am trying to disable all animations. so I injust this class into the body's
class collection:
.no-transition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
It works for the most part, except for the toggle button that implements animation using:
.slider:before {
position: absolute;
content: '';
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.no-transition doesn't seem to override the .slider:before
All help will be appreciated. Thanks
Well, it depends on where your :before and your .no-transition align, but something like this should cover those aspects:
.no-transition *, .no-transition:before, .no-transition *:before {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
What would be the code for a webkit css animation that traces out the border around an element (say a div or a heading) from one corner, around the entire element ending up back at the original corner?
In layman's terms, if someone was drawing a rectangle by pencil in one single line around the element.
The effect must be permanent and not just occur when the user hovers over the element.
Maybe something like this?
#keyframes pencil {
0% {
transition: border-color 0.5s ease-in-out 0.25s;
border-color: #000 #fff #fff #fff;
top:0%;
left: 0%;
}
25% {
transition: border-color 0.5s ease-in-out 0.25s;
border-color: #fff #000 #fff #fff;
top:0%;
right: 100%;
}
50% {
transition: border-color 0.5s ease-in-out 0.25s;
border-color: #fff #fff #000 #fff;
top:100%;
right: 100%;
}
75% {
transition: border-color 0.5s ease-in-out 0.25s;
border-color: #fff #fff #fff #000;
top:100%;
right: 0%;
}
100% {
transition: border-color 0.5s ease-in-out 0.25s;
border-color: #fff #fff #fff #fff;
top:0%;
right: 0%;
}
}
.pencil-border {
border: 2px solid #fff;
animation: pencil 2s infinite linear;
}
<div class="pencil-border">
Test
</div>
I expected this to transition when entering and leaving the dimmed state but it only transitions when leaving. How can I make the transition work when entering it? I also tried ease-in and ease-out but these don't seem to make a difference.
.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
opacity: .5;
transition: opacity .5s ease-in-out;
}
Live example of problem http://codepen.io/ryanve/pen/doKdgW
Because you need to define the transition on .card:
.card {
transition: opacity .5s ease-in-out;
}
Instead on:
.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
transition: opacity .5s ease-in-out;
}
Change you css to this:
.is-dimmed-unless-active {
transition: opacity .5s ease-in-out;
opacity: 1;
}
.is-dimmed-unless-active:hover {
opacity: .5;
}
.card {
width: 60%;
margin: 1em auto;
padding: 1em;
color: crimson;
border: 3px dotted crimson;
}
body {
font-family: sans-serif;
background: white;
}
I'm trying to make an affect on a box to drop 5px down when hovering.
It does work smoothly on Chrome but on firefox it's doesn't do the transition.
Please have a look at the next codepen using firefox and using chrome
<div class="test"></div>
.test {
background-color:blue;
width: 200px;
height: 200px;
#include transition(transform .3s 0 ease);
#include transform(translateY(0));
&:hover {
#include transform(translateY(5px));
}
}
Using Padding
Here's my preferred method using only padding:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
margin-top: 10px;
}
.transition {
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
Using Transform
Or if you still want to use transform:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10p));
-o-transform: translateY(10px);
transform: translateY(10px);
}
.transition {
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
As Kiran said already, each browser has varying support for directly using transform and transition. You can check who can use transforms here and transitions here.
Also take note that the transition wasn't applied to the :hover. It needs to be called at the base level (in this case at the div level).
Hi i guess will might help you out http://codepen.io/anon/pen/dHBni
check below css to find transitions property for different browsers
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
cursor: pointer;
}
.box:hover {
background-color: green;
}
for more information about transition http://css3.bradshawenterprises.com/transitions/