Skip to content

Commit 3db04aa

Browse files
committed
Update jQuery UI styling integration for new configuration
1 parent ca596ae commit 3db04aa

File tree

2 files changed

+48
-73
lines changed

2 files changed

+48
-73
lines changed

css/buttons.jqueryui.scss

Lines changed: 22 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ div.dt-buttons {
77
float: left;
88

99
.dt-button {
10+
white-space: nowrap;
11+
overflow: hidden;
12+
text-overflow: ellipsis;
1013
margin-right: 0;
1114

1215
span.ui-icon {
@@ -15,17 +18,16 @@ div.dt-buttons {
1518
margin-top: -2px;
1619
}
1720

18-
&:active {
19-
outline: none;
21+
&.processing{
22+
@include dtb-processing();
2023
}
2124

22-
&:hover > span {
23-
background-color: rgba(0, 0, 0, 0.05);
25+
&:active {
26+
outline: none;
2427
}
2528
}
2629
}
2730

28-
2931
div.dt-button-collection {
3032
position: absolute;
3133
top: 0;
@@ -54,60 +56,38 @@ div.dt-button-collection {
5456
float: none;
5557
margin-right: 0;
5658
margin-bottom: 4px;
59+
}
5760

58-
&:hover > span {
59-
background-color: rgba(0, 0, 0, 0.05);
60-
}
61+
.dt-button-split {
62+
width: 100%;
6163
}
6264

6365
@include dtb-fixed-collection();
6466

65-
-webkit-column-gap: 0;
66-
-moz-column-gap: 0;
67-
-ms-column-gap: 0;
68-
-o-column-gap: 0;
6967
column-gap: 0;
7068

7169
}
7270

73-
div.dt-btn-split-wrapper {
74-
padding: 0px !important;
75-
background-color: transparent !important;
76-
display: flex;
77-
border: none !important;
78-
margin: 0px;
71+
div.dt-button-split {
72+
display: inline-flex;
73+
vertical-align: middle;
7974

8075
&:hover {
8176
border: none;
8277
}
8378

84-
button.dt-btn-split-drop {
79+
button:first-child {
80+
border-top-right-radius: 0;
81+
border-bottom-right-radius: 0;
82+
}
83+
84+
button:last-child {
85+
padding: .4em 1em;
8586
width: 24px;
86-
padding-left: 6px;
87-
padding-right: 6px;
88-
font-size: 10px;
89-
height: 29.5px;
90-
border-radius: 0px;
9187
margin-left: -1px;
92-
}
9388

94-
&:active:not(.disabled),
95-
&.ui-state-active:not(.disabled),
96-
&.is-active:not(.disabled) {
97-
button.dt-button {
98-
background-color: #007fff;
99-
border-color: #003eff;
100-
}
101-
button.dt-btn-split-drop {
102-
box-shadow: none;
103-
background-color: #f6f6f6;
104-
border-color: #c5c5c5;
105-
}
106-
button {
107-
&:hover {
108-
background-color: #ededed;
109-
border-color: #cccccc;
110-
}
89+
span {
90+
margin-left: -7px;
11191
}
11292
}
11393
}
@@ -132,12 +112,3 @@ div.dt-button-background {
132112
}
133113
}
134114

135-
button.dt-button.processing,
136-
div.dt-button.processing,
137-
a.dt-button.processing {
138-
@include dtb-processing();
139-
}
140-
141-
span.dt-down-arrow {
142-
display: none;
143-
}

js/buttons.jqueryui.js

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,38 @@
44

55
$.extend( true, DataTable.Buttons.defaults, {
66
dom: {
7+
collection: {
8+
action: {
9+
dropHtml: '<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"/>'
10+
},
11+
},
712
container: {
8-
className: 'dt-buttons ui-buttonset'
13+
className: 'dt-buttons ui-buttonset',
914
},
1015
button: {
11-
className: 'dt-button ui-button ui-state-default ui-button-text-only',
16+
className: 'dt-button ui-button ui-corner-all',
1217
disabled: 'ui-state-disabled',
13-
active: 'ui-state-active'
14-
},
15-
buttonLiner: {
16-
tag: 'span',
17-
className: 'ui-button-text'
18-
},
19-
splitWrapper: {
20-
tag: 'div',
21-
className: 'dt-btn-split-wrapper dt-btn-split-wrapper ui-widget ui-controlgroup-item ui-corner-left',
22-
},
23-
splitDropdown: {
24-
tag: 'button',
25-
text: '&#x25BC;',
26-
className: 'dt-btn-split-drop ui-selectmenu-button demo-splitbutton-select ui-button ui-widget ui-controlgroup-item ui-selectmenu-button-closed ui-corner-right',
18+
active: 'ui-state-active',
19+
liner: {
20+
tag: '',
21+
className: ''
22+
}
2723
},
28-
splitDropdownButton: {
29-
tag: 'button',
30-
className: 'dt-btn-split-drop-button ui-button'
24+
split: {
25+
action: {
26+
tag: 'button',
27+
className: 'dt-button-split-drop-button ui-button ui-corner-left'
28+
},
29+
dropdown: {
30+
tag: 'button',
31+
dropHtml: '<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"/>',
32+
className: 'dt-button-split-drop ui-button ui-corner-right',
33+
},
34+
wrapper: {
35+
tag: 'div',
36+
className: 'dt-button-split',
37+
}
3138
}
3239
}
3340
} );
3441

35-
DataTable.ext.buttons.collection.text = function ( dt ) {
36-
return dt.i18n('buttons.collection', 'Collection <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"/>');
37-
};

0 commit comments

Comments
 (0)