mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-02 15:27:18 +00:00
448 lines
13 KiB
SCSS
448 lines
13 KiB
SCSS
////
|
|
/// @module step: 步骤
|
|
/// @tag Step
|
|
/// @category component
|
|
/// @family navigation
|
|
/// @varPrefix $step-
|
|
/// @classPrefix {prefix}-step
|
|
/// @order {"size/bounding":10,"size/text":11,"size/node":12,"size/divider":13,"size/content":14,"size/dot":15,"statement/awaiting":10,"statement/awaiting/arrow":100,"statement/awaiting/node":101,"statement/awaiting/divider":102,"statement/awaiting/content":103,"statement/processing":11,"statement/processing/arrow":110,"statement/processing/node":111,"statement/processing/divider":112,"statement/processing/content":113,"statement/finished":12,"statement/finished/arrow":120,"statement/finished/node":121,"statement/finished/divider":122,"statement/finished/content":123,"statement/disabled":13,"statement/disabled/arrow":130,"statement/disabled/node":131,"statement/disabled/divider":132,"statement/disabled/content":133,"statement/normal":14,"statement/normal/content":140}
|
|
////
|
|
|
|
$step-prefix: '.' + $css-prefix + 'step';
|
|
|
|
$step-icon-prefix: '.' + $css-prefix + 'icon';
|
|
|
|
$step-progress-prefix: '.' + $css-prefix + 'progress';
|
|
|
|
|
|
// 箭头变量
|
|
// ----------------------------------------
|
|
|
|
/// height
|
|
/// @namespace size/bounding
|
|
$step-arrow-item-height: $s-8 !default;
|
|
$step-arrow-item-border-width: $step-arrow-item-height/2;
|
|
|
|
/// font size
|
|
/// @namespace size/text
|
|
$step-arrow-item-title-size: $font-size-body-2 !default;
|
|
|
|
/// font weight
|
|
/// @namespace size/text
|
|
$step-arrow-item-title-weight: $font-weight-3 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/awaiting/arrow
|
|
$step-arrow-item-wait-background: $color-fill1-3 !default;
|
|
|
|
/// text
|
|
/// @namespace statement/awaiting/arrow
|
|
$step-arrow-item-title-wait-color: $color-text1-2 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/processing/arrow
|
|
$step-arrow-item-process-background: $color-brand1-6 !default;
|
|
|
|
/// text
|
|
/// @namespace statement/processing/arrow
|
|
$step-arrow-item-title-process-color: $color-white !default;
|
|
|
|
/// background
|
|
/// @namespace statement/finished/arrow
|
|
$step-arrow-item-finish-background: $color-brand1-1 !default;
|
|
|
|
/// text
|
|
/// @namespace statement/finished/arrow
|
|
$step-arrow-item-title-finish-color: $color-brand1-6 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/disabled/arrow
|
|
$step-arrow-item-disabled-background: $color-fill1-1 !default;
|
|
|
|
/// text
|
|
/// @namespace statement/disabled/arrow
|
|
$step-arrow-item-title-disabled-color: $color-text1-1 !default;
|
|
|
|
// 圆形变量
|
|
// ----------------------------------------
|
|
|
|
/// margin (l, r)
|
|
/// @namespace size/node
|
|
$step-circle-item-node-padding: $s-2 !default;
|
|
|
|
/// border width
|
|
/// @namespace size/node
|
|
$step-circle-item-node-border-width: $line-1 !default;
|
|
|
|
/// icon
|
|
/// @namespace size/node
|
|
$step-circle-item-node-icon-size: $icon-xs !default;
|
|
|
|
/// text
|
|
/// @namespace size/node
|
|
$step-circle-item-node-font-size: $font-size-caption !default;
|
|
|
|
/// corner
|
|
/// @namespace size/node
|
|
$step-circle-item-node-corner: $corner-circle !default;
|
|
|
|
/// width
|
|
/// @namespace size/divider
|
|
$step-circle-item-tail-size: $line-1 !default;
|
|
|
|
/// title margin (t)
|
|
/// @namespace size/content
|
|
$step-circle-item-title-margin-top: $s-2 !default;
|
|
|
|
/// body margin (t)
|
|
/// @namespace size/content
|
|
$step-circle-item-content-margin-top: $s-1 !default;
|
|
|
|
/// content size
|
|
/// @namespace size/content
|
|
$step-circle-item-content-font-size: $font-size-caption !default;
|
|
|
|
/// body width
|
|
/// @namespace size/content
|
|
$step-circle-item-body-width: $s-25 !default;
|
|
|
|
/// title size
|
|
/// @namespace size/content
|
|
$step-circle-item-title-size: $font-size-body-2 !default;
|
|
/// title weight
|
|
/// @namespace size/content
|
|
$step-circle-item-title-weight: $font-weight-3 !default;
|
|
|
|
/// node size
|
|
/// @namespace statement/awaiting/node
|
|
$step-circle-item-node-wait-size: $s-8 !default;
|
|
|
|
/// node size
|
|
/// @namespace statement/processing/node
|
|
$step-circle-item-node-process-size: $s-8 !default;
|
|
|
|
/// node size
|
|
/// @namespace statement/finished/node
|
|
$step-circle-item-node-finish-size: $s-8 !default;
|
|
|
|
/// node size
|
|
/// @namespace statement/disabled/node
|
|
$step-circle-item-node-disabled-size: $s-8 !default;
|
|
|
|
/// line color
|
|
/// @namespace statement/awaiting/divider
|
|
$step-circle-item-tail-wait-color: $color-line1-3 !default;
|
|
|
|
/// line color
|
|
/// @namespace statement/processing/divider
|
|
$step-circle-item-tail-process-color: $color-line1-3 !default;
|
|
|
|
/// line color
|
|
/// @namespace statement/finished/divider
|
|
$step-circle-item-tail-finish-color: $color-brand1-6 !default;
|
|
|
|
/// line color
|
|
/// @namespace statement/disabled/divider
|
|
$step-circle-item-tail-disabled-color: $color-line1-1 !default;
|
|
|
|
/// font weight
|
|
/// @namespace statement/awaiting/content
|
|
$step-circle-item-node-wait-font-weight: $font-weight-2 !default;
|
|
|
|
/// font weight
|
|
/// @namespace statement/processing/content
|
|
$step-circle-item-node-process-font-weight: $font-weight-2 !default;
|
|
|
|
/// font weight
|
|
/// @namespace statement/disabled/content
|
|
$step-circle-item-node-disabled-font-weight: $font-weight-2 !default;
|
|
|
|
/// font weight
|
|
/// @namespace statement/finished/content
|
|
$step-circle-item-node-finish-font-weight: $font-weight-2 !default;
|
|
|
|
/// title text
|
|
/// @namespace statement/awaiting/content
|
|
$step-circle-item-title-wait-color: $color-text1-3 !default;
|
|
|
|
/// title text
|
|
/// @namespace statement/processing/content
|
|
$step-circle-item-title-process-color: $color-text1-4 !default;
|
|
|
|
/// title text
|
|
/// @namespace statement/finished/content
|
|
$step-circle-item-title-finish-color: $color-text1-3 !default;
|
|
|
|
/// title text
|
|
/// @namespace statement/disabled/content
|
|
$step-circle-item-title-disabled-color: $color-text1-1 !default;
|
|
|
|
/// border color
|
|
/// @namespace statement/awaiting/node
|
|
$step-circle-item-node-wait-border-color: $color-line1-4 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/awaiting/node
|
|
$step-circle-item-node-wait-background: $color-white !default;
|
|
|
|
/// text
|
|
/// @namespace statement/awaiting/node
|
|
$step-circle-item-node-wait-color: $color-text1-3 !default;
|
|
|
|
/// border color
|
|
/// @namespace statement/processing/node
|
|
$step-circle-item-node-process-border-color: $color-brand1-6 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/processing/node
|
|
$step-circle-item-node-process-background: $color-brand1-6 !default;
|
|
|
|
/// text
|
|
/// @namespace statement/processing/node
|
|
$step-circle-item-node-process-color: $color-white !default;
|
|
|
|
/// percent text
|
|
/// @namespace statement/processing/node
|
|
$step-circle-item-node-process-percent-color: $color-brand1-6 !default;
|
|
|
|
/// percent size
|
|
/// @namespace size/node
|
|
$step-circle-item-node-process-percent-size: $font-size-body-1 !default;
|
|
|
|
/// border color
|
|
/// @namespace statement/finished/node
|
|
$step-circle-item-node-finish-border-color: $color-brand1-6 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/finished/node
|
|
$step-circle-item-node-finish-background: $color-white !default;
|
|
|
|
/// text
|
|
/// @namespace statement/finished/node
|
|
$step-circle-item-node-finish-color: $color-brand1-6 !default;
|
|
|
|
/// border color
|
|
/// @namespace statement/disabled/node
|
|
$step-circle-item-node-disabled-border-color: $color-line1-1 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/disabled/node
|
|
$step-circle-item-node-disabled-background: $color-white !default;
|
|
|
|
/// text
|
|
/// @namespace statement/disabled/node
|
|
$step-circle-item-node-disabled-color: $color-text1-1 !default;
|
|
|
|
// 圆形变量 (垂直)
|
|
// ----------------------------------------
|
|
|
|
/// node margin (t, b)
|
|
/// @namespace size/node
|
|
$step-circle-vertical-item-node-padding: $s-2 !default;
|
|
|
|
/// margin (l)
|
|
/// @namespace size/content
|
|
$step-circle-vertical-item-body-margin-left: $s-4 !default;
|
|
|
|
/// title margin (t)
|
|
/// @namespace size/content
|
|
$step-circle-vertical-item-title-margin-top: $s-2 !default;
|
|
|
|
/// body margin (t)
|
|
/// @namespace size/content
|
|
$step-circle-vertical-item-content-margin-top: $s-1 !default;
|
|
|
|
/// body size
|
|
/// @namespace size/content
|
|
$step-circle-item-content-font-size: $font-size-caption !default;
|
|
|
|
/// text
|
|
/// @namespace statement/normal/content
|
|
$step-circle-item-content-color: $color-text1-3 !default;
|
|
|
|
/// tail bg color
|
|
/// @namespace statement/normal/content
|
|
$step-circle-item-tail-bg-color: $color-line1-1 !default;
|
|
|
|
/// width
|
|
/// @namespace size/divider
|
|
$step-circle-vertical-item-tail-size: $line-1 !default;
|
|
|
|
// 点型变量
|
|
// ----------------------------------------
|
|
|
|
/// margin (l, r)
|
|
/// @namespace size/dot
|
|
$step-dot-item-dot-padding: $s-2 !default;
|
|
|
|
/// size
|
|
/// @namespace size/dot
|
|
// $step-dot-item-dot-size: $s-3 !default;
|
|
|
|
/// icon
|
|
/// @namespace size/dot
|
|
$step-dot-item-dot-icon-size: $icon-xs !default;
|
|
|
|
/// border width
|
|
/// @namespace size/dot
|
|
$step-dot-item-dot-border-width: $line-1 !default;
|
|
|
|
/// body width
|
|
/// @namespace size/content
|
|
$step-dot-item-body-width: $s-25 !default;
|
|
|
|
/// content margin (t)
|
|
/// @namespace size/content
|
|
$step-dot-item-content-margin-top: $s-1 !default;
|
|
|
|
/// corner
|
|
/// @namespace size/dot
|
|
$step-dot-item-dot-corner: $corner-circle !default;
|
|
|
|
/// title size
|
|
/// @namespace size/content
|
|
$step-dot-item-title-size: $font-size-body-1 !default;
|
|
|
|
/// title weight
|
|
/// @namespace size/content
|
|
$step-dot-item-title-weight: $font-weight-3 !default;
|
|
|
|
/// title margin (t)
|
|
/// @namespace size/content
|
|
$step-dot-item-title-margin-top: $s-2 !default;
|
|
|
|
/// width
|
|
/// @namespace size/divider
|
|
$step-dot-item-tail-size: $line-1 !default;
|
|
|
|
/// node size
|
|
/// @namespace statement/awaiting/node
|
|
$step-dot-item-dot-wait-size: $s-3 !default;
|
|
|
|
/// node size
|
|
/// @namespace statement/processing/node
|
|
$step-dot-item-dot-process-size: $s-3 !default;
|
|
|
|
/// node size
|
|
/// @namespace statement/finished/node
|
|
$step-dot-item-dot-finish-size: $s-3 !default;
|
|
|
|
/// node size
|
|
/// @namespace statement/disabled/node
|
|
$step-dot-item-dot-disabled-size: $s-3 !default;
|
|
|
|
/// line color
|
|
/// @namespace statement/awaiting/divider
|
|
$step-dot-item-tail-wait-color: $color-line1-3 !default;
|
|
|
|
/// line color
|
|
/// @namespace statement/processing/divider
|
|
$step-dot-item-tail-process-color: $color-line1-3 !default;
|
|
|
|
/// line color
|
|
/// @namespace statement/finished/divider
|
|
$step-dot-item-tail-finish-color: $color-brand1-6 !default;
|
|
|
|
/// line color
|
|
/// @namespace statement/disabled/divider
|
|
$step-dot-item-tail-disabled-color: $color-line1-1 !default;
|
|
|
|
/// title text
|
|
/// @namespace statement/awaiting/content
|
|
$step-dot-item-title-wait-color: $color-text1-3 !default;
|
|
|
|
/// title text
|
|
/// @namespace statement/processing/content
|
|
$step-dot-item-title-process-color: $color-text1-4 !default;
|
|
|
|
/// title text
|
|
/// @namespace statement/finished/content
|
|
$step-dot-item-title-finish-color: $color-text1-3 !default;
|
|
|
|
/// title text
|
|
/// @namespace statement/disabled/content
|
|
$step-dot-item-title-disabled-color: $color-text1-1 !default;
|
|
|
|
/// border color
|
|
/// @namespace statement/awaiting/node
|
|
$step-dot-item-node-wait-border-color: $color-line1-4 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/awaiting/node
|
|
$step-dot-item-node-wait-background: $color-white !default;
|
|
|
|
/// text
|
|
/// @namespace statement/awaiting/node
|
|
$step-dot-item-node-wait-color: $color-text1-2 !default;
|
|
|
|
/// border color
|
|
/// @namespace statement/processing/node
|
|
$step-dot-item-node-process-border-color: $color-brand1-6 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/processing/node
|
|
$step-dot-item-node-process-background: $color-brand1-6 !default;
|
|
|
|
/// text
|
|
/// @namespace statement/processing/node
|
|
$step-dot-item-node-process-color: $color-brand1-6 !default;
|
|
|
|
/// border color
|
|
/// @namespace statement/finished/node
|
|
$step-dot-item-node-finish-border-color: $color-brand1-6 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/finished/node
|
|
$step-dot-item-node-finish-background: $color-white !default;
|
|
|
|
/// text
|
|
/// @namespace statement/finished/node
|
|
$step-dot-item-node-finish-color: $color-brand1-6 !default;
|
|
|
|
/// border color
|
|
/// @namespace statement/disabled/node
|
|
$step-dot-item-node-disabled-border-color: $color-line1-2 !default;
|
|
|
|
/// background
|
|
/// @namespace statement/disabled/node
|
|
$step-dot-item-node-disabled-background: $color-white !default;
|
|
|
|
/// text
|
|
/// @namespace statement/disabled/node
|
|
$step-dot-item-node-disabled-color: $color-line1-1 !default;
|
|
|
|
// 点型变量 (垂直)
|
|
// ----------------------------------------
|
|
|
|
/// margin (t, b)
|
|
/// @namespace size/node
|
|
$step-dot-vertical-item-node-padding: $s-2 !default;
|
|
|
|
/// margin (l)
|
|
/// @namespace size/content
|
|
$step-dot-vertical-item-body-margin-left: $s-4 !default;
|
|
|
|
/// title margin (t)
|
|
/// @namespace size/content
|
|
$step-dot-vertical-item-title-margin-top: $s-zero !default;
|
|
|
|
/// body margin (t)
|
|
/// @namespace size/content
|
|
$step-dot-vertical-item-content-margin-top: $s-2 !default;
|
|
|
|
/// body size
|
|
/// @namespace size/content
|
|
$step-dot-item-content-font-size: $font-size-caption !default;
|
|
|
|
/// text
|
|
/// @namespace statement/normal/content
|
|
$step-dot-item-content-color: $color-text1-3 !default;
|
|
|
|
/// tail bg color
|
|
/// @namespace statement/normal/content
|
|
$step-dot-item-tail-bg-color: $color-line1-1 !default;
|
|
|
|
/// width
|
|
/// @namespace size/divider
|
|
$step-dot-vertical-item-tail-size: $line-1 !default;
|