bulma-clean-theme 0.14.0 → 1.0.0.beta.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (191) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +5 -0
  3. data/_includes/callouts.html +12 -5
  4. data/_includes/cookie-banner.html +1 -1
  5. data/_includes/hero.html +5 -3
  6. data/_includes/showcase.html +8 -6
  7. data/_layouts/default.html +1 -0
  8. data/_layouts/post.html +7 -3
  9. data/_sass/_block-list.scss +130 -0
  10. data/_sass/_main.scss +3 -2
  11. data/node_modules/.package-lock.json +204 -9
  12. data/node_modules/bulma/LICENSE +1 -1
  13. data/node_modules/bulma/README.md +56 -52
  14. data/node_modules/bulma/bulma.scss +4 -0
  15. data/node_modules/bulma/css/bulma.css +19282 -8696
  16. data/node_modules/bulma/css/bulma.css.map +1 -1
  17. data/node_modules/bulma/css/bulma.min.css +3 -1
  18. data/node_modules/bulma/css/versions/bulma-no-dark-mode.min.css +3 -0
  19. data/node_modules/bulma/css/versions/bulma-no-dark-mode.min.css.map +1 -0
  20. data/node_modules/bulma/css/versions/bulma-no-helpers-prefixed.min.css +3 -0
  21. data/node_modules/bulma/css/versions/bulma-no-helpers-prefixed.min.css.map +1 -0
  22. data/node_modules/bulma/css/versions/bulma-no-helpers.min.css +3 -0
  23. data/node_modules/bulma/css/versions/bulma-no-helpers.min.css.map +1 -0
  24. data/node_modules/bulma/css/versions/bulma-prefixed.min.css +3 -0
  25. data/node_modules/bulma/css/versions/bulma-prefixed.min.css.map +1 -0
  26. data/node_modules/bulma/package.json +25 -20
  27. data/node_modules/bulma/sass/_index.scss +10 -0
  28. data/node_modules/bulma/sass/base/_index.scss +6 -0
  29. data/node_modules/bulma/sass/base/animations.scss +15 -0
  30. data/node_modules/bulma/sass/base/generic.scss +239 -0
  31. data/node_modules/bulma/sass/base/minireset.scss +92 -0
  32. data/node_modules/bulma/sass/base/skeleton.scss +126 -0
  33. data/node_modules/bulma/sass/components/_index.scss +13 -0
  34. data/node_modules/bulma/sass/components/breadcrumb.scss +139 -0
  35. data/node_modules/bulma/sass/components/card.scss +162 -0
  36. data/node_modules/bulma/sass/components/dropdown.scss +188 -0
  37. data/node_modules/bulma/sass/components/menu.scss +165 -0
  38. data/node_modules/bulma/sass/components/message.scss +183 -0
  39. data/node_modules/bulma/sass/components/modal.scss +164 -0
  40. data/node_modules/bulma/sass/components/navbar.scss +788 -0
  41. data/node_modules/bulma/sass/components/pagination.scss +379 -0
  42. data/node_modules/bulma/sass/components/panel.scss +218 -0
  43. data/node_modules/bulma/sass/components/tabs.scss +273 -0
  44. data/node_modules/bulma/sass/elements/_index.scss +16 -0
  45. data/node_modules/bulma/sass/elements/block.scss +6 -0
  46. data/node_modules/bulma/sass/elements/box.scss +59 -0
  47. data/node_modules/bulma/sass/elements/button.scss +640 -0
  48. data/node_modules/bulma/sass/elements/content.scss +283 -0
  49. data/node_modules/bulma/sass/elements/delete.scss +6 -0
  50. data/node_modules/bulma/sass/elements/icon.scss +67 -0
  51. data/node_modules/bulma/sass/elements/image.scss +62 -0
  52. data/node_modules/bulma/sass/elements/loader.scss +15 -0
  53. data/node_modules/bulma/sass/elements/notification.scss +105 -0
  54. data/node_modules/bulma/sass/elements/progress.scss +115 -0
  55. data/node_modules/bulma/sass/elements/table.scss +261 -0
  56. data/node_modules/bulma/sass/elements/tag.scss +219 -0
  57. data/node_modules/bulma/sass/elements/title.scss +128 -0
  58. data/node_modules/bulma/sass/form/_index.scss +9 -0
  59. data/node_modules/bulma/sass/form/checkbox-radio.scss +32 -0
  60. data/node_modules/bulma/sass/form/file.scss +330 -0
  61. data/node_modules/bulma/sass/form/input-textarea.scss +123 -0
  62. data/node_modules/bulma/sass/form/select.scss +143 -0
  63. data/node_modules/bulma/sass/form/shared.scss +172 -0
  64. data/node_modules/bulma/sass/form/tools.scss +341 -0
  65. data/node_modules/bulma/sass/grid/_index.scss +5 -0
  66. data/node_modules/bulma/sass/grid/columns-v2.scss +957 -0
  67. data/node_modules/bulma/sass/grid/columns.scss +877 -0
  68. data/node_modules/bulma/sass/grid/grid.scss +209 -0
  69. data/node_modules/bulma/sass/helpers/_index.scss +15 -0
  70. data/node_modules/bulma/sass/helpers/aspect-ratio.scss +10 -0
  71. data/node_modules/bulma/sass/helpers/border.scss +15 -0
  72. data/node_modules/bulma/sass/helpers/color.scss +364 -0
  73. data/node_modules/bulma/sass/helpers/flexbox.scss +62 -0
  74. data/node_modules/bulma/sass/helpers/float.scss +28 -0
  75. data/node_modules/bulma/sass/helpers/gap.scss +24 -0
  76. data/node_modules/bulma/sass/helpers/other.scss +19 -0
  77. data/node_modules/bulma/sass/helpers/overflow.scss +21 -0
  78. data/node_modules/bulma/sass/helpers/position.scss +19 -0
  79. data/node_modules/bulma/sass/helpers/spacing.scss +64 -0
  80. data/node_modules/bulma/sass/helpers/typography.scss +168 -0
  81. data/node_modules/bulma/sass/helpers/visibility.scss +221 -0
  82. data/node_modules/bulma/sass/layout/_index.scss +9 -0
  83. data/node_modules/bulma/sass/layout/container.scss +51 -0
  84. data/node_modules/bulma/sass/layout/footer.scss +23 -0
  85. data/node_modules/bulma/sass/layout/hero.scss +270 -0
  86. data/node_modules/bulma/sass/layout/level.scss +107 -0
  87. data/node_modules/bulma/sass/layout/media.scss +106 -0
  88. data/node_modules/bulma/sass/layout/section.scss +34 -0
  89. data/node_modules/bulma/sass/themes/_index.scss +35 -0
  90. data/node_modules/bulma/sass/themes/dark.scss +56 -0
  91. data/node_modules/bulma/sass/themes/light.scss +145 -0
  92. data/node_modules/bulma/sass/themes/setup.scss +174 -0
  93. data/node_modules/bulma/sass/utilities/_index.scss +7 -0
  94. data/node_modules/bulma/sass/utilities/controls.scss +85 -0
  95. data/node_modules/bulma/sass/utilities/css-variables.scss +425 -0
  96. data/node_modules/bulma/sass/utilities/derived-variables.scss +112 -0
  97. data/node_modules/bulma/sass/utilities/extends.scss +34 -0
  98. data/node_modules/bulma/sass/utilities/functions.scss +258 -0
  99. data/node_modules/bulma/sass/utilities/initial-variables.scss +155 -0
  100. data/node_modules/bulma/sass/utilities/mixins.scss +460 -0
  101. data/node_modules/bulma/versions/bulma-no-dark-mode.scss +19 -0
  102. data/node_modules/bulma/versions/bulma-no-helpers-prefixed.scss +13 -0
  103. data/node_modules/bulma/versions/bulma-no-helpers.scss +11 -0
  104. data/node_modules/bulma/versions/bulma-prefixed.scss +6 -0
  105. data/package-lock.json +338 -18
  106. data/package.json +1 -2
  107. metadata +94 -90
  108. data/node_modules/bulma/bulma.sass +0 -10
  109. data/node_modules/bulma/css/bulma-rtl.css +0 -11851
  110. data/node_modules/bulma/css/bulma-rtl.css.map +0 -1
  111. data/node_modules/bulma/css/bulma-rtl.min.css +0 -1
  112. data/node_modules/bulma/sass/base/_all.sass +0 -6
  113. data/node_modules/bulma/sass/base/animations.sass +0 -5
  114. data/node_modules/bulma/sass/base/generic.sass +0 -145
  115. data/node_modules/bulma/sass/base/helpers.sass +0 -1
  116. data/node_modules/bulma/sass/base/minireset.sass +0 -79
  117. data/node_modules/bulma/sass/components/_all.sass +0 -15
  118. data/node_modules/bulma/sass/components/breadcrumb.sass +0 -77
  119. data/node_modules/bulma/sass/components/card.sass +0 -103
  120. data/node_modules/bulma/sass/components/dropdown.sass +0 -83
  121. data/node_modules/bulma/sass/components/level.sass +0 -79
  122. data/node_modules/bulma/sass/components/media.sass +0 -59
  123. data/node_modules/bulma/sass/components/menu.sass +0 -59
  124. data/node_modules/bulma/sass/components/message.sass +0 -101
  125. data/node_modules/bulma/sass/components/modal.sass +0 -117
  126. data/node_modules/bulma/sass/components/navbar.sass +0 -446
  127. data/node_modules/bulma/sass/components/pagination.sass +0 -167
  128. data/node_modules/bulma/sass/components/panel.sass +0 -121
  129. data/node_modules/bulma/sass/components/tabs.sass +0 -176
  130. data/node_modules/bulma/sass/elements/_all.sass +0 -16
  131. data/node_modules/bulma/sass/elements/box.sass +0 -26
  132. data/node_modules/bulma/sass/elements/button.sass +0 -357
  133. data/node_modules/bulma/sass/elements/container.sass +0 -29
  134. data/node_modules/bulma/sass/elements/content.sass +0 -162
  135. data/node_modules/bulma/sass/elements/form.sass +0 -1
  136. data/node_modules/bulma/sass/elements/icon.sass +0 -46
  137. data/node_modules/bulma/sass/elements/image.sass +0 -73
  138. data/node_modules/bulma/sass/elements/notification.sass +0 -52
  139. data/node_modules/bulma/sass/elements/other.sass +0 -31
  140. data/node_modules/bulma/sass/elements/progress.sass +0 -73
  141. data/node_modules/bulma/sass/elements/table.sass +0 -134
  142. data/node_modules/bulma/sass/elements/tag.sass +0 -140
  143. data/node_modules/bulma/sass/elements/title.sass +0 -70
  144. data/node_modules/bulma/sass/form/_all.sass +0 -9
  145. data/node_modules/bulma/sass/form/checkbox-radio.sass +0 -22
  146. data/node_modules/bulma/sass/form/file.sass +0 -184
  147. data/node_modules/bulma/sass/form/input-textarea.sass +0 -66
  148. data/node_modules/bulma/sass/form/select.sass +0 -88
  149. data/node_modules/bulma/sass/form/shared.sass +0 -60
  150. data/node_modules/bulma/sass/form/tools.sass +0 -215
  151. data/node_modules/bulma/sass/grid/_all.sass +0 -5
  152. data/node_modules/bulma/sass/grid/columns.sass +0 -513
  153. data/node_modules/bulma/sass/grid/tiles.sass +0 -36
  154. data/node_modules/bulma/sass/helpers/_all.sass +0 -12
  155. data/node_modules/bulma/sass/helpers/color.sass +0 -39
  156. data/node_modules/bulma/sass/helpers/flexbox.sass +0 -35
  157. data/node_modules/bulma/sass/helpers/float.sass +0 -10
  158. data/node_modules/bulma/sass/helpers/other.sass +0 -14
  159. data/node_modules/bulma/sass/helpers/overflow.sass +0 -2
  160. data/node_modules/bulma/sass/helpers/position.sass +0 -7
  161. data/node_modules/bulma/sass/helpers/spacing.sass +0 -31
  162. data/node_modules/bulma/sass/helpers/typography.sass +0 -103
  163. data/node_modules/bulma/sass/helpers/visibility.sass +0 -122
  164. data/node_modules/bulma/sass/layout/_all.sass +0 -6
  165. data/node_modules/bulma/sass/layout/footer.sass +0 -11
  166. data/node_modules/bulma/sass/layout/hero.sass +0 -153
  167. data/node_modules/bulma/sass/layout/section.sass +0 -17
  168. data/node_modules/bulma/sass/utilities/_all.sass +0 -9
  169. data/node_modules/bulma/sass/utilities/animations.sass +0 -1
  170. data/node_modules/bulma/sass/utilities/controls.sass +0 -49
  171. data/node_modules/bulma/sass/utilities/derived-variables.sass +0 -114
  172. data/node_modules/bulma/sass/utilities/extends.sass +0 -25
  173. data/node_modules/bulma/sass/utilities/functions.sass +0 -135
  174. data/node_modules/bulma/sass/utilities/initial-variables.sass +0 -79
  175. data/node_modules/bulma/sass/utilities/mixins.sass +0 -303
  176. data/node_modules/bulma-block-list/.editorconfig +0 -15
  177. data/node_modules/bulma-block-list/.github/FUNDING.yml +0 -12
  178. data/node_modules/bulma-block-list/LICENSE.txt +0 -21
  179. data/node_modules/bulma-block-list/README.md +0 -32
  180. data/node_modules/bulma-block-list/changelog.txt +0 -20
  181. data/node_modules/bulma-block-list/docs/Gemfile +0 -3
  182. data/node_modules/bulma-block-list/docs/_config.yml +0 -17
  183. data/node_modules/bulma-block-list/docs/_data/menu.yaml +0 -24
  184. data/node_modules/bulma-block-list/docs/_sass/_block-list.scss +0 -156
  185. data/node_modules/bulma-block-list/docs/_sass/_main.scss +0 -20
  186. data/node_modules/bulma-block-list/docs/assets/css/app.scss +0 -7
  187. data/node_modules/bulma-block-list/docs/favicon.ico +0 -0
  188. data/node_modules/bulma-block-list/docs/index.html +0 -359
  189. data/node_modules/bulma-block-list/package.json +0 -22
  190. data/node_modules/bulma-block-list/src/block-list.scss +0 -156
  191. data/node_modules/bulma-block-list/src/demo.scss +0 -3
@@ -0,0 +1,165 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/extends";
4
+ @use "../utilities/mixins" as mx;
5
+
6
+ $menu-item-h: cv.getVar("scheme-h");
7
+ $menu-item-s: cv.getVar("scheme-s");
8
+ $menu-item-l: cv.getVar("scheme-main-l");
9
+ $menu-item-background-l: cv.getVar("scheme-main-l");
10
+ $menu-item-background-l-delta: 0%;
11
+ $menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
12
+ $menu-item-active-background-l-delta: cv.getVar("active-background-l-delta");
13
+ $menu-item-color-l: cv.getVar("text-l");
14
+ $menu-item-radius: cv.getVar("radius-small") !default;
15
+ $menu-item-selected-h: cv.getVar("link-h");
16
+ $menu-item-selected-s: cv.getVar("link-s");
17
+ $menu-item-selected-l: cv.getVar("link-l");
18
+ $menu-item-selected-background-l: cv.getVar("link-l");
19
+ $menu-item-selected-color-l: cv.getVar("link-invert-l");
20
+
21
+ $menu-list-border-left: 1px solid cv.getVar("border") !default;
22
+ $menu-list-line-height: 1.25 !default;
23
+ $menu-list-link-padding: 0.5em 0.75em !default;
24
+ $menu-nested-list-margin: 0.75em !default;
25
+ $menu-nested-list-padding-left: 0.75em !default;
26
+
27
+ $menu-label-color: cv.getVar("text-weak") !default;
28
+ $menu-label-font-size: 0.75em !default;
29
+ $menu-label-letter-spacing: 0.1em !default;
30
+ $menu-label-spacing: 1em !default;
31
+
32
+ .#{iv.$class-prefix}menu {
33
+ @include cv.register-vars(
34
+ (
35
+ "menu-item-h": #{$menu-item-h},
36
+ "menu-item-s": #{$menu-item-s},
37
+ "menu-item-l": #{$menu-item-l},
38
+ "menu-item-background-l": #{$menu-item-background-l},
39
+ "menu-item-background-l-delta": #{$menu-item-background-l-delta},
40
+ "menu-item-hover-background-l-delta": #{$menu-item-hover-background-l-delta},
41
+ "menu-item-active-background-l-delta": #{$menu-item-active-background-l-delta},
42
+ "menu-item-color-l": #{$menu-item-color-l},
43
+ "menu-item-radius": #{$menu-item-radius},
44
+ "menu-item-selected-h": #{$menu-item-selected-h},
45
+ "menu-item-selected-s": #{$menu-item-selected-s},
46
+ "menu-item-selected-l": #{$menu-item-selected-l},
47
+ "menu-item-selected-background-l": #{$menu-item-selected-background-l},
48
+ "menu-item-selected-color-l": #{$menu-item-selected-color-l},
49
+ "menu-list-border-left": #{$menu-list-border-left},
50
+ "menu-list-line-height": #{$menu-list-line-height},
51
+ "menu-list-link-padding": #{$menu-list-link-padding},
52
+ "menu-nested-list-margin": #{$menu-nested-list-margin},
53
+ "menu-nested-list-padding-left": #{$menu-nested-list-padding-left},
54
+ "menu-label-color": #{$menu-label-color},
55
+ "menu-label-font-size": #{$menu-label-font-size},
56
+ "menu-label-letter-spacing": #{$menu-label-letter-spacing},
57
+ "menu-label-spacing": #{$menu-label-spacing},
58
+ )
59
+ );
60
+ }
61
+
62
+ .#{iv.$class-prefix}menu {
63
+ font-size: cv.getVar("size-normal");
64
+
65
+ // Sizes
66
+ &.#{iv.$class-prefix}is-small {
67
+ font-size: cv.getVar("size-small");
68
+ }
69
+
70
+ &.#{iv.$class-prefix}is-medium {
71
+ font-size: cv.getVar("size-medium");
72
+ }
73
+
74
+ &.#{iv.$class-prefix}is-large {
75
+ font-size: cv.getVar("size-large");
76
+ }
77
+ }
78
+
79
+ .#{iv.$class-prefix}menu-list {
80
+ line-height: cv.getVar("menu-list-line-height");
81
+
82
+ a,
83
+ button,
84
+ .#{iv.$class-prefix}menu-item {
85
+ @extend %reset;
86
+ background-color: hsl(
87
+ #{cv.getVar("menu-item-h")},
88
+ #{cv.getVar("menu-item-s")},
89
+ calc(
90
+ #{cv.getVar("menu-item-background-l")} + #{cv.getVar(
91
+ "menu-item-background-l-delta"
92
+ )}
93
+ )
94
+ );
95
+ border-radius: cv.getVar("menu-item-radius");
96
+ color: hsl(
97
+ #{cv.getVar("menu-item-h")},
98
+ #{cv.getVar("menu-item-s")},
99
+ #{cv.getVar("menu-item-color-l")}
100
+ );
101
+ display: block;
102
+ padding: cv.getVar("menu-list-link-padding");
103
+ text-align: left;
104
+ width: 100%;
105
+
106
+ &:hover {
107
+ @include cv.register-vars(
108
+ (
109
+ "menu-item-background-l-delta": #{cv.getVar(
110
+ "menu-item-hover-background-l-delta"
111
+ )},
112
+ )
113
+ );
114
+ }
115
+
116
+ &:active {
117
+ @include cv.register-vars(
118
+ (
119
+ "menu-item-background-l-delta": #{cv.getVar(
120
+ "menu-item-active-background-l-delta"
121
+ )},
122
+ )
123
+ );
124
+ }
125
+
126
+ // Modifiers
127
+ &.#{iv.$class-prefix}is-active,
128
+ &.#{iv.$class-prefix}is-selected {
129
+ @include cv.register-vars(
130
+ (
131
+ "menu-item-h": #{cv.getVar("menu-item-selected-h")},
132
+ "menu-item-s": #{cv.getVar("menu-item-selected-s")},
133
+ "menu-item-l": #{cv.getVar("menu-item-selected-l")},
134
+ "menu-item-background-l": #{cv.getVar(
135
+ "menu-item-selected-background-l"
136
+ )},
137
+ "menu-item-color-l": #{cv.getVar("menu-item-selected-color-l")},
138
+ )
139
+ );
140
+ }
141
+ }
142
+
143
+ li {
144
+ ul {
145
+ border-inline-start: cv.getVar("menu-list-border-left");
146
+ margin: cv.getVar("menu-nested-list-margin");
147
+ padding-inline-start: cv.getVar("menu-nested-list-padding-left");
148
+ }
149
+ }
150
+ }
151
+
152
+ .#{iv.$class-prefix}menu-label {
153
+ color: cv.getVar("menu-label-color");
154
+ font-size: cv.getVar("menu-label-font-size");
155
+ letter-spacing: cv.getVar("menu-label-letter-spacing");
156
+ text-transform: uppercase;
157
+
158
+ &:not(:first-child) {
159
+ margin-top: cv.getVar("menu-label-spacing");
160
+ }
161
+
162
+ &:not(:last-child) {
163
+ margin-bottom: cv.getVar("menu-label-spacing");
164
+ }
165
+ }
@@ -0,0 +1,183 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/derived-variables" as dv;
3
+ @use "../utilities/initial-variables" as iv;
4
+ @use "../utilities/extends";
5
+ @use "../utilities/mixins" as mx;
6
+
7
+ $message-h: cv.getVar("scheme-h");
8
+ $message-s: cv.getVar("scheme-s");
9
+ $message-background-l: cv.getVar("background-l");
10
+ $message-border-l: cv.getVar("border-l");
11
+ $message-border-l-delta: -20% !default;
12
+ $message-border-style: solid;
13
+ $message-border-width: 0.25em;
14
+ $message-color-l: cv.getVar("text-l");
15
+ $message-header-background-l: cv.getVar("dark-l");
16
+ $message-header-color-l: cv.getVar("text-dark-invert-l");
17
+ $message-radius: cv.getVar("radius") !default;
18
+
19
+ $message-header-weight: cv.getVar("weight-semibold") !default;
20
+ $message-header-padding: 1em 1.25em !default;
21
+ $message-header-radius: cv.getVar("radius") !default;
22
+
23
+ $message-body-border-width: 0 0 0 4px !default;
24
+ $message-body-color: cv.getVar("text") !default;
25
+ $message-body-padding: 1.25em 1.5em !default;
26
+ $message-body-radius: cv.getVar("radius-small") !default;
27
+
28
+ $message-body-pre-code-background-color: transparent !default;
29
+
30
+ $message-header-body-border-width: 0 !default;
31
+ $message-colors: dv.$colors !default;
32
+
33
+ .#{iv.$class-prefix}message {
34
+ @include cv.register-vars(
35
+ (
36
+ "message-border-l-delta": #{$message-border-l-delta},
37
+ "message-radius": #{$message-radius},
38
+ "message-header-weight": #{$message-header-weight},
39
+ "message-header-padding": #{$message-header-padding},
40
+ "message-header-radius": #{$message-header-radius},
41
+ "message-body-border-width": #{$message-body-border-width},
42
+ "message-body-color": #{$message-body-color},
43
+ "message-body-padding": #{$message-body-padding},
44
+ "message-body-radius": #{$message-body-radius},
45
+ "message-body-pre-code-background-color": #{$message-body-pre-code-background-color},
46
+ "message-header-body-border-width": #{$message-header-body-border-width},
47
+ "message-h": #{$message-h},
48
+ "message-s": #{$message-s},
49
+ "message-background-l": #{$message-background-l},
50
+ "message-border-l": #{$message-border-l},
51
+ "message-border-style": #{$message-border-style},
52
+ "message-border-width": #{$message-border-width},
53
+ "message-color-l": #{$message-color-l},
54
+ "message-header-background-l": #{$message-header-background-l},
55
+ "message-header-color-l": #{$message-header-color-l},
56
+ )
57
+ );
58
+ }
59
+
60
+ .#{iv.$class-prefix}message {
61
+ @extend %block;
62
+ border-radius: cv.getVar("message-radius");
63
+ color: hsl(
64
+ #{cv.getVar("message-h")},
65
+ #{cv.getVar("message-s")},
66
+ #{cv.getVar("message-color-l")}
67
+ );
68
+ font-size: cv.getVar("size-normal");
69
+
70
+ strong {
71
+ color: currentColor;
72
+ }
73
+
74
+ a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}tag):not(
75
+ .#{iv.$class-prefix}dropdown-item
76
+ ) {
77
+ color: currentColor;
78
+ text-decoration: underline;
79
+ }
80
+
81
+ // Sizes
82
+ &.#{iv.$class-prefix}is-small {
83
+ font-size: cv.getVar("size-small");
84
+ }
85
+
86
+ &.#{iv.$class-prefix}is-medium {
87
+ font-size: cv.getVar("size-medium");
88
+ }
89
+
90
+ &.#{iv.$class-prefix}is-large {
91
+ font-size: cv.getVar("size-large");
92
+ }
93
+
94
+ // Colors
95
+ @each $name, $components in $message-colors {
96
+ &.#{iv.$class-prefix}is-#{$name} {
97
+ @include cv.register-vars(
98
+ (
99
+ "message-h": #{cv.getVar($name, "", "-h")},
100
+ "message-s": #{cv.getVar($name, "", "-s")},
101
+ "message-border-l":
102
+ calc(
103
+ #{cv.getVar($name, "", "-l")} + #{cv.getVar(
104
+ "message-border-l-delta"
105
+ )}
106
+ ),
107
+ "message-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
108
+ "message-header-background-l": #{cv.getVar($name, "", "-l")},
109
+ "message-header-color-l": #{cv.getVar($name, "", "-invert-l")},
110
+ )
111
+ );
112
+ }
113
+ }
114
+ }
115
+
116
+ .#{iv.$class-prefix}message-header {
117
+ align-items: center;
118
+ background-color: hsl(
119
+ #{cv.getVar("message-h")},
120
+ #{cv.getVar("message-s")},
121
+ #{cv.getVar("message-header-background-l")}
122
+ );
123
+ border-start-start-radius: cv.getVar("message-header-radius");
124
+ border-start-end-radius: cv.getVar("message-header-radius");
125
+ color: hsl(
126
+ #{cv.getVar("message-h")},
127
+ #{cv.getVar("message-s")},
128
+ #{cv.getVar("message-header-color-l")}
129
+ );
130
+ display: flex;
131
+ font-weight: cv.getVar("message-header-weight");
132
+ justify-content: space-between;
133
+ line-height: 1.25;
134
+ padding: cv.getVar("message-header-padding");
135
+ position: relative;
136
+
137
+ .#{iv.$class-prefix}delete {
138
+ flex-grow: 0;
139
+ flex-shrink: 0;
140
+ margin-inline-start: 0.75em;
141
+ }
142
+
143
+ & + .#{iv.$class-prefix}message-body {
144
+ border-width: cv.getVar("message-header-body-border-width");
145
+ border-start-start-radius: 0;
146
+ border-start-end-radius: 0;
147
+ }
148
+ }
149
+
150
+ .#{iv.$class-prefix}message-body {
151
+ background-color: hsl(
152
+ #{cv.getVar("message-h")},
153
+ #{cv.getVar("message-s")},
154
+ #{cv.getVar("message-background-l")}
155
+ );
156
+ border-inline-start-color: hsl(
157
+ #{cv.getVar("message-h")},
158
+ #{cv.getVar("message-s")},
159
+ #{cv.getVar("message-border-l")}
160
+ );
161
+ border-inline-start-style: #{cv.getVar("message-border-style")};
162
+ border-inline-start-width: #{cv.getVar("message-border-width")};
163
+ border-radius: cv.getVar("message-body-radius");
164
+ padding: cv.getVar("message-body-padding");
165
+
166
+ code,
167
+ pre {
168
+ background-color: hsl(
169
+ #{cv.getVar("message-h")},
170
+ #{cv.getVar("message-s")},
171
+ #{cv.getVar("message-header-color-l")}
172
+ );
173
+ color: hsl(
174
+ #{cv.getVar("message-h")},
175
+ #{cv.getVar("message-s")},
176
+ #{cv.getVar("message-header-background-l")}
177
+ );
178
+ }
179
+
180
+ pre code {
181
+ background-color: cv.getVar("message-body-pre-code-background-color");
182
+ }
183
+ }
@@ -0,0 +1,164 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/derived-variables" as dv;
3
+ @use "../utilities/initial-variables" as iv;
4
+ @use "../utilities/extends";
5
+ @use "../utilities/mixins" as mx;
6
+
7
+ $modal-z: 40 !default;
8
+
9
+ $modal-background-background-color: hsla(
10
+ #{cv.getVar("scheme-h")},
11
+ #{cv.getVar("scheme-s")},
12
+ #{cv.getVar("scheme-invert-l")},
13
+ 0.86
14
+ ) !default;
15
+
16
+ $modal-content-width: 40rem !default;
17
+ $modal-content-margin-mobile: 1.25rem !default;
18
+ $modal-content-spacing-mobile: 10rem !default;
19
+ $modal-content-spacing-tablet: 2.5rem !default;
20
+
21
+ $modal-close-dimensions: 2.5rem !default;
22
+ $modal-close-right: 1.25rem !default;
23
+ $modal-close-top: 1.25rem !default;
24
+
25
+ $modal-card-spacing: 2.5rem !default;
26
+
27
+ $modal-card-head-background-color: cv.getVar("scheme-main") !default;
28
+ $modal-card-head-padding: 2rem !default;
29
+ $modal-card-head-radius: cv.getVar("radius-large") !default;
30
+
31
+ $modal-card-title-color: cv.getVar("text-strong") !default;
32
+ $modal-card-title-line-height: 1 !default;
33
+ $modal-card-title-size: cv.getVar("size-4") !default;
34
+
35
+ $modal-card-foot-background-color: cv.getVar("scheme-main-bis") !default;
36
+ $modal-card-foot-radius: cv.getVar("radius-large") !default;
37
+
38
+ $modal-card-body-background-color: cv.getVar("scheme-main") !default;
39
+ $modal-card-body-padding: 2rem !default;
40
+
41
+ $modal-breakpoint: iv.$tablet !default;
42
+
43
+ .#{iv.$class-prefix}modal {
44
+ @include cv.register-vars(
45
+ (
46
+ "modal-z": #{$modal-z},
47
+ "modal-background-background-color": #{$modal-background-background-color},
48
+ "modal-content-width": #{$modal-content-width},
49
+ "modal-content-margin-mobile": #{$modal-content-margin-mobile},
50
+ "modal-content-spacing-mobile": #{$modal-content-spacing-mobile},
51
+ "modal-content-spacing-tablet": #{$modal-content-spacing-tablet},
52
+ "modal-close-dimensions": #{$modal-close-dimensions},
53
+ "modal-close-right": #{$modal-close-right},
54
+ "modal-close-top": #{$modal-close-top},
55
+ "modal-card-spacing": #{$modal-card-spacing},
56
+ "modal-card-head-background-color": #{$modal-card-head-background-color},
57
+ "modal-card-head-padding": #{$modal-card-head-padding},
58
+ "modal-card-head-radius": #{$modal-card-head-radius},
59
+ "modal-card-title-color": #{$modal-card-title-color},
60
+ "modal-card-title-line-height": #{$modal-card-title-line-height},
61
+ "modal-card-title-size": #{$modal-card-title-size},
62
+ "modal-card-foot-background-color": #{$modal-card-foot-background-color},
63
+ "modal-card-foot-radius": #{$modal-card-foot-radius},
64
+ "modal-card-body-background-color": #{$modal-card-body-background-color},
65
+ "modal-card-body-padding": #{$modal-card-body-padding},
66
+ )
67
+ );
68
+ }
69
+
70
+ .#{iv.$class-prefix}modal {
71
+ @extend %overlay;
72
+
73
+ align-items: center;
74
+ display: none;
75
+ flex-direction: column;
76
+ justify-content: center;
77
+ overflow: hidden;
78
+ position: fixed;
79
+ z-index: cv.getVar("modal-z");
80
+
81
+ // Modifiers
82
+ &.#{iv.$class-prefix}is-active {
83
+ display: flex;
84
+ }
85
+ }
86
+
87
+ .#{iv.$class-prefix}modal-background {
88
+ @extend %overlay;
89
+ background-color: cv.getVar("modal-background-background-color");
90
+ }
91
+
92
+ .#{iv.$class-prefix}modal-content,
93
+ .#{iv.$class-prefix}modal-card {
94
+ margin: 0 cv.getVar("modal-content-margin-mobile");
95
+ max-height: calc(100vh - #{cv.getVar("modal-content-spacing-mobile")});
96
+ overflow: auto;
97
+ position: relative;
98
+ width: 100%;
99
+
100
+ // Responsiveness
101
+ @include mx.from($modal-breakpoint) {
102
+ margin: 0 auto;
103
+ max-height: calc(100vh - #{cv.getVar("modal-content-spacing-tablet")});
104
+ width: cv.getVar("modal-content-width");
105
+ }
106
+ }
107
+
108
+ .#{iv.$class-prefix}modal-close {
109
+ @extend %delete;
110
+ background: none;
111
+ height: cv.getVar("modal-close-dimensions");
112
+ inset-inline-end: cv.getVar("modal-close-right");
113
+ position: fixed;
114
+ top: cv.getVar("modal-close-top");
115
+ width: cv.getVar("modal-close-dimensions");
116
+ }
117
+
118
+ .#{iv.$class-prefix}modal-card {
119
+ display: flex;
120
+ flex-direction: column;
121
+ max-height: calc(100vh - #{cv.getVar("modal-card-spacing")});
122
+ overflow: hidden;
123
+ overflow-y: visible;
124
+ }
125
+
126
+ .#{iv.$class-prefix}modal-card-head,
127
+ .#{iv.$class-prefix}modal-card-foot {
128
+ align-items: center;
129
+ display: flex;
130
+ flex-shrink: 0;
131
+ justify-content: flex-start;
132
+ padding: cv.getVar("modal-card-head-padding");
133
+ position: relative;
134
+ }
135
+
136
+ .#{iv.$class-prefix}modal-card-head {
137
+ background-color: cv.getVar("modal-card-head-background-color");
138
+ border-start-start-radius: cv.getVar("modal-card-head-radius");
139
+ border-start-end-radius: cv.getVar("modal-card-head-radius");
140
+ box-shadow: cv.getVar("shadow");
141
+ }
142
+
143
+ .#{iv.$class-prefix}modal-card-title {
144
+ color: cv.getVar("modal-card-title-color");
145
+ flex-grow: 1;
146
+ flex-shrink: 0;
147
+ font-size: cv.getVar("modal-card-title-size");
148
+ line-height: cv.getVar("modal-card-title-line-height");
149
+ }
150
+
151
+ .#{iv.$class-prefix}modal-card-foot {
152
+ background-color: cv.getVar("modal-card-foot-background-color");
153
+ border-end-start-radius: cv.getVar("modal-card-foot-radius");
154
+ border-end-end-radius: cv.getVar("modal-card-foot-radius");
155
+ }
156
+
157
+ .#{iv.$class-prefix}modal-card-body {
158
+ @include mx.overflow-touch;
159
+ background-color: cv.getVar("modal-card-body-background-color");
160
+ flex-grow: 1;
161
+ flex-shrink: 1;
162
+ overflow: auto;
163
+ padding: cv.getVar("modal-card-body-padding");
164
+ }