@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,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
- }