mostly filebased Content Presentation System

78 line
1.9KB

  1. /////////////////////////////////////////////////////////////////////
  2. // Link design
  3. // Copied 2019-01-30 from https://codepen.io/jimmynotjim/pen/EabQjV
  4. // and edited to suit by dSP
  5. @mixin text-underline-crop($background) {
  6. text-shadow: .03em 0 $background,
  7. -.03em 0 $background,
  8. 0 .03em $background,
  9. 0 -.03em $background,
  10. .06em 0 $background,
  11. -.06em 0 $background,
  12. .09em 0 $background,
  13. -.09em 0 $background,
  14. .12em 0 $background,
  15. -.12em 0 $background,
  16. .15em 0 $background,
  17. -.15em 0 $background;
  18. }
  19. @mixin text-background($color-bg, $color-text) {
  20. position: relative;
  21. z-index:0;
  22. &::after {
  23. content: "";
  24. top: 0;
  25. left: 0;
  26. bottom: 0;
  27. right: 0;
  28. position: absolute;
  29. z-index: -1;
  30. opacity:1;
  31. transition: opacity 1s ease;
  32. background-image: linear-gradient($color-text, $color-text);
  33. background-size: 1px 0.5px;
  34. background-repeat: repeat-x;
  35. background-position: 0% 95%;
  36. }
  37. &:hover {
  38. &::after {
  39. opacity: 0;
  40. }
  41. }
  42. }
  43. @mixin text-selection($selection) {
  44. &::selection {
  45. @include text-underline-crop($selection);
  46. background: $selection;
  47. }
  48. &::-moz-selection {
  49. @include text-underline-crop($selection);
  50. background: $selection;
  51. }
  52. }
  53. @mixin link-underline($background, $text, $selection){
  54. @include text-underline-crop($background);
  55. @include text-background($background, $text);
  56. @include text-selection($selection);
  57. color: $text;
  58. text-decoration: none;
  59. *,
  60. *:after,
  61. &:after,
  62. *:before,
  63. &:before {
  64. text-shadow: none;
  65. }
  66. &:visited {
  67. color: $text;
  68. }
  69. }