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,92 @@
1
+ /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
2
+ // Blocks
3
+ html,
4
+ body,
5
+ p,
6
+ ol,
7
+ ul,
8
+ li,
9
+ dl,
10
+ dt,
11
+ dd,
12
+ blockquote,
13
+ figure,
14
+ fieldset,
15
+ legend,
16
+ textarea,
17
+ pre,
18
+ iframe,
19
+ hr,
20
+ h1,
21
+ h2,
22
+ h3,
23
+ h4,
24
+ h5,
25
+ h6 {
26
+ margin: 0;
27
+ padding: 0;
28
+ }
29
+
30
+ // Headings
31
+ h1,
32
+ h2,
33
+ h3,
34
+ h4,
35
+ h5,
36
+ h6 {
37
+ font-size: 100%;
38
+ font-weight: normal;
39
+ }
40
+
41
+ // List
42
+ ul {
43
+ list-style: none;
44
+ }
45
+
46
+ // Form
47
+ button,
48
+ input,
49
+ select,
50
+ textarea {
51
+ margin: 0;
52
+ }
53
+
54
+ // Box sizing
55
+ html {
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ * {
60
+ &,
61
+ &::before,
62
+ &::after {
63
+ box-sizing: inherit;
64
+ }
65
+ }
66
+
67
+ // Media
68
+ img,
69
+ video {
70
+ height: auto;
71
+ max-width: 100%;
72
+ }
73
+
74
+ // Iframe
75
+ iframe {
76
+ border: 0;
77
+ }
78
+
79
+ // Table
80
+ table {
81
+ border-collapse: collapse;
82
+ border-spacing: 0;
83
+ }
84
+
85
+ td,
86
+ th {
87
+ padding: 0;
88
+
89
+ &:not([align]) {
90
+ text-align: inherit;
91
+ }
92
+ }
@@ -0,0 +1,126 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/mixins" as mx;
4
+ @use "../utilities/extends";
5
+
6
+ $skeleton-background: cv.getVar("border") !default;
7
+ $skeleton-radius: cv.getVar("radius-small") !default;
8
+ $skeleton-block-min-height: 4.5em !default;
9
+ $skeleton-lines-gap: 0.75em !default;
10
+ $skeleton-line-height: 0.75em !default;
11
+
12
+ :root {
13
+ @include cv.register-vars(
14
+ (
15
+ "skeleton-background": #{$skeleton-background},
16
+ "skeleton-radius": #{$skeleton-radius},
17
+ "skeleton-block-min-height": #{$skeleton-block-min-height},
18
+ "skeleton-lines-gap": #{$skeleton-lines-gap},
19
+ "skeleton-line-height": #{$skeleton-line-height},
20
+ )
21
+ );
22
+ }
23
+
24
+ %skeleton-pulsation {
25
+ animation-duration: 2s;
26
+ animation-iteration-count: infinite;
27
+ animation-name: pulsate;
28
+ animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
29
+ background-color: cv.getVar("skeleton-background");
30
+ border-radius: cv.getVar("skeleton-radius");
31
+ box-shadow: none;
32
+ pointer-events: none;
33
+ }
34
+
35
+ .#{iv.$class-prefix}is-skeleton {
36
+ @extend %skeleton-pulsation;
37
+ color: transparent !important;
38
+
39
+ em,
40
+ strong {
41
+ color: inherit;
42
+ }
43
+
44
+ img {
45
+ visibility: hidden;
46
+ }
47
+
48
+ &.#{iv.$class-prefix}checkbox {
49
+ input {
50
+ opacity: 0;
51
+ }
52
+ }
53
+
54
+ &.#{iv.$class-prefix}delete {
55
+ border-radius: cv.getVar("radius-rounded");
56
+
57
+ &::before,
58
+ &::after {
59
+ display: none;
60
+ }
61
+ }
62
+ }
63
+
64
+ input.#{iv.$class-prefix}is-skeleton,
65
+ textarea.#{iv.$class-prefix}is-skeleton {
66
+ resize: none;
67
+
68
+ @include mx.placeholder {
69
+ color: transparent !important;
70
+ }
71
+ }
72
+
73
+ .#{iv.$class-prefix}has-skeleton {
74
+ color: transparent !important;
75
+ position: relative;
76
+
77
+ &::after {
78
+ @extend %skeleton-pulsation;
79
+ content: "";
80
+ display: block;
81
+ height: 100%;
82
+ left: 0;
83
+ max-width: 100%;
84
+ min-width: 10%;
85
+ position: absolute;
86
+ top: 0;
87
+ width: 7em;
88
+ }
89
+ }
90
+
91
+ .#{iv.$class-prefix}skeleton-block {
92
+ @extend %block;
93
+ @extend %skeleton-pulsation;
94
+ color: transparent !important;
95
+ min-height: cv.getVar("skeleton-block-min-height");
96
+ }
97
+
98
+ .#{iv.$class-prefix}skeleton-lines {
99
+ color: transparent !important;
100
+ display: flex;
101
+ flex-direction: column;
102
+ gap: cv.getVar("skeleton-lines-gap");
103
+ position: relative;
104
+
105
+ > div {
106
+ @extend %skeleton-pulsation;
107
+ height: cv.getVar("skeleton-line-height");
108
+
109
+ &:last-child {
110
+ min-width: 4em;
111
+ width: 30%;
112
+ }
113
+ }
114
+ }
115
+
116
+ .#{iv.$class-prefix}skeleton {
117
+ background-image: linear-gradient(
118
+ 0deg,
119
+ transparent 0%,
120
+ transparent 50%,
121
+ #f60 50%,
122
+ #f60 100%
123
+ );
124
+ background-position: top left;
125
+ background-size: 1.5em;
126
+ }
@@ -0,0 +1,13 @@
1
+ /* Bulma Components */
2
+ @charset "utf-8";
3
+
4
+ @forward "breadcrumb";
5
+ @forward "card";
6
+ @forward "dropdown";
7
+ @forward "menu";
8
+ @forward "message";
9
+ @forward "modal";
10
+ @forward "navbar";
11
+ @forward "pagination";
12
+ @forward "panel";
13
+ @forward "tabs";
@@ -0,0 +1,139 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/extends";
4
+ @use "../utilities/mixins";
5
+
6
+ $breadcrumb-item-color: cv.getVar("link-text") !default;
7
+ $breadcrumb-item-hover-color: cv.getVar("link-text-hover") !default;
8
+ $breadcrumb-item-active-color: cv.getVar("link-text-active") !default;
9
+
10
+ $breadcrumb-item-padding-vertical: 0 !default;
11
+ $breadcrumb-item-padding-horizontal: 0.75em !default;
12
+
13
+ $breadcrumb-item-separator-color: cv.getVar("border") !default;
14
+
15
+ .#{iv.$class-prefix}breadcrumb {
16
+ @include cv.register-vars(
17
+ (
18
+ "breadcrumb-item-color": #{$breadcrumb-item-color},
19
+ "breadcrumb-item-hover-color": #{$breadcrumb-item-hover-color},
20
+ "breadcrumb-item-active-color": #{$breadcrumb-item-active-color},
21
+ "breadcrumb-item-padding-vertical": #{$breadcrumb-item-padding-vertical},
22
+ "breadcrumb-item-padding-horizontal": #{$breadcrumb-item-padding-horizontal},
23
+ "breadcrumb-item-separator-color": #{$breadcrumb-item-separator-color},
24
+ )
25
+ );
26
+ }
27
+
28
+ .#{iv.$class-prefix}breadcrumb {
29
+ @extend %block;
30
+ @extend %unselectable;
31
+ font-size: cv.getVar("size-normal");
32
+ white-space: nowrap;
33
+
34
+ a {
35
+ align-items: center;
36
+ color: cv.getVar("breadcrumb-item-color");
37
+ display: flex;
38
+ justify-content: center;
39
+ padding: cv.getVar("breadcrumb-item-padding-vertical")
40
+ cv.getVar("breadcrumb-item-padding-horizontal");
41
+
42
+ &:hover {
43
+ color: cv.getVar("breadcrumb-item-hover-color");
44
+ }
45
+ }
46
+
47
+ li {
48
+ align-items: center;
49
+ display: flex;
50
+
51
+ &:first-child a {
52
+ padding-inline-start: 0;
53
+ }
54
+
55
+ &.#{iv.$class-prefix}is-active {
56
+ a {
57
+ color: cv.getVar("breadcrumb-item-active-color");
58
+ cursor: default;
59
+ pointer-events: none;
60
+ }
61
+ }
62
+
63
+ & + li::before {
64
+ color: cv.getVar("breadcrumb-item-separator-color");
65
+ content: "/";
66
+ }
67
+ }
68
+
69
+ ul,
70
+ ol {
71
+ align-items: flex-start;
72
+ display: flex;
73
+ flex-wrap: wrap;
74
+ justify-content: flex-start;
75
+ }
76
+
77
+ .#{iv.$class-prefix}icon {
78
+ &:first-child {
79
+ margin-inline-end: 0.5em;
80
+ }
81
+
82
+ &:last-child {
83
+ margin-inline-start: 0.5em;
84
+ }
85
+ }
86
+
87
+ // Alignment
88
+ &.#{iv.$class-prefix}is-centered {
89
+ ol,
90
+ ul {
91
+ justify-content: center;
92
+ }
93
+ }
94
+
95
+ &.#{iv.$class-prefix}is-right {
96
+ ol,
97
+ ul {
98
+ justify-content: flex-end;
99
+ }
100
+ }
101
+
102
+ // Sizes
103
+ &.#{iv.$class-prefix}is-small {
104
+ font-size: cv.getVar("size-small");
105
+ }
106
+
107
+ &.#{iv.$class-prefix}is-medium {
108
+ font-size: cv.getVar("size-medium");
109
+ }
110
+
111
+ &.#{iv.$class-prefix}is-large {
112
+ font-size: cv.getVar("size-large");
113
+ }
114
+
115
+ // Styles
116
+ &.#{iv.$class-prefix}has-arrow-separator {
117
+ li + li::before {
118
+ content: "→";
119
+ }
120
+ }
121
+
122
+ &.#{iv.$class-prefix}has-bullet-separator {
123
+ li + li::before {
124
+ content: "•";
125
+ }
126
+ }
127
+
128
+ &.#{iv.$class-prefix}has-dot-separator {
129
+ li + li::before {
130
+ content: "·";
131
+ }
132
+ }
133
+
134
+ &.#{iv.$class-prefix}has-succeeds-separator {
135
+ li + li::before {
136
+ content: "≻";
137
+ }
138
+ }
139
+ }
@@ -0,0 +1,162 @@
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
+ $card-color: cv.getVar("text") !default;
7
+ $card-background-color: cv.getVar("scheme-main") !default;
8
+ $card-shadow: cv.getVar("shadow") !default;
9
+ $card-radius: 0.75rem !default;
10
+
11
+ $card-header-background-color: transparent !default;
12
+ $card-header-color: cv.getVar("text-strong") !default;
13
+ $card-header-padding: 0.75rem 1rem !default;
14
+ $card-header-shadow: 0 0.125em 0.25em
15
+ hsla(
16
+ #{cv.getVar("scheme-h")},
17
+ #{cv.getVar("scheme-s")},
18
+ #{cv.getVar("scheme-invert-l")},
19
+ 0.1
20
+ ) !default;
21
+ $card-header-weight: cv.getVar("weight-bold") !default;
22
+
23
+ $card-content-background-color: transparent !default;
24
+ $card-content-padding: 1.5rem !default;
25
+
26
+ $card-footer-background-color: transparent !default;
27
+ $card-footer-border-top: 1px solid cv.getVar("border-weak") !default;
28
+ $card-footer-padding: 0.75rem !default;
29
+
30
+ $card-media-margin: cv.getVar("block-spacing") !default;
31
+
32
+ .#{iv.$class-prefix}card {
33
+ @include cv.register-vars(
34
+ (
35
+ "card-color": #{$card-color},
36
+ "card-background-color": #{$card-background-color},
37
+ "card-shadow": #{$card-shadow},
38
+ "card-radius": #{$card-radius},
39
+ "card-header-background-color": #{$card-header-background-color},
40
+ "card-header-color": #{$card-header-color},
41
+ "card-header-padding": #{$card-header-padding},
42
+ "card-header-shadow": #{$card-header-shadow},
43
+ "card-header-weight": #{$card-header-weight},
44
+ "card-content-background-color": #{$card-content-background-color},
45
+ "card-content-padding": #{$card-content-padding},
46
+ "card-footer-background-color": #{$card-footer-background-color},
47
+ "card-footer-border-top": #{$card-footer-border-top},
48
+ "card-footer-padding": #{$card-footer-padding},
49
+ "card-media-margin": #{$card-media-margin},
50
+ )
51
+ );
52
+ }
53
+
54
+ .#{iv.$class-prefix}card {
55
+ @extend %block;
56
+ background-color: cv.getVar("card-background-color");
57
+ border-radius: cv.getVar("card-radius");
58
+ box-shadow: cv.getVar("card-shadow");
59
+ color: cv.getVar("card-color");
60
+ max-width: 100%;
61
+ position: relative;
62
+ }
63
+
64
+ %card-item {
65
+ &:first-child {
66
+ border-start-start-radius: cv.getVar("card-radius");
67
+ border-start-end-radius: cv.getVar("card-radius");
68
+ }
69
+
70
+ &:last-child {
71
+ border-end-start-radius: cv.getVar("card-radius");
72
+ border-end-end-radius: cv.getVar("card-radius");
73
+ }
74
+ }
75
+
76
+ .#{iv.$class-prefix}card-header {
77
+ @extend %card-item;
78
+ background-color: cv.getVar("card-header-background-color");
79
+ align-items: stretch;
80
+ box-shadow: cv.getVar("card-header-shadow");
81
+ display: flex;
82
+ }
83
+
84
+ .#{iv.$class-prefix}card-header-title {
85
+ align-items: center;
86
+ color: cv.getVar("card-header-color");
87
+ display: flex;
88
+ flex-grow: 1;
89
+ font-weight: cv.getVar("card-header-weight");
90
+ padding: cv.getVar("card-header-padding");
91
+
92
+ &.#{iv.$class-prefix}is-centered {
93
+ justify-content: center;
94
+ }
95
+ }
96
+
97
+ .#{iv.$class-prefix}card-header-icon {
98
+ @include mx.reset;
99
+
100
+ align-items: center;
101
+ cursor: pointer;
102
+ display: flex;
103
+ justify-content: center;
104
+ padding: cv.getVar("card-header-padding");
105
+ }
106
+
107
+ .#{iv.$class-prefix}card-image {
108
+ display: block;
109
+ position: relative;
110
+
111
+ &:first-child {
112
+ img {
113
+ border-start-start-radius: cv.getVar("card-radius");
114
+ border-start-end-radius: cv.getVar("card-radius");
115
+ }
116
+ }
117
+
118
+ &:last-child {
119
+ img {
120
+ border-end-start-radius: cv.getVar("card-radius");
121
+ border-end-end-radius: cv.getVar("card-radius");
122
+ }
123
+ }
124
+ }
125
+
126
+ .#{iv.$class-prefix}card-content {
127
+ @extend %card-item;
128
+
129
+ background-color: cv.getVar("card-content-background-color");
130
+ padding: cv.getVar("card-content-padding");
131
+ }
132
+
133
+ .#{iv.$class-prefix}card-footer {
134
+ @extend %card-item;
135
+
136
+ background-color: cv.getVar("card-footer-background-color");
137
+ border-top: cv.getVar("card-footer-border-top");
138
+ align-items: stretch;
139
+ display: flex;
140
+ }
141
+
142
+ .#{iv.$class-prefix}card-footer-item {
143
+ align-items: center;
144
+ display: flex;
145
+ flex-basis: 0;
146
+ flex-grow: 1;
147
+ flex-shrink: 0;
148
+ justify-content: center;
149
+ padding: cv.getVar("card-footer-padding");
150
+
151
+ &:not(:last-child) {
152
+ border-inline-end: cv.getVar("card-footer-border-top");
153
+ }
154
+ }
155
+
156
+ // Combinations
157
+
158
+ .#{iv.$class-prefix}card {
159
+ .#{iv.$class-prefix}media:not(:last-child) {
160
+ margin-bottom: cv.getVar("card-media-margin");
161
+ }
162
+ }
@@ -0,0 +1,188 @@
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
+ $dropdown-menu-min-width: 12rem !default;
7
+
8
+ $dropdown-content-background-color: cv.getVar("scheme-main") !default;
9
+ $dropdown-content-offset: 0.25rem !default;
10
+ $dropdown-content-padding-bottom: 0.5rem !default;
11
+ $dropdown-content-padding-top: 0.5rem !default;
12
+ $dropdown-content-radius: cv.getVar("radius") !default;
13
+ $dropdown-content-shadow: cv.getVar("shadow") !default;
14
+ $dropdown-content-z: 20 !default;
15
+
16
+ $dropdown-item-h: cv.getVar("scheme-h");
17
+ $dropdown-item-s: cv.getVar("scheme-s");
18
+ $dropdown-item-l: cv.getVar("scheme-main-l");
19
+ $dropdown-item-background-l: cv.getVar("scheme-main-l");
20
+ $dropdown-item-background-l-delta: 0%;
21
+ $dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
22
+ $dropdown-item-active-background-l-delta: cv.getVar(
23
+ "active-background-l-delta"
24
+ );
25
+ $dropdown-item-color-l: cv.getVar("text-strong-l");
26
+ $dropdown-item-selected-h: cv.getVar("link-h");
27
+ $dropdown-item-selected-s: cv.getVar("link-s");
28
+ $dropdown-item-selected-l: cv.getVar("link-l");
29
+ $dropdown-item-selected-background-l: cv.getVar("link-l");
30
+ $dropdown-item-selected-color-l: cv.getVar("link-invert-l");
31
+
32
+ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
33
+
34
+ .#{iv.$class-prefix}dropdown {
35
+ // prettier-ignore-start
36
+ @include cv.register-vars(
37
+ (
38
+ "dropdown-menu-min-width": #{$dropdown-menu-min-width},
39
+ "dropdown-content-background-color": #{$dropdown-content-background-color},
40
+ "dropdown-content-offset": #{$dropdown-content-offset},
41
+ "dropdown-content-padding-bottom": #{$dropdown-content-padding-bottom},
42
+ "dropdown-content-padding-top": #{$dropdown-content-padding-top},
43
+ "dropdown-content-radius": #{$dropdown-content-radius},
44
+ "dropdown-content-shadow": #{$dropdown-content-shadow},
45
+ "dropdown-content-z": #{$dropdown-content-z},
46
+ "dropdown-item-h": #{$dropdown-item-h},
47
+ "dropdown-item-s": #{$dropdown-item-s},
48
+ "dropdown-item-l": #{$dropdown-item-l},
49
+ "dropdown-item-background-l": #{$dropdown-item-background-l},
50
+ "dropdown-item-background-l-delta": #{$dropdown-item-background-l-delta},
51
+ "dropdown-item-hover-background-l-delta": #{$dropdown-item-hover-background-l-delta},
52
+ "dropdown-item-active-background-l-delta": #{$dropdown-item-active-background-l-delta},
53
+ "dropdown-item-color-l": #{$dropdown-item-color-l},
54
+ "dropdown-item-selected-h": #{$dropdown-item-selected-h},
55
+ "dropdown-item-selected-s": #{$dropdown-item-selected-s},
56
+ "dropdown-item-selected-l": #{$dropdown-item-selected-l},
57
+ "dropdown-item-selected-background-l": #{$dropdown-item-selected-background-l},
58
+ "dropdown-item-selected-color-l": #{$dropdown-item-selected-color-l},
59
+ "dropdown-divider-background-color": #{$dropdown-divider-background-color},
60
+ )
61
+ );
62
+ // prettier-ignore-end
63
+ }
64
+
65
+ .#{iv.$class-prefix}dropdown {
66
+ display: inline-flex;
67
+ position: relative;
68
+ vertical-align: top;
69
+
70
+ &.#{iv.$class-prefix}is-active,
71
+ &.#{iv.$class-prefix}is-hoverable:hover {
72
+ .#{iv.$class-prefix}dropdown-menu {
73
+ display: block;
74
+ }
75
+ }
76
+
77
+ &.#{iv.$class-prefix}is-right {
78
+ .#{iv.$class-prefix}dropdown-menu {
79
+ left: auto;
80
+ right: 0;
81
+ }
82
+ }
83
+
84
+ &.#{iv.$class-prefix}is-up {
85
+ .#{iv.$class-prefix}dropdown-menu {
86
+ bottom: 100%;
87
+ padding-bottom: cv.getVar("dropdown-content-offset");
88
+ padding-top: initial;
89
+ top: auto;
90
+ }
91
+ }
92
+ }
93
+
94
+ .#{iv.$class-prefix}dropdown-menu {
95
+ display: none;
96
+ @include mx.ltr-position(0, false);
97
+ min-width: cv.getVar("dropdown-menu-min-width");
98
+ padding-top: cv.getVar("dropdown-content-offset");
99
+ position: absolute;
100
+ top: 100%;
101
+ z-index: cv.getVar("dropdown-content-z");
102
+ }
103
+
104
+ .#{iv.$class-prefix}dropdown-content {
105
+ background-color: cv.getVar("dropdown-content-background-color");
106
+ border-radius: cv.getVar("dropdown-content-radius");
107
+ box-shadow: cv.getVar("dropdown-content-shadow");
108
+ padding-bottom: cv.getVar("dropdown-content-padding-bottom");
109
+ padding-top: cv.getVar("dropdown-content-padding-top");
110
+ }
111
+
112
+ .#{iv.$class-prefix}dropdown-item {
113
+ color: hsl(
114
+ #{cv.getVar("dropdown-item-h")},
115
+ #{cv.getVar("dropdown-item-s")},
116
+ #{cv.getVar("dropdown-item-color-l")}
117
+ );
118
+ display: block;
119
+ font-size: 0.875rem;
120
+ line-height: 1.5;
121
+ padding: 0.375rem 1rem;
122
+ }
123
+
124
+ a.#{iv.$class-prefix}dropdown-item,
125
+ button.#{iv.$class-prefix}dropdown-item {
126
+ background-color: hsl(
127
+ #{cv.getVar("dropdown-item-h")},
128
+ #{cv.getVar("dropdown-item-s")},
129
+ calc(
130
+ #{cv.getVar("dropdown-item-background-l")} + #{cv.getVar(
131
+ "dropdown-item-background-l-delta"
132
+ )}
133
+ )
134
+ );
135
+ padding-inline-end: 3rem;
136
+ text-align: inherit;
137
+ white-space: nowrap;
138
+ width: 100%;
139
+
140
+ &:hover {
141
+ @include cv.register-vars(
142
+ (
143
+ "dropdown-item-background-l-delta": #{cv.getVar(
144
+ "dropdown-item-hover-background-l-delta"
145
+ )},
146
+ "dropdown-item-border-l-delta": #{cv.getVar(
147
+ "dropdown-item-hover-border-l-delta"
148
+ )},
149
+ )
150
+ );
151
+ }
152
+
153
+ &:active {
154
+ @include cv.register-vars(
155
+ (
156
+ "dropdown-item-background-l-delta": #{cv.getVar(
157
+ "dropdown-item-active-background-l-delta"
158
+ )},
159
+ "dropdown-item-border-l-delta": #{cv.getVar(
160
+ "dropdown-item-active-border-l-delta"
161
+ )},
162
+ )
163
+ );
164
+ }
165
+
166
+ &.#{iv.$class-prefix}is-active,
167
+ &.#{iv.$class-prefix}is-selected {
168
+ @include cv.register-vars(
169
+ (
170
+ "dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")},
171
+ "dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")},
172
+ "dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")},
173
+ "dropdown-item-background-l": #{cv.getVar(
174
+ "dropdown-item-selected-background-l"
175
+ )},
176
+ "dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")},
177
+ )
178
+ );
179
+ }
180
+ }
181
+
182
+ .#{iv.$class-prefix}dropdown-divider {
183
+ background-color: cv.getVar("dropdown-divider-background-color");
184
+ border: none;
185
+ display: block;
186
+ height: 1px;
187
+ margin: 0.5rem 0;
188
+ }