mixins.scss 695 B

12345678910111213141516171819202122232425262728293031
  1. @use 'sass:map';
  2. @use './vars' as *;
  3. @mixin with-bg {
  4. background-color: var(--bg-color);
  5. color: var(--text-color);
  6. transition: border-color var(--el-transition-duration),
  7. background-color var(--el-transition-duration-fast);
  8. }
  9. @mixin with-border {
  10. border-bottom: 1px solid var(--border-color);
  11. }
  12. $breakpoints: (
  13. 'sm': #{$breakpoint-sm},
  14. 'md': #{$breakpoint-md},
  15. 'lg': #{$breakpoint-lg},
  16. 'xlg': #{$breakpoint-xlg},
  17. 'xxl': #{$breakpoint-xxl},
  18. 'max': #{$breakpoint-max},
  19. ) !default;
  20. @mixin respond-to($breakpoint) {
  21. @if #{map.has-key($breakpoints, $breakpoints)} {
  22. @media screen and (min-width: #{map.get($breakpoints, $breakpoint)}) {
  23. @content;
  24. }
  25. }
  26. }