|
2 | 2 | $theme,
|
3 | 3 | $panelBackgroundColor: #fff,
|
4 | 4 | $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
|
| 5 | + $panelBorderRadius: 10px, |
5 | 6 | $headerTextColor: #000,
|
6 | 7 | $filterBackground: #fff,
|
7 | 8 | $filterTextColor: #000,
|
8 | 9 | $filterBorder: (1px solid #c3c3c3),
|
9 | 10 | $filterBorderColorFocused: #939393,
|
| 11 | + $filterBorderRadius: 10px, |
10 | 12 | $groupTextColor: #000,
|
11 |
| - $groupBackgroundColor: #e5e5e5 |
| 13 | + $groupBackgroundColor: #e5e5e5, |
| 14 | + $groupBorderRadius: 10px |
12 | 15 | ) {
|
13 | 16 | .sqd-theme-#{$theme} {
|
14 | 17 | .sqd-toolbox {
|
15 | 18 | background: $panelBackgroundColor;
|
16 | 19 | box-shadow: $panelBoxShadow;
|
| 20 | + border-radius: $panelBorderRadius; |
17 | 21 | }
|
18 | 22 | .sqd-toolbox-header-title {
|
19 | 23 | color: $headerTextColor;
|
|
22 | 26 | background: $filterBackground;
|
23 | 27 | color: $filterTextColor;
|
24 | 28 | border: $filterBorder;
|
| 29 | + border-radius: $filterBorderRadius; |
25 | 30 | }
|
26 | 31 | .sqd-toolbox-filter:focus {
|
27 | 32 | border-color: $filterBorderColorFocused;
|
28 | 33 | }
|
29 | 34 | .sqd-toolbox-group-title {
|
30 | 35 | color: $groupTextColor;
|
31 | 36 | background: $groupBackgroundColor;
|
| 37 | + border-radius: $groupBorderRadius; |
32 | 38 | }
|
33 | 39 | }
|
34 | 40 | }
|
|
41 | 47 | $itemBoxShadow: (0 2px 2px rgba(0, 0, 0, 0.15)),
|
42 | 48 | $itemBorderHovered: #939393,
|
43 | 49 | $itemBackgroundColorHovered: #fff,
|
44 |
| - $noIconBackgroundColor: #c6c6c6 |
| 50 | + $itemBorderRadius: 5px, |
| 51 | + $noIconBackgroundColor: #c6c6c6, |
| 52 | + $noIconBorderRadius: 4px |
45 | 53 | ) {
|
46 | 54 | .sqd-theme-#{$theme} .sqd-toolbox-item#{if($stepType != '', '.sqd-type-' + $stepType, '')} {
|
47 | 55 | & {
|
48 | 56 | color: $itemTextColor;
|
49 | 57 | border: $itemBorder;
|
50 | 58 | box-shadow: $itemBoxShadow;
|
51 | 59 | background: $itemBackgroundColor;
|
| 60 | + border-radius: $itemBorderRadius; |
52 | 61 | }
|
53 | 62 | &:hover {
|
54 | 63 | border-color: $itemBorderHovered;
|
55 | 64 | background: $itemBackgroundColorHovered;
|
56 | 65 | }
|
57 | 66 | & .sqd-toolbox-item-icon.sqd-no-icon {
|
58 | 67 | background: $noIconBackgroundColor;
|
| 68 | + border-radius: $noIconBorderRadius; |
59 | 69 | }
|
60 | 70 | }
|
61 | 71 | }
|
|
64 | 74 | $theme,
|
65 | 75 | $panelBackgroundColor: #fff,
|
66 | 76 | $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
|
| 77 | + $panelBorderRadius: 10px, |
67 | 78 | $buttonBackground: #fff,
|
68 | 79 | $buttonBackgroundHovered: #fff,
|
69 | 80 | $buttonBorder: (1px solid #c3c3c3),
|
70 | 81 | $buttonBorderColorHovered: #939393,
|
| 82 | + $buttonBorderRadius: 5px, |
71 | 83 | $buttonIconPathFillColor: #000,
|
72 | 84 | $buttonDeleteIconPathFillColor: #e01a24
|
73 | 85 | ) {
|
74 | 86 | .sqd-theme-#{$theme} {
|
75 | 87 | .sqd-control-bar {
|
76 | 88 | background: $panelBackgroundColor;
|
77 | 89 | box-shadow: $panelBoxShadow;
|
| 90 | + border-radius: $panelBorderRadius; |
78 | 91 | }
|
79 | 92 | .sqd-control-bar-button {
|
80 | 93 | border: $buttonBorder;
|
81 | 94 | background: $buttonBackground;
|
| 95 | + border-radius: $buttonBorderRadius; |
82 | 96 | }
|
83 | 97 | .sqd-control-bar-button:hover {
|
84 | 98 | border-color: $buttonBorderColorHovered;
|
|
116 | 130 | $theme,
|
117 | 131 | $panelBackgroundColor: #fff,
|
118 | 132 | $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.2)),
|
| 133 | + $panelBorderRadius: 4px, |
119 | 134 | $groupTextColor: #888,
|
120 | 135 | $itemTextColor: #000,
|
121 |
| - $itemBackgroundColorHovered: #eee |
| 136 | + $itemBackgroundColorHovered: #eee, |
| 137 | + $itemBorderRadius: 4px |
122 | 138 | ) {
|
123 | 139 | .sqd-theme-#{$theme}.sqd-context-menu {
|
124 | 140 | background: $panelBackgroundColor;
|
125 | 141 | box-shadow: $panelBoxShadow;
|
| 142 | + border-radius: $panelBorderRadius; |
126 | 143 | }
|
127 | 144 | .sqd-theme-#{$theme} .sqd-context-menu-group {
|
128 | 145 | color: $groupTextColor;
|
129 | 146 | }
|
130 | 147 | .sqd-theme-#{$theme} .sqd-context-menu-item {
|
131 | 148 | color: $itemTextColor;
|
| 149 | + border-radius: $itemBorderRadius; |
132 | 150 | }
|
133 | 151 | .sqd-theme-#{$theme} .sqd-context-menu-item:hover {
|
134 | 152 | background: $itemBackgroundColorHovered;
|
|
188 | 206 |
|
189 | 207 | @mixin sqd-theme-region(
|
190 | 208 | $theme,
|
| 209 | + $componentType: '', |
191 | 210 | $strokeColor: #cecece,
|
192 | 211 | $strokeColorSelected: #ed4800,
|
193 | 212 | $strokeWidth: 2,
|
194 | 213 | $strokeWidthSelected: 2,
|
195 | 214 | $strokeDasharray: 3,
|
196 | 215 | $strokeDasharraySelected: 0
|
197 | 216 | ) {
|
198 |
| - .sqd-theme-#{$theme} { |
| 217 | + .sqd-theme-#{$theme}#{if($componentType != '', ' .sqd-step-' + $componentType + ' >', '')} { |
199 | 218 | .sqd-region {
|
200 | 219 | stroke: $strokeColor;
|
201 | 220 | stroke-width: $strokeWidth;
|
|
0 commit comments