making bootstrap drop down menus opened with a sliding animation

bootstrap-dropdown-menu-sliding.css

.open > .dropdown-menu {
  @include transform(scale(1, 1));
}
.open > .dropdown-menu li a {
  color: #000;  
}
.dropdown-menu li a{
  color: #fff;
}
.dropdown-menu {
  @include transform-origin(top);
  @include animation-fill-mode(forwards);
  @include transform(scale(1, 0));
  display: block;
  
  @include transition(all 0.2s ease-out);
}
.dropup .dropdown-menu {
  @include transform-origin(bottom);  
}

.dropup > .dropdown-menu:after {
  border-bottom: 0;
  border-top: 6px solid rgba(39, 45, 51, 0.9);
  top: auto;
  display: inline-block;
  bottom: -6px;
  content: '';
  position: absolute;
  left: 50%;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}