{"version":3,"sources":["webpack:///index.scss","webpack:///../../style/common/mixin.scss"],"names":[],"mappings":"AAOE,8BAEE,oBAA8B,CAC9B,eAA2B,CAC3B,UAAwB,CACxB,UAAW,CACX,qBACF,CAEA,aACE,iBAAkB,CAClB,qBAWF,CARI,8BACE,+BACF,CAEA,yCACE,cACF,C;AArBN,aACE,+BAAsC,CACtC,YAAa,CACb,kBAAmB,CACnB,oBAA8B,CAC9B,kBAAgB,CAChB,qBAAmC,CACnC,eAkGF,CAhGE,wBACE,WACF,CAEA,oBACE,wBACF,CAEA,yBACE,UAUF,CAPI,2MAGE,UAAY,CACZ,UACF,CAKJ,mBACE,YAAa,CACb,kBAUF,CARE,uBACE,YAAW,CACX,aACF,CAEA,+BACE,mBACF,CAGF,kBACE,iBAAkB,CAClB,YAAa,CACb,MAAO,CACP,qBAA+B,CAC/B,eAgDF,CA9CE,0BACE,MAAO,CACP,gBAAkC,CAClC,UAAkB,CAClB,cAAqB,CACrB,eAAgB,CAChB,kBAAmB,CCDrB,eAAgB,CAChB,kBAAmB,CACnB,sBDMA,CAJE,8BACE,UACF,CAKF,wBACE,cAAe,CACf,UAAwB,CACxB,cAAqB,CACrB,gBAAiB,CACjB,YAAa,CACb,wBAAyB,CACzB,kBAAmB,CClBrB,eAAgB,CAChB,kBAAmB,CACnB,sBDkBA,CAGA,wBACE,gBAAsB,CACtB,YAAa,CACb,kBAAmB,CACnB,UACF,CAEA,uBACE,8BASF,CAHE,gGACE,kBACF,CAIJ,mBACE,cAAe,CACf,eAA2B,CAC3B,UACF,C;AAtGE,sCACE,cAKF,CAHE,sDACE,iBACF,CAKF,0CACE,cACF,CAGF,cACE,4BACF,C","file":"panel/style/index.css","sourcesContent":["@import \"../../style/common/variables.scss\";\n@import \"../../style/common/mixin.scss\";\n@import \"../../style/global.scss\";\n\n$rootName: x-panel;\n\n.#{$rootName} {\n  .x-list-body {\n    > div:first-child {\n      padding-left: 0;\n\n      > div:first-child {\n        padding-left: $padding-x;\n      }\n    }\n  }\n\n  .x-panel-title {\n    .x-list-item-line {\n      border-width: 0;\n    }\n  }\n\n  &-body {\n    border-top: 1px solid $border-color;\n  }\n}","@charset \"UTF-8\";\n@import \"./variables.scss\";\n\n//-----------------------------------------------------\n// mixin scss\n// mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数\n// %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段\n// mixin & % 既定义了mixin也定义了%，根据需求使用@include或@extend调用\n//-----------------------------------------------------\n\n// Center-align a block level element\n@mixin center-block($extend: true) {\n  @if $extend {\n    @extend %center-block;\n  } @else {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n\n%center-block {\n  @include center-block(false);\n}\n\n// clear\n@mixin clear($extend: true) {\n  @if $extend {\n    @extend %clear;\n  } @else {\n    &:after {\n      content: \".\";\n      display: block;\n      height: 0;\n      clear: both;\n      visibility: hidden;\n    }\n  }\n}\n\n%clear {\n  @include clear(false);\n}\n\n// Hide only visually, but have it available for screenReaders\n// 只隐藏于视觉，屏幕浏览器可以阅读\n@mixin hidden-clip($extend: true) {\n  @if $extend {\n    @extend %hidden-clip;\n  } @else {\n    position: absolute;\n    clip: rect(1px, 1px, 1px, 1px);\n  }\n}\n\n%hidden-clip {\n  @include hidden-clip(false);\n}\n\n// ellipsis\n@mixin ellipsis($extend: true) {\n  @if $extend {\n    @extend %ellipsis;\n  } @else {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n%ellipsis {\n  @include ellipsis(false);\n}\n\n// ellipsis lines\n// only old webkit flex box\n@mixin ellipsis-lines($lines: 2) {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: $lines;\n  -webkit-box-orient: vertical;\n}\n\n// word-break\n@mixin word-break($extend: true) {\n  @if $extend {\n    @extend %word-break;\n  } @else {\n    white-space: normal;\n    word-wrap: break-word;\n    word-break: break-all;\n  }\n}\n\n%word-break {\n  @include word-break(false);\n}\n\n// disabled\n@mixin disabled($colorText: $disable-text-color, $colorBg: $disable-background-color, $colorBorder: $disable-background-color) {\n  background-color: $colorBg !important;\n  color: $colorText !important;\n  cursor: default !important;\n  pointer-events: none !important;\n  @if $colorBorder {\n    border: 1px solid $colorBorder;\n  }\n}\n\n%disabled {\n  @include disabled;\n}\n\n// image replace text\n@mixin ir($extend: true) {\n  @if $extend {\n    @extend %ir;\n  } @else {\n    font: 0/0 a;\n    text-shadow: none;\n    border: 0 none;\n    color: transparent;\n  }\n}\n\n%ir {\n  @include ir(false);\n}\n\n// fixed top or bottom or bottom & top\n@mixin fixed($pos: 0) {\n  position: fixed;\n  left: 0;\n  right: 0;\n  @if $pos == bottom {\n    bottom: 0;\n  } @else {\n    @if $pos == all {\n      top: 0;\n      bottom: 0;\n    } @else {\n      top: $pos;\n    }\n  }\n}\n\n%fixed-top {\n  @include fixed;\n}\n\n%fixed-bottom {\n  @include fixed(bottom);\n}\n\n// justify\n// 左右对齐\n@mixin justify($extend: true) {\n  @if $extend {\n    @extend %justify;\n  } @else {\n    display: flex;\n    justify-content: space-between;\n  }\n}\n\n%justify {\n  @include justify(false);\n}\n\n// retina border\n// 0.5px实现 ios9\n@mixin retina-one-px() {\n  @supports (border-width: 0.5px) {\n    @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) {\n      border-width: 0.5px;\n    }\n  }\n}\n\n// linear-gradient实现\n// 安卓4.3- 不支持background-size的百分比\n@mixin retina-one-px-bg($direction: top, $color: $border-color) {\n  background-repeat: no-repeat;\n  @if $direction == top {\n    background-image: linear-gradient(to bottom, $color 50%, transparent 50%);\n    background-size: 100% 1px;\n  }\n  @if $direction == bottom {\n    background-image: linear-gradient(to top, $color 50%, transparent 50%);\n    background-size: 100% 1px;\n    background-position: left bottom;\n  }\n  @if $direction == left {\n    background-image: linear-gradient(to right, $color 50%, transparent 50%);\n    background-size: 1px 100%;\n  }\n  @if $direction == right {\n    background-image: linear-gradient(to left, $color 50%, transparent 50%);\n    background-size: 1px 100%;\n    background-position: right top;\n  }\n  @if $direction == v { // 左右两个边框\n    background-image: linear-gradient(to right, $color 50%, transparent 50%), linear-gradient(to left, $color 50%, transparent 50%);\n    background-size: 1px 100%;\n    background-position: left top, right top;\n  }\n  @if $direction == h { // 上下两个边框\n    background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%);\n    background-size: 100% 1px;\n    background-position: left top, left bottom;\n  }\n  @if $direction == all { // 上下左右四个边框\n    background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 50%, transparent 50%), linear-gradient(to left, $color 50%, transparent 50%);\n    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;\n    background-position: left top, left bottom, left top, right top;\n  }\n}\n\n// border和transform实现\n// 注意before和after的层级问题\n@mixin retina-one-px-border($direction: top, $color: $border-color) {\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n\n  @if $direction == top or $direction == bottom {\n    right: 0;\n    height: 0;\n    transform: scaleY(0.5);\n    border-top: 1px solid $color;\n  }\n  @if $direction == bottom {\n    top: auto;\n    bottom: 0;\n  }\n  @if $direction == right or $direction == left {\n    width: 0;\n    bottom: 0;\n    transform: scaleX(0.5);\n    border-left: 1px solid $color;\n  }\n  @if $direction == right {\n    left: auto;\n    right: 0;\n  }\n  @if $direction == all {\n    width: 200%;\n    height: 200%;\n    transform-origin: left top;\n    transform: scale(0.5);\n    border: 1px solid $color;\n  }\n}\n\n// border top & bottom\n%border-tb {\n  position: relative;\n\n  &::before {\n    content: \"\";\n    @include retina-one-px-border(top);\n    z-index: 1;\n  }\n\n  &::after {\n    content: \"\";\n    @include retina-one-px-border(bottom);\n  }\n}\n\n// border all\n%border-all {\n  position: relative;\n\n  &::before {\n    content: \"\";\n    @include retina-one-px-border(all);\n    z-index: -1;\n  }\n}\n\n// mixin\n// 只定义了mixin，所以只能通过@include来调用\n//-----------------------------------------------------\n\n// table 等\n// $child 参数请使用单引号，因为用于子元素选择器\n@mixin equal-table($child: li) {\n  display: table;\n  table-layout: fixed;\n  width: 100%;\n\n  #{$child} {\n    display: table-cell;\n  }\n}\n\n// flex 等分\n// $child 参数请使用单引号，因为用于子元素选择器\n@mixin equal-flex($child: li) {\n  display: flex;\n\n  #{$child} {\n    flex: 1;\n    width: 1%;\n  }\n}\n\n// line equal gap\n// $child 参数请使用单引号，因为用于子元素选择器\n@mixin line-equal-gap($gap: 10px, $child: li, $lr: true) {\n  display: flex;\n\n  @if $lr {\n    padding-left: $gap;\n    padding-right: $gap;\n  }\n\n  #{$child} {\n    flex: 1;\n    width: 1%;\n\n    &:not(:first-of-type) {\n      margin-left: $gap;\n    }\n  }\n}\n\n// line equal item\n@mixin line-equal-item($lr: true) {\n  display: flex;\n  justify-content: space-between;\n  @if $lr {\n    &::before,\n    &::after {\n      content: \"\";\n    }\n  }\n}\n\n// flex center\n@mixin center-flex($direction: both) {\n  display: flex;\n  @if $direction == both {\n    justify-content: center;\n    align-items: center;\n  }\n  @if $direction == x {\n    justify-content: center;\n  }\n  @if $direction == y {\n    align-items: center;\n  }\n}\n\n// translate center\n@mixin center-translate($direction: both) {\n  position: absolute;\n  @if $direction == both {\n    top: 50%;\n    left: 50%;\n    transform: translate3d(-50%, -50%, 0);\n  }\n  @if $direction == x {\n    left: 50%;\n    transform: translate3d(-50%, 0, 0);\n  }\n  @if $direction == y {\n    top: 50%;\n    transform: translate3d(0, -50%, 0);\n  }\n}\n\n// object wrap\n// $child 参数请使用单引号，因为用于子元素选择器\n@mixin object-wrap($percent: 100%, $child: img) {\n  position: relative;\n  padding-top: $percent;\n  height: 0;\n\n  #{$child} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n\n// triangle 三角箭头\n// 可采用空元素或伪元素生成，具体定位这里不涉及\n%triangle-basic {\n  content: \"\";\n  height: 0;\n  width: 0;\n  overflow: hidden;\n}\n\n@mixin triangle($direction: top, $borderWidth: 6px, $borderColor: $border-color) {\n  @extend %triangle-basic;\n  @if $direction == top {\n    border-bottom: $borderWidth solid $borderColor;\n    border-left: $borderWidth dashed transparent;\n    border-right: $borderWidth dashed transparent;\n  }\n  @if $direction == right {\n    border-left: $borderWidth solid $borderColor;\n    border-top: $borderWidth dashed transparent;\n    border-bottom: $borderWidth dashed transparent;\n  }\n  @if $direction == bottom {\n    border-top: $borderWidth solid $borderColor;\n    border-left: $borderWidth dashed transparent;\n    border-right: $borderWidth dashed transparent;\n  }\n  @if $direction == left {\n    border-right: $borderWidth solid $borderColor;\n    border-top: $borderWidth dashed transparent;\n    border-bottom: $borderWidth dashed transparent;\n  }\n}\n\n// v arrow 方向箭头\n@mixin v-arrow($direction: right, $borderWidth: 2px, $size: 10px) {\n  display: inline-block;\n  vertical-align: middle;\n  width: $size;\n  height: $size;\n  @if $direction == top {\n    border-top: $borderWidth solid $placeholder-color;\n    border-right: $borderWidth solid $placeholder-color;\n    transform: rotate(-45deg);\n  }\n  @if $direction == right {\n    border-top: $borderWidth solid $placeholder-color;\n    border-right: $borderWidth solid $placeholder-color;\n    transform: rotate(45deg);\n  }\n  @if $direction == bottom {\n    border-left: $borderWidth solid $placeholder-color;\n    border-bottom: $borderWidth solid $placeholder-color;\n    transform: rotate(-45deg);\n  }\n  @if $direction == left {\n    border-left: $borderWidth solid $placeholder-color;\n    border-bottom: $borderWidth solid $placeholder-color;\n    transform: rotate(45deg);\n  }\n}\n\n// animation-fade\n// @include animation-fade\n// @include animation-fade($from: false, $to: .5);\n// @include animation-fade($from: 1, $to: 0);\n@mixin animation-fade($name: animationFade, $from: 0, $to: false) {\n  @keyframes #{$name} {\n    @if $from {\n      from {\n        opacity: $from;\n      }\n    }\n    @if $to {\n      to {\n        opacity: $to;\n      }\n    }\n  }\n}\n\n// %\n// 只定义了%，所以只能通过@extend来调用\n//-----------------------------------------------------\n\n// bar line\n%bar-line {\n  line-height: $line-height - 10px;\n  padding: 5px 10px;\n  position: relative;\n  display: block;\n  overflow: hidden;\n  @if $active-state-switch {\n    &:active,\n    &:hover {\n      background-color: darken($background-color, 3%);\n    }\n  }\n\n  &:not(:first-of-type)::before {\n    content: \"\";\n    @include retina-one-px-border;\n  }\n}\n\n// item arrow, 右侧箭头跳转指向\n%item-v-right {\n  &::after {\n    content: \"\";\n    @include v-arrow;\n    color: $placeholder-color;\n    position: absolute;\n    right: 15px;\n    top: 50%;\n    margin-top: -1px;\n    transform: rotate(45deg) translate(0, -50%);\n    box-sizing: border-box;\n  }\n}\n\n// 间隔列表\n%gap-item {\n  position: relative;\n  background: #fff;\n  margin: 10px 0;\n  @if $active-state-switch {\n    &:active,\n    &:hover {\n      background-color: darken($background-color, 3%);\n    }\n  }\n\n  &::before {\n    content: \"\";\n    @include retina-one-px-border;\n  }\n\n  &::after {\n    content: \"\";\n    @include retina-one-px-border(bottom);\n  }\n}\n\n// fullscreen center\n%fullscreen-center {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  margin: auto;\n}\n\n// 下面的几个%，由于版本或前缀，所以设计成%\n//-----------------------------------------------------\n// flex\n%display-flex {\n  display: flex;\n}\n\n// all-transition\n%transition-all {\n  transition: all 0.3s ease-in-out;\n}\n\n// translate3d\n%translate3d {\n  transform: translate3d(0, 0, 0);\n}\n\n\n// btn\n//----------------------------------------------------\n// btn-basic\n// 按钮基本样式，联合申明\n%btn-basic {\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  text-align: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  user-select: none;\n  padding: 0 1em;\n  white-space: nowrap;\n}\n\n// btn-size\n// 按钮大小\n@mixin btn-size($padding: 1em, $height: $line-height, $radius: 3px) {\n  padding: 0 $padding;\n  line-height: $height - 2px; // 减掉2px的上下高度\n  @if $radius {\n    border-radius: $radius;\n  }\n}\n\n// btn-color\n// 包括按钮背景色，文本色，是否有边框\n@mixin btn-color($colorText: #333, $colorBg: #666, $colorBorder: false) {\n  color: $colorText;\n  background-color: $colorBg;\n  @if $colorBorder {\n    border-color: $colorBorder;\n  }\n}\n"],"sourceRoot":""}