|
15 | 15 | * |
16 | 16 | */ |
17 | 17 |
|
18 | | -@import '@/common/style/variables.scss'; |
19 | | -.page-process{ |
20 | | - height: 100%; |
21 | | - width: 100%; |
22 | | - @include bg-color($light-base-color, $dark-base-color); |
23 | | - position: relative; |
24 | | - .bread-crumb{ |
25 | | - margin: 5px; |
26 | | - } |
27 | | - .process-readonly-tip-card { |
28 | | - @include font-color(#fff, #000); |
29 | | - font-size: $font-size-small; |
30 | | - position: absolute; |
31 | | - font-weight: 700; |
32 | | - z-index: 9999; |
33 | | - top: 0; |
34 | | - right: 1rem; |
35 | | - background-color: $error-color; |
36 | | - .tipClose { |
37 | | - position: absolute; |
38 | | - top: 5px; |
39 | | - right: 5px; |
40 | | - // color: #080808; |
41 | | - @include font-color(#fff, #000); |
42 | | - } |
| 18 | +@import "@/common/style/variables.scss"; |
| 19 | +.page-process { |
| 20 | + height: 100%; |
| 21 | + width: 100%; |
| 22 | + @include bg-color($light-base-color, $dark-base-color); |
| 23 | + position: relative; |
| 24 | + .bread-crumb { |
| 25 | + margin: 5px; |
| 26 | + } |
| 27 | + .process-readonly-tip-card { |
| 28 | + @include font-color(#fff, #000); |
| 29 | + font-size: $font-size-small; |
| 30 | + position: absolute; |
| 31 | + font-weight: 700; |
| 32 | + z-index: 9999; |
| 33 | + top: 0; |
| 34 | + right: 1rem; |
| 35 | + background-color: $error-color; |
| 36 | + .tipClose { |
| 37 | + position: absolute; |
| 38 | + top: 5px; |
| 39 | + right: 5px; |
| 40 | + // color: #080808; |
| 41 | + @include font-color(#fff, #000); |
43 | 42 | } |
| 43 | + } |
44 | 44 | } |
45 | 45 |
|
46 | 46 | .process-tabs { |
|
57 | 57 | } |
58 | 58 | } |
59 | 59 | .process-tab { |
60 | | - display: flex; |
61 | | - flex-direction: row; |
62 | | - flex-wrap: nowrap; |
63 | | - justify-content: flex-start; |
64 | | - align-items: flex-start; |
65 | | - height: 32px; |
66 | | - padding: 0 20px; |
67 | | - box-sizing: border-box; |
68 | | - border-top: $border-width-base $border-style-base $border-color-split; |
69 | | - border-bottom: $border-width-base $border-style-base $border-color-split; |
70 | | - @include border-color($border-color-split, $dark-workspace-background); |
71 | | - @include bg-color($body-background, $dark-base-color); |
72 | | - .process-tab-item { |
73 | | - position: $relative; |
74 | | - height: 30px; |
75 | | - line-height: 30px; |
76 | | - padding: 0 20px; |
77 | | - padding-left: 25px; |
78 | | - border-right: $border-width-base $border-style-base $border-color-split; |
79 | | - @include border-color($border-color-split, $dark-base-color); |
80 | | - @include bg-color($background-color-base, $dark-base-color); |
81 | | - @include font-color($title-color, $dark-workflow-font-color); |
82 | | - cursor: pointer; |
83 | | - min-width: 100px; |
84 | | - max-width: 200px; |
85 | | - overflow: hidden; |
86 | | - text-align: center; |
87 | | - &:first-child{ |
88 | | - border-left: $border-width-base $border-style-base $border-color-split; |
89 | | - @include border-color($border-color-split, $dark-base-color); |
90 | | - } |
91 | | - &.active { |
92 | | - margin-top: -1px; |
93 | | - &:before{ |
94 | | - content: ""; |
95 | | - position: absolute; |
96 | | - top: -1px; |
97 | | - left: 0; |
98 | | - right: 0; |
99 | | - height: 3px; |
100 | | - @include bg-color($primary-color, $dark-primary-color); |
101 | | - } |
102 | | - height: 32px; |
103 | | - line-height: 31px; |
104 | | - @include bg-color($body-background, $dark-base-color); |
105 | | - @include font-color($primary-color, $dark-primary-color); |
106 | | - .tab-icon { |
107 | | - top: 9px; |
108 | | - } |
109 | | - } |
110 | | - .process-tab-name{ |
111 | | - width: 100%; |
112 | | - overflow: hidden; |
113 | | - white-space: nowrap; |
114 | | - text-overflow: ellipsis; |
115 | | - padding-right: 5px; |
116 | | - padding-left: 5px; |
117 | | - font-size: $font-size-large; |
118 | | - } |
119 | | - .process-tab-unsave-icon { |
120 | | - position: absolute; |
121 | | - top: 50%; |
122 | | - right: 10px; |
123 | | - transform: translateY(-50%); |
124 | | - } |
125 | | - .ivu-icon{ |
126 | | - position: absolute; |
127 | | - right: 10px; |
128 | | - top: 10px; |
129 | | - } |
130 | | - .tab-icon { |
131 | | - position: absolute; |
132 | | - left: 7px; |
133 | | - top: 8px; |
134 | | - width: 15px; |
135 | | - height: 15px; |
136 | | - vertical-align: middle; |
137 | | - } |
138 | | - // .flow { |
139 | | - // width: 12px; |
140 | | - // height: 12px; |
141 | | - // } |
142 | | - .hivesql { |
143 | | - width: 16px; |
144 | | - height: 16px; |
145 | | - } |
146 | | - // .display { |
147 | | - // width: 13px; |
148 | | - // height: 13px; |
149 | | - // } |
150 | | - .dashboard { |
151 | | - width: 14px; |
152 | | - height: 14px; |
153 | | - } |
154 | | - } |
| 60 | + display: none; |
| 61 | + @include bg-color($light-base-color, $dark-base-color); |
155 | 62 | } |
156 | 63 | .process-container { |
157 | | - height: calc(100% - 32px); |
| 64 | + height: 100%; |
158 | 65 | } |
159 | | -} |
| 66 | + } |
| 67 | + .process-tab { |
| 68 | + display: flex; |
| 69 | + flex-direction: row; |
| 70 | + flex-wrap: nowrap; |
| 71 | + justify-content: flex-start; |
| 72 | + align-items: flex-start; |
| 73 | + height: 32px; |
| 74 | + // padding: 0 20px; |
| 75 | + box-sizing: border-box; |
| 76 | + border-top: $border-width-base $border-style-base $border-color-split; |
| 77 | + border-bottom: $border-width-base $border-style-base $border-color-split; |
| 78 | + @include border-color($border-color-split, $dark-workspace-background); |
| 79 | + @include bg-color($body-background, $dark-base-color); |
| 80 | + .process-tab-item { |
| 81 | + position: $relative; |
| 82 | + height: 30px; |
| 83 | + line-height: 30px; |
| 84 | + padding: 0 20px; |
| 85 | + padding-left: 25px; |
| 86 | + border-right: $border-width-base $border-style-base $border-color-split; |
| 87 | + @include border-color($border-color-split, $dark-base-color); |
| 88 | + @include bg-color(#ffffff, $dark-base-color); |
| 89 | + @include font-color($title-color, $dark-workflow-font-color); |
| 90 | + cursor: pointer; |
| 91 | + min-width: 100px; |
| 92 | + max-width: 200px; |
| 93 | + overflow: hidden; |
| 94 | + text-align: center; |
| 95 | + &:first-child { |
| 96 | + border-left: $border-width-base $border-style-base $border-color-split; |
| 97 | + @include border-color($border-color-split, $dark-base-color); |
| 98 | + } |
| 99 | + &.active { |
| 100 | + margin-top: -1px; |
| 101 | + &:before { |
| 102 | + content: ""; |
| 103 | + position: absolute; |
| 104 | + top: -1px; |
| 105 | + left: 0; |
| 106 | + right: 0; |
| 107 | + height: 2px; |
| 108 | + @include bg-color($primary-color, $dark-primary-color); |
| 109 | + } |
| 110 | + height: 32px; |
| 111 | + line-height: 31px; |
| 112 | + @include bg-color(#ebf5ff, $dark-base-color); |
| 113 | + @include font-color($primary-color, $dark-primary-color); |
| 114 | + .tab-icon { |
| 115 | + top: 9px; |
| 116 | + } |
| 117 | + } |
| 118 | + .process-tab-name { |
| 119 | + width: 100%; |
| 120 | + overflow: hidden; |
| 121 | + white-space: nowrap; |
| 122 | + text-overflow: ellipsis; |
| 123 | + padding-right: 5px; |
| 124 | + padding-left: 5px; |
| 125 | + font-size: 14px; |
| 126 | + } |
| 127 | + .process-tab-unsave-icon { |
| 128 | + position: absolute; |
| 129 | + top: 50%; |
| 130 | + right: 10px; |
| 131 | + transform: translateY(-50%); |
| 132 | + } |
| 133 | + .ivu-icon { |
| 134 | + position: absolute; |
| 135 | + right: 10px; |
| 136 | + top: 10px; |
| 137 | + } |
| 138 | + .tab-icon { |
| 139 | + position: absolute; |
| 140 | + left: 7px; |
| 141 | + top: 8px; |
| 142 | + width: 15px; |
| 143 | + height: 15px; |
| 144 | + vertical-align: middle; |
| 145 | + } |
| 146 | + // .flow { |
| 147 | + // width: 12px; |
| 148 | + // height: 12px; |
| 149 | + // } |
| 150 | + .hivesql { |
| 151 | + width: 16px; |
| 152 | + height: 16px; |
| 153 | + } |
| 154 | + // .display { |
| 155 | + // width: 13px; |
| 156 | + // height: 13px; |
| 157 | + // } |
| 158 | + .dashboard { |
| 159 | + width: 14px; |
| 160 | + height: 14px; |
| 161 | + } |
| 162 | + } |
| 163 | + } |
| 164 | + .process-container { |
| 165 | + height: calc(100% - 32px); |
| 166 | + } |
| 167 | + |
0 commit comments