zuora_connect_ui 0.2.0 → 0.2.2
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.
- checksums.yaml +4 -4
- data/README.md +2 -0
- data/app/assets/javascripts/zuora_connect_ui.js +6 -0
- data/app/assets/javascripts/zuora_connect_ui/datatable.js +327 -2
- data/app/assets/javascripts/zuora_connect_ui/iframe.js +41 -0
- data/app/assets/javascripts/zuora_connect_ui/input.js +3 -2
- data/app/assets/stylesheets/_zuora_connect_ui.scss +3 -0
- data/app/assets/stylesheets/zuora_connect_ui/base.scss +5 -1
- data/app/assets/stylesheets/zuora_connect_ui/breadcrumb_bar.scss +15 -17
- data/app/assets/stylesheets/zuora_connect_ui/buttons.scss +94 -61
- data/app/assets/stylesheets/zuora_connect_ui/datatables.scss +71 -7
- data/app/assets/stylesheets/zuora_connect_ui/datepicker.scss +1 -0
- data/app/assets/stylesheets/zuora_connect_ui/input.scss +42 -28
- data/app/assets/stylesheets/zuora_connect_ui/modal.scss +41 -2
- data/app/assets/stylesheets/zuora_connect_ui/tabs.scss +4 -3
- data/app/helpers/datatable_helper.rb +0 -15
- data/app/views/partials/_filters.html.erb +33 -34
- data/app/views/partials/_table.html.erb +206 -364
- data/lib/zuora_connect_ui/version.rb +1 -1
- data/vendor/assets/contextMenu/css/jquery.contextMenu.min.css.map +1 -0
- data/vendor/assets/contextMenu/css/jquery.contextMenu.min.scss +16 -0
- data/vendor/assets/contextMenu/fonts/context-menu-icons.eot +0 -0
- data/vendor/assets/contextMenu/fonts/context-menu-icons.ttf +0 -0
- data/vendor/assets/contextMenu/fonts/context-menu-icons.woff +0 -0
- data/vendor/assets/contextMenu/fonts/context-menu-icons.woff2 +0 -0
- data/vendor/assets/contextMenu/js/jquery.contextMenu.min.js +18 -0
- data/vendor/assets/contextMenu/js/jquery.contextMenu.min.js.map.js +1 -0
- data/vendor/assets/contextMenu/js/jquery.ui.position.min.js +6 -0
- data/vendor/assets/idb-keyval/js/idb-keyval-iife.js +100 -0
- metadata +13 -2
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
|
|
4
4
|
#breadcrumbs {
|
|
5
5
|
.breadcrumb {
|
|
6
|
-
font-size: .75rem;
|
|
6
|
+
font-size: 0.75rem;
|
|
7
7
|
margin-bottom: 0px; // override bootstrap default
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
#peek {
|
|
12
|
-
font-size: .625rem;
|
|
12
|
+
font-size: 0.625rem;
|
|
13
13
|
text-shadow: none;
|
|
14
14
|
background-color: transparent;
|
|
15
15
|
overflow: hidden; // keeps the contents hidden when peek is collapsed
|
|
@@ -64,48 +64,46 @@
|
|
|
64
64
|
background-color: $neutral-4;
|
|
65
65
|
border-left: 1px solid $neutral-2;
|
|
66
66
|
border-bottom: 1px solid $neutral-2;
|
|
67
|
-
border-radius:
|
|
67
|
+
border-radius: 0 0 0 0.5rem;
|
|
68
68
|
box-shadow: 0 1px 8px -1px $neutral-shadow;
|
|
69
69
|
|
|
70
70
|
#admin-peek-btn {
|
|
71
|
-
z-index:
|
|
72
|
-
border-radius: 0 0 0 .5rem;
|
|
71
|
+
z-index: 1001;
|
|
72
|
+
border-radius: 0 0 0 0.5rem;
|
|
73
73
|
background: white;
|
|
74
|
-
padding: .5rem;
|
|
74
|
+
padding: 0.5rem;
|
|
75
75
|
line-height: 1.2rem;
|
|
76
76
|
|
|
77
77
|
&:before {
|
|
78
78
|
display: inline-block;
|
|
79
79
|
transform: rotate(90deg);
|
|
80
|
-
font-size: .75rem;
|
|
80
|
+
font-size: 0.75rem;
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
.dropdown-toggle {
|
|
85
85
|
cursor: pointer;
|
|
86
86
|
min-width: 120px;
|
|
87
|
-
z-index:
|
|
87
|
+
z-index: 1001;
|
|
88
88
|
background: white;
|
|
89
89
|
border-left: 1px solid $neutral-3;
|
|
90
|
-
font-size: .75rem;
|
|
91
|
-
padding: .5rem 1rem;
|
|
90
|
+
font-size: 0.75rem;
|
|
91
|
+
padding: 0.5rem 1rem;
|
|
92
92
|
|
|
93
93
|
> span {
|
|
94
94
|
float: right;
|
|
95
|
-
padding: .25rem 0rem;
|
|
95
|
+
padding: 0.25rem 0rem;
|
|
96
96
|
}
|
|
97
|
-
|
|
98
97
|
}
|
|
99
98
|
|
|
100
|
-
.dropdown-menu{
|
|
99
|
+
.dropdown-menu {
|
|
101
100
|
min-width: 120px;
|
|
102
101
|
left: unset;
|
|
103
102
|
right: 0;
|
|
104
|
-
z-index: 1;
|
|
105
103
|
margin-top: -2px;
|
|
106
|
-
font-size: .75rem;
|
|
107
|
-
border-radius: 0 0 0 .5rem;
|
|
108
|
-
border: 1px solid #
|
|
104
|
+
font-size: 0.75rem;
|
|
105
|
+
border-radius: 0 0 0 0.5rem;
|
|
106
|
+
border: 1px solid #d0d3da;
|
|
109
107
|
border-right: none;
|
|
110
108
|
}
|
|
111
109
|
}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
.zuo-btn {
|
|
2
2
|
display: inline-block;
|
|
3
3
|
cursor: pointer;
|
|
4
|
-
border-radius: .25rem;
|
|
4
|
+
border-radius: 0.25rem;
|
|
5
5
|
white-space: nowrap;
|
|
6
|
-
padding: .375rem .75rem;
|
|
7
|
-
font-size: .875rem;
|
|
6
|
+
padding: 0.375rem 0.75rem;
|
|
7
|
+
font-size: 0.875rem;
|
|
8
8
|
line-height: 1.5;
|
|
9
9
|
-webkit-user-select: none;
|
|
10
10
|
-moz-user-select: none;
|
|
11
11
|
-ms-user-select: none;
|
|
12
12
|
user-select: none;
|
|
13
|
-
&:hover,
|
|
13
|
+
&:hover,
|
|
14
|
+
&:focus {
|
|
14
15
|
text-decoration: none;
|
|
15
16
|
}
|
|
16
17
|
/*primary btn - use for all call to actions (save, create, etc)*/
|
|
@@ -18,11 +19,8 @@
|
|
|
18
19
|
color: $neutral-4;
|
|
19
20
|
background-color: $support-1;
|
|
20
21
|
border: 1px solid $support-1;
|
|
21
|
-
transition: color
|
|
22
|
-
|
|
23
|
-
.15s ease-in-out,border-color
|
|
24
|
-
.15s ease-in-out,box-shadow
|
|
25
|
-
.15s ease-in-out;
|
|
22
|
+
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
|
|
23
|
+
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
26
24
|
&:hover:not(.disabled):not(:disabled),
|
|
27
25
|
&:focus:not(.disabled):not(:disabled) {
|
|
28
26
|
color: $neutral-4;
|
|
@@ -46,18 +44,22 @@
|
|
|
46
44
|
/*disabled btn*/
|
|
47
45
|
&.disabled,
|
|
48
46
|
&:disabled {
|
|
49
|
-
opacity: .65;
|
|
47
|
+
opacity: 0.65;
|
|
50
48
|
cursor: not-allowed;
|
|
51
49
|
}
|
|
52
50
|
}
|
|
53
51
|
|
|
52
|
+
.zuo-btn-icon {
|
|
53
|
+
padding-right: 0.375rem;
|
|
54
|
+
}
|
|
55
|
+
|
|
54
56
|
.table-btn {
|
|
55
57
|
cursor: pointer;
|
|
56
58
|
background-color: transparent;
|
|
57
59
|
font-size: 1rem;
|
|
58
60
|
line-height: 1rem;
|
|
59
|
-
padding: .5rem;
|
|
60
|
-
margin: .5rem;
|
|
61
|
+
padding: 0.5rem;
|
|
62
|
+
margin: 0.5rem;
|
|
61
63
|
border: none;
|
|
62
64
|
color: $support-1;
|
|
63
65
|
box-shadow: none;
|
|
@@ -77,35 +79,38 @@
|
|
|
77
79
|
}
|
|
78
80
|
}
|
|
79
81
|
|
|
80
|
-
.btn-xs{
|
|
82
|
+
.btn-xs {
|
|
81
83
|
margin: 1px;
|
|
82
84
|
}
|
|
83
85
|
|
|
84
|
-
.btn.disabled,
|
|
86
|
+
.btn.disabled,
|
|
87
|
+
.btn[disabled],
|
|
88
|
+
fieldset[disabled] .btn {
|
|
85
89
|
cursor: not-allowed;
|
|
86
90
|
pointer-events: none;
|
|
87
|
-
opacity: .65;
|
|
91
|
+
opacity: 0.65;
|
|
88
92
|
filter: alpha(opacity=65);
|
|
89
93
|
-webkit-box-shadow: none;
|
|
90
94
|
box-shadow: none;
|
|
91
|
-
background-color: #
|
|
95
|
+
background-color: #f1f2f4;
|
|
92
96
|
}
|
|
93
97
|
|
|
94
|
-
.btn-group.open .dropdown-toggle{
|
|
98
|
+
.btn-group.open .dropdown-toggle {
|
|
95
99
|
box-shadow: none;
|
|
96
100
|
}
|
|
97
101
|
|
|
98
102
|
.btn-group-vertical > button {
|
|
99
|
-
margin:0px;
|
|
103
|
+
margin: 0px;
|
|
100
104
|
}
|
|
101
105
|
|
|
102
106
|
.btn-sign-in {
|
|
103
107
|
background-color: transparent;
|
|
104
108
|
border: 1px solid white;
|
|
105
109
|
color: white;
|
|
106
|
-
&:hover,
|
|
110
|
+
&:hover,
|
|
111
|
+
&:focus {
|
|
107
112
|
color: white;
|
|
108
|
-
background-color: #
|
|
113
|
+
background-color: #5b6a79;
|
|
109
114
|
border-color: white;
|
|
110
115
|
}
|
|
111
116
|
}
|
|
@@ -115,26 +120,36 @@ a.btn-clear {
|
|
|
115
120
|
|
|
116
121
|
background-color: inherit !important;
|
|
117
122
|
border-color: inherit !important;
|
|
118
|
-
&:hover,
|
|
123
|
+
&:hover,
|
|
124
|
+
&:focus {
|
|
119
125
|
color: white !important;
|
|
120
|
-
background-color: #
|
|
126
|
+
background-color: #9fb1bf !important;
|
|
121
127
|
border-color: white !important;
|
|
122
128
|
}
|
|
123
129
|
}
|
|
124
130
|
|
|
125
|
-
.btn-clear + .tooltip > .tooltip-inner {
|
|
126
|
-
|
|
131
|
+
.btn-clear + .tooltip > .tooltip-inner {
|
|
132
|
+
background-color: white;
|
|
133
|
+
border: 1px solid;
|
|
134
|
+
border-color: white;
|
|
135
|
+
color: #394b5d;
|
|
136
|
+
}
|
|
137
|
+
.btn-clear + .tooltip > .tooltip-arrow {
|
|
138
|
+
border-bottom-color: white;
|
|
139
|
+
}
|
|
127
140
|
|
|
128
|
-
a.back_buttons{
|
|
129
|
-
float:right;
|
|
141
|
+
a.back_buttons {
|
|
142
|
+
float: right;
|
|
130
143
|
i {
|
|
131
|
-
padding-right:2px;
|
|
144
|
+
padding-right: 2px;
|
|
132
145
|
}
|
|
133
|
-
&:hover,
|
|
146
|
+
&:hover,
|
|
147
|
+
&:focus {
|
|
134
148
|
}
|
|
135
149
|
}
|
|
136
150
|
|
|
137
|
-
.btn-arrow-right,
|
|
151
|
+
.btn-arrow-right,
|
|
152
|
+
.btn-arrow-left {
|
|
138
153
|
position: relative;
|
|
139
154
|
padding-left: 18px;
|
|
140
155
|
padding-right: 18px;
|
|
@@ -146,45 +161,63 @@ a.back_buttons{
|
|
|
146
161
|
.btn-arrow-left {
|
|
147
162
|
padding-right: 36px;
|
|
148
163
|
}
|
|
149
|
-
.btn-arrow-right:before,
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
}
|
|
177
|
-
.btn-arrow-
|
|
164
|
+
.btn-arrow-right:before,
|
|
165
|
+
.btn-arrow-right:after,
|
|
166
|
+
.btn-arrow-left:before,
|
|
167
|
+
.btn-arrow-left:after {
|
|
168
|
+
/* make two squares (before and after), looking similar to the button */
|
|
169
|
+
content: "";
|
|
170
|
+
position: absolute;
|
|
171
|
+
top: 5px; /* move it down because of rounded corners */
|
|
172
|
+
width: 22px; /* same as height */
|
|
173
|
+
height: 22px; /* button_outer_height / sqrt(2) */
|
|
174
|
+
background: inherit; /* use parent background */
|
|
175
|
+
border: inherit; /* use parent border */
|
|
176
|
+
border-left-color: transparent; /* hide left border */
|
|
177
|
+
border-bottom-color: transparent; /* hide bottom border */
|
|
178
|
+
border-radius: 0px 4px 0px 0px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
|
|
179
|
+
-webkit-border-radius: 0px 4px 0px 0px;
|
|
180
|
+
-moz-border-radius: 0px 4px 0px 0px;
|
|
181
|
+
}
|
|
182
|
+
.btn-arrow-right:before,
|
|
183
|
+
.btn-arrow-right:after {
|
|
184
|
+
transform: rotate(
|
|
185
|
+
45deg
|
|
186
|
+
); /* rotate right arrow squares 45 deg to point right */
|
|
187
|
+
-webkit-transform: rotate(45deg);
|
|
188
|
+
-moz-transform: rotate(45deg);
|
|
189
|
+
-o-transform: rotate(45deg);
|
|
190
|
+
-ms-transform: rotate(45deg);
|
|
191
|
+
}
|
|
192
|
+
.btn-arrow-left:before,
|
|
193
|
+
.btn-arrow-left:after {
|
|
194
|
+
transform: rotate(
|
|
195
|
+
225deg
|
|
196
|
+
); /* rotate left arrow squares 225 deg to point left */
|
|
197
|
+
-webkit-transform: rotate(225deg);
|
|
198
|
+
-moz-transform: rotate(225deg);
|
|
199
|
+
-o-transform: rotate(225deg);
|
|
200
|
+
-ms-transform: rotate(225deg);
|
|
201
|
+
}
|
|
202
|
+
.btn-arrow-right:before,
|
|
203
|
+
.btn-arrow-left:before {
|
|
204
|
+
/* align the "before" square to the left */
|
|
178
205
|
left: -11px;
|
|
179
206
|
top: 2px;
|
|
180
207
|
}
|
|
181
|
-
.btn-arrow-right:after
|
|
208
|
+
.btn-arrow-right:after,
|
|
209
|
+
.btn-arrow-left:after {
|
|
210
|
+
/* align the "after" square to the right */
|
|
182
211
|
right: -11px;
|
|
183
212
|
top: 2px;
|
|
184
213
|
}
|
|
185
|
-
.btn-arrow-right:after
|
|
214
|
+
.btn-arrow-right:after,
|
|
215
|
+
.btn-arrow-left:before {
|
|
216
|
+
/* bring arrow pointers to front */
|
|
186
217
|
z-index: 5;
|
|
187
218
|
}
|
|
188
|
-
.btn-arrow-right:before,
|
|
219
|
+
.btn-arrow-right:before,
|
|
220
|
+
.btn-arrow-left:after {
|
|
221
|
+
/* hide arrow tails background */
|
|
189
222
|
background-color: white;
|
|
190
223
|
}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
.table_visibility {
|
|
2
2
|
li {
|
|
3
3
|
background-color: #fff;
|
|
4
|
-
padding: 0px 15px;
|
|
5
|
-
margin: 10px 0px;
|
|
6
4
|
display: flex;
|
|
7
|
-
flex-direction: row;
|
|
8
5
|
justify-content: space-between;
|
|
9
6
|
|
|
10
7
|
.checkbox {
|
|
@@ -33,8 +30,8 @@
|
|
|
33
30
|
td.actions.center,
|
|
34
31
|
th.actions.center {
|
|
35
32
|
vertical-align: middle;
|
|
36
|
-
width:
|
|
37
|
-
padding:
|
|
33
|
+
width: 0;
|
|
34
|
+
padding: 0 0 0 0.5rem;
|
|
38
35
|
|
|
39
36
|
.table-btn {
|
|
40
37
|
font-size: 1.25rem;
|
|
@@ -100,6 +97,8 @@ table.dataTable {
|
|
|
100
97
|
padding: 1rem 4rem 1rem 0.5rem;
|
|
101
98
|
border-top: 1px solid $neutral-3 !important;
|
|
102
99
|
border-bottom: 1px solid $neutral-3;
|
|
100
|
+
vertical-align: bottom;
|
|
101
|
+
line-height: 1.4;
|
|
103
102
|
|
|
104
103
|
&.sorting:after,
|
|
105
104
|
&.sorting_asc:after,
|
|
@@ -139,6 +138,10 @@ table.dataTable {
|
|
|
139
138
|
padding: 1rem 0.5rem;
|
|
140
139
|
border-top: none;
|
|
141
140
|
vertical-align: middle;
|
|
141
|
+
<<<<<<< HEAD
|
|
142
|
+
=======
|
|
143
|
+
line-height: 1.4;
|
|
144
|
+
>>>>>>> staging
|
|
142
145
|
}
|
|
143
146
|
}
|
|
144
147
|
}
|
|
@@ -166,6 +169,22 @@ div.dataTables_scrollBody table.dataTable thead th.sorting_desc:after {
|
|
|
166
169
|
display: flex;
|
|
167
170
|
}
|
|
168
171
|
|
|
172
|
+
.table-filter:not(:first-child) {
|
|
173
|
+
margin-left: 0.5rem;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.checkbox-filter > .dropdown-toggle {
|
|
177
|
+
margin-top: 1rem;
|
|
178
|
+
padding-bottom: 0.375rem;
|
|
179
|
+
border-bottom: 1px solid #e9ebee;
|
|
180
|
+
cursor: pointer;
|
|
181
|
+
|
|
182
|
+
> .z-icon-desc {
|
|
183
|
+
font-size: 0.75rem;
|
|
184
|
+
padding: 0 0.5rem;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
169
188
|
.table-btn {
|
|
170
189
|
float: left;
|
|
171
190
|
|
|
@@ -212,6 +231,7 @@ div.dataTables_scrollBody table.dataTable thead th.sorting_desc:after {
|
|
|
212
231
|
}
|
|
213
232
|
}
|
|
214
233
|
|
|
234
|
+
<<<<<<< HEAD
|
|
215
235
|
// // Workflow Context Menu
|
|
216
236
|
// ul.context-menu-list {
|
|
217
237
|
// border-radius: 2px;
|
|
@@ -237,12 +257,56 @@ div.dataTables_scrollBody table.dataTable thead th.sorting_desc:after {
|
|
|
237
257
|
// color: $support-1;
|
|
238
258
|
// }
|
|
239
259
|
|
|
260
|
+
=======
|
|
261
|
+
// Workflow Context Menu
|
|
262
|
+
ul.context-menu-list {
|
|
263
|
+
border: 1px solid #d3d7d8;
|
|
264
|
+
border-radius: 0px;
|
|
265
|
+
padding: .5rem 0;
|
|
266
|
+
box-shadow: 0 1px 8px -1px $neutral-shadow;
|
|
267
|
+
font-size: 0.875rem;
|
|
268
|
+
|
|
269
|
+
.context-menu-item {
|
|
270
|
+
&:not(.context-menu-disabled) {
|
|
271
|
+
color: $primary;
|
|
272
|
+
}
|
|
273
|
+
line-height: 1.4;
|
|
274
|
+
padding: 0.25rem 0.75rem;
|
|
275
|
+
|
|
276
|
+
&.context-menu-icon {
|
|
277
|
+
padding-left: 30px;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
&.context-menu-hover {
|
|
281
|
+
color: $primary;
|
|
282
|
+
background-color: $neutral-3;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.context-menu-icon.context-menu-icon--fa::before,
|
|
288
|
+
.context-menu-icon.context-menu-icon--fa.context-menu-hover::before,
|
|
289
|
+
{
|
|
290
|
+
color: $primary;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.context-menu-item.context-menu-hover::after {
|
|
294
|
+
border-color: transparent transparent transparent $primary;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
// .context-menu-action {
|
|
298
|
+
// padding: 2px;
|
|
299
|
+
// font-size: 1.25rem;
|
|
300
|
+
// line-height: 1rem;
|
|
301
|
+
// border: none;
|
|
302
|
+
// color: $support-1;
|
|
303
|
+
// }
|
|
304
|
+
|
|
305
|
+
>>>>>>> staging
|
|
240
306
|
.table-footer {
|
|
241
307
|
width: 100%;
|
|
242
308
|
padding: 0.75rem 0.5rem;
|
|
243
309
|
display: flex;
|
|
244
|
-
flex-direction: row;
|
|
245
|
-
justify-content: space-between;
|
|
246
310
|
align-items: center;
|
|
247
311
|
|
|
248
312
|
> .dataTables_info,
|