bk-magic-vue/lib/ui/steps.min.css.map

基于蓝鲸 Magicbox 和 Vue 的前端组件库

{"version":3,"sources":["steps.css","mixins/ellipsis.css"],"names":[],"mappings":"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","file":"steps.min.css","sourcesContent":["@import './variable.css';\n@import './mixins/ellipsis';\n\n/* usage: @mixin get-theme red; */\n@define-mixin get-theme $theme {\n  .bk-step {\n    &.done {\n      .bk-step-number,\n      .bk-step-icon {\n        border-color: $theme;\n        color: $theme;\n      }\n\n      /* horizontal */\n      .bk-step-title,\n      .bk-step-indicator {\n        &::after {\n          background-image: linear-gradient(to right, $theme 50%, transparent 0%);\n        }\n      }\n\n      /* vertical */\n      &::after {\n        background-image: linear-gradient($theme 50%, transparent 0%);\n      }\n\n      &:has(+ .current.bk-step-error) {\n        .bk-step-title,\n        .bk-step-indicator {\n          &::after {\n            background-image: linear-gradient(to right, $newRedColor 50%, transparent 0%);\n          }\n        }\n      }\n      &:has(+ .current.bk-step-error) {\n        &::after {\n          background-image: linear-gradient($newRedColor 50%, transparent 0%);\n        }\n      }\n    }\n    &.current {\n      .bk-step-number,\n      .bk-step-icon,\n      .bk-step-text {\n        background-color: $theme;\n        border-color: $theme;\n        color: #fff;\n      }\n    }\n  }\n}\n\n@define-mixin after-line {\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 12px;\n    width: 99999px;\n    height: 1px;\n    background-color: transparent;\n  }\n}\n\n@keyframes loadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.bk-steps {\n  display: table;\n  width: 100%;\n  display: flex;\n  font-size: 0;\n  .bk-icon {\n    font-size: $iconLargeSize;\n    line-height: 24px;\n\n    &.icon-loading {\n      display: inline-block;\n      animation: loadingCircle 1s infinite linear;\n      font-size: $iconSmallestSize;\n    }\n  }\n  @mixin get-theme $newMainColor;\n  .bk-step {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    white-space: nowrap;\n    margin-right: 16px;\n    .bk-step-indicator {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      padding: 0;\n      margin-right: 8px;\n      border: 1px solid #979ba5;\n      border-radius: 50%;\n      line-height: 24px;\n      color: #979ba5;\n      text-align: center;\n      background-color: #fff;\n      z-index: 1;\n      vertical-align: top;\n    }\n    .bk-step-number {\n      font-size: 14px;\n      font-family: arial;\n    }\n    .bk-step-content {\n      display: inline-block;\n      vertical-align: top;\n    }\n    .bk-step-title {\n      display: inline-block;\n      position: relative;\n      color: #63656e;\n      font-size: 14px;\n      word-break: break-all;\n      padding-right: 16px;\n      line-height: 24px;\n      @mixin after-line;\n    }\n    .bk-step-description {\n      font-size: 12px;\n      color: #979ba5;\n      max-width: 140px;\n      white-space: normal;\n      @mixin ellipsis 140px, block;\n    }\n    &.bk-step-no-content {\n      .bk-step-indicator {\n        margin-right: 0;\n        @mixin after-line;\n        &::after {\n          left: 32px;\n          top: 10px;\n        }\n      }\n    }\n    &:last-child {\n      flex: none;\n      margin-right: 0;\n      .bk-step-title {\n        padding-right: 0;\n        &::after {\n          display: none;\n        }\n      }\n    }\n    &.done {\n      .bk-step-title {\n        color: $fnMainColor;\n      }\n      .bk-step-description {\n        color: #979ba5;\n      }\n    }\n    &.current {\n      .bk-step-number,\n      .bk-step-icon,\n      .bk-step-text {\n        border-width: 2px;\n      }\n      .bk-step-title,\n      .bk-step-description {\n        color: $fnMainColor;\n      }\n\n      &.bk-step-error {\n        .bk-step-indicator {\n          background-color: $newRedColor1;\n          border-color: $newRedColor1;\n        }\n        .bk-step-title,\n        .bk-step-description {\n          color: $newRedColor1;\n        }\n      }\n    }\n  }\n  &-info {\n    @mixin get-theme $infoColor;\n  }\n  &-success {\n    @mixin get-theme $newGreenColor;\n  }\n  &-warning {\n    @mixin get-theme $newOrangeColor;\n  }\n  &-danger {\n    @mixin get-theme $newRedColor;\n  }\n\n  &-dashed {\n    .bk-step {\n      .bk-step-title,\n      .bk-step-indicator {\n        &::after {\n          background-image: linear-gradient(to right, $newGreyColor 50%, transparent 0%);\n          background-position: bottom;\n          background-size: 6px 1px;\n          background-repeat: repeat-x;\n        }\n      }\n    }\n  }\n\n  &-solid {\n    .bk-step {\n      .bk-step-title,\n      .bk-step-indicator {\n        &::after {\n          background-color: $newGreyColor;\n        }\n      }\n    }\n  }\n\n  &-vertical {\n    flex-direction: column;\n    height: 100%;\n    .bk-step {\n      margin-bottom: 16px;\n      margin-right: 0;\n      .bk-step-title,\n      .bk-step-indicator {\n        &::after {\n          display: none;\n        }\n      }\n      &::after {\n        content: '';\n        position: absolute;\n        left: 12px;\n        top: 40px;\n        height: 100%;\n        width: 1px;\n        background-image: linear-gradient($newGreyColor 50%, transparent 0%);\n        background-position: right;\n        background-size: 1px 6px;\n        background-repeat: repeat-y;\n      }\n      .bk-step-title {\n        display: flex;\n        height: 100%;\n        align-items: center;\n        text-align: left;\n        margin-top: 0;\n      }\n    }\n  }\n\n  &-small {\n    .bk-step {\n      .bk-step-indicator {\n        width: 20px;\n        height: 20px;\n        line-height: 20px;\n      }\n\n      .bk-step-title {\n        font-size: 12px;\n        line-height: 20px;\n      }\n\n      .bk-step-number {\n        font-size: 12px;\n      }\n\n      .bk-icon {\n        font-size: 12px;\n        line-height: 20px;\n      }\n\n      &::after {\n        left: 10px;\n        top: 28px;\n      }\n\n      .bk-step-title {\n        &::after {\n          top: 10px;\n        }\n      }\n\n      &.bk-step-no-content {\n        .bk-step-indicator {\n          &::after {\n            left: 28px;\n            top: 8px;\n          }\n        }\n      }\n    }\n  }\n}\n","/**\n * @file ellipsis mixin\n *\n * usage:\n *      @mixin ellipsis 100px;\n */\n\n@define-mixin ellipsis $maxWidth, $display: inline-block {\n    display: $display;\n    max-width: $maxWidth;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n"]}