_animation.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. .collapse-icon {
  2. .card-header {
  3. position: relative;
  4. }
  5. [data-toggle="collapse"] {
  6. &:after {
  7. position: absolute;
  8. top: 48%;
  9. right: 20px;
  10. margin-top: -8px;
  11. font-family: 'feather';
  12. content: "\e845";
  13. transition: all 300ms linear 0s;
  14. font-size: 0.9rem;
  15. }
  16. &:before {
  17. position: absolute;
  18. top: 48%;
  19. right: 20px;
  20. margin-top: -8px;
  21. font-family: 'feather';
  22. content: "\e842";
  23. transition: all 300ms linear 0s;
  24. font-size: 0.9rem;
  25. }
  26. }
  27. &.left {
  28. a {
  29. padding-left: 28px;
  30. &:before,
  31. &:after {
  32. left: 20px;
  33. right: auto;
  34. }
  35. }
  36. }
  37. [aria-expanded="true"] {
  38. &:before {
  39. opacity: 0;
  40. }
  41. }
  42. [aria-expanded="false"] {
  43. &:after {
  44. opacity: 0;
  45. }
  46. }
  47. &.accordion-icon-rotate {
  48. [aria-expanded="true"] {
  49. &:before {
  50. transform: rotate(180deg);
  51. }
  52. }
  53. [aria-expanded="false"] {
  54. &:after {
  55. transform: rotate(-180deg);
  56. }
  57. }
  58. }
  59. }