CODEWITHSUNDEEP
csstwitter-bootstrap-3lessless-mixins
user3733831
user3733831

Reputation: 2936

How I properly use bootstrap mixin for box-shadow and transition?

I am trying to use boostrap mixin for box-shadow and transition as below in my less file:

.service-box {
  .box-shadow(3px 3px 1px rgba(195, 195, 195, 0.4));
  .transition(0.4s);
}

Lets look at its compiled css:

.service-box {
  -webkit-box-shadow: 3px 3px 1px rgba(195, 195, 195, 0.4);
  box-shadow: 3px 3px 1px rgba(195, 195, 195, 0.4);
  -webkit-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

You can see above mixin not compiling properly, isn't it?

Can anybody tell what the reason for this? Thank you.

Upvotes: 0

Views: 1446

Answers (1)

atazmin
atazmin

Reputation: 5707

Here is what worked for me for Bootstrap v5

@include transition(bottom .5s cubic-bezier(0, 1, 0, 1), background-color .25s ease-in);

Upvotes: 0

Related Questions