_mixins.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. /**
  2. * Responsive breakpoints
  3. * - breakpoints values are defined in _config-global.scss
  4. */
  5. @mixin media( $res ) {
  6. @if mobile-only == $res {
  7. @media only screen and (max-width: #{map-deep-get($config-global, "breakpoint", "sm") - 1}) {
  8. @content;
  9. }
  10. }
  11. @if mobile == $res {
  12. @media only screen and (min-width: map-deep-get($config-global, "breakpoint", "sm")) {
  13. @content;
  14. }
  15. }
  16. @if tablet == $res {
  17. @media only screen and (min-width: map-deep-get($config-global, "breakpoint", "md")) {
  18. @content;
  19. }
  20. }
  21. @if laptop == $res {
  22. @media only screen and (min-width: map-deep-get($config-global, "breakpoint", "lg")) {
  23. @content;
  24. }
  25. }
  26. @if desktop == $res {
  27. @media only screen and (min-width: map-deep-get($config-global, "breakpoint", "xl")) {
  28. @content;
  29. }
  30. }
  31. @if wide == $res {
  32. @media only screen and (min-width: map-deep-get($config-global, "breakpoint", "xxl")) {
  33. @content;
  34. }
  35. }
  36. }
  37. /**
  38. * Align wide widths
  39. * - Sets .alignwide widths
  40. */
  41. @mixin alignwide-width( $width: 100%, $multiplier...) {
  42. @if length($multiplier) == 0 {
  43. $multiplier: (8 * map-deep-get($config-global, "spacing", "horizontal"));
  44. }
  45. width: calc(#{$width} + #{2 * $multiplier});
  46. max-width: calc(100% - #{2 * map-deep-get($config-global, "spacing", "horizontal")});
  47. }
  48. @mixin alignwide-width-nested( $width: 100%, $multiplier...) {
  49. @if length($multiplier) == 0 {
  50. $multiplier: (8 * map-deep-get($config-global, "spacing", "horizontal"));
  51. }
  52. width: calc(#{$width} + #{2 * $multiplier});
  53. max-width: 100%;
  54. }
  55. /**
  56. * Crop Text Boundry
  57. * - Sets a fixed-width on content within alignwide and alignfull blocks
  58. */
  59. @mixin crop-text($inset-line-height: 1) {
  60. line-height: $inset-line-height;
  61. $offset-top: (.5em * $inset-line-height + -.38);
  62. $offset-bottom: (.5em * $inset-line-height + -.39);
  63. &:before,
  64. &:after {
  65. content: '';
  66. display: block;
  67. height: 0;
  68. width: 0;
  69. }
  70. &:before {
  71. margin-bottom: -($offset-top);
  72. }
  73. &:after {
  74. margin-top: -($offset-bottom);
  75. }
  76. }
  77. /**
  78. * Add font-family using CSS variables.
  79. * It also adds the proper fallback for browsers without support.
  80. */
  81. @mixin font-family( $config_map ) {
  82. font-family: #{map-deep-get( $config_map, 'fallback' )}; // For browsers without CSS custom properties support.
  83. font-family: var( #{map-deep-get( $config_map, 'css-var')}, #{map-deep-get( $config_map, 'fallback' )} );
  84. }