// app global css in SCSS form

// 全局字体设置
* {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
}
// 全局字体设置
body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
}
// Quasar组件字体覆盖
.q-btn, .q-input, .q-card, .q-toolbar, .q-tab, .q-chip, .q-item {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

// CSS 自定义属性（CSS变量）- 可在任何地方使用
:root {
  --breakpoint-xs-max: #{$breakpoint-xs-max};
  --breakpoint-sm-min: #{$breakpoint-sm-min};
  --breakpoint-sm-max: #{$breakpoint-sm-max};
  --breakpoint-md-min: #{$breakpoint-md-min};
  --breakpoint-md-max: #{$breakpoint-md-max};
  --breakpoint-lg-min: #{$breakpoint-lg-min};
  --breakpoint-lg-max: #{$breakpoint-lg-max};
  --breakpoint-xl-min: #{$breakpoint-xl-min};
}

// 页面动态padding
.sd-page-padding {
  padding: 0 12%;
  box-sizing: border-box;

  @media screen and (max-width: $breakpoint-xs-max) {
    padding: 0 18px;
  }

  @media screen and (min-width: $breakpoint-sm-min) {
    padding: 0 18px;
  }

  @media screen and (min-width: $breakpoint-md-min) {
    padding: 0 40px;
  }
}
// 页面动态宽度
.sd-page-width {
  width: 100%;
  margin: 0 auto;

  @media screen and (min-width: $breakpoint-lg-min) {
    max-width: 945px;
  }

  @media screen and (min-width: $breakpoint-xl-min) {
    max-width: 1200px;
  }
}
