@finqu/cool 1.2.29 → 2.0.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.
Files changed (221) hide show
  1. package/README.md +694 -1
  2. package/dist/css/cool.css +26902 -14322
  3. package/dist/css/cool.css.map +1 -154
  4. package/dist/css/cool.min.css +2 -7
  5. package/dist/css/cool.min.css.map +1 -1
  6. package/dist/js/cool.bundle.js +16191 -5588
  7. package/dist/js/cool.bundle.js.map +1 -1
  8. package/dist/js/cool.bundle.min.js +13 -8
  9. package/dist/js/cool.bundle.min.js.map +1 -1
  10. package/dist/js/cool.esm.js +4722 -4812
  11. package/dist/js/cool.esm.js.map +1 -1
  12. package/dist/js/cool.esm.min.js +4 -9
  13. package/dist/js/cool.esm.min.js.map +1 -1
  14. package/dist/js/cool.js +5143 -5240
  15. package/dist/js/cool.js.map +1 -1
  16. package/dist/js/cool.min.js +4 -9
  17. package/dist/js/cool.min.js.map +1 -1
  18. package/package.json +125 -60
  19. package/scss/LISENCE +1 -1
  20. package/scss/_badge.scss +134 -102
  21. package/scss/_button-group.scss +80 -129
  22. package/scss/_buttons.scss +257 -201
  23. package/scss/_dark.scss +637 -0
  24. package/scss/_dialog.scss +314 -123
  25. package/scss/_dropdown.scss +165 -233
  26. package/scss/_forms.scss +555 -200
  27. package/scss/_frame.scss +945 -624
  28. package/scss/_grid.scss +215 -35
  29. package/scss/_input-group.scss +326 -285
  30. package/scss/_list-group.scss +127 -82
  31. package/scss/_media.scss +439 -0
  32. package/scss/_navbar.scss +116 -284
  33. package/scss/_notification.scss +111 -9
  34. package/scss/_pagination.scss +82 -88
  35. package/scss/_popover.scss +61 -167
  36. package/scss/_reboot.scss +306 -284
  37. package/scss/_root.scss +848 -15
  38. package/scss/_section.scss +735 -977
  39. package/scss/_select.scss +559 -187
  40. package/scss/_tables.scss +471 -595
  41. package/scss/_tabs.scss +50 -178
  42. package/scss/_toast.scss +242 -147
  43. package/scss/_tooltip.scss +130 -101
  44. package/scss/_typography.scss +166 -0
  45. package/scss/_variables.scss +1154 -748
  46. package/scss/cool.scss +64 -32
  47. package/scss/utilities/_align.scss +51 -41
  48. package/scss/utilities/_animation.scss +165 -0
  49. package/scss/utilities/_background.scss +72 -14
  50. package/scss/utilities/_borders.scss +205 -146
  51. package/scss/utilities/_collapse.scss +20 -25
  52. package/scss/utilities/_cursor.scss +160 -22
  53. package/scss/utilities/_display.scss +116 -16
  54. package/scss/utilities/_embed.scss +89 -78
  55. package/scss/utilities/_fill.scss +79 -0
  56. package/scss/utilities/_filters.scss +233 -0
  57. package/scss/utilities/_flex.scss +216 -52
  58. package/scss/utilities/_grid.scss +136 -0
  59. package/scss/utilities/_opacity.scss +131 -0
  60. package/scss/utilities/_overflow.scss +242 -6
  61. package/scss/utilities/_perfect-scrollbar.scss +147 -141
  62. package/scss/utilities/_pointer-events.scss +125 -0
  63. package/scss/utilities/_position.scss +130 -30
  64. package/scss/utilities/_screen-readers.scss +95 -0
  65. package/scss/utilities/_shadows.scss +195 -0
  66. package/scss/utilities/_sizing.scss +288 -32
  67. package/scss/utilities/_spacing.scss +168 -92
  68. package/scss/utilities/_stroke.scss +124 -0
  69. package/scss/utilities/_text.scss +420 -99
  70. package/scss/utilities/_transform.scss +232 -0
  71. package/scss/utilities/_transitions.scss +147 -0
  72. package/scss/utilities/_user-select.scss +89 -10
  73. package/scss/utilities/_visibility.scss +62 -6
  74. package/scss/utilities/_z-index.scss +169 -0
  75. package/.babelrc.js +0 -20
  76. package/.browserslistrc +0 -13
  77. package/build/.eslintrc.json +0 -10
  78. package/build/banner.js +0 -14
  79. package/build/build-plugins.js +0 -92
  80. package/build/rollup.config.js +0 -46
  81. package/dist/css/cool-grid.css +0 -4390
  82. package/dist/css/cool-grid.css.map +0 -30
  83. package/dist/css/cool-grid.min.css +0 -7
  84. package/dist/css/cool-grid.min.css.map +0 -1
  85. package/dist/css/cool-reboot.css +0 -286
  86. package/dist/css/cool-reboot.css.map +0 -62
  87. package/dist/css/cool-reboot.min.css +0 -7
  88. package/dist/css/cool-reboot.min.css.map +0 -1
  89. package/html/index.html +0 -2703
  90. package/js/dist/collapse.js +0 -5535
  91. package/js/dist/collapse.js.map +0 -1
  92. package/js/dist/common.js +0 -21996
  93. package/js/dist/common.js.map +0 -1
  94. package/js/dist/cooldropdown.js +0 -467
  95. package/js/dist/cooldropdown.js.map +0 -1
  96. package/js/dist/coolpopover.js +0 -391
  97. package/js/dist/coolpopover.js.map +0 -1
  98. package/js/dist/coolsectiontabs.js +0 -256
  99. package/js/dist/coolsectiontabs.js.map +0 -1
  100. package/js/dist/coolselect.js +0 -796
  101. package/js/dist/coolselect.js.map +0 -1
  102. package/js/dist/cooltooltip.js +0 -360
  103. package/js/dist/cooltooltip.js.map +0 -1
  104. package/js/dist/coolui.js +0 -73
  105. package/js/dist/coolui.js.map +0 -1
  106. package/js/dist/dropdown.js +0 -27421
  107. package/js/dist/dropdown.js.map +0 -1
  108. package/js/dist/popover.js +0 -9472
  109. package/js/dist/popover.js.map +0 -1
  110. package/js/dist/sectiontabs.js +0 -4483
  111. package/js/dist/sectiontabs.js.map +0 -1
  112. package/js/dist/select.js +0 -37080
  113. package/js/dist/select.js.map +0 -1
  114. package/js/dist/tooltip.js +0 -8786
  115. package/js/dist/tooltip.js.map +0 -1
  116. package/js/index.esm.js +0 -21
  117. package/js/index.umd.js +0 -21
  118. package/js/src/abstract-ui-component.js +0 -81
  119. package/js/src/collapse.js +0 -286
  120. package/js/src/common.js +0 -296
  121. package/js/src/dialog.js +0 -579
  122. package/js/src/dropdown.js +0 -525
  123. package/js/src/popover.js +0 -632
  124. package/js/src/section-tabs.js +0 -215
  125. package/js/src/select.js +0 -1342
  126. package/js/src/toast.js +0 -581
  127. package/js/src/tooltip.js +0 -591
  128. package/js/src/util/animate-css.js +0 -22
  129. package/js/src/util/index.js +0 -122
  130. package/js/src/util/perfect-scrollbar.js +0 -1316
  131. package/less/alert.less +0 -345
  132. package/less/badge.less +0 -38
  133. package/less/bootstrap-noconflict.less +0 -23
  134. package/less/bootstrap.less +0 -23
  135. package/less/button-group.less +0 -153
  136. package/less/buttons.less +0 -287
  137. package/less/dialog-noconflict.less +0 -174
  138. package/less/dialog.less +0 -203
  139. package/less/dropdown.less +0 -209
  140. package/less/forms.less +0 -770
  141. package/less/images.less +0 -242
  142. package/less/input-group.less +0 -163
  143. package/less/list-group.less +0 -73
  144. package/less/mixins/aspect-ratio.less +0 -23
  145. package/less/mixins/border-radius.less +0 -24
  146. package/less/mixins/box-shadow.less +0 -4
  147. package/less/mixins/buttons.less +0 -17
  148. package/less/mixins/caret.less +0 -51
  149. package/less/mixins/clearfix.less +0 -10
  150. package/less/mixins/gradients.less +0 -34
  151. package/less/mixins/nav-divider.less +0 -7
  152. package/less/mixins/object-fit.less +0 -13
  153. package/less/mixins/reset-text.less +0 -16
  154. package/less/mixins.less +0 -11
  155. package/less/package.json +0 -11
  156. package/less/pagination.less +0 -69
  157. package/less/popover.less +0 -143
  158. package/less/project.sublime-workspace +0 -774
  159. package/less/reboot.less +0 -235
  160. package/less/section.less +0 -793
  161. package/less/select.less +0 -150
  162. package/less/tables.less +0 -737
  163. package/less/tabs.less +0 -162
  164. package/less/tooltip.less +0 -87
  165. package/less/type.less +0 -71
  166. package/less/utilities/align.less +0 -27
  167. package/less/utilities/animate.less +0 -3512
  168. package/less/utilities/background.less +0 -70
  169. package/less/utilities/borders.less +0 -16
  170. package/less/utilities/color.less +0 -70
  171. package/less/utilities/cursor.less +0 -8
  172. package/less/utilities/display.less +0 -38
  173. package/less/utilities/embed.less +0 -61
  174. package/less/utilities/flex.less +0 -76
  175. package/less/utilities/jquery-ui.less +0 -116
  176. package/less/utilities/lazyload.less +0 -29
  177. package/less/utilities/overflow.less +0 -11
  178. package/less/utilities/pace.less +0 -25
  179. package/less/utilities/placeholder.less +0 -60
  180. package/less/utilities/position.less +0 -42
  181. package/less/utilities/scrollbar.less +0 -152
  182. package/less/utilities/spacing.less +0 -197
  183. package/less/utilities/text.less +0 -68
  184. package/less/utilities/transform.less +0 -7
  185. package/less/utilities.less +0 -21
  186. package/less/variables.less +0 -343
  187. package/scss/_alert.scss +0 -102
  188. package/scss/_custom-forms.scss +0 -444
  189. package/scss/_functions.scss +0 -124
  190. package/scss/_images.scss +0 -361
  191. package/scss/_mixins.scss +0 -34
  192. package/scss/_type.scss +0 -129
  193. package/scss/_utilities.scss +0 -23
  194. package/scss/cool-grid.scss +0 -29
  195. package/scss/cool-reboot.scss +0 -11
  196. package/scss/mixins/_alert-variant.scss +0 -20
  197. package/scss/mixins/_aspect-ratio.scss +0 -29
  198. package/scss/mixins/_background-variant.scss +0 -25
  199. package/scss/mixins/_badge-variant.scss +0 -36
  200. package/scss/mixins/_breakpoints.scss +0 -102
  201. package/scss/mixins/_buttons.scss +0 -104
  202. package/scss/mixins/_caret.scss +0 -80
  203. package/scss/mixins/_clearfix.scss +0 -10
  204. package/scss/mixins/_float.scss +0 -14
  205. package/scss/mixins/_forms.scss +0 -67
  206. package/scss/mixins/_gradients.scss +0 -40
  207. package/scss/mixins/_grid-framework.scss +0 -72
  208. package/scss/mixins/_grid.scss +0 -60
  209. package/scss/mixins/_nav-divider.scss +0 -9
  210. package/scss/mixins/_notification-variant.scss +0 -7
  211. package/scss/mixins/_object-fit.scss +0 -16
  212. package/scss/mixins/_reset-text.scss +0 -19
  213. package/scss/mixins/_text-emphasis.scss +0 -21
  214. package/scss/mixins/_text-hide.scss +0 -10
  215. package/scss/mixins/_text-truncate.scss +0 -81
  216. package/scss/mixins/_visibility.scss +0 -7
  217. package/scss/project.sublime-workspace +0 -491
  218. package/scss/utilities/_animate.scss +0 -3512
  219. package/scss/utilities/_clearfix.scss +0 -6
  220. package/scss/utilities/_lazyload.scss +0 -31
  221. package/scss/utilities/_placeholder.scss +0 -77
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
- }