_mixins.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. @import "variables";
  2. @mixin code-block {
  3. padding: 12px;
  4. font-size: 14px;
  5. border-radius: 3px;
  6. overflow-x: auto;
  7. border: 1px solid $color-code-border;
  8. color: $color-code-text;
  9. background-color: $color-code-bg;
  10. position: relative;
  11. code {
  12. font-family: 'Source Code Pro', monospace;
  13. }
  14. }
  15. @mixin code-block-lang {
  16. position: absolute;
  17. right: 3px;
  18. top: 0;
  19. font-size: 12px;
  20. color: $gray-400;
  21. text-transform: uppercase;
  22. }
  23. @mixin custom-scrollbar {
  24. &::-webkit-scrollbar {
  25. width: 10px;
  26. height: 10px;
  27. }
  28. &::-webkit-scrollbar {
  29. width: 10px;
  30. height: 10px;
  31. }
  32. &::-webkit-scrollbar-corner {
  33. background-color: #{'hsl(0 0% 90%)'};
  34. }
  35. &::-webkit-scrollbar-thumb {
  36. background-color: #{'hsl(0 0% 75%)'};
  37. border: 2px solid #{'hsl(0 0% 90%)'};
  38. border-radius: 10px;
  39. }
  40. &::-webkit-scrollbar-thumb:hover {
  41. background-color: #{'hsl(0 0% 65%)'}
  42. }
  43. &::-webkit-scrollbar-track {
  44. background-color: #{'hsl(0 0% 90%)'}
  45. }
  46. }