cx 24.9.4 → 24.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts.css +19 -16
- package/dist/charts.js +127 -94
- package/dist/data.js +29 -26
- package/dist/manifest.js +692 -692
- package/dist/svg.js +56 -59
- package/dist/ui.js +52 -51
- package/dist/widgets.js +44 -40
- package/package.json +32 -32
- package/src/charts/Legend.js +49 -33
- package/src/charts/Legend.scss +40 -42
- package/src/charts/LegendEntry.js +120 -121
- package/src/charts/LegendEntry.scss +27 -31
- package/src/charts/PieLabel.js +71 -71
- package/src/charts/axis/NumericAxis.js +347 -347
- package/src/charts/axis/Stack.js +55 -55
- package/src/charts/helpers/PointReducer.js +43 -43
- package/src/charts/helpers/SnapPointFinder.js +69 -69
- package/src/data/Binding.spec.js +69 -69
- package/src/data/Expression.js +221 -221
- package/src/data/Expression.spec.js +184 -184
- package/src/data/StringTemplate.spec.js +105 -105
- package/src/data/getAccessor.spec.js +11 -11
- package/src/index.scss +6 -6
- package/src/svg/Text.d.ts +40 -40
- package/src/ui/Culture.d.ts +55 -55
- package/src/ui/Culture.js +139 -139
- package/src/ui/FocusManager.js +171 -171
- package/src/ui/Instance.d.ts +72 -72
- package/src/ui/VDOM.d.ts +12 -12
- package/src/ui/app/startAppLoop.js +58 -58
- package/src/ui/index.d.ts +42 -42
- package/src/ui/layout/LabelsTopLayout.js +134 -134
- package/src/util/Console.d.ts +4 -4
- package/src/util/index.d.ts +51 -51
- package/src/util/index.js +54 -54
- package/src/util/isValidIdentifierName.d.ts +1 -1
- package/src/util/isValidIdentifierName.js +5 -5
- package/src/util/isValidIdentifierName.spec.js +33 -33
- package/src/util/scss/add-rules.scss +38 -38
- package/src/widgets/CxCredit.scss +37 -37
- package/src/widgets/HighlightedSearchText.js +36 -36
- package/src/widgets/HighlightedSearchText.scss +18 -18
- package/src/widgets/List.scss +91 -91
- package/src/widgets/drag-drop/DropZone.js +214 -214
- package/src/widgets/form/Calendar.scss +196 -196
- package/src/widgets/form/ColorField.js +397 -397
- package/src/widgets/form/ColorPicker.scss +283 -283
- package/src/widgets/form/DateTimeField.js +573 -573
- package/src/widgets/form/LookupField.d.ts +179 -179
- package/src/widgets/form/MonthField.js +516 -516
- package/src/widgets/form/MonthPicker.scss +118 -118
- package/src/widgets/form/NumberField.js +459 -459
- package/src/widgets/form/NumberField.scss +61 -61
- package/src/widgets/form/Select.scss +99 -99
- package/src/widgets/form/Slider.scss +118 -118
- package/src/widgets/form/Switch.scss +140 -140
- package/src/widgets/form/TextArea.scss +43 -43
- package/src/widgets/form/TextField.js +290 -290
- package/src/widgets/form/TextField.scss +55 -55
- package/src/widgets/form/UploadButton.d.ts +34 -34
- package/src/widgets/form/variables.scss +353 -353
- package/src/widgets/grid/TreeNode.scss +88 -88
- package/src/widgets/grid/variables.scss +88 -88
- package/src/widgets/nav/Menu.scss +74 -74
- package/src/widgets/overlay/Dropdown.js +612 -612
- package/src/widgets/overlay/FlyweightTooltipTracker.js +39 -39
- package/src/widgets/overlay/Tooltip.js +300 -300
- package/src/widgets/overlay/Window.js +196 -196
- package/src/widgets/overlay/captureMouse.js +124 -124
- package/src/widgets/overlay/variables.scss +83 -83
- package/src/widgets/variables.scss +144 -144
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
@mixin cx-treenode(
|
|
2
|
-
$name: "treenode",
|
|
3
|
-
$icon-size: $cx-default-icon-size,
|
|
4
|
-
$handle-size: $cx-default-input-tool-size,
|
|
5
|
-
$handle-state-style-map: $cx-input-right-icon-state-style-map,
|
|
6
|
-
$besm: $cx-besm
|
|
7
|
-
) {
|
|
8
|
-
$block: map-get($besm, block);
|
|
9
|
-
$element: map-get($besm, element);
|
|
10
|
-
$state: map-get($besm, state);
|
|
11
|
-
$mod: map-get($besm, mod);
|
|
12
|
-
|
|
13
|
-
.#{$block}#{$name} {
|
|
14
|
-
padding-left: $handle-size + $icon-size * 0.25;
|
|
15
|
-
position: relative;
|
|
16
|
-
|
|
17
|
-
&.#{$state}icon {
|
|
18
|
-
padding-left: $handle-size + $icon-size + $icon-size * 0.25;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@for $i from 1 through 20 {
|
|
22
|
-
&.#{$state}level-#{$i} {
|
|
23
|
-
margin-left: #{($i * 20)}px;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.#{$element}#{$name}-handle {
|
|
29
|
-
position: absolute;
|
|
30
|
-
|
|
31
|
-
@include cx-add-state-rules($handle-state-style-map, default);
|
|
32
|
-
|
|
33
|
-
left: 0;
|
|
34
|
-
top: 50%;
|
|
35
|
-
margin-top: -$handle-size * 0.5;
|
|
36
|
-
bottom: 0;
|
|
37
|
-
width: $handle-size + $icon-size;
|
|
38
|
-
height: $handle-size;
|
|
39
|
-
|
|
40
|
-
&:hover {
|
|
41
|
-
@include cx-add-state-rules($handle-state-style-map, hover);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
&:active {
|
|
45
|
-
@include cx-add-state-rules($handle-state-style-map, active);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.#{$element}#{$name}-arrow {
|
|
50
|
-
display: block;
|
|
51
|
-
position: absolute;
|
|
52
|
-
left: 0;
|
|
53
|
-
top: 50%;
|
|
54
|
-
margin-top: -$icon-size * 0.5;
|
|
55
|
-
margin-left: ($handle-size - $icon-size) * 0.5;
|
|
56
|
-
height: $icon-size;
|
|
57
|
-
width: $icon-size;
|
|
58
|
-
line-height: $icon-size;
|
|
59
|
-
transform: rotate(-90deg);
|
|
60
|
-
transition: transform 0.2s;
|
|
61
|
-
|
|
62
|
-
.#{$state}expanded & {
|
|
63
|
-
transform: rotate(0);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.#{$element}#{$name}-icon {
|
|
68
|
-
display: block;
|
|
69
|
-
position: absolute;
|
|
70
|
-
left: 0;
|
|
71
|
-
top: 50%;
|
|
72
|
-
margin-top: -$icon-size * 0.5;
|
|
73
|
-
margin-left: ($handle-size + $icon-size) * 0.5;
|
|
74
|
-
height: $icon-size;
|
|
75
|
-
width: $icon-size;
|
|
76
|
-
line-height: $icon-size;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.#{$block}grid.#{$mod}tree {
|
|
80
|
-
td {
|
|
81
|
-
border-top: none;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
@if (cx-should-include("cx/widgets/TreeNode")) {
|
|
87
|
-
@include cx-treenode();
|
|
88
|
-
}
|
|
1
|
+
@mixin cx-treenode(
|
|
2
|
+
$name: "treenode",
|
|
3
|
+
$icon-size: $cx-default-icon-size,
|
|
4
|
+
$handle-size: $cx-default-input-tool-size,
|
|
5
|
+
$handle-state-style-map: $cx-input-right-icon-state-style-map,
|
|
6
|
+
$besm: $cx-besm
|
|
7
|
+
) {
|
|
8
|
+
$block: map-get($besm, block);
|
|
9
|
+
$element: map-get($besm, element);
|
|
10
|
+
$state: map-get($besm, state);
|
|
11
|
+
$mod: map-get($besm, mod);
|
|
12
|
+
|
|
13
|
+
.#{$block}#{$name} {
|
|
14
|
+
padding-left: $handle-size + $icon-size * 0.25;
|
|
15
|
+
position: relative;
|
|
16
|
+
|
|
17
|
+
&.#{$state}icon {
|
|
18
|
+
padding-left: $handle-size + $icon-size + $icon-size * 0.25;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@for $i from 1 through 20 {
|
|
22
|
+
&.#{$state}level-#{$i} {
|
|
23
|
+
margin-left: #{($i * 20)}px;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.#{$element}#{$name}-handle {
|
|
29
|
+
position: absolute;
|
|
30
|
+
|
|
31
|
+
@include cx-add-state-rules($handle-state-style-map, default);
|
|
32
|
+
|
|
33
|
+
left: 0;
|
|
34
|
+
top: 50%;
|
|
35
|
+
margin-top: -$handle-size * 0.5;
|
|
36
|
+
bottom: 0;
|
|
37
|
+
width: $handle-size + $icon-size;
|
|
38
|
+
height: $handle-size;
|
|
39
|
+
|
|
40
|
+
&:hover {
|
|
41
|
+
@include cx-add-state-rules($handle-state-style-map, hover);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:active {
|
|
45
|
+
@include cx-add-state-rules($handle-state-style-map, active);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.#{$element}#{$name}-arrow {
|
|
50
|
+
display: block;
|
|
51
|
+
position: absolute;
|
|
52
|
+
left: 0;
|
|
53
|
+
top: 50%;
|
|
54
|
+
margin-top: -$icon-size * 0.5;
|
|
55
|
+
margin-left: ($handle-size - $icon-size) * 0.5;
|
|
56
|
+
height: $icon-size;
|
|
57
|
+
width: $icon-size;
|
|
58
|
+
line-height: $icon-size;
|
|
59
|
+
transform: rotate(-90deg);
|
|
60
|
+
transition: transform 0.2s;
|
|
61
|
+
|
|
62
|
+
.#{$state}expanded & {
|
|
63
|
+
transform: rotate(0);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.#{$element}#{$name}-icon {
|
|
68
|
+
display: block;
|
|
69
|
+
position: absolute;
|
|
70
|
+
left: 0;
|
|
71
|
+
top: 50%;
|
|
72
|
+
margin-top: -$icon-size * 0.5;
|
|
73
|
+
margin-left: ($handle-size + $icon-size) * 0.5;
|
|
74
|
+
height: $icon-size;
|
|
75
|
+
width: $icon-size;
|
|
76
|
+
line-height: $icon-size;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.#{$block}grid.#{$mod}tree {
|
|
80
|
+
td {
|
|
81
|
+
border-top: none;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@if (cx-should-include("cx/widgets/TreeNode")) {
|
|
87
|
+
@include cx-treenode();
|
|
88
|
+
}
|
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
// GRID
|
|
2
|
-
$cx-default-grid-font-size: $cx-default-box-font-size !default;
|
|
3
|
-
$cx-default-grid-border-color: $cx-default-border-color !default;
|
|
4
|
-
$cx-default-grid-border-radius: null !default;
|
|
5
|
-
$cx-default-grid-box-shadow: null !default;
|
|
6
|
-
|
|
7
|
-
// header
|
|
8
|
-
$cx-default-grid-header-font-size: $cx-default-box-font-size !default;
|
|
9
|
-
$cx-default-grid-header-font-weight: normal !default;
|
|
10
|
-
$cx-default-grid-header-line-height: null !default;
|
|
11
|
-
$cx-default-grid-header-color: $cx-default-color !default;
|
|
12
|
-
$cx-default-grid-header-background-color: #eee !default;
|
|
13
|
-
$cx-default-grid-header-border-color: $cx-default-border-color !default;
|
|
14
|
-
$cx-default-grid-header-box-shadow: null !default;
|
|
15
|
-
$cx-default-grid-header-padding: null !default;
|
|
16
|
-
|
|
17
|
-
$cx-grid-header-state-style-map: (
|
|
18
|
-
default: (
|
|
19
|
-
font-size: $cx-default-grid-header-font-size,
|
|
20
|
-
font-weight: $cx-default-grid-header-font-weight,
|
|
21
|
-
line-height: $cx-default-grid-header-line-height,
|
|
22
|
-
color: $cx-default-grid-header-color,
|
|
23
|
-
background-color: $cx-default-grid-header-background-color,
|
|
24
|
-
border-color: $cx-default-grid-header-border-color,
|
|
25
|
-
background-clip: border-box,
|
|
26
|
-
padding: $cx-default-grid-header-padding,
|
|
27
|
-
),
|
|
28
|
-
hover: (
|
|
29
|
-
background-color: darken($cx-default-grid-header-background-color, 2),
|
|
30
|
-
),
|
|
31
|
-
sorted: (
|
|
32
|
-
background-color: darken($cx-default-grid-header-background-color, 7),
|
|
33
|
-
),
|
|
34
|
-
sorted-hover: (
|
|
35
|
-
background-color: darken($cx-default-grid-header-background-color, 5),
|
|
36
|
-
),
|
|
37
|
-
) !default;
|
|
38
|
-
|
|
39
|
-
// data
|
|
40
|
-
$cx-default-grid-data-font-size: null !default;
|
|
41
|
-
$cx-default-grid-data-font-weight: null !default;
|
|
42
|
-
$cx-default-grid-data-line-height: null !default;
|
|
43
|
-
$cx-default-grid-data-background-color: transparent !default;
|
|
44
|
-
$cx-default-grid-data-alternate-background-color: null !default;
|
|
45
|
-
$cx-default-grid-data-border-color: $cx-default-grid-border-color !default;
|
|
46
|
-
$cx-default-grid-data-padding: 5px !default;
|
|
47
|
-
|
|
48
|
-
$cx-grid-data-state-style-map: cx-deep-map-merge(
|
|
49
|
-
$cx-list-item,
|
|
50
|
-
(
|
|
51
|
-
default: (
|
|
52
|
-
font-size: $cx-default-grid-data-font-size,
|
|
53
|
-
line-height: $cx-default-grid-data-line-height,
|
|
54
|
-
font-weight: $cx-default-grid-data-font-weight,
|
|
55
|
-
background-color: $cx-default-grid-data-background-color,
|
|
56
|
-
border-color: $cx-default-grid-data-border-color,
|
|
57
|
-
padding: $cx-default-grid-data-padding,
|
|
58
|
-
),
|
|
59
|
-
alternate: (
|
|
60
|
-
background-color: $cx-default-grid-data-alternate-background-color,
|
|
61
|
-
),
|
|
62
|
-
)
|
|
63
|
-
) !default;
|
|
64
|
-
|
|
65
|
-
// pagination
|
|
66
|
-
$cx-grid-pagination-default-border-width: $cx-default-border-width !default;
|
|
67
|
-
$cx-grid-pagination-default-border-color: $cx-default-border-color !default;
|
|
68
|
-
$cx-grid-pagination-default-border-radius: null !default;
|
|
69
|
-
$cx-grid-pagination-default-outer-border-radius: $cx-default-border-radius !default;
|
|
70
|
-
$cx-grid-pagination-default-padding: cx-top($cx-default-box-padding) 2 * cx-top($cx-default-box-padding) !default;
|
|
71
|
-
|
|
72
|
-
$cx-grid-pagination-state-style-map: cx-deep-map-merge($cx-list-item, ()) !default;
|
|
73
|
-
|
|
74
|
-
$cx-grid-cell-cursor-style: (
|
|
75
|
-
left: -1px,
|
|
76
|
-
top: -1px,
|
|
77
|
-
right: -1px,
|
|
78
|
-
bottom: -1px,
|
|
79
|
-
background: rgba(green, 0.1),
|
|
80
|
-
border: 2px solid rgba(green, 1),
|
|
81
|
-
);
|
|
82
|
-
|
|
83
|
-
$cx-dependencies: map-merge(
|
|
84
|
-
$cx-dependencies,
|
|
85
|
-
(
|
|
86
|
-
"cx/widgets/Grid": "cx/widgets/DragClone",
|
|
87
|
-
)
|
|
88
|
-
);
|
|
1
|
+
// GRID
|
|
2
|
+
$cx-default-grid-font-size: $cx-default-box-font-size !default;
|
|
3
|
+
$cx-default-grid-border-color: $cx-default-border-color !default;
|
|
4
|
+
$cx-default-grid-border-radius: null !default;
|
|
5
|
+
$cx-default-grid-box-shadow: null !default;
|
|
6
|
+
|
|
7
|
+
// header
|
|
8
|
+
$cx-default-grid-header-font-size: $cx-default-box-font-size !default;
|
|
9
|
+
$cx-default-grid-header-font-weight: normal !default;
|
|
10
|
+
$cx-default-grid-header-line-height: null !default;
|
|
11
|
+
$cx-default-grid-header-color: $cx-default-color !default;
|
|
12
|
+
$cx-default-grid-header-background-color: #eee !default;
|
|
13
|
+
$cx-default-grid-header-border-color: $cx-default-border-color !default;
|
|
14
|
+
$cx-default-grid-header-box-shadow: null !default;
|
|
15
|
+
$cx-default-grid-header-padding: null !default;
|
|
16
|
+
|
|
17
|
+
$cx-grid-header-state-style-map: (
|
|
18
|
+
default: (
|
|
19
|
+
font-size: $cx-default-grid-header-font-size,
|
|
20
|
+
font-weight: $cx-default-grid-header-font-weight,
|
|
21
|
+
line-height: $cx-default-grid-header-line-height,
|
|
22
|
+
color: $cx-default-grid-header-color,
|
|
23
|
+
background-color: $cx-default-grid-header-background-color,
|
|
24
|
+
border-color: $cx-default-grid-header-border-color,
|
|
25
|
+
background-clip: border-box,
|
|
26
|
+
padding: $cx-default-grid-header-padding,
|
|
27
|
+
),
|
|
28
|
+
hover: (
|
|
29
|
+
background-color: darken($cx-default-grid-header-background-color, 2),
|
|
30
|
+
),
|
|
31
|
+
sorted: (
|
|
32
|
+
background-color: darken($cx-default-grid-header-background-color, 7),
|
|
33
|
+
),
|
|
34
|
+
sorted-hover: (
|
|
35
|
+
background-color: darken($cx-default-grid-header-background-color, 5),
|
|
36
|
+
),
|
|
37
|
+
) !default;
|
|
38
|
+
|
|
39
|
+
// data
|
|
40
|
+
$cx-default-grid-data-font-size: null !default;
|
|
41
|
+
$cx-default-grid-data-font-weight: null !default;
|
|
42
|
+
$cx-default-grid-data-line-height: null !default;
|
|
43
|
+
$cx-default-grid-data-background-color: transparent !default;
|
|
44
|
+
$cx-default-grid-data-alternate-background-color: null !default;
|
|
45
|
+
$cx-default-grid-data-border-color: $cx-default-grid-border-color !default;
|
|
46
|
+
$cx-default-grid-data-padding: 5px !default;
|
|
47
|
+
|
|
48
|
+
$cx-grid-data-state-style-map: cx-deep-map-merge(
|
|
49
|
+
$cx-list-item,
|
|
50
|
+
(
|
|
51
|
+
default: (
|
|
52
|
+
font-size: $cx-default-grid-data-font-size,
|
|
53
|
+
line-height: $cx-default-grid-data-line-height,
|
|
54
|
+
font-weight: $cx-default-grid-data-font-weight,
|
|
55
|
+
background-color: $cx-default-grid-data-background-color,
|
|
56
|
+
border-color: $cx-default-grid-data-border-color,
|
|
57
|
+
padding: $cx-default-grid-data-padding,
|
|
58
|
+
),
|
|
59
|
+
alternate: (
|
|
60
|
+
background-color: $cx-default-grid-data-alternate-background-color,
|
|
61
|
+
),
|
|
62
|
+
)
|
|
63
|
+
) !default;
|
|
64
|
+
|
|
65
|
+
// pagination
|
|
66
|
+
$cx-grid-pagination-default-border-width: $cx-default-border-width !default;
|
|
67
|
+
$cx-grid-pagination-default-border-color: $cx-default-border-color !default;
|
|
68
|
+
$cx-grid-pagination-default-border-radius: null !default;
|
|
69
|
+
$cx-grid-pagination-default-outer-border-radius: $cx-default-border-radius !default;
|
|
70
|
+
$cx-grid-pagination-default-padding: cx-top($cx-default-box-padding) 2 * cx-top($cx-default-box-padding) !default;
|
|
71
|
+
|
|
72
|
+
$cx-grid-pagination-state-style-map: cx-deep-map-merge($cx-list-item, ()) !default;
|
|
73
|
+
|
|
74
|
+
$cx-grid-cell-cursor-style: (
|
|
75
|
+
left: -1px,
|
|
76
|
+
top: -1px,
|
|
77
|
+
right: -1px,
|
|
78
|
+
bottom: -1px,
|
|
79
|
+
background: rgba(green, 0.1),
|
|
80
|
+
border: 2px solid rgba(green, 1),
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
$cx-dependencies: map-merge(
|
|
84
|
+
$cx-dependencies,
|
|
85
|
+
(
|
|
86
|
+
"cx/widgets/Grid": "cx/widgets/DragClone",
|
|
87
|
+
)
|
|
88
|
+
);
|
|
@@ -1,74 +1,74 @@
|
|
|
1
|
-
@mixin cx-menu($name: "menu", $state-style-map: $cx-menu-state-style-map, $besm: $cx-besm) {
|
|
2
|
-
$block: map-get($besm, block);
|
|
3
|
-
$element: map-get($besm, element);
|
|
4
|
-
$state: map-get($besm, state);
|
|
5
|
-
$mod: map-get($besm, mod);
|
|
6
|
-
|
|
7
|
-
.#{$block}#{$name} {
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
margin: 0;
|
|
10
|
-
padding: 0;
|
|
11
|
-
list-style: none;
|
|
12
|
-
|
|
13
|
-
@include cx-add-state-rules($state-style-map, default);
|
|
14
|
-
|
|
15
|
-
&.#{$state}horizontal {
|
|
16
|
-
white-space: nowrap;
|
|
17
|
-
|
|
18
|
-
& > .#{$element}#{$name}-item {
|
|
19
|
-
display: inline-block;
|
|
20
|
-
user-select: none;
|
|
21
|
-
|
|
22
|
-
@each $size, $value in $cx-menu-padding-options {
|
|
23
|
-
&.#{$state}size-#{$size} > .#{$mod}#{$name} {
|
|
24
|
-
margin: 0 cx-right($value) 0 cx-left($value);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@each $size, $value in $cx-menu-padding-options {
|
|
31
|
-
&.#{$state}vertical.#{$state}#{$size}-item-padding .#{$mod}#{$name} {
|
|
32
|
-
margin: $value;
|
|
33
|
-
display: block;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.#{$element}#{$name}-item {
|
|
38
|
-
& > hr {
|
|
39
|
-
border: none;
|
|
40
|
-
border-top: 1px solid $cx-default-menu-separator-color;
|
|
41
|
-
margin: map-get($cx-menu-padding-options, medium);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
&.#{$state}hidden {
|
|
45
|
-
visibility: hidden;
|
|
46
|
-
position: absolute;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
&.#{$state}overflow {
|
|
51
|
-
overflow: hidden;
|
|
52
|
-
display: flex;
|
|
53
|
-
|
|
54
|
-
& > .#{$element}#{$name}-item:last-child {
|
|
55
|
-
visibility: hidden;
|
|
56
|
-
position: absolute;
|
|
57
|
-
max-height: 100%;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
&.#{$state}pack > .#{$element}#{$name}-item:last-child {
|
|
61
|
-
visibility: visible;
|
|
62
|
-
position: relative;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.#{$element}#{$name}-spacer {
|
|
68
|
-
flex: 1 1 0%;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
@if (cx-should-include("cx/widgets/Menu")) {
|
|
73
|
-
@include cx-menu();
|
|
74
|
-
}
|
|
1
|
+
@mixin cx-menu($name: "menu", $state-style-map: $cx-menu-state-style-map, $besm: $cx-besm) {
|
|
2
|
+
$block: map-get($besm, block);
|
|
3
|
+
$element: map-get($besm, element);
|
|
4
|
+
$state: map-get($besm, state);
|
|
5
|
+
$mod: map-get($besm, mod);
|
|
6
|
+
|
|
7
|
+
.#{$block}#{$name} {
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
list-style: none;
|
|
12
|
+
|
|
13
|
+
@include cx-add-state-rules($state-style-map, default);
|
|
14
|
+
|
|
15
|
+
&.#{$state}horizontal {
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
|
|
18
|
+
& > .#{$element}#{$name}-item {
|
|
19
|
+
display: inline-block;
|
|
20
|
+
user-select: none;
|
|
21
|
+
|
|
22
|
+
@each $size, $value in $cx-menu-padding-options {
|
|
23
|
+
&.#{$state}size-#{$size} > .#{$mod}#{$name} {
|
|
24
|
+
margin: 0 cx-right($value) 0 cx-left($value);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@each $size, $value in $cx-menu-padding-options {
|
|
31
|
+
&.#{$state}vertical.#{$state}#{$size}-item-padding .#{$mod}#{$name} {
|
|
32
|
+
margin: $value;
|
|
33
|
+
display: block;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.#{$element}#{$name}-item {
|
|
38
|
+
& > hr {
|
|
39
|
+
border: none;
|
|
40
|
+
border-top: 1px solid $cx-default-menu-separator-color;
|
|
41
|
+
margin: map-get($cx-menu-padding-options, medium);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&.#{$state}hidden {
|
|
45
|
+
visibility: hidden;
|
|
46
|
+
position: absolute;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&.#{$state}overflow {
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
display: flex;
|
|
53
|
+
|
|
54
|
+
& > .#{$element}#{$name}-item:last-child {
|
|
55
|
+
visibility: hidden;
|
|
56
|
+
position: absolute;
|
|
57
|
+
max-height: 100%;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&.#{$state}pack > .#{$element}#{$name}-item:last-child {
|
|
61
|
+
visibility: visible;
|
|
62
|
+
position: relative;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.#{$element}#{$name}-spacer {
|
|
68
|
+
flex: 1 1 0%;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@if (cx-should-include("cx/widgets/Menu")) {
|
|
73
|
+
@include cx-menu();
|
|
74
|
+
}
|