_ll-mixins.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /* ------------------------------------------------------------------------------
  2. *
  3. * # Custom template mixins
  4. *
  5. * All custom mixins are prefixed with "ll-" to avoid conflicts
  6. *
  7. * ---------------------------------------------------------------------------- */
  8. // Content
  9. // ------------------------------
  10. // Font smoothing
  11. @mixin ll-font-smoothing() {
  12. -webkit-font-smoothing: antialiased;
  13. -moz-osx-font-smoothing: grayscale;
  14. }
  15. //
  16. // Colors (for color system)
  17. //
  18. // For .bg-* classes
  19. @mixin ll-background-variant($color) {
  20. background-color: $color;
  21. }
  22. // For .text-* classes
  23. @mixin ll-text-color-variant($color) {
  24. color: $color;
  25. // Darken link color on hover
  26. &[href] {
  27. @include hover-focus {
  28. color: darken($color, 7.5%);
  29. }
  30. }
  31. }
  32. // For .border-* classes
  33. @mixin ll-border-color-variant($color) {
  34. border-color: $color;
  35. }
  36. // For .border-top-* classes
  37. @mixin ll-border-top-color-variant($color) {
  38. border-top-color: $color;
  39. }
  40. // For .border-bottom-* classes
  41. @mixin ll-border-bottom-color-variant($color) {
  42. border-bottom-color: $color;
  43. }
  44. // For .border-left-* classes
  45. @mixin ll-border-left-color-variant($color) {
  46. border-left-color: $color;
  47. }
  48. // For .border-right-* classes
  49. @mixin ll-border-right-color-variant($color) {
  50. border-right-color: $color;
  51. }