bulma-rails 0.9.4 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (144) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +48 -14
  3. data/app/assets/stylesheets/bulma.scss +4 -0
  4. data/app/assets/stylesheets/sass/_index.scss +10 -0
  5. data/app/assets/stylesheets/sass/base/_index.scss +6 -0
  6. data/app/assets/stylesheets/sass/base/animations.scss +15 -0
  7. data/app/assets/stylesheets/sass/base/generic.scss +239 -0
  8. data/app/assets/stylesheets/sass/base/minireset.scss +92 -0
  9. data/app/assets/stylesheets/sass/base/skeleton.scss +114 -0
  10. data/app/assets/stylesheets/sass/components/_index.scss +13 -0
  11. data/app/assets/stylesheets/sass/components/breadcrumb.scss +139 -0
  12. data/app/assets/stylesheets/sass/components/card.scss +162 -0
  13. data/app/assets/stylesheets/sass/components/dropdown.scss +188 -0
  14. data/app/assets/stylesheets/sass/components/menu.scss +165 -0
  15. data/app/assets/stylesheets/sass/components/message.scss +183 -0
  16. data/app/assets/stylesheets/sass/components/modal.scss +164 -0
  17. data/app/assets/stylesheets/sass/components/navbar.scss +788 -0
  18. data/app/assets/stylesheets/sass/components/pagination.scss +379 -0
  19. data/app/assets/stylesheets/sass/components/panel.scss +218 -0
  20. data/app/assets/stylesheets/sass/components/tabs.scss +273 -0
  21. data/app/assets/stylesheets/sass/elements/_index.scss +16 -0
  22. data/app/assets/stylesheets/sass/elements/block.scss +6 -0
  23. data/app/assets/stylesheets/sass/elements/box.scss +59 -0
  24. data/app/assets/stylesheets/sass/elements/button.scss +647 -0
  25. data/app/assets/stylesheets/sass/elements/content.scss +283 -0
  26. data/app/assets/stylesheets/sass/elements/delete.scss +6 -0
  27. data/app/assets/stylesheets/sass/elements/icon.scss +67 -0
  28. data/app/assets/stylesheets/sass/elements/image.scss +62 -0
  29. data/app/assets/stylesheets/sass/elements/loader.scss +15 -0
  30. data/app/assets/stylesheets/sass/elements/notification.scss +105 -0
  31. data/app/assets/stylesheets/sass/elements/progress.scss +115 -0
  32. data/app/assets/stylesheets/sass/elements/table.scss +261 -0
  33. data/app/assets/stylesheets/sass/elements/tag.scss +219 -0
  34. data/app/assets/stylesheets/sass/elements/title.scss +128 -0
  35. data/app/assets/stylesheets/sass/form/_index.scss +9 -0
  36. data/app/assets/stylesheets/sass/form/checkbox-radio.scss +32 -0
  37. data/app/assets/stylesheets/sass/form/file.scss +330 -0
  38. data/app/assets/stylesheets/sass/form/input-textarea.scss +123 -0
  39. data/app/assets/stylesheets/sass/form/select.scss +144 -0
  40. data/app/assets/stylesheets/sass/form/shared.scss +172 -0
  41. data/app/assets/stylesheets/sass/form/tools.scss +341 -0
  42. data/app/assets/stylesheets/sass/grid/_index.scss +5 -0
  43. data/app/assets/stylesheets/sass/grid/columns-v2.scss +957 -0
  44. data/app/assets/stylesheets/sass/grid/columns.scss +877 -0
  45. data/app/assets/stylesheets/sass/grid/grid.scss +209 -0
  46. data/app/assets/stylesheets/sass/helpers/_index.scss +15 -0
  47. data/app/assets/stylesheets/sass/helpers/aspect-ratio.scss +10 -0
  48. data/app/assets/stylesheets/sass/helpers/border.scss +15 -0
  49. data/app/assets/stylesheets/sass/helpers/color.scss +364 -0
  50. data/app/assets/stylesheets/sass/helpers/flexbox.scss +62 -0
  51. data/app/assets/stylesheets/sass/helpers/float.scss +28 -0
  52. data/app/assets/stylesheets/sass/helpers/gap.scss +24 -0
  53. data/app/assets/stylesheets/sass/helpers/other.scss +19 -0
  54. data/app/assets/stylesheets/sass/helpers/overflow.scss +21 -0
  55. data/app/assets/stylesheets/sass/helpers/position.scss +19 -0
  56. data/app/assets/stylesheets/sass/helpers/spacing.scss +64 -0
  57. data/app/assets/stylesheets/sass/helpers/typography.scss +168 -0
  58. data/app/assets/stylesheets/sass/helpers/visibility.scss +221 -0
  59. data/app/assets/stylesheets/sass/layout/_index.scss +9 -0
  60. data/app/assets/stylesheets/sass/layout/container.scss +51 -0
  61. data/app/assets/stylesheets/sass/layout/footer.scss +23 -0
  62. data/app/assets/stylesheets/sass/layout/hero.scss +270 -0
  63. data/app/assets/stylesheets/sass/layout/level.scss +107 -0
  64. data/app/assets/stylesheets/sass/layout/media.scss +106 -0
  65. data/app/assets/stylesheets/sass/layout/section.scss +34 -0
  66. data/app/assets/stylesheets/sass/themes/_index.scss +35 -0
  67. data/app/assets/stylesheets/sass/themes/dark.scss +56 -0
  68. data/app/assets/stylesheets/sass/themes/light.scss +146 -0
  69. data/app/assets/stylesheets/sass/themes/setup.scss +174 -0
  70. data/app/assets/stylesheets/sass/utilities/_index.scss +7 -0
  71. data/app/assets/stylesheets/sass/utilities/controls.scss +85 -0
  72. data/app/assets/stylesheets/sass/utilities/css-variables.scss +425 -0
  73. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +112 -0
  74. data/app/assets/stylesheets/sass/utilities/extends.scss +34 -0
  75. data/app/assets/stylesheets/sass/utilities/functions.scss +258 -0
  76. data/app/assets/stylesheets/sass/utilities/initial-variables.scss +155 -0
  77. data/app/assets/stylesheets/sass/utilities/mixins.scss +460 -0
  78. data/bulma-rails.gemspec +4 -6
  79. metadata +84 -74
  80. data/app/assets/stylesheets/bulma.sass +0 -10
  81. data/app/assets/stylesheets/sass/base/_all.sass +0 -6
  82. data/app/assets/stylesheets/sass/base/animations.sass +0 -5
  83. data/app/assets/stylesheets/sass/base/generic.sass +0 -145
  84. data/app/assets/stylesheets/sass/base/helpers.sass +0 -1
  85. data/app/assets/stylesheets/sass/base/minireset.sass +0 -79
  86. data/app/assets/stylesheets/sass/components/_all.sass +0 -15
  87. data/app/assets/stylesheets/sass/components/breadcrumb.sass +0 -77
  88. data/app/assets/stylesheets/sass/components/card.sass +0 -103
  89. data/app/assets/stylesheets/sass/components/dropdown.sass +0 -83
  90. data/app/assets/stylesheets/sass/components/level.sass +0 -79
  91. data/app/assets/stylesheets/sass/components/media.sass +0 -59
  92. data/app/assets/stylesheets/sass/components/menu.sass +0 -59
  93. data/app/assets/stylesheets/sass/components/message.sass +0 -101
  94. data/app/assets/stylesheets/sass/components/modal.sass +0 -117
  95. data/app/assets/stylesheets/sass/components/navbar.sass +0 -446
  96. data/app/assets/stylesheets/sass/components/pagination.sass +0 -167
  97. data/app/assets/stylesheets/sass/components/panel.sass +0 -121
  98. data/app/assets/stylesheets/sass/components/tabs.sass +0 -176
  99. data/app/assets/stylesheets/sass/elements/_all.sass +0 -16
  100. data/app/assets/stylesheets/sass/elements/box.sass +0 -26
  101. data/app/assets/stylesheets/sass/elements/button.sass +0 -357
  102. data/app/assets/stylesheets/sass/elements/container.sass +0 -29
  103. data/app/assets/stylesheets/sass/elements/content.sass +0 -162
  104. data/app/assets/stylesheets/sass/elements/form.sass +0 -1
  105. data/app/assets/stylesheets/sass/elements/icon.sass +0 -46
  106. data/app/assets/stylesheets/sass/elements/image.sass +0 -73
  107. data/app/assets/stylesheets/sass/elements/notification.sass +0 -52
  108. data/app/assets/stylesheets/sass/elements/other.sass +0 -31
  109. data/app/assets/stylesheets/sass/elements/progress.sass +0 -73
  110. data/app/assets/stylesheets/sass/elements/table.sass +0 -134
  111. data/app/assets/stylesheets/sass/elements/tag.sass +0 -140
  112. data/app/assets/stylesheets/sass/elements/title.sass +0 -70
  113. data/app/assets/stylesheets/sass/form/_all.sass +0 -9
  114. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +0 -22
  115. data/app/assets/stylesheets/sass/form/file.sass +0 -184
  116. data/app/assets/stylesheets/sass/form/input-textarea.sass +0 -66
  117. data/app/assets/stylesheets/sass/form/select.sass +0 -88
  118. data/app/assets/stylesheets/sass/form/shared.sass +0 -60
  119. data/app/assets/stylesheets/sass/form/tools.sass +0 -215
  120. data/app/assets/stylesheets/sass/grid/_all.sass +0 -5
  121. data/app/assets/stylesheets/sass/grid/columns.sass +0 -513
  122. data/app/assets/stylesheets/sass/grid/tiles.sass +0 -36
  123. data/app/assets/stylesheets/sass/helpers/_all.sass +0 -12
  124. data/app/assets/stylesheets/sass/helpers/color.sass +0 -39
  125. data/app/assets/stylesheets/sass/helpers/flexbox.sass +0 -35
  126. data/app/assets/stylesheets/sass/helpers/float.sass +0 -10
  127. data/app/assets/stylesheets/sass/helpers/other.sass +0 -14
  128. data/app/assets/stylesheets/sass/helpers/overflow.sass +0 -2
  129. data/app/assets/stylesheets/sass/helpers/position.sass +0 -7
  130. data/app/assets/stylesheets/sass/helpers/spacing.sass +0 -31
  131. data/app/assets/stylesheets/sass/helpers/typography.sass +0 -103
  132. data/app/assets/stylesheets/sass/helpers/visibility.sass +0 -122
  133. data/app/assets/stylesheets/sass/layout/_all.sass +0 -6
  134. data/app/assets/stylesheets/sass/layout/footer.sass +0 -11
  135. data/app/assets/stylesheets/sass/layout/hero.sass +0 -153
  136. data/app/assets/stylesheets/sass/layout/section.sass +0 -17
  137. data/app/assets/stylesheets/sass/utilities/_all.sass +0 -9
  138. data/app/assets/stylesheets/sass/utilities/animations.sass +0 -1
  139. data/app/assets/stylesheets/sass/utilities/controls.sass +0 -49
  140. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -114
  141. data/app/assets/stylesheets/sass/utilities/extends.sass +0 -25
  142. data/app/assets/stylesheets/sass/utilities/functions.sass +0 -135
  143. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -79
  144. data/app/assets/stylesheets/sass/utilities/mixins.sass +0 -303
@@ -0,0 +1,788 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/derived-variables" as dv;
4
+ @use "../utilities/extends";
5
+ @use "../utilities/mixins" as mx;
6
+
7
+ $navbar-h: cv.getVar("scheme-h");
8
+ $navbar-s: cv.getVar("scheme-s");
9
+ $navbar-l: cv.getVar("scheme-main-l");
10
+ $navbar-background-color: cv.getVar("scheme-main") !default;
11
+ $navbar-box-shadow-size: 0 0.125em 0 0 !default;
12
+ $navbar-box-shadow-color: cv.getVar("background") !default;
13
+ $navbar-height: 3.25rem !default;
14
+ $navbar-padding-vertical: 1rem !default;
15
+ $navbar-padding-horizontal: 2rem !default;
16
+ $navbar-z: 30 !default;
17
+ $navbar-fixed-z: 30 !default;
18
+
19
+ $navbar-item-background-a: 0;
20
+ $navbar-item-background-l: cv.getVar("scheme-main-l");
21
+ $navbar-item-background-l-delta: 0%;
22
+ $navbar-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
23
+ $navbar-item-active-background-l-delta: cv.getVar("active-background-l-delta");
24
+ $navbar-item-color-l: cv.getVar("text-l");
25
+ $navbar-item-selected-h: cv.getVar("link-h");
26
+ $navbar-item-selected-s: cv.getVar("link-s");
27
+ $navbar-item-selected-l: cv.getVar("link-l");
28
+ $navbar-item-selected-background-l: cv.getVar("link-l");
29
+ $navbar-item-selected-color-l: cv.getVar("link-invert-l");
30
+ $navbar-item-img-max-height: 1.75rem !default;
31
+
32
+ $navbar-dropdown-item-h: cv.getVar("scheme-h");
33
+ $navbar-dropdown-item-s: cv.getVar("scheme-s");
34
+ $navbar-dropdown-item-l: cv.getVar("scheme-main-l");
35
+ $navbar-dropdown-item-background-l: cv.getVar("scheme-main-l");
36
+ $navbar-dropdown-item-color-l: cv.getVar("text-l");
37
+
38
+ $navbar-burger-color: cv.getVar("navbar-item-color") !default;
39
+
40
+ $navbar-tab-hover-background-color: transparent !default;
41
+ $navbar-tab-hover-border-bottom-color: cv.getVar("link") !default;
42
+ $navbar-tab-active-color: cv.getVar("link") !default;
43
+ $navbar-tab-active-background-color: transparent !default;
44
+ $navbar-tab-active-border-bottom-color: cv.getVar("link") !default;
45
+ $navbar-tab-active-border-bottom-style: solid !default;
46
+ $navbar-tab-active-border-bottom-width: 0.1875em !default;
47
+
48
+ $navbar-dropdown-background-color: cv.getVar("scheme-main") !default;
49
+ $navbar-dropdown-border-l: cv.getVar("border-l") !default;
50
+ $navbar-dropdown-border-color: hsl(
51
+ cv.getVar("navbar-h"),
52
+ cv.getVar("navbar-s"),
53
+ cv.getVar("navbar-dropdown-border-l")
54
+ ) !default;
55
+ $navbar-dropdown-border-style: solid !default;
56
+ $navbar-dropdown-border-width: 0.125em !default;
57
+ $navbar-dropdown-offset: -0.25em !default;
58
+ $navbar-dropdown-arrow: cv.getVar("link") !default;
59
+ $navbar-dropdown-radius: cv.getVar("radius-large") !default;
60
+ $navbar-dropdown-z: 20 !default;
61
+
62
+ $navbar-dropdown-boxed-radius: cv.getVar("radius-large") !default;
63
+ $navbar-dropdown-boxed-shadow:
64
+ 0 0.5em 0.5em
65
+ hsla(
66
+ #{cv.getVar("scheme-h")},
67
+ #{cv.getVar("scheme-s")},
68
+ #{cv.getVar("scheme-invert-l")},
69
+ 0.1
70
+ ),
71
+ 0 0 0 1px
72
+ hsla(
73
+ #{cv.getVar("scheme-h")},
74
+ #{cv.getVar("scheme-s")},
75
+ #{cv.getVar("scheme-invert-l")},
76
+ 0.1
77
+ ) !default;
78
+
79
+ $navbar-divider-background-l: cv.getVar("background-l") !default;
80
+ $navbar-divider-height: 0.125em !default;
81
+
82
+ $navbar-bottom-box-shadow-size: 0 -0.125em 0 0 !default;
83
+
84
+ $navbar-breakpoint: iv.$desktop !default;
85
+
86
+ $navbar-colors: dv.$colors !default;
87
+
88
+ @mixin navbar-fixed {
89
+ left: 0;
90
+ position: fixed;
91
+ right: 0;
92
+ z-index: cv.getVar("navbar-fixed-z");
93
+ }
94
+
95
+ :root {
96
+ @include cv.register-vars(
97
+ (
98
+ "navbar-height": #{$navbar-height},
99
+ )
100
+ );
101
+ }
102
+
103
+ .#{iv.$class-prefix}navbar {
104
+ @include cv.register-vars(
105
+ (
106
+ "navbar-h": #{$navbar-h},
107
+ "navbar-s": #{$navbar-s},
108
+ "navbar-l": #{$navbar-l},
109
+ "navbar-background-color": #{$navbar-background-color},
110
+ "navbar-box-shadow-size": #{$navbar-box-shadow-size},
111
+ "navbar-box-shadow-color": #{$navbar-box-shadow-color},
112
+ "navbar-padding-vertical": #{$navbar-padding-vertical},
113
+ "navbar-padding-horizontal": #{$navbar-padding-horizontal},
114
+ "navbar-z": #{$navbar-z},
115
+ "navbar-fixed-z": #{$navbar-fixed-z},
116
+ "navbar-item-background-a": #{$navbar-item-background-a},
117
+ "navbar-item-background-l": #{$navbar-item-background-l},
118
+ "navbar-item-background-l-delta": #{$navbar-item-background-l-delta},
119
+ "navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta},
120
+ "navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta},
121
+ "navbar-item-color-l": #{$navbar-item-color-l},
122
+ "navbar-item-selected-h": #{$navbar-item-selected-h},
123
+ "navbar-item-selected-s": #{$navbar-item-selected-s},
124
+ "navbar-item-selected-l": #{$navbar-item-selected-l},
125
+ "navbar-item-selected-background-l": #{$navbar-item-selected-background-l},
126
+ "navbar-item-selected-color-l": #{$navbar-item-selected-color-l},
127
+ "navbar-item-img-max-height": #{$navbar-item-img-max-height},
128
+ "navbar-burger-color": #{$navbar-burger-color},
129
+ "navbar-tab-hover-background-color": #{$navbar-tab-hover-background-color},
130
+ "navbar-tab-hover-border-bottom-color": #{$navbar-tab-hover-border-bottom-color},
131
+ "navbar-tab-active-color": #{$navbar-tab-active-color},
132
+ "navbar-tab-active-background-color": #{$navbar-tab-active-background-color},
133
+ "navbar-tab-active-border-bottom-color": #{$navbar-tab-active-border-bottom-color},
134
+ "navbar-tab-active-border-bottom-style": #{$navbar-tab-active-border-bottom-style},
135
+ "navbar-tab-active-border-bottom-width": #{$navbar-tab-active-border-bottom-width},
136
+ "navbar-dropdown-background-color": #{$navbar-dropdown-background-color},
137
+ "navbar-dropdown-border-l": #{$navbar-dropdown-border-l},
138
+ "navbar-dropdown-border-color": #{$navbar-dropdown-border-color},
139
+ "navbar-dropdown-border-style": #{$navbar-dropdown-border-style},
140
+ "navbar-dropdown-border-width": #{$navbar-dropdown-border-width},
141
+ "navbar-dropdown-offset": #{$navbar-dropdown-offset},
142
+ "navbar-dropdown-arrow": #{$navbar-dropdown-arrow},
143
+ "navbar-dropdown-radius": #{$navbar-dropdown-radius},
144
+ "navbar-dropdown-z": #{$navbar-dropdown-z},
145
+ "navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius},
146
+ "navbar-dropdown-boxed-shadow": #{$navbar-dropdown-boxed-shadow},
147
+ "navbar-dropdown-item-h": #{$navbar-dropdown-item-h},
148
+ "navbar-dropdown-item-s": #{$navbar-dropdown-item-s},
149
+ "navbar-dropdown-item-l": #{$navbar-dropdown-item-l},
150
+ "navbar-dropdown-item-background-l": #{$navbar-dropdown-item-background-l},
151
+ "navbar-dropdown-item-color-l": #{$navbar-dropdown-item-color-l},
152
+ "navbar-divider-background-l": #{$navbar-divider-background-l},
153
+ "navbar-divider-height": #{$navbar-divider-height},
154
+ "navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size},
155
+ )
156
+ );
157
+ }
158
+
159
+ .#{iv.$class-prefix}navbar {
160
+ background-color: cv.getVar("navbar-background-color");
161
+ min-height: cv.getVar("navbar-height");
162
+ position: relative;
163
+ z-index: cv.getVar("navbar-z");
164
+
165
+ @each $name, $pair in $navbar-colors {
166
+ &.#{iv.$class-prefix}is-#{$name} {
167
+ @include cv.register-vars(
168
+ (
169
+ "navbar-h": #{cv.getVar($name, "", "-h")},
170
+ "navbar-s": #{cv.getVar($name, "", "-s")},
171
+ "navbar-l": #{cv.getVar($name, "", "-l")},
172
+ "burger-h": #{cv.getVar($name, "", "-h")},
173
+ "burger-s": #{cv.getVar($name, "", "-s")},
174
+ "burger-l": #{cv.getVar($name, "", "-invert-l")},
175
+ "navbar-background-color": #{cv.getVar($name)},
176
+ "navbar-item-background-l": #{cv.getVar($name, "", "-l")},
177
+ "navbar-item-color-l": #{cv.getVar($name, "", "-invert-l")},
178
+ "navbar-item-selected-h": #{cv.getVar($name, "", "-h")},
179
+ "navbar-item-selected-s": #{cv.getVar($name, "", "-s")},
180
+ "navbar-item-selected-l": #{cv.getVar($name, "", "-l")},
181
+ "navbar-item-selected-background-l": #{cv.getVar($name, "", "-l")},
182
+ "navbar-item-selected-color-l": #{cv.getVar($name, "", "-invert-l")},
183
+ "navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert-l")},
184
+ "navbar-dropdown-background-color":
185
+ hsl(
186
+ #{cv.getVar($name, "", "-h")},
187
+ #{cv.getVar($name, "", "-s")},
188
+ #{cv.getVar("navbar-dropdown-item-background-l")}
189
+ ),
190
+ "navbar-dropdown-item-h": #{cv.getVar($name, "", "-h")},
191
+ "navbar-dropdown-item-s": #{cv.getVar($name, "", "-s")},
192
+ )
193
+ );
194
+ }
195
+ }
196
+
197
+ & > .#{iv.$class-prefix}container {
198
+ align-items: stretch;
199
+ display: flex;
200
+ min-height: cv.getVar("navbar-height");
201
+ width: 100%;
202
+ }
203
+
204
+ &.#{iv.$class-prefix}has-shadow {
205
+ box-shadow: cv.getVar("navbar-box-shadow-size")
206
+ cv.getVar("navbar-box-shadow-color");
207
+ }
208
+
209
+ &.#{iv.$class-prefix}is-fixed-bottom,
210
+ &.#{iv.$class-prefix}is-fixed-top {
211
+ @include navbar-fixed;
212
+ }
213
+
214
+ &.#{iv.$class-prefix}is-fixed-bottom {
215
+ bottom: 0;
216
+
217
+ &.#{iv.$class-prefix}has-shadow {
218
+ box-shadow: cv.getVar("navbar-bottom-box-shadow-size")
219
+ cv.getVar("navbar-box-shadow-color");
220
+ }
221
+ }
222
+
223
+ &.#{iv.$class-prefix}is-fixed-top {
224
+ top: 0;
225
+ }
226
+ }
227
+
228
+ html,
229
+ body {
230
+ &.#{iv.$class-prefix}has-navbar-fixed-top {
231
+ padding-top: cv.getVar("navbar-height");
232
+ }
233
+
234
+ &.#{iv.$class-prefix}has-navbar-fixed-bottom {
235
+ padding-bottom: cv.getVar("navbar-height");
236
+ }
237
+ }
238
+
239
+ .#{iv.$class-prefix}navbar-brand,
240
+ .#{iv.$class-prefix}navbar-tabs {
241
+ align-items: stretch;
242
+ display: flex;
243
+ flex-shrink: 0;
244
+ min-height: cv.getVar("navbar-height");
245
+ }
246
+
247
+ .#{iv.$class-prefix}navbar-tabs {
248
+ @include mx.overflow-touch;
249
+ max-width: 100vw;
250
+ overflow-x: auto;
251
+ overflow-y: hidden;
252
+ }
253
+
254
+ .#{iv.$class-prefix}navbar-burger {
255
+ @extend %reset;
256
+ @include mx.burger(2.5rem);
257
+ align-self: center;
258
+ margin-inline-start: auto;
259
+ margin-inline-end: 0.375rem;
260
+ }
261
+
262
+ .#{iv.$class-prefix}navbar-menu {
263
+ display: none;
264
+ }
265
+
266
+ .#{iv.$class-prefix}navbar-item,
267
+ .#{iv.$class-prefix}navbar-link {
268
+ color: hsl(
269
+ #{cv.getVar("navbar-h")},
270
+ #{cv.getVar("navbar-s")},
271
+ #{cv.getVar("navbar-item-color-l")}
272
+ );
273
+ display: block;
274
+ line-height: 1.5;
275
+ padding: 0.5rem 0.75rem;
276
+ position: relative;
277
+
278
+ .#{iv.$class-prefix}icon {
279
+ &:only-child {
280
+ margin-left: -0.25rem;
281
+ margin-right: -0.25rem;
282
+ }
283
+ }
284
+ }
285
+
286
+ a.#{iv.$class-prefix}navbar-item,
287
+ .#{iv.$class-prefix}navbar-link {
288
+ background-color: hsla(
289
+ #{cv.getVar("navbar-h")},
290
+ #{cv.getVar("navbar-s")},
291
+ calc(
292
+ #{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
293
+ "navbar-item-background-l-delta"
294
+ )}
295
+ ),
296
+ #{cv.getVar("navbar-item-background-a")}
297
+ );
298
+ cursor: pointer;
299
+
300
+ &:focus,
301
+ &:focus-within,
302
+ &:hover {
303
+ @include cv.register-vars(
304
+ (
305
+ "navbar-item-background-l-delta": #{cv.getVar(
306
+ "navbar-item-hover-background-l-delta"
307
+ )},
308
+ "navbar-item-background-a": 1,
309
+ )
310
+ );
311
+ }
312
+
313
+ &:active {
314
+ @include cv.register-vars(
315
+ (
316
+ "navbar-item-background-l-delta": #{cv.getVar(
317
+ "navbar-item-active-background-l-delta"
318
+ )},
319
+ "navbar-item-background-a": 1,
320
+ )
321
+ );
322
+ }
323
+
324
+ &.#{iv.$class-prefix}is-active,
325
+ &.#{iv.$class-prefix}is-selected {
326
+ @include cv.register-vars(
327
+ (
328
+ "navbar-h": #{cv.getVar("navbar-item-selected-h")},
329
+ "navbar-s": #{cv.getVar("navbar-item-selected-s")},
330
+ "navbar-l": #{cv.getVar("navbar-item-selected-l")},
331
+ "navbar-item-background-l": #{cv.getVar(
332
+ "navbar-item-selected-background-l"
333
+ )},
334
+ "navbar-item-background-a": 1,
335
+ "navbar-item-color-l": #{cv.getVar("navbar-item-selected-color-l")},
336
+ )
337
+ );
338
+ }
339
+ }
340
+
341
+ .#{iv.$class-prefix}navbar-item {
342
+ flex-grow: 0;
343
+ flex-shrink: 0;
344
+
345
+ img,
346
+ svg {
347
+ max-height: cv.getVar("navbar-item-img-max-height");
348
+ }
349
+
350
+ &.#{iv.$class-prefix}has-dropdown {
351
+ padding: 0;
352
+ }
353
+
354
+ &.#{iv.$class-prefix}is-expanded {
355
+ flex-grow: 1;
356
+ flex-shrink: 1;
357
+ }
358
+
359
+ &.#{iv.$class-prefix}is-tab {
360
+ border-bottom: 1px solid transparent;
361
+ min-height: cv.getVar("navbar-height");
362
+ padding-bottom: calc(0.5rem - 1px);
363
+
364
+ &:focus,
365
+ &:hover {
366
+ background-color: cv.getVar("navbar-tab-hover-background-color");
367
+ border-bottom-color: cv.getVar("navbar-tab-hover-border-bottom-color");
368
+ }
369
+
370
+ &.#{iv.$class-prefix}is-active {
371
+ background-color: cv.getVar("navbar-tab-active-background-color");
372
+ border-bottom-color: cv.getVar("navbar-tab-active-border-bottom-color");
373
+ border-bottom-style: cv.getVar("navbar-tab-active-border-bottom-style");
374
+ border-bottom-width: cv.getVar("navbar-tab-active-border-bottom-width");
375
+ color: cv.getVar("navbar-tab-active-color");
376
+ padding-bottom: calc(
377
+ 0.5rem - #{cv.getVar("navbar-tab-active-border-bottom-width")}
378
+ );
379
+ }
380
+ }
381
+ }
382
+
383
+ .#{iv.$class-prefix}navbar-content {
384
+ flex-grow: 1;
385
+ flex-shrink: 1;
386
+ }
387
+
388
+ .#{iv.$class-prefix}navbar-link:not(.#{iv.$class-prefix}is-arrowless) {
389
+ padding-inline-end: 2.5em;
390
+
391
+ &::after {
392
+ @extend %arrow;
393
+ border-color: cv.getVar("navbar-dropdown-arrow");
394
+ margin-top: -0.375em;
395
+ inset-inline-end: 1.125em;
396
+ }
397
+ }
398
+
399
+ .#{iv.$class-prefix}navbar-dropdown {
400
+ font-size: 0.875rem;
401
+ padding-bottom: 0.75rem;
402
+ padding-top: 0.5rem;
403
+
404
+ .#{iv.$class-prefix}navbar-item {
405
+ padding-left: 1.5rem;
406
+ padding-right: 1.5rem;
407
+
408
+ &:not(.is-active, .is-selected) {
409
+ background-color: hsl(
410
+ #{cv.getVar("navbar-dropdown-item-h")},
411
+ #{cv.getVar("navbar-dropdown-item-s")},
412
+ calc(
413
+ #{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar(
414
+ "navbar-item-background-l-delta"
415
+ )}
416
+ )
417
+ );
418
+ color: hsl(
419
+ #{cv.getVar("navbar-dropdown-item-h")},
420
+ #{cv.getVar("navbar-dropdown-item-s")},
421
+ #{cv.getVar("navbar-dropdown-item-color-l")}
422
+ );
423
+ }
424
+ }
425
+ }
426
+
427
+ .#{iv.$class-prefix}navbar-divider {
428
+ background-color: hsl(
429
+ #{cv.getVar("navbar-h")},
430
+ #{cv.getVar("navbar-s")},
431
+ #{cv.getVar("navbar-divider-background-l")}
432
+ );
433
+ border: none;
434
+ display: none;
435
+ height: cv.getVar("navbar-divider-height");
436
+ margin: 0.5rem 0;
437
+ }
438
+
439
+ @include mx.until($navbar-breakpoint) {
440
+ .#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container {
441
+ display: block;
442
+ }
443
+
444
+ .#{iv.$class-prefix}navbar-brand,
445
+ .#{iv.$class-prefix}navbar-tabs {
446
+ .#{iv.$class-prefix}navbar-item {
447
+ align-items: center;
448
+ display: flex;
449
+ }
450
+ }
451
+
452
+ .#{iv.$class-prefix}navbar-link {
453
+ &::after {
454
+ display: none;
455
+ }
456
+ }
457
+
458
+ .#{iv.$class-prefix}navbar-menu {
459
+ background-color: cv.getVar("navbar-background-color");
460
+ box-shadow: 0 0.5em 1em
461
+ hsla(
462
+ #{cv.getVar("scheme-h")},
463
+ #{cv.getVar("scheme-s")},
464
+ #{cv.getVar("scheme-invert-l")},
465
+ 0.1
466
+ );
467
+ padding: 0.5rem 0;
468
+
469
+ &.#{iv.$class-prefix}is-active {
470
+ display: block;
471
+ }
472
+ }
473
+
474
+ // Fixed navbar
475
+ .#{iv.$class-prefix}navbar {
476
+ &.#{iv.$class-prefix}is-fixed-bottom-touch,
477
+ &.#{iv.$class-prefix}is-fixed-top-touch {
478
+ @include navbar-fixed;
479
+ }
480
+
481
+ &.#{iv.$class-prefix}is-fixed-bottom-touch {
482
+ bottom: 0;
483
+
484
+ &.#{iv.$class-prefix}has-shadow {
485
+ box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
486
+ "scheme-s"
487
+ )}, #{cv.getVar("scheme-invert-l")}, 0.1);
488
+ }
489
+ }
490
+
491
+ &.#{iv.$class-prefix}is-fixed-top-touch {
492
+ top: 0;
493
+ }
494
+
495
+ &.#{iv.$class-prefix}is-fixed-top,
496
+ &.#{iv.$class-prefix}is-fixed-top-touch {
497
+ .#{iv.$class-prefix}navbar-menu {
498
+ @include mx.overflow-touch;
499
+ max-height: calc(100vh - #{cv.getVar("navbar-height")});
500
+ overflow: auto;
501
+ }
502
+ }
503
+ }
504
+
505
+ html,
506
+ body {
507
+ &.#{iv.$class-prefix}has-navbar-fixed-top-touch {
508
+ padding-top: cv.getVar("navbar-height");
509
+ }
510
+
511
+ &.#{iv.$class-prefix}has-navbar-fixed-bottom-touch {
512
+ padding-bottom: cv.getVar("navbar-height");
513
+ }
514
+ }
515
+ }
516
+
517
+ @include mx.from($navbar-breakpoint) {
518
+ .#{iv.$class-prefix}navbar,
519
+ .#{iv.$class-prefix}navbar-menu,
520
+ .#{iv.$class-prefix}navbar-start,
521
+ .#{iv.$class-prefix}navbar-end {
522
+ align-items: stretch;
523
+ display: flex;
524
+ }
525
+
526
+ .#{iv.$class-prefix}navbar {
527
+ min-height: cv.getVar("navbar-height");
528
+
529
+ &.#{iv.$class-prefix}is-spaced {
530
+ padding: cv.getVar("navbar-padding-vertical")
531
+ cv.getVar("navbar-padding-horizontal");
532
+
533
+ .#{iv.$class-prefix}navbar-start,
534
+ .#{iv.$class-prefix}navbar-end {
535
+ align-items: center;
536
+ }
537
+
538
+ a.#{iv.$class-prefix}navbar-item,
539
+ .#{iv.$class-prefix}navbar-link {
540
+ border-radius: cv.getVar("radius");
541
+ }
542
+ }
543
+
544
+ &.#{iv.$class-prefix}is-transparent {
545
+ @include cv.register-vars(
546
+ (
547
+ "navbar-item-background-a": 0,
548
+ )
549
+ );
550
+
551
+ .#{iv.$class-prefix}navbar-dropdown {
552
+ a.#{iv.$class-prefix}navbar-item {
553
+ background-color: hsl(
554
+ #{cv.getVar("navbar-h")},
555
+ #{cv.getVar("navbar-s")},
556
+ calc(
557
+ #{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
558
+ "navbar-item-background-l-delta"
559
+ )}
560
+ )
561
+ );
562
+
563
+ &.#{iv.$class-prefix}is-active,
564
+ &.#{iv.$class-prefix}is-selected {
565
+ @include cv.register-vars(
566
+ (
567
+ "navbar-h": #{cv.getVar("navbar-item-selected-h")},
568
+ "navbar-s": #{cv.getVar("navbar-item-selected-s")},
569
+ "navbar-l": #{cv.getVar("navbar-item-selected-l")},
570
+ "navbar-item-background-l": #{cv.getVar(
571
+ "navbar-item-selected-background-l"
572
+ )},
573
+ "navbar-item-color-l": #{cv.getVar(
574
+ "navbar-item-selected-color-l"
575
+ )},
576
+ )
577
+ );
578
+ }
579
+ }
580
+ }
581
+ }
582
+ }
583
+
584
+ .#{iv.$class-prefix}navbar-burger {
585
+ display: none;
586
+ }
587
+
588
+ .#{iv.$class-prefix}navbar-item,
589
+ .#{iv.$class-prefix}navbar-link {
590
+ align-items: center;
591
+ display: flex;
592
+ }
593
+
594
+ .#{iv.$class-prefix}navbar-item {
595
+ &.#{iv.$class-prefix}has-dropdown {
596
+ align-items: stretch;
597
+ }
598
+
599
+ &.#{iv.$class-prefix}has-dropdown-up {
600
+ .#{iv.$class-prefix}navbar-link::after {
601
+ transform: rotate(135deg) translate(0.25em, -0.25em);
602
+ }
603
+
604
+ .#{iv.$class-prefix}navbar-dropdown {
605
+ border-bottom-color: cv.getVar("navbar-dropdown-border-color");
606
+ border-bottom-style: cv.getVar("navbar-dropdown-border-style");
607
+ border-bottom-width: cv.getVar("navbar-dropdown-border-width");
608
+ border-radius: cv.getVar("navbar-dropdown-radius")
609
+ cv.getVar("navbar-dropdown-radius") 0 0;
610
+ border-top: none;
611
+ bottom: 100%;
612
+ box-shadow: 0 -0.5em 0.5em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
613
+ "scheme-s"
614
+ )}, #{cv.getVar("scheme-invert-l")}, 0.1);
615
+ top: auto;
616
+ }
617
+ }
618
+
619
+ &.#{iv.$class-prefix}is-active,
620
+ &.#{iv.$class-prefix}is-hoverable:focus,
621
+ &.#{iv.$class-prefix}is-hoverable:focus-within,
622
+ &.#{iv.$class-prefix}is-hoverable:hover {
623
+ .#{iv.$class-prefix}navbar-dropdown {
624
+ display: block;
625
+
626
+ .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,
627
+ &.#{iv.$class-prefix}is-boxed {
628
+ opacity: 1;
629
+ pointer-events: auto;
630
+ transform: translateY(0);
631
+ }
632
+ }
633
+ }
634
+ }
635
+
636
+ .#{iv.$class-prefix}navbar-menu {
637
+ flex-grow: 1;
638
+ flex-shrink: 0;
639
+ }
640
+
641
+ .#{iv.$class-prefix}navbar-start {
642
+ justify-content: flex-start;
643
+ margin-inline-end: auto;
644
+ }
645
+
646
+ .#{iv.$class-prefix}navbar-end {
647
+ justify-content: flex-end;
648
+ margin-inline-start: auto;
649
+ }
650
+
651
+ .#{iv.$class-prefix}navbar-dropdown {
652
+ background-color: cv.getVar("navbar-dropdown-background-color");
653
+ border-bottom-left-radius: cv.getVar("navbar-dropdown-radius");
654
+ border-bottom-right-radius: cv.getVar("navbar-dropdown-radius");
655
+ border-top-color: cv.getVar("navbar-dropdown-border-color");
656
+ border-top-style: cv.getVar("navbar-dropdown-border-style");
657
+ border-top-width: cv.getVar("navbar-dropdown-border-width");
658
+ box-shadow: 0 0.5em 0.5em
659
+ hsla(
660
+ #{cv.getVar("scheme-h")},
661
+ #{cv.getVar("scheme-s")},
662
+ #{cv.getVar("scheme-invert-l")},
663
+ 0.1
664
+ );
665
+ display: none;
666
+ font-size: 0.875rem;
667
+ inset-inline-start: 0;
668
+ min-width: 100%;
669
+ position: absolute;
670
+ top: 100%;
671
+ z-index: cv.getVar("navbar-dropdown-z");
672
+
673
+ .#{iv.$class-prefix}navbar-item {
674
+ padding: 0.375rem 1rem;
675
+ white-space: nowrap;
676
+ }
677
+
678
+ a.#{iv.$class-prefix}navbar-item {
679
+ padding-inline-end: 3rem;
680
+
681
+ &:not(.is-active, .is-selected) {
682
+ background-color: hsl(
683
+ #{cv.getVar("navbar-dropdown-item-h")},
684
+ #{cv.getVar("navbar-dropdown-item-s")},
685
+ calc(
686
+ #{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar(
687
+ "navbar-item-background-l-delta"
688
+ )}
689
+ )
690
+ );
691
+ color: hsl(
692
+ #{cv.getVar("navbar-dropdown-item-h")},
693
+ #{cv.getVar("navbar-dropdown-item-s")},
694
+ #{cv.getVar("navbar-dropdown-item-color-l")}
695
+ );
696
+ }
697
+ }
698
+
699
+ .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,
700
+ &.#{iv.$class-prefix}is-boxed {
701
+ border-radius: cv.getVar("navbar-dropdown-boxed-radius");
702
+ border-top: none;
703
+ box-shadow: cv.getVar("navbar-dropdown-boxed-shadow");
704
+ display: block;
705
+ opacity: 0;
706
+ pointer-events: none;
707
+ top: calc(100% + (#{cv.getVar("navbar-dropdown-offset")}));
708
+ transform: translateY(-5px);
709
+ transition-duration: cv.getVar("duration");
710
+ transition-property: opacity, transform;
711
+ }
712
+
713
+ &.#{iv.$class-prefix}is-right {
714
+ left: auto;
715
+ right: 0;
716
+ }
717
+ }
718
+
719
+ .#{iv.$class-prefix}navbar-divider {
720
+ display: block;
721
+ }
722
+
723
+ .#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container,
724
+ .#{iv.$class-prefix}container > .#{iv.$class-prefix}navbar {
725
+ .#{iv.$class-prefix}navbar-brand {
726
+ margin-inline-start: -0.75rem;
727
+ }
728
+
729
+ .#{iv.$class-prefix}navbar-menu {
730
+ margin-inline-end: -0.75rem;
731
+ }
732
+ }
733
+
734
+ // Fixed navbar
735
+ .#{iv.$class-prefix}navbar {
736
+ &.#{iv.$class-prefix}is-fixed-bottom-desktop,
737
+ &.#{iv.$class-prefix}is-fixed-top-desktop {
738
+ @include navbar-fixed;
739
+ }
740
+
741
+ &.#{iv.$class-prefix}is-fixed-bottom-desktop {
742
+ bottom: 0;
743
+
744
+ &.#{iv.$class-prefix}has-shadow {
745
+ box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
746
+ "scheme-s"
747
+ )}, #{cv.getVar("scheme-invert-l")}, 0.1);
748
+ }
749
+ }
750
+
751
+ &.#{iv.$class-prefix}is-fixed-top-desktop {
752
+ top: 0;
753
+ }
754
+ }
755
+
756
+ html,
757
+ body {
758
+ &.#{iv.$class-prefix}has-navbar-fixed-top-desktop {
759
+ padding-top: cv.getVar("navbar-height");
760
+ }
761
+
762
+ &.#{iv.$class-prefix}has-navbar-fixed-bottom-desktop {
763
+ padding-bottom: cv.getVar("navbar-height");
764
+ }
765
+
766
+ &.#{iv.$class-prefix}has-spaced-navbar-fixed-top {
767
+ padding-top: calc(
768
+ #{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} *
769
+ 2
770
+ );
771
+ }
772
+
773
+ &.#{iv.$class-prefix}has-spaced-navbar-fixed-bottom {
774
+ padding-bottom: calc(
775
+ #{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} *
776
+ 2
777
+ );
778
+ }
779
+ }
780
+ }
781
+
782
+ // Combination
783
+
784
+ .#{iv.$class-prefix}hero {
785
+ &.#{iv.$class-prefix}is-fullheight-with-navbar {
786
+ min-height: calc(100vh - #{cv.getVar("navbar-height")});
787
+ }
788
+ }