@weavy/uikit-react 12.1.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 (280) hide show
  1. package/changelog.md +60 -0
  2. package/dist/cjs/index.js +28 -6
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/client/WeavyClient.d.ts +8 -1
  5. package/dist/cjs/types/components/Attachment.d.ts +2 -1
  6. package/dist/cjs/types/components/Chat.d.ts +1 -1
  7. package/dist/cjs/types/components/Messages.d.ts +3 -1
  8. package/dist/cjs/types/components/PdfViewer.d.ts +3 -1
  9. package/dist/cjs/types/components/Preview.d.ts +8 -10
  10. package/dist/cjs/types/contexts/PreviewContext.d.ts +2 -1
  11. package/dist/cjs/types/contexts/WeavyContext.d.ts +2 -3
  12. package/dist/cjs/types/hooks/useConversations.d.ts +1 -1
  13. package/dist/cjs/types/hooks/useMutateMessage.d.ts +1 -1
  14. package/dist/cjs/types/hooks/useMutateRead.d.ts +1 -0
  15. package/dist/cjs/types/types/Chat.d.ts +2 -1
  16. package/dist/cjs/types/types/Message.d.ts +2 -0
  17. package/dist/cjs/types/types/types.d.ts +63 -9
  18. package/dist/cjs/types/ui/Spinner.d.ts +10 -0
  19. package/dist/cjs/types/utils/fileUtilities.d.ts +1 -4
  20. package/dist/css/weavy-chat.css +1803 -1041
  21. package/dist/css/weavy-messenger.css +2141 -1360
  22. package/dist/css/weavy.css +1943 -1162
  23. package/dist/esm/index.js +28 -6
  24. package/dist/esm/index.js.map +1 -1
  25. package/dist/esm/types/client/WeavyClient.d.ts +8 -1
  26. package/dist/esm/types/components/Attachment.d.ts +2 -1
  27. package/dist/esm/types/components/Chat.d.ts +1 -1
  28. package/dist/esm/types/components/Messages.d.ts +3 -1
  29. package/dist/esm/types/components/PdfViewer.d.ts +3 -1
  30. package/dist/esm/types/components/Preview.d.ts +8 -10
  31. package/dist/esm/types/contexts/PreviewContext.d.ts +2 -1
  32. package/dist/esm/types/contexts/WeavyContext.d.ts +2 -3
  33. package/dist/esm/types/hooks/useConversations.d.ts +1 -1
  34. package/dist/esm/types/hooks/useMutateMessage.d.ts +1 -1
  35. package/dist/esm/types/hooks/useMutateRead.d.ts +1 -0
  36. package/dist/esm/types/types/Chat.d.ts +2 -1
  37. package/dist/esm/types/types/Message.d.ts +2 -0
  38. package/dist/esm/types/types/types.d.ts +63 -9
  39. package/dist/esm/types/ui/Spinner.d.ts +10 -0
  40. package/dist/esm/types/utils/fileUtilities.d.ts +1 -4
  41. package/dist/index.d.ts +15 -7
  42. package/package.json +2 -2
  43. package/rollup.config.js +3 -1
  44. package/src/client/WeavyClient.ts +105 -29
  45. package/src/components/Attachment.tsx +8 -7
  46. package/src/components/Chat.tsx +8 -7
  47. package/src/components/Conversation.tsx +29 -23
  48. package/src/components/ConversationBadge.tsx +7 -5
  49. package/src/components/ConversationForm.tsx +1 -1
  50. package/src/components/ConversationList.tsx +59 -11
  51. package/src/components/ConversationListItem.tsx +71 -54
  52. package/src/components/FileBrowser.tsx +53 -50
  53. package/src/components/MeetingCard.tsx +35 -13
  54. package/src/components/Meetings.tsx +1 -1
  55. package/src/components/Message.tsx +41 -41
  56. package/src/components/Messages.tsx +62 -61
  57. package/src/components/Messenger.tsx +7 -2
  58. package/src/components/NewConversation.tsx +1 -1
  59. package/src/components/PdfViewer.tsx +93 -88
  60. package/src/components/Preview.tsx +115 -54
  61. package/src/components/Reactions.tsx +11 -5
  62. package/src/components/SearchUsers.tsx +21 -11
  63. package/src/components/SeenBy.tsx +13 -7
  64. package/src/components/Typing.tsx +11 -12
  65. package/src/contexts/PreviewContext.tsx +90 -16
  66. package/src/contexts/UserContext.tsx +1 -1
  67. package/src/contexts/WeavyContext.tsx +10 -7
  68. package/src/hooks/useBadge.ts +2 -6
  69. package/src/hooks/useChat.ts +3 -14
  70. package/src/hooks/useConversation.ts +1 -7
  71. package/src/hooks/useConversations.ts +15 -11
  72. package/src/hooks/useFileUploader.ts +6 -8
  73. package/src/hooks/useMembers.ts +1 -7
  74. package/src/hooks/useMessages.ts +1 -7
  75. package/src/hooks/useMutateChat.ts +6 -11
  76. package/src/hooks/useMutateConversation.ts +7 -10
  77. package/src/hooks/useMutateConversationName.ts +10 -12
  78. package/src/hooks/useMutateDeleteReaction.ts +3 -8
  79. package/src/hooks/useMutateExternalBlobs.ts +6 -11
  80. package/src/hooks/useMutateMeeting.ts +6 -11
  81. package/src/hooks/useMutateMembers.ts +8 -13
  82. package/src/hooks/useMutateMessage.ts +9 -18
  83. package/src/hooks/useMutatePinned.ts +3 -8
  84. package/src/hooks/useMutateReaction.ts +6 -12
  85. package/src/hooks/useMutateRead.ts +5 -12
  86. package/src/hooks/useMutateRemoveMembers.ts +7 -12
  87. package/src/hooks/useMutateTyping.ts +6 -11
  88. package/src/hooks/usePresence.ts +2 -3
  89. package/src/hooks/useReactions.ts +11 -12
  90. package/src/hooks/useSearchUsers.ts +1 -6
  91. package/src/hooks/useUser.ts +3 -14
  92. package/src/scss/theme/_alert.scss +61 -63
  93. package/src/scss/theme/_appbar.scss +105 -28
  94. package/src/scss/theme/_avatar.scss +23 -28
  95. package/src/scss/theme/_badge.scss +26 -18
  96. package/src/scss/theme/_buttons.scss +107 -52
  97. package/src/scss/theme/_card.scss +102 -4
  98. package/src/scss/theme/_checkbox.scss +16 -20
  99. package/src/scss/theme/_code-vscode-dark.scss +184 -0
  100. package/src/scss/theme/_code-vscode-light.scss +179 -0
  101. package/src/scss/theme/_code.scss +9 -114
  102. package/src/scss/theme/_comment-editor-cm.scss +97 -0
  103. package/src/scss/theme/_comment-editor.scss +129 -0
  104. package/src/scss/theme/_comments.scss +66 -0
  105. package/src/scss/theme/_content.scss +33 -5
  106. package/src/scss/theme/_conversations.scss +19 -78
  107. package/src/scss/theme/_dropdown.scss +102 -15
  108. package/src/scss/theme/_embed.scss +135 -0
  109. package/src/scss/theme/_facepile.scss +11 -0
  110. package/src/scss/theme/_filebrowser.scss +1 -1
  111. package/src/scss/theme/_files.scss +77 -48
  112. package/src/scss/theme/_grid.scss +8 -0
  113. package/src/scss/theme/_icons.scss +155 -19
  114. package/src/scss/theme/_image-grid.scss +7 -10
  115. package/src/scss/theme/_input.scss +160 -0
  116. package/src/scss/theme/_item.scss +169 -0
  117. package/src/scss/theme/_list.scss +57 -0
  118. package/src/scss/theme/_meeting.scss +11 -0
  119. package/src/scss/theme/_message-editor-cm.scss +95 -0
  120. package/src/scss/theme/_message-editor.scss +66 -20
  121. package/src/scss/theme/_messages.scss +51 -105
  122. package/src/scss/theme/_meta.scss +12 -0
  123. package/src/scss/theme/_overlays.scss +31 -76
  124. package/src/scss/theme/_pager.scss +5 -1
  125. package/src/scss/theme/_pane.scss +13 -2
  126. package/src/scss/theme/_panels.scss +34 -25
  127. package/src/scss/theme/_picker-list.scss +5 -3
  128. package/src/scss/theme/_placeholder.scss +19 -0
  129. package/src/scss/theme/_poll.scss +49 -0
  130. package/src/scss/theme/_post-editor-cm.scss +100 -0
  131. package/src/scss/theme/_post-editor.scss +127 -0
  132. package/src/scss/theme/_post.scss +83 -0
  133. package/src/scss/theme/_preview-code.scss +14 -0
  134. package/src/scss/theme/_preview-embed.scss +11 -5
  135. package/src/scss/theme/_preview-image.scss +8 -26
  136. package/src/scss/theme/_preview-media.scss +1 -0
  137. package/src/scss/theme/_preview-pdf.scss +10 -15
  138. package/src/scss/theme/_preview-text.scss +1 -1
  139. package/src/scss/theme/_preview.scss +59 -76
  140. package/src/scss/theme/_reactions.scss +48 -17
  141. package/src/scss/theme/_sheet.scss +59 -0
  142. package/src/scss/theme/_sidebar.scss +86 -0
  143. package/src/scss/theme/_spinner.scss +11 -7
  144. package/src/scss/theme/_tab.scss +72 -0
  145. package/src/scss/theme/_tables.scss +70 -23
  146. package/src/scss/theme/_toasts.scss +56 -26
  147. package/src/scss/theme/_type.scss +41 -0
  148. package/src/scss/theme/{mixins → base}/_backdrop.scss +0 -0
  149. package/src/scss/theme/{bootstrap/mixins → base}/_breakpoints.scss +9 -0
  150. package/src/scss/theme/base/_colors.scss +315 -0
  151. package/src/scss/theme/base/_md.scss +19 -0
  152. package/src/scss/theme/base/_palette.scss +130 -0
  153. package/src/scss/theme/{mixins → base}/_position.scss +5 -5
  154. package/src/scss/theme/base/_reboot.scss +51 -0
  155. package/src/scss/theme/base/_scroll.scss +180 -0
  156. package/src/scss/theme/base/_svg.scss +49 -0
  157. package/src/scss/theme/base/_text.scss +23 -0
  158. package/src/scss/theme/base/_vars.scss +203 -0
  159. package/src/scss/theme/{fonts → base/fonts}/_fontmapping-roboto.scss +0 -0
  160. package/src/scss/theme/{fonts → base/fonts}/_fontmapping-segoe-ui.scss +0 -0
  161. package/src/scss/theme/base/fonts/_index.scss +2 -0
  162. package/src/scss/weavy-chat.scss +11 -4
  163. package/src/scss/weavy-messenger.scss +38 -21
  164. package/src/types/Chat.ts +2 -1
  165. package/src/types/Message.ts +3 -1
  166. package/src/types/types.ts +72 -10
  167. package/src/ui/Icon.tsx +1 -1
  168. package/src/ui/Spinner.tsx +19 -0
  169. package/src/utils/fileUtilities.ts +11 -125
  170. package/src/utils/infiniteScroll.js +11 -2
  171. package/src/utils/postal-parent.js +398 -0
  172. package/src/utils/promise.js +187 -0
  173. package/src/utils/scrollbarDetection.js +68 -9
  174. package/src/utils/utils.js +547 -0
  175. package/src/scss/theme/_attachments.scss +0 -74
  176. package/src/scss/theme/_cm-editor.scss +0 -42
  177. package/src/scss/theme/_colors.scss +0 -520
  178. package/src/scss/theme/_config.scss +0 -6
  179. package/src/scss/theme/_inputs.scss +0 -28
  180. package/src/scss/theme/_nav.scss +0 -52
  181. package/src/scss/theme/_palette.scss +0 -165
  182. package/src/scss/theme/_preview-icon.scss +0 -41
  183. package/src/scss/theme/_reboot.scss +0 -41
  184. package/src/scss/theme/_root.scss +0 -2
  185. package/src/scss/theme/_scroll.scss +0 -55
  186. package/src/scss/theme/_search.scss +0 -68
  187. package/src/scss/theme/_turbo.scss +0 -17
  188. package/src/scss/theme/_variables.scss +0 -139
  189. package/src/scss/theme/bootstrap/_accordion.scss +0 -146
  190. package/src/scss/theme/bootstrap/_alert.scss +0 -71
  191. package/src/scss/theme/bootstrap/_badge.scss +0 -38
  192. package/src/scss/theme/bootstrap/_breadcrumb.scss +0 -40
  193. package/src/scss/theme/bootstrap/_button-group.scss +0 -142
  194. package/src/scss/theme/bootstrap/_buttons.scss +0 -186
  195. package/src/scss/theme/bootstrap/_card.scss +0 -234
  196. package/src/scss/theme/bootstrap/_carousel.scss +0 -229
  197. package/src/scss/theme/bootstrap/_close.scss +0 -40
  198. package/src/scss/theme/bootstrap/_containers.scss +0 -41
  199. package/src/scss/theme/bootstrap/_dropdown.scss +0 -248
  200. package/src/scss/theme/bootstrap/_forms.scss +0 -9
  201. package/src/scss/theme/bootstrap/_functions.scss +0 -302
  202. package/src/scss/theme/bootstrap/_grid.scss +0 -33
  203. package/src/scss/theme/bootstrap/_helpers.scss +0 -10
  204. package/src/scss/theme/bootstrap/_images.scss +0 -42
  205. package/src/scss/theme/bootstrap/_list-group.scss +0 -191
  206. package/src/scss/theme/bootstrap/_maps.scss +0 -54
  207. package/src/scss/theme/bootstrap/_mixins.scss +0 -43
  208. package/src/scss/theme/bootstrap/_modal.scss +0 -237
  209. package/src/scss/theme/bootstrap/_nav.scss +0 -172
  210. package/src/scss/theme/bootstrap/_navbar.scss +0 -276
  211. package/src/scss/theme/bootstrap/_offcanvas.scss +0 -143
  212. package/src/scss/theme/bootstrap/_pagination.scss +0 -109
  213. package/src/scss/theme/bootstrap/_placeholders.scss +0 -51
  214. package/src/scss/theme/bootstrap/_popover.scss +0 -196
  215. package/src/scss/theme/bootstrap/_progress.scss +0 -59
  216. package/src/scss/theme/bootstrap/_reboot.scss +0 -610
  217. package/src/scss/theme/bootstrap/_root.scss +0 -73
  218. package/src/scss/theme/bootstrap/_spinners.scss +0 -85
  219. package/src/scss/theme/bootstrap/_tables.scss +0 -164
  220. package/src/scss/theme/bootstrap/_toasts.scss +0 -70
  221. package/src/scss/theme/bootstrap/_tooltip.scss +0 -120
  222. package/src/scss/theme/bootstrap/_transitions.scss +0 -27
  223. package/src/scss/theme/bootstrap/_type.scss +0 -106
  224. package/src/scss/theme/bootstrap/_utilities.scss +0 -647
  225. package/src/scss/theme/bootstrap/_variables.scss +0 -1633
  226. package/src/scss/theme/bootstrap/forms/_floating-labels.scss +0 -74
  227. package/src/scss/theme/bootstrap/forms/_form-check.scss +0 -175
  228. package/src/scss/theme/bootstrap/forms/_form-control.scss +0 -194
  229. package/src/scss/theme/bootstrap/forms/_form-range.scss +0 -91
  230. package/src/scss/theme/bootstrap/forms/_form-select.scss +0 -71
  231. package/src/scss/theme/bootstrap/forms/_form-text.scss +0 -11
  232. package/src/scss/theme/bootstrap/forms/_input-group.scss +0 -129
  233. package/src/scss/theme/bootstrap/forms/_labels.scss +0 -36
  234. package/src/scss/theme/bootstrap/forms/_validation.scss +0 -12
  235. package/src/scss/theme/bootstrap/helpers/_clearfix.scss +0 -3
  236. package/src/scss/theme/bootstrap/helpers/_color-bg.scss +0 -10
  237. package/src/scss/theme/bootstrap/helpers/_colored-links.scss +0 -12
  238. package/src/scss/theme/bootstrap/helpers/_position.scss +0 -36
  239. package/src/scss/theme/bootstrap/helpers/_ratio.scss +0 -26
  240. package/src/scss/theme/bootstrap/helpers/_stacks.scss +0 -15
  241. package/src/scss/theme/bootstrap/helpers/_stretched-link.scss +0 -15
  242. package/src/scss/theme/bootstrap/helpers/_text-truncation.scss +0 -7
  243. package/src/scss/theme/bootstrap/helpers/_visually-hidden.scss +0 -8
  244. package/src/scss/theme/bootstrap/helpers/_vr.scss +0 -8
  245. package/src/scss/theme/bootstrap/mixins/_alert.scss +0 -15
  246. package/src/scss/theme/bootstrap/mixins/_backdrop.scss +0 -14
  247. package/src/scss/theme/bootstrap/mixins/_banner.scss +0 -9
  248. package/src/scss/theme/bootstrap/mixins/_border-radius.scss +0 -78
  249. package/src/scss/theme/bootstrap/mixins/_box-shadow.scss +0 -18
  250. package/src/scss/theme/bootstrap/mixins/_buttons.scss +0 -70
  251. package/src/scss/theme/bootstrap/mixins/_caret.scss +0 -64
  252. package/src/scss/theme/bootstrap/mixins/_clearfix.scss +0 -9
  253. package/src/scss/theme/bootstrap/mixins/_color-scheme.scss +0 -7
  254. package/src/scss/theme/bootstrap/mixins/_container.scss +0 -11
  255. package/src/scss/theme/bootstrap/mixins/_deprecate.scss +0 -10
  256. package/src/scss/theme/bootstrap/mixins/_forms.scss +0 -152
  257. package/src/scss/theme/bootstrap/mixins/_gradients.scss +0 -47
  258. package/src/scss/theme/bootstrap/mixins/_grid.scss +0 -151
  259. package/src/scss/theme/bootstrap/mixins/_image.scss +0 -16
  260. package/src/scss/theme/bootstrap/mixins/_list-group.scss +0 -24
  261. package/src/scss/theme/bootstrap/mixins/_lists.scss +0 -7
  262. package/src/scss/theme/bootstrap/mixins/_pagination.scss +0 -10
  263. package/src/scss/theme/bootstrap/mixins/_reset-text.scss +0 -17
  264. package/src/scss/theme/bootstrap/mixins/_resize.scss +0 -6
  265. package/src/scss/theme/bootstrap/mixins/_table-variants.scss +0 -24
  266. package/src/scss/theme/bootstrap/mixins/_text-truncate.scss +0 -8
  267. package/src/scss/theme/bootstrap/mixins/_transition.scss +0 -26
  268. package/src/scss/theme/bootstrap/mixins/_utilities.scss +0 -97
  269. package/src/scss/theme/bootstrap/mixins/_visually-hidden.scss +0 -29
  270. package/src/scss/theme/bootstrap/utilities/_api.scss +0 -47
  271. package/src/scss/theme/bootstrap/vendor/_rfs.scss +0 -354
  272. package/src/scss/theme/bs/_badge.scss +0 -20
  273. package/src/scss/theme/bs/_buttons.scss +0 -185
  274. package/src/scss/theme/bs/_dropdown.scss +0 -86
  275. package/src/scss/theme/bs/_forms.scss +0 -161
  276. package/src/scss/theme/bs/_list-group.scss +0 -73
  277. package/src/scss/theme/bs/_tables.scss +0 -46
  278. package/src/scss/theme/fonts/_index.scss +0 -2
  279. package/src/scss/theme/mixins/_palette.scss +0 -165
  280. package/src/scss/theme/mixins/_scrollbar.scss +0 -110
@@ -1,71 +0,0 @@
1
- //
2
- // Base styles
3
- //
4
-
5
- .alert {
6
- // scss-docs-start alert-css-vars
7
- --#{$prefix}alert-bg: transparent;
8
- --#{$prefix}alert-padding-x: #{$alert-padding-x};
9
- --#{$prefix}alert-padding-y: #{$alert-padding-y};
10
- --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
11
- --#{$prefix}alert-color: inherit;
12
- --#{$prefix}alert-border-color: transparent;
13
- --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
14
- --#{$prefix}alert-border-radius: #{$alert-border-radius};
15
- // scss-docs-end alert-css-vars
16
-
17
- position: relative;
18
- padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
19
- margin-bottom: var(--#{$prefix}alert-margin-bottom);
20
- color: var(--#{$prefix}alert-color);
21
- background-color: var(--#{$prefix}alert-bg);
22
- border: var(--#{$prefix}alert-border);
23
- @include border-radius(var(--#{$prefix}alert-border-radius));
24
- }
25
-
26
- // Headings for larger alerts
27
- .alert-heading {
28
- // Specified to prevent conflicts of changing $headings-color
29
- color: inherit;
30
- }
31
-
32
- // Provide class for links that match alerts
33
- .alert-link {
34
- font-weight: $alert-link-font-weight;
35
- }
36
-
37
-
38
- // Dismissible alerts
39
- //
40
- // Expand the right padding and account for the close button's positioning.
41
-
42
- .alert-dismissible {
43
- padding-right: $alert-dismissible-padding-r;
44
-
45
- // Adjust close link position
46
- .btn-close {
47
- position: absolute;
48
- top: 0;
49
- right: 0;
50
- z-index: $stretched-link-z-index + 1;
51
- padding: $alert-padding-y * 1.25 $alert-padding-x;
52
- }
53
- }
54
-
55
-
56
- // scss-docs-start alert-modifiers
57
- // Generate contextual modifier classes for colorizing the alert.
58
-
59
- @each $state, $value in $theme-colors {
60
- $alert-background: shift-color($value, $alert-bg-scale);
61
- $alert-border: shift-color($value, $alert-border-scale);
62
- $alert-color: shift-color($value, $alert-color-scale);
63
-
64
- @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
65
- $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
66
- }
67
- .alert-#{$state} {
68
- @include alert-variant($alert-background, $alert-border, $alert-color);
69
- }
70
- }
71
- // scss-docs-end alert-modifiers
@@ -1,38 +0,0 @@
1
- // Base class
2
- //
3
- // Requires one of the contextual, color modifier classes for `color` and
4
- // `background-color`.
5
-
6
- .badge {
7
- // scss-docs-start badge-css-vars
8
- --#{$prefix}badge-padding-x: #{$badge-padding-x};
9
- --#{$prefix}badge-padding-y: #{$badge-padding-y};
10
- @include rfs($badge-font-size, --#{$prefix}badge-font-size);
11
- --#{$prefix}badge-font-weight: #{$badge-font-weight};
12
- --#{$prefix}badge-color: #{$badge-color};
13
- --#{$prefix}badge-border-radius: #{$badge-border-radius};
14
- // scss-docs-end badge-css-vars
15
-
16
- display: inline-block;
17
- padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
18
- @include font-size(var(--#{$prefix}badge-font-size));
19
- font-weight: var(--#{$prefix}badge-font-weight);
20
- line-height: 1;
21
- color: var(--#{$prefix}badge-color);
22
- text-align: center;
23
- white-space: nowrap;
24
- vertical-align: baseline;
25
- @include border-radius(var(--#{$prefix}badge-border-radius));
26
- @include gradient-bg();
27
-
28
- // Empty badges collapse automatically
29
- &:empty {
30
- display: none;
31
- }
32
- }
33
-
34
- // Quick fix for badges in buttons
35
- .btn .badge {
36
- position: relative;
37
- top: -1px;
38
- }
@@ -1,40 +0,0 @@
1
- .breadcrumb {
2
- // scss-docs-start breadcrumb-css-vars
3
- --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
4
- --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
5
- --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
6
- @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
7
- --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
8
- --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
9
- --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
10
- --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
11
- --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
12
- // scss-docs-end breadcrumb-css-vars
13
-
14
- display: flex;
15
- flex-wrap: wrap;
16
- padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
17
- margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
18
- @include font-size(var(--#{$prefix}breadcrumb-font-size));
19
- list-style: none;
20
- background-color: var(--#{$prefix}breadcrumb-bg);
21
- @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
22
- }
23
-
24
- .breadcrumb-item {
25
- // The separator between breadcrumbs (by default, a forward-slash: "/")
26
- + .breadcrumb-item {
27
- padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
28
-
29
- &::before {
30
- float: left; // Suppress inline spacings and underlining of the separator
31
- padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
32
- color: var(--#{$prefix}breadcrumb-divider-color);
33
- content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
34
- }
35
- }
36
-
37
- &.active {
38
- color: var(--#{$prefix}breadcrumb-item-active-color);
39
- }
40
- }
@@ -1,142 +0,0 @@
1
- // Make the div behave like a button
2
- .btn-group,
3
- .btn-group-vertical {
4
- position: relative;
5
- display: inline-flex;
6
- vertical-align: middle; // match .btn alignment given font-size hack above
7
-
8
- > .btn {
9
- position: relative;
10
- flex: 1 1 auto;
11
- }
12
-
13
- // Bring the hover, focused, and "active" buttons to the front to overlay
14
- // the borders properly
15
- > .btn-check:checked + .btn,
16
- > .btn-check:focus + .btn,
17
- > .btn:hover,
18
- > .btn:focus,
19
- > .btn:active,
20
- > .btn.active {
21
- z-index: 1;
22
- }
23
- }
24
-
25
- // Optional: Group multiple button groups together for a toolbar
26
- .btn-toolbar {
27
- display: flex;
28
- flex-wrap: wrap;
29
- justify-content: flex-start;
30
-
31
- .input-group {
32
- width: auto;
33
- }
34
- }
35
-
36
- .btn-group {
37
- @include border-radius($btn-border-radius);
38
-
39
- // Prevent double borders when buttons are next to each other
40
- > .btn:not(:first-child),
41
- > .btn-group:not(:first-child) {
42
- margin-left: -$btn-border-width;
43
- }
44
-
45
- // Reset rounded corners
46
- > .btn:not(:last-child):not(.dropdown-toggle),
47
- > .btn.dropdown-toggle-split:first-child,
48
- > .btn-group:not(:last-child) > .btn {
49
- @include border-end-radius(0);
50
- }
51
-
52
- // The left radius should be 0 if the button is:
53
- // - the "third or more" child
54
- // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
55
- // - part of a btn-group which isn't the first child
56
- > .btn:nth-child(n + 3),
57
- > :not(.btn-check) + .btn,
58
- > .btn-group:not(:first-child) > .btn {
59
- @include border-start-radius(0);
60
- }
61
- }
62
-
63
- // Sizing
64
- //
65
- // Remix the default button sizing classes into new ones for easier manipulation.
66
-
67
- .btn-group-sm > .btn { @extend .btn-sm; }
68
- .btn-group-lg > .btn { @extend .btn-lg; }
69
-
70
-
71
- //
72
- // Split button dropdowns
73
- //
74
-
75
- .dropdown-toggle-split {
76
- padding-right: $btn-padding-x * .75;
77
- padding-left: $btn-padding-x * .75;
78
-
79
- &::after,
80
- .dropup &::after,
81
- .dropend &::after {
82
- margin-left: 0;
83
- }
84
-
85
- .dropstart &::before {
86
- margin-right: 0;
87
- }
88
- }
89
-
90
- .btn-sm + .dropdown-toggle-split {
91
- padding-right: $btn-padding-x-sm * .75;
92
- padding-left: $btn-padding-x-sm * .75;
93
- }
94
-
95
- .btn-lg + .dropdown-toggle-split {
96
- padding-right: $btn-padding-x-lg * .75;
97
- padding-left: $btn-padding-x-lg * .75;
98
- }
99
-
100
-
101
- // The clickable button for toggling the menu
102
- // Set the same inset shadow as the :active state
103
- .btn-group.show .dropdown-toggle {
104
- @include box-shadow($btn-active-box-shadow);
105
-
106
- // Show no shadow for `.btn-link` since it has no other button styles.
107
- &.btn-link {
108
- @include box-shadow(none);
109
- }
110
- }
111
-
112
-
113
- //
114
- // Vertical button groups
115
- //
116
-
117
- .btn-group-vertical {
118
- flex-direction: column;
119
- align-items: flex-start;
120
- justify-content: center;
121
-
122
- > .btn,
123
- > .btn-group {
124
- width: 100%;
125
- }
126
-
127
- > .btn:not(:first-child),
128
- > .btn-group:not(:first-child) {
129
- margin-top: -$btn-border-width;
130
- }
131
-
132
- // Reset rounded corners
133
- > .btn:not(:last-child):not(.dropdown-toggle),
134
- > .btn-group:not(:last-child) > .btn {
135
- @include border-bottom-radius(0);
136
- }
137
-
138
- > .btn ~ .btn,
139
- > .btn-group:not(:first-child) > .btn {
140
- @include border-top-radius(0);
141
- }
142
- }
@@ -1,186 +0,0 @@
1
- //
2
- // Base styles
3
- //
4
-
5
- .btn {
6
- // scss-docs-start btn-css-vars
7
- --#{$prefix}btn-padding-x: #{$btn-padding-x};
8
- --#{$prefix}btn-padding-y: #{$btn-padding-y};
9
- --#{$prefix}btn-font-family: #{$btn-font-family};
10
- @include rfs($btn-font-size, --#{$prefix}btn-font-size);
11
- --#{$prefix}btn-font-weight: #{$btn-font-weight};
12
- --#{$prefix}btn-line-height: #{$btn-line-height};
13
- --#{$prefix}btn-color: #{$body-color};
14
- --#{$prefix}btn-bg: transparent;
15
- --#{$prefix}btn-border-width: #{$btn-border-width};
16
- --#{$prefix}btn-border-color: transparent;
17
- --#{$prefix}btn-border-radius: #{$btn-border-radius};
18
- --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
19
- --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
20
- --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
21
- // scss-docs-end btn-css-vars
22
-
23
- display: inline-block;
24
- padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
25
- font-family: var(--#{$prefix}btn-font-family);
26
- @include font-size(var(--#{$prefix}btn-font-size));
27
- font-weight: var(--#{$prefix}btn-font-weight);
28
- line-height: var(--#{$prefix}btn-line-height);
29
- color: var(--#{$prefix}btn-color);
30
- text-align: center;
31
- text-decoration: if($link-decoration == none, null, none);
32
- white-space: $btn-white-space;
33
- vertical-align: middle;
34
- cursor: if($enable-button-pointers, pointer, null);
35
- user-select: none;
36
- border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
37
- @include border-radius(var(--#{$prefix}btn-border-radius));
38
- @include gradient-bg(var(--#{$prefix}btn-bg));
39
- @include box-shadow(var(--#{$prefix}btn-box-shadow));
40
- @include transition($btn-transition);
41
-
42
- &:hover {
43
- color: var(--#{$prefix}btn-hover-color);
44
- text-decoration: if($link-hover-decoration == underline, none, null);
45
- background-color: var(--#{$prefix}btn-hover-bg);
46
- border-color: var(--#{$prefix}btn-hover-border-color);
47
- }
48
-
49
- .btn-check:focus + &,
50
- &:focus {
51
- color: var(--#{$prefix}btn-hover-color);
52
- @include gradient-bg(var(--#{$prefix}btn-hover-bg));
53
- border-color: var(--#{$prefix}btn-hover-border-color);
54
- outline: 0;
55
- // Avoid using mixin so we can pass custom focus shadow properly
56
- @if $enable-shadows {
57
- box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
58
- } @else {
59
- box-shadow: var(--#{$prefix}btn-focus-box-shadow);
60
- }
61
- }
62
-
63
- .btn-check:checked + &,
64
- .btn-check:active + &,
65
- &:active,
66
- &.active,
67
- &.show {
68
- color: var(--#{$prefix}btn-active-color);
69
- background-color: var(--#{$prefix}btn-active-bg);
70
- // Remove CSS gradients if they're enabled
71
- background-image: if($enable-gradients, none, null);
72
- border-color: var(--#{$prefix}btn-active-border-color);
73
- @include box-shadow(var(--#{$prefix}btn-active-shadow));
74
-
75
- &:focus {
76
- // Avoid using mixin so we can pass custom focus shadow properly
77
- @if $enable-shadows {
78
- box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
79
- } @else {
80
- box-shadow: var(--#{$prefix}btn-focus-box-shadow);
81
- }
82
- }
83
- }
84
-
85
- &:disabled,
86
- &.disabled,
87
- fieldset:disabled & {
88
- color: var(--#{$prefix}btn-disabled-color);
89
- pointer-events: none;
90
- background-color: var(--#{$prefix}btn-disabled-bg);
91
- background-image: if($enable-gradients, none, null);
92
- border-color: var(--#{$prefix}btn-disabled-border-color);
93
- opacity: var(--#{$prefix}btn-disabled-opacity);
94
- @include box-shadow(none);
95
- }
96
- }
97
-
98
-
99
- //
100
- // Alternate buttons
101
- //
102
-
103
- // scss-docs-start btn-variant-loops
104
- @each $color, $value in $theme-colors {
105
- .btn-#{$color} {
106
- @if $color == "light" {
107
- @include button-variant(
108
- $value,
109
- $value,
110
- $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
111
- $hover-border: shade-color($value, $btn-hover-border-shade-amount),
112
- $active-background: shade-color($value, $btn-active-bg-shade-amount),
113
- $active-border: shade-color($value, $btn-active-border-shade-amount)
114
- );
115
- } @else if $color == "dark" {
116
- @include button-variant(
117
- $value,
118
- $value,
119
- $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
120
- $hover-border: tint-color($value, $btn-hover-border-tint-amount),
121
- $active-background: tint-color($value, $btn-active-bg-tint-amount),
122
- $active-border: tint-color($value, $btn-active-border-tint-amount)
123
- );
124
- } @else {
125
- @include button-variant($value, $value);
126
- }
127
- }
128
- }
129
-
130
- @each $color, $value in $theme-colors {
131
- .btn-outline-#{$color} {
132
- @include button-outline-variant($value);
133
- }
134
- }
135
- // scss-docs-end btn-variant-loops
136
-
137
-
138
- //
139
- // Link buttons
140
- //
141
-
142
- // Make a button look and behave like a link
143
- .btn-link {
144
- --#{$prefix}btn-font-weight: #{$font-weight-normal};
145
- --#{$prefix}btn-color: #{$btn-link-color};
146
- --#{$prefix}btn-bg: transparent;
147
- --#{$prefix}btn-border-color: transparent;
148
- --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
149
- --#{$prefix}btn-hover-border-color: transparent;
150
- --#{$prefix}btn-active-color: #{$btn-link-hover-color};
151
- --#{$prefix}btn-active-border-color: transparent;
152
- --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
153
- --#{$prefix}btn-disabled-border-color: transparent;
154
- --#{$prefix}btn-box-shadow: none;
155
- --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
156
-
157
- text-decoration: $link-decoration;
158
-
159
- &:hover,
160
- &:focus {
161
- text-decoration: $link-hover-decoration;
162
- }
163
-
164
- &:focus {
165
- color: var(--#{$prefix}btn-color);
166
- }
167
-
168
- &:hover {
169
- color: var(--#{$prefix}btn-hover-color);
170
- }
171
-
172
- // No need for an active state here
173
- }
174
-
175
-
176
- //
177
- // Button Sizes
178
- //
179
-
180
- .btn-lg {
181
- @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
182
- }
183
-
184
- .btn-sm {
185
- @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
186
- }
@@ -1,234 +0,0 @@
1
- //
2
- // Base styles
3
- //
4
-
5
- .card {
6
- // scss-docs-start card-css-vars
7
- --#{$prefix}card-spacer-y: #{$card-spacer-y};
8
- --#{$prefix}card-spacer-x: #{$card-spacer-x};
9
- --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
10
- --#{$prefix}card-border-width: #{$card-border-width};
11
- --#{$prefix}card-border-color: #{$card-border-color};
12
- --#{$prefix}card-border-radius: #{$card-border-radius};
13
- --#{$prefix}card-box-shadow: #{$card-box-shadow};
14
- --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
15
- --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
16
- --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
17
- --#{$prefix}card-cap-bg: #{$card-cap-bg};
18
- --#{$prefix}card-cap-color: #{$card-cap-color};
19
- --#{$prefix}card-height: #{$card-height};
20
- --#{$prefix}card-color: #{$card-color};
21
- --#{$prefix}card-bg: #{$card-bg};
22
- --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
23
- --#{$prefix}card-group-margin: #{$card-group-margin};
24
- // scss-docs-end card-css-vars
25
-
26
- position: relative;
27
- display: flex;
28
- flex-direction: column;
29
- min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
30
- height: var(--#{$prefix}card-height);
31
- word-wrap: break-word;
32
- background-color: var(--#{$prefix}card-bg);
33
- background-clip: border-box;
34
- border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
35
- @include border-radius(var(--#{$prefix}card-border-radius));
36
- @include box-shadow(var(--#{$prefix}card-box-shadow));
37
-
38
- > hr {
39
- margin-right: 0;
40
- margin-left: 0;
41
- }
42
-
43
- > .list-group {
44
- border-top: inherit;
45
- border-bottom: inherit;
46
-
47
- &:first-child {
48
- border-top-width: 0;
49
- @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
50
- }
51
-
52
- &:last-child {
53
- border-bottom-width: 0;
54
- @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
55
- }
56
- }
57
-
58
- // Due to specificity of the above selector (`.card > .list-group`), we must
59
- // use a child selector here to prevent double borders.
60
- > .card-header + .list-group,
61
- > .list-group + .card-footer {
62
- border-top: 0;
63
- }
64
- }
65
-
66
- .card-body {
67
- // Enable `flex-grow: 1` for decks and groups so that card blocks take up
68
- // as much space as possible, ensuring footers are aligned to the bottom.
69
- flex: 1 1 auto;
70
- padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
71
- color: var(--#{$prefix}card-color);
72
- }
73
-
74
- .card-title {
75
- margin-bottom: var(--#{$prefix}card-title-spacer-y);
76
- }
77
-
78
- .card-subtitle {
79
- margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
80
- margin-bottom: 0;
81
- }
82
-
83
- .card-text:last-child {
84
- margin-bottom: 0;
85
- }
86
-
87
- .card-link {
88
- &:hover {
89
- text-decoration: if($link-hover-decoration == underline, none, null);
90
- }
91
-
92
- + .card-link {
93
- margin-left: var(--#{$prefix}card-spacer-x);
94
- }
95
- }
96
-
97
- //
98
- // Optional textual caps
99
- //
100
-
101
- .card-header {
102
- padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
103
- margin-bottom: 0; // Removes the default margin-bottom of <hN>
104
- color: var(--#{$prefix}card-cap-color);
105
- background-color: var(--#{$prefix}card-cap-bg);
106
- border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
107
-
108
- &:first-child {
109
- @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
110
- }
111
- }
112
-
113
- .card-footer {
114
- padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
115
- color: var(--#{$prefix}card-cap-color);
116
- background-color: var(--#{$prefix}card-cap-bg);
117
- border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
118
-
119
- &:last-child {
120
- @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
121
- }
122
- }
123
-
124
-
125
- //
126
- // Header navs
127
- //
128
-
129
- .card-header-tabs {
130
- margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
131
- margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
132
- margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
133
- border-bottom: 0;
134
-
135
- .nav-link.active {
136
- background-color: var(--#{$prefix}card-bg);
137
- border-bottom-color: var(--#{$prefix}card-bg);
138
- }
139
- }
140
-
141
- .card-header-pills {
142
- margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
143
- margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
144
- }
145
-
146
- // Card image
147
- .card-img-overlay {
148
- position: absolute;
149
- top: 0;
150
- right: 0;
151
- bottom: 0;
152
- left: 0;
153
- padding: var(--#{$prefix}card-img-overlay-padding);
154
- @include border-radius(var(--#{$prefix}card-inner-border-radius));
155
- }
156
-
157
- .card-img,
158
- .card-img-top,
159
- .card-img-bottom {
160
- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
161
- }
162
-
163
- .card-img,
164
- .card-img-top {
165
- @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
166
- }
167
-
168
- .card-img,
169
- .card-img-bottom {
170
- @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
171
- }
172
-
173
-
174
- //
175
- // Card groups
176
- //
177
-
178
- .card-group {
179
- // The child selector allows nested `.card` within `.card-group`
180
- // to display properly.
181
- > .card {
182
- margin-bottom: var(--#{$prefix}card-group-margin);
183
- }
184
-
185
- @include media-breakpoint-up(sm) {
186
- display: flex;
187
- flex-flow: row wrap;
188
- // The child selector allows nested `.card` within `.card-group`
189
- // to display properly.
190
- > .card {
191
- // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
192
- flex: 1 0 0%;
193
- margin-bottom: 0;
194
-
195
- + .card {
196
- margin-left: 0;
197
- border-left: 0;
198
- }
199
-
200
- // Handle rounded corners
201
- @if $enable-rounded {
202
- &:not(:last-child) {
203
- @include border-end-radius(0);
204
-
205
- .card-img-top,
206
- .card-header {
207
- // stylelint-disable-next-line property-disallowed-list
208
- border-top-right-radius: 0;
209
- }
210
- .card-img-bottom,
211
- .card-footer {
212
- // stylelint-disable-next-line property-disallowed-list
213
- border-bottom-right-radius: 0;
214
- }
215
- }
216
-
217
- &:not(:first-child) {
218
- @include border-start-radius(0);
219
-
220
- .card-img-top,
221
- .card-header {
222
- // stylelint-disable-next-line property-disallowed-list
223
- border-top-left-radius: 0;
224
- }
225
- .card-img-bottom,
226
- .card-footer {
227
- // stylelint-disable-next-line property-disallowed-list
228
- border-bottom-left-radius: 0;
229
- }
230
- }
231
- }
232
- }
233
- }
234
- }