@finqu/cool 1.2.29 → 1.3.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.
Files changed (206) hide show
  1. package/README.md +680 -1
  2. package/dist/css/cool.css +23575 -16644
  3. package/dist/css/cool.css.map +1 -154
  4. package/dist/css/cool.min.css +89 -3
  5. package/dist/css/cool.min.css.map +1 -1
  6. package/dist/js/cool.bundle.js +15402 -3800
  7. package/dist/js/cool.bundle.js.map +1 -1
  8. package/dist/js/cool.bundle.min.js +20 -8
  9. package/dist/js/cool.bundle.min.js.map +1 -1
  10. package/dist/js/cool.esm.js +4269 -3360
  11. package/dist/js/cool.esm.js.map +1 -1
  12. package/dist/js/cool.esm.min.js +9 -8
  13. package/dist/js/cool.esm.min.js.map +1 -1
  14. package/dist/js/cool.js +4271 -3362
  15. package/dist/js/cool.js.map +1 -1
  16. package/dist/js/cool.min.js +9 -8
  17. package/dist/js/cool.min.js.map +1 -1
  18. package/package.json +94 -61
  19. package/.babelrc.js +0 -20
  20. package/.browserslistrc +0 -13
  21. package/build/.eslintrc.json +0 -10
  22. package/build/banner.js +0 -14
  23. package/build/build-plugins.js +0 -92
  24. package/build/rollup.config.js +0 -46
  25. package/dist/css/cool-grid.css +0 -4390
  26. package/dist/css/cool-grid.css.map +0 -30
  27. package/dist/css/cool-grid.min.css +0 -7
  28. package/dist/css/cool-grid.min.css.map +0 -1
  29. package/dist/css/cool-reboot.css +0 -286
  30. package/dist/css/cool-reboot.css.map +0 -62
  31. package/dist/css/cool-reboot.min.css +0 -7
  32. package/dist/css/cool-reboot.min.css.map +0 -1
  33. package/html/index.html +0 -2703
  34. package/js/dist/collapse.js +0 -5535
  35. package/js/dist/collapse.js.map +0 -1
  36. package/js/dist/common.js +0 -21996
  37. package/js/dist/common.js.map +0 -1
  38. package/js/dist/cooldropdown.js +0 -467
  39. package/js/dist/cooldropdown.js.map +0 -1
  40. package/js/dist/coolpopover.js +0 -391
  41. package/js/dist/coolpopover.js.map +0 -1
  42. package/js/dist/coolsectiontabs.js +0 -256
  43. package/js/dist/coolsectiontabs.js.map +0 -1
  44. package/js/dist/coolselect.js +0 -796
  45. package/js/dist/coolselect.js.map +0 -1
  46. package/js/dist/cooltooltip.js +0 -360
  47. package/js/dist/cooltooltip.js.map +0 -1
  48. package/js/dist/coolui.js +0 -73
  49. package/js/dist/coolui.js.map +0 -1
  50. package/js/dist/dropdown.js +0 -27421
  51. package/js/dist/dropdown.js.map +0 -1
  52. package/js/dist/popover.js +0 -9472
  53. package/js/dist/popover.js.map +0 -1
  54. package/js/dist/sectiontabs.js +0 -4483
  55. package/js/dist/sectiontabs.js.map +0 -1
  56. package/js/dist/select.js +0 -37080
  57. package/js/dist/select.js.map +0 -1
  58. package/js/dist/tooltip.js +0 -8786
  59. package/js/dist/tooltip.js.map +0 -1
  60. package/js/index.esm.js +0 -21
  61. package/js/index.umd.js +0 -21
  62. package/js/src/abstract-ui-component.js +0 -81
  63. package/js/src/collapse.js +0 -286
  64. package/js/src/common.js +0 -296
  65. package/js/src/dialog.js +0 -579
  66. package/js/src/dropdown.js +0 -525
  67. package/js/src/popover.js +0 -632
  68. package/js/src/section-tabs.js +0 -215
  69. package/js/src/select.js +0 -1342
  70. package/js/src/toast.js +0 -581
  71. package/js/src/tooltip.js +0 -591
  72. package/js/src/util/animate-css.js +0 -22
  73. package/js/src/util/index.js +0 -122
  74. package/js/src/util/perfect-scrollbar.js +0 -1316
  75. package/less/alert.less +0 -345
  76. package/less/badge.less +0 -38
  77. package/less/bootstrap-noconflict.less +0 -23
  78. package/less/bootstrap.less +0 -23
  79. package/less/button-group.less +0 -153
  80. package/less/buttons.less +0 -287
  81. package/less/dialog-noconflict.less +0 -174
  82. package/less/dialog.less +0 -203
  83. package/less/dropdown.less +0 -209
  84. package/less/forms.less +0 -770
  85. package/less/images.less +0 -242
  86. package/less/input-group.less +0 -163
  87. package/less/list-group.less +0 -73
  88. package/less/mixins/aspect-ratio.less +0 -23
  89. package/less/mixins/border-radius.less +0 -24
  90. package/less/mixins/box-shadow.less +0 -4
  91. package/less/mixins/buttons.less +0 -17
  92. package/less/mixins/caret.less +0 -51
  93. package/less/mixins/clearfix.less +0 -10
  94. package/less/mixins/gradients.less +0 -34
  95. package/less/mixins/nav-divider.less +0 -7
  96. package/less/mixins/object-fit.less +0 -13
  97. package/less/mixins/reset-text.less +0 -16
  98. package/less/mixins.less +0 -11
  99. package/less/package.json +0 -11
  100. package/less/pagination.less +0 -69
  101. package/less/popover.less +0 -143
  102. package/less/project.sublime-workspace +0 -774
  103. package/less/reboot.less +0 -235
  104. package/less/section.less +0 -793
  105. package/less/select.less +0 -150
  106. package/less/tables.less +0 -737
  107. package/less/tabs.less +0 -162
  108. package/less/tooltip.less +0 -87
  109. package/less/type.less +0 -71
  110. package/less/utilities/align.less +0 -27
  111. package/less/utilities/animate.less +0 -3512
  112. package/less/utilities/background.less +0 -70
  113. package/less/utilities/borders.less +0 -16
  114. package/less/utilities/color.less +0 -70
  115. package/less/utilities/cursor.less +0 -8
  116. package/less/utilities/display.less +0 -38
  117. package/less/utilities/embed.less +0 -61
  118. package/less/utilities/flex.less +0 -76
  119. package/less/utilities/jquery-ui.less +0 -116
  120. package/less/utilities/lazyload.less +0 -29
  121. package/less/utilities/overflow.less +0 -11
  122. package/less/utilities/pace.less +0 -25
  123. package/less/utilities/placeholder.less +0 -60
  124. package/less/utilities/position.less +0 -42
  125. package/less/utilities/scrollbar.less +0 -152
  126. package/less/utilities/spacing.less +0 -197
  127. package/less/utilities/text.less +0 -68
  128. package/less/utilities/transform.less +0 -7
  129. package/less/utilities.less +0 -21
  130. package/less/variables.less +0 -343
  131. package/scss/LISENCE +0 -15
  132. package/scss/_alert.scss +0 -102
  133. package/scss/_badge.scss +0 -102
  134. package/scss/_button-group.scss +0 -129
  135. package/scss/_buttons.scss +0 -248
  136. package/scss/_custom-forms.scss +0 -444
  137. package/scss/_dialog.scss +0 -160
  138. package/scss/_dropdown.scss +0 -233
  139. package/scss/_forms.scss +0 -258
  140. package/scss/_frame.scss +0 -627
  141. package/scss/_functions.scss +0 -124
  142. package/scss/_grid.scss +0 -35
  143. package/scss/_images.scss +0 -361
  144. package/scss/_input-group.scss +0 -285
  145. package/scss/_list-group.scss +0 -82
  146. package/scss/_mixins.scss +0 -34
  147. package/scss/_navbar.scss +0 -290
  148. package/scss/_notification.scss +0 -13
  149. package/scss/_pagination.scss +0 -88
  150. package/scss/_popover.scss +0 -167
  151. package/scss/_reboot.scss +0 -284
  152. package/scss/_root.scss +0 -15
  153. package/scss/_section.scss +0 -977
  154. package/scss/_select.scss +0 -187
  155. package/scss/_tables.scss +0 -735
  156. package/scss/_tabs.scss +0 -178
  157. package/scss/_toast.scss +0 -182
  158. package/scss/_tooltip.scss +0 -101
  159. package/scss/_type.scss +0 -129
  160. package/scss/_utilities.scss +0 -23
  161. package/scss/_variables.scss +0 -823
  162. package/scss/cool-grid.scss +0 -29
  163. package/scss/cool-reboot.scss +0 -11
  164. package/scss/cool.scss +0 -37
  165. package/scss/mixins/_alert-variant.scss +0 -20
  166. package/scss/mixins/_aspect-ratio.scss +0 -29
  167. package/scss/mixins/_background-variant.scss +0 -25
  168. package/scss/mixins/_badge-variant.scss +0 -36
  169. package/scss/mixins/_breakpoints.scss +0 -102
  170. package/scss/mixins/_buttons.scss +0 -104
  171. package/scss/mixins/_caret.scss +0 -80
  172. package/scss/mixins/_clearfix.scss +0 -10
  173. package/scss/mixins/_float.scss +0 -14
  174. package/scss/mixins/_forms.scss +0 -67
  175. package/scss/mixins/_gradients.scss +0 -40
  176. package/scss/mixins/_grid-framework.scss +0 -72
  177. package/scss/mixins/_grid.scss +0 -60
  178. package/scss/mixins/_nav-divider.scss +0 -9
  179. package/scss/mixins/_notification-variant.scss +0 -7
  180. package/scss/mixins/_object-fit.scss +0 -16
  181. package/scss/mixins/_reset-text.scss +0 -19
  182. package/scss/mixins/_text-emphasis.scss +0 -21
  183. package/scss/mixins/_text-hide.scss +0 -10
  184. package/scss/mixins/_text-truncate.scss +0 -81
  185. package/scss/mixins/_visibility.scss +0 -7
  186. package/scss/project.sublime-workspace +0 -491
  187. package/scss/utilities/_align.scss +0 -41
  188. package/scss/utilities/_animate.scss +0 -3512
  189. package/scss/utilities/_background.scss +0 -14
  190. package/scss/utilities/_borders.scss +0 -146
  191. package/scss/utilities/_clearfix.scss +0 -6
  192. package/scss/utilities/_collapse.scss +0 -33
  193. package/scss/utilities/_cursor.scss +0 -22
  194. package/scss/utilities/_display.scss +0 -16
  195. package/scss/utilities/_embed.scss +0 -78
  196. package/scss/utilities/_flex.scss +0 -52
  197. package/scss/utilities/_lazyload.scss +0 -31
  198. package/scss/utilities/_overflow.scss +0 -6
  199. package/scss/utilities/_perfect-scrollbar.scss +0 -141
  200. package/scss/utilities/_placeholder.scss +0 -77
  201. package/scss/utilities/_position.scss +0 -30
  202. package/scss/utilities/_sizing.scss +0 -32
  203. package/scss/utilities/_spacing.scss +0 -92
  204. package/scss/utilities/_text.scss +0 -99
  205. package/scss/utilities/_user-select.scss +0 -14
  206. package/scss/utilities/_visibility.scss +0 -10
package/less/buttons.less DELETED
@@ -1,287 +0,0 @@
1
- // Buttons
2
- .btn {
3
- position: relative;
4
- border: none;
5
- border-radius: @border-radius;
6
- background-color: transparent;
7
- cursor: pointer;
8
- display: inline-block;
9
- font-family: @font-family-sans-serif;
10
- font-weight: @btn-font-weight;
11
- font-size: @btn-font-size;
12
- line-height: @btn-line-height;
13
- padding: @btn-padding-y @btn-padding-x;
14
- color: @color-text;
15
- margin: 2px;
16
- text-align: center;
17
- text-decoration: none;
18
- touch-action: manipulation;
19
- user-select: none;
20
- vertical-align: middle;
21
- white-space: nowrap;
22
- box-sizing: border-box;
23
- outline: 0;
24
- transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
25
- &:not(.btn-icon) > .fa,
26
- &:not(.btn-icon) > .fas,
27
- &:not(.btn-icon) > .far,
28
- &:not(.btn-icon) > .fal,
29
- &:not(.btn-icon) > .fab {
30
- margin-right: 7px;
31
- pointer-events: none;
32
- }
33
- .image,
34
- span {
35
- pointer-events: none;
36
- }
37
- &.hidden {
38
- display: none;
39
- }
40
-
41
- &.small {
42
- font-size: @small-font-size;
43
- font-weight: @font-weight-normal;
44
- }
45
-
46
- &.smaller {
47
- font-size: @smaller-font-size;
48
- font-weight: @font-weight-normal;
49
- }
50
- }
51
-
52
- // Btn primary
53
- .btn-primary,
54
- .btn-create,
55
- .btn-remove {
56
- &:not(.btn-icon) {
57
- background-color: @color-btn-primary;
58
- color: contrast(@color-btn-primary);
59
- &.focus,
60
- &:focus,
61
- &.hover,
62
- &:hover {
63
- background-color: desaturate(@color-btn-primary, 15%);
64
- color: contrast(@color-btn-primary);
65
- box-shadow: 0 14px 26px -12px fade(desaturate(@color-btn-primary, 15%), 42%), 0 4px 23px 0 rgba(0, 0, 0, 0.06), 0 8px 10px -5px fade(desaturate(@color-btn-primary, 15%), 20%);
66
- }
67
- &.disabled,
68
- &[disabled] {
69
- opacity: 0.25;
70
- cursor: not-allowed;
71
- &:hover {
72
- box-shadow: none;
73
- cursor: not-allowed;
74
- }
75
- }
76
- }
77
- }
78
-
79
- // Btn secondary
80
- .btn-secondary,
81
- .btn-outline,
82
- .btn-discard {
83
- &:not(.btn-icon) {
84
- border: 1px solid @color-btn-secondary;
85
- color: @color-btn-secondary;
86
- background-color: transparent;
87
- &.focus,
88
- &:focus,
89
- &.hover,
90
- &:hover {
91
- background-color: @color-btn-secondary;
92
- color: contrast(@color-btn-secondary);
93
- box-shadow: 0 14px 26px -12px fade(desaturate(@color-btn-secondary, 15%), 42%), 0 4px 23px 0 rgba(0, 0, 0, 0.06), 0 8px 10px -5px fade(desaturate(@color-btn-secondary, 15%), 20%);
94
- }
95
- &.disabled,
96
- &[disabled] {
97
- opacity: 0.25;
98
- cursor: not-allowed;
99
- &:hover {
100
- box-shadow: none;
101
- cursor: not-allowed;
102
- }
103
- }
104
- }
105
- }
106
-
107
- .btn-white {
108
- &:not(.btn-icon) {
109
- border: 1px solid white;
110
- background-color: white;
111
- &.focus,
112
- &:focus,
113
- &.hover,
114
- &:hover {
115
- background-color: white;
116
- color: contrast(white);
117
- box-shadow: 0 14px 26px -12px fade(desaturate(@color-btn-secondary, 15%), 42%), 0 4px 23px 0 rgba(0, 0, 0, 0.06), 0 8px 10px -5px fade(desaturate(@color-btn-secondary, 15%), 20%);
118
- }
119
- &.disabled,
120
- &[disabled] {
121
- opacity: 0.25;
122
- cursor: not-allowed;
123
- &:hover {
124
- box-shadow: none;
125
- cursor: not-allowed;
126
- }
127
- }
128
- }
129
- }
130
-
131
- // Btn icon
132
- .btn-icon {
133
- width: @btn-height;
134
- height: @btn-height;
135
- color: @color-icon;
136
- text-align: center;
137
- padding-left: 0;
138
- padding-right: 0;
139
- > .fa,
140
- > .fas,
141
- > .far,
142
- > .fal,
143
- > .fab {
144
- vertical-align: middle;
145
- pointer-events: none;
146
- }
147
- .image,
148
- span {
149
- pointer-events: none;
150
- }
151
- &:hover:not(.disabled):not([disabled]) {
152
- color: @color-grey-darkest;
153
- &:not(.input-group-addon):not(.disable-hover) {
154
- background-color: transparent;
155
- &:before {
156
- transform: scale3d(1,1,1);
157
- opacity: 1;
158
- }
159
- }
160
- }
161
- &:not(.input-group-addon):not(.disable-hover) {
162
- background-color: transparent;
163
- transition: all 0.5s ease;
164
- &:before {
165
- position: absolute;
166
- left: 0;
167
- top: 0;
168
- width: 100%;
169
- height: 100%;
170
- content: '';
171
- transform: scale3d(0,0,0);
172
- transition: all;
173
- transition-duration: 250ms;
174
- background-color: rgba(0,0,0,.1);
175
- border-radius: 50%;
176
- z-index: 0;
177
- opacity: 0;
178
- }
179
- }
180
- }
181
-
182
- // Btn link
183
- .btn-link {
184
- display: inline;
185
- font-family: @font-family-sans-serif;
186
- font-weight: inherit;
187
- font-size: inherit;
188
- padding: 0;
189
- margin: 0;
190
- background: transparent;
191
- color: @color-link;
192
- text-align: left;
193
- line-height: inherit;
194
- border: 0;
195
- cursor: pointer;
196
- outline: 0;
197
- &.hidden {
198
- display: none;
199
- }
200
- &:hover {
201
- color: @color-hover;
202
- background: transparent;
203
- }
204
- }
205
-
206
- // Btn text
207
- .btn-text {
208
- display: inline;
209
- font-family: @font-family-sans-serif;
210
- font-weight: inherit;
211
- font-size: inherit;
212
- padding: 0;
213
- margin: 0;
214
- background: transparent;
215
- color: @color-text;
216
- text-align: left;
217
- border: 0;
218
- cursor: pointer;
219
- outline: 0;
220
- &.hidden {
221
- display: none;
222
- }
223
- }
224
-
225
- // Btn fluid
226
- .btn-fluid {
227
- width: 100%;
228
- margin-top: 0;
229
- }
230
-
231
- // Btn brand
232
- .btn-brand {
233
- position: relative;
234
- font-weight: 500;
235
- span {
236
- position: relative;
237
- z-index: 1;
238
- }
239
- &:hover {
240
- &:before {
241
- content: ' ';
242
- display: block;
243
- position: absolute;
244
- left: 0;
245
- right: 0;
246
- bottom: 0;
247
- top: 0;
248
- width: 100%;
249
- height: 100%;
250
- z-index: 0;
251
- border-radius: @border-radius;
252
- background-color: rgba(0,0,0,0.1);
253
- }
254
- }
255
- }
256
-
257
- // Sizing
258
- .btn-sm {
259
- font-size: @btn-font-size-sm;
260
- padding: @btn-padding-y-sm @btn-padding-x-sm;
261
- &.btn-icon {
262
- width: @btn-height-sm;
263
- height: @btn-height-sm;
264
- padding-left: 0;
265
- padding-right: 0;
266
- }
267
- }
268
- .btn-xs {
269
- font-size: @btn-font-size-xs;
270
- padding: @btn-padding-y-xs @btn-padding-x-xs;
271
- &.btn-icon {
272
- width: @btn-height-xs;
273
- height: @btn-height-xs;
274
- padding-left: 0;
275
- padding-right: 0;
276
- }
277
- }
278
- .btn-lg {
279
- font-size: @btn-font-size-lg;
280
- padding: @btn-padding-y-lg @btn-padding-x-lg;
281
- &.btn-icon {
282
- width: @btn-height-lg;
283
- height: @btn-height-lg;
284
- padding-left: 0;
285
- padding-right: 0;
286
- }
287
- }
@@ -1,174 +0,0 @@
1
- // Dialog
2
- // ---------------------------------------------------------------------------------------------------------------
3
-
4
- .dialog {
5
- position: fixed;
6
- top: 0;
7
- right: 0;
8
- bottom: 0;
9
- left: 0;
10
- z-index: @zindex-dialog;
11
- overflow: hidden;
12
- outline: 0;
13
- -webkit-overflow-scrolling: touch;
14
-
15
- .dialog-container {
16
- position: relative;
17
- width: auto;
18
- margin: 10px;
19
- pointer-events: none;
20
- @media (min-width: 576px) {
21
- max-width: 600px;
22
- margin: 25px auto;
23
- }
24
-
25
- .dialog-content {
26
- display: flex;
27
- flex-direction: column;
28
- width: 100%;
29
- pointer-events: auto;
30
- position: relative;
31
- text-align: left;
32
- border: none;
33
- border-radius: @border-radius;
34
- background-color: #fff;
35
- background-clip: padding-box;
36
- outline: 0;
37
- overflow: auto;
38
- box-shadow: 0 30px 40px 0 rgba(34, 44, 54, 0.2), 0 2px 16px 0 rgba(34, 44, 54, 0.09);
39
-
40
- .dialog-header {
41
- display: flex;
42
- align-items: flex-start;
43
- justify-content: space-between;
44
- padding: 12px 16px;
45
- border-bottom: 1px solid @border-color;
46
- @media (max-width: 991.98px) {
47
- padding: 10px;
48
- }
49
-
50
- .dialog-title {
51
- font-size: 20px;
52
- overflow: hidden;
53
- text-overflow: ellipsis;
54
- white-space: nowrap;
55
- }
56
-
57
- button[data-dialog-close] {
58
- font-size: 18px;
59
- background-color: transparent;
60
- border: 0;
61
- opacity: 0.75;
62
-
63
- &:hover,
64
- &:focus {
65
- opacity: 1;
66
- outline: 0
67
- }
68
- }
69
- }
70
-
71
- .dialog-body {
72
- position: relative;
73
- flex: 1 1 auto;
74
- padding: 16px;
75
- overflow-y: auto;
76
- }
77
-
78
- .dialog-footer {
79
- display: flex;
80
- align-items: center;
81
- justify-content: flex-end;
82
- padding: 12px 16px;
83
- border-top: 1px solid @border-color;
84
- @media (max-width: 991.98px) {
85
- padding: 10px;
86
- }
87
- }
88
- }
89
- }
90
- }
91
-
92
-
93
- // Dialog loader
94
- .dialog-loader {
95
- .dialog-container {
96
- width: 180px;
97
- height: 100px;
98
- min-height: 160px;
99
- text-align: center;
100
- margin: 25px auto;
101
-
102
- .dialog-content {
103
- .dialog-body {
104
- padding: 10px;
105
- flex: 0 0 auto;
106
- white-space: nowrap;
107
- overflow: hidden;
108
- text-overflow: ellipsis;
109
- text-align: center;
110
- }
111
- }
112
- }
113
- }
114
-
115
-
116
- // Sizes
117
- .dialog-sm {
118
- .dialog-container {
119
- @media (min-width: 576px) {
120
- max-width: 300px;
121
- }
122
- }
123
- }
124
-
125
- .dialog-lg {
126
- .dialog-container {
127
- @media (min-width: 576px) {
128
- max-width: 800px;
129
- }
130
- }
131
- }
132
-
133
-
134
- // Utilities
135
- .dialog-centered {
136
- .dialog-container {
137
- display: flex;
138
- align-items: center;
139
- @media (min-width: 576px) {
140
- min-height: calc(100% - 50px);
141
- }
142
- }
143
- }
144
-
145
- .dialog-prevent-scroll {
146
- overflow: hidden;
147
- }
148
-
149
- .dialog-backdrop {
150
- position: fixed;
151
- top: 0;
152
- bottom: 0;
153
- left: 0;
154
- right: 0;
155
- opacity: 0;
156
- background-color: #000;
157
- z-index: @zindex-dialog;
158
- backface-visibility: hidden;
159
- transition: opacity 0.1s;
160
- }
161
-
162
- .has-dialogs .dialog-backdrop {
163
- opacity: 0.3;
164
- }
165
-
166
- .dialog-overflow-visible {
167
- overflow-x: visible;
168
- overflow-y: visible;
169
-
170
- .dialog-body {
171
- overflow-x: visible;
172
- overflow-y: visible;
173
- }
174
- }
package/less/dialog.less DELETED
@@ -1,203 +0,0 @@
1
- // Dialog
2
- @keyframes animate-open {
3
- 0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); }
4
- 100% { opacity: 1; transform: scale3d(1, 1, 1); }
5
- }
6
-
7
- @keyframes animate-close {
8
- 0% { opacity: 1; }
9
- 100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
10
- }
11
-
12
- .fnq {
13
- .dialog {
14
- position: fixed;
15
- top: 0;
16
- right: 0;
17
- bottom: 0;
18
- left: 0;
19
- z-index: 100000;
20
- display: none;
21
- overflow: hidden;
22
- -webkit-overflow-scrolling: touch;
23
- outline: 0;
24
- .dialog-container {
25
- position: relative;
26
- width: auto;
27
- margin: 10px;
28
- box-sizing: border-box;
29
- @media screen and (min-width: 768px) {
30
- width: 800px;
31
- margin: 30px auto;
32
- }
33
- .dialog-content {
34
- position: relative;
35
- text-align: left;
36
- border: none;
37
- border-radius: @border-radius;
38
- background-color: @color-white;
39
- background-clip: padding-box;
40
- outline: 0;
41
- box-sizing: border-box;
42
- .dialog-header {
43
- height: 60px;
44
- box-sizing: border-box;
45
- display: flex;
46
- flex-shrink: 0;
47
- flex-flow: row;
48
- align-items: center;
49
- padding: 10px 20px;
50
- @media screen and (max-width: 767px) {
51
- padding: 10px;
52
- }
53
- h1 {
54
- flex: 1;
55
- overflow: hidden;
56
- text-overflow: ellipsis;
57
- font-size: 20px;
58
- margin: 0;
59
- }
60
- > .header-item {
61
- flex: 0 0 auto;
62
- &.close {
63
- cursor: pointer;
64
- }
65
- }
66
- }
67
- .dialog-body {
68
- position: relative;
69
- flex: 2 1 auto;
70
- -webkit-overflow-scrolling: touch;
71
- }
72
- .dialog-footer {
73
- display: flex;
74
- padding: 0 10px 20px;
75
- justify-content: flex-end;
76
- flex-shrink: 0;
77
- @media screen and (max-width: 767px) {
78
- padding: 10px;
79
- .btn {
80
- font-size: @btn-font-size-sm;
81
- padding: @btn-padding-y-sm @btn-padding-x-sm;
82
- height: 33px;
83
- &.btn-icon {
84
- width: @btn-height-sm;
85
- }
86
- }
87
- }
88
- @media screen and (max-width: 360px) {
89
- .btn {
90
- font-size: @btn-font-size-xs;
91
- padding: @btn-padding-y-xs @btn-padding-x-xs;
92
- height: 27px;
93
- &.btn-icon {
94
- width: @btn-height-xs;
95
- }
96
- }
97
- }
98
- }
99
- }
100
- }
101
- &[open] {
102
- animation-duration: 0.3s;
103
- animation-fill-mode: forwards;
104
- animation-name: animate-open;
105
- display: block;
106
- overflow-x: hidden;
107
- overflow-y: auto;
108
- *:focus {
109
- outline: none;
110
- }
111
- }
112
- &[closed] {
113
- animation-duration: 0.3s;
114
- animation-fill-mode: forwards;
115
- animation-name: animate-close;
116
- }
117
- &.overflow-visible {
118
- overflow-x: visible;
119
- overflow-y: visible;
120
- .dialog-body {
121
- overflow-x: visible;
122
- overflow-y: visible;
123
- }
124
- }
125
- &.gutter {
126
- .dialog-body {
127
- padding: 0 20px 20px 20px;
128
- @media screen and (max-width: 767px) {
129
- padding: 0 10px 10px 10px;
130
- }
131
- }
132
- }
133
- &.dialog-small {
134
- .dialog-container {
135
- max-width: 500px;
136
- .dialog-footer {
137
- @media screen and (min-width: 768px) {
138
- .btn {
139
- font-size: @btn-font-size-sm;
140
- padding: @btn-padding-y-sm @btn-padding-x-sm;
141
- height: 33px;
142
- &.btn-icon {
143
- width: @btn-height-sm;
144
- }
145
- }
146
- }
147
- }
148
- }
149
- }
150
- &.dialog-load {
151
- .dialog-container {
152
- width: 250px;
153
- height: 100px;
154
- min-height: 160px;
155
- text-align: center;
156
- .dialog-body {
157
- flex: 0 0 auto;
158
- white-space: nowrap;
159
- overflow: hidden;
160
- text-overflow: ellipsis;
161
- }
162
- .finquloader {
163
- margin: 50px 0 20px;
164
- }
165
- }
166
- }
167
- &.dialog-save {
168
- .dialog-container {
169
- width: 200px;
170
- height: 40px;
171
- min-height: 40px;
172
- line-height: 40px;
173
- padding: 0 20px;
174
- &.bg-green {
175
- background-color: @color-green;
176
- }
177
- .dialog-content {
178
- background-color: @color-black;
179
- color: @color-white;
180
- text-align: center;
181
- }
182
- }
183
- }
184
- }
185
-
186
- // Backdrop
187
- .dialog + .backdrop {
188
- position: fixed;
189
- top: 0;
190
- bottom: 0;
191
- left: 0;
192
- right: 0;
193
- background-color: rgba(0, 0, 0, 0.6);
194
- opacity: 0;
195
- transition: opacity 0.3s;
196
- z-index: 99999;
197
- backface-visibility: hidden;
198
- }
199
- .dialog[open] + .backdrop {
200
- opacity: 1;
201
- pointer-events: auto;
202
- }
203
- }