plain-design 0.0.97 → 1.0.0-beta.2

package/src/styles/data/scan.scss.json

@@ -1,459 +0,0 @@
-{
-  "globalImport": "/*red*/\r\n$red_1: #fff1f0;\r\n$red_2: #ffccc7;\r\n$red_3: #ffa39e;\r\n$red_4: #ff4d4f;\r\n$red_5: #ff4d4f;\r\n$red_6: #f5222d;\r\n$red_7: #cf1322;\r\n$red_8: #a8071a;\r\n$red_9: #820014;\r\n$red_10: #5c0011;\r\n\r\n/*volcano*/\r\n$volcano_1: #fff2e8;\r\n$volcano_2: #ffd8bf;\r\n$volcano_3: #ffbb96;\r\n$volcano_4: #ff9c6e;\r\n$volcano_5: #ff7a45;\r\n$volcano_6: #fa541c;\r\n$volcano_7: #d4380d;\r\n$volcano_8: #ad2102;\r\n$volcano_9: #871400;\r\n$volcano_10: #610b00;\r\n\r\n/*orange*/\r\n$orange_1: #fff7e6;\r\n$orange_2: #ffe7ba;\r\n$orange_3: #ffd591;\r\n$orange_4: #ffc069;\r\n$orange_5: #ffa940;\r\n$orange_6: #fa8c16;\r\n$orange_7: #d46b08;\r\n$orange_8: #ad4e00;\r\n$orange_9: #873800;\r\n$orange_10: #612500;\r\n\r\n/*gold*/\r\n$gold_1: #fffbe6;\r\n$gold_2: #fff1b8;\r\n$gold_3: #ffe58f;\r\n$gold_4: #ffd666;\r\n$gold_5: #ffc53d;\r\n$gold_6: #faad14;\r\n$gold_7: #d48806;\r\n$gold_8: #ad6800;\r\n$gold_9: #874d00;\r\n$gold_10: #613400;\r\n\r\n/*yellow*/\r\n$yellow_1: #feffe6;\r\n$yellow_2: #ffffb8;\r\n$yellow_3: #fffb8f;\r\n$yellow_4: #fff566;\r\n$yellow_5: #ffec3d;\r\n$yellow_6: #fadb14;\r\n$yellow_7: #d4b106;\r\n$yellow_8: #ad8b00;\r\n$yellow_9: #876800;\r\n$yellow_10: #614700;\r\n\r\n/*lime*/\r\n$lime_1: #fcffe6;\r\n$lime_2: #f4ffb8;\r\n$lime_3: #eaff8f;\r\n$lime_4: #d3f261;\r\n$lime_5: #bae637;\r\n$lime_6: #a0d911;\r\n$lime_7: #7cb305;\r\n$lime_8: #5b8c00;\r\n$lime_9: #3f6600;\r\n$lime_10: #254000;\r\n\r\n/*green*/\r\n$green_1: #f6ffed;\r\n$green_2: #d9f7be;\r\n$green_3: #b7eb8f;\r\n$green_4: #95de64;\r\n$green_5: #73d13d;\r\n$green_6: #52c41a;\r\n$green_7: #389e0d;\r\n$green_8: #237804;\r\n$green_9: #135200;\r\n$green_10: #092b00;\r\n\r\n/*cyan*/\r\n$cyan_1: #e6fffb;\r\n$cyan_2: #b5f5ec;\r\n$cyan_3: #87e8de;\r\n$cyan_4: #5cdbd3;\r\n$cyan_5: #36cfc9;\r\n$cyan_6: #13c2c2;\r\n$cyan_7: #08979c;\r\n$cyan_8: #006d75;\r\n$cyan_9: #00474f;\r\n$cyan_10: #002329;\r\n\r\n/*blue*/\r\n$blue_1: #e6f7ff;\r\n$blue_2: #bae7ff;\r\n$blue_3: #91d5ff;\r\n$blue_4: #69c0ff;\r\n$blue_5: #40a9ff;\r\n$blue_6: #1890ff;\r\n$blue_7: #096dd9;\r\n$blue_8: #0050b3;\r\n$blue_9: #003a8c;\r\n$blue_10: #002766;\r\n\r\n/*geek*/\r\n$geek_1: #f0f5ff;\r\n$geek_2: #d6e4ff;\r\n$geek_3: #adc6ff;\r\n$geek_4: #85a5ff;\r\n$geek_5: #597ef7;\r\n$geek_6: #2f54eb;\r\n$geek_7: #1d39c4;\r\n$geek_8: #10239e;\r\n$geek_9: #061178;\r\n$geek_10: #030852;\r\n\r\n/*purple*/\r\n$purple_1: #f9f0ff;\r\n$purple_2: #efdbff;\r\n$purple_3: #d3adf7;\r\n$purple_4: #b37feb;\r\n$purple_5: #9254de;\r\n$purple_6: #722ed1;\r\n$purple_7: #531dab;\r\n$purple_8: #391085;\r\n$purple_9: #22075e;\r\n$purple_10: #120338;\r\n\r\n/*magenta*/\r\n$magenta_1: #fff0f6;\r\n$magenta_2: #ffd6e7;\r\n$magenta_3: #ffadd2;\r\n$magenta_4: #ff85c0;\r\n$magenta_5: #f759ab;\r\n$magenta_6: #eb2f96;\r\n$magenta_7: #c41d7f;\r\n$magenta_8: #9e1068;\r\n$magenta_9: #780650;\r\n$magenta_10: #520339;\r\n\r\n/*gray*/\r\n$gray_1: #ffffff;\r\n$gray_2: #fafafa;\r\n$gray_3: #f5f5f5;\r\n$gray_4: #f0f0f0;\r\n$gray_5: #d9d9d9;\r\n$gray_6: #bfbfbf;\r\n$gray_7: #8c8c8c;\r\n$gray_8: #595959;\r\n$gray_9: #434343;\r\n$gray_10: #262626;\r\n$gray_11: #1f1f1f;\r\n$gray_12: #141414;\r\n$gray_13: #000000;\r\n\r\n//$boxshadow: 0 1px 1px 0 rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.16);\r\n$boxshadowColor: #f0f1f2;\r\n$boxshadow: 0 2px 8px $boxshadowColor;\r\n\r\n/*@formatter:off*/\r\n$theme-default: (\r\n  '':(\r\n    colorPrimary: $geek_7,                                  /*基础*/\r\n    colorSuccess: $cyan_7,                                  /*成功*/\r\n    colorWarn: $yellow_7,                                   /*警告*/\r\n    colorError: $red_7,                                     /*错误*/\r\n    colorInfo:$gray_7,                                      /*帮助*/\r\n\r\n    disabled:#f5f7fa,                                       /*禁用*/\r\n    disabledLight:#fcfcfc,                                  /*禁用(轻)*/\r\n    disabledDeep:#c6c6c6,                                   /*禁用(深)*/\r\n    disabledText:#c0c4cc,                                   /*禁用字体*/\r\n\r\n    sizeLarge:40px,                                         /*尺寸(大)*/\r\n    sizeNormal:32px,                                        /*尺寸(中)*/\r\n    sizeMini:28px,                                          /*尺寸(小)*/\r\n\r\n    shapeFillet:2px,                                        /*小圆角*/\r\n    shapeRound:100px,                                       /*大圆角*/\r\n    shapeNone:0,                                            /*无圆角*/\r\n\r\n    font:'-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji',/**/\r\n\r\n    ibc:#dcdfe6,                                            /*边框色*/\r\n    ibl:#ebeef5,                                            /*边框色(轻)*/\r\n    itc:#314659,                                            /*文本色*/\r\n    itl:#697b8c,                                            /*文本色(轻)*/\r\n    ihc:#000000,                                            /*标题色*/\r\n    ipc:rgba(0, 0, 0, 0.25),                                /*占位符颜色*/\r\n    icc:rgba(0, 0, 0, 0.45),                                /*图标色*/\r\n\r\n    transitionFlexible:cubic-bezier(.24, .22, .015, 1.2),   /*flexible过度动画*/\r\n    transition:ease,              /*默认过渡动画*/\r\n    transition2:ease,             /*过渡动画(轻)*/\r\n\r\n    boxshadow:$boxshadow,                                   /*阴影*/\r\n    boxshadowColor:$boxshadowColor,                         /*阴影*/\r\n    popperRadius:2px,                                       /*阴影*/\r\n  )\r\n);\r\n/*@formatter:on*/\r\n\r\n\r\n$dt: map_get($theme-default, '');\r\n$generate_default: true;\r\n\r\n@function plv($key) {\r\n  @if (map_has_key($globalTheme, $key)) {\r\n    @return map-get($globalTheme, $key);\r\n  } @else {\r\n    @return map-get($dt, $key);\r\n  }\r\n}\r\n\r\n@mixin generateThemeContent($name,$theme) {\r\n  $globalTheme: $theme !global;\r\n  $globalThemeName: $name !global;\r\n\r\n  $colorPrimary: plv(colorPrimary) !global;\r\n  $colorPrimaryLight: mix(white, $colorPrimary, 85%) !global;\r\n  $colorSuccess: plv(colorSuccess) !global;\r\n  $colorWarn: plv(colorWarn) !global;\r\n  $colorError: plv(colorError) !global;\r\n  $colorInfo: plv(colorInfo) !global;\r\n  $disabled: plv(disabled) !global;\r\n  $disabledLight: plv(disabledLight) !global;\r\n  $disabledDeep: plv(disabledDeep) !global;\r\n  $disabledText: plv(disabledText) !global;\r\n  $font: plv(font) !global;\r\n  $ibc: plv(ibc) !global;\r\n  $ibl: plv(ibl) !global;\r\n  $itc: plv(itc) !global;\r\n  $itl: plv(itl) !global;\r\n  $ihc: plv(ihc) !global;\r\n  $ipc: plv(ipc) !global;\r\n  $icc: plv(icc) !global;\r\n  $transitionFlexible: plv(transitionFlexible) !global;\r\n  $transition: plv(transition) !global;\r\n  $transition2: plv(transition2) !global;\r\n  $shapeFillet: plv(shapeFillet) !global;\r\n  $shapeRound: plv(shapeRound) !global;\r\n  $shapeNone: plv(shapeNone) !global;\r\n  $popperRadius: plv(popperRadius) !global;\r\n  $boxshadow: plv(boxshadow) !global;\r\n  $boxshadowColor: plv(boxshadowColor) !global;\r\n\r\n  @if (str_length($name)>0) {\r\n    .theme-#{$name} {\r\n      @content;\r\n    }\r\n  } @else {\r\n    html {\r\n      @if ($generate_default) {\r\n        @content;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n@mixin statusMixin($component) {\r\n  @each $key in (Primary, Success, Warn, Error, Info) {\r\n\r\n    $value: plv(color#{$key}) !global;\r\n\r\n    $name: to-lower-case($key) !global;\r\n    &.pl-#{$component}-status-#{$name} {\r\n      @content;\r\n    }\r\n  }\r\n}\r\n\r\n@mixin shapeMixin($component) {\r\n  @each $key in (Fillet, Round, Square) {\r\n\r\n    $value: plv(shape#{$key}) !global;\r\n    $name: to-lower-case($key) !global;\r\n\r\n    &.pl-#{$component}-shape-#{$name} {\r\n      @content;\r\n    }\r\n  }\r\n}\r\n\r\n@mixin sizeMixin($component) {\r\n  @each $key in (Large, Normal, Mini) {\r\n\r\n    $value: plv(size#{$key}) !global;\r\n    $name: to-lower-case($key) !global;\r\n\r\n    &.pl-#{$component}-size-#{$name} {\r\n      @content;\r\n    }\r\n  }\r\n}\r\n\r\n@mixin public-style {\r\n  box-sizing: border-box;\r\n  font-weight: 400;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n@mixin transition {\r\n  transition: all $transition 300ms;\r\n}\r\n\r\n$theme-blue: (\r\n    /*'blue':(\r\n            colorPrimary: #409EFF,\r\n            colorSuccess: #67C23A,\r\n            colorWarn: #E6A23C,\r\n            colorError: #F56C6C,\r\n            colorInfo:#909399,\r\n\r\n            shapeFillet:4px,\r\n    ),\r\n    'violet':(\r\n            colorPrimary: #8A2BE2,\r\n            colorSuccess: #4caf50,\r\n            colorWarn: #ff9800,\r\n            colorError: #e91e63,\r\n            colorInfo:#000042,\r\n\r\n            shapeFillet:8px,\r\n    )*/\r\n);\r\n\r\n$themes: map_merge($theme-default, $theme-blue);\r\n\r\n@mixin theme {\r\n  @each $curThemeName, $curTheme in $themes {\r\n    @include generateThemeContent($curThemeName, $curTheme) {\r\n      @content;\r\n    }\r\n  }\r\n}",
-  "packagesScss": [
-    {
-      "name": "PlAlert",
-      "codes": [
-        "@include theme {\r\n  $icon-width-large: 56px;\r\n  $icon-width-normal: 32px;\r\n\r\n  .pl-alert {\r\n    position: relative;\r\n    border-radius: 2px;\r\n    padding: 8px 16px;\r\n\r\n    .pl-alert-label {\r\n      font-size: 13px;\r\n    }\r\n\r\n    .pl-alert-desc {\r\n      font-size: 12px;\r\n      margin-top: 4px;\r\n    }\r\n\r\n    &.pl-alert-has-icon {\r\n      padding-left: $icon-width-normal;\r\n\r\n      .pl-alert-icon {\r\n        font-size: 1.2em;\r\n        position: absolute;\r\n        width: $icon-width-normal;\r\n        left: 0;\r\n        top: 0;\r\n        bottom: 0;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n      }\r\n    }\r\n\r\n    &.pl-alert-has-close {\r\n      $close-width: 44px;\r\n      position: relative;\r\n      padding-right: $close-width;\r\n\r\n      .pl-alert-close {\r\n        position: absolute;\r\n        top: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        width: $close-width;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n      }\r\n    }\r\n\r\n    &.pl-alert-has-desc {\r\n      .pl-alert-label {\r\n        font-weight: 600;\r\n      }\r\n\r\n      .pl-alert-icon {\r\n        font-size: 28px;\r\n      }\r\n\r\n      &.pl-alert-align-left {\r\n        .pl-alert-label, .pl-alert-desc {\r\n          text-align: left\r\n        }\r\n      }\r\n\r\n      &.pl-alert-align-center {\r\n        .pl-alert-label, .pl-alert-desc {\r\n          text-align: center\r\n        }\r\n      }\r\n\r\n      &.pl-alert-align-right {\r\n        .pl-alert-label, .pl-alert-desc {\r\n          text-align: right\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(.pl-alert-has-desc) {\r\n      &.pl-alert-align-left {\r\n        text-align: left\r\n      }\r\n\r\n      &.pl-alert-align-center {\r\n        text-align: center\r\n      }\r\n\r\n      &.pl-alert-align-right {\r\n        text-align: right\r\n      }\r\n    }\r\n\r\n    &.pl-alert-has-icon {\r\n      &:not(.pl-alert-has-desc) {\r\n        .pl-alert-label {\r\n          display: inline-block;\r\n        }\r\n      }\r\n\r\n      &.pl-alert-has-desc {\r\n        padding-left: $icon-width-large;\r\n\r\n        .pl-alert-icon {\r\n          width: $icon-width-large;\r\n        }\r\n      }\r\n    }\r\n\r\n    /*---------------------------------------theme-------------------------------------------*/\r\n\r\n    &.pl-alert-theme-lite {\r\n      @include statusMixin(alert) {\r\n        background-color: rgba($value, 0.1);\r\n        color: $value;\r\n        .pl-alert-close {\r\n          &:hover {\r\n            background-color: rgba($value, 0.2);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-alert-theme-deep {\r\n      @include statusMixin(alert) {\r\n        background-color: $value;\r\n        color: white;\r\n        .pl-alert-close {\r\n          &:hover {\r\n            background-color: mix($value, black, 90%);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 7
-    },
-    {
-      "name": "PlArrowStepGroup",
-      "codes": [
-        "@include theme{\r\n  .pl-arrow-step-group {\r\n    display: flex;\r\n    align-items: center;\r\n    height: 40px;\r\n\r\n    .pl-arrow-step {\r\n      flex: 1;\r\n      height: 100%;\r\n      box-sizing: border-box;\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n\r\n      .pl-arrow-step-sequence {\r\n        font-style: italic;\r\n        font-size: 1.2em;\r\n        opacity: 0.6;\r\n      }\r\n\r\n      .pl-arrow-step-content {\r\n        flex: 1;\r\n        overflow: hidden;\r\n        height: 100%;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 0 16px;\r\n        color: white;\r\n      }\r\n\r\n      .pl-triangle {\r\n\r\n        &.pl-triangle-direction-top, &.pl-triangle-direction-bottom {\r\n          position: absolute;\r\n          right: 100%;\r\n\r\n          &.pl-triangle-direction-top {\r\n            bottom: 0;\r\n          }\r\n\r\n          &.pl-triangle-direction-bottom {\r\n            top: 0;\r\n          }\r\n        }\r\n      }\r\n\r\n      .pl-arrow-step-content, .pl-triangle {\r\n        @include transition;\r\n      }\r\n\r\n      &:not(:first-child) {\r\n        margin-left: 4px;\r\n      }\r\n\r\n      &.pl-arrow-step-status-wait {\r\n        .pl-arrow-step-content {\r\n          background-color: $disabled;\r\n          color: $itl;\r\n        }\r\n\r\n        .pl-triangle {\r\n          color: $disabled;\r\n        }\r\n      }\r\n\r\n      &.pl-arrow-step-status-process, &.pl-arrow-step-status-finish {\r\n        .pl-arrow-step-content {\r\n          background-color: $colorPrimary;\r\n          color: white;\r\n        }\r\n\r\n        .pl-triangle {\r\n          color: $colorPrimary;\r\n        }\r\n      }\r\n\r\n      &.pl-arrow-step-status-success {\r\n        .pl-arrow-step-content {\r\n          background-color: $colorSuccess;\r\n          color: white;\r\n        }\r\n\r\n        .pl-triangle {\r\n          color: $colorSuccess;\r\n        }\r\n      }\r\n\r\n      &.pl-arrow-step-status-error {\r\n        .pl-arrow-step-content {\r\n          background-color: $colorError;\r\n          color: white;\r\n        }\r\n\r\n        .pl-triangle {\r\n          color: $colorError;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 9
-    },
-    {
-      "name": "PlBadge",
-      "codes": [
-        "@include theme {\r\n  .pl-badge {\r\n    @include public-style;\r\n    display: inline-block;\r\n    vertical-align: baseline;\r\n    position: relative;\r\n\r\n    .pl-badge-content {\r\n      position: absolute;\r\n      font-size: 12px;\r\n      padding: 2px 4px;\r\n      border: solid 1px white;\r\n\r\n      @include statusMixin(badge-content) {\r\n        background-color: $value;\r\n        border-radius: 100px;\r\n        color: white;\r\n      }\r\n\r\n      &.pl-badge-content-top {\r\n        top: 0;\r\n\r\n        &.pl-badge-content-start {\r\n          transform: translate(-50%, -50%);\r\n        }\r\n\r\n        &.pl-badge-content-end {\r\n          transform: translate(50%, -50%);\r\n        }\r\n      }\r\n\r\n      &.pl-badge-content-bottom {\r\n        bottom: 0;\r\n\r\n        &.pl-badge-content-start {\r\n          transform: translate(-50%, 50%);\r\n        }\r\n\r\n        &.pl-badge-content-end {\r\n          transform: translate(50%, 50%);\r\n        }\r\n      }\r\n\r\n      &.pl-badge-content-start {\r\n        left: 0;\r\n      }\r\n\r\n      &.pl-badge-content-end {\r\n        right: 0;\r\n      }\r\n\r\n      &.pl-badge-content-dot {\r\n        height: 12px;\r\n        width: 12px;\r\n        padding: 0;\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 10
-    },
-    {
-      "name": "PlButton",
-      "codes": [
-        "@include theme {\r\n\r\n    $min-width: 88px;\r\n\r\n    .pl-button {\r\n        vertical-align: baseline;\r\n        box-sizing: border-box;\r\n        border: solid 1px;\r\n        cursor: pointer;\r\n        transition: all 0.2s linear;\r\n        outline: none;\r\n        position: relative;\r\n        text-align: center;\r\n\r\n        @include public-style;\r\n\r\n        @include sizeMixin(button) {\r\n            height: $value;\r\n\r\n            &.pl-button-size-large {\r\n                padding: 0 32px;\r\n                font-size: 18px;\r\n            }\r\n            &.pl-button-size-mini {\r\n                padding: 0 16px;\r\n                min-width: auto;\r\n                font-size: 12px;\r\n            }\r\n            &.pl-button-size-normal {\r\n                font-size: 14px;\r\n            }\r\n\r\n            &.pl-button-icon-only {\r\n                width: $value;\r\n                padding: 0;\r\n                min-width: auto;\r\n\r\n                &.pl-button-mode-text {\r\n                    border-radius: 100px;\r\n\r\n                    &:hover {\r\n                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        @include shapeMixin(button) {\r\n            border-radius: $value;\r\n        }\r\n\r\n        &.pl-button-mode-fill {\r\n            padding: 0 16px;\r\n            min-width: $min-width;\r\n\r\n            @include statusMixin(button) {\r\n                background-color: $value;\r\n                border-color: $value;\r\n                color: white;\r\n\r\n                &:hover {\r\n                    background-color: rgba($value, 0.65);\r\n                    border-color: rgba($value, 0.65);\r\n                }\r\n                &:active, &.pl-button-active {\r\n                    background-color: mix(black, $value, 20%);\r\n                    border-color: $value;\r\n                }\r\n                &:after {\r\n                    border-color: $value;\r\n                }\r\n            }\r\n        }\r\n\r\n        &.pl-button-mode-stroke {\r\n            padding: 0 16px;\r\n            min-width: $min-width;\r\n\r\n            @include statusMixin(button) {\r\n                border-color: $value;\r\n                color: $value;\r\n                background-color: white;\r\n\r\n                &:hover {\r\n                    background-color: rgba($value, 0.1);\r\n                }\r\n\r\n                &:active, &.pl-button-active {\r\n                    background-color: rgba($value, 0.35);\r\n                    border-color: rgba($value, 0.35);\r\n                }\r\n\r\n                &:after {\r\n                    border-color: $value;\r\n                }\r\n            }\r\n        }\r\n\r\n        &.pl-button-mode-text {\r\n            border-color: transparent;\r\n            background-color: transparent;\r\n            padding: 0;\r\n\r\n            &:not(.pl-button-icon-only) {\r\n                height: auto;\r\n            }\r\n\r\n            @include statusMixin(button) {\r\n                color: $value;\r\n                &:active, &.pl-button-active {\r\n                    color: rgba($value, 0.5);\r\n                }\r\n                &:after {\r\n                    border-color: $value;\r\n                }\r\n            }\r\n\r\n            &:not(.pl-button-icon-only):after {\r\n                display: none;\r\n            }\r\n        }\r\n\r\n        &.pl-button-disabled {\r\n            cursor: not-allowed;\r\n\r\n            &.pl-button-mode-fill, &.pl-button-mode-stroke {\r\n                border-color: #d3d3d3 !important;\r\n                color: $disabledText !important;\r\n                background-color: $disabled !important;\r\n            }\r\n\r\n            &.pl-button-mode-text {\r\n                color: #999 !important;\r\n            }\r\n        }\r\n\r\n        &:focus {\r\n            text-decoration: underline;\r\n        }\r\n\r\n        &.pl-button-block {\r\n            width: 100%;\r\n            display: block;\r\n        }\r\n\r\n        & > .pl-loading, & > .pl-icon, & > span {\r\n            & + * {\r\n                margin-left: 3px;\r\n            }\r\n        }\r\n    }\r\n}"
-      ],
-      "seq": 11
-    },
-    {
-      "name": "PlButtonGroup",
-      "codes": [
-        "@include theme {\r\n    .pl-button-group {\r\n        display: inline-block;\r\n        vertical-align: baseline;\r\n        box-sizing: border-box;\r\n        font-size: 0;\r\n\r\n        .pl-button {\r\n            position: relative;\r\n\r\n            &:focus {\r\n                z-index: 1;\r\n            }\r\n        }\r\n\r\n        &.pl-button-group-direction-horizontal {\r\n            & > .pl-button {\r\n                &:not(:last-child) {\r\n                    border-top-right-radius: 0;\r\n                    border-bottom-right-radius: 0;\r\n                    margin-right: -1px;\r\n                    @include statusMixin(button) {\r\n                        border-right-color: mix(white, $value, 50%);\r\n                    }\r\n                }\r\n\r\n                &:not(:first-child) {\r\n                    border-top-left-radius: 0;\r\n                    border-bottom-left-radius: 0;\r\n                    margin-left: -1px;\r\n                    @include statusMixin(button) {\r\n                        border-left-color: mix(white, $value, 50%);\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.pl-button-group-mode-text {\r\n                & > .pl-button {\r\n\r\n                    padding: 0 6px;\r\n                    position: relative;\r\n\r\n                    &:not(:last-child) {\r\n                        border-right: none;\r\n\r\n                        &:before {\r\n                            position: absolute;\r\n                            content: '';\r\n                            background-color: $ibl;\r\n                            right: 0;\r\n                            top: 2px;\r\n                            bottom: 2px;\r\n                            width: 1px;\r\n                        }\r\n                    }\r\n\r\n                    &:not(:first-child) {\r\n                        border-left: none;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n\r\n        &.pl-button-group-direction-vertical {\r\n            display: inline-flex;\r\n            flex-direction: column;\r\n\r\n            & > .pl-button {\r\n                display: block;\r\n\r\n                &:not(:last-child) {\r\n                    border-bottom-left-radius: 0;\r\n                    border-bottom-right-radius: 0;\r\n                    margin-bottom: -1px;\r\n                    @include statusMixin(button) {\r\n                        border-bottom-color: mix(white, $value, 50%);\r\n                    }\r\n                }\r\n\r\n                &:not(:first-child) {\r\n                    border-top-left-radius: 0;\r\n                    border-top-right-radius: 0;\r\n                    margin-top: -1px;\r\n                    @include statusMixin(button) {\r\n                        border-top-color: mix(white, $value, 50%);\r\n                    }\r\n                }\r\n\r\n                &.pl-button-mode-text {\r\n                    padding: 3px 0;\r\n                    border-bottom: none;\r\n                    border-top: none;\r\n\r\n                    &:not(:first-child) {\r\n\r\n                        &:before {\r\n                            position: absolute;\r\n                            content: '';\r\n                            background-color: $ibl;\r\n                            top: 1px;\r\n                            left: 1px;\r\n                            right: 1px;\r\n                            height: 1px;\r\n                        }\r\n                    }\r\n\r\n                }\r\n            }\r\n        }\r\n\r\n    }\r\n}"
-      ],
-      "seq": 12
-    },
-    {
-      "name": "PlCard",
-      "codes": [
-        "@include theme {\r\n  .pl-card {\r\n\r\n    $radius: 4px;\r\n    display: inline-block;\r\n    vertical-align: top;\r\n    background-color: transparent;\r\n\r\n    .pl-card-head, .pl-card-content, .pl-card-foot {\r\n      border: solid 1px $ibl;\r\n      box-sizing: border-box;\r\n\r\n      & + * {\r\n        border-top: none;\r\n      }\r\n\r\n      &:first-child:not(.pl-card-poster) {\r\n        border-radius: $radius $radius 0 0;\r\n      }\r\n\r\n      &:last-child {\r\n        border-radius: 0 0 $radius $radius;\r\n      }\r\n    }\r\n\r\n    .pl-card-head {\r\n      padding: 0 24px;\r\n      display: flex;\r\n\r\n      .pl-card-head-content {\r\n        flex: 1;\r\n\r\n        .pl-card-title {\r\n          font-size: 16px;\r\n          color: $ihc;\r\n          padding: 12px 0;\r\n        }\r\n\r\n        .pl-card-desc {\r\n          font-size: 12px;\r\n          color: $itl;\r\n          padding-bottom: 12px;\r\n        }\r\n      }\r\n\r\n      .pl-card-head-operator {\r\n        padding: 12px 0 12px 24px;\r\n      }\r\n    }\r\n\r\n    .pl-card-content {\r\n      display: inline-block;\r\n      width: 100%;\r\n      font-size: 14px;\r\n      color: $itc;\r\n      padding: 12px 24px;\r\n      line-height: 1.515;\r\n    }\r\n\r\n    .pl-card-poster {\r\n      img {\r\n        display: block;\r\n      }\r\n    }\r\n\r\n    .pl-card-foot {\r\n      display: flex;\r\n\r\n      & > .pl-card-foot-button {\r\n        flex: 1;\r\n        text-align: center;\r\n        padding: 8px 0;\r\n        background-color: white;\r\n        cursor: pointer;\r\n        transition: background-color 300ms linear;\r\n\r\n        .pl-icon {\r\n          color: $icc;\r\n        }\r\n\r\n        &:hover {\r\n          background-color: $ibl;\r\n        }\r\n\r\n        &:not(:first-child) {\r\n          position: relative;\r\n\r\n          &:after {\r\n            content: '';\r\n            position: absolute;\r\n            left: 0;\r\n            top: 4px;\r\n            bottom: 4px;\r\n            width: 1px;\r\n            background-color: $ibl;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-card-mini {\r\n      .pl-card-head {\r\n        padding: 0 8px;\r\n\r\n        .pl-card-title {\r\n          padding: 6px 0;\r\n          font-size: 14px;\r\n        }\r\n\r\n        .pl-card-desc {\r\n          padding-bottom: 6px;\r\n        }\r\n\r\n        .pl-card-head-operator {\r\n          padding: 6px 0 6px 8px;\r\n        }\r\n      }\r\n\r\n      .pl-card-content {\r\n        padding: 6px 8px;\r\n        font-size: 12px;\r\n      }\r\n    }\r\n\r\n    &.pl-card-shadow-normal, &.pl-card-shadow-hover:hover {\r\n      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);\r\n    }\r\n\r\n    &.pl-card-no-padding {\r\n      .pl-card-head {\r\n        padding: 0;\r\n\r\n        .pl-card-title {\r\n          padding: 0;\r\n        }\r\n\r\n        .pl-card-head-operator {\r\n          padding: 0;\r\n        }\r\n\r\n        .pl-card-desc {\r\n          padding: 0;\r\n        }\r\n      }\r\n\r\n      .pl-card-content {\r\n        padding: 0;\r\n      }\r\n    }\r\n\r\n\r\n  }\r\n}"
-      ],
-      "seq": 14
-    },
-    {
-      "name": "PlCarousel",
-      "codes": [
-        "@include theme {\r\n  .pl-carousel {\r\n    position: relative;\r\n\r\n    &:not(.pl-carousel-vertical) {\r\n      overflow-x: hidden;\r\n    }\r\n\r\n    .pl-carousel-item, .pl-carousel-cover, .pl-carousel-operator, .pl-carousel-indicator {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      pointer-events: none;\r\n\r\n      &.pl-carousel-cover, &.pl-carousel-operator, &.pl-carousel-indicator {\r\n        z-index: 99;\r\n      }\r\n    }\r\n\r\n    .pl-carousel-item {\r\n      &.pl-carousel-item-animating {\r\n        transition: transform $transition 800ms;\r\n      }\r\n\r\n      pointer-events: auto;\r\n    }\r\n\r\n    .pl-carousel-cover {\r\n      pointer-events: auto;\r\n    }\r\n\r\n    .pl-carousel-operator {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      padding: 0 20px;\r\n\r\n      .pl-carousel-operator-btn {\r\n        transition: background-color 300ms linear;\r\n        cursor: pointer;\r\n        pointer-events: auto;\r\n        background-color: rgba(white, 0.3);\r\n        width: 36px;\r\n        height: 36px;\r\n        border-radius: 36px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: white;\r\n        user-select: none;\r\n\r\n        &:hover:not(:active) {\r\n          background-color: rgba(white, 0.6);\r\n        }\r\n      }\r\n    }\r\n\r\n    .pl-carousel-indicator {\r\n      display: flex;\r\n      align-items: flex-end;\r\n      justify-content: center;\r\n      padding: 20px;\r\n      flex-wrap: nowrap;\r\n\r\n      .pl-carousel-indicator-item {\r\n        pointer-events: auto;\r\n        width: 20px;\r\n        height: 3px;\r\n        background-color: white;\r\n        opacity: 0.3;\r\n        transition: all 200ms linear;\r\n        cursor: pointer;\r\n\r\n        &:not(:last-child) {\r\n          margin-right: 8px;\r\n        }\r\n\r\n        &.pl-carousel-indicator-item-active {\r\n          opacity: 1;\r\n          width: 30px;\r\n        }\r\n\r\n        &:hover {\r\n          opacity: 0.8;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-carousel-vertical {\r\n      overflow-y: hidden;\r\n\r\n      .pl-carousel-operator {\r\n        flex-direction: column;\r\n        padding: 20px;\r\n        align-items: flex-end;\r\n\r\n        .pl-carousel-operator-btn:nth-child(1) {\r\n          transform: rotate(90deg);\r\n        }\r\n\r\n        .pl-carousel-operator-btn:nth-child(2) {\r\n          transform: rotate(90deg);\r\n        }\r\n      }\r\n\r\n      .pl-carousel-indicator {\r\n        flex-direction: column;\r\n        padding: 20px 36px;\r\n\r\n        .pl-carousel-indicator-item {\r\n          height: 8px;\r\n          width: 3px;\r\n          margin-right: 0;\r\n\r\n          &.pl-carousel-indicator-item-active {\r\n            height: 16px;\r\n          }\r\n\r\n          &:not(:last-child) {\r\n            margin-bottom: 4px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-carousel-card {\r\n      .pl-carousel-item {\r\n        right: initial;\r\n      }\r\n\r\n      .pl-carousel-indicator {\r\n        .pl-carousel-indicator-item {\r\n          background-color: rgba(black, 0.5);\r\n        }\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 15
-    },
-    {
-      "name": "PlCascade",
-      "codes": [
-        "@include theme {\r\n  .pl-cascade {\r\n    .pl-input-suffix-icon .pl-icon {\r\n      transform: rotate(90deg);\r\n      transition: transform 300ms $transition;\r\n    }\r\n\r\n    &.pl-cascade-open {\r\n      .pl-input-suffix-icon .pl-icon {\r\n        transform: rotate(-90deg);\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 17
-    },
-    {
-      "name": "PlCascadePanel",
-      "codes": [
-        "@include theme {\r\n  .pl-cascade-panel {\r\n    display: inline-block;\r\n    height: 200px;\r\n    border: solid 1px $ibc;\r\n    border-radius: $popperRadius;\r\n    color: $itc;\r\n\r\n    & > .pl-list {\r\n      height: 100%;\r\n      overflow: hidden;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .pl-cascade-list {\r\n      width: 180px;\r\n      height: 100%;\r\n      padding: 6px 0;\r\n      font-size: 14px;\r\n      display: inline-block;\r\n      vertical-align: top;\r\n      overflow: hidden;\r\n      box-sizing: border-box;\r\n\r\n      &:not(:last-child) {\r\n        border-right: solid 1px $ibc;\r\n      }\r\n\r\n      .pl-list {\r\n        overflow: hidden;\r\n      }\r\n\r\n      .pl-cascade-item {\r\n        padding: 5px 0 5px 12px;\r\n        line-height: 22px;\r\n        font-weight: 400;\r\n        font-size: 13px;\r\n        color: $itc;\r\n        background-color: white;\r\n        transition: all 300ms $transition;\r\n        cursor: pointer;\r\n\r\n        .pl-cascade-content {\r\n          padding-right: 30px;\r\n          position: relative;\r\n\r\n          .pl-cascade-arrow {\r\n            position: absolute;\r\n            top: 0;\r\n            bottom: 0;\r\n            right: 0;\r\n            width: 30px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: $icc;\r\n          }\r\n        }\r\n\r\n        &.pl-cascade-item-expand, &:hover {\r\n          color: $ihc;\r\n          background-color: $disabled;\r\n        }\r\n\r\n        &.pl-cascade-item-active {\r\n          color: $colorPrimary;\r\n          background-color: rgba($colorPrimary, 0.1);\r\n        }\r\n\r\n        &.pl-cascade-empty {\r\n          display: flex;\r\n          flex-direction: column;\r\n          align-items: center;\r\n          justify-content: center;\r\n\r\n          padding-left: 0;\r\n          font-size: 12px;\r\n          color: $disabledText;\r\n          background-color: transparent;\r\n          cursor: auto;\r\n\r\n          .pl-icon {\r\n            margin-bottom: 8px;\r\n            font-size: 20px;\r\n          }\r\n        }\r\n\r\n        &.pl-cascade-item-disabled {\r\n          background-color: transparent;\r\n          color: $disabledText;\r\n          cursor: not-allowed;\r\n        }\r\n      }\r\n\r\n      &.pl-cascade-filter-list {\r\n        width: 360px;\r\n      }\r\n    }\r\n\r\n    .pl-loading-mask {\r\n      top: 1px;\r\n      bottom: 1px;\r\n      left: 1px;\r\n      right: 1px;\r\n    }\r\n  }\r\n}\r\n",
-        "@include theme {\r\n  [service-name=pl-popper-service-cascade] {\r\n    .pl-popper-content-inner {\r\n      padding: 0 !important;\r\n    }\r\n\r\n    .pl-cascade-panel {\r\n      border: none !important;\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 18
-    },
-    {
-      "name": "PlCheckbox",
-      "codes": [
-        "@include theme {\r\n  .pl-checkbox {\r\n    @include public-style;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    position: relative;\r\n    display: inline-block;\r\n    vertical-align: baseline;\r\n    outline: none;\r\n    font-size: 14px;\r\n\r\n    .plain-click-node {\r\n      width: 1.1em;\r\n      height: 1.1em;\r\n      display: inline-block;\r\n      vertical-align: -0.1em;\r\n\r\n      .pl-checkbox-inner {\r\n        transition: all 150ms linear;\r\n        float: left;\r\n      }\r\n\r\n      & + .pl-checkbox-label {\r\n        margin-left: 0.5em;\r\n      }\r\n    }\r\n\r\n    .pl-checkbox-label {\r\n      display: inline-block;\r\n    }\r\n\r\n    @include statusMixin(checkbox) {\r\n      .plain-click-node {\r\n        .pl-checkbox-inner {\r\n          color: $value;\r\n        }\r\n\r\n        &:after {\r\n          border-color: $value;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-checkbox-status-error {\r\n      &.pl-checkbox-check-status-check {\r\n        .pl-checkbox-label {\r\n          color: $colorError;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-checkbox-size-large {\r\n      font-size: 16px;\r\n    }\r\n\r\n    &.pl-checkbox-size-normal {\r\n      font-size: 14px;\r\n    }\r\n\r\n    &.pl-checkbox-size-mini {\r\n      font-size: 12px;\r\n    }\r\n\r\n    &:focus {\r\n      .pl-checkbox-label {\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n\r\n    &.pl-checkbox-disabled {\r\n      cursor: not-allowed;\r\n\r\n      .pl-checkbox-label {\r\n        color: $disabledText !important;\r\n      }\r\n\r\n      .pl-checkbox-inner {\r\n        border-color: currentColor !important;\r\n        background-color: $disabled !important;\r\n        color: $disabledText !important;\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-checkbox-group {\r\n    width: 100%;\r\n  }\r\n}"
-      ],
-      "seq": 19
-    },
-    {
-      "name": "PlCheckboxInner",
-      "codes": [
-        "@include theme {\r\n  .pl-checkbox-inner {\r\n    width: 1.1em;\r\n    height: 1.1em;\r\n\r\n    display: inline-block;\r\n    box-sizing: border-box;\r\n    vertical-align: -0.15em;\r\n    border-width: 1px;\r\n    border-style: solid;\r\n    //border-radius: 2px;\r\n\r\n    &.pl-checkbox-inner-status-check {\r\n      border-color: currentColor;\r\n      background-color: currentColor;\r\n\r\n      .pl-checkbox-inner-check-polyline {\r\n        fill: transparent;\r\n        stroke: white;\r\n        stroke-width: 10;\r\n      }\r\n    }\r\n\r\n    &.pl-checkbox-inner-status-uncheck {\r\n      border-color: $ipc;\r\n      background-color: transparent;\r\n    }\r\n\r\n    &.pl-checkbox-inner-status-minus {\r\n      border-color: currentColor;\r\n      background-color: transparent;\r\n\r\n      .pl-checkbox-inner-minus-polyline {\r\n        fill: currentColor;\r\n      }\r\n    }\r\n\r\n    &.pl-checkbox-inner-disabled {\r\n      &.pl-checkbox-inner-status-check {\r\n        background-color: transparent;\r\n\r\n        .pl-checkbox-inner-check-polyline {\r\n          stroke: currentColor;\r\n        }\r\n      }\r\n\r\n      &.pl-checkbox-inner-status-minus {\r\n        background-color: transparent;\r\n\r\n        .pl-checkbox-inner-minus-polyline {\r\n          stroke: currentColor;\r\n        }\r\n      }\r\n\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 21
-    },
-    {
-      "name": "PlCollapse",
-      "codes": [
-        "@include theme {\r\n\r\n  .pl-collapse {\r\n    .pl-collapse-title {\r\n      font-size: 16px;\r\n      color: $colorPrimary;\r\n      padding: 16px 0;\r\n      border-bottom: solid 1px $ibl;\r\n      display: flex;\r\n      align-items: center;\r\n\r\n      .pl-icon {\r\n        margin-right: 4px;\r\n      }\r\n\r\n      & > * {\r\n        cursor: pointer;\r\n      }\r\n    }\r\n\r\n    &.pl-collapse-is-open {\r\n      .pl-collapse-title {\r\n        & > .pl-icon:first-child {\r\n          transform: rotate(90deg);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-collapse-group {\r\n    border-bottom: solid 1px $ibl;\r\n\r\n    .pl-collapse-title {\r\n      border-bottom: none;\r\n      border-top: solid 1px $ibl;\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 23
-    },
-    {
-      "name": "PlColorButton",
-      "codes": [
-        "@include theme {\r\n  .pl-color-button {\r\n    border-radius: 2px;\r\n    height: 24px;\r\n    width: 24px;\r\n    border: solid 1px $ibc;\r\n    padding: 2px;\r\n    box-sizing: border-box;\r\n    display: inline-block;\r\n    cursor: pointer;\r\n    vertical-align: middle;\r\n\r\n    .pl-color-button-background {\r\n      background-size: 7px 7px;\r\n      border-radius: 2px;\r\n      box-sizing: border-box;\r\n      height: 100%;\r\n      width: 100%;\r\n\r\n      .pl-color-button-color {\r\n        height: 100%;\r\n        width: 100%;\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 26
-    },
-    {
-      "name": "PlColorPicker",
-      "codes": [
-        "@include theme {\r\n\r\n  .pl-color-button {\r\n    border-radius: 2px;\r\n    height: 24px;\r\n    width: 24px;\r\n    border: solid 1px $ibc;\r\n    padding: 2px;\r\n    box-sizing: border-box;\r\n    display: inline-block;\r\n    cursor: pointer;\r\n\r\n    .pl-color-button-background {\r\n      background-size: 7px 7px;\r\n      border-radius: 2px;\r\n      box-sizing: border-box;\r\n      height: 100%;\r\n      width: 100%;\r\n\r\n      .pl-color-button-color {\r\n        height: 100%;\r\n        width: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-color-picker {\r\n    @include sizeMixin(input) {\r\n      .pl-color-button {\r\n        height: $value/2;\r\n        width: $value/2;\r\n      }\r\n    }\r\n  }\r\n}",
-        "@include theme {\r\n  .pl-color-panel {\r\n    display: inline-block;\r\n    font-size: 0;\r\n    padding: 8px 12px;\r\n\r\n    & > div:first-child {\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .pl-color-hue-slider {\r\n      margin-top: 8px;\r\n      display: block;\r\n    }\r\n\r\n    .pl-color-alpha-slider {\r\n      margin-left: 8px;\r\n    }\r\n\r\n    .pl-color-panel-input-group {\r\n      margin-top: 8px;\r\n\r\n      .pl-input {\r\n\r\n        .pl-input-inner {\r\n          text-align: center;\r\n          border-top-right-radius: 0;\r\n          border-bottom-right-radius: 0;\r\n          border-right: none;\r\n        }\r\n      }\r\n\r\n      .pl-button-group {\r\n        & > .pl-button:first-child {\r\n          border-top-left-radius: 0;\r\n          border-bottom-left-radius: 0;\r\n          border-left: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}",
-        "@include theme {\r\n  .pl-color-alpha-slider {\r\n    width: 10px;\r\n    background-size: 10px 10px;\r\n    position: relative;\r\n    cursor: pointer;\r\n    border-radius: 10px;\r\n    display: inline-block;\r\n\r\n    .pl-color-alpha-shadow, .pl-color-alpha-thumb {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .pl-color-alpha-shadow {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .pl-color-alpha-thumb {\r\n      width: 10px;\r\n      height: 10px;\r\n      border-radius: 10px;\r\n      border: solid 1px $colorInfo;\r\n      display: inline-block;\r\n      background-color: white;\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      box-sizing: border-box;\r\n    }\r\n  }\r\n}",
-        "@include theme {\r\n  .pl-color-hue-slider {\r\n    background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);\r\n    display: inline-block;\r\n    height: 10px;\r\n    position: relative;\r\n    cursor: pointer;\r\n    border-radius: 10px;\r\n\r\n    .pl-color-hue-slider-thumb {\r\n      display: inline-block;\r\n      height: 100%;\r\n      background-color: white;\r\n      position: absolute;\r\n      top: 0;\r\n      border: solid 1px $colorInfo;\r\n      box-sizing: border-box;\r\n      border-radius: 100px;\r\n    }\r\n  }\r\n}",
-        "@include theme {\r\n  .pl-color-sv-panel {\r\n    position: relative;\r\n    box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.4);\r\n    cursor: pointer;\r\n    display: inline-block;\r\n\r\n    &:before, &:after, & span {\r\n      pointer-events: none;\r\n    }\r\n\r\n    &, &:before, &:after {\r\n      border-radius: 2px;\r\n    }\r\n\r\n    &:before, &:after {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      content: '';\r\n    }\r\n\r\n    &:before {\r\n      background: linear-gradient(to right, white, rgba(255, 255, 255, 0));\r\n    }\r\n\r\n    &:after {\r\n      background: linear-gradient(to top, black, rgba(255, 255, 255, 0));\r\n    }\r\n\r\n    .pl-color-sv-thumb {\r\n      display: inline-block;\r\n      position: absolute;\r\n      width: 1px;\r\n      height: 1px;\r\n      left: 0;\r\n      top: 0;\r\n      z-index: 1;\r\n\r\n      &:after {\r\n        display: inline-block;\r\n        width: 10px;\r\n        height: 10px;\r\n        border: solid 1px #999;\r\n        border-radius: 10px;\r\n        position: absolute;\r\n        top: -5px;\r\n        left: -5px;\r\n        content: '';\r\n        box-sizing: border-box;\r\n        background-color: white;\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 27
-    },
-    {
-      "name": "PlDate",
-      "codes": [
-        "@include theme {\r\n    $width: 276px;\r\n\r\n    .pl-date-base-panel {\r\n\r\n        border: solid 1px $ibc;\r\n        border-radius: 2px;\r\n        display: inline-block;\r\n        padding: 8px 12px 12px 12px;\r\n        width: 302px;\r\n        height: 282px;\r\n        transition: all $transition 500ms;\r\n        box-sizing: border-box;\r\n\r\n        .pl-date-base-panel-header {\r\n            width: $width;\r\n            box-sizing: border-box;\r\n            display: flex;\r\n            align-items: center;\r\n            color: $itc;\r\n            height: 40px;\r\n            font-size: 14px;\r\n\r\n            & > div:nth-child(2) {\r\n                flex: 1;\r\n                text-align: center;\r\n\r\n                span {\r\n                    transition: all $transition 300ms;\r\n\r\n                    &:hover:not(.pl-date-base-panel-header-static-label) {\r\n                        color: $colorPrimary;\r\n                        cursor: pointer;\r\n                        text-decoration: underline;\r\n                    }\r\n                }\r\n            }\r\n\r\n            .pl-button {\r\n                color: $icc !important;\r\n\r\n                &:hover {\r\n                    color: $colorPrimary !important;\r\n                }\r\n            }\r\n        }\r\n\r\n        .pl-date-base-panel-body {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: $width;\r\n            height: 220px;\r\n        }\r\n\r\n        ul {\r\n            margin: 0;\r\n            padding: 0;\r\n            list-style: none;\r\n            display: block;\r\n\r\n            .pl-date-base-panel-item {\r\n                cursor: pointer;\r\n                box-sizing: border-box;\r\n                display: inline-block;\r\n                font-size: 12px;\r\n                color: $itc;\r\n                user-select: none;\r\n\r\n                & > div {\r\n                    width: 100%;\r\n                    height: 100%;\r\n                    padding: 4px;\r\n                    box-sizing: border-box;\r\n                    border-radius: 100px;\r\n\r\n                    span {\r\n                        display: inline-flex;\r\n                        width: 100%;\r\n                        height: 100%;\r\n                        border-radius: 100px;\r\n                        align-items: center;\r\n                        justify-content: center;\r\n                    }\r\n                }\r\n\r\n                &:hover:not(.pl-date-base-panel-item-disabled) {\r\n\r\n                    & > div {\r\n                        background-color: rgba($colorPrimary, 0.1);\r\n                    }\r\n                }\r\n\r\n                &.pl-date-base-panel-item-now {\r\n                    color: $colorPrimary;\r\n                    font-weight: bold;\r\n                }\r\n\r\n                &.pl-date-base-panel-item-active {\r\n                    & > div {\r\n                        background-color: rgba($colorPrimary, 0.1);\r\n\r\n                        & > span {\r\n                            background-color: $colorPrimary;\r\n                            color: white;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                &.pl-date-base-panel-item-disabled {\r\n                    cursor: not-allowed;\r\n                    color: $disabledText;\r\n                }\r\n\r\n                &.pl-date-base-panel-item-hover {\r\n\r\n                    & > div {\r\n                        background-color: rgba($colorPrimary, 0.1);\r\n                        border-radius: 0;\r\n                    }\r\n                }\r\n\r\n                &.pl-date-base-panel-item-hover-start {\r\n\r\n                    & > div {\r\n                        background-color: rgba($colorPrimary, 0.1);\r\n                        border-radius: 100px 0 0 100px;\r\n                    }\r\n                }\r\n\r\n                &.pl-date-base-panel-item-hover-end {\r\n\r\n                    & > div {\r\n                        background-color: rgba($colorPrimary, 0.1);\r\n                        border-radius: 0 100px 100px 0;\r\n                    }\r\n\r\n                    &.pl-date-base-panel-item-hover-start {\r\n                        & > div {\r\n                            border-top-left-radius: 100px;\r\n                            border-bottom-left-radius: 100px;\r\n                        }\r\n\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    .pl-date-base-panel-year {\r\n        .pl-date-base-panel-body {\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .pl-date-base-panel-year-list {\r\n            background-color: white;\r\n            transition: all $transition 500ms;\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            flex-wrap: wrap;\r\n\r\n            .pl-date-base-panel-year-item {\r\n                width: 63px;\r\n                height: 36px;\r\n            }\r\n        }\r\n    }\r\n\r\n    .pl-date-base-panel-month-wrapper {\r\n        display: inline-block;\r\n        position: relative;\r\n        overflow: hidden;\r\n\r\n        .pl-date-base-panel-month {\r\n\r\n            .pl-date-base-panel-body {\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n\r\n            .pl-date-base-panel-month-item {\r\n                height: 36px;\r\n            }\r\n\r\n            .pl-date-base-panel-month-quarter-list, .pl-date-base-panel-month-list {\r\n                position: absolute;\r\n                top: 0;\r\n                bottom: 0;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                flex-wrap: wrap;\r\n                transition: all $transition 500ms;\r\n            }\r\n\r\n            .pl-date-base-panel-month-quarter-list {\r\n                left: 0;\r\n                width: 56px;\r\n                border-right: dashed 1px $ibc;\r\n\r\n                .pl-date-base-panel-month-item {\r\n                    width: 36px;\r\n\r\n                    & > div {\r\n                        border-radius: 100px;\r\n                    }\r\n                }\r\n            }\r\n\r\n            .pl-date-base-panel-month-list {\r\n                right: 0;\r\n\r\n                .pl-date-base-panel-month-item {\r\n                    width: 92px;\r\n                }\r\n\r\n                &.pl-date-base-panel-month-list-show-quarter {\r\n                    width: 216px;\r\n                    left: initial;\r\n\r\n                    .pl-date-base-panel-month-item {\r\n                        width: 72px;\r\n\r\n                        & > div > span {\r\n                            background-color: transparent;\r\n                            color: inherit;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        padding: 0;\r\n\r\n        & > div {\r\n            border: none;\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n        }\r\n    }\r\n\r\n    .pl-date-panel-quarter {\r\n        .pl-date-base-panel-month-item {\r\n            &:nth-child(3n+1) {\r\n                & > div {\r\n                    border-top-left-radius: 100px !important;\r\n                    border-bottom-left-radius: 100px !important;\r\n\r\n                    &:before {\r\n                        display: none;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &:nth-child(3n) {\r\n                & > div {\r\n                    border-top-right-radius: 100px !important;\r\n                    border-bottom-right-radius: 100px !important;\r\n\r\n                    &:after {\r\n                        display: none;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .pl-date-base-panel-date-wrapper {\r\n        display: inline-block;\r\n        position: relative;\r\n        overflow: hidden;\r\n\r\n        .pl-date-base-panel-date {\r\n\r\n            .pl-date-base-panel-body {\r\n                flex-direction: column;\r\n            }\r\n\r\n            .pl-date-base-panel-date-time-label {\r\n                margin-left: 8px;\r\n            }\r\n\r\n            ul {\r\n                $itemWidth: 36px;\r\n                $itemHeight: 30px;\r\n\r\n                &.pl-date-base-panel-date-week-list {\r\n                    border-bottom: solid 1px $ibl;\r\n                    padding-bottom: 4px;\r\n                    width: $itemWidth*7;\r\n\r\n                    .pl-date-base-panel-date-week-item {\r\n                        width: $itemWidth;\r\n                        height: $itemHeight;\r\n                        padding: 0 3px;\r\n                    }\r\n                }\r\n\r\n                &.pl-date-base-panel-date-list {\r\n                    width: $itemWidth*7;\r\n\r\n                    .pl-date-base-panel-date-item {\r\n                        width: $itemWidth;\r\n                        height: $itemHeight;\r\n                        text-align: center;\r\n\r\n                        & > div {\r\n                            width: $itemHeight;\r\n                            height: $itemHeight;\r\n                            display: inline-block;\r\n                            padding: 3px;\r\n                        }\r\n\r\n                        &, & span {\r\n                            transition: all $transition 300ms;\r\n                        }\r\n\r\n                        &.pl-date-base-panel-date-item-other-month:not(:hover) {\r\n                            span {\r\n                                opacity: 0.2;\r\n                            }\r\n                        }\r\n\r\n                        &.pl-date-base-panel-item-disabled {\r\n                            & > div {\r\n                                span {\r\n                                    position: relative;\r\n\r\n                                    &:after {\r\n                                        position: absolute;\r\n                                        left: 5px;\r\n                                        top: 5px;\r\n                                        bottom: 0;\r\n                                        width: 1px;\r\n                                        content: '';\r\n                                        background-color: $ibc;\r\n                                        transform: rotate(-45deg);\r\n                                        transform-origin: top left;\r\n                                    }\r\n                                }\r\n                            }\r\n                        }\r\n\r\n                        margin-top: 2px;\r\n\r\n                        &.pl-date-base-panel-item-hover-start {\r\n                            & > div {\r\n                                position: relative;\r\n\r\n                                &:after {\r\n                                    position: absolute;\r\n                                    top: 0;\r\n                                    bottom: 0;\r\n                                    right: -3px;\r\n                                    width: 3px;\r\n                                    background-color: rgba($colorPrimary, 0.1);\r\n                                    content: '';\r\n                                }\r\n                            }\r\n                        }\r\n\r\n                        &.pl-date-base-panel-item-hover {\r\n                            & > div {\r\n                                position: relative;\r\n\r\n                                &:after {\r\n                                    position: absolute;\r\n                                    top: 0;\r\n                                    bottom: 0;\r\n                                    right: -3px;\r\n                                    width: 3px;\r\n                                    background-color: rgba($colorPrimary, 0.1);\r\n                                    content: '';\r\n                                }\r\n\r\n                                &:before {\r\n                                    position: absolute;\r\n                                    top: 0;\r\n                                    bottom: 0;\r\n                                    left: -3px;\r\n                                    width: 3px;\r\n                                    background-color: rgba($colorPrimary, 0.1);\r\n                                    content: '';\r\n                                }\r\n                            }\r\n                        }\r\n\r\n                        &.pl-date-base-panel-item-hover-end {\r\n                            & > div {\r\n                                position: relative;\r\n\r\n                                &:before {\r\n                                    position: absolute;\r\n                                    top: 0;\r\n                                    bottom: 0;\r\n                                    left: -3px;\r\n                                    width: 3px;\r\n                                    background-color: rgba($colorPrimary, 0.1);\r\n                                    content: '';\r\n                                }\r\n                            }\r\n\r\n                            &.pl-date-base-panel-item-hover-start {\r\n                                & > div {\r\n                                    position: relative;\r\n\r\n                                    &:before, &:after {\r\n                                        display: none;\r\n                                    }\r\n                                }\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .pl-date-base-panel-body {\r\n            & > .pl-time-panel {\r\n                border: none;\r\n            }\r\n        }\r\n\r\n        padding: 0;\r\n\r\n        & > div {\r\n            border: none;\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n        }\r\n    }\r\n\r\n    .pl-date-panel-date-range {\r\n        width: auto;\r\n        padding: 0;\r\n        white-space: nowrap;\r\n\r\n        & > .pl-date-base-panel {\r\n            border: none;\r\n            white-space: normal;\r\n\r\n            &:first-child {\r\n                &:after {\r\n                    top: 16px;\r\n                    bottom: 16px;\r\n                    right: 0;\r\n                    content: '';\r\n                    position: absolute;\r\n                    background-color: $ibl;\r\n                    width: 1px;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .pl-date-panel-week {\r\n        .pl-date-base-panel-date-item {\r\n            &:nth-child(7n+1) {\r\n                & > div {\r\n                    border-top-left-radius: 100px !important;\r\n                    border-bottom-left-radius: 100px !important;\r\n\r\n                    &:before {\r\n                        display: none;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &:nth-child(7n) {\r\n                & > div {\r\n                    border-top-right-radius: 100px !important;\r\n                    border-bottom-right-radius: 100px !important;\r\n\r\n                    &:after {\r\n                        display: none;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    [service-name=pl-popper-service-date] {\r\n        .pl-popper-content-inner {\r\n            padding: 0 !important;\r\n\r\n            & > .pl-date-base-panel {\r\n                border: none;\r\n            }\r\n        }\r\n    }\r\n\r\n    .pl-date {\r\n        .pl-date-inner {\r\n            display: flex;\r\n            align-items: stretch;\r\n            height: 100%;\r\n\r\n            & > span {\r\n                color: $icc;\r\n            }\r\n\r\n            .pl-date-input-inner {\r\n                border: none;\r\n                outline: none;\r\n                width: 90px;\r\n                height: 100%;\r\n                background: transparent;\r\n            }\r\n        }\r\n\r\n        &.pl-date-range {\r\n            .pl-date-input-inner {\r\n                text-align: center;\r\n            }\r\n        }\r\n    }\r\n\r\n    .pl-date-panel-foot {\r\n        padding: 8px;\r\n        border-top: solid 1px $ibl;\r\n        display: flex;\r\n        justify-content: center;\r\n\r\n        & > * + * {\r\n            margin-left: 8px;\r\n        }\r\n    }\r\n}"
-      ],
-      "seq": 28
-    },
-    {
-      "name": "PlDialog",
-      "codes": [
-        ".pl-dialog {\r\n  z-index: 1500;\r\n\r\n  position: fixed;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: auto;\r\n  transition: all linear 300ms;\r\n\r\n  &:before {\r\n    content: '';\r\n    background-color: rgba(0, 0, 0, 0.2);\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    user-select: none;\r\n    transition: all linear 300ms;\r\n  }\r\n\r\n  .pl-dialog-body {\r\n    background-color: white;\r\n    position: relative;\r\n    z-index: 1;\r\n    transition: all cubic-bezier(0.410, 1.110, 0.615, 0.995) 300ms;\r\n    box-shadow: 0 0 20px 8px rgba(100, 100, 100, 0.1);\r\n    overflow: hidden;\r\n    pointer-events: auto;\r\n    box-sizing: border-box;\r\n\r\n    .pl-dialog-head {\r\n      padding: 12px 24px;\r\n      background-color: white;\r\n      position: relative;\r\n      font-size: 14px;\r\n      font-weight: 500;\r\n\r\n      .pl-dialog-head-close {\r\n        font-size: 18px;\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        right: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        cursor: pointer;\r\n        padding: 0 8px;\r\n        opacity: 0.75;\r\n        color: inherit;\r\n      }\r\n    }\r\n\r\n    .pl-dialog-content {\r\n      overflow: auto;\r\n      padding: 16px 24px;\r\n      font-size: 14px;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .pl-dialog-foot {\r\n      padding: 8px 24px;\r\n      display: flex;\r\n      justify-content: flex-end;\r\n      align-items: center;\r\n\r\n      & > * + * {\r\n        margin-left: 8px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.pl-dialog-fullscreen {\r\n    padding: 0 !important;\r\n\r\n    .pl-dialog-body {\r\n      position: fixed;\r\n      height: 100% !important;\r\n      width: 100% !important;\r\n    }\r\n  }\r\n\r\n  &.pl-dialog-no-mask {\r\n    pointer-events: none;\r\n\r\n    &:before {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  &.pl-dialog-vertical-center {\r\n    padding: 0;\r\n    align-items: center;\r\n  }\r\n\r\n  &.pl-dialog-no-content-padding {\r\n    .pl-dialog-content {\r\n      padding: 0;\r\n    }\r\n  }\r\n}\r\n\r\n.pl-transition-dialog {\r\n  /*@formatter:off*/\r\n    &.pl-transition-dialog-enter {\r\n        &:before {opacity: 0;}\r\n        .pl-dialog-body {transform: translateY(-10px);opacity: 0;}\r\n    }\r\n    &.pl-transition-dialog-enter-active {\r\n        &:before {opacity: 1;}\r\n        .pl-dialog-body {transform: translateY(0) scale(1);opacity: 1;}\r\n    }\r\n    &.pl-transition-dialog-exit {\r\n        &:before {opacity: 1;}\r\n        .pl-dialog-body {transform: translateY(0) scale(1);opacity: 1;}\r\n    }\r\n    &.pl-transition-dialog-exit-active {\r\n        &:before {opacity: 0;}\r\n        .pl-dialog-body {transform: translateY(-10px);opacity: 0;}\r\n    }\r\n    &.pl-transition-dialog-enter-active, &.pl-transition-dialog-exit-active {\r\n        transition: opacity 150ms linear, transform 150ms $transition;\r\n    }\r\n    /*@formatter:on*/\r\n}\r\n\r\n@include theme {\r\n  .pl-dialog {\r\n    .pl-dialog-body {\r\n      color: $itc;\r\n\r\n      .pl-dialog-head {\r\n        color: $ihc;\r\n        border-bottom: solid 1px $ibl;\r\n        background: #fafafa;\r\n\r\n        .pl-dialog-head-close .pl-button.pl-button-mode-text.pl-button-status-primary {\r\n          color: $icc;\r\n\r\n          &:hover {\r\n            color: $colorPrimary;\r\n          }\r\n        }\r\n      }\r\n\r\n      .pl-dialog-foot {\r\n        border-top: solid 1px $ibl;\r\n        //background: #fafafa;\r\n      }\r\n\r\n      @include shapeMixin(dialog-body) {\r\n        border-radius: $value;\r\n      }\r\n    }\r\n  }\r\n\r\n  $dialogTransition: (\r\n    left:translate3d(-100%, 0, 0),\r\n    right:translate3d(100%, 0, 0),\r\n    top:translate3d(0, -100%, 0),\r\n    bottom:translate3d(0, 100%, 0),\r\n  );\r\n\r\n  @each $key, $value in $dialogTransition {\r\n    .pl-transition-dialog-#{$key} {\r\n      /*@formatter:off*/\r\n            &.pl-transition-dialog-#{$key}-enter {\r\n                &:before {opacity: 0;}\r\n                .pl-dialog-body {opacity: 0;transform: $value;}\r\n            }\r\n            &.pl-transition-dialog-#{$key}-enter-active {\r\n                &:before {opacity: 1;}\r\n                .pl-dialog-body {opacity: 1;transform: translate3d(0, 0, 0);}\r\n            }\r\n            &.pl-transition-dialog-#{$key}-exit {\r\n                &:before {opacity: 1;}\r\n                .pl-dialog-body {opacity: 1;transform: translate3d(0, 0, 0);}\r\n            }\r\n            &.pl-transition-dialog-#{$key}-exit-active {\r\n                &:before {opacity: 0;}\r\n                .pl-dialog-body {opacity: 0;transform: $value;}\r\n            }\r\n            &.pl-transition-dialog-#{$key}-enter-active, &.pl-transition-dialog-#{$key}-exit-active {\r\n                .pl-dialog-body {\r\n                    transition: all $transition2 300ms;\r\n                }\r\n            }\r\n            /*@formatter:on*/\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 30
-    },
-    {
-      "name": "PlDropdown",
-      "codes": [
-        "@include theme {\r\n  .pl-dropdown-option {\r\n    padding: 5px 12px;\r\n    font-weight: 400;\r\n    font-size: 14px;\r\n    line-height: 22px;\r\n    color: $itc;\r\n    background-color: white;\r\n    transition: background-color linear 200ms;\r\n\r\n    .pl-dropdown-option-icon {\r\n      margin-right: 6px;\r\n      opacity: 0.5;\r\n    }\r\n\r\n    &:not(.pl-dropdown-option-disabled):hover {\r\n      background-color: #f2f2f2;\r\n      cursor: pointer;\r\n    }\r\n\r\n    &.pl-dropdown-option-disabled {\r\n      color: $disabledText;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    &.pl-dropdown-option-align-left {\r\n      text-align: left\r\n    }\r\n\r\n    &.pl-dropdown-option-align-center {\r\n      text-align: center\r\n    }\r\n\r\n    &.pl-dropdown-option-align-right {\r\n      text-align: right\r\n    }\r\n\r\n    &.pl-dropdown-option-no-wrap {\r\n      white-space: nowrap;\r\n    }\r\n  }\r\n\r\n  .pl-dropdown-group {\r\n\r\n    .pl-dropdown-group-title {\r\n      font-size: 12px;\r\n      color: $ipc;\r\n      padding: 8px 12px;\r\n      margin-top: 4px;\r\n      border-bottom: solid 1px $ibl;\r\n\r\n      & > .pl-icon {\r\n        margin-right: 6px;\r\n      }\r\n    }\r\n\r\n    .pl-dropdown-group-content {\r\n      padding: 4px 0;\r\n    }\r\n\r\n    &.pl-dropdown-no-title:not(:last-child) {\r\n      border-bottom: solid 1px $ibc;\r\n    }\r\n\r\n  }\r\n}\r\n"
-      ],
-      "seq": 31
-    },
-    {
-      "name": "PlForm",
-      "codes": [
-        "@include theme {\r\n  .pl-form {\r\n    box-sizing: border-box;\r\n\r\n    .pl-form-item {\r\n      display: inline-flex;\r\n      margin-bottom: 20px;\r\n      box-sizing: border-box;\r\n\r\n      .pl-form-item-label {\r\n        padding-right: 8px;\r\n\r\n        .pl-tooltip-reference {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      .pl-form-item-body {\r\n        display: flex;\r\n        align-items: center;\r\n        flex: 1;\r\n        position: relative;\r\n\r\n        .pl-form-item-message {\r\n          position: absolute;\r\n          top: 100%;\r\n          left: 0;\r\n          color: $colorError;\r\n          font-size: 12px;\r\n          line-height: normal;\r\n          padding: 1px 0;\r\n\r\n          .pl-icon + span {\r\n            margin-left: 4px;\r\n          }\r\n        }\r\n      }\r\n\r\n      &.pl-form-item-block {\r\n        display: flex;\r\n      }\r\n\r\n      &.pl-form-item-required {\r\n        .pl-form-item-required-dot {\r\n          color: $colorError;\r\n          position: relative;\r\n          top: 2px;\r\n          right: 12px;\r\n          width: 0;\r\n          display: inline-block;\r\n        }\r\n      }\r\n\r\n      /*label align*/\r\n      &.pl-form-item-label-align-left {\r\n        .pl-form-item-label {\r\n          text-align: left\r\n        }\r\n      }\r\n\r\n      &.pl-form-item-label-align-center {\r\n        .pl-form-item-label {\r\n          text-align: center\r\n        }\r\n      }\r\n\r\n      &.pl-form-item-label-align-right {\r\n        .pl-form-item-label {\r\n          text-align: right\r\n        }\r\n      }\r\n\r\n      /*content align*/\r\n      &.pl-form-item-content-align-flex-start {\r\n        .pl-form-item-body {\r\n          justify-content: flex-start;\r\n        }\r\n      }\r\n\r\n      &.pl-form-item-content-align-flex-end {\r\n        .pl-form-item-body {\r\n          justify-content: flex-end;\r\n        }\r\n      }\r\n\r\n      &.pl-form-item-content-align-center {\r\n        .pl-form-item-body {\r\n          justify-content: center;\r\n        }\r\n      }\r\n\r\n      &.pl-form-item-content-align-space-between {\r\n        .pl-form-item-body {\r\n          justify-content: space-between;\r\n        }\r\n      }\r\n\r\n      &.pl-form-item-content-align-space-around {\r\n        .pl-form-item-body {\r\n          justify-content: space-around;\r\n        }\r\n      }\r\n\r\n      &.pl-form-item-content-align-space-evenly {\r\n        .pl-form-item-body {\r\n          justify-content: space-evenly;\r\n        }\r\n      }\r\n\r\n      /*line-height*/\r\n      @include sizeMixin(form-item) {\r\n        line-height: $value;\r\n        .pl-form-item-body {\r\n          min-height: $value;\r\n        }\r\n      }\r\n\r\n      &.pl-form-item-size-large {\r\n        font-size: 16px;\r\n      }\r\n\r\n      &.pl-form-item-size-normal {\r\n        font-size: 14px;\r\n      }\r\n\r\n      &.pl-form-item-size-mini {\r\n        font-size: 12px;\r\n      }\r\n    }\r\n\r\n    &:not(.pl-form-vertical-label) {\r\n      .pl-form-item {\r\n        flex-direction: row;\r\n      }\r\n    }\r\n\r\n    &.pl-form-vertical-label {\r\n      .pl-form-item {\r\n        flex-direction: column;\r\n\r\n        .pl-form-item-label {\r\n          text-align: left;\r\n          padding-left: 0 !important;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-form-column-1 {\r\n      display: inline-flex;\r\n      flex-direction: column;\r\n\r\n      .pl-form-item {\r\n        justify-content: flex-end;\r\n        position: relative;\r\n\r\n        .pl-form-item-label {\r\n          flex: 1;\r\n          white-space: nowrap;\r\n        }\r\n      }\r\n\r\n      &.pl-form-center-when-single-column {\r\n        width: 100% !important;\r\n        align-items: center;\r\n\r\n        &:not(.pl-form-vertical-label) {\r\n          .pl-form-item {\r\n            .pl-form-item-label {\r\n              position: absolute;\r\n              right: 100%;\r\n              top: 0;\r\n              white-space: nowrap;\r\n            }\r\n\r\n            .pl-form-item-body {\r\n              .pl-form-item-message {\r\n                left: 100% !important;\r\n                top: 0 !important;\r\n                white-space: nowrap;\r\n                padding-left: 8px;\r\n              }\r\n            }\r\n\r\n            /*line-height*/\r\n            @include sizeMixin(form-item) {\r\n              .pl-form-item-message {\r\n                line-height: $value !important;\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &:not(.pl-form-column-1) {\r\n      .pl-form-item-label {\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-form {\r\n    .pl-form-item-body {\r\n\r\n      .pl-slider, .pl-toggle {\r\n        align-self: center;\r\n      }\r\n\r\n      /*input*/\r\n      & > .pl-input, & > .pl-textarea {\r\n        flex: 1;\r\n        flex-shrink: 0;\r\n\r\n        .pl-input-inner, .pl-textarea-inner {\r\n          width: 100%;\r\n        }\r\n\r\n        &.pl-input-custom {\r\n          .pl-input-inner {\r\n            width: 100% !important;\r\n\r\n            input {\r\n              width: 100% !important;\r\n            }\r\n          }\r\n        }\r\n      }\r\n\r\n      /*button*/\r\n      & > .pl-button + .pl-button {\r\n        margin-left: 8px;\r\n      }\r\n\r\n      & > .pl-button-group {\r\n        & > .pl-button + .pl-button {\r\n          margin-left: 0;\r\n        }\r\n      }\r\n\r\n      /*checkbox and radio*/\r\n      & > .pl-checkbox-group, & > .pl-radio-group {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        align-items: center;\r\n        justify-content: inherit;\r\n\r\n        & > * {\r\n          flex-shrink: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 35
-    },
-    {
-      "name": "PlIcon",
-      "codes": [
-        "@include theme {\r\n    .pl-icon {\r\n\r\n        display: inline-block;\r\n        height: 1em;\r\n        width: 1em;\r\n        line-height: normal;\r\n\r\n        &.el-svg-icon {\r\n            vertical-align: -0.15em;\r\n\r\n            path {\r\n                fill: currentColor;\r\n            }\r\n        }\r\n\r\n        @include statusMixin(icon) {\r\n            color: $value;\r\n        }\r\n\r\n    }\r\n}"
-      ],
-      "seq": 37
-    },
-    {
-      "name": "PlImage",
-      "codes": [
-        ".pl-image-preview-service {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(black, 0.85);\r\n  color: white;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  .pl-image-preview-service-indicator {\r\n\r\n    position: absolute;\r\n    bottom: 80px;\r\n    left: 0;\r\n    right: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    user-select: none;\r\n\r\n    .pl-image-preview-service-indicator-item {\r\n      width: 16px;\r\n      height: 4px;\r\n      background-color: rgba(white, 0.25);\r\n\r\n      & + div {\r\n        margin-left: 8px;\r\n      }\r\n\r\n      &.pl-image-preview-service-indicator-item-active {\r\n        background-color: white;\r\n        width: 32px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-image-preview-service-button-group {\r\n    position: absolute;\r\n    bottom: 20px;\r\n    left: 0;\r\n    right: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    user-select: none;\r\n\r\n    .pl-image-preview-service-button {\r\n      height: 48px;\r\n      width: 48px;\r\n      background-color: rgba(white, 0.45);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin-right: 1px;\r\n      font-size: 24px;\r\n\r\n      &:first-child {\r\n        padding-left: 5px;\r\n        border-top-left-radius: 100px;\r\n        border-bottom-left-radius: 100px;\r\n      }\r\n\r\n      &:last-child {\r\n        padding-right: 5px;\r\n        border-top-right-radius: 100px;\r\n        border-bottom-right-radius: 100px;\r\n      }\r\n\r\n      &:hover {\r\n        background-color: rgba(black, 0.45);\r\n        cursor: pointer;\r\n      }\r\n    }\r\n  }\r\n\r\n  & > .pl-image-preview-service-img-wrapper {\r\n    & > div > img {\r\n      max-height: 70vh;\r\n      max-width: 90vw;\r\n      cursor: grab;\r\n      position: relative;\r\n      user-select: none;\r\n      transition: transform linear 0.1s;\r\n    }\r\n  }\r\n}\r\n\r\n@include theme {\r\n\r\n  .pl-image-preview-enter {\r\n    opacity: 0;\r\n\r\n    .pl-image-preview-service-img-wrapper {\r\n      transform: scale(0.25);\r\n    }\r\n\r\n    .pl-image-preview-service-button-group {\r\n      transform: translateY(200px);\r\n    }\r\n  }\r\n\r\n  .pl-image-preview-enter-active {\r\n    opacity: 1;\r\n\r\n    .pl-image-preview-service-img-wrapper {\r\n      transform: scale(1);\r\n    }\r\n\r\n    .pl-image-preview-service-button-group {\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n\r\n  .pl-image-preview-exit {\r\n    opacity: 1;\r\n  }\r\n\r\n  .pl-image-preview-exit-active {\r\n    opacity: 0;\r\n\r\n    .pl-image-preview-service-img-wrapper {\r\n      transform: scale(0.25);\r\n    }\r\n\r\n    .pl-image-preview-service-button-group {\r\n      transform: translateY(200px);\r\n    }\r\n  }\r\n\r\n  .pl-image-preview-enter-active, .pl-image-preview-exit-active {\r\n    transition: all 300ms linear;\r\n\r\n    .pl-image-preview-service-indicator {\r\n      transition: transform linear 300ms;\r\n\r\n      .pl-image-preview-service-indicator-item {\r\n        transition: all linear 300ms;\r\n      }\r\n    }\r\n\r\n    .pl-image-preview-service-button-group {\r\n      transition: transform linear 300ms;\r\n    }\r\n\r\n    .pl-image-preview-service-img-wrapper {\r\n      transition: transform $transition 300ms;\r\n    }\r\n  }\r\n\r\n  img.pl-image {\r\n    vertical-align: bottom;\r\n  }\r\n\r\n  div.pl-image {\r\n    vertical-align: bottom;\r\n    min-height: 30px;\r\n    min-width: 30px;\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    .pl-icon {\r\n      font-size: 36px;\r\n      color: $icc;\r\n    }\r\n\r\n    span {\r\n      color: $itc;\r\n      font-size: 12px;\r\n    }\r\n\r\n    &.pl-image-status-pending {\r\n      .pl-loading {\r\n        margin-bottom: 0;\r\n      }\r\n    }\r\n\r\n    &.pl-image-status-empty {\r\n      background-color: $disabled;\r\n\r\n      .pl-icon {\r\n        color: $disabledDeep;\r\n      }\r\n\r\n      span {\r\n        color: $disabledText;\r\n      }\r\n    }\r\n\r\n    &.pl-image-status-error {\r\n      background-color: rgba($colorError, 0.1);\r\n\r\n      .pl-icon {\r\n        color: $colorError;\r\n      }\r\n\r\n      span {\r\n        color: $colorError;\r\n      }\r\n    }\r\n\r\n    &.pl-image-status-pending {\r\n      background-color: rgba($colorPrimary, 0.1);\r\n\r\n      .pl-icon {\r\n        color: $colorPrimary;\r\n      }\r\n\r\n      span {\r\n        color: $colorPrimary;\r\n      }\r\n    }\r\n  }\r\n\r\n  img.pl-image-preview-on-click {\r\n    cursor: zoom-in;\r\n  }\r\n\r\n  .pl-image-uploader {\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    vertical-align: bottom;\r\n    user-select: none;\r\n    box-sizing: border-box;\r\n    position: relative;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n\r\n    & > img {\r\n      height: 100%;\r\n      width: 100%;\r\n    }\r\n\r\n    &, & .pl-icon, & span {\r\n      transition: all linear 300ms;\r\n    }\r\n\r\n    & > div {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n\r\n      & > .pl-icon {\r\n        font-size: 32px;\r\n      }\r\n\r\n      & > span {\r\n        font-size: 12px;\r\n        margin-top: 4px;\r\n      }\r\n    }\r\n\r\n    &.pl-image-uploader-status-empty {\r\n      border: dashed 2px $ibc;\r\n\r\n      .pl-icon {\r\n        color: $icc;\r\n      }\r\n\r\n      span {\r\n        color: $itc;\r\n      }\r\n\r\n      &:hover {\r\n        border-color: $colorPrimary;\r\n\r\n        .pl-icon, span {\r\n          color: $colorPrimary;\r\n        }\r\n      }\r\n\r\n      &:active {\r\n        background-color: rgba($colorPrimary, 0.1);\r\n      }\r\n    }\r\n\r\n    &.pl-image-uploader-status-fail {\r\n      .pl-image-uploader-fail {\r\n        background-color: rgba(black, 0.85);\r\n        color: white;\r\n      }\r\n    }\r\n\r\n    & > .pl-image-uploader-button-group {\r\n      bottom: 0;\r\n      top: initial;\r\n      left: 0;\r\n      right: 0;\r\n      height: 40px;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: stretch;\r\n      transition: all $transition 300ms;\r\n      transform: translateY(100%);\r\n\r\n      & > div {\r\n        flex: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background-color: rgba(#999, 0.65);\r\n        border-radius: 4px;\r\n        transform: scale(0.9);\r\n\r\n        &:hover {\r\n          background-color: rgba(black, 0.45);\r\n        }\r\n\r\n        &:active {\r\n          opacity: 0.75;\r\n        }\r\n\r\n        .pl-icon {\r\n          color: white;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-image-editable.pl-image-uploader-status-success {\r\n      &:hover > .pl-image-uploader-button-group {\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 38
-    },
-    {
-      "name": "PlInput",
-      "codes": [
-        "@include theme {\r\n  .pl-input, .pl-textarea {\r\n    display: inline-block;\r\n    color: $itc;\r\n    font-family: $font;\r\n    background-color: white;\r\n    vertical-align: baseline;\r\n\r\n    /*---------------------------------------public-------------------------------------------*/\r\n    .pl-input-inner, .pl-textarea-inner {\r\n      width: 180px;\r\n      padding: 0;\r\n      display: inline-block;\r\n      outline: none;\r\n      border: solid 1px $ibc;\r\n      box-sizing: border-box;\r\n      box-shadow: 0 0 0 0 transparent;\r\n      transition: all 150ms linear;\r\n      color: inherit;\r\n      font-family: inherit;\r\n\r\n      input, textarea, button {\r\n        color: inherit;\r\n        font-family: inherit;\r\n      }\r\n\r\n      input {\r\n        padding: 0;\r\n      }\r\n    }\r\n\r\n    .pl-input-custom-placeholder {\r\n      color: $ipc;\r\n      margin-left: 6px;\r\n    }\r\n\r\n    input, textarea {\r\n      &::placeholder {\r\n        color: $ipc;\r\n      }\r\n\r\n      &::-ms-clear {\r\n        display: none;\r\n      }\r\n\r\n      &::-webkit-outer-spin-button,\r\n      &::-webkit-inner-spin-button {\r\n        -webkit-appearance: none !important;\r\n        margin: 0;\r\n      }\r\n\r\n      &:-webkit-autofill {\r\n        background-color: white !important;\r\n        -webkit-transition: background-color 10000s cubic-bezier(1, -100, 1, -100) 0s !important;\r\n      }\r\n    }\r\n\r\n    &:not(.pl-input-disabled) {\r\n\r\n      &.pl-input-focus {\r\n        .pl-input-inner, .pl-textarea-inner {\r\n          border-color: $colorPrimary;\r\n          box-shadow: 0 0 0 2px rgba(18, 180, 165, 0.2);\r\n        }\r\n      }\r\n\r\n      .pl-input-inner, .pl-textarea-inner {\r\n        &:focus {\r\n          border-color: $colorPrimary;\r\n          box-shadow: 0 0 0 2px rgba(18, 180, 165, 0.2);\r\n        }\r\n      }\r\n\r\n      .pl-input-inner, .pl-textarea-inner {\r\n        &:hover {\r\n          border-color: $colorPrimary;\r\n        }\r\n      }\r\n    }\r\n\r\n    @include shapeMixin(input) {\r\n      .pl-input-inner, .pl-textarea-inner {\r\n        border-radius: $value;\r\n      }\r\n    }\r\n\r\n    @include sizeMixin(input) {\r\n      &.pl-input-size-large {\r\n\r\n        .pl-input-inner, .pl-textarea-inner, input {\r\n          font-size: 16px;\r\n        }\r\n\r\n        .pl-input-inner, .pl-textarea-inner {\r\n          padding-left: 12px;\r\n          padding-right: 12px;\r\n        }\r\n\r\n        &.pl-input-shape-round {\r\n          .pl-input-inner, .pl-textarea-inner {\r\n            padding-left: 24px;\r\n            padding-right: 24px;\r\n          }\r\n        }\r\n      }\r\n      &.pl-input-size-normal {\r\n\r\n        .pl-input-inner, .pl-textarea-inner, input {\r\n          font-size: 14px;\r\n        }\r\n\r\n        .pl-input-inner, .pl-textarea-inner {\r\n          padding-left: 10px;\r\n          padding-right: 10px;\r\n        }\r\n\r\n        &.pl-input-shape-round {\r\n          .pl-input-inner, .pl-textarea-inner {\r\n            padding-left: 20px;\r\n            padding-right: 20px;\r\n          }\r\n        }\r\n      }\r\n      &.pl-input-size-mini {\r\n\r\n        .pl-input-inner, .pl-textarea-inner, input {\r\n          font-size: 12px;\r\n        }\r\n\r\n        .pl-input-inner, .pl-textarea-inner {\r\n          padding-left: 8px;\r\n          padding-right: 8px;\r\n        }\r\n\r\n        &.pl-input-shape-round {\r\n          .pl-input-inner, .pl-textarea-inner {\r\n            padding-left: 16px;\r\n            padding-right: 16px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    @include statusMixin(input) {\r\n      &:not(.pl-input-disabled) {\r\n\r\n        &.pl-input-focus {\r\n          .pl-input-inner, .pl-textarea-inner {\r\n            box-shadow: 0 0 0 2px mix($value, white, 20%);\r\n          }\r\n        }\r\n\r\n        .pl-input-inner, .pl-textarea-inner {\r\n          border-color: $value;\r\n          color: $value;\r\n          background-color: mix($value, white, 5%);\r\n\r\n          &:focus {\r\n            box-shadow: 0 0 0 2px mix($value, white, 20%);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-input-disabled {\r\n      .pl-input-inner, .pl-textarea-inner {\r\n        background-color: $disabled;\r\n        cursor: not-allowed;\r\n        color: $disabledText;\r\n      }\r\n    }\r\n\r\n    &.pl-input-block {\r\n      width: 100%;\r\n      display: block;\r\n\r\n      .pl-input-inner, .pl-textarea-inner {\r\n        width: 100%;\r\n      }\r\n\r\n    }\r\n\r\n    &.pl-input-fill-group {\r\n      flex: 1;\r\n\r\n      & > .pl-input-inner {\r\n        width: 100% !important;\r\n      }\r\n\r\n      &.pl-input-custom {\r\n        .pl-input-inner, .pl-input-custom-inner, input {\r\n          width: 100% !important;\r\n        }\r\n      }\r\n    }\r\n\r\n\r\n    /*align*/\r\n    &.pl-input-align-left {\r\n      .pl-input-inner, input {\r\n        text-align: left\r\n      }\r\n    }\r\n\r\n    &.pl-input-align-center {\r\n      .pl-input-inner, input {\r\n        text-align: center;\r\n      }\r\n    }\r\n\r\n    &.pl-input-align-right {\r\n      .pl-input-inner, input {\r\n        text-align: right;\r\n      }\r\n    }\r\n\r\n    /*---------------------------------------specific size-------------------------------------------*/\r\n\r\n    &.pl-input {\r\n      @include sizeMixin(input) {\r\n        .pl-input-inner {\r\n          height: $value;\r\n        }\r\n        div.pl-input-inner {\r\n          line-height: $value - 2;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-textarea {\r\n      position: relative;\r\n      display: inline-block;\r\n\r\n      .pl-textarea-inner {\r\n        float: left;\r\n      }\r\n\r\n      @include sizeMixin(input) {\r\n        &.pl-input-size-large {\r\n          .pl-textarea-inner {\r\n            padding-top: 12px;\r\n            padding-bottom: 12px;\r\n          }\r\n        }\r\n        &.pl-input-size-normal {\r\n          .pl-textarea-inner {\r\n            padding-top: 8px;\r\n            padding-bottom: 8px;\r\n          }\r\n        }\r\n        &.pl-input-size-mini {\r\n          .pl-textarea-inner {\r\n            padding-top: 4px;\r\n            padding-bottom: 4px;\r\n          }\r\n        }\r\n      }\r\n\r\n      .pl-textarea-hidden {\r\n        position: absolute;\r\n        pointer-events: none;\r\n        opacity: 0;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  /*---------------------------------------input suffix prefix-------------------------------------------*/\r\n  .pl-input {\r\n    position: relative;\r\n\r\n    .pl-input-suffix-icon, .pl-input-prefix-icon {\r\n      user-select: none;\r\n      cursor: pointer;\r\n      position: absolute;\r\n      top: 0;\r\n      bottom: 0;\r\n      box-sizing: border-box;\r\n      text-align: center;\r\n      color: $icc;\r\n      font-size: 12px;\r\n      transition: all 300ms linear;\r\n      z-index: 2;\r\n\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .pl-input-suffix-icon {\r\n      right: 2px;\r\n    }\r\n\r\n    .pl-input-prefix-icon {\r\n      left: 2px;\r\n    }\r\n\r\n    @include sizeMixin(input) {\r\n\r\n      &.pl-input-suffix-padding {\r\n        &.pl-input-size-large {\r\n          .pl-input-inner {\r\n            padding-right: #{12px*3};\r\n          }\r\n\r\n          .pl-input-suffix-icon {\r\n            width: #{12px*3};\r\n          }\r\n        }\r\n\r\n        &.pl-input-size-normal {\r\n          .pl-input-inner {\r\n            padding-right: #{10px*3};\r\n          }\r\n\r\n          .pl-input-suffix-icon {\r\n            width: #{10px*3};\r\n          }\r\n        }\r\n\r\n        &.pl-input-size-mini {\r\n          .pl-input-inner {\r\n            padding-right: #{8px*3};\r\n          }\r\n\r\n          .pl-input-suffix-icon {\r\n            width: #{8px*3};\r\n          }\r\n        }\r\n      }\r\n      &.pl-input-prefix-padding {\r\n        &.pl-input-size-large {\r\n          .pl-input-inner {\r\n            padding-left: #{12px*3};\r\n          }\r\n\r\n          .pl-input-prefix-icon {\r\n            width: #{12px*3};\r\n          }\r\n        }\r\n\r\n        &.pl-input-size-normal {\r\n          .pl-input-inner {\r\n            padding-left: #{10px*3};\r\n          }\r\n\r\n          .pl-input-prefix-icon {\r\n            width: #{10px*3};\r\n          }\r\n        }\r\n\r\n        &.pl-input-size-mini {\r\n          .pl-input-inner {\r\n            padding-left: #{8px*3};\r\n          }\r\n\r\n          .pl-input-prefix-icon {\r\n            width: #{8px*3};\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n\r\n    &.pl-input-clear {\r\n      &:not(.pl-input-suffix) {\r\n        &.pl-input-empty {\r\n          .pl-input-clear-icon {\r\n            opacity: 0;\r\n            pointer-events: none;\r\n          }\r\n        }\r\n      }\r\n\r\n      &.pl-input-suffix {\r\n        .pl-input-clear-icon {\r\n          opacity: 0;\r\n          pointer-events: none;\r\n        }\r\n\r\n        &:not(.pl-input-empty) {\r\n          &:hover:not(.pl-input-not-editable) {\r\n            .pl-input-clear-icon {\r\n              opacity: 1;\r\n              pointer-events: auto;\r\n            }\r\n\r\n            .pl-input-suffix-icon:not(.pl-input-clear-icon) {\r\n              opacity: 0;\r\n              pointer-events: none;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .pl-loading {\r\n      cursor: not-allowed;\r\n\r\n      &:before {\r\n        position: absolute;\r\n        top: 2px;\r\n        bottom: 2px;\r\n        left: 2px;\r\n        right: 2px;\r\n        background-color: white;\r\n        content: '';\r\n      }\r\n    }\r\n\r\n    .pl-input-inner-hidden {\r\n      position: fixed;\r\n      float: left;\r\n      z-index: -999;\r\n      pointer-events: none;\r\n      opacity: 0;\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  .pl-input-container {\r\n    width: 100%;\r\n    display: table;\r\n\r\n    .pl-input-prepend, .pl-input-append {\r\n      background-color: #f5f7fa;\r\n      color: $itc;\r\n      vertical-align: baseline;\r\n      display: table-cell;\r\n      position: relative;\r\n      border: 1px solid #dcdfe6;\r\n      border-radius: 2px;\r\n      padding: 0 12px;\r\n      overflow: hidden;\r\n\r\n      width: 1px;\r\n      white-space: nowrap;\r\n\r\n      &.pl-input-prepend {\r\n        border-right: none;\r\n      }\r\n\r\n      &.pl-input-append {\r\n        border-left: none;\r\n      }\r\n\r\n      & > .pl-input, & > .pl-button {\r\n        display: inline-block;\r\n        margin: -1px -13px -1px -12px;\r\n      }\r\n\r\n      & > .pl-input {\r\n        .pl-input-inner {\r\n          border: none !important;\r\n        }\r\n      }\r\n    }\r\n\r\n    .pl-input {\r\n      display: table-cell;\r\n      position: relative;\r\n      z-index: 1;\r\n\r\n      .pl-input-inner {\r\n        width: 100%;\r\n      }\r\n    }\r\n\r\n    & > *:not(:last-child):not(:first-child) {\r\n      border-radius: 0;\r\n\r\n      &.pl-input {\r\n        .pl-input-inner {\r\n          border-radius: 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    & > *:first-child {\r\n      border-top-right-radius: 0;\r\n      border-bottom-right-radius: 0;\r\n\r\n      &.pl-input {\r\n        .pl-input-inner {\r\n          border-top-right-radius: 0;\r\n          border-bottom-right-radius: 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    & > *:last-child {\r\n      border-top-left-radius: 0;\r\n      border-bottom-left-radius: 0;\r\n\r\n      &.pl-input {\r\n        .pl-input-inner {\r\n          border-top-left-radius: 0;\r\n          border-bottom-left-radius: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-input-custom {\r\n    .pl-input-inner {\r\n      width: auto !important;\r\n    }\r\n\r\n    .pl-input-custom-inner {\r\n      display: flex;\r\n      align-content: stretch;\r\n      height: 100%;\r\n\r\n      & > span {\r\n        color: $icc;\r\n      }\r\n\r\n      .pl-input-custom-inner-input {\r\n        border: none;\r\n        outline: none;\r\n        width: 90px;\r\n        height: 100%;\r\n        background: transparent;\r\n      }\r\n\r\n      &[range=true] {\r\n        .pl-input-custom-inner-input {\r\n          text-align: center;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-form-item-content {\r\n    .pl-input-custom {\r\n      .pl-input-custom-inner {\r\n        display: flex;\r\n        align-items: center;\r\n\r\n        .pl-input-custom-inner-input {\r\n          flex: 1;\r\n          font-size: inherit;\r\n          color: inherit;\r\n        }\r\n      }\r\n\r\n      &.pl-input-disabled {\r\n        .pl-input-custom-inner-input {\r\n          cursor: not-allowed;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-input {\r\n    &.pl-input-tags {\r\n      user-select: none;\r\n      vertical-align: top;\r\n\r\n      .pl-input-inner {\r\n        padding-left: 3px !important;\r\n        height: auto !important;\r\n        line-height: normal !important;\r\n        cursor: pointer;\r\n      }\r\n\r\n      .pl-input-inner-tags {\r\n        .pl-input-inner-tag-item {\r\n          display: inline-block;\r\n          font-size: 12px;\r\n          border: solid 1px $ibl;\r\n          background-color: #fafafa;\r\n          padding: 0 6px;\r\n          border-radius: 2px;\r\n          margin: 3px;\r\n          color: inherit;\r\n\r\n          span + .pl-icon {\r\n            margin-left: 3px;\r\n            color: $icc;\r\n          }\r\n\r\n          &.pl-input-inner-tag-item-takeover {\r\n            display: inline-block;\r\n            padding: 0 0;\r\n            margin-left: 0;\r\n            margin-right: 0;\r\n            width: 4px;\r\n            opacity: 0;\r\n          }\r\n        }\r\n      }\r\n\r\n      @include sizeMixin(input) {\r\n        .pl-input-inner {\r\n          min-height: $value;\r\n\r\n          .pl-input-inner-tags {\r\n            .pl-input-inner-tag-item {\r\n              line-height: $value - 9;\r\n            }\r\n          }\r\n        }\r\n      }\r\n\r\n      &.pl-input-disabled {\r\n        .pl-input-inner-tag-item {\r\n          cursor: not-allowed;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 40
-    },
-    {
-      "name": "PlList",
-      "codes": [
-        ".pl-list {\r\n    position: relative;\r\n}"
-      ],
-      "seq": 41
-    },
-    {
-      "name": "PlLoading",
-      "codes": [
-        "@include theme {\r\n    .pl-loading {\r\n        @include statusMixin(loading) {\r\n            color: $value;\r\n        }\r\n    }\r\n}"
-      ],
-      "seq": 42
-    },
-    {
-      "name": "PlLoadingMask",
-      "codes": [
-        "@include theme {\r\n  .pl-loading-mask {\r\n    color: $colorPrimary;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(255, 255, 255, 0.5);\r\n    transition: all linear 300ms;\r\n    transform-origin: center center;\r\n    cursor: progress;\r\n    pointer-events: auto;\r\n\r\n    .pl-loading {\r\n      margin-bottom: 20px;\r\n      font-size: 32px;\r\n\r\n      & + span {\r\n        font-size: 14px;\r\n      }\r\n    }\r\n\r\n    &.pl-loading-mask-unlock {\r\n      pointer-events: none;\r\n    }\r\n\r\n    &.pl-loading-mask-fixed-position {\r\n      position: fixed;\r\n    }\r\n  }\r\n}\r\n\r\n.pl-transition-loading-mask-enter-active, .pl-transition-loading-mask-leave-active {\r\n  opacity: 1;\r\n}\r\n\r\n.pl-transition-loading-mask-enter-from, .pl-transition-loading-mask-leave-to {\r\n  opacity: 0;\r\n}"
-      ],
-      "seq": 43
-    },
-    {
-      "name": "PlNumber",
-      "codes": [
-        "@include theme {\r\n\r\n  .pl-number {\r\n    display: inline-block;\r\n    width: initial;\r\n\r\n    .pl-input-inner {\r\n      position: relative;\r\n      padding-top: 1px;\r\n      padding-bottom: 1px;\r\n      display: block;\r\n\r\n      input {\r\n        width: 100%;\r\n        height: 100%;\r\n        border: none;\r\n        outline: none;\r\n        float: left;\r\n        color: $itc;\r\n        font-size: inherit;\r\n        box-sizing: border-box;\r\n\r\n        &::placeholder {\r\n          color: $ipc;\r\n        }\r\n\r\n        &::-ms-clear {\r\n          display: none;\r\n        }\r\n\r\n        &::-webkit-outer-spin-button,\r\n        &::-webkit-inner-spin-button {\r\n          -webkit-appearance: none !important;\r\n          margin: 0;\r\n        }\r\n\r\n        &:-webkit-autofill {\r\n          background-color: white !important;\r\n        }\r\n      }\r\n\r\n      .pl-number-prepend-button, .pl-number-append-button {\r\n        position: absolute;\r\n        top: 1px;\r\n        bottom: 1px;\r\n        width: 30px;\r\n        text-align: center;\r\n        background-color: #f5f7fa;\r\n        cursor: pointer;\r\n        outline: none;\r\n        user-select: none;\r\n        transition: background-color linear 150ms;\r\n\r\n        .pl-icon {\r\n          vertical-align: 0;\r\n        }\r\n\r\n        &.pl-number-prepend-button {\r\n          left: 1px;\r\n          border-right: solid 1px #dcdfe6;\r\n        }\r\n\r\n        &.pl-number-append-button {\r\n          right: 1px;\r\n          border-left: solid 1px #dcdfe6;\r\n        }\r\n\r\n        &:active {\r\n          background-color: #e1e1e1;\r\n        }\r\n      }\r\n    }\r\n\r\n    @include shapeMixin(input) {\r\n      .pl-number-prepend-button {\r\n        border-top-left-radius: $value;\r\n        border-bottom-left-radius: $value;\r\n      }\r\n      .pl-number-append-button {\r\n        border-top-right-radius: $value;\r\n        border-bottom-right-radius: $value;\r\n      }\r\n    }\r\n    @include statusMixin(input) {\r\n      .pl-number-prepend-button, .pl-number-append-button {\r\n        border-color: $value !important;\r\n        background-color: mix($value, white, 10%);\r\n      }\r\n      input {\r\n        background-color: mix($value, white, 5%);\r\n        color: $value;\r\n      }\r\n    }\r\n\r\n    &:not(.pl-number-hide-button) {\r\n      .pl-input-inner {\r\n        padding-left: 30px !important;\r\n        padding-right: 30px !important;\r\n\r\n        input {\r\n          text-align: center !important;\r\n          padding: 0 12px;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-number-disabled {\r\n      input {\r\n        background-color: $disabled;\r\n        cursor: not-allowed;\r\n        color: #c0c4cc;\r\n      }\r\n\r\n      .pl-number-prepend-button, .pl-number-append-button {\r\n        background-color: $disabled;\r\n        cursor: not-allowed;\r\n        color: $disabledText;\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 44
-    },
-    {
-      "name": "PlPagination",
-      "codes": [
-        "@include theme {\r\n  .pl-pagination {\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    color: $itc;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n\r\n    .pl-icon {\r\n      color: $icc;\r\n    }\r\n\r\n    & > * {\r\n      display: inline-block;\r\n    }\r\n\r\n    .pl-number {\r\n      padding: 0 8px;\r\n\r\n      input {\r\n        text-align: center;\r\n      }\r\n    }\r\n\r\n\r\n    .pl-pagination-jumper {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n\r\n    .pl-pagination-pager {\r\n      margin: 0;\r\n      padding: 0;\r\n      list-style: none;\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n\r\n    .pl-pagination-pager-button {\r\n      text-align: center;\r\n      cursor: pointer;\r\n      transition: all 300ms $transition;\r\n      user-select: none;\r\n      border: solid 1px $ibc;\r\n      box-sizing: border-box;\r\n\r\n      &:hover {\r\n        background-color: mix(white, $colorPrimary, 90%);\r\n      }\r\n\r\n      &:active {\r\n        background-color: mix(white, $colorPrimary, 75%);\r\n      }\r\n\r\n      &.pl-pagination-pager-button-active {\r\n        background-color: $colorPrimary;\r\n        border-color: $colorPrimary;\r\n        color: white;\r\n      }\r\n    }\r\n\r\n    .pl-pagination-blank {\r\n      flex: 1;\r\n    }\r\n\r\n    .pl-pagination-total, .pl-pagination-loading {\r\n      padding: 0 12px;\r\n    }\r\n\r\n    & > *, & > .pl-pagination-pager {\r\n      margin-right: 8px;\r\n    }\r\n\r\n    .pl-pagination-pager {\r\n      .pl-pagination-pager-button:not(:last-child) {\r\n        margin-right: 8px;\r\n      }\r\n    }\r\n\r\n    @include sizeMixin(pagination) {\r\n      .pl-pagination-pager, .pl-pagination-prev, .pl-pagination-next, .pl-pagination-blank, .pl-pagination-pager-button {\r\n        height: $value;\r\n        line-height: $value;\r\n\r\n        &.pl-pagination-pager-button {\r\n          padding: 0 #{$value - 20};\r\n          min-width: $value;\r\n          display: flex;\r\n          align-items: center;\r\n\r\n          & > * {\r\n            flex-grow: 0;\r\n            flex-shrink: 0;\r\n          }\r\n        }\r\n      }\r\n      &.pl-pagination-size-large {\r\n        font-size: 16px;\r\n      }\r\n      &.pl-pagination-size-normal {\r\n        font-size: 14px;\r\n      }\r\n      &.pl-pagination-size-mini {\r\n        font-size: 12px;\r\n      }\r\n    }\r\n\r\n    @include shapeMixin(pagination) {\r\n      .pl-pagination-pager-button {\r\n        border-radius: $value;\r\n      }\r\n    }\r\n\r\n    &.pl-pagination-disabled {\r\n      .pl-pagination-pager-button {\r\n        background-color: $disabled;\r\n        color: $disabledText;\r\n        cursor: not-allowed;\r\n\r\n        &.pl-pagination-pager-button-active {\r\n          background-color: $disabledDeep;\r\n          border-color: $disabledDeep;\r\n          color: white;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 45
-    },
-    {
-      "name": "PlPopper",
-      "codes": [
-        "@include theme {\r\n\r\n  /*---------------------------------------popper start-------------------------------------------*/\r\n\r\n  .pl-popper {\r\n    position: fixed;\r\n\r\n    .plain-popper-content {\r\n      border-radius: 2px;\r\n      pointer-events: none !important;\r\n      background-color: white;\r\n\r\n      //background-color: black;\r\n      //color: white;\r\n      //height: 120px;\r\n\r\n      .pl-popper-title {\r\n        min-height: 32px;\r\n        margin: 0;\r\n        padding: 5px 16px 4px;\r\n        color: rgba(0, 0, 0, .85);\r\n        font-weight: 500;\r\n        border-bottom: 1px solid #f0f0f0;\r\n        font-size: 14px;\r\n        box-sizing: border-box;\r\n      }\r\n\r\n      .pl-popper-content-inner {\r\n        color: rgba(0, 0, 0, .85);\r\n        font-size: 12px;\r\n        padding: 4px 16px;\r\n        box-sizing: border-box;\r\n\r\n        p {\r\n          margin: 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-popper-no-content-padding {\r\n      .pl-popper-content-inner {\r\n        padding-left: 0;\r\n        padding-right: 0;\r\n      }\r\n    }\r\n\r\n    /*box-shadow*/\r\n    &.plain-popper {\r\n      &[direction=top] {\r\n        .plain-popper-content {\r\n          box-shadow: 0 -1px 10px 2px rgba(0, 0, 0, 0.15);\r\n        }\r\n      }\r\n\r\n      &[direction=bottom] {\r\n        .plain-popper-content {\r\n          box-shadow: 0 1px 10px 2px rgba(0, 0, 0, 0.15);\r\n        }\r\n      }\r\n\r\n      &[direction=left] {\r\n        .plain-popper-content {\r\n          box-shadow: -1px 0 10px 2px rgba(0, 0, 0, 0.15);\r\n        }\r\n      }\r\n\r\n      &[direction=right] {\r\n        .plain-popper-content {\r\n          box-shadow: 1px 0 10px 2px rgba(0, 0, 0, 0.15);\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-popper-show {\r\n      .plain-popper-content {\r\n        pointer-events: auto !important;\r\n      }\r\n    }\r\n\r\n    &:not(.pl-popper-show) {\r\n      .plain-popper-content {\r\n        box-shadow: none;\r\n      }\r\n\r\n      &:not(.pl-popper-open) {\r\n        .plain-popper-content {\r\n          transition: none !important;\r\n        }\r\n      }\r\n    }\r\n\r\n    /*&:not(.pl-popper-ready) {\r\n      opacity: 0;\r\n      pointer-events: none;\r\n    }*/\r\n\r\n    &:not(.pl-popper-show-arrow) {\r\n      .plain-popper-arrow {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    /*---------------------------------------transition-------------------------------------------*/\r\n\r\n    /*fade*/\r\n\r\n    &.pl-transition-fade {\r\n      .plain-popper-content {\r\n        transition: opacity 150ms linear;\r\n        opacity: 0;\r\n      }\r\n\r\n      &.pl-popper-show {\r\n        .plain-popper-content {\r\n          opacity: 1;\r\n        }\r\n      }\r\n    }\r\n\r\n    /*scale*/\r\n\r\n    &.pl-transition-scale {\r\n      .plain-popper-content {\r\n        transition: all 200ms $transitionFlexible;\r\n        transform: scale(0.5);\r\n        opacity: 0;\r\n      }\r\n\r\n      &.pl-popper-show {\r\n        .plain-popper-content {\r\n          transform: scale(1);\r\n          opacity: 1;\r\n        }\r\n      }\r\n    }\r\n\r\n    /*scale-y*/\r\n\r\n    &.pl-transition-scale-y {\r\n      .plain-popper-content {\r\n        transition: all 300ms $transition;\r\n\r\n        transform: scaleY(0);\r\n      }\r\n\r\n      &.pl-popper-show {\r\n        .plain-popper-content {\r\n          transform: scaleY(1);\r\n        }\r\n      }\r\n    }\r\n\r\n    /*drop*/\r\n\r\n    &.pl-transition-popper-drop {\r\n\r\n      .plain-popper-content {\r\n        transition: all 200ms $transition2;\r\n        opacity: 0;\r\n      }\r\n\r\n      $duration: 60%;\r\n\r\n      &.plain-popper[direction=top] {\r\n        .plain-popper-content {\r\n          transform: translate3d(0, $duration, 0);\r\n        }\r\n      }\r\n\r\n      &.plain-popper[direction=bottom] {\r\n        .plain-popper-content {\r\n          transform: translate3d(0, -$duration, 0);\r\n        }\r\n      }\r\n\r\n      &.plain-popper[direction=left] {\r\n        .plain-popper-content {\r\n          transform: translate3d($duration, 0, 0);\r\n        }\r\n      }\r\n\r\n      &.plain-popper[direction=right] {\r\n        .plain-popper-content {\r\n          transform: translate3d(-$duration, 0, 0);\r\n        }\r\n      }\r\n\r\n      &.pl-popper-show {\r\n        &.plain-popper .plain-popper-content {\r\n          transform: translate3d(0, 0, 0);\r\n          opacity: 1;\r\n        }\r\n      }\r\n\r\n    }\r\n\r\n  }\r\n}"
-      ],
-      "seq": 46
-    },
-    {
-      "name": "PlProgressBar",
-      "codes": [
-        "@include theme {\r\n    .pl-progress-bar {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        vertical-align: middle;\r\n\r\n        .pl-progress-bar-content {\r\n            display: inline-block;\r\n            width: 50px;\r\n            text-align: left;\r\n            font-size: 14px;\r\n            padding: 0 6px;\r\n\r\n            .pl-icon {\r\n                vertical-align: -0.1em;\r\n            }\r\n        }\r\n\r\n        .pl-progress-bar-outer {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            overflow: hidden;\r\n\r\n            .pl-progress-bar-inner {\r\n                height: 100%;\r\n                display: inline-flex;\r\n                align-items: center;\r\n                justify-content: flex-end;\r\n\r\n                transition: all $transition 300ms;\r\n\r\n                .pl-progress-bar-content {\r\n                    text-align: right;\r\n\r\n                    span {\r\n                        color: white;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}"
-      ],
-      "seq": 47
-    },
-    {
-      "name": "PlProgressCircle",
-      "codes": [
-        "@include theme {\r\n    .pl-progress-circle {\r\n        position: relative;\r\n        display: inline-block;\r\n        vertical-align: middle;\r\n        border-radius: 1000px;\r\n\r\n        & > svg > path {\r\n            transform-origin: center center;\r\n        }\r\n\r\n        .pl-progress-circle-label {\r\n            height: 100%;\r\n            width: 100%;\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n\r\n            .pl-icon {\r\n                font-size: 24px;\r\n            }\r\n        }\r\n\r\n        @keyframes path-animate {\r\n            from {\r\n                transform: rotate(0deg);\r\n            }\r\n            to {\r\n                transform: rotate(360deg);\r\n            }\r\n        }\r\n\r\n        &.pl-progress-circle-loading {\r\n            & > svg {\r\n                animation: path-animate 15000ms linear infinite;\r\n\r\n                & > path {\r\n                    animation: path-animate 1500ms linear infinite;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}"
-      ],
-      "seq": 48
-    },
-    {
-      "name": "PlProgressMini",
-      "codes": [
-        "@include theme {\r\n    .pl-progress-mini {\r\n        vertical-align: middle;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        overflow: hidden;\r\n\r\n        svg {\r\n            flex-shrink: 0;\r\n            width: 200%;\r\n            height: 200%;\r\n        }\r\n\r\n        &.pl-progress-mini-round {\r\n            border-radius: 1000px;\r\n        }\r\n    }\r\n}"
-      ],
-      "seq": 49
-    },
-    {
-      "name": "PlRadio",
-      "codes": [
-        "@include theme {\r\n  .pl-radio {\r\n    @include public-style;\r\n    display: inline-block;\r\n    outline: none;\r\n    font-size: 14px;\r\n    cursor: pointer;\r\n    user-select: none;\r\n\r\n    .plain-click-node {\r\n      display: inline-block;\r\n\r\n      width: 1.1em;\r\n      height: 1.1em;\r\n      border-radius: 100px;\r\n      vertical-align: -0.1em;\r\n\r\n      .pl-radio-inner {\r\n        transition: all 150ms linear;\r\n        float: left;\r\n      }\r\n\r\n      & + .pl-radio-label {\r\n        margin-left: 0.5em;\r\n      }\r\n    }\r\n\r\n    .pl-radio-label {\r\n      display: inline-block;\r\n    }\r\n\r\n    @include statusMixin(radio) {\r\n      .plain-click-node {\r\n        color: $ipc;\r\n\r\n        &:after {\r\n          border-color: $value;\r\n        }\r\n      }\r\n      &.pl-radio-checked {\r\n        .pl-radio-label {\r\n          color: $value;\r\n        }\r\n\r\n        .pl-radio-inner {\r\n          color: $value;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-radio-size-large {\r\n      font-size: 16px;\r\n    }\r\n\r\n    &.pl-radio-size-normal {\r\n      font-size: 14px;\r\n    }\r\n\r\n    &.pl-radio-size-mini {\r\n      font-size: 12px;\r\n    }\r\n\r\n    &:focus {\r\n      .pl-radio-label {\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n\r\n    &.pl-radio-disabled {\r\n      cursor: not-allowed;\r\n\r\n      .pl-radio-label {\r\n        color: $disabledText !important;\r\n      }\r\n\r\n      .pl-radio-inner {\r\n        border-color: currentColor !important;\r\n        background-color: $disabled !important;\r\n        color: $disabledText !important;\r\n      }\r\n    }\r\n\r\n  }\r\n\r\n  .pl-radio-group {\r\n    width: 100%;\r\n  }\r\n}"
-      ],
-      "seq": 50
-    },
-    {
-      "name": "PlRadioInner",
-      "codes": [
-        ".pl-radio-inner {\r\n\r\n  width: 1.1em;\r\n  height: 1.1em;\r\n\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n  border-color: currentColor;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  border-radius: 100px;\r\n\r\n  circle {\r\n    fill: currentColor;\r\n    stroke: currentColor;\r\n  }\r\n}"
-      ],
-      "seq": 52
-    },
-    {
-      "name": "PlRate",
-      "codes": [
-        "@include theme {\r\n  .pl-rate {\r\n    position: relative;\r\n    display: inline-block;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n    vertical-align: text-bottom;\r\n\r\n    .pl-rate-active {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      bottom: 0;\r\n    }\r\n\r\n    @include statusMixin(rate) {\r\n      color: $value;\r\n    }\r\n\r\n    &.pl-rate-disabled {\r\n      color: $disabledText !important;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    &.pl-rate-size-min {\r\n      font-size: 14px;\r\n    }\r\n\r\n    &.pl-rate-size-normal {\r\n      font-size: 16px;\r\n    }\r\n\r\n    &.pl-rate-size-large {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 53
-    },
-    {
-      "name": "PlRoot",
-      "codes": [
-        "html{line-height:1.4;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.515;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\r\n$transition: ease;\r\n\r\n/*---------------------------------------scale-------------------------------------------*/\r\n\r\n.pl-transition-scale-enter {\r\n    opacity: 0;\r\n    transform: scale(0.75);\r\n}\r\n\r\n.pl-transition-scale-enter-active {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n}\r\n\r\n.pl-transition-scale-exit {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n}\r\n\r\n.pl-transition-scale-exit-active {\r\n    opacity: 0;\r\n    transform: scale(0.75);\r\n}\r\n\r\n.pl-transition-scale-enter-active, .pl-transition-scale-exit-active {\r\n    transition: opacity 300ms linear, transform 300ms $transition;\r\n}\r\n\r\n/*---------------------------------------scale-y-------------------------------------------*/\r\n\r\n.pl-transition-scale-y-enter {\r\n    transform: scaleY(0);\r\n    opacity: 0;\r\n}\r\n\r\n.pl-transition-scale-y-enter-active {\r\n    transform: scaleY(1);\r\n    opacity: 1;\r\n}\r\n\r\n.pl-transition-scale-y-exit {\r\n    transform: scaleY(1);\r\n    opacity: 1;\r\n}\r\n\r\n.pl-transition-scale-y-exit-active {\r\n    transform: scaleY(0);\r\n    opacity: 0;\r\n}\r\n\r\n.pl-transition-scale-y-enter-active, .pl-transition-scale-y-exit-active {\r\n    transform-origin: top;\r\n    transition: opacity 300ms linear, transform 300ms $transition;\r\n}\r\n\r\n/*---------------------------------------fade-------------------------------------------*/\r\n\r\n.pl-transition-fade-enter {\r\n    opacity: 0;\r\n}\r\n\r\n.pl-transition-fade-enter-active {\r\n    opacity: 1;\r\n}\r\n\r\n.pl-transition-fade-exit {\r\n    opacity: 1;\r\n}\r\n\r\n.pl-transition-fade-exit-active {\r\n    opacity: 0;\r\n}\r\n\r\n.pl-transition-fade-enter-active, .pl-transition-fade-exit-active {\r\n    transition: opacity 300ms linear;\r\n}\r\n\r\n/*---------------------------------------slider-------------------------------------------*/\r\n\r\n[direction=horizontal] {\r\n\r\n    /*horizontal next*/\r\n    &.pl-transition-slide-next-enter {\r\n        transform: translate3d(100%, 0, 0);\r\n    }\r\n\r\n    &.pl-transition-slide-next-enter-active {\r\n        transform: translate3d(0, 0, 0);\r\n        transition: transform 150ms linear;\r\n    }\r\n\r\n    /*horizontal prev*/\r\n    &.pl-transition-slide-prev-enter {\r\n        transform: translate3d(-100%, 0, 0);\r\n    }\r\n\r\n    &.pl-transition-slide-prev-enter-active {\r\n        transform: translate3d(0, 0, 0);\r\n        transition: transform 150ms linear;\r\n    }\r\n}\r\n\r\n[direction=vertical] {\r\n\r\n    /*vertical next*/\r\n    &.pl-transition-slide-next-enter {\r\n        transform: translate3d(0, 100%, 0);\r\n    }\r\n\r\n    &.pl-transition-slide-next-enter-active {\r\n        transform: translate3d(0, 0, 0);\r\n    }\r\n\r\n    /*horizontal prev*/\r\n    &.pl-transition-slide-prev-enter {\r\n        transform: translate3d(0, -100%, 0);\r\n    }\r\n\r\n    &.pl-transition-slide-prev-enter-active {\r\n        transform: translate3d(0, 0, 0);\r\n        transition: transform 150ms linear;\r\n    }\r\n}\r\n\r\n.pl-collapse-transition {\r\n    transition: 0.3s height linear, 0.3s padding-top linear, 0.3s padding-bottom linear;\r\n}\r\n\r\n@include theme {\r\n  font-family: $font;\r\n\r\n  --color-primary: #{$colorPrimary};\r\n  --color-success: #{$colorSuccess};\r\n  --color-warn: #{$colorWarn};\r\n  --color-error: #{$colorError};\r\n  --color-info: #{$colorInfo};\r\n\r\n  --color-disabled: #{$disabled};\r\n  --color-disbaled-light: #{$disabledLight};\r\n  --color-disbaled-deep: #{$disabledDeep};\r\n  --color-disbaled-text: #{$disabledText};\r\n\r\n  --color-ibc: #{$ibc};\r\n  --color-ibl: #{$ibl};\r\n  --color-itc: #{$itc};\r\n  --color-itl: #{$itl};\r\n  --color-ihc: #{$ihc};\r\n  --color-ipc: #{$ipc};\r\n  --color-icc: #{$icc};\r\n\r\n  --transition-flexible: #{$transitionFlexible};\r\n  --transition: #{$transition};\r\n  --transition2: #{$transition2};\r\n\r\n  --shape-fllet: #{$shapeFillet};\r\n  --shape-round: #{$shapeRound};\r\n  --shape-none: #{$shapeNone};\r\n\r\n  --boxshadow: #{$boxshadow};\r\n  --boxshadow-color: #{$boxshadowColor};\r\n\r\n  .pl-text-primary {color: $colorPrimary;}\r\n  .pl-text-success {color: $colorSuccess;}\r\n  .pl-text-warn {color: $colorWarn;}\r\n  .pl-text-error {color: $colorError;}\r\n  .pl-text-info {color: $colorInfo;}\r\n\r\n  .pl-background-primary {background-color: $colorPrimary;}\r\n  .pl-background-success {background-color: $colorSuccess;}\r\n  .pl-background-warn {background-color: $colorWarn;}\r\n  .pl-background-error {background-color: $colorError;}\r\n  .pl-background-info {background-color: $colorInfo;}\r\n\r\n  .pl-background-disabled{background-color: $disabled;}\r\n  .pl-background-disabled-light {background-color: $disabledLight;}\r\n  .pl-background-disabled-deep {background-color: $disabledDeep;}\r\n  .pl-background-disabled-text {color: $disabledText;}\r\n\r\n  .pl-border-radius-fillet{border-radius: $shapeFillet;}\r\n  .pl-border-radius-round{border-radius: $shapeRound;}\r\n  .pl-border-radius-none{border-radius: $shapeNone;}\r\n\r\n  .pl-border-color{border-color: $ibc}\r\n  .pl-border-color-light{border-color: $ibl}\r\n\r\n  .pl-text-color{color: $itc}\r\n  .pl-text-color-light{color: $itl}\r\n  .pl-title-color{color: $ihc}\r\n  .pl-placeholder-color{color: $ipc}\r\n  .pl-icon-color{color: $icc}\r\n\r\n  .pl-boxshadow{box-shadow: $boxshadow}\r\n}\r\n\r\n\r\n.pl-root-service-container {\r\n    position: fixed;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    //background-color: rgba(black, 0.1);\r\n    top: 0;\r\n    left: 0;\r\n    pointer-events: none;\r\n    z-index: 1500;\r\n\r\n    & > * {\r\n        pointer-events: auto;\r\n    }\r\n}"
-      ],
-      "seq": 54
-    },
-    {
-      "name": "PlRow",
-      "codes": [
-        "$screen-sm: 768px;\r\n$screen-md: 992px;\r\n$screen-lg: 1200px;\r\n$screen-xl: 1920px;\r\n$cell-num: 24;\r\n$flexs: (\r\n  start:(justify-content:flex-start),\r\n  center:(justify-content:center),\r\n  end:(justify-content:flex-end),\r\n  space-between:(justify-content:space-between),\r\n  space-around:(justify-content:space-around),\r\n  top:(align-items:flex-start),\r\n  middle:(align-items:center),\r\n  bottom:(align-items:flex-end),\r\n);\r\n$screens: (\r\n  xs:(max-width:$screen-sm),\r\n  sm:(min-width:$screen-sm),\r\n  md:(min-width:$screen-md),\r\n  lg:(min-width:$screen-lg),\r\n  xl:(min-width:$screen-xl),\r\n);\r\n\r\n@mixin res($key, $map: $screens) {\r\n  // 循环断点Map，如果存在则返回\r\n  @if map-has-key($map, $key) {\r\n    @media only screen and #{inspect(map-get($map, $key))} {\r\n      @content;\r\n    }\r\n  } @else {\r\n    @warn \"Undefeined points: `#{$map}`\";\r\n  }\r\n}\r\n\r\n@include theme {\r\n  .pl-row {\r\n    height: auto;\r\n    position: relative;\r\n    display: block;\r\n    margin-right: 0 !important;\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    &, & * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    /*flex布局*/\r\n    &.pl-row {\r\n      display: flex;\r\n      flex-direction: row;\r\n      flex-wrap: wrap;\r\n\r\n      &:before,\r\n      &:after {\r\n        display: flex;\r\n      }\r\n\r\n      /*flex布局*/\r\n      @each $flexType, $flexValue in $flexs {\r\n        &.pl-row-flex-#{$flexType} {\r\n          @each $key, $value in $flexValue {\r\n            #{$key}: #{$value}\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    /*响应式*/\r\n    .pl-col {\r\n      display: block;\r\n      float: left;\r\n\r\n      @for $i from 1 through $cell-num {\r\n        &.pl-col-span-#{$i} {\r\n          width: (1 / $cell-num * $i * 100) * 1%;\r\n        }\r\n        &.pl-col-offset-#{$i} {\r\n          margin-left: (1 / $cell-num * $i * 100) * 1%;\r\n        }\r\n        &.pl-col-pull-#{$i} {\r\n          position: relative;\r\n          right: (1 / $cell-num * $i * 100) * 1%;\r\n        }\r\n        &.pl-col-push-#{$i} {\r\n          position: relative;\r\n          left: (1 / $cell-num * $i * 100) * 1%;\r\n        }\r\n        &.pl-col-order-#{$i} {\r\n          order: $i;\r\n        }\r\n      }\r\n\r\n      @each $size, $px in $screens {\r\n        @include res(inspect($size)) {\r\n          @for $i from 1 through $cell-num {\r\n            &.pl-col-#{$size}-#{$i} {\r\n              width: (1 / $cell-num * $i * 100) * 1%;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  @each $size, $px in $screens {\r\n    @include res(inspect($size)) {\r\n      .hidden-#{$size}-only {\r\n        display: none;\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 55
-    },
-    {
-      "name": "PlScroll",
-      "codes": [
-        "@include theme {\r\n  .pl-scroll {\r\n    display: block;\r\n    height: 100%;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    position: relative;\r\n    box-sizing: border-box;\r\n\r\n    &.pl-scroll-disabled {\r\n      .pl-scroll-wrapper {\r\n        overflow: hidden !important;\r\n        cursor: not-allowed;\r\n      }\r\n    }\r\n\r\n    .pl-scroll-wrapper {\r\n      height: calc(100% + 17px);\r\n      width: calc(100% + 17px);\r\n      overflow: scroll;\r\n      display: inline-block;\r\n      float: left;\r\n\r\n      &::-webkit-scrollbar {\r\n        background: transparent;\r\n        width: 17px;\r\n        height: 17px;\r\n      }\r\n\r\n      &::-webkit-scrollbar-thumb {\r\n        background: transparent;\r\n      }\r\n\r\n      .pl-scroll-content {\r\n        display: inline-block;\r\n\r\n        ::-webkit-scrollbar {\r\n          background: #f1f1f1;\r\n          width: 17px;\r\n          height: 17px;\r\n        }\r\n\r\n        ::-webkit-scrollbar-thumb {\r\n          background: #c1c1c1;\r\n        }\r\n\r\n      }\r\n    }\r\n\r\n    .pl-vertical-scrollbar-wrapper, .pl-horizontal-scrollbar-wrapper {\r\n      z-index: 3;\r\n    }\r\n\r\n    .pl-vertical-scrollbar-wrapper {\r\n      position: absolute;\r\n      right: 0;\r\n      top: 0;\r\n      bottom: 0;\r\n\r\n      .pl-vertical-scrollbar {\r\n        top: 0;\r\n        right: 2px;\r\n      }\r\n\r\n    }\r\n\r\n    .pl-horizontal-scrollbar-wrapper {\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n\r\n      .pl-horizontal-scrollbar {\r\n        left: 0;\r\n        bottom: 2px;\r\n      }\r\n    }\r\n\r\n    & > .pl-horizontal-scrollbar-wrapper, & > .pl-vertical-scrollbar-wrapper {\r\n      .pl-vertical-scrollbar, .pl-horizontal-scrollbar {\r\n        position: absolute;\r\n        border-radius: 100px;\r\n        cursor: pointer;\r\n        /*opacity: 1;*/\r\n        opacity: 0;\r\n        transition-duration: 0.2s;\r\n        transition-property: opacity, height, width;\r\n      }\r\n    }\r\n\r\n    &.pl-scroll-always-show-scroll-bar {\r\n      & > .pl-horizontal-scrollbar-wrapper, & > .pl-vertical-scrollbar-wrapper {\r\n        .pl-vertical-scrollbar, .pl-horizontal-scrollbar {\r\n          opacity: 1;\r\n        }\r\n      }\r\n    }\r\n\r\n    &:hover, &[is-dragging] {\r\n      & > .pl-horizontal-scrollbar-wrapper, & > .pl-vertical-scrollbar-wrapper {\r\n        .pl-vertical-scrollbar, .pl-horizontal-scrollbar {\r\n          opacity: 1;\r\n        }\r\n      }\r\n    }\r\n\r\n    &[virtual-scrolling] {\r\n      .pl-item {\r\n        transition: none !important;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.pl-scroll-sticky {\r\n  position: sticky;\r\n\r\n  &.pl-scroll-sticky-compatible {\r\n    position: relative;\r\n  }\r\n}\r\n\r\n.pl-auto-scroll-indicator-vertical {\r\n  &.pl-auto-scroll-indicator-start {\r\n    background: linear-gradient(to top, rgba(255, 255, 255, 0), #ddd);\r\n  }\r\n\r\n  &.pl-auto-scroll-indicator-end {\r\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ddd);\r\n  }\r\n}\r\n\r\n.pl-auto-scroll-indicator-horizontal {\r\n  &.pl-auto-scroll-indicator-start {\r\n    background: linear-gradient(to left, rgba(255, 255, 255, 0), #ddd);\r\n  }\r\n\r\n  &.pl-auto-scroll-indicator-end {\r\n    background: linear-gradient(to right, rgba(255, 255, 255, 0), #ddd);\r\n  }\r\n}\r\n"
-      ],
-      "seq": 56
-    },
-    {
-      "name": "PlSelect",
-      "codes": [
-        "@include theme {\r\n\r\n  .pl-select-panel {\r\n\r\n    .pl-select-panel-empty-text {\r\n      color: $disabledText;\r\n      font-size: 12px;\r\n      height: 60px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex-direction: column;\r\n\r\n      .pl-icon {\r\n        font-size: 20px;\r\n        margin-bottom: 8px;\r\n      }\r\n    }\r\n\r\n    &.pl-select-panel-multiple {\r\n      .pl-select-option {\r\n        .pl-select-option-checkbox {\r\n          margin-right: 6px;\r\n        }\r\n\r\n        &.pl-select-option-selected {\r\n          background-color: $colorPrimaryLight;\r\n          color: $colorPrimary;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-select-option {\r\n\r\n    &.pl-select-option-show {\r\n      padding: 5px 12px;\r\n      font-weight: 400;\r\n      font-size: 14px;\r\n      line-height: 22px;\r\n      color: $itc;\r\n      background-color: white;\r\n      transition: background-color linear 200ms;\r\n    }\r\n\r\n    &.pl-select-option-group-child {\r\n      padding-left: 20px;\r\n    }\r\n\r\n    &.pl-select-group {\r\n      font-size: 12px;\r\n      color: $icc;\r\n      padding: 4px 12px;\r\n      margin-top: 4px;\r\n      border-bottom: solid 1px $ibl;\r\n\r\n      .pl-icon {\r\n        margin-right: 6px;\r\n      }\r\n    }\r\n\r\n    .pl-select-option-icon {\r\n      margin-right: 6px;\r\n      opacity: 0.5;\r\n    }\r\n\r\n    &:hover, &.pl-select-option-highlight {\r\n      &:not(.pl-select-group) {\r\n        text-decoration: underline;\r\n      }\r\n\r\n      &:not(.pl-select-option-disabled):not(.pl-select-group):not(.pl-select-option-selected) {\r\n        background-color: #f2f2f2;\r\n        cursor: pointer;\r\n      }\r\n    }\r\n\r\n    &.pl-select-option-disabled {\r\n      color: $disabledText;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    &.pl-select-option-selected {\r\n      background-color: rgba($colorPrimary, 0.1);\r\n      color: $colorPrimary;\r\n    }\r\n\r\n  }\r\n\r\n}"
-      ],
-      "seq": 57
-    },
-    {
-      "name": "PlSlider",
-      "codes": [
-        "@include theme {\r\n  .pl-slider {\r\n    @include public-style;\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    position: relative;\r\n    background-color: rgba(black, 0.15);\r\n    border-radius: 100px;\r\n\r\n    .pl-slider-progress {\r\n      border-radius: 100px;\r\n      position: absolute;\r\n      top: 0;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n\r\n      .pl-slider-dot-wrapper {\r\n        width: 0;\r\n        height: 0;\r\n        overflow: visible;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        user-select: none;\r\n\r\n        .pl-slider-dot {\r\n          height: 16px;\r\n          width: 16px;\r\n          background-color: white;\r\n          box-shadow: 0 0 6px #aaa;\r\n          border-radius: 100px;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          flex-shrink: 0;\r\n          transition: all 0.15s cubic-bezier(0, 1.55, 1, 1.52);\r\n          transform-origin: center center;\r\n\r\n          .pl-slider-dot-inner {\r\n            width: 6px;\r\n            height: 6px;\r\n            border-radius: 100px;\r\n            position: relative;\r\n\r\n            .pl-slider-dot-tooltip {\r\n              transition: all 300ms $transition;\r\n              opacity: 0;\r\n              background-color: rgba(black, 0.8);\r\n              color: white;\r\n              padding: 3px 6px;\r\n              line-height: initial;\r\n              position: absolute;\r\n              left: 50%;\r\n              transform: translateX(-50%);\r\n              bottom: calc(100% + 9px);\r\n              border-radius: 4px;\r\n              font-size: 12px;\r\n              pointer-events: none;\r\n              &:hover {\r\n                opacity: 0.5;\r\n              }\r\n            }\r\n          }\r\n\r\n          &:hover {\r\n            .pl-slider-dot-tooltip {\r\n              opacity: 1;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .pl-slider-step {\r\n      position: absolute;\r\n      top: 0;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-evenly;\r\n\r\n      .pl-slider-step-item-wrapper {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 0;\r\n        height: 0;\r\n        overflow: visible;\r\n\r\n        .pl-slider-step-item {\r\n          background-color: rgba(black, 0.3);\r\n          border-radius: 100px;\r\n          flex-shrink: 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-slider-touching {\r\n      .pl-slider-dot {\r\n        transform: scale(1.4);\r\n\r\n        .pl-slider-dot-tooltip {\r\n          opacity: 1 !important;\r\n        }\r\n      }\r\n    }\r\n\r\n    .pl-slider-dot:hover {\r\n      transform: scale(1.4);\r\n      transform-origin: center center;\r\n      transition: all 0.15s cubic-bezier(0, 1.55, 1, 1.52);\r\n    }\r\n\r\n    @include statusMixin(slider) {\r\n      .pl-slider-progress {\r\n        &, & .pl-slider-dot-inner {\r\n          background-color: $value;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-slider-vertical {\r\n      .pl-slider-progress, .pl-slider-step {\r\n        display: flex;\r\n        flex-direction: column;\r\n      }\r\n    }\r\n\r\n    &.pl-slider-horizontal {\r\n      .pl-slider-progress, .pl-slider-step {\r\n        display: flex;\r\n        flex-direction: row;\r\n      }\r\n    }\r\n\r\n    &.pl-slider-align-start {\r\n      .pl-slider-dot-wrapper-start {\r\n        opacity: 0;\r\n        z-index: 0;\r\n      }\r\n\r\n      .pl-slider-dot-wrapper-end {\r\n        z-index: 1;\r\n      }\r\n    }\r\n\r\n    &.pl-slider-align-end {\r\n      .pl-slider-dot-wrapper-end {\r\n        opacity: 0;\r\n        z-index: 0;\r\n      }\r\n\r\n      .pl-slider-dot-wrapper-start {\r\n        z-index: 1;\r\n      }\r\n    }\r\n\r\n    &.pl-slider-range {\r\n      .pl-slider-dot-wrapper {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.pl-slider-place-end {\r\n      .pl-slider-dot-wrapper-start {\r\n        z-index: 2;\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 60
-    },
-    {
-      "name": "PlStepGroup",
-      "codes": [
-        "@include theme {\r\n    .pl-step-group {\r\n\r\n        .pl-step {\r\n            .pl-step-title {\r\n                font-size: 16px;\r\n                color: $ihc;\r\n            }\r\n\r\n            .pl-step-content {\r\n                font-size: 14px;\r\n            }\r\n\r\n            .pl-step-dot {\r\n                width: 12px;\r\n                height: 12px;\r\n                border-radius: 12px;\r\n                display: inline-block;\r\n            }\r\n        }\r\n\r\n        &:not(.pl-step-group-dot-icon ) {\r\n            .pl-step-icon {\r\n                width: 32px;\r\n                height: 32px;\r\n                font-size: 16px;\r\n                line-height: 32px;\r\n                text-align: center;\r\n                border-radius: 32px;\r\n                border: solid 1px $ibc;\r\n                display: inline-block;\r\n                color: $icc;\r\n                margin: 0 8px;\r\n\r\n                .pl-icon, .pl-loading {\r\n                    font-size: 1.8em;\r\n                }\r\n\r\n                .pl-step-number {\r\n                    .pl-icon {\r\n                        font-size: 1.2em;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        &.pl-step-group-horizontal {\r\n            display: flex;\r\n            align-items: center;\r\n\r\n            .pl-step {\r\n                flex: 1;\r\n\r\n                .pl-step-divider {\r\n                    flex: 1;\r\n                    height: 1px;\r\n                    background-color: $ibl;\r\n                }\r\n\r\n                .pl-step-head, .pl-step-body {\r\n                    display: flex;\r\n                }\r\n\r\n                .pl-step-head {\r\n                    align-items: center;\r\n                    margin-bottom: 8px;\r\n\r\n                    .pl-step-title {\r\n                        margin-right: 8px;\r\n                    }\r\n\r\n                    .pl-step-dot {\r\n                        margin-right: 8px;\r\n                    }\r\n                }\r\n\r\n                .pl-step-body {\r\n                    align-items: flex-start;\r\n\r\n                    .pl-step-icon {\r\n                        border: none;\r\n                    }\r\n\r\n                    .pl-step-title {\r\n                        margin-bottom: 8px;\r\n                    }\r\n                }\r\n\r\n\r\n                &.pl-step-last {\r\n                    flex: initial;\r\n                }\r\n            }\r\n\r\n            &.pl-step-group-title-align-bottom {\r\n                .pl-step {\r\n                    &:first-child {\r\n                        .pl-step-head {\r\n                            .pl-step-divider:first-child {\r\n                                background-color: transparent !important;\r\n                            }\r\n                        }\r\n                    }\r\n\r\n                    &:last-child {\r\n                        flex: 1;\r\n\r\n                        .pl-step-head {\r\n                            .pl-step-divider:last-child {\r\n                                background-color: transparent !important;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n\r\n                .pl-step-body {\r\n                    display: flex;\r\n                    flex-direction: column;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                }\r\n            }\r\n        }\r\n\r\n        &.pl-step-group-vertical {\r\n            display: flex;\r\n            flex-direction: column;\r\n            flex-wrap: revert;\r\n\r\n            .pl-step {\r\n                display: flex;\r\n\r\n                .pl-step-head {\r\n                    display: flex;\r\n                    flex-direction: column;\r\n                    align-items: center;\r\n\r\n                    .pl-step-divider {\r\n                        flex: 1;\r\n                        width: 1px;\r\n                        background-color: $ibl;\r\n                    }\r\n                }\r\n\r\n                .pl-step-body {\r\n                    flex: 1;\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                    .pl-step-title {\r\n                        line-height: 32px;\r\n                    }\r\n\r\n                    .pl-step-content {\r\n                        padding: 8px 0;\r\n                    }\r\n                }\r\n\r\n                &:last-child {\r\n                    .pl-step-head .pl-step-divider {\r\n                        display: none;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .pl-step {\r\n            &.pl-step-has-icon {\r\n                .pl-step-head {\r\n                    .pl-step-icon {\r\n                        border: none;\r\n                        position: relative;\r\n                        top: 1px;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.pl-step-status-wait {\r\n                .pl-step-title {\r\n                    color: $icc;\r\n                }\r\n\r\n                .pl-step-content {\r\n                    color: $icc;\r\n                }\r\n\r\n                .pl-step-dot {\r\n                    border: solid 1px $icc;\r\n                    background-color: white;\r\n                }\r\n            }\r\n\r\n            &.pl-step-status-finish {\r\n                .pl-step-head {\r\n                    .pl-step-icon {\r\n                        border-color: $colorPrimary;\r\n                        color: $colorPrimary;\r\n                    }\r\n\r\n                    .pl-step-dot {\r\n                        background-color: $colorPrimary;\r\n                    }\r\n\r\n                    .pl-step-divider.pl-step-divider-next {\r\n                        background-color: $colorPrimary;\r\n                    }\r\n                }\r\n\r\n                & + .pl-step {\r\n                    .pl-step-head {\r\n                        .pl-step-divider-prev {\r\n                            background-color: $colorPrimary;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.pl-step-status-process {\r\n\r\n                .pl-step-head {\r\n                    .pl-step-icon {\r\n                        border-color: $colorPrimary;\r\n                        background-color: $colorPrimary;\r\n                        color: white;\r\n                    }\r\n\r\n                    .pl-step-title {\r\n                        color: $colorPrimary;\r\n                    }\r\n\r\n                    .pl-step-dot {\r\n                        border: solid 4px $colorPrimary;\r\n                        box-sizing: border-box;\r\n                        background-color: white;\r\n                    }\r\n                }\r\n\r\n                .pl-step-body {\r\n                    .pl-step-content {\r\n                        color: $colorPrimary;\r\n                    }\r\n\r\n                    .pl-step-title {\r\n                        color: $colorPrimary;\r\n                    }\r\n                }\r\n\r\n                &.pl-step-has-icon {\r\n                    .pl-step-icon {\r\n                        border-color: transparent;\r\n                        background-color: transparent;\r\n                        color: $colorPrimary;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.pl-step-status-error {\r\n\r\n                .pl-step-head {\r\n                    .pl-step-icon {\r\n                        border-color: $colorError;\r\n                        background-color: $colorError;\r\n                        color: white;\r\n                    }\r\n\r\n                    .pl-step-title {\r\n                        color: $colorError;\r\n                    }\r\n\r\n                    .pl-step-dot {\r\n                        background-color: $colorError;\r\n                    }\r\n                }\r\n\r\n                .pl-step-body {\r\n                    .pl-step-content {\r\n                        color: $colorError;\r\n                    }\r\n\r\n                    .pl-step-title {\r\n                        color: $colorError;\r\n                    }\r\n                }\r\n\r\n                &.pl-step-has-icon {\r\n                    .pl-step-icon {\r\n                        border-color: transparent;\r\n                        background-color: transparent;\r\n                        color: $colorError;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        &.pl-step-group-mini {\r\n\r\n            &:not(.pl-step-group-dot-icon) {\r\n                .pl-step-icon {\r\n                    width: 20px;\r\n                    height: 20px;\r\n                    font-size: 12px;\r\n                    line-height: 20px;\r\n                    text-align: center;\r\n                    border-radius: 20px;\r\n                    border: solid 1px $ibc;\r\n                    display: inline-block;\r\n                    color: $icc;\r\n                    margin: 0 8px;\r\n\r\n                    .pl-icon, .pl-loading {\r\n                        font-size: 1.8em;\r\n                    }\r\n\r\n                    .pl-step-number {\r\n                        .pl-icon {\r\n                            font-size: 1.2em;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            .pl-step-title {\r\n                font-size: 14px;\r\n            }\r\n\r\n            .pl-step-content {\r\n                font-size: 12px;\r\n            }\r\n\r\n            &.pl-step-group-vertical {\r\n                .pl-step {\r\n                    .pl-step-body {\r\n                        .pl-step-title {\r\n                            line-height: 20px;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        &.pl-step-group-dot-icon {\r\n            .pl-step {\r\n                .pl-step-head {\r\n                    .pl-step-icon {\r\n                        background-color: transparent;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.pl-step-group-horizontal:not(.pl-step-group-vertical) {\r\n                .pl-step {\r\n                    .pl-step-content {\r\n                        padding-left: 20px;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.pl-step-group-title-align-bottom {\r\n                .pl-step .pl-step-head .pl-step-dot {\r\n                    margin-right: 0;\r\n                }\r\n            }\r\n\r\n            &.pl-step-group-vertical {\r\n                .pl-step-head {\r\n                    margin-right: 8px;\r\n                    position: relative;\r\n\r\n                    .pl-step-divider {\r\n                        position: absolute;\r\n                        left: 5px;\r\n                        top: 22px;\r\n                        bottom: -10px;\r\n                    }\r\n                }\r\n\r\n                .pl-step-icon {\r\n                    margin-top: 10px;\r\n                    height: 12px;\r\n                    display: inline-block;\r\n\r\n                    .pl-step-dot {\r\n                        float: left;\r\n                    }\r\n                }\r\n\r\n                &.pl-step-group-mini {\r\n                    .pl-step-icon {\r\n                        margin-top: 5px;\r\n                    }\r\n\r\n                    .pl-step-head {\r\n                        .pl-step-divider {\r\n                            position: absolute;\r\n                            left: 5px;\r\n                            top: 16px;\r\n                            bottom: -5px;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}"
-      ],
-      "seq": 62
-    },
-    {
-      "name": "PlTable",
-      "codes": [
-        "@include theme {\r\n  $tableHeadColor: rgba(0, 0, 0, .85);\r\n  $tableHeadBackground: #f9f9f9;\r\n  $tableHeadHoverBackground: #e4e7ef;\r\n  $tableHeadBorderColor: #f0f0f0;\r\n\r\n  $tableBodyColor: rgba(0, 0, 0, 0.85);\r\n\r\n  $tableRowHoverBackground: #f5f7fa;\r\n  $tableRowCurrentBackground: mix($colorPrimary, white, 7.5%);\r\n\r\n  $scrollbarSize: 12px;\r\n  /*---------------------------------------scroll-------------------------------------------*/\r\n  .pl-table, .pl-virtual-table {\r\n    position: relative;\r\n\r\n    .pl-scroll {\r\n      .pl-scroll-content {\r\n        min-width: 100%;\r\n      }\r\n\r\n      .pl-scroll-wrapper {\r\n        height: calc(100% + 20px);\r\n      }\r\n\r\n      .pl-vertical-scrollbar-wrapper, .pl-horizontal-scrollbar-wrapper {\r\n        z-index: 10;\r\n      }\r\n    }\r\n\r\n    &:hover {\r\n      .pl-scroll {\r\n        & > .pl-horizontal-scrollbar-wrapper, & > .pl-vertical-scrollbar-wrapper {\r\n          .pl-vertical-scrollbar, .pl-horizontal-scrollbar {\r\n            opacity: 1;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  /*---------------------------------------虚拟表格-------------------------------------------*/\r\n  .pl-virtual-table {\r\n    height: 100%;\r\n    width: 100%;\r\n    overflow: hidden;\r\n\r\n    .pl-virtual-table-summary-table-wrapper {\r\n      pointer-events: none;\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      overflow: hidden;\r\n      z-index: 5;\r\n\r\n      & > table {\r\n        &:after {\r\n          content: '';\r\n          display: block;\r\n          height: $scrollbarSize;\r\n          width: 1px;\r\n        }\r\n      }\r\n\r\n      &:after {\r\n        position: absolute;\r\n        bottom: 0;\r\n        height: $scrollbarSize;\r\n        left: 0;\r\n        content: \"\";\r\n        background-color: #f5f7fa;\r\n        z-index: 3;\r\n        width: 5000px;\r\n      }\r\n\r\n      .pl-virtual-table-summary-table {\r\n        pointer-events: auto;\r\n        position: absolute;\r\n        left: 0;\r\n\r\n        td {\r\n          background-color: $tableHeadBackground;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  /*---------------------------------------basic-------------------------------------------*/\r\n  table {\r\n    border-collapse: collapse;\r\n    border-spacing: 0;\r\n    box-sizing: border-box;\r\n    table-layout: fixed;\r\n    /**\r\n     * table一直都是有个最小宽度100%。\r\n     * 当总列宽小于表格宽度时，table没有具体width宽度，fit列不设置库宽度，使其自适应宽度；\r\n     * 当总列宽大于表格宽度时，table设置具体的width宽度，fit值无效，以列具体宽度为准；\r\n     */\r\n    //min-width: 100%;  // 不能设置min-width，当文字过长的时候，会自动撑开列宽，导致表头与表体错位\r\n    width: 100%;\r\n\r\n    tr {\r\n      td {\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n        box-sizing: border-box;\r\n        position: relative;\r\n        padding: 1px 11px;\r\n      }\r\n    }\r\n  }\r\n  /*---------------------------------------collector-------------------------------------------*/\r\n  .plc-collector {\r\n    display: none;\r\n  }\r\n  /*---------------------------------------no data-------------------------------------------*/\r\n  .pl-table-no-data {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    pointer-events: none;\r\n  }\r\n  /*---------------------------------------head-------------------------------------------*/\r\n  .plt-head {\r\n    td {\r\n      background-color: $tableHeadBackground;\r\n      color: $tableHeadColor;\r\n\r\n      &:hover {\r\n        background-color: $tableHeadHoverBackground;\r\n      }\r\n\r\n      .plt-head-cell-indicator {\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        height: inherit;\r\n        width: 6px;\r\n        right: 0;\r\n        content: '';\r\n        background-color: rgba(black, 0.1);\r\n        cursor: ew-resize;\r\n        opacity: 0;\r\n        transition: opacity 500ms $transition;\r\n        z-index: 1;\r\n      }\r\n\r\n      .plt-head-cell-sorter {\r\n        position: absolute;\r\n        right: 4px;\r\n        top: 0;\r\n        bottom: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n\r\n        .plt-head-cell-sorter-inner {\r\n          display: flex;\r\n          flex-direction: column;\r\n          color: rgba(black, 0.4);\r\n\r\n          .pl-icon:first-child {\r\n            position: relative;\r\n            top: 3px;\r\n          }\r\n\r\n          .pl-icon:last-child {\r\n            position: relative;\r\n            bottom: 3px;\r\n          }\r\n        }\r\n\r\n        &.plt-head-cell-sorter-asc {\r\n          .plt-head-cell-sorter-inner {\r\n            .pl-icon:first-child {\r\n              color: rgba(black, 0.8);\r\n            }\r\n          }\r\n        }\r\n\r\n        &.plt-head-cell-sorter-desc {\r\n          .plt-head-cell-sorter-inner {\r\n            .pl-icon:last-child {\r\n              color: rgba(black, 0.8);\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  /*---------------------------------------body-------------------------------------------*/\r\n  .plt-body {\r\n    tr {\r\n      td {\r\n        transition: background-color 150ms linear;\r\n        background-color: white;\r\n        color: $tableBodyColor;\r\n      }\r\n    }\r\n  }\r\n  /*---------------------------------------row-------------------------------------------*/\r\n  .plt-row {\r\n    border-bottom: solid 1px $tableHeadBorderColor;\r\n\r\n    &:hover {\r\n      td {\r\n        background-color: $tableRowHoverBackground;\r\n      }\r\n    }\r\n\r\n    &.plt-row-current {\r\n      &, &:hover {\r\n        td {\r\n          background-color: $tableRowCurrentBackground;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  .plt-head {\r\n    tr {\r\n      border-bottom: solid 1px $tableHeadBorderColor;\r\n      border-top: solid 1px $tableHeadBorderColor;\r\n    }\r\n  }\r\n  .plt-body {\r\n    .pl-virtual-table-summary-table-wrapper {\r\n      & > table {\r\n        border-top: solid 1px $tableHeadBorderColor;\r\n      }\r\n    }\r\n  }\r\n  /*---------------------------------------cell-------------------------------------------*/\r\n  .plt-cell {\r\n    text-align: left;\r\n\r\n    &.plt-cell-align-center {\r\n      text-align: center;\r\n    }\r\n\r\n    &.plt-cell-align-right {\r\n      text-align: right;\r\n    }\r\n\r\n    &.plt-cell-no-padding {\r\n      padding: 0;\r\n    }\r\n\r\n    &.plt-cell-editing {\r\n      &:not(.plt-cell-add-edit-padding) {\r\n        padding-left: 0;\r\n      }\r\n    }\r\n\r\n    &.plt-cell-link {\r\n      color: $colorPrimary;\r\n      cursor: pointer;\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n  /*---------------------------------------border-------------------------------------------*/\r\n  .pl-table {\r\n\r\n    &.pl-table-border {\r\n      tr {\r\n        td {\r\n          border-right: solid 1px $tableHeadBorderColor;\r\n          border-left: solid 1px $tableHeadBorderColor;\r\n        }\r\n      }\r\n\r\n      &:after {\r\n        position: absolute;\r\n        right: 0;\r\n        bottom: 0;\r\n        top: 0;\r\n        left: 0;\r\n        background-color: transparent;\r\n        border: solid 0.5px $tableHeadBorderColor;\r\n        content: '';\r\n        z-index: 5;\r\n        pointer-events: none;\r\n      }\r\n    }\r\n\r\n    &.pl-table-stripe {\r\n      .plt-body {\r\n        .pl-virtual-list-content {\r\n          table {\r\n            tr:nth-child(odd):not(:hover):not(.plt-row-current) {\r\n              td {\r\n                background-color: #f2f5ff;\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  /*---------------------------------------size-------------------------------------------*/\r\n  .pl-table {\r\n    &.pl-table-size-large {\r\n      .plt-cell {\r\n        font-size: 16px;\r\n      }\r\n    }\r\n\r\n    &.pl-table-size-normal {\r\n      .plt-cell {\r\n        font-size: 14px;\r\n      }\r\n    }\r\n\r\n    &.pl-table-size-mini {\r\n      .plt-cell {\r\n        font-size: 12px;\r\n      }\r\n    }\r\n  }\r\n  /*---------------------------------------shadow-------------------------------------------*/\r\n  .pl-table {\r\n    &, &.pl-table-border {\r\n\r\n      .plt-cell-last-fixed-left, .plt-cell-first-fixed-right {\r\n\r\n        &:before {\r\n          position: absolute;\r\n          top: 0;\r\n          bottom: 0;\r\n          width: 3px;\r\n          pointer-events: none;\r\n          content: '';\r\n          z-index: 4;\r\n          background-color: transparent;\r\n\r\n          left: initial;\r\n          right: initial;\r\n          transform: none;\r\n        }\r\n\r\n        &.plt-cell-last-fixed-left {\r\n          &:before {\r\n            right: 0;\r\n            box-shadow: inset 10px 0 10px -10px mix(black, $boxshadowColor, 10%);\r\n          }\r\n        }\r\n\r\n        &.plt-cell-first-fixed-right {\r\n          &:before {\r\n            left: 0;\r\n            box-shadow: inset -10px 0 10px -10px mix(black, $boxshadowColor, 10%);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.plt-table-hide-fixed-left .plt-cell-last-fixed-left, &.plt-table-hide-fixed-right .plt-cell-first-fixed-right {\r\n      &:before {\r\n        display: none;\r\n      }\r\n    }\r\n  }\r\n  /*---------------------------------------standard-------------------------------------------*/\r\n  /*plc-index*/\r\n  .plc-index-summary-text {\r\n    font-size: 12px;\r\n  }\r\n  /*!*icon*!\r\n  .plt-cell {\r\n    & > .pl-icon {\r\n      vertical-align: -0.3em;\r\n\r\n      & + * {\r\n        margin-left: 4px;\r\n      }\r\n    }\r\n  }*/\r\n  /*input*/\r\n  .plt-cell {\r\n    & > * {\r\n      vertical-align: middle;\r\n\r\n      &.pl-icon {\r\n        vertical-align: middle;\r\n      }\r\n    }\r\n\r\n    & > .pl-input {\r\n      width: 100%;\r\n\r\n      & > .pl-input-inner {\r\n        width: inherit !important;\r\n\r\n        & > .pl-input-custom-inner {\r\n          & > input {\r\n            width: 100% !important;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  /*plc-expand*/\r\n  .plt-row {\r\n    &.plt-expand-row {\r\n      td {\r\n        background-color: white;\r\n        z-index: 5;\r\n        white-space: normal;\r\n        padding: 0;\r\n        overflow: unset;\r\n      }\r\n\r\n      .plt-expand-body {\r\n        box-sizing: border-box;\r\n        position: sticky;\r\n        left: 0;\r\n\r\n        &[data-padding=true] {\r\n          padding: 16px;\r\n        }\r\n\r\n        & > .pl-form {\r\n          padding: 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    .plc-expand-icon {\r\n      .pl-icon {\r\n        @include transition;\r\n        transition-property: transform;\r\n      }\r\n\r\n      &.plc-expand-icon-active {\r\n        .pl-icon {\r\n          transform: rotate(-180deg);\r\n        }\r\n      }\r\n    }\r\n  }\r\n  /*plc-draggier*/\r\n  .pl-button.plc-draggier-handler {\r\n    cursor: move;\r\n  }\r\n  /*col draggier*/\r\n  .plt-col-draggier-indicator {\r\n    &[droppable=\"true\"] {\r\n      background-color: $colorPrimary;\r\n    }\r\n\r\n    &[droppable=\"false\"] {\r\n      background-color: $colorError;\r\n    }\r\n  }\r\n  /*plc-tree*/\r\n  .plc-tree-node {\r\n    white-space: nowrap;\r\n\r\n    & > * {\r\n      display: inline-block;\r\n      height: 100%;\r\n    }\r\n\r\n    .plc-tree-node-expander, .plc-tree-node-check {\r\n      width: 30px;\r\n      text-align: center;\r\n    }\r\n  }\r\n  .plc-tree-node-content {\r\n    display: inline-block;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n    padding-left: 8px;\r\n    box-sizing: border-box;\r\n  }\r\n}\r\n"
-      ],
-      "seq": 63
-    },
-    {
-      "name": "PlTag",
-      "codes": [
-        "@include theme {\r\n  .pl-tag {\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    vertical-align: baseline;\r\n    border: solid 1px;\r\n\r\n    @include sizeMixin(tag) {\r\n      height: $value;\r\n      line-height: $value;\r\n      padding: 0 #{$value - 20px};\r\n      &.pl-tag-size-mini {\r\n        font-size: 12px;\r\n      }\r\n      &.pl-tag-size-normal {\r\n        font-size: 14px;\r\n      }\r\n      &.pl-tag-size-large {\r\n        font-size: 16px;\r\n      }\r\n    }\r\n\r\n    @include shapeMixin(tag) {\r\n      border-radius: $value;\r\n    }\r\n\r\n    &.pl-tag-mode-fill {\r\n      @include statusMixin(tag) {\r\n        color: white;\r\n        border-color: $value;\r\n        background-color: $value;\r\n      }\r\n\r\n      &.pl-tag-disabled {\r\n        background-color: $disabled;\r\n        color: $disabledText;\r\n        border-color: $disabled;\r\n      }\r\n    }\r\n\r\n    &.pl-tag-mode-stroke {\r\n      @include statusMixin(tag) {\r\n        color: $value;\r\n        border-color: mix(white, $value, 50%);\r\n        background-color: mix(white, $value, 90%);\r\n      }\r\n\r\n      &.pl-tag-disabled {\r\n        background-color: $disabled;\r\n        color: $disabledText;\r\n        border-color: $disabled;\r\n      }\r\n    }\r\n\r\n    &.pl-tag-mode-text {\r\n      @include statusMixin(tag) {\r\n        color: $value;\r\n        border-color: transparent;\r\n      }\r\n\r\n      &.pl-tag-disabled {\r\n        color: $disabledText;\r\n      }\r\n    }\r\n\r\n    &.pl-tag-disabled {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 64
-    },
-    {
-      "name": "PlTagInput",
-      "codes": [
-        "@include theme {\r\n  .pl-tag-input {\r\n    display: inline-block;\r\n\r\n    .pl-tag {\r\n      //margin-bottom: 8px;\r\n\r\n      &:not(:last-child) {\r\n        margin-right: 8px;\r\n      }\r\n    }\r\n\r\n    .pl-input {\r\n      //margin-bottom: 8px;\r\n\r\n      .pl-input-inner {\r\n        border-style: dashed;\r\n        width: 100% !important;\r\n      }\r\n    }\r\n\r\n    .pl-tag-input-not-edit {\r\n      text-align: center;\r\n      cursor: pointer;\r\n    }\r\n\r\n    @include statusMixin(tag-input) {\r\n      .pl-tag-input-not-edit {\r\n        color: $value;\r\n      }\r\n    }\r\n\r\n    &.pl-tag-input-disabled {\r\n      .pl-tag-input-not-edit {\r\n        cursor: not-allowed;\r\n        color: $disabledText;\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 65
-    },
-    {
-      "name": "PlTime",
-      "codes": [
-        "@include theme {\r\n  .pl-time {\r\n    .pl-time-inner {\r\n      display: flex;\r\n      align-items: stretch;\r\n      height: 100%;\r\n\r\n      & > span {\r\n        color: $icc;\r\n      }\r\n\r\n      .pl-time-input-inner {\r\n        border: none;\r\n        outline: none;\r\n        width: 90px;\r\n        height: 100%;\r\n        background: transparent;\r\n      }\r\n    }\r\n\r\n    &.pl-time-range {\r\n      .pl-time-input-inner {\r\n        text-align: center;\r\n      }\r\n    }\r\n\r\n    .pl-input-inner {\r\n      width: auto !important;\r\n    }\r\n  }\r\n\r\n  .pl-time-panel-foot {\r\n    padding: 8px 8px 0 8px;\r\n    border-top: solid 1px $ibl;\r\n    display: flex;\r\n    justify-content: center;\r\n\r\n    & > * + * {\r\n      margin-left: 8px;\r\n    }\r\n  }\r\n}",
-        "@include theme {\r\n  .pl-time-range-panel {\r\n    display: inline-block;\r\n\r\n    .pl-time-base-panel {\r\n\r\n      &:first-child {\r\n        border-right: solid 1px $ibc;\r\n        border-radius: 0;\r\n      }\r\n    }\r\n  }\r\n}",
-        "$time-size: 24px;\r\n\r\n@include theme {\r\n  .pl-time-base-column {\r\n    display: inline-block;\r\n    height: 7*$time-size;\r\n    width: 40px;\r\n    border-radius: 2px;\r\n\r\n    .pl-time-base-column-list {\r\n      margin: 0;\r\n      padding: 0;\r\n      list-style: none;\r\n      position: relative;\r\n\r\n      .pl-time-base-column-item {\r\n        font-size: 12px;\r\n        height: $time-size;\r\n        line-height: $time-size;\r\n        transition: all 300ms $transition;\r\n        text-align: center;\r\n\r\n        &.pl-time-base-column-option-item {\r\n          cursor: pointer;\r\n\r\n          &:hover {\r\n            background-color: rgba($colorInfo, 0.1);\r\n            color: $ihc;\r\n          }\r\n        }\r\n\r\n        &.pl-time-base-column-item-disabled {\r\n          color: $disabledText;\r\n          cursor: not-allowed;\r\n\r\n          &:hover {\r\n            color: $disabledText;\r\n            background-color: transparent;\r\n          }\r\n        }\r\n\r\n        &.pl-time-base-column-item-current {\r\n          background-color: rgba($colorPrimary, 0.1);\r\n          color: $colorPrimary;\r\n\r\n          &:hover {\r\n            color: $colorPrimary;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}",
-        "$time-size: 24px;\r\n\r\n@include theme {\r\n  .pl-time-base-panel {\r\n    display: inline-block;\r\n    position: relative;\r\n    color: $itc;\r\n\r\n    &:before {\r\n      position: absolute;\r\n      top: $time-size*3;\r\n      left: 0;\r\n      right: 0;\r\n      height: 1px;\r\n      background-color: $ibl;\r\n      content: '';\r\n      pointer-events: none;\r\n    }\r\n\r\n    &:after {\r\n      position: absolute;\r\n      top: $time-size*4;\r\n      left: 0;\r\n      right: 0;\r\n      height: 1px;\r\n      background-color: $ibl;\r\n      content: '';\r\n      pointer-events: none;\r\n    }\r\n\r\n    .pl-time-base-column {\r\n      border: none;\r\n\r\n      & + .pl-time-base-column {\r\n        border-left: dashed 1px $ibc;\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 66
-    },
-    {
-      "name": "PlToggle",
-      "codes": [
-        "@include theme {\r\n  .pl-toggle {\r\n    background-color: $disabled;\r\n    position: relative;\r\n    outline: none;\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n    user-select: none;\r\n    transition: background-color 300ms;\r\n    cursor: pointer;\r\n\r\n    .pl-toggle-inner {\r\n      content: '';\r\n      position: absolute;\r\n      left: 2px;\r\n      top: 2px;\r\n      bottom: 2px;\r\n      background: white;\r\n      box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);\r\n      transition: all 0.3s;\r\n      border-radius: plv(sizeLarge);\r\n    }\r\n\r\n    &:before {\r\n      position: absolute;\r\n      left: 2px;\r\n      right: 2px;\r\n      top: 2px;\r\n      bottom: 2px;\r\n      border-radius: plv(sizeLarge);\r\n      background-color: #fff;\r\n      content: \"\";\r\n      transform: scaleX(1);\r\n      /*transform: scale3d(0, 0, 0);*/\r\n      transition: transform .3s;\r\n    }\r\n\r\n    @include sizeMixin(toggle) {\r\n      $value: $value - 6px;\r\n      height: $value;\r\n      width: $value*52/32;\r\n      border-radius: plv(sizeLarge);\r\n\r\n      &.pl-toggle-on {\r\n        .pl-toggle-inner {\r\n          left: $value/2+6;\r\n        }\r\n      }\r\n      .pl-toggle-inner {\r\n        right: $value/2+6;\r\n      }\r\n      &.pl-toggle-active {\r\n        .pl-toggle-inner {\r\n          right: $value/2;\r\n        }\r\n\r\n        &.pl-toggle-on .pl-toggle-inner {\r\n          left: $value/2;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-toggle-on {\r\n      &:before {\r\n        transform: scale3d(0, 0, 0);\r\n      }\r\n\r\n      .pl-toggle-inner {\r\n        right: 2px;\r\n      }\r\n    }\r\n\r\n    &.pl-toggle-active {\r\n      .pl-toggle-inner {\r\n        left: 2px;\r\n      }\r\n\r\n      &.pl-toggle-on .pl-toggle-inner {\r\n        right: 2px;\r\n      }\r\n    }\r\n\r\n    @include statusMixin(toggle) {\r\n      &.pl-toggle-on {\r\n        background-color: $value;\r\n      }\r\n      &:after {\r\n        border-color: $value;\r\n      }\r\n      &:focus {\r\n        .pl-toggle-inner {\r\n          background-color: mix(white, $value, 90%);\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-toggle-disabled {\r\n      cursor: not-allowed;\r\n\r\n      background-color: $disabled;\r\n\r\n      &:before {\r\n        background-color: $disabled;\r\n      }\r\n\r\n      .pl-toggle-inner {\r\n        background-color: $disabled !important;\r\n      }\r\n\r\n      &.pl-toggle-on {\r\n        @include statusMixin(toggle) {\r\n          background-color: rgba($value, 0.5);\r\n        }\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 67
-    },
-    {
-      "name": "PlTooltip",
-      "codes": [
-        "@include theme {\r\n  .pl-tooltip {\r\n    .plain-popper-content .pl-popper-content-inner {\r\n      color: inherit;\r\n      padding: 8px 12px !important;\r\n    }\r\n\r\n    &.pl-tooltip-theme-dark {\r\n      .plain-popper-content {\r\n        background-color: black !important;\r\n\r\n        &, & .pl-popper-content-inner, & .pl-popper-title {\r\n          color: white;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-tooltip-theme-light {\r\n      .plain-popper-content {\r\n        background-color: white !important;\r\n\r\n        &, & .pl-popper-content-inner {\r\n          color: $itc !important;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-tooltip-reference {\r\n    display: inline-block;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n    vertical-align: baseline;\r\n  }\r\n}\r\n"
-      ],
-      "seq": 68
-    },
-    {
-      "name": "PlTree",
-      "codes": [
-        "@include theme {\r\n  .pl-tree {\r\n    width: 100%;\r\n    position: relative;\r\n\r\n    .pl-tree-placeholder {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      height: 300px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex-direction: column;\r\n      color: $icc;\r\n\r\n      & > .pl-icon {\r\n        font-size: 3em;\r\n        margin-bottom: 8px;\r\n      }\r\n    }\r\n\r\n    .pl-tree-node-list {\r\n      overflow: hidden;\r\n    }\r\n\r\n    .pl-tree-node {\r\n      width: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      font-size: 14px;\r\n      box-sizing: border-box;\r\n      border-bottom: solid 1px $ibl;\r\n      color: $itc;\r\n\r\n      & > .pl-tree-node-content {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        flex: 1;\r\n      }\r\n\r\n      & > .pl-tree-node-operator {\r\n        display: flex;\r\n        align-items: center;\r\n        font-size: 1.2em;\r\n\r\n        .pl-tree-node-expander {\r\n          width: 1em;\r\n        }\r\n\r\n        & > * {\r\n          display: flex;\r\n          align-items: center;\r\n          margin-right: 8px;\r\n          color: $colorPrimary;\r\n          user-select: none;\r\n          width: 1em;\r\n          transition: all 300ms linear;\r\n        }\r\n\r\n        .pl-icon {\r\n          cursor: pointer;\r\n\r\n          &.pl-tree-node-draggier {\r\n            cursor: move;\r\n          }\r\n        }\r\n      }\r\n\r\n      &:first-child {\r\n        border-top: solid 1px $ibl;\r\n      }\r\n\r\n      &:hover {\r\n        background-color: #f6f6f6;\r\n      }\r\n\r\n      &.pl-tree-node-current {\r\n        background-color: rgba($colorPrimary, 0.1);\r\n        color: $colorPrimary;\r\n      }\r\n\r\n      &.pl-tree-empty-node {\r\n        color: $colorWarn;\r\n\r\n        & > .pl-tree-node-operator > * {\r\n          color: $colorWarn;\r\n        }\r\n      }\r\n\r\n      &.pl-tree-node-not-checkable {\r\n        color: $disabledText;\r\n\r\n        & > .pl-tree-node-operator > * {\r\n          color: $disabledText;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 70
-    },
-    {
-      "name": "PlTriangle",
-      "codes": [
-        "@include theme {\r\n  .pl-triangle {\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n    overflow: hidden;\r\n    box-sizing: border-box;\r\n\r\n    .pl-triangle-target {\r\n      width: 0;\r\n      height: 0;\r\n      position: relative;\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 71
-    },
-    {
-      "name": "PlUpload",
-      "codes": [
-        "@include theme {\r\n  .pl-upload {\r\n\r\n    .pl-upload-item {\r\n      position: relative;\r\n\r\n      .pl-upload-item-inner {\r\n        padding: 6px 9px;\r\n        font-size: 12px;\r\n        color: $itc;\r\n        position: relative;\r\n        z-index: 2;\r\n\r\n        & > .pl-icon:first-child {\r\n          color: $icc;\r\n        }\r\n\r\n        & > .pl-icon, & > .pl-loading {\r\n          margin-right: 8px;\r\n        }\r\n      }\r\n\r\n      .pl-upload-item-progress {\r\n        position: absolute;\r\n        top: 2px;\r\n        bottom: 2px;\r\n        left: 2px;\r\n        right: 2px;\r\n        z-index: 1;\r\n\r\n        .pl-upload-item-progress-inner {\r\n          transition: all 1s linear;\r\n          height: 100%;\r\n          background-color: rgba($colorPrimary, 0.2);\r\n          border-top-right-radius: 100px;\r\n          border-bottom-right-radius: 100px;\r\n          z-index: -1;\r\n        }\r\n      }\r\n\r\n      .pl-upload-item-content {\r\n        display: inline-block;\r\n      }\r\n\r\n      & + .pl-upload-item {\r\n        margin-top: 8px;\r\n      }\r\n\r\n      &.pl-upload-item-status-success {\r\n        .pl-upload-item-inner {\r\n          &, & > .pl-icon {\r\n            color: $colorPrimary;\r\n          }\r\n        }\r\n      }\r\n\r\n      &.pl-upload-item-status-error {\r\n        .pl-upload-item-inner {\r\n          &, & > .pl-icon {\r\n            color: $colorError;\r\n          }\r\n        }\r\n      }\r\n\r\n      &.pl-upload-item-status-ready {\r\n        .pl-upload-item-inner {\r\n          &, & > .pl-icon {\r\n            color: $colorWarn;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-upload-preview {\r\n      .pl-upload-item {\r\n        .pl-upload-item-content {\r\n          &:hover {\r\n            text-decoration: underline;\r\n            color: $colorPrimary;\r\n            cursor: pointer;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-upload-remove {\r\n      .pl-upload-item {\r\n        .pl-upload-item-inner {\r\n          padding-right: 32px;\r\n        }\r\n\r\n        .pl-upload-item-remove {\r\n          width: 32px;\r\n          position: absolute;\r\n          top: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          cursor: pointer;\r\n          color: $icc;\r\n          transition: all 300ms linear;\r\n\r\n          &:hover {\r\n            background-color: $colorError;\r\n\r\n            .pl-icon {\r\n              color: white;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-upload-single {\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: stretch;\r\n      justify-content: center;\r\n\r\n      & > .pl-button-group:first-child {\r\n        & > .pl-button:last-child {\r\n          border-top-right-radius: 0;\r\n          border-bottom-right-radius: 0;\r\n        }\r\n      }\r\n\r\n      .pl-upload-item {\r\n        flex: 1;\r\n        border: solid 1px $ibc;\r\n        border-left: none;\r\n        border-top-right-radius: 2px;\r\n        border-bottom-right-radius: 2px;\r\n      }\r\n    }\r\n\r\n    &.pl-upload-multiple {\r\n      .pl-upload-button {\r\n\r\n      }\r\n\r\n      .pl-upload-list {\r\n        margin-top: 8px;\r\n\r\n        .pl-upload-item {\r\n          border: dashed 1px $ibc;\r\n        }\r\n      }\r\n\r\n      .pl-upload-drop-area {\r\n        display: flex;\r\n        flex-direction: column;\r\n        padding: 12px;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border: dashed 1px $ibc;\r\n        cursor: pointer;\r\n\r\n        & > .pl-icon {\r\n          font-size: 32px;\r\n          color: $colorPrimary;\r\n          margin-bottom: 8px;\r\n        }\r\n\r\n        .pl-upload-drop-upload-button {\r\n          margin-left: 8px;\r\n        }\r\n      }\r\n\r\n      &.pl-upload-disabled {\r\n        .pl-upload-drop-area {\r\n          color: $disabledText;\r\n\r\n          & > .pl-icon {\r\n            color: $icc;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n\r\n  }\r\n}"
-      ],
-      "seq": 72
-    },
-    {
-      "name": "PlVirtualList",
-      "codes": [
-        "\r\n.pl-virtual-table {\r\n  & > .pl-virtual-list {\r\n    & > .pl-scroll-wrapper {\r\n      & > .pl-scroll-content {\r\n        overflow-y: unset;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.pl-virtual-list {\r\n  position: relative;\r\n\r\n  & > .pl-scroll-wrapper {\r\n    & > .pl-scroll-content {\r\n      overflow-y: hidden;\r\n    }\r\n  }\r\n\r\n  &:not(.pl-virtual-list-disabled) {\r\n    .pl-virtual-list-strut {\r\n      position: relative;\r\n      //overflow: hidden;\r\n\r\n      .pl-virtual-list-content {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        //overflow: hidden;\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 73
-    },
-    {
-      "name": "PlInputGroup",
-      "codes": [
-        ".pl-input-group {\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n\r\n  & > * {\r\n    display: inline-block;\r\n\r\n    &.pl-input-group.pl-input-group-block {\r\n      display: inline-flex;\r\n    }\r\n  }\r\n\r\n  &.pl-input-group-block {\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    flex-wrap: nowrap;\r\n  }\r\n\r\n  & > *:not(:first-child) {\r\n    border-top-left-radius: 0 !important;\r\n    border-bottom-left-radius: 0 !important;\r\n\r\n    input, .pl-input-inner {\r\n      border-top-left-radius: 0 !important;\r\n      border-bottom-left-radius: 0 !important;\r\n    }\r\n  }\r\n\r\n  & > *:not(:last-child) {\r\n    border-top-right-radius: 0 !important;\r\n    border-bottom-right-radius: 0 !important;\r\n\r\n    input, .pl-input-inner {\r\n      border-top-right-radius: 0 !important;\r\n      border-bottom-right-radius: 0 !important;\r\n    }\r\n  }\r\n\r\n  & > .pl-button {\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  & > *, & > * input {\r\n    &:hover, &:focus, &.pl-input-focus {\r\n      position: relative;\r\n      z-index: 1;\r\n    }\r\n  }\r\n\r\n  @for $i from 2 through 10 {\r\n    & > *:nth-child(#{$i}) {\r\n      margin-left: -#{$i - 1}px;\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 75
-    },
-    {
-      "name": "PlEmpty",
-      "codes": [
-        "@include theme {\r\n  .pl-empty {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: $icc;\r\n  }\r\n}\r\n"
-      ],
-      "seq": 76
-    },
-    {
-      "name": "PlTabs",
-      "codes": [
-        "@include theme {\r\n  .pl-tabs {\r\n    .pl-tabs-collector {\r\n      height: 0;\r\n      width: 0;\r\n      overflow: hidden;\r\n      display: block;\r\n    }\r\n\r\n    .pl-tabs-header-item {\r\n      cursor: pointer;\r\n      user-select: none;\r\n\r\n      .pl-icon {\r\n        margin-left: 8px;\r\n      }\r\n\r\n      &:not(.pl-tabs-header-item-active) {\r\n        .pl-icon {\r\n          color: $icc;\r\n        }\r\n      }\r\n    }\r\n\r\n    .pl-tabs-header-item-operator {\r\n      flex-grow: 1;\r\n      flex-shrink: 0;\r\n      position: sticky;\r\n      right: 4px;\r\n      height: 45px;\r\n      line-height: 45px;\r\n      padding-left: 16px;\r\n      justify-self: flex-end;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: flex-end;\r\n      background-color: white;\r\n\r\n      & > * + * {\r\n        margin-left: 4px;\r\n      }\r\n    }\r\n  }\r\n}\r\n",
-        "@include theme {\r\n  .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-card {\r\n    .pl-tabs-header-item {\r\n      line-height: 45px;\r\n      padding: 0 20px;\r\n      border-left: solid 1px $ibc;\r\n\r\n      &:last-child {\r\n        border-right: solid 1px $ibc;\r\n      }\r\n\r\n      &:hover, &.pl-tabs-header-item-active {\r\n        color: $colorPrimary;\r\n      }\r\n    }\r\n\r\n    &.pl-tabs-header-pos-top {\r\n      .pl-tabs-header-list {\r\n        border-bottom: solid 1px $ibc;\r\n\r\n        .pl-tabs-header-item {\r\n          border-top: solid 1px $ibc;\r\n\r\n          &:first-child {\r\n            border-top-left-radius: $shapeFillet;\r\n          }\r\n\r\n          &:last-child {\r\n            border-top-right-radius: $shapeFillet;\r\n          }\r\n\r\n          &.pl-tabs-header-item-active {\r\n            position: relative;\r\n\r\n            &:before {\r\n              position: absolute;\r\n              background-color: white;\r\n              left: 0;\r\n              right: 0;\r\n              top: 100%;\r\n              height: 1px;\r\n              content: '';\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-tabs-header-pos-bottom {\r\n      .pl-tabs-header-list {\r\n        border-top: solid 1px $ibc;\r\n\r\n        .pl-tabs-header-item {\r\n          border-bottom: solid 1px $ibc;\r\n\r\n          &:first-child {\r\n            border-bottom-left-radius: $shapeFillet;\r\n          }\r\n\r\n          &:last-child {\r\n            border-bottom-right-radius: $shapeFillet;\r\n          }\r\n\r\n          &.pl-tabs-header-item-active {\r\n            position: relative;\r\n\r\n            &:before {\r\n              position: absolute;\r\n              background-color: white;\r\n              left: 0;\r\n              right: 0;\r\n              bottom: 100%;\r\n              height: 1px;\r\n              content: '';\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}",
-        "@include theme {\r\n  .pl-tabs-header-horizontal {\r\n    overflow: hidden;\r\n    position: relative;\r\n\r\n    .pl-tabs-header-list {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      white-space: nowrap;\r\n      min-width: 100%;\r\n      position: relative;\r\n      transition: 300ms $transitionFlexible left;\r\n    }\r\n\r\n    .pl-tabs-header-item {\r\n      display: inline-block;\r\n      font-size: 14px;\r\n    }\r\n\r\n    &.pl-tabs-header-show-more {\r\n      padding-right: 80px;\r\n\r\n      .pl-tabs-header-more-button {\r\n        z-index: 1;\r\n        position: absolute;\r\n        background-color: rgba(white, 0.9);\r\n        right: 0;\r\n        top: 0;\r\n        bottom: 0;\r\n        width: 80px;\r\n        box-shadow: 0 2px 8px #ccc;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: $ihc;\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-tabs-head-position-top, .pl-tabs-head-position-bottom {\r\n    &.pl-tabs-fit-height {\r\n      display: flex;\r\n      flex-direction: column;\r\n      height: 100%;\r\n      flex: 1;\r\n\r\n      & > .pl-tabs-body {\r\n        flex: 1;\r\n        overflow: hidden;\r\n        display: flex;\r\n        align-items: stretch;\r\n\r\n        & > .pl-inner-tab {\r\n          flex: 1;\r\n          overflow: auto;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n",
-        "@include theme {\r\n  .pl-tabs.pl-tabs-head-type-shadow {\r\n    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);\r\n    border: solid 1px $ibl;\r\n    box-sizing: border-box;\r\n\r\n    & + * {\r\n      margin-top: 16px;\r\n    }\r\n\r\n    .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-shadow {\r\n      background-color: $disabled;\r\n\r\n      .pl-tabs-header-item {\r\n        line-height: 45px;\r\n        padding: 0 20px;\r\n        color: $itl;\r\n        box-sizing: border-box;\r\n        transition: all linear 300ms;\r\n        border-left: solid 1px transparent;\r\n        border-right: solid 1px transparent;\r\n\r\n        &:first-child {\r\n          border-left: none;\r\n        }\r\n\r\n        &:hover, &.pl-tabs-header-item-active {\r\n          color: $colorPrimary;\r\n        }\r\n\r\n        &:before {\r\n          position: absolute;\r\n          background-color: transparent;\r\n          left: 0;\r\n          right: 0;\r\n          height: 1px;\r\n          content: '';\r\n          transition: all linear 300ms;\r\n        }\r\n\r\n        &.pl-tabs-header-item-active {\r\n          position: relative;\r\n          background-color: white;\r\n          border-color: $ibl;\r\n\r\n          &:before {\r\n            background-color: white;\r\n          }\r\n        }\r\n      }\r\n\r\n      &.pl-tabs-header-pos-top {\r\n        .pl-tabs-header-list {\r\n          border-bottom: solid 1px $ibl;\r\n\r\n          .pl-tabs-header-item-active:before {\r\n            top: 100%\r\n          }\r\n        }\r\n      }\r\n\r\n      &.pl-tabs-header-pos-bottom {\r\n        .pl-tabs-header-list {\r\n          border-top: solid 1px $ibl;\r\n\r\n          .pl-tabs-header-item-active:before {\r\n            bottom: 100%\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n",
-        "@include theme {\r\n  .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-text {\r\n\r\n    .pl-tabs-header-item {\r\n      line-height: 45px;\r\n\r\n      & + .pl-tabs-header-item {\r\n        margin-left: 32px;\r\n      }\r\n\r\n      &.pl-tabs-header-item-active, &:hover {\r\n        color: $colorPrimary;\r\n      }\r\n    }\r\n\r\n    .pl-tabs-header-list {\r\n      position: relative;\r\n\r\n      .pl-tabs-header-horizontal-text-indicator-container {\r\n        background-color: $disabled;\r\n        position: absolute;\r\n        left: 0;\r\n        right: 0;\r\n        height: 2px;\r\n\r\n        .pl-tabs-header-horizontal-text-indicator {\r\n          position: absolute;\r\n          width: 0;\r\n          left: 0;\r\n          height: 100%;\r\n          background-color: $colorPrimary;\r\n          display: block;\r\n          transition: $transition 150ms all;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-tabs-header-pos-top {\r\n      .pl-tabs-header-horizontal-text-indicator-container {\r\n        bottom: 0;\r\n      }\r\n    }\r\n\r\n    &.pl-tabs-header-pos-bottom {\r\n      .pl-tabs-header-horizontal-text-indicator-container {\r\n        top: 0;\r\n      }\r\n    }\r\n  }\r\n}\r\n",
-        "@include theme {\r\n  .pl-tabs {\r\n    &.pl-tabs-head-position-left, &.pl-tabs-head-position-right {\r\n      display: flex;\r\n\r\n      .pl-tabs-body {\r\n        flex: 1;\r\n        box-sizing: border-box;\r\n      }\r\n\r\n      .pl-tabs-header {\r\n        position: relative;\r\n\r\n        .pl-tabs-header-item {\r\n          line-height: 36px;\r\n          padding: 0 16px;\r\n          position: relative;\r\n          z-index: 1;\r\n          transition: all linear 150ms;\r\n          white-space: nowrap;\r\n\r\n          &:hover {\r\n            color: $colorPrimary;\r\n          }\r\n\r\n          &.pl-tabs-header-item-active {\r\n            color: $colorPrimary;\r\n            background-color: $colorPrimaryLight;\r\n          }\r\n        }\r\n\r\n        &.pl-tabs-header-pos-left {\r\n\r\n          &:before {\r\n            position: absolute;\r\n            content: '';\r\n            right: 0;\r\n            width: 2px;\r\n            top: 0;\r\n            bottom: 0;\r\n            background-color: $ibl;\r\n          }\r\n\r\n          .pl-tabs-header-item {\r\n            text-align: right;\r\n            border-right: solid 2px transparent;\r\n\r\n            &:hover {\r\n              border-right-color: rgba($colorPrimary, 0.5);\r\n            }\r\n\r\n            &.pl-tabs-header-item-active {\r\n              border-right-color: $colorPrimary;\r\n            }\r\n          }\r\n        }\r\n\r\n        &.pl-tabs-header-pos-right {\r\n          &:before {\r\n            position: absolute;\r\n            content: '';\r\n            left: 0;\r\n            width: 2px;\r\n            top: 0;\r\n            bottom: 0;\r\n            background-color: $ibl;\r\n          }\r\n\r\n          .pl-tabs-header-item {\r\n            text-align: left;\r\n            border-left: solid 2px transparent;\r\n\r\n            &:hover {\r\n              border-left-color: rgba($colorPrimary, 0.5);\r\n            }\r\n\r\n            &.pl-tabs-header-item-active {\r\n              border-left-color: $colorPrimary;\r\n            }\r\n          }\r\n        }\r\n      }\r\n\r\n      &.pl-tabs-fit-height {\r\n        height: 100%;\r\n        flex: 1;\r\n        align-items: stretch;\r\n\r\n        & > .pl-tabs-header {\r\n          overflow: auto;\r\n        }\r\n\r\n        & > .pl-tabs-body {\r\n          overflow: hidden;\r\n          display: flex;\r\n          align-items: stretch;\r\n\r\n          & > .pl-inner-tab {\r\n            flex: 1;\r\n            overflow: auto;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.pl-tabs-head-position-left {\r\n      .pl-tabs-body {\r\n        padding-left: 16px;\r\n      }\r\n    }\r\n\r\n    &.pl-tabs-head-position-right {\r\n      .pl-tabs-body {\r\n        padding-right: 16px;\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 80
-    },
-    {
-      "name": "PlTab",
-      "codes": [
-        "@include theme {\r\n  /*.pl-inner-tab {\r\n    transform-origin: left top;\r\n    transition: all 500ms $transition;\r\n  }*/\r\n}\r\n"
-      ],
-      "seq": 81
-    },
-    {
-      "name": "useContextmenu",
-      "codes": [
-        "@include theme {\r\n  .pl-contextmenu-service {\r\n    position: fixed;\r\n\r\n    .pl-contextmenu-service-body {\r\n      transition: all $transition 150ms;\r\n      transform-origin: top left;\r\n      box-sizing: border-box;\r\n      box-shadow: $boxshadow;\r\n      padding: 4px 0;\r\n      border: solid 1px $ibc;\r\n\r\n      .pl-dropdown-option {\r\n        font-size: 12px;\r\n        color: $itc;\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 85
-    },
-    {
-      "name": "useDialog",
-      "codes": [
-        ".pl-dialog-service-edit {\r\n  .pl-dialog-content {\r\n    & > .pl-textarea {\r\n      display: block !important;\r\n      height: 100%;\r\n\r\n      .pl-textarea-inner {\r\n        height: 100%;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n@include theme {\r\n  .pl-dialog-service {\r\n    @include statusMixin(dialog-service) {\r\n      .pl-dialog-head {\r\n        background-color: rgba($value, 0.05);\r\n        color: $value;\r\n        /*position: relative;\r\n\r\n        &:after {\r\n          position: absolute;\r\n          left: 0;\r\n          right: 0;\r\n          top: 0;\r\n          height: 4px;\r\n          background-color: $value;\r\n          content: '';\r\n        }*/\r\n        border-top: solid 4px rgba($value, 0.85);\r\n\r\n        .pl-dialog-service-head {\r\n          color: $value;\r\n\r\n          .pl-dialog-service-status-icon {\r\n            font-size: 18px;\r\n            margin-right: 4px;\r\n            vertical-align: -0.25em;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}"
-      ],
-      "seq": 86
-    },
-    {
-      "name": "useLoading",
-      "codes": [
-        "@include theme {\r\n    .pl-loading-bar-manager {\r\n        position: fixed;\r\n        z-index: 9999;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        pointer-events: none;\r\n\r\n        .pl-loading-bar-service {\r\n            display: block;\r\n            transition: all 300ms linear;\r\n            position: relative;\r\n            overflow: hidden;\r\n            border-radius: 100px;\r\n            margin-bottom: 1px;\r\n\r\n            &:after {\r\n                position: absolute;\r\n                content: '';\r\n                top: 0;\r\n                left: -100vw;\r\n                width: 300vw;\r\n                bottom: 0;\r\n                animation: pl-loading-bar-processing 30s infinite linear;\r\n            }\r\n\r\n            @include statusMixin(loading-bar-service) {\r\n                background-color: rgba($value, 0.5);\r\n                &:after {\r\n                    background: linear-gradient(\r\n                            45deg,\r\n                            $value 0, $value 25%,\r\n                            rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%,\r\n                            $value 50%, $value 75%,\r\n                            rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%\r\n                    );\r\n                    background-size: 20px 20px;\r\n                }\r\n            }\r\n        }\r\n\r\n        @keyframes pl-loading-bar-processing {\r\n            0% {\r\n                transform: translateX(0);\r\n            }\r\n            50% {\r\n                transform: translateX(50vw);\r\n            }\r\n            100% {\r\n                transform: translateX(100vw);\r\n            }\r\n        }\r\n    }\r\n}"
-      ],
-      "seq": 88
-    },
-    {
-      "name": "useMessage",
-      "codes": [
-        "@include theme {\r\n  .pl-message-manager {\r\n    pointer-events: none;\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: 9999;\r\n  }\r\n  .pl-message-container {\r\n    pointer-events: none;\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    height: 100vh;\r\n    width: 100vw;\r\n    display: flex;\r\n    flex-direction: column;\r\n    box-sizing: border-box;\r\n\r\n    @each $horizontal in (start, center, end) {\r\n      @each $vertical in (start, center, end) {\r\n        &.pl-message-container-#{$horizontal}-#{$vertical} {\r\n          @if $vertical  == center {\r\n            justify-content: center;\r\n          } @else {\r\n            justify-content: flex-#{$vertical};\r\n          }\r\n\r\n          & > .pl-list {\r\n            & > .pl-item {\r\n              margin-bottom: 8px;\r\n              width: 100%;\r\n              $textAlign: center;\r\n              @if ($horizontal == \"start\") {\r\n                $textAlign: left;\r\n              }\r\n              @if ($horizontal == \"end\") {\r\n                $textAlign: right;\r\n              }\r\n              text-align: $textAlign;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  .pl-message {\r\n    text-align: initial;\r\n    padding: 12px 20px;\r\n    white-space: nowrap;\r\n    background-color: white;\r\n    pointer-events: auto;\r\n    display: inline-flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    font-size: 14px;\r\n    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\r\n    position: relative;\r\n\r\n    .pl-icon {\r\n      &:not(.pl-message-close) + * {\r\n        margin-left: 8px;\r\n      }\r\n    }\r\n\r\n    .pl-message-close {\r\n      position: absolute;\r\n      right: 0;\r\n      top: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      opacity: 0;\r\n      transition: opacity 300ms linear;\r\n      width: 20px;\r\n      height: 28px;\r\n    }\r\n\r\n    &:hover {\r\n      .pl-message-close {\r\n        opacity: initial\r\n      }\r\n    }\r\n\r\n    .pl-message-content {\r\n      max-width: 75vw;\r\n      display: inline-block;\r\n      white-space: normal;\r\n    }\r\n\r\n    .pl-message-close {\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n\r\n    @include statusMixin(message) {\r\n      .pl-icon {\r\n        color: $value;\r\n      }\r\n    }\r\n\r\n    &.pl-message-status-dark {\r\n      background-color: #383838;\r\n      border-color: #383838;\r\n      color: white;\r\n    }\r\n\r\n    &.pl-message-status-lite {\r\n      background-color: white;\r\n      border-color: #ddd;\r\n      color: $itc;\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 89
-    },
-    {
-      "name": "useNotice",
-      "codes": [
-        "@include theme {\r\n    .pl-notice-manager {\r\n        pointer-events: none;\r\n\r\n        .pl-notice-container {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            z-index: 9999;\r\n            display: flex;\r\n            flex-direction: column;\r\n            box-sizing: border-box;\r\n\r\n            @each $horizontal in (start, end) {\r\n                @each $vertical in (start, end) {\r\n                    &.pl-notice-container-#{$horizontal}-#{$vertical} {\r\n                        justify-content: flex-#{$vertical};\r\n\r\n                        & > .pl-list {\r\n                            & > .pl-item {\r\n                                width: 100%;\r\n                                $textAlign: center;\r\n                                @if ($horizontal == \"start\") {\r\n                                    $textAlign: left;\r\n                                }\r\n                                @if ($horizontal == \"end\") {\r\n                                    $textAlign: right;\r\n                                }\r\n                                text-align: $textAlign;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .pl-notice {\r\n        text-align: initial;\r\n        pointer-events: auto;\r\n        background-color: white;\r\n        display: inline-block;\r\n        padding: 8px 24px 16px 24px;\r\n        box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);\r\n        width: 384px;\r\n        max-width: calc(100vw - 48px);\r\n        margin-bottom: 16px;\r\n        box-sizing: border-box;\r\n        border-radius: 2px;\r\n\r\n        .pl-notice-head {\r\n            display: flex;\r\n            align-items: center;\r\n            position: relative;\r\n\r\n            .pl-notice-title {\r\n                flex: 1;\r\n                padding: 8px 0;\r\n                font-size: 14px;\r\n                color: $ihc;\r\n            }\r\n\r\n            .pl-notice-close {\r\n                font-size: 18px;\r\n                color: $icc;\r\n                position: relative;\r\n                right: -8px;\r\n            }\r\n\r\n            .pl-notice-head-icon {\r\n                position: absolute;\r\n                font-size: 20px;\r\n                left: -24px;\r\n                top: 0;\r\n                transform: translate(-55%, 25%);\r\n                background-color: white;\r\n                border-radius: 100px;\r\n                padding: 1px;\r\n            }\r\n        }\r\n\r\n        .pl-notice-content {\r\n            font-size: 12px;\r\n            padding-top: 8px;\r\n            color: $itc;\r\n            line-height: 1.5715;\r\n        }\r\n\r\n        .pl-notice-foot {\r\n            display: flex;\r\n            justify-content: flex-end;\r\n            align-items: center;\r\n            padding-top: 16px;\r\n\r\n            & > * {\r\n                & + * {\r\n                    margin-left: 8px;\r\n                }\r\n            }\r\n        }\r\n\r\n        @include statusMixin(notice) {\r\n            border-left: 3px $value solid;\r\n            .pl-notice-title {\r\n                color: $value;\r\n            }\r\n            .pl-notice-head-icon {\r\n                background-color: $value;\r\n                color: white;\r\n            }\r\n        }\r\n    }\r\n}"
-      ],
-      "seq": 90
-    },
-    {
-      "name": "createUseTableOption",
-      "codes": [
-        "@include theme {\r\n  .pro-column-filter-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    width: 360px;\r\n    padding: 0 12px;\r\n\r\n    & > div {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin: 4px 0;\r\n\r\n      & > .pl-filter {\r\n        width: 100%;\r\n        display: flex;\r\n      }\r\n\r\n      .pl-button-group {\r\n        width: 100%;\r\n        display: flex;\r\n\r\n        .pl-button:not(.pl-button-icon-only) {\r\n          flex: 1;\r\n        }\r\n      }\r\n\r\n      & > .pl-button {\r\n        flex: 1;\r\n\r\n        &:first-child {\r\n          margin-right: 2px;\r\n        }\r\n\r\n        &:last-child {\r\n          margin-left: 2px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .pro-column-filter-sort-container {\r\n      background-color: $ibl;\r\n      height: plv(sizeNormal);\r\n      border-radius: 100px;\r\n      width: 100%;\r\n      display: flex;\r\n      align-items: stretch;\r\n      box-sizing: border-box;\r\n      padding: 2px;\r\n\r\n      & > div {\r\n        flex: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        position: relative;\r\n        border-radius: 100px;\r\n        cursor: pointer;\r\n        background-color: $ibl;\r\n        transition: background-color 300ms linear;\r\n\r\n        &:hover {\r\n          background-color: #fcfcfc;\r\n        }\r\n\r\n        &.pro-column-filter-sort-item-active {\r\n          background-color: white;\r\n          box-shadow: 0 2px 8px #ddd;\r\n          color: $colorPrimary;\r\n        }\r\n\r\n      }\r\n    }\r\n  }\r\n}\r\n",
-        "@include theme {\r\n  .pl-table-pro-setting-export {\r\n    .pl-table-pro-setting-export-option {\r\n      padding: 12px 12px 12px 50px;\r\n      transition: background-color linear 300ms;\r\n      position: relative;\r\n\r\n      &:hover {\r\n        background-color: $colorPrimaryLight;\r\n        cursor: pointer;\r\n      }\r\n\r\n      &:not(:first-child) {\r\n        border-top: solid 1px $ibl;\r\n      }\r\n\r\n      .pl-table-pro-setting-export-option-radio {\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        left: 0;\r\n        width: 50px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n      }\r\n\r\n      .pl-table-pro-setting-export-option-title {\r\n        font-size: 16px;\r\n        margin-bottom: 8px;\r\n      }\r\n\r\n      .pl-table-pro-setting-export-option-desc {\r\n        font-size: 12px;\r\n        color: $icc;\r\n      }\r\n    }\r\n\r\n    .pl-table-pro-setting-export-foot {\r\n      text-align: center;\r\n      margin-top: 20px;\r\n\r\n      .pl-button + .pl-button {\r\n        margin-left: 8px;\r\n      }\r\n    }\r\n\r\n    .pl-table-pro-setting-export-loading {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n\r\n      .pl-loading, .pl-icon {\r\n        font-size: 32px;\r\n      }\r\n\r\n      & > span {\r\n        color: $icc;\r\n      }\r\n\r\n      & > * {\r\n        margin-bottom: 24px;\r\n      }\r\n    }\r\n  }\r\n}\r\n",
-        "@include theme {\r\n  .pl-table-pro-distinct-filter-item {\r\n    display: flex;\r\n    align-items: stretch;\r\n    line-height: 28px;\r\n\r\n    padding: 8px 0;\r\n\r\n    background-color: white;\r\n    transition: background-color 300ms linear;\r\n\r\n    &:not(:last-child) {\r\n      border-bottom: solid 1px $ibl;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: #f6f6f6;\r\n    }\r\n\r\n    .pl-table-pro-distinct-filter-item-title {\r\n      color: $colorPrimary;\r\n      margin: 0 8px;\r\n    }\r\n\r\n    .pl-table-pro-distinct-filter-item-tags {\r\n\r\n      cursor: pointer;\r\n\r\n      & > div {\r\n        display: inline-block;\r\n        font-size: 12px;\r\n        background-color: $colorPrimaryLight;\r\n        padding: 0 12px;\r\n        margin: 1px 2px;\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n    .pl-table-pro-distinct-filter-item-button {\r\n\r\n    }\r\n  }\r\n}\r\n",
-        ".pl-table-pro-setting-config {\r\n  .pl-table-pro-setting-config-button {\r\n    margin-bottom: 16px;\r\n\r\n    & > * {\r\n      margin-right: 8px;\r\n    }\r\n  }\r\n}\r\n",
-        ".pl-table-pro-setting-senior-filter {\r\n  .pl-table-pro-setting-senior-filter-button {\r\n    display: flex;\r\n    justify-content: space-between;\r\n\r\n    .pl-button + * {\r\n      margin-left: 8px;\r\n    }\r\n  }\r\n\r\n  .pl-table-pro-setting-senior-filter-item {\r\n    margin-bottom: 16px;\r\n\r\n    .pl-table-pro-setting-senior-filter-item-id {\r\n      width: 80px;\r\n      display: inline-block;\r\n      text-align: center;\r\n    }\r\n\r\n    .pl-table-pro-setting-senior-filter-item-content {\r\n      width: calc(100% - 80px);\r\n      display: inline-block;\r\n    }\r\n  }\r\n}\r\n",
-        "@include theme {\r\n  .pl-table-pro-setting-all-filter {\r\n\r\n    background-color: #fafafa;\r\n    min-height: 100%;\r\n    width: 100%;\r\n    display: inline-block;\r\n    box-sizing: border-box;\r\n    padding: 16px;\r\n\r\n    & > * {\r\n      margin-bottom: 16px;\r\n\r\n      &:first-child {\r\n        text-align: right;\r\n      }\r\n    }\r\n\r\n    .pl-table-pro-setting-all-filter-item {\r\n      background-color: white;\r\n      box-sizing: border-box;\r\n      border-radius: 2px;\r\n      box-shadow: 1px 1px 8px 1px #e2e3e4;\r\n\r\n      .pl-table-pro-setting-all-filter-item-head {\r\n        font-size: 16px;\r\n        font-weight: 600;\r\n        border-bottom: solid 1px $ibl;\r\n        padding: 16px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n      }\r\n\r\n      .pl-table-pro-setting-all-filter-item-body {\r\n        padding: 16px;\r\n      }\r\n    }\r\n  }\r\n\r\n}\r\n",
-        "@include theme {\r\n  .pl-table-pro-setting {\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: stretch;\r\n\r\n    $nav-bg: #fcfcfc;\r\n\r\n    .pl-table-pro-setting-nav {\r\n      background-color: $nav-bg;\r\n      display: flex;\r\n      flex-direction: column;\r\n\r\n      .pl-table-pro-setting-nav-item:last-child {\r\n        flex: 1;\r\n      }\r\n\r\n      .pl-table-pro-setting-nav-item {\r\n        padding: 12px 24px;\r\n        cursor: pointer;\r\n        background-color: white;\r\n        position: relative;\r\n\r\n        .pl-table-pro-setting-nav-item-inner {\r\n          position: relative;\r\n          z-index: 1;\r\n        }\r\n\r\n        &:hover, &.pl-table-pro-setting-nav-item-active {\r\n          color: $colorPrimary;\r\n        }\r\n\r\n        &.pl-table-pro-setting-nav-item-active {\r\n          &:after {\r\n            position: absolute;\r\n            content: '';\r\n            top: 0;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 2px;\r\n            background-color: $colorPrimary;\r\n          }\r\n        }\r\n\r\n        &.pl-table-pro-setting-nav-item-prev {\r\n          &:before {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            border-bottom-right-radius: 4px;\r\n            background-color: $nav-bg;\r\n            content: '';\r\n            border-bottom: solid 1px $ibl;\r\n            border-right: solid 1px $ibl;\r\n          }\r\n        }\r\n\r\n        &.pl-table-pro-setting-nav-item-next {\r\n          &:before {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            border-top-right-radius: 4px;\r\n            background-color: $nav-bg;\r\n            content: '';\r\n            border-top: solid 1px $ibl;\r\n            border-right: solid 1px $ibl;\r\n          }\r\n        }\r\n\r\n        &:not(.pl-table-pro-setting-nav-item-prev):not(.pl-table-pro-setting-nav-item-next):not(.pl-table-pro-setting-nav-item-active) {\r\n          background-color: $nav-bg;\r\n          border-right: solid 1px $ibl;\r\n        }\r\n      }\r\n    }\r\n\r\n    .pl-table-pro-setting-content {\r\n      flex: 1;\r\n      overflow-y: scroll;\r\n      overflow-x: hidden;\r\n      width: 650px;\r\n      box-sizing: border-box;\r\n\r\n      &.pl-table-pro-setting-content-pending {\r\n        padding: 16px;\r\n      }\r\n\r\n      &::-webkit-scrollbar {\r\n        background: white;\r\n        width: 6px;\r\n        height: 6px;\r\n      }\r\n\r\n      &::-webkit-scrollbar-thumb {\r\n        background: rgba(black, 0.25);\r\n        border-radius: 6px;\r\n      }\r\n\r\n      .pl-table-pro-setting-content-header {\r\n        text-align: right;\r\n\r\n        & > .pl-button + .pl-button {\r\n          margin-left: 8px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 92
-    },
-    {
-      "name": "PlTablePro",
-      "codes": [
-        ".pl-table-pro-pagination {\r\n  padding: 16px 24px;\r\n\r\n  .pl-pagination {\r\n    justify-content: flex-end;\r\n  }\r\n}\r\n\r\n.pl-table-pro-head {\r\n  font-size: 14px;\r\n  height: 56px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 0 24px;\r\n\r\n  .pl-table-pro-title {\r\n    .pl-icon {\r\n      margin-right: 4px;\r\n    }\r\n  }\r\n\r\n  .pl-table-pro-operation {\r\n    min-width: 350px;\r\n    text-align: right;\r\n\r\n    & > .pl-button {\r\n      margin-left: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.pl-table-pro-fill {\r\n  height: 100%;\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .pl-table-pro-base-table {\r\n    flex: 1;\r\n    overflow: hidden;\r\n  }\r\n}\r\n"
-      ],
-      "seq": 115
-    },
-    {
-      "name": "PlFilter",
-      "codes": [
-        ".pl-filter {\r\n  &.pl-input-group-block {\r\n    & > *:not(.pl-filter-ele) {\r\n      flex: 1;\r\n\r\n      & > .pl-input-inner {\r\n        width: 100%;\r\n      }\r\n    }\r\n  }\r\n}\r\n"
-      ],
-      "seq": 9999
-    },
-    {
-      "name": "no component!",
-      "codes": [
-        "$size: 1em;\r\n\r\n.plain-loading {\r\n  display: inline-block;\r\n  vertical-align: -0.15em;\r\n\r\n  /*---------------------------------------svg-------------------------------------------*/\r\n  &.plain-loading-ice {\r\n    stroke: currentColor;\r\n    stroke-width: 4;\r\n\r\n    & > svg {\r\n      width: $size;\r\n      height: $size;\r\n      display: block;\r\n    }\r\n\r\n    svg:not(.plain-loading-ice-inactive) {\r\n      @keyframes ice-svg-item {\r\n        0% {\r\n          opacity: 1;\r\n        }\r\n        @for $i from 2 through 5 {\r\n          #{($i - 1) / 5 * 100}% {\r\n            opacity: 1 - ($i - 1) / 5;\r\n          }\r\n        }\r\n        100% {\r\n          opacity: 0;\r\n        }\r\n      }\r\n\r\n      use {\r\n        opacity: 0;\r\n        @for $i from 1 through 6 {\r\n          &:nth-child(#{$i}) {\r\n            animation: ice-svg-item 1s linear infinite #{ ($i - 1) / 6}s;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n  }\r\n\r\n  /*---------------------------------------alpha-------------------------------------------*/\r\n  &.plain-loading-alpha {\r\n    height: $size;\r\n    width: $size;\r\n\r\n    .plain-loading-tag {\r\n      $centerRadius: (0.5*$size)/1.2;\r\n      $itemWidth: (0.35*$size)/1.2;\r\n      $itemHeight: (0.1*$size)/1.2;\r\n      $width: $centerRadius + $itemWidth * 2;\r\n      $height: $width;\r\n\r\n      width: $width;\r\n      height: $height;\r\n      position: relative;\r\n      display: block;\r\n\r\n      .plain-loading-inner {\r\n        background-color: currentColor;\r\n        display: inline-block;\r\n        width: $itemWidth;\r\n        height: $itemHeight;\r\n        margin-top: $itemHeight / 2 * -1;\r\n        margin-left: $centerRadius / 2;\r\n        top: 50%;\r\n        left: 50%;\r\n        position: absolute;\r\n        transform-origin: ($centerRadius / 2 * -1) ($itemHeight / 2);\r\n        border-radius: 1px;\r\n        @for $i from 1 through 12 {\r\n          &:nth-child(#{$i}) {\r\n            transform: rotate(($i - 1) * 30deg);\r\n            animation: plain-loading-tag 1s linear infinite #{-1 + $i / 12}s;\r\n          }\r\n        }\r\n        @keyframes plain-loading-tag {\r\n          0% {\r\n            opacity: 1;\r\n          }\r\n          @for $i from 1 through 11 {\r\n            #{$i / 12 * 100}% {\r\n              opacity: 1 - $i / 12;\r\n            }\r\n          }\r\n          100% {\r\n            opacity: 1;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /*---------------------------------------beta-------------------------------------------*/\r\n  $tagSize: $size/5;\r\n  $tagNum: 10;\r\n\r\n  &.plain-loading-beta {\r\n    height: $size;\r\n    width: $size;\r\n    position: relative;\r\n\r\n    .plain-loading-tag {\r\n      position: absolute;\r\n      height: 50%;\r\n      width: $tagSize;\r\n      left: ($size - $tagSize)/2;\r\n      transform-origin: bottom;\r\n      display: inline-flex;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n\r\n      .plain-loading-inner {\r\n        display: inline-block;\r\n        height: $tagSize;\r\n        width: $tagSize;\r\n        border-radius: 100px;\r\n        background-color: currentColor;\r\n      }\r\n\r\n      @for $i from 1 through $tagNum {\r\n        &.plain-loading-tag-#{$i} {\r\n          transform: rotate(($i - 1)*(360 / $tagNum)*1deg);\r\n          animation: plain-loading-beta 1s linear infinite #{-1 + $i / $tagNum}s;\r\n        }\r\n      }\r\n\r\n      @keyframes plain-loading-beta {\r\n        0% {\r\n          opacity: 1;\r\n        }\r\n        @for $i from 1 through 11 {\r\n          #{$i / $tagNum * 100}% {\r\n            opacity: 1 - $i / $tagNum;\r\n          }\r\n        }\r\n        100% {\r\n          opacity: 1;\r\n        }\r\n      }\r\n\r\n      @for $i from 1 through $tagNum {\r\n        .plain-loading-inner-#{$i} {\r\n          animation: plain-loading-beta-inner 1s linear infinite #{-1 + $i / $tagNum}s;\r\n        }\r\n      }\r\n\r\n      @keyframes plain-loading-beta-inner {\r\n        0% {\r\n          transform: scale(1);\r\n        }\r\n        @for $i from 1 through 11 {\r\n          #{$i / $tagNum * 100}% {\r\n            transform: scale((1 - $i / $tagNum)*0.75 +0.25);\r\n          }\r\n        }\r\n        100% {\r\n          transform: scale(1);\r\n        }\r\n      }\r\n    }\r\n\r\n  }\r\n\r\n  /*---------------------------------------gamma-------------------------------------------*/\r\n  $tagSize: $size/5;\r\n  $tagNum: 5;\r\n\r\n  &.plain-loading-gamma {\r\n    height: $size;\r\n    width: $size;\r\n    position: relative;\r\n    animation: plain-loading-gamma 5s linear infinite;\r\n\r\n    @keyframes plain-loading-gamma {\r\n      from {\r\n        transform: rotate(0deg);\r\n      }\r\n      to {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n\r\n    .plain-loading-tag {\r\n      position: absolute;\r\n      height: 50%;\r\n      width: $tagSize;\r\n      left: ($size - $tagSize)/2;\r\n      transform-origin: bottom;\r\n      display: inline-flex;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n\r\n      .plain-loading-inner {\r\n        background-color: currentColor;\r\n        display: inline-block;\r\n        height: $tagSize;\r\n        width: $tagSize;\r\n        border-radius: $tagSize;\r\n      }\r\n\r\n      @for $i from 1 through $tagNum {\r\n        &.plain-loading-tag-#{$i} {\r\n          animation: plain-loading-gamma-tag 2s cubic-bezier(.31, .64, .47, .81) infinite #{$i*0.1}s;\r\n        }\r\n      }\r\n\r\n      @keyframes plain-loading-gamma-tag {\r\n        0% {\r\n          transform: rotate(0deg);\r\n        }\r\n        85% {\r\n          transform: rotate(360deg);\r\n        }\r\n        100% {\r\n          transform: rotate(360deg);\r\n        }\r\n      }\r\n\r\n      @for $i from 1 through $tagNum {\r\n        .plain-loading-inner-#{$i} {\r\n          transform: scale((1 - $i / $tagNum)*0.5+0.5);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /*---------------------------------------delta-------------------------------------------*/\r\n\r\n  @keyframes loading-dash {\r\n    0% {\r\n      stroke-dasharray: 10, 300;\r\n      stroke-dashoffset: 0;\r\n    }\r\n    50% {\r\n      stroke-dasharray: 200, 300;\r\n      stroke-dashoffset: -100;\r\n    }\r\n    100% {\r\n      stroke-dasharray: 200, 300;\r\n      stroke-dashoffset: -300;\r\n    }\r\n  }\r\n\r\n  @keyframes loading-rotate {\r\n    0% {\r\n      transform: rotate(0);\r\n    }\r\n    100% {\r\n      transform: rotate(360deg);\r\n    }\r\n  }\r\n\r\n  &.plain-loading-delta {\r\n    svg {\r\n      height: 1em;\r\n      width: 1em;\r\n      animation: loading-rotate 2s linear infinite;\r\n\r\n      circle{\r\n        animation: loading-dash 1.5s ease-in-out infinite;\r\n        stroke: currentColor;\r\n        fill: transparent;\r\n        stroke-width: 5;\r\n\r\n        stroke-dasharray: 200, 300;\r\n        stroke-dashoffset: -100;\r\n\r\n        stroke-linecap: round;\r\n\r\n      }\r\n    }\r\n  }\r\n}\r\n",
-        "$waves: (\r\n    large:6px,\r\n    normal:4px,\r\n    mini:2,\r\n);\r\n\r\n@include theme {\r\n    @each $key, $value in $waves {\r\n        [plain-click-node-#{$key}] {\r\n            &.plain-click-node, & .plain-click-node {\r\n                position: relative;\r\n\r\n                &:after {\r\n                    display: none;\r\n\r\n                    content: '';\r\n                    position: absolute;\r\n                    top: 1px;\r\n                    left: 1px;\r\n                    bottom: 1px;\r\n                    right: 1px;\r\n                    border-radius: inherit;\r\n                    border: 0 solid $colorPrimary;\r\n                    opacity: 0.6;\r\n                    animation: fade-effect-#{$key} 2s cubic-bezier(0.08, 0.82, 0.17, 1), wave-effect-#{$key} 500ms cubic-bezier(0.08, 0.82, 0.17, 1);\r\n                    animation-fill-mode: forwards;\r\n                    pointer-events: none;\r\n                }\r\n            }\r\n\r\n            &[plain-click-node-waving] {\r\n                &.plain-click-node, & .plain-click-node {\r\n                    &:after {\r\n                        display: initial;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        @keyframes wave-effect-#{$key} {\r\n            100% {\r\n                top: -$value;\r\n                left: -$value;\r\n                bottom: -$value;\r\n                right: -$value;\r\n                border-width: 6px;\r\n            }\r\n        }\r\n\r\n        @keyframes fade-effect-#{$key} {\r\n            100% {\r\n                opacity: 0;\r\n            }\r\n        }\r\n    }\r\n}"
-      ],
-      "seq": 9999
-    }
-  ]
-}