more-link.css 944 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. /**
  2. * @file
  3. * This file is used to style the more link.
  4. */
  5. .read-more__link {
  6. position: relative;
  7. display: inline-block;
  8. box-sizing: border-box;
  9. padding-right: 20px; /* LTR */
  10. text-decoration: none;
  11. text-transform: uppercase;
  12. border-bottom: 1px solid transparent;
  13. background-color: inherit;
  14. }
  15. [dir=rtl] .read-more__link {
  16. padding-right: unset;
  17. padding-left: 20px;
  18. }
  19. .read-more__link:focus,
  20. .read-more__link:hover {
  21. text-decoration: none;
  22. color: #008068;
  23. border-bottom: 1px solid #008068;
  24. background-color: inherit;
  25. }
  26. .read-more__link:before {
  27. position: absolute;
  28. top: 50%;
  29. right: 0; /* LTR */
  30. width: 14px;
  31. height: 14px;
  32. margin-top: -7px;
  33. content: "";
  34. background-image: url("../../../../images/svg/pointer.svg");
  35. background-repeat: no-repeat;
  36. background-position: 0 0;
  37. background-size: contain;
  38. }
  39. [dir=rtl] .read-more__link:before {
  40. right: unset;
  41. left: 0;
  42. transform: rotate(180deg);
  43. }