bulma-rails 0.9.0 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (140) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +49 -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 +126 -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 +640 -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 +143 -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 +145 -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 +86 -106
  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 +80 -67
  80. data/app/assets/stylesheets/bulma.sass +0 -10
  81. data/app/assets/stylesheets/sass/base/_all.sass +0 -4
  82. data/app/assets/stylesheets/sass/base/generic.sass +0 -142
  83. data/app/assets/stylesheets/sass/base/helpers.sass +0 -1
  84. data/app/assets/stylesheets/sass/base/minireset.sass +0 -79
  85. data/app/assets/stylesheets/sass/components/_all.sass +0 -14
  86. data/app/assets/stylesheets/sass/components/breadcrumb.sass +0 -75
  87. data/app/assets/stylesheets/sass/components/card.sass +0 -79
  88. data/app/assets/stylesheets/sass/components/dropdown.sass +0 -81
  89. data/app/assets/stylesheets/sass/components/level.sass +0 -77
  90. data/app/assets/stylesheets/sass/components/media.sass +0 -52
  91. data/app/assets/stylesheets/sass/components/menu.sass +0 -57
  92. data/app/assets/stylesheets/sass/components/message.sass +0 -99
  93. data/app/assets/stylesheets/sass/components/modal.sass +0 -113
  94. data/app/assets/stylesheets/sass/components/navbar.sass +0 -441
  95. data/app/assets/stylesheets/sass/components/pagination.sass +0 -150
  96. data/app/assets/stylesheets/sass/components/panel.sass +0 -119
  97. data/app/assets/stylesheets/sass/components/tabs.sass +0 -174
  98. data/app/assets/stylesheets/sass/elements/_all.sass +0 -15
  99. data/app/assets/stylesheets/sass/elements/box.sass +0 -24
  100. data/app/assets/stylesheets/sass/elements/button.sass +0 -323
  101. data/app/assets/stylesheets/sass/elements/container.sass +0 -24
  102. data/app/assets/stylesheets/sass/elements/content.sass +0 -155
  103. data/app/assets/stylesheets/sass/elements/form.sass +0 -1
  104. data/app/assets/stylesheets/sass/elements/icon.sass +0 -21
  105. data/app/assets/stylesheets/sass/elements/image.sass +0 -71
  106. data/app/assets/stylesheets/sass/elements/notification.sass +0 -48
  107. data/app/assets/stylesheets/sass/elements/other.sass +0 -39
  108. data/app/assets/stylesheets/sass/elements/progress.sass +0 -67
  109. data/app/assets/stylesheets/sass/elements/table.sass +0 -129
  110. data/app/assets/stylesheets/sass/elements/tag.sass +0 -136
  111. data/app/assets/stylesheets/sass/elements/title.sass +0 -70
  112. data/app/assets/stylesheets/sass/form/_all.sass +0 -8
  113. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +0 -21
  114. data/app/assets/stylesheets/sass/form/file.sass +0 -180
  115. data/app/assets/stylesheets/sass/form/input-textarea.sass +0 -64
  116. data/app/assets/stylesheets/sass/form/select.sass +0 -85
  117. data/app/assets/stylesheets/sass/form/shared.sass +0 -55
  118. data/app/assets/stylesheets/sass/form/tools.sass +0 -213
  119. data/app/assets/stylesheets/sass/grid/_all.sass +0 -4
  120. data/app/assets/stylesheets/sass/grid/columns.sass +0 -504
  121. data/app/assets/stylesheets/sass/grid/tiles.sass +0 -34
  122. data/app/assets/stylesheets/sass/helpers/_all.sass +0 -10
  123. data/app/assets/stylesheets/sass/helpers/color.sass +0 -37
  124. data/app/assets/stylesheets/sass/helpers/float.sass +0 -8
  125. data/app/assets/stylesheets/sass/helpers/other.sass +0 -8
  126. data/app/assets/stylesheets/sass/helpers/overflow.sass +0 -2
  127. data/app/assets/stylesheets/sass/helpers/position.sass +0 -5
  128. data/app/assets/stylesheets/sass/helpers/spacing.sass +0 -28
  129. data/app/assets/stylesheets/sass/helpers/typography.sass +0 -98
  130. data/app/assets/stylesheets/sass/helpers/visibility.sass +0 -122
  131. data/app/assets/stylesheets/sass/layout/_all.sass +0 -5
  132. data/app/assets/stylesheets/sass/layout/footer.sass +0 -9
  133. data/app/assets/stylesheets/sass/layout/hero.sass +0 -145
  134. data/app/assets/stylesheets/sass/layout/section.sass +0 -13
  135. data/app/assets/stylesheets/sass/utilities/_all.sass +0 -8
  136. data/app/assets/stylesheets/sass/utilities/animations.sass +0 -5
  137. data/app/assets/stylesheets/sass/utilities/controls.sass +0 -50
  138. data/app/assets/stylesheets/sass/utilities/functions.sass +0 -115
  139. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -78
  140. data/app/assets/stylesheets/sass/utilities/mixins.sass +0 -285
@@ -0,0 +1,273 @@
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
+ $tabs-border-bottom-color: cv.getVar("border") !default;
8
+ $tabs-border-bottom-style: solid !default;
9
+ $tabs-border-bottom-width: 1px !default;
10
+ $tabs-link-color: cv.getVar("text") !default;
11
+ $tabs-link-hover-border-bottom-color: cv.getVar("text-strong") !default;
12
+ $tabs-link-hover-color: cv.getVar("text-strong") !default;
13
+ $tabs-link-active-border-bottom-color: cv.getVar("link-text") !default;
14
+ $tabs-link-active-color: cv.getVar("link-text") !default;
15
+ $tabs-link-padding: 0.5em 1em !default;
16
+
17
+ $tabs-boxed-link-radius: cv.getVar("radius") !default;
18
+ $tabs-boxed-link-hover-background-color: cv.getVar("background") !default;
19
+ $tabs-boxed-link-hover-border-bottom-color: cv.getVar("border") !default;
20
+
21
+ $tabs-boxed-link-active-background-color: cv.getVar("scheme-main") !default;
22
+ $tabs-boxed-link-active-border-color: cv.getVar("border") !default;
23
+ $tabs-boxed-link-active-border-bottom-color: transparent !default;
24
+
25
+ $tabs-toggle-link-border-color: cv.getVar("border") !default;
26
+ $tabs-toggle-link-border-style: solid !default;
27
+ $tabs-toggle-link-border-width: 1px !default;
28
+ $tabs-toggle-link-hover-background-color: cv.getVar("background") !default;
29
+ $tabs-toggle-link-hover-border-color: cv.getVar("border-hover") !default;
30
+ $tabs-toggle-link-radius: cv.getVar("radius") !default;
31
+ $tabs-toggle-link-active-background-color: cv.getVar("link") !default;
32
+ $tabs-toggle-link-active-border-color: cv.getVar("link") !default;
33
+ $tabs-toggle-link-active-color: cv.getVar("link-invert") !default;
34
+
35
+ .#{iv.$class-prefix}tabs {
36
+ @include cv.register-vars(
37
+ (
38
+ "tabs-border-bottom-color": #{$tabs-border-bottom-color},
39
+ "tabs-border-bottom-style": #{$tabs-border-bottom-style},
40
+ "tabs-border-bottom-width": #{$tabs-border-bottom-width},
41
+ "tabs-link-color": #{$tabs-link-color},
42
+ "tabs-link-hover-border-bottom-color": #{$tabs-link-hover-border-bottom-color},
43
+ "tabs-link-hover-color": #{$tabs-link-hover-color},
44
+ "tabs-link-active-border-bottom-color": #{$tabs-link-active-border-bottom-color},
45
+ "tabs-link-active-color": #{$tabs-link-active-color},
46
+ "tabs-link-padding": #{$tabs-link-padding},
47
+ "tabs-boxed-link-radius": #{$tabs-boxed-link-radius},
48
+ "tabs-boxed-link-hover-background-color": #{$tabs-boxed-link-hover-background-color},
49
+ "tabs-boxed-link-hover-border-bottom-color": #{$tabs-boxed-link-hover-border-bottom-color},
50
+ "tabs-boxed-link-active-background-color": #{$tabs-boxed-link-active-background-color},
51
+ "tabs-boxed-link-active-border-color": #{$tabs-boxed-link-active-border-color},
52
+ "tabs-boxed-link-active-border-bottom-color": #{$tabs-boxed-link-active-border-bottom-color},
53
+ "tabs-toggle-link-border-color": #{$tabs-toggle-link-border-color},
54
+ "tabs-toggle-link-border-style": #{$tabs-toggle-link-border-style},
55
+ "tabs-toggle-link-border-width": #{$tabs-toggle-link-border-width},
56
+ "tabs-toggle-link-hover-background-color": #{$tabs-toggle-link-hover-background-color},
57
+ "tabs-toggle-link-hover-border-color": #{$tabs-toggle-link-hover-border-color},
58
+ "tabs-toggle-link-radius": #{$tabs-toggle-link-radius},
59
+ "tabs-toggle-link-active-background-color": #{$tabs-toggle-link-active-background-color},
60
+ "tabs-toggle-link-active-border-color": #{$tabs-toggle-link-active-border-color},
61
+ "tabs-toggle-link-active-color": #{$tabs-toggle-link-active-color},
62
+ )
63
+ );
64
+ }
65
+
66
+ .#{iv.$class-prefix}tabs {
67
+ @extend %block;
68
+ @extend %unselectable;
69
+ @include mx.overflow-touch;
70
+ align-items: stretch;
71
+ display: flex;
72
+ font-size: cv.getVar("size-normal");
73
+ justify-content: space-between;
74
+ overflow: hidden;
75
+ overflow-x: auto;
76
+ white-space: nowrap;
77
+
78
+ a {
79
+ align-items: center;
80
+ border-bottom-color: cv.getVar("tabs-border-bottom-color");
81
+ border-bottom-style: cv.getVar("tabs-border-bottom-style");
82
+ border-bottom-width: cv.getVar("tabs-border-bottom-width");
83
+ color: cv.getVar("tabs-link-color");
84
+ display: flex;
85
+ justify-content: center;
86
+ margin-bottom: calc(-1 * #{cv.getVar("tabs-border-bottom-width")});
87
+ padding: cv.getVar("tabs-link-padding");
88
+ transition-duration: cv.getVar("duration");
89
+ transition-property: background-color, border-color, color;
90
+ vertical-align: top;
91
+
92
+ &:hover {
93
+ border-bottom-color: cv.getVar("tabs-link-hover-border-bottom-color");
94
+ color: cv.getVar("tabs-link-hover-color");
95
+ }
96
+ }
97
+
98
+ li {
99
+ display: block;
100
+
101
+ &.#{iv.$class-prefix}is-active {
102
+ a {
103
+ border-bottom-color: cv.getVar("tabs-link-active-border-bottom-color");
104
+ color: cv.getVar("tabs-link-active-color");
105
+ }
106
+ }
107
+ }
108
+
109
+ ul {
110
+ align-items: center;
111
+ border-bottom-color: cv.getVar("tabs-border-bottom-color");
112
+ border-bottom-style: cv.getVar("tabs-border-bottom-style");
113
+ border-bottom-width: cv.getVar("tabs-border-bottom-width");
114
+ display: flex;
115
+ flex-grow: 1;
116
+ flex-shrink: 0;
117
+ justify-content: flex-start;
118
+
119
+ &.#{iv.$class-prefix}is-left {
120
+ padding-right: 0.75em;
121
+ }
122
+
123
+ &.#{iv.$class-prefix}is-center {
124
+ flex: none;
125
+ justify-content: center;
126
+ padding-left: 0.75em;
127
+ padding-right: 0.75em;
128
+ }
129
+
130
+ &.#{iv.$class-prefix}is-right {
131
+ justify-content: flex-end;
132
+ padding-left: 0.75em;
133
+ }
134
+ }
135
+
136
+ .#{iv.$class-prefix}icon {
137
+ &:first-child {
138
+ margin-inline-end: 0.5em;
139
+ }
140
+
141
+ &:last-child {
142
+ margin-inline-start: 0.5em;
143
+ }
144
+ }
145
+
146
+ // Alignment
147
+ &.#{iv.$class-prefix}is-centered {
148
+ ul {
149
+ justify-content: center;
150
+ }
151
+ }
152
+
153
+ &.#{iv.$class-prefix}is-right {
154
+ ul {
155
+ justify-content: flex-end;
156
+ }
157
+ }
158
+
159
+ // Styles
160
+ &.#{iv.$class-prefix}is-boxed {
161
+ a {
162
+ border: 1px solid transparent;
163
+ border-start-start-radius: cv.getVar("tabs-boxed-link-radius");
164
+ border-start-end-radius: cv.getVar("tabs-boxed-link-radius");
165
+
166
+ &:hover {
167
+ background-color: cv.getVar("tabs-boxed-link-hover-background-color");
168
+ border-bottom-color: cv.getVar(
169
+ "tabs-boxed-link-hover-border-bottom-color"
170
+ );
171
+ }
172
+ }
173
+
174
+ li {
175
+ &.#{iv.$class-prefix}is-active {
176
+ a {
177
+ background-color: cv.getVar(
178
+ "tabs-boxed-link-active-background-color"
179
+ );
180
+ border-color: cv.getVar("tabs-boxed-link-active-border-color");
181
+ border-bottom-color: cv.getVar(
182
+ "tabs-boxed-link-active-border-bottom-color"
183
+ ) !important;
184
+ }
185
+ }
186
+ }
187
+ }
188
+
189
+ &.#{iv.$class-prefix}is-fullwidth {
190
+ li {
191
+ flex-grow: 1;
192
+ flex-shrink: 0;
193
+ }
194
+ }
195
+
196
+ &.#{iv.$class-prefix}is-toggle {
197
+ a {
198
+ border-color: cv.getVar("tabs-toggle-link-border-color");
199
+ border-style: cv.getVar("tabs-toggle-link-border-style");
200
+ border-width: cv.getVar("tabs-toggle-link-border-width");
201
+ margin-bottom: 0;
202
+ position: relative;
203
+
204
+ &:hover {
205
+ background-color: cv.getVar("tabs-toggle-link-hover-background-color");
206
+ border-color: cv.getVar("tabs-toggle-link-hover-border-color");
207
+ z-index: 2;
208
+ }
209
+ }
210
+
211
+ li {
212
+ & + li {
213
+ margin-inline-start: calc(
214
+ -1 * #{cv.getVar("tabs-toggle-link-border-width")}
215
+ );
216
+ }
217
+
218
+ &:first-child a {
219
+ border-start-start-radius: cv.getVar("tabs-toggle-link-radius");
220
+ border-end-start-radius: cv.getVar("tabs-toggle-link-radius");
221
+ }
222
+
223
+ &:last-child a {
224
+ border-start-end-radius: cv.getVar("tabs-toggle-link-radius");
225
+ border-end-end-radius: cv.getVar("tabs-toggle-link-radius");
226
+ }
227
+
228
+ &.#{iv.$class-prefix}is-active {
229
+ a {
230
+ background-color: cv.getVar(
231
+ "tabs-toggle-link-active-background-color"
232
+ );
233
+ border-color: cv.getVar("tabs-toggle-link-active-border-color");
234
+ color: cv.getVar("tabs-toggle-link-active-color");
235
+ z-index: 1;
236
+ }
237
+ }
238
+ }
239
+
240
+ ul {
241
+ border-bottom: none;
242
+ }
243
+
244
+ &.#{iv.$class-prefix}is-toggle-rounded {
245
+ li {
246
+ &:first-child a {
247
+ border-start-start-radius: cv.getVar("radius-rounded");
248
+ border-end-start-radius: cv.getVar("radius-rounded");
249
+ padding-inline-start: 1.25em;
250
+ }
251
+
252
+ &:last-child a {
253
+ border-start-end-radius: cv.getVar("radius-rounded");
254
+ border-end-end-radius: cv.getVar("radius-rounded");
255
+ padding-inline-end: 1.25em;
256
+ }
257
+ }
258
+ }
259
+ }
260
+
261
+ // Sizes
262
+ &.#{iv.$class-prefix}is-small {
263
+ font-size: cv.getVar("size-small");
264
+ }
265
+
266
+ &.#{iv.$class-prefix}is-medium {
267
+ font-size: cv.getVar("size-medium");
268
+ }
269
+
270
+ &.#{iv.$class-prefix}is-large {
271
+ font-size: cv.getVar("size-large");
272
+ }
273
+ }
@@ -0,0 +1,16 @@
1
+ /* Bulma Elements */
2
+ @charset "utf-8";
3
+
4
+ @forward "block";
5
+ @forward "box";
6
+ @forward "button";
7
+ @forward "content";
8
+ @forward "delete";
9
+ @forward "icon";
10
+ @forward "image";
11
+ @forward "loader";
12
+ @forward "notification";
13
+ @forward "progress";
14
+ @forward "table";
15
+ @forward "tag";
16
+ @forward "title";
@@ -0,0 +1,6 @@
1
+ @use "../utilities/initial-variables" as iv;
2
+ @use "../utilities/extends";
3
+
4
+ .#{iv.$class-prefix}block {
5
+ @extend %block;
6
+ }
@@ -0,0 +1,59 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/extends";
4
+
5
+ $box-background-color: cv.getVar("scheme-main") !default;
6
+ $box-color: cv.getVar("text") !default;
7
+ $box-radius: cv.getVar("radius-large") !default;
8
+ $box-shadow: cv.getVar("shadow") !default;
9
+ $box-padding: 1.25rem !default;
10
+
11
+ $box-link-hover-shadow:
12
+ 0 0.5em 1em -0.125em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar("scheme-s")}, #{cv.getVar(
13
+ "scheme-invert-l"
14
+ )}, 0.1),
15
+ 0 0 0 1px cv.getVar("link") !default;
16
+ $box-link-active-shadow:
17
+ inset 0 1px 2px
18
+ hsla(
19
+ #{cv.getVar("scheme-h")},
20
+ #{cv.getVar("scheme-s")},
21
+ #{cv.getVar("scheme-invert-l")},
22
+ 0.2
23
+ ),
24
+ 0 0 0 1px cv.getVar("link") !default;
25
+
26
+ .#{iv.$class-prefix}box {
27
+ @include cv.register-vars(
28
+ (
29
+ "box-background-color": #{$box-background-color},
30
+ "box-color": #{$box-color},
31
+ "box-radius": #{$box-radius},
32
+ "box-shadow": #{$box-shadow},
33
+ "box-padding": #{$box-padding},
34
+ "box-link-hover-shadow": #{$box-link-hover-shadow},
35
+ "box-link-active-shadow": #{$box-link-active-shadow},
36
+ )
37
+ );
38
+ }
39
+
40
+ .#{iv.$class-prefix}box {
41
+ @extend %block;
42
+ background-color: cv.getVar("box-background-color");
43
+ border-radius: cv.getVar("box-radius");
44
+ box-shadow: cv.getVar("box-shadow");
45
+ color: cv.getVar("box-color");
46
+ display: block;
47
+ padding: cv.getVar("box-padding");
48
+ }
49
+
50
+ a.#{iv.$class-prefix}box {
51
+ &:hover,
52
+ &:focus {
53
+ box-shadow: cv.getVar("box-link-hover-shadow");
54
+ }
55
+
56
+ &:active {
57
+ box-shadow: cv.getVar("box-link-active-shadow");
58
+ }
59
+ }