@weavy/uikit-react 13.0.0 → 14.0.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 (243) hide show
  1. package/changelog.md +24 -0
  2. package/dist/cjs/index.js +3 -3
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/components/Chat.d.ts +1 -1
  5. package/dist/cjs/types/components/Messages.d.ts +3 -1
  6. package/dist/cjs/types/hooks/useConversations.d.ts +1 -1
  7. package/dist/cjs/types/hooks/useMutateMessage.d.ts +1 -1
  8. package/dist/cjs/types/hooks/useMutateRead.d.ts +1 -0
  9. package/dist/cjs/types/types/Chat.d.ts +1 -0
  10. package/dist/cjs/types/types/Message.d.ts +2 -0
  11. package/dist/cjs/types/types/types.d.ts +47 -4
  12. package/dist/cjs/types/ui/Spinner.d.ts +2 -1
  13. package/dist/css/weavy-chat.css +1540 -954
  14. package/dist/css/weavy-messenger.css +1901 -1298
  15. package/dist/css/weavy.css +1696 -1093
  16. package/dist/esm/index.js +3 -3
  17. package/dist/esm/index.js.map +1 -1
  18. package/dist/esm/types/components/Chat.d.ts +1 -1
  19. package/dist/esm/types/components/Messages.d.ts +3 -1
  20. package/dist/esm/types/hooks/useConversations.d.ts +1 -1
  21. package/dist/esm/types/hooks/useMutateMessage.d.ts +1 -1
  22. package/dist/esm/types/hooks/useMutateRead.d.ts +1 -0
  23. package/dist/esm/types/types/Chat.d.ts +1 -0
  24. package/dist/esm/types/types/Message.d.ts +2 -0
  25. package/dist/esm/types/types/types.d.ts +47 -4
  26. package/dist/esm/types/ui/Spinner.d.ts +2 -1
  27. package/dist/index.d.ts +2 -1
  28. package/package.json +2 -2
  29. package/src/client/WeavyClient.ts +12 -17
  30. package/src/components/Attachment.tsx +5 -5
  31. package/src/components/Chat.tsx +6 -5
  32. package/src/components/Conversation.tsx +26 -20
  33. package/src/components/ConversationBadge.tsx +7 -5
  34. package/src/components/ConversationForm.tsx +1 -1
  35. package/src/components/ConversationList.tsx +59 -11
  36. package/src/components/ConversationListItem.tsx +71 -54
  37. package/src/components/FileBrowser.tsx +53 -50
  38. package/src/components/MeetingCard.tsx +35 -13
  39. package/src/components/Meetings.tsx +1 -1
  40. package/src/components/Message.tsx +41 -41
  41. package/src/components/Messages.tsx +61 -60
  42. package/src/components/Messenger.tsx +7 -2
  43. package/src/components/NewConversation.tsx +1 -1
  44. package/src/components/PdfViewer.tsx +5 -5
  45. package/src/components/Preview.tsx +2 -2
  46. package/src/components/Reactions.tsx +11 -5
  47. package/src/components/SearchUsers.tsx +19 -9
  48. package/src/components/SeenBy.tsx +13 -7
  49. package/src/components/Typing.tsx +11 -12
  50. package/src/contexts/UserContext.tsx +1 -1
  51. package/src/contexts/WeavyContext.tsx +3 -3
  52. package/src/hooks/useConversations.ts +15 -5
  53. package/src/hooks/useMutateMessage.ts +1 -5
  54. package/src/hooks/useMutateRead.ts +5 -3
  55. package/src/hooks/usePresence.ts +2 -3
  56. package/src/hooks/useReactions.ts +11 -12
  57. package/src/scss/theme/_alert.scss +61 -63
  58. package/src/scss/theme/_appbar.scss +105 -30
  59. package/src/scss/theme/_avatar.scss +23 -28
  60. package/src/scss/theme/_badge.scss +26 -18
  61. package/src/scss/theme/_buttons.scss +107 -52
  62. package/src/scss/theme/_card.scss +102 -4
  63. package/src/scss/theme/_checkbox.scss +16 -20
  64. package/src/scss/theme/_code-vscode-dark.scss +3 -3
  65. package/src/scss/theme/_code-vscode-light.scss +3 -3
  66. package/src/scss/theme/_code.scss +0 -2
  67. package/src/scss/theme/_comment-editor-cm.scss +97 -0
  68. package/src/scss/theme/_comment-editor.scss +129 -0
  69. package/src/scss/theme/_comments.scss +66 -0
  70. package/src/scss/theme/_content.scss +33 -5
  71. package/src/scss/theme/_conversations.scss +19 -78
  72. package/src/scss/theme/_dropdown.scss +102 -15
  73. package/src/scss/theme/_embed.scss +135 -0
  74. package/src/scss/theme/_facepile.scss +11 -0
  75. package/src/scss/theme/_filebrowser.scss +1 -1
  76. package/src/scss/theme/_files.scss +76 -47
  77. package/src/scss/theme/_grid.scss +8 -0
  78. package/src/scss/theme/_icons.scss +155 -19
  79. package/src/scss/theme/_image-grid.scss +7 -10
  80. package/src/scss/theme/_input.scss +160 -0
  81. package/src/scss/theme/_item.scss +169 -0
  82. package/src/scss/theme/_list.scss +57 -0
  83. package/src/scss/theme/_meeting.scss +11 -0
  84. package/src/scss/theme/_message-editor-cm.scss +95 -0
  85. package/src/scss/theme/_message-editor.scss +65 -19
  86. package/src/scss/theme/_messages.scss +51 -105
  87. package/src/scss/theme/_meta.scss +12 -0
  88. package/src/scss/theme/_overlays.scss +31 -76
  89. package/src/scss/theme/_pager.scss +5 -1
  90. package/src/scss/theme/_pane.scss +13 -2
  91. package/src/scss/theme/_panels.scss +33 -28
  92. package/src/scss/theme/_picker-list.scss +5 -3
  93. package/src/scss/theme/_placeholder.scss +19 -0
  94. package/src/scss/theme/_poll.scss +49 -0
  95. package/src/scss/theme/_post-editor-cm.scss +100 -0
  96. package/src/scss/theme/_post-editor.scss +127 -0
  97. package/src/scss/theme/_post.scss +83 -0
  98. package/src/scss/theme/_preview-code.scss +11 -2
  99. package/src/scss/theme/_preview-embed.scss +8 -2
  100. package/src/scss/theme/_preview-image.scss +8 -26
  101. package/src/scss/theme/_preview-media.scss +1 -0
  102. package/src/scss/theme/_preview-pdf.scss +10 -15
  103. package/src/scss/theme/_preview.scss +57 -79
  104. package/src/scss/theme/_reactions.scss +48 -17
  105. package/src/scss/theme/_sheet.scss +59 -0
  106. package/src/scss/theme/_sidebar.scss +86 -0
  107. package/src/scss/theme/_spinner.scss +11 -7
  108. package/src/scss/theme/_tab.scss +72 -0
  109. package/src/scss/theme/_tables.scss +70 -23
  110. package/src/scss/theme/_toasts.scss +56 -26
  111. package/src/scss/theme/_type.scss +41 -0
  112. package/src/scss/theme/{mixins → base}/_backdrop.scss +0 -0
  113. package/src/scss/theme/{bootstrap/mixins → base}/_breakpoints.scss +9 -0
  114. package/src/scss/theme/base/_colors.scss +315 -0
  115. package/src/scss/theme/base/_md.scss +19 -0
  116. package/src/scss/theme/base/_palette.scss +130 -0
  117. package/src/scss/theme/{mixins → base}/_position.scss +5 -5
  118. package/src/scss/theme/base/_reboot.scss +51 -0
  119. package/src/scss/theme/base/_scroll.scss +180 -0
  120. package/src/scss/theme/base/_svg.scss +49 -0
  121. package/src/scss/theme/base/_text.scss +23 -0
  122. package/src/scss/theme/base/_vars.scss +203 -0
  123. package/src/scss/theme/{fonts → base/fonts}/_fontmapping-roboto.scss +0 -0
  124. package/src/scss/theme/{fonts → base/fonts}/_fontmapping-segoe-ui.scss +0 -0
  125. package/src/scss/theme/base/fonts/_index.scss +2 -0
  126. package/src/scss/weavy-chat.scss +10 -4
  127. package/src/scss/weavy-messenger.scss +37 -21
  128. package/src/types/Chat.ts +2 -1
  129. package/src/types/Message.ts +3 -1
  130. package/src/types/types.ts +56 -5
  131. package/src/ui/Icon.tsx +1 -1
  132. package/src/ui/Spinner.tsx +3 -2
  133. package/src/utils/infiniteScroll.js +11 -2
  134. package/src/utils/postal-parent.js +398 -0
  135. package/src/utils/promise.js +187 -0
  136. package/src/utils/scrollbarDetection.js +68 -9
  137. package/src/utils/utils.js +547 -0
  138. package/src/scss/theme/_attachments.scss +0 -74
  139. package/src/scss/theme/_cm-editor.scss +0 -42
  140. package/src/scss/theme/_colors.scss +0 -520
  141. package/src/scss/theme/_config.scss +0 -6
  142. package/src/scss/theme/_inputs.scss +0 -28
  143. package/src/scss/theme/_nav.scss +0 -52
  144. package/src/scss/theme/_palette.scss +0 -165
  145. package/src/scss/theme/_preview-icon.scss +0 -41
  146. package/src/scss/theme/_reboot.scss +0 -41
  147. package/src/scss/theme/_root.scss +0 -2
  148. package/src/scss/theme/_scroll.scss +0 -55
  149. package/src/scss/theme/_search.scss +0 -68
  150. package/src/scss/theme/_turbo.scss +0 -17
  151. package/src/scss/theme/_variables.scss +0 -139
  152. package/src/scss/theme/bootstrap/_accordion.scss +0 -146
  153. package/src/scss/theme/bootstrap/_alert.scss +0 -71
  154. package/src/scss/theme/bootstrap/_badge.scss +0 -38
  155. package/src/scss/theme/bootstrap/_breadcrumb.scss +0 -40
  156. package/src/scss/theme/bootstrap/_button-group.scss +0 -142
  157. package/src/scss/theme/bootstrap/_buttons.scss +0 -186
  158. package/src/scss/theme/bootstrap/_card.scss +0 -234
  159. package/src/scss/theme/bootstrap/_carousel.scss +0 -229
  160. package/src/scss/theme/bootstrap/_close.scss +0 -40
  161. package/src/scss/theme/bootstrap/_containers.scss +0 -41
  162. package/src/scss/theme/bootstrap/_dropdown.scss +0 -248
  163. package/src/scss/theme/bootstrap/_forms.scss +0 -9
  164. package/src/scss/theme/bootstrap/_functions.scss +0 -302
  165. package/src/scss/theme/bootstrap/_grid.scss +0 -33
  166. package/src/scss/theme/bootstrap/_helpers.scss +0 -10
  167. package/src/scss/theme/bootstrap/_images.scss +0 -42
  168. package/src/scss/theme/bootstrap/_list-group.scss +0 -191
  169. package/src/scss/theme/bootstrap/_maps.scss +0 -54
  170. package/src/scss/theme/bootstrap/_mixins.scss +0 -43
  171. package/src/scss/theme/bootstrap/_modal.scss +0 -237
  172. package/src/scss/theme/bootstrap/_nav.scss +0 -172
  173. package/src/scss/theme/bootstrap/_navbar.scss +0 -276
  174. package/src/scss/theme/bootstrap/_offcanvas.scss +0 -143
  175. package/src/scss/theme/bootstrap/_pagination.scss +0 -109
  176. package/src/scss/theme/bootstrap/_placeholders.scss +0 -51
  177. package/src/scss/theme/bootstrap/_popover.scss +0 -196
  178. package/src/scss/theme/bootstrap/_progress.scss +0 -59
  179. package/src/scss/theme/bootstrap/_reboot.scss +0 -610
  180. package/src/scss/theme/bootstrap/_root.scss +0 -73
  181. package/src/scss/theme/bootstrap/_spinners.scss +0 -85
  182. package/src/scss/theme/bootstrap/_tables.scss +0 -164
  183. package/src/scss/theme/bootstrap/_toasts.scss +0 -70
  184. package/src/scss/theme/bootstrap/_tooltip.scss +0 -120
  185. package/src/scss/theme/bootstrap/_transitions.scss +0 -27
  186. package/src/scss/theme/bootstrap/_type.scss +0 -106
  187. package/src/scss/theme/bootstrap/_utilities.scss +0 -647
  188. package/src/scss/theme/bootstrap/_variables.scss +0 -1633
  189. package/src/scss/theme/bootstrap/forms/_floating-labels.scss +0 -74
  190. package/src/scss/theme/bootstrap/forms/_form-check.scss +0 -175
  191. package/src/scss/theme/bootstrap/forms/_form-control.scss +0 -194
  192. package/src/scss/theme/bootstrap/forms/_form-range.scss +0 -91
  193. package/src/scss/theme/bootstrap/forms/_form-select.scss +0 -71
  194. package/src/scss/theme/bootstrap/forms/_form-text.scss +0 -11
  195. package/src/scss/theme/bootstrap/forms/_input-group.scss +0 -129
  196. package/src/scss/theme/bootstrap/forms/_labels.scss +0 -36
  197. package/src/scss/theme/bootstrap/forms/_validation.scss +0 -12
  198. package/src/scss/theme/bootstrap/helpers/_clearfix.scss +0 -3
  199. package/src/scss/theme/bootstrap/helpers/_color-bg.scss +0 -10
  200. package/src/scss/theme/bootstrap/helpers/_colored-links.scss +0 -12
  201. package/src/scss/theme/bootstrap/helpers/_position.scss +0 -36
  202. package/src/scss/theme/bootstrap/helpers/_ratio.scss +0 -26
  203. package/src/scss/theme/bootstrap/helpers/_stacks.scss +0 -15
  204. package/src/scss/theme/bootstrap/helpers/_stretched-link.scss +0 -15
  205. package/src/scss/theme/bootstrap/helpers/_text-truncation.scss +0 -7
  206. package/src/scss/theme/bootstrap/helpers/_visually-hidden.scss +0 -8
  207. package/src/scss/theme/bootstrap/helpers/_vr.scss +0 -8
  208. package/src/scss/theme/bootstrap/mixins/_alert.scss +0 -15
  209. package/src/scss/theme/bootstrap/mixins/_backdrop.scss +0 -14
  210. package/src/scss/theme/bootstrap/mixins/_banner.scss +0 -9
  211. package/src/scss/theme/bootstrap/mixins/_border-radius.scss +0 -78
  212. package/src/scss/theme/bootstrap/mixins/_box-shadow.scss +0 -18
  213. package/src/scss/theme/bootstrap/mixins/_buttons.scss +0 -70
  214. package/src/scss/theme/bootstrap/mixins/_caret.scss +0 -64
  215. package/src/scss/theme/bootstrap/mixins/_clearfix.scss +0 -9
  216. package/src/scss/theme/bootstrap/mixins/_color-scheme.scss +0 -7
  217. package/src/scss/theme/bootstrap/mixins/_container.scss +0 -11
  218. package/src/scss/theme/bootstrap/mixins/_deprecate.scss +0 -10
  219. package/src/scss/theme/bootstrap/mixins/_forms.scss +0 -152
  220. package/src/scss/theme/bootstrap/mixins/_gradients.scss +0 -47
  221. package/src/scss/theme/bootstrap/mixins/_grid.scss +0 -151
  222. package/src/scss/theme/bootstrap/mixins/_image.scss +0 -16
  223. package/src/scss/theme/bootstrap/mixins/_list-group.scss +0 -24
  224. package/src/scss/theme/bootstrap/mixins/_lists.scss +0 -7
  225. package/src/scss/theme/bootstrap/mixins/_pagination.scss +0 -10
  226. package/src/scss/theme/bootstrap/mixins/_reset-text.scss +0 -17
  227. package/src/scss/theme/bootstrap/mixins/_resize.scss +0 -6
  228. package/src/scss/theme/bootstrap/mixins/_table-variants.scss +0 -24
  229. package/src/scss/theme/bootstrap/mixins/_text-truncate.scss +0 -8
  230. package/src/scss/theme/bootstrap/mixins/_transition.scss +0 -26
  231. package/src/scss/theme/bootstrap/mixins/_utilities.scss +0 -97
  232. package/src/scss/theme/bootstrap/mixins/_visually-hidden.scss +0 -29
  233. package/src/scss/theme/bootstrap/utilities/_api.scss +0 -47
  234. package/src/scss/theme/bootstrap/vendor/_rfs.scss +0 -354
  235. package/src/scss/theme/bs/_badge.scss +0 -20
  236. package/src/scss/theme/bs/_buttons.scss +0 -185
  237. package/src/scss/theme/bs/_dropdown.scss +0 -86
  238. package/src/scss/theme/bs/_forms.scss +0 -161
  239. package/src/scss/theme/bs/_list-group.scss +0 -73
  240. package/src/scss/theme/bs/_tables.scss +0 -46
  241. package/src/scss/theme/fonts/_index.scss +0 -2
  242. package/src/scss/theme/mixins/_palette.scss +0 -165
  243. package/src/scss/theme/mixins/_scrollbar.scss +0 -110
@@ -1,229 +0,0 @@
1
- // Notes on the classes:
2
- //
3
- // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
4
- // even when their scroll action started on a carousel, but for compatibility (with Firefox)
5
- // we're preventing all actions instead
6
- // 2. The .carousel-item-start and .carousel-item-end is used to indicate where
7
- // the active slide is heading.
8
- // 3. .active.carousel-item is the current slide.
9
- // 4. .active.carousel-item-start and .active.carousel-item-end is the current
10
- // slide in its in-transition state. Only one of these occurs at a time.
11
- // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
12
- // is the upcoming slide in transition.
13
-
14
- .carousel {
15
- position: relative;
16
- }
17
-
18
- .carousel.pointer-event {
19
- touch-action: pan-y;
20
- }
21
-
22
- .carousel-inner {
23
- position: relative;
24
- width: 100%;
25
- overflow: hidden;
26
- @include clearfix();
27
- }
28
-
29
- .carousel-item {
30
- position: relative;
31
- display: none;
32
- float: left;
33
- width: 100%;
34
- margin-right: -100%;
35
- backface-visibility: hidden;
36
- @include transition($carousel-transition);
37
- }
38
-
39
- .carousel-item.active,
40
- .carousel-item-next,
41
- .carousel-item-prev {
42
- display: block;
43
- }
44
-
45
- /* rtl:begin:ignore */
46
- .carousel-item-next:not(.carousel-item-start),
47
- .active.carousel-item-end {
48
- transform: translateX(100%);
49
- }
50
-
51
- .carousel-item-prev:not(.carousel-item-end),
52
- .active.carousel-item-start {
53
- transform: translateX(-100%);
54
- }
55
-
56
- /* rtl:end:ignore */
57
-
58
-
59
- //
60
- // Alternate transitions
61
- //
62
-
63
- .carousel-fade {
64
- .carousel-item {
65
- opacity: 0;
66
- transition-property: opacity;
67
- transform: none;
68
- }
69
-
70
- .carousel-item.active,
71
- .carousel-item-next.carousel-item-start,
72
- .carousel-item-prev.carousel-item-end {
73
- z-index: 1;
74
- opacity: 1;
75
- }
76
-
77
- .active.carousel-item-start,
78
- .active.carousel-item-end {
79
- z-index: 0;
80
- opacity: 0;
81
- @include transition(opacity 0s $carousel-transition-duration);
82
- }
83
- }
84
-
85
-
86
- //
87
- // Left/right controls for nav
88
- //
89
-
90
- .carousel-control-prev,
91
- .carousel-control-next {
92
- position: absolute;
93
- top: 0;
94
- bottom: 0;
95
- z-index: 1;
96
- // Use flex for alignment (1-3)
97
- display: flex; // 1. allow flex styles
98
- align-items: center; // 2. vertically center contents
99
- justify-content: center; // 3. horizontally center contents
100
- width: $carousel-control-width;
101
- padding: 0;
102
- color: $carousel-control-color;
103
- text-align: center;
104
- background: none;
105
- border: 0;
106
- opacity: $carousel-control-opacity;
107
- @include transition($carousel-control-transition);
108
-
109
- // Hover/focus state
110
- &:hover,
111
- &:focus {
112
- color: $carousel-control-color;
113
- text-decoration: none;
114
- outline: 0;
115
- opacity: $carousel-control-hover-opacity;
116
- }
117
- }
118
- .carousel-control-prev {
119
- left: 0;
120
- background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
121
- }
122
- .carousel-control-next {
123
- right: 0;
124
- background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
125
- }
126
-
127
- // Icons for within
128
- .carousel-control-prev-icon,
129
- .carousel-control-next-icon {
130
- display: inline-block;
131
- width: $carousel-control-icon-width;
132
- height: $carousel-control-icon-width;
133
- background-repeat: no-repeat;
134
- background-position: 50%;
135
- background-size: 100% 100%;
136
- }
137
-
138
- /* rtl:options: {
139
- "autoRename": true,
140
- "stringMap":[ {
141
- "name" : "prev-next",
142
- "search" : "prev",
143
- "replace" : "next"
144
- } ]
145
- } */
146
- .carousel-control-prev-icon {
147
- background-image: escape-svg($carousel-control-prev-icon-bg);
148
- }
149
- .carousel-control-next-icon {
150
- background-image: escape-svg($carousel-control-next-icon-bg);
151
- }
152
-
153
- // Optional indicator pips/controls
154
- //
155
- // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
156
- // like a button) with data-bs-target for each slide your carousel holds.
157
-
158
- .carousel-indicators {
159
- position: absolute;
160
- right: 0;
161
- bottom: 0;
162
- left: 0;
163
- z-index: 2;
164
- display: flex;
165
- justify-content: center;
166
- padding: 0;
167
- // Use the .carousel-control's width as margin so we don't overlay those
168
- margin-right: $carousel-control-width;
169
- margin-bottom: 1rem;
170
- margin-left: $carousel-control-width;
171
- list-style: none;
172
-
173
- [data-bs-target] {
174
- box-sizing: content-box;
175
- flex: 0 1 auto;
176
- width: $carousel-indicator-width;
177
- height: $carousel-indicator-height;
178
- padding: 0;
179
- margin-right: $carousel-indicator-spacer;
180
- margin-left: $carousel-indicator-spacer;
181
- text-indent: -999px;
182
- cursor: pointer;
183
- background-color: $carousel-indicator-active-bg;
184
- background-clip: padding-box;
185
- border: 0;
186
- // Use transparent borders to increase the hit area by 10px on top and bottom.
187
- border-top: $carousel-indicator-hit-area-height solid transparent;
188
- border-bottom: $carousel-indicator-hit-area-height solid transparent;
189
- opacity: $carousel-indicator-opacity;
190
- @include transition($carousel-indicator-transition);
191
- }
192
-
193
- .active {
194
- opacity: $carousel-indicator-active-opacity;
195
- }
196
- }
197
-
198
-
199
- // Optional captions
200
- //
201
- //
202
-
203
- .carousel-caption {
204
- position: absolute;
205
- right: (100% - $carousel-caption-width) * .5;
206
- bottom: $carousel-caption-spacer;
207
- left: (100% - $carousel-caption-width) * .5;
208
- padding-top: $carousel-caption-padding-y;
209
- padding-bottom: $carousel-caption-padding-y;
210
- color: $carousel-caption-color;
211
- text-align: center;
212
- }
213
-
214
- // Dark mode carousel
215
-
216
- .carousel-dark {
217
- .carousel-control-prev-icon,
218
- .carousel-control-next-icon {
219
- filter: $carousel-dark-control-icon-filter;
220
- }
221
-
222
- .carousel-indicators [data-bs-target] {
223
- background-color: $carousel-dark-indicator-active-bg;
224
- }
225
-
226
- .carousel-caption {
227
- color: $carousel-dark-caption-color;
228
- }
229
- }
@@ -1,40 +0,0 @@
1
- // Transparent background and border properties included for button version.
2
- // iOS requires the button element instead of an anchor tag.
3
- // If you want the anchor version, it requires `href="#"`.
4
- // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
5
-
6
- .btn-close {
7
- box-sizing: content-box;
8
- width: $btn-close-width;
9
- height: $btn-close-height;
10
- padding: $btn-close-padding-y $btn-close-padding-x;
11
- color: $btn-close-color;
12
- background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
13
- border: 0; // for button elements
14
- @include border-radius();
15
- opacity: $btn-close-opacity;
16
-
17
- // Override <a>'s hover style
18
- &:hover {
19
- color: $btn-close-color;
20
- text-decoration: none;
21
- opacity: $btn-close-hover-opacity;
22
- }
23
-
24
- &:focus {
25
- outline: 0;
26
- box-shadow: $btn-close-focus-shadow;
27
- opacity: $btn-close-focus-opacity;
28
- }
29
-
30
- &:disabled,
31
- &.disabled {
32
- pointer-events: none;
33
- user-select: none;
34
- opacity: $btn-close-disabled-opacity;
35
- }
36
- }
37
-
38
- .btn-close-white {
39
- filter: $btn-close-white-filter;
40
- }
@@ -1,41 +0,0 @@
1
- // Container widths
2
- //
3
- // Set the container width, and override it for fixed navbars in media queries.
4
-
5
- @if $enable-container-classes {
6
- // Single container class with breakpoint max-widths
7
- .container,
8
- // 100% wide container at all breakpoints
9
- .container-fluid {
10
- @include make-container();
11
- }
12
-
13
- // Responsive containers that are 100% wide until a breakpoint
14
- @each $breakpoint, $container-max-width in $container-max-widths {
15
- .container-#{$breakpoint} {
16
- @extend .container-fluid;
17
- }
18
-
19
- @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
20
- %responsive-container-#{$breakpoint} {
21
- max-width: $container-max-width;
22
- }
23
-
24
- // Extend each breakpoint which is smaller or equal to the current breakpoint
25
- $extend-breakpoint: true;
26
-
27
- @each $name, $width in $grid-breakpoints {
28
- @if ($extend-breakpoint) {
29
- .container#{breakpoint-infix($name, $grid-breakpoints)} {
30
- @extend %responsive-container-#{$breakpoint};
31
- }
32
-
33
- // Once the current breakpoint is reached, stop extending
34
- @if ($breakpoint == $name) {
35
- $extend-breakpoint: false;
36
- }
37
- }
38
- }
39
- }
40
- }
41
- }
@@ -1,248 +0,0 @@
1
- // The dropdown wrapper (`<div>`)
2
- .dropup,
3
- .dropend,
4
- .dropdown,
5
- .dropstart,
6
- .dropup-center,
7
- .dropdown-center {
8
- position: relative;
9
- }
10
-
11
- .dropdown-toggle {
12
- white-space: nowrap;
13
-
14
- // Generate the caret automatically
15
- @include caret();
16
- }
17
-
18
- // The dropdown menu
19
- .dropdown-menu {
20
- // scss-docs-start dropdown-css-vars
21
- --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
22
- --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
23
- --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
24
- --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
25
- @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
26
- --#{$prefix}dropdown-color: #{$dropdown-color};
27
- --#{$prefix}dropdown-bg: #{$dropdown-bg};
28
- --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
29
- --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
30
- --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
31
- --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
32
- --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
33
- --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
34
- --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
35
- --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
36
- --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
37
- --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
38
- --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
39
- --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
40
- --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
41
- --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
42
- --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
43
- --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
44
- --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
45
- --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
46
- // scss-docs-end dropdown-css-vars
47
-
48
- position: absolute;
49
- z-index: $zindex-dropdown;
50
- display: none; // none by default, but block on "open" of the menu
51
- min-width: var(--#{$prefix}dropdown-min-width);
52
- padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
53
- margin: 0; // Override default margin of ul
54
- @include font-size(var(--#{$prefix}dropdown-font-size));
55
- color: var(--#{$prefix}dropdown-color);
56
- text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
57
- list-style: none;
58
- background-color: var(--#{$prefix}dropdown-bg);
59
- background-clip: padding-box;
60
- border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
61
- @include border-radius(var(--#{$prefix}dropdown-border-radius));
62
- @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
63
-
64
- &[data-bs-popper] {
65
- top: 100%;
66
- left: 0;
67
- margin-top: var(--#{$prefix}dropdown-spacer);
68
- }
69
-
70
- @if $dropdown-padding-y == 0 {
71
- > .dropdown-item:first-child,
72
- > li:first-child .dropdown-item {
73
- @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
74
- }
75
- > .dropdown-item:last-child,
76
- > li:last-child .dropdown-item {
77
- @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
78
- }
79
-
80
- }
81
- }
82
-
83
- // scss-docs-start responsive-breakpoints
84
- // We deliberately hardcode the `bs-` prefix because we check
85
- // this custom property in JS to determine Popper's positioning
86
-
87
- @each $breakpoint in map-keys($grid-breakpoints) {
88
- @include media-breakpoint-up($breakpoint) {
89
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
90
-
91
- .dropdown-menu#{$infix}-start {
92
- --bs-position: start;
93
-
94
- &[data-bs-popper] {
95
- right: auto;
96
- left: 0;
97
- }
98
- }
99
-
100
- .dropdown-menu#{$infix}-end {
101
- --bs-position: end;
102
-
103
- &[data-bs-popper] {
104
- right: 0;
105
- left: auto;
106
- }
107
- }
108
- }
109
- }
110
- // scss-docs-end responsive-breakpoints
111
-
112
- // Allow for dropdowns to go bottom up (aka, dropup-menu)
113
- // Just add .dropup after the standard .dropdown class and you're set.
114
- .dropup {
115
- .dropdown-menu[data-bs-popper] {
116
- top: auto;
117
- bottom: 100%;
118
- margin-top: 0;
119
- margin-bottom: var(--#{$prefix}dropdown-spacer);
120
- }
121
-
122
- .dropdown-toggle {
123
- @include caret(up);
124
- }
125
- }
126
-
127
- .dropend {
128
- .dropdown-menu[data-bs-popper] {
129
- top: 0;
130
- right: auto;
131
- left: 100%;
132
- margin-top: 0;
133
- margin-left: var(--#{$prefix}dropdown-spacer);
134
- }
135
-
136
- .dropdown-toggle {
137
- @include caret(end);
138
- &::after {
139
- vertical-align: 0;
140
- }
141
- }
142
- }
143
-
144
- .dropstart {
145
- .dropdown-menu[data-bs-popper] {
146
- top: 0;
147
- right: 100%;
148
- left: auto;
149
- margin-top: 0;
150
- margin-right: var(--#{$prefix}dropdown-spacer);
151
- }
152
-
153
- .dropdown-toggle {
154
- @include caret(start);
155
- &::before {
156
- vertical-align: 0;
157
- }
158
- }
159
- }
160
-
161
-
162
- // Dividers (basically an `<hr>`) within the dropdown
163
- .dropdown-divider {
164
- height: 0;
165
- margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
166
- overflow: hidden;
167
- border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
168
- opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
169
- }
170
-
171
- // Links, buttons, and more within the dropdown menu
172
- //
173
- // `<button>`-specific styles are denoted with `// For <button>s`
174
- .dropdown-item {
175
- display: block;
176
- width: 100%; // For `<button>`s
177
- padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
178
- clear: both;
179
- font-weight: $font-weight-normal;
180
- color: var(--#{$prefix}dropdown-link-color);
181
- text-align: inherit; // For `<button>`s
182
- text-decoration: if($link-decoration == none, null, none);
183
- white-space: nowrap; // prevent links from randomly breaking onto new lines
184
- background-color: transparent; // For `<button>`s
185
- border: 0; // For `<button>`s
186
-
187
- &:hover,
188
- &:focus {
189
- color: var(--#{$prefix}dropdown-link-hover-color);
190
- text-decoration: if($link-hover-decoration == underline, none, null);
191
- @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
192
- }
193
-
194
- &.active,
195
- &:active {
196
- color: var(--#{$prefix}dropdown-link-active-color);
197
- text-decoration: none;
198
- @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
199
- }
200
-
201
- &.disabled,
202
- &:disabled {
203
- color: var(--#{$prefix}dropdown-link-disabled-color);
204
- pointer-events: none;
205
- background-color: transparent;
206
- // Remove CSS gradients if they're enabled
207
- background-image: if($enable-gradients, none, null);
208
- }
209
- }
210
-
211
- .dropdown-menu.show {
212
- display: block;
213
- }
214
-
215
- // Dropdown section headers
216
- .dropdown-header {
217
- display: block;
218
- padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
219
- margin-bottom: 0; // for use with heading elements
220
- @include font-size($font-size-sm);
221
- color: var(--#{$prefix}dropdown-header-color);
222
- white-space: nowrap; // as with > li > a
223
- }
224
-
225
- // Dropdown text
226
- .dropdown-item-text {
227
- display: block;
228
- padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
229
- color: var(--#{$prefix}dropdown-link-color);
230
- }
231
-
232
- // Dark dropdowns
233
- .dropdown-menu-dark {
234
- // scss-docs-start dropdown-dark-css-vars
235
- --#{$prefix}dropdown-color: #{$dropdown-dark-color};
236
- --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
237
- --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
238
- --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
239
- --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
240
- --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
241
- --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
242
- --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
243
- --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
244
- --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
245
- --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
246
- --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
247
- // scss-docs-end dropdown-dark-css-vars
248
- }
@@ -1,9 +0,0 @@
1
- @import "forms/labels";
2
- @import "forms/form-text";
3
- @import "forms/form-control";
4
- @import "forms/form-select";
5
- @import "forms/form-check";
6
- @import "forms/form-range";
7
- @import "forms/floating-labels";
8
- @import "forms/input-group";
9
- @import "forms/validation";