fomantic-ui 2.9.4-beta.10 → 2.9.4-beta.100

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 (295) hide show
  1. package/.all-contributorsrc +29 -1
  2. package/.eslintrc.js +17 -0
  3. package/.github/FUNDING.yml +1 -1
  4. package/.github/workflows/ci.yml +8 -8
  5. package/.github/workflows/depsreview.yml +14 -0
  6. package/.github/workflows/nightly.yml +1 -1
  7. package/.github/workflows/release.yml +1 -1
  8. package/CONTRIBUTORS.md +5 -0
  9. package/README.md +2 -12
  10. package/dist/components/accordion.css +1 -1
  11. package/dist/components/accordion.js +4 -2
  12. package/dist/components/accordion.min.css +1 -1
  13. package/dist/components/accordion.min.js +2 -2
  14. package/dist/components/ad.css +1 -1
  15. package/dist/components/ad.min.css +1 -1
  16. package/dist/components/api.js +7 -3
  17. package/dist/components/api.min.js +2 -2
  18. package/dist/components/breadcrumb.css +1 -1
  19. package/dist/components/breadcrumb.min.css +1 -1
  20. package/dist/components/button.css +21 -3
  21. package/dist/components/button.min.css +2 -2
  22. package/dist/components/calendar.css +1 -1
  23. package/dist/components/calendar.js +47 -12
  24. package/dist/components/calendar.min.css +1 -1
  25. package/dist/components/calendar.min.js +3 -3
  26. package/dist/components/card.css +1 -1
  27. package/dist/components/card.min.css +1 -1
  28. package/dist/components/checkbox.css +1 -1
  29. package/dist/components/checkbox.js +10 -4
  30. package/dist/components/checkbox.min.css +1 -1
  31. package/dist/components/checkbox.min.js +3 -3
  32. package/dist/components/comment.css +1 -1
  33. package/dist/components/comment.min.css +1 -1
  34. package/dist/components/container.css +1 -1
  35. package/dist/components/container.min.css +1 -1
  36. package/dist/components/dimmer.css +7 -3
  37. package/dist/components/dimmer.js +4 -2
  38. package/dist/components/dimmer.min.css +2 -2
  39. package/dist/components/dimmer.min.js +2 -2
  40. package/dist/components/divider.css +1 -1
  41. package/dist/components/divider.min.css +1 -1
  42. package/dist/components/dropdown.css +46 -38
  43. package/dist/components/dropdown.js +109 -34
  44. package/dist/components/dropdown.min.css +2 -2
  45. package/dist/components/dropdown.min.js +3 -3
  46. package/dist/components/embed.css +1 -1
  47. package/dist/components/embed.js +17 -7
  48. package/dist/components/embed.min.css +1 -1
  49. package/dist/components/embed.min.js +3 -3
  50. package/dist/components/emoji.css +4309 -3713
  51. package/dist/components/emoji.min.css +2 -2
  52. package/dist/components/feed.css +12 -1
  53. package/dist/components/feed.min.css +2 -2
  54. package/dist/components/flag.css +3 -1
  55. package/dist/components/flag.min.css +2 -2
  56. package/dist/components/flyout.css +3 -3
  57. package/dist/components/flyout.js +4 -2
  58. package/dist/components/flyout.min.css +1 -1
  59. package/dist/components/flyout.min.js +2 -2
  60. package/dist/components/form.css +15 -3
  61. package/dist/components/form.js +66 -23
  62. package/dist/components/form.min.css +2 -2
  63. package/dist/components/form.min.js +3 -3
  64. package/dist/components/grid.css +5 -5
  65. package/dist/components/grid.min.css +2 -2
  66. package/dist/components/header.css +1 -1
  67. package/dist/components/header.min.css +1 -1
  68. package/dist/components/icon.css +1 -1
  69. package/dist/components/icon.min.css +1 -1
  70. package/dist/components/image.css +1 -1
  71. package/dist/components/image.min.css +1 -1
  72. package/dist/components/input.css +1 -1
  73. package/dist/components/input.min.css +1 -1
  74. package/dist/components/item.css +1 -1
  75. package/dist/components/item.min.css +1 -1
  76. package/dist/components/label.css +7 -1
  77. package/dist/components/label.min.css +2 -2
  78. package/dist/components/list.css +1 -1
  79. package/dist/components/list.min.css +1 -1
  80. package/dist/components/loader.css +1 -1
  81. package/dist/components/loader.min.css +1 -1
  82. package/dist/components/menu.css +1 -1
  83. package/dist/components/menu.min.css +1 -1
  84. package/dist/components/message.css +2 -1
  85. package/dist/components/message.min.css +2 -2
  86. package/dist/components/modal.css +3 -3
  87. package/dist/components/modal.js +7 -3
  88. package/dist/components/modal.min.css +1 -1
  89. package/dist/components/modal.min.js +2 -2
  90. package/dist/components/nag.css +1 -1
  91. package/dist/components/nag.js +11 -5
  92. package/dist/components/nag.min.css +1 -1
  93. package/dist/components/nag.min.js +3 -3
  94. package/dist/components/placeholder.css +1 -1
  95. package/dist/components/placeholder.min.css +1 -1
  96. package/dist/components/popup.css +1 -1
  97. package/dist/components/popup.js +10 -4
  98. package/dist/components/popup.min.css +1 -1
  99. package/dist/components/popup.min.js +2 -2
  100. package/dist/components/progress.css +15 -6
  101. package/dist/components/progress.js +4 -2
  102. package/dist/components/progress.min.css +2 -2
  103. package/dist/components/progress.min.js +2 -2
  104. package/dist/components/rail.css +1 -1
  105. package/dist/components/rail.min.css +1 -1
  106. package/dist/components/rating.css +1 -1
  107. package/dist/components/rating.js +4 -2
  108. package/dist/components/rating.min.css +1 -1
  109. package/dist/components/rating.min.js +2 -2
  110. package/dist/components/reset.css +1 -1
  111. package/dist/components/reset.min.css +1 -1
  112. package/dist/components/reveal.css +1 -1
  113. package/dist/components/reveal.min.css +1 -1
  114. package/dist/components/search.css +34 -23
  115. package/dist/components/search.js +78 -14
  116. package/dist/components/search.min.css +2 -2
  117. package/dist/components/search.min.js +3 -3
  118. package/dist/components/segment.css +1 -1
  119. package/dist/components/segment.min.css +1 -1
  120. package/dist/components/shape.css +1 -1
  121. package/dist/components/shape.js +7 -5
  122. package/dist/components/shape.min.css +1 -1
  123. package/dist/components/shape.min.js +3 -3
  124. package/dist/components/sidebar.css +1 -1
  125. package/dist/components/sidebar.js +4 -2
  126. package/dist/components/sidebar.min.css +1 -1
  127. package/dist/components/sidebar.min.js +2 -2
  128. package/dist/components/site.css +14 -6
  129. package/dist/components/site.js +4 -2
  130. package/dist/components/site.min.css +2 -2
  131. package/dist/components/site.min.js +2 -2
  132. package/dist/components/slider.css +152 -2
  133. package/dist/components/slider.js +142 -44
  134. package/dist/components/slider.min.css +2 -2
  135. package/dist/components/slider.min.js +3 -3
  136. package/dist/components/state.js +4 -2
  137. package/dist/components/state.min.js +2 -2
  138. package/dist/components/statistic.css +1 -1
  139. package/dist/components/statistic.min.css +1 -1
  140. package/dist/components/step.css +992 -86
  141. package/dist/components/step.min.css +2 -2
  142. package/dist/components/sticky.css +1 -1
  143. package/dist/components/sticky.js +4 -2
  144. package/dist/components/sticky.min.css +1 -1
  145. package/dist/components/sticky.min.js +2 -2
  146. package/dist/components/tab.css +1 -1
  147. package/dist/components/tab.js +4 -2
  148. package/dist/components/tab.min.css +1 -1
  149. package/dist/components/tab.min.js +2 -2
  150. package/dist/components/table.css +32 -21
  151. package/dist/components/table.min.css +2 -2
  152. package/dist/components/text.css +1 -1
  153. package/dist/components/text.min.css +1 -1
  154. package/dist/components/toast.css +1 -1
  155. package/dist/components/toast.js +7 -3
  156. package/dist/components/toast.min.css +1 -1
  157. package/dist/components/toast.min.js +3 -3
  158. package/dist/components/transition.css +1 -1
  159. package/dist/components/transition.js +7 -3
  160. package/dist/components/transition.min.css +1 -1
  161. package/dist/components/transition.min.js +2 -2
  162. package/dist/components/visibility.js +4 -2
  163. package/dist/components/visibility.min.js +2 -2
  164. package/dist/semantic.css +6179 -3968
  165. package/dist/semantic.js +571 -188
  166. package/dist/semantic.min.css +3 -3
  167. package/dist/semantic.min.js +3 -3
  168. package/dist/themes/basic/assets/fonts/LICENSE.txt +91 -0
  169. package/dist/themes/default/assets/fonts/LICENSE_Lato.txt +94 -0
  170. package/dist/themes/default/assets/fonts/LICENSE_icons.txt +165 -0
  171. package/dist/themes/github/assets/fonts/LICENSE.txt +94 -0
  172. package/dist/themes/material/assets/fonts/LICENSE.txt +202 -0
  173. package/package.json +14 -14
  174. package/semantic.json.example +1 -1
  175. package/src/definitions/behaviors/api.js +6 -2
  176. package/src/definitions/behaviors/form.js +65 -22
  177. package/src/definitions/behaviors/state.js +3 -1
  178. package/src/definitions/behaviors/visibility.js +3 -1
  179. package/src/definitions/collections/form.less +43 -23
  180. package/src/definitions/collections/grid.less +85 -70
  181. package/src/definitions/collections/menu.less +38 -27
  182. package/src/definitions/collections/message.less +1 -0
  183. package/src/definitions/collections/table.less +183 -157
  184. package/src/definitions/elements/button.less +61 -25
  185. package/src/definitions/elements/container.less +6 -4
  186. package/src/definitions/elements/divider.less +4 -1
  187. package/src/definitions/elements/emoji.less +3 -1
  188. package/src/definitions/elements/header.less +7 -4
  189. package/src/definitions/elements/icon.less +35 -28
  190. package/src/definitions/elements/input.less +21 -13
  191. package/src/definitions/elements/label.less +19 -8
  192. package/src/definitions/elements/list.less +28 -21
  193. package/src/definitions/elements/loader.less +17 -12
  194. package/src/definitions/elements/segment.less +12 -7
  195. package/src/definitions/elements/step.less +405 -87
  196. package/src/definitions/globals/site.js +3 -1
  197. package/src/definitions/globals/site.less +17 -12
  198. package/src/definitions/modules/accordion.js +3 -1
  199. package/src/definitions/modules/accordion.less +15 -13
  200. package/src/definitions/modules/calendar.js +46 -11
  201. package/src/definitions/modules/calendar.less +6 -4
  202. package/src/definitions/modules/checkbox.js +9 -3
  203. package/src/definitions/modules/checkbox.less +12 -6
  204. package/src/definitions/modules/dimmer.js +3 -1
  205. package/src/definitions/modules/dimmer.less +16 -10
  206. package/src/definitions/modules/dropdown.js +108 -33
  207. package/src/definitions/modules/dropdown.less +109 -78
  208. package/src/definitions/modules/embed.js +16 -6
  209. package/src/definitions/modules/flyout.js +3 -1
  210. package/src/definitions/modules/flyout.less +51 -45
  211. package/src/definitions/modules/modal.js +6 -2
  212. package/src/definitions/modules/modal.less +109 -82
  213. package/src/definitions/modules/nag.js +10 -4
  214. package/src/definitions/modules/nag.less +8 -4
  215. package/src/definitions/modules/popup.js +9 -3
  216. package/src/definitions/modules/popup.less +3 -1
  217. package/src/definitions/modules/progress.js +3 -1
  218. package/src/definitions/modules/progress.less +24 -6
  219. package/src/definitions/modules/rating.js +3 -1
  220. package/src/definitions/modules/search.js +77 -13
  221. package/src/definitions/modules/search.less +41 -25
  222. package/src/definitions/modules/shape.js +6 -4
  223. package/src/definitions/modules/sidebar.js +3 -1
  224. package/src/definitions/modules/slider.js +141 -43
  225. package/src/definitions/modules/slider.less +129 -27
  226. package/src/definitions/modules/sticky.js +3 -1
  227. package/src/definitions/modules/tab.js +3 -1
  228. package/src/definitions/modules/toast.js +6 -2
  229. package/src/definitions/modules/toast.less +35 -24
  230. package/src/definitions/modules/transition.js +6 -2
  231. package/src/definitions/views/card.less +7 -5
  232. package/src/definitions/views/feed.less +14 -1
  233. package/src/definitions/views/item.less +7 -5
  234. package/src/themes/basic/assets/fonts/LICENSE.txt +91 -0
  235. package/src/themes/default/assets/fonts/LICENSE_Lato.txt +94 -0
  236. package/src/themes/default/assets/fonts/LICENSE_icons.txt +165 -0
  237. package/src/themes/default/elements/button.variables +3 -0
  238. package/src/themes/default/elements/emoji.variables +172 -23
  239. package/src/themes/default/elements/flag.variables +3 -3
  240. package/src/themes/default/elements/step.variables +33 -0
  241. package/src/themes/default/globals/site.variables +3 -0
  242. package/src/themes/default/globals/variation.variables +23 -2
  243. package/src/themes/default/modules/dropdown.variables +3 -0
  244. package/src/themes/default/modules/progress.variables +1 -1
  245. package/src/themes/default/modules/search.variables +15 -12
  246. package/src/themes/default/modules/slider.variables +10 -0
  247. package/src/themes/default/views/feed.variables +3 -0
  248. package/src/themes/github/assets/fonts/LICENSE.txt +94 -0
  249. package/src/themes/joypixels/elements/emoji.variables +183 -22
  250. package/src/themes/material/assets/fonts/LICENSE.txt +202 -0
  251. package/tasks/admin/components/create.js +4 -4
  252. package/tasks/admin/components/init.js +2 -2
  253. package/tasks/admin/components/update.js +3 -3
  254. package/tasks/admin/distributions/create.js +3 -3
  255. package/tasks/admin/distributions/init.js +2 -2
  256. package/tasks/admin/distributions/update.js +4 -4
  257. package/tasks/build/assets.js +1 -1
  258. package/tasks/build/css.js +19 -10
  259. package/tasks/build/javascript.js +12 -5
  260. package/tasks/check-install.js +1 -1
  261. package/tasks/config/defaults.js +4 -0
  262. package/tasks/config/project/release.js +19 -1
  263. package/tasks/config/tasks.js +7 -7
  264. package/tasks/docs/build.js +3 -3
  265. package/tasks/docs/metadata.js +1 -1
  266. package/tasks/docs/serve.js +3 -1
  267. package/tasks/install.js +2 -2
  268. package/tasks/watch.js +1 -1
  269. package/types/fomantic-ui-accordion.d.ts +1 -1
  270. package/types/fomantic-ui-api.d.ts +9 -3
  271. package/types/fomantic-ui-calendar.d.ts +114 -13
  272. package/types/fomantic-ui-checkbox.d.ts +14 -4
  273. package/types/fomantic-ui-dimmer.d.ts +1 -1
  274. package/types/fomantic-ui-dropdown.d.ts +82 -44
  275. package/types/fomantic-ui-embed.d.ts +19 -2
  276. package/types/fomantic-ui-flyout.d.ts +25 -11
  277. package/types/fomantic-ui-form.d.ts +123 -15
  278. package/types/fomantic-ui-modal.d.ts +101 -5
  279. package/types/fomantic-ui-nag.d.ts +4 -4
  280. package/types/fomantic-ui-popup.d.ts +38 -12
  281. package/types/fomantic-ui-progress.d.ts +12 -6
  282. package/types/fomantic-ui-rating.d.ts +1 -1
  283. package/types/fomantic-ui-search.d.ts +138 -22
  284. package/types/fomantic-ui-shape.d.ts +2 -2
  285. package/types/fomantic-ui-sidebar.d.ts +4 -4
  286. package/types/fomantic-ui-slider.d.ts +56 -4
  287. package/types/fomantic-ui-sticky.d.ts +1 -1
  288. package/types/fomantic-ui-tab.d.ts +6 -6
  289. package/types/fomantic-ui-toast.d.ts +14 -2
  290. package/types/fomantic-ui-transition.d.ts +41 -7
  291. package/types/fomantic-ui-visibility.d.ts +3 -3
  292. package/types/index.d.ts +25 -25
  293. package/types/tests.ts +188 -0
  294. package/types/tsconfig.json +1 -1
  295. package/types/fomantic-ui-tests.ts +0 -25
@@ -17,6 +17,10 @@
17
17
 
18
18
  @import (multiple) "../../theme.config";
19
19
 
20
+ @notFullscreen: if(@variationFlyoutFullscreen, e(":not(.fullscreen)"));
21
+
22
+ @notFluid: if(@variationButtonFluid, e(":not(.fluid)"));
23
+
20
24
  /*******************************
21
25
  Flyout
22
26
  *******************************/
@@ -46,30 +50,31 @@
46
50
  .ui.flyout > * {
47
51
  backface-visibility: hidden;
48
52
  }
53
+ & when (@variationFlyoutClose) {
54
+ /* --------------
55
+ Close
56
+ --------------- */
49
57
 
50
- /* --------------
51
- Close
52
- --------------- */
53
- .ui.flyout > .close {
54
- cursor: pointer;
55
- position: absolute;
56
- top: @closeTop;
57
- right: @closeRight;
58
- z-index: 1;
59
- opacity: @closeOpacity;
60
- font-size: @closeSize;
61
- color: @closeColor;
62
- width: @closeHitbox;
63
- height: @closeHitbox;
64
- padding: @closePadding;
65
- margin: @closeMargin;
66
- text-align: right;
67
- }
68
-
69
- .ui.flyout > .close:focus,
70
- .ui.flyout > .close:hover {
71
- opacity: 1;
72
- outline: none;
58
+ .ui.flyout > .close {
59
+ cursor: pointer;
60
+ position: absolute;
61
+ top: @closeTop;
62
+ right: @closeRight;
63
+ z-index: 1;
64
+ opacity: @closeOpacity;
65
+ font-size: @closeSize;
66
+ color: @closeColor;
67
+ width: @closeHitbox;
68
+ height: @closeHitbox;
69
+ padding: @closePadding;
70
+ margin: @closeMargin;
71
+ text-align: right;
72
+ }
73
+ .ui.flyout > .close:focus,
74
+ .ui.flyout > .close:hover {
75
+ opacity: 1;
76
+ outline: none;
77
+ }
73
78
  }
74
79
 
75
80
  /* --------------
@@ -134,7 +139,7 @@
134
139
  border-top: @actionBorder;
135
140
  text-align: @actionAlign;
136
141
  }
137
- .ui.flyout .actions > .button:not(.fluid) {
142
+ .ui.flyout .actions > .button@{notFluid} {
138
143
  margin-left: @buttonDistance;
139
144
  }
140
145
  & when (@variationFlyoutBasic) {
@@ -145,7 +150,7 @@
145
150
  & when (@variationFlyoutLeftActions) {
146
151
  .ui.flyout > .left.actions {
147
152
  text-align: left;
148
- & > .button:not(.fluid) {
153
+ & > .button@{notFluid} {
149
154
  margin-left: @buttonLeftDistance;
150
155
  margin-right: @buttonLeftDistance;
151
156
  }
@@ -156,7 +161,7 @@
156
161
  .ui.flyout > .centered,
157
162
  .ui.flyout > .center.aligned {
158
163
  text-align: center;
159
- &.actions > .button:not(.fluid) when (@variationFlyoutActions) {
164
+ &.actions > .button@{notFluid} when (@variationFlyoutActions) {
160
165
  margin-left: @buttonCenteredDistance;
161
166
  margin-right: @buttonCenteredDistance;
162
167
  }
@@ -402,9 +407,10 @@ body.pushable > .pusher {
402
407
  .ui.flyout.inverted {
403
408
  background: @invertedBackground;
404
409
  }
405
-
406
- .ui.flyout.inverted > .close {
407
- color: @invertedCloseColor;
410
+ & when (@variationFlyoutClose) {
411
+ .ui.flyout.inverted > .close {
412
+ color: @invertedCloseColor;
413
+ }
408
414
  }
409
415
 
410
416
  .ui.flyout.inverted > .header,
@@ -525,67 +531,67 @@ body.pushable > .pusher {
525
531
  & when (@variationFlyoutColumnWidth) {
526
532
  /* Sizing Combinations */
527
533
 
528
- .ui[class*="one wide"].flyout:not(.fullscreen) {
534
+ .ui[class*="one wide"].flyout@{notFullscreen} {
529
535
  width: @oneWide;
530
536
  }
531
537
 
532
- .ui[class*="two wide"].flyout:not(.fullscreen) {
538
+ .ui[class*="two wide"].flyout@{notFullscreen} {
533
539
  width: @twoWide;
534
540
  }
535
541
 
536
- .ui[class*="three wide"].flyout:not(.fullscreen) {
542
+ .ui[class*="three wide"].flyout@{notFullscreen} {
537
543
  width: @threeWide;
538
544
  }
539
545
 
540
- .ui[class*="four wide"].flyout:not(.fullscreen) {
546
+ .ui[class*="four wide"].flyout@{notFullscreen} {
541
547
  width: @fourWide;
542
548
  }
543
549
 
544
- .ui[class*="five wide"].flyout:not(.fullscreen) {
550
+ .ui[class*="five wide"].flyout@{notFullscreen} {
545
551
  width: @fiveWide;
546
552
  }
547
553
 
548
- .ui[class*="six wide"].flyout:not(.fullscreen) {
554
+ .ui[class*="six wide"].flyout@{notFullscreen} {
549
555
  width: @sixWide;
550
556
  }
551
557
 
552
- .ui[class*="seven wide"].flyout:not(.fullscreen) {
558
+ .ui[class*="seven wide"].flyout@{notFullscreen} {
553
559
  width: @sevenWide;
554
560
  }
555
561
 
556
- .ui[class*="eight wide"].flyout:not(.fullscreen) {
562
+ .ui[class*="eight wide"].flyout@{notFullscreen} {
557
563
  width: @eightWide;
558
564
  }
559
565
 
560
- .ui[class*="nine wide"].flyout:not(.fullscreen) {
566
+ .ui[class*="nine wide"].flyout@{notFullscreen} {
561
567
  width: @nineWide;
562
568
  }
563
569
 
564
- .ui[class*="ten wide"].flyout:not(.fullscreen) {
570
+ .ui[class*="ten wide"].flyout@{notFullscreen} {
565
571
  width: @tenWide;
566
572
  }
567
573
 
568
- .ui[class*="eleven wide"].flyout:not(.fullscreen) {
574
+ .ui[class*="eleven wide"].flyout@{notFullscreen} {
569
575
  width: @elevenWide;
570
576
  }
571
577
 
572
- .ui[class*="twelve wide"].flyout:not(.fullscreen) {
578
+ .ui[class*="twelve wide"].flyout@{notFullscreen} {
573
579
  width: @twelveWide;
574
580
  }
575
581
 
576
- .ui[class*="thirteen wide"].flyout:not(.fullscreen) {
582
+ .ui[class*="thirteen wide"].flyout@{notFullscreen} {
577
583
  width: @thirteenWide;
578
584
  }
579
585
 
580
- .ui[class*="fourteen wide"].flyout:not(.fullscreen) {
586
+ .ui[class*="fourteen wide"].flyout@{notFullscreen} {
581
587
  width: @fourteenWide;
582
588
  }
583
589
 
584
- .ui[class*="fifteen wide"].flyout:not(.fullscreen) {
590
+ .ui[class*="fifteen wide"].flyout@{notFullscreen} {
585
591
  width: @fifteenWide;
586
592
  }
587
593
 
588
- .ui[class*="sixteen wide"].flyout:not(.fullscreen) {
594
+ .ui[class*="sixteen wide"].flyout@{notFullscreen} {
589
595
  width: @sixteenWide;
590
596
  }
591
597
  }
@@ -527,7 +527,9 @@
527
527
  },
528
528
  debounce: function (method, delay) {
529
529
  clearTimeout(module.timer);
530
- module.timer = setTimeout(function () { method(); }, delay);
530
+ module.timer = setTimeout(function () {
531
+ method();
532
+ }, delay);
531
533
  },
532
534
  keyboard: function (event) {
533
535
  var
@@ -1273,7 +1275,9 @@
1273
1275
  });
1274
1276
  }
1275
1277
  clearTimeout(module.performance.timer);
1276
- module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
1278
+ module.performance.timer = setTimeout(function () {
1279
+ module.performance.display();
1280
+ }, 500);
1277
1281
  },
1278
1282
  display: function () {
1279
1283
  var
@@ -17,6 +17,13 @@
17
17
 
18
18
  @import (multiple) "../../theme.config";
19
19
 
20
+ @notFullscreen: if(@variationModalFullscreen, e(":not(.fullscreen)"));
21
+ @notInside: if(@variationModalCloseInside, e(":not(.inside)"));
22
+ @notAligned: if(@variationModalAligned, e(":not(.aligned)"));
23
+ @notClose: if(@variationModalClose, e(":not(.close)"));
24
+
25
+ @notFluid: if(@variationButtonFluid, e(":not(.fluid)"));
26
+
20
27
  /*******************************
21
28
  Modal
22
29
  *******************************/
@@ -37,9 +44,9 @@
37
44
  outline: none;
38
45
  }
39
46
 
40
- .ui.modal > :first-child:not(.close):not(.dimmer),
47
+ .ui.modal > :first-child@{notClose}:not(.dimmer),
41
48
  .ui.modal > i.icon:first-child + *,
42
- .ui.modal > .dimmer:first-child + *:not(.close),
49
+ .ui.modal > .dimmer:first-child + *@{notClose},
43
50
  .ui.modal > .dimmer:first-child + i.icon + * {
44
51
  border-top-left-radius: @borderRadius;
45
52
  border-top-right-radius: @borderRadius;
@@ -58,27 +65,29 @@
58
65
  Content
59
66
  *******************************/
60
67
 
61
- /* --------------
62
- Close
63
- --------------- */
68
+ & when (@variationModalClose) {
69
+ /* --------------
70
+ Close
71
+ --------------- */
64
72
 
65
- .ui.modal > .close {
66
- cursor: pointer;
67
- position: absolute;
68
- top: @closeTop;
69
- right: @closeRight;
70
- z-index: 1;
71
- opacity: @closeOpacity;
72
- font-size: @closeSize;
73
- color: @closeColor;
74
- width: @closeHitbox;
75
- height: @closeHitbox;
76
- padding: @closePadding;
77
- }
78
- .ui.modal > .close:focus,
79
- .ui.modal > .close:hover {
80
- opacity: 1;
81
- outline: none;
73
+ .ui.modal > .close {
74
+ cursor: pointer;
75
+ position: absolute;
76
+ top: @closeTop;
77
+ right: @closeRight;
78
+ z-index: 1;
79
+ opacity: @closeOpacity;
80
+ font-size: @closeSize;
81
+ color: @closeColor;
82
+ width: @closeHitbox;
83
+ height: @closeHitbox;
84
+ padding: @closePadding;
85
+ }
86
+ .ui.modal > .close:focus,
87
+ .ui.modal > .close:hover {
88
+ opacity: 1;
89
+ outline: none;
90
+ }
82
91
  }
83
92
 
84
93
  /* --------------
@@ -172,7 +181,7 @@
172
181
  border-top: @actionBorder;
173
182
  text-align: @actionAlign;
174
183
  }
175
- .ui.modal .actions > .button:not(.fluid) {
184
+ .ui.modal .actions > .button@{notFluid} {
176
185
  margin-left: @buttonDistance;
177
186
  }
178
187
  .ui.ui.modal > .basic.actions,
@@ -182,7 +191,7 @@
182
191
  & when (@variationModalLeftActions) {
183
192
  .ui.modal > .left.actions {
184
193
  text-align: left;
185
- & > .button:not(.fluid) {
194
+ & > .button@{notFluid} {
186
195
  margin-left: @buttonLeftDistance;
187
196
  margin-right: @buttonLeftDistance;
188
197
  }
@@ -194,7 +203,7 @@
194
203
  .ui.modal > .centered,
195
204
  .ui.modal > .center.aligned {
196
205
  text-align: center;
197
- &.actions > .button:not(.fluid) when (@variationModalActions) {
206
+ &.actions > .button@{notFluid} when (@variationModalActions) {
198
207
  margin-left: @buttonCenteredDistance;
199
208
  margin-right: @buttonCenteredDistance;
200
209
  }
@@ -207,55 +216,62 @@
207
216
 
208
217
  /* Modal Width */
209
218
  @media only screen and (max-width: @largestMobileScreen) {
210
- .ui.modal:not(.fullscreen) {
219
+ .ui.modal@{notFullscreen} {
211
220
  width: @mobileWidth;
212
221
  margin: @mobileMargin;
213
222
  }
214
223
  }
215
224
  @media only screen and (min-width: @tabletBreakpoint) {
216
- .ui.modal:not(.fullscreen) {
225
+ .ui.modal@{notFullscreen} {
217
226
  width: @tabletWidth;
218
227
  margin: @tabletMargin;
219
228
  }
220
229
  }
221
230
  @media only screen and (min-width: @computerBreakpoint) {
222
- .ui.modal:not(.fullscreen) {
231
+ .ui.modal@{notFullscreen} {
223
232
  width: @computerWidth;
224
233
  margin: @computerMargin;
225
- & > .active.dimmer + .close:not(.inside) {
234
+ & > .active.dimmer + .close@{notInside} when (@variationModalClose) {
226
235
  pointer-events: none;
227
236
  opacity: @closeOpacityDimmed;
228
237
  }
229
238
  }
230
- .ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
231
- text-shadow: @closeShadow;
232
- }
233
- .ui.inverted.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
234
- text-shadow: @invertedCloseShadow;
239
+ & when (@variationModalClose) {
240
+ .ui.dimmer > .ui.modal@{notFullscreen} > .close@{notInside} {
241
+ text-shadow: @closeShadow;
242
+ }
243
+ & when (@variationDimmerInverted) {
244
+ .ui.inverted.dimmer > .ui.modal@{notFullscreen} > .close@{notInside} {
245
+ text-shadow: @invertedCloseShadow;
246
+ }
247
+ }
235
248
  }
236
249
  }
237
250
  @media only screen and (min-width: @largeMonitorBreakpoint) {
238
- .ui.modal:not(.fullscreen) {
251
+ .ui.modal@{notFullscreen} {
239
252
  width: @largeMonitorWidth;
240
253
  margin: @largeMonitorMargin;
241
254
  }
242
255
  }
243
256
  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
244
- .ui.modal:not(.fullscreen) {
257
+ .ui.modal@{notFullscreen} {
245
258
  width: @widescreenMonitorWidth;
246
259
  margin: @widescreenMonitorMargin;
247
260
  }
248
261
  }
249
262
 
250
- /* Tablet and Mobile */
251
- @media only screen and (max-width: @largestTabletScreen) {
252
- .ui.modal > .close + .header {
253
- padding-right: @closeHitbox;
254
- }
255
- .ui.modal > .close {
256
- top: @innerCloseTop;
257
- right: @innerCloseRight;
258
- color: @innerCloseColor;
263
+ & when (@variationModalClose) {
264
+ /* Tablet and Mobile */
265
+ @media only screen and (max-width: @largestTabletScreen) {
266
+ .ui.modal > .close + .header {
267
+ padding-right: @closeHitbox;
268
+ }
269
+
270
+ .ui.modal > .close {
271
+ top: @innerCloseTop;
272
+ right: @innerCloseRight;
273
+ color: @innerCloseColor;
274
+ }
259
275
  }
260
276
  }
261
277
 
@@ -264,8 +280,10 @@
264
280
  .ui.modal > .header {
265
281
  padding: @mobileHeaderPadding;
266
282
  }
267
- .ui.modal > .close + .header {
268
- padding-right: @closeHitbox;
283
+ & when (@variationModalClose) {
284
+ .ui.modal > .close + .header {
285
+ padding-right: @closeHitbox;
286
+ }
269
287
  }
270
288
  .ui.overlay.fullscreen.modal > .content.content.content {
271
289
  min-height: @overlayFullscreenScrollingContentMaxHeightMobile;
@@ -277,9 +295,11 @@
277
295
  display: block;
278
296
  padding: @mobileContentPadding !important;
279
297
  }
280
- .ui.modal > .close {
281
- top: @mobileCloseTop !important;
282
- right: @mobileCloseRight !important;
298
+ & when (@variationModalClose) {
299
+ .ui.modal > .close {
300
+ top: @mobileCloseTop !important;
301
+ right: @mobileCloseRight !important;
302
+ }
283
303
  }
284
304
 
285
305
  /* rtl:ignore */
@@ -351,10 +371,12 @@
351
371
  color: @basicModalHeaderColor;
352
372
  border-bottom: none;
353
373
  }
354
- .ui.basic.modal > .close {
355
- top: @basicModalCloseTop;
356
- right: @basicModalCloseRight;
357
- color: @basicInnerCloseColor;
374
+ & when (@variationModalClose) {
375
+ .ui.basic.modal > .close {
376
+ top: @basicModalCloseTop;
377
+ right: @basicModalCloseRight;
378
+ color: @basicInnerCloseColor;
379
+ }
358
380
  }
359
381
  .ui.inverted.dimmer > .basic.modal {
360
382
  color: @basicInvertedModalColor;
@@ -370,14 +392,14 @@
370
392
  .ui.legacy.legacy.page.dimmer > .ui.modal {
371
393
  left: 50% !important;
372
394
  }
373
- .ui.legacy.legacy.modal:not(.aligned),
374
- .ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) {
395
+ .ui.legacy.legacy.modal@{notAligned},
396
+ .ui.legacy.legacy.page.dimmer > .ui.modal@{notAligned} {
375
397
  top: 50%;
376
398
  }
377
- .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned),
378
- .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned),
379
- .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned),
380
- .ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) {
399
+ .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal@{notAligned},
400
+ .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal@{notAligned},
401
+ .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal@{notAligned},
402
+ .ui.top.aligned.dimmer > .ui.legacy.legacy.modal@{notAligned} {
381
403
  top: auto;
382
404
  }
383
405
  & when (@variationModalOverlay) {
@@ -450,7 +472,7 @@
450
472
  .modals.dimmer .ui.scrolling.modal.fullscreen {
451
473
  top: 0;
452
474
  }
453
- .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
475
+ .modals.dimmer .ui.scrolling.modal@{notFullscreen} {
454
476
  margin: @scrollingMargin auto;
455
477
  top: @scrollingTop;
456
478
  }
@@ -470,7 +492,7 @@
470
492
  .scrolling.undetached.dimmable.dimmed > .dimmer {
471
493
  overflow: hidden;
472
494
  }
473
- .scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) {
495
+ .scrolling.undetached.dimmable .ui.scrolling.modal@{notFullscreen} {
474
496
  position: absolute;
475
497
  left: 50%;
476
498
  }
@@ -517,19 +539,21 @@
517
539
  border-radius: 0;
518
540
  }
519
541
  }
520
- .ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
521
- .ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
522
- padding-right: @closeHitbox;
523
- }
524
- .ui.modal > .close.inside,
525
- .ui.fullscreen.modal > .close {
526
- top: @innerCloseTop;
527
- right: @innerCloseRight;
528
- color: @innerCloseColor;
529
- }
530
- & when (@variationModalBasic) {
531
- .ui.basic.fullscreen.modal > .close {
532
- color: @basicInnerCloseColor;
542
+ & when (@variationModalClose) {
543
+ .ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
544
+ .ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
545
+ padding-right: @closeHitbox;
546
+ }
547
+ .ui.modal > .close.inside,
548
+ .ui.fullscreen.modal > .close {
549
+ top: @innerCloseTop;
550
+ right: @innerCloseRight;
551
+ color: @innerCloseColor;
552
+ }
553
+ & when (@variationModalBasic) {
554
+ .ui.basic.fullscreen.modal > .close {
555
+ color: @basicInnerCloseColor;
556
+ }
533
557
  }
534
558
  }
535
559
  }
@@ -611,14 +635,17 @@
611
635
  color: @invertedActionColor;
612
636
  }
613
637
  }
638
+ & when (@variationModalClose) {
639
+ & when (@variationDimmerInverted) {
640
+ .ui.inverted.dimmer > .modal > .close {
641
+ color: @invertedDimmerCloseColor;
642
+ }
643
+ }
614
644
 
615
- .ui.inverted.dimmer > .modal > .close {
616
- color: @invertedDimmerCloseColor;
617
- }
618
-
619
- @media only screen and (max-width: @largestTabletScreen) {
620
- .ui.dimmer .inverted.modal > .close {
621
- color: @invertedCloseColor;
645
+ @media only screen and (max-width: @largestTabletScreen) {
646
+ .ui.dimmer .inverted.modal > .close {
647
+ color: @invertedCloseColor;
648
+ }
622
649
  }
623
650
  }
624
651
  & when (@variationModalFullscreen) or (@variationModalCloseInside) {
@@ -88,7 +88,9 @@
88
88
  }
89
89
 
90
90
  if (settings.displayTime > 0) {
91
- setTimeout(function () { module.hide(); }, settings.displayTime);
91
+ setTimeout(function () {
92
+ module.hide();
93
+ }, settings.displayTime);
92
94
  }
93
95
  module.show();
94
96
  },
@@ -144,8 +146,10 @@
144
146
  module.debug('Dismissing nag', settings.storageMethod, settings.key, settings.value, settings.expires);
145
147
  module.storage.set(settings.key, settings.value);
146
148
  }
147
- event.stopImmediatePropagation();
148
- event.preventDefault();
149
+ if (event) {
150
+ event.stopImmediatePropagation();
151
+ event.preventDefault();
152
+ }
149
153
  },
150
154
 
151
155
  should: {
@@ -377,7 +381,9 @@
377
381
  });
378
382
  }
379
383
  clearTimeout(module.performance.timer);
380
- module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
384
+ module.performance.timer = setTimeout(function () {
385
+ module.performance.display();
386
+ }, 500);
381
387
  },
382
388
  display: function () {
383
389
  var
@@ -17,6 +17,10 @@
17
17
 
18
18
  @import (multiple) "../../theme.config";
19
19
 
20
+ @notBottom: if(@variationNagBottom, e(":not(.bottom)"));
21
+ @notFixed: if(@variationNagFixed, e(":not(.fixed)"));
22
+ @notOverlay: if(@variationNagOverlay, e(":not(.overlay)"));
23
+
20
24
  /*******************************
21
25
  Nag
22
26
  *******************************/
@@ -63,7 +67,7 @@ a.ui.nag {
63
67
  transition: @closeTransition;
64
68
  }
65
69
 
66
- .ui.nag:not(.overlay):not(.fixed) {
70
+ .ui.nag@{notOverlay}@{notFixed} {
67
71
  border-radius: @borderRadius;
68
72
  }
69
73
 
@@ -192,7 +196,7 @@ a.ui.nag {
192
196
  .ui.ui.nags .nag {
193
197
  border-radius: @groupedBorderRadius;
194
198
  }
195
- .ui.nags:not(.bottom) .nag:last-child {
199
+ .ui.nags@{notBottom} .nag:last-child {
196
200
  border-radius: @topBorderRadius;
197
201
  }
198
202
  & when(@variationNagBottom) {
@@ -200,10 +204,10 @@ a.ui.nag {
200
204
  border-radius: @bottomBorderRadius;
201
205
  }
202
206
  }
203
- .ui.nags:not(.fixed):not(.overlay) .nag:first-child {
207
+ .ui.nags@{notFixed}@{notOverlay} .nag:first-child {
204
208
  border-radius: @bottomBorderRadius;
205
209
  }
206
- .ui.nags:not(.fixed):not(.overlay) .nag:only-child {
210
+ .ui.nags@{notFixed}@{notOverlay} .nag:only-child {
207
211
  border-radius: @borderRadius;
208
212
  }
209
213
  }
@@ -194,7 +194,9 @@
194
194
  ;
195
195
  clearTimeout(module.hideTimer);
196
196
  if (!openedWithTouch || (openedWithTouch && settings.addTouchEvents)) {
197
- module.showTimer = setTimeout(function () { module.show(); }, delay);
197
+ module.showTimer = setTimeout(function () {
198
+ module.show();
199
+ }, delay);
198
200
  }
199
201
  },
200
202
  end: function () {
@@ -204,7 +206,9 @@
204
206
  : settings.delay
205
207
  ;
206
208
  clearTimeout(module.showTimer);
207
- module.hideTimer = setTimeout(function () { module.hide(); }, delay);
209
+ module.hideTimer = setTimeout(function () {
210
+ module.hide();
211
+ }, delay);
208
212
  },
209
213
  touchstart: function (event) {
210
214
  openedWithTouch = true;
@@ -1244,7 +1248,9 @@
1244
1248
  });
1245
1249
  }
1246
1250
  clearTimeout(module.performance.timer);
1247
- module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
1251
+ module.performance.timer = setTimeout(function () {
1252
+ module.performance.display();
1253
+ }, 500);
1248
1254
  },
1249
1255
  display: function () {
1250
1256
  var
@@ -17,6 +17,8 @@
17
17
 
18
18
  @import (multiple) "../../theme.config";
19
19
 
20
+ @notPadded: if(@variationGridPadded, e(":not(.padded)"));
21
+
20
22
  /*******************************
21
23
  Popup
22
24
  *******************************/
@@ -696,7 +698,7 @@
696
698
  *******************************/
697
699
 
698
700
  /* Immediate Nested Grid */
699
- .ui.ui.ui.popup > .ui.grid:not(.padded) {
701
+ .ui.ui.ui.popup > .ui.grid@{notPadded} {
700
702
  width: @nestedGridWidth;
701
703
  margin: @nestedGridMargin;
702
704
  }
@@ -791,7 +791,9 @@
791
791
  });
792
792
  }
793
793
  clearTimeout(module.performance.timer);
794
- module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
794
+ module.performance.timer = setTimeout(function () {
795
+ module.performance.display();
796
+ }, 500);
795
797
  },
796
798
  display: function () {
797
799
  var