food/src/styles/index.scss

@import "@/styles/theme.scss";
@import '@/styles/element-ui.scss';
@import '@/styles/transition.scss';

//通用
* {
  margin: 0px;
  padding: 0px;
}

html {
  height: 100%;
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  font-size: 14px;
  color: $maintext-color;
}


*,
*:before,
*:after {
  box-sizing: inherit;
}

.router-link-active {
  color: $maintext-color;
  text-decoration: none !important;
}

a {
  text-decoration: none !important;
}

a:focus,
a:active {
  outline: none !important;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

label {
  font-weight: 700;
}

.animation {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

// main-container global css
.app-container {
  padding: 20px;
  background-color: #fefefe;
  height: 100%;
}

//mapboxgl
.mapboxgl-ctrl-bottom-left a {
  display: none !important;
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
  display: none !important;
}


//public
.borderLN {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.borderRN {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.l {
  float: left !important;
}

.r {
  float: right !important;
}

.clearB {
  clear: both !important;
}

.border {
  border: 1px solid #DCDFE6;
}

.mainFontColor {
  color: #303133 !important;
}

.normalFontColor {
  color: #606266 !important;
}

.secondaryFontColor {
  color: #909399 !important;
}

.seatFontColor {
  color: #C0C4CC !important;
}

.fc {
  text-align: center;
}

.fr {
  text-align: right;
}

.vm {
  vertical-align: middle;
}

.bg-white {
  background-color: $white-color;
}

.border-b-n {
  border-bottom: none !important;
}

.border-t-n {
  border-top: none !important;
}

.border-l-n {
  border-left: none !important;
}

.border-r-n {
  border-right: none !important;
}

.border-n {
  border: none !important;
}

.fb {
  font-weight: bold;
}

.el-row {
  margin-top: 10px;

  .el-header {
    color: $maintext-color;
    padding: 0px;
    background-color: $border4-color;
  }

  .el-main {
    padding: 0px;
  }
}

//m-l-0 p-l-0 马根 帕丁
$position: (
  "t":"top",
  "b":"bottom",
  "l":"left",
  "r":"right",
);
$type: (
  "p":"padding",
  "m":"margin"
);

@each $item in $type {
  @each $list in $position {
    @for $i from 0 through 20 {
      $val: $i * 1;

      .#{nth($item,1)}-#{nth($list,1)}-#{$val} {
        #{nth($item,2)}-#{nth($list,2)}: #{$val}px !important;
      }
    }

    @for $i from 4 through 20 {
      $val: $i * 5;

      .#{nth($item,1)}-#{nth($list,1)}-#{$val} {
        #{nth($item,2)}-#{nth($list,2)}: #{$val}px !important;
      }
    }
  }
}

//m-0 p-0 马根 帕丁
$type: (
  "p":"padding",
  "m":"margin"
);

@each $item in $type {
  @for $i from 0 through 100 {
    $val: $i * 1;

    .#{nth($item,1)}-#{$val} {
      #{nth($item,2)}: #{$val}px !important;
    }
  }
}

//w-10 h-10 宽度百分比 高度百分比
$type: (
  "w":"width",
  "h":"height"
);
$mark: (
  "%"
);

@each $item in $type {
  @for $i from 0 through 10 {
    $val: $i * 10;

    .#{nth($item,1)}-#{$val} {
      #{nth($item,2)}: #{$val}#{$mark} !important;
    }
  }
}

//w-10px h-10px 宽度px 高度px 参数10 20 30...
$type: (
  "w":"width",
  "h":"height"
);

@each $item in $type {
  @for $i from 1 through 80 {
    $val: $i*10;

    .#{nth($item,1)}-#{$val}px {
      #{nth($item,2)}: #{$val}px !important;
    }
  }
}

//f-s-12 设置字体大小  1-50  60-200   50之前1递增 60以后10递增
$type: (
  "f-s":"font-size",
);

@each $item in $type {
  @for $val from 1 through 50 {
    .#{nth($item,1)}-#{$val} {
      #{nth($item,2)}: #{$val}px !important;
    }
  }

  @for $i from 6 through 20 {
    $val: $i*10;

    .#{nth($item,1)}-#{$val} {
      #{nth($item,2)}: #{$val}px !important;
    }
  }
}

//l-h-50 字体行高 12-100 1递增
$type: (
  "l-h":"line-height",
);

@each $item in $type {
  @for $val from 12 through 100 {
    .#{nth($item,1)}-#{$val} {
      #{nth($item,2)}: #{$val}px !important;
    }
  }
}