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,172 @@
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
+ $form-colors: dv.$colors !default;
8
+
9
+ $input-h: #{cv.getVar("scheme-h")} !default;
10
+ $input-s: #{cv.getVar("scheme-s")} !default;
11
+ $input-l: #{cv.getVar("scheme-main-l")} !default;
12
+ $input-border-l: cv.getVar("border-l") !default;
13
+ $input-border-l-delta: 0% !default;
14
+ $input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
15
+ $input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
16
+ $input-color-l: cv.getVar("text-strong-l") !default;
17
+ $input-background-l: cv.getVar("scheme-main-l") !default;
18
+ $input-background-l-delta: 0% !default;
19
+ $input-height: cv.getVar("control-height") !default;
20
+ $input-shadow: inset 0 0.0625em 0.125em
21
+ hsla(
22
+ #{cv.getVar("scheme-h")},
23
+ #{cv.getVar("scheme-s")},
24
+ #{cv.getVar("scheme-invert-l")},
25
+ 0.05
26
+ ) !default;
27
+ $input-placeholder-color: hsla(
28
+ #{cv.getVar("text-h")},
29
+ #{cv.getVar("text-s")},
30
+ #{cv.getVar("text-strong-l")},
31
+ 0.3
32
+ ) !default;
33
+
34
+ $input-focus-h: cv.getVar("focus-h") !default;
35
+ $input-focus-s: cv.getVar("focus-s") !default;
36
+ $input-focus-l: cv.getVar("focus-l") !default;
37
+ $input-focus-shadow-size: cv.getVar("focus-shadow-size") !default;
38
+ $input-focus-shadow-alpha: cv.getVar("focus-shadow-alpha") !default;
39
+
40
+ $input-disabled-color: cv.getVar("text-weak") !default;
41
+ $input-disabled-background-color: cv.getVar("background") !default;
42
+ $input-disabled-border-color: cv.getVar("background") !default;
43
+ $input-disabled-placeholder-color: hsla(
44
+ #{cv.getVar("text-h")},
45
+ #{cv.getVar("text-s")},
46
+ #{cv.getVar("text-weak-l")},
47
+ 0.3
48
+ ) !default;
49
+
50
+ $input-arrow: cv.getVar("link") !default;
51
+
52
+ $input-icon-color: cv.getVar("text-light") !default;
53
+ $input-icon-hover-color: cv.getVar("text-weak") !default;
54
+ $input-icon-focus-color: cv.getVar("link") !default;
55
+
56
+ $input-radius: cv.getVar("radius") !default;
57
+
58
+ .#{iv.$class-prefix}control,
59
+ .#{iv.$class-prefix}input,
60
+ .#{iv.$class-prefix}textarea,
61
+ .#{iv.$class-prefix}select {
62
+ @include cv.register-vars(
63
+ (
64
+ "input-h": #{$input-h},
65
+ "input-s": #{$input-s},
66
+ "input-l": #{$input-l},
67
+ "input-border-l": #{$input-border-l},
68
+ "input-border-l-delta": #{$input-border-l-delta},
69
+ "input-hover-border-l-delta": #{$input-hover-border-l-delta},
70
+ "input-active-border-l-delta": #{$input-active-border-l-delta},
71
+ "input-focus-h": #{$input-focus-h},
72
+ "input-focus-s": #{$input-focus-s},
73
+ "input-focus-l": #{$input-focus-l},
74
+ "input-focus-shadow-size": #{$input-focus-shadow-size},
75
+ "input-focus-shadow-alpha": #{$input-focus-shadow-alpha},
76
+ "input-color-l": #{$input-color-l},
77
+ "input-background-l": #{$input-background-l},
78
+ "input-background-l-delta": #{$input-background-l-delta},
79
+ "input-height": #{$input-height},
80
+ "input-shadow": #{$input-shadow},
81
+ "input-placeholder-color": #{$input-placeholder-color},
82
+ "input-disabled-color": #{$input-disabled-color},
83
+ "input-disabled-background-color": #{$input-disabled-background-color},
84
+ "input-disabled-border-color": #{$input-disabled-border-color},
85
+ "input-disabled-placeholder-color": #{$input-disabled-placeholder-color},
86
+ "input-arrow": #{$input-arrow},
87
+ "input-icon-color": #{$input-icon-color},
88
+ "input-icon-hover-color": #{$input-icon-hover-color},
89
+ "input-icon-focus-color": #{$input-icon-focus-color},
90
+ "input-radius": #{$input-radius},
91
+ )
92
+ );
93
+ }
94
+
95
+ @mixin input {
96
+ @extend %control;
97
+ background-color: hsl(
98
+ #{cv.getVar("input-h")},
99
+ #{cv.getVar("input-s")},
100
+ calc(
101
+ #{cv.getVar("input-background-l")} + #{cv.getVar(
102
+ "input-background-l-delta"
103
+ )}
104
+ )
105
+ );
106
+ border-color: hsl(
107
+ cv.getVar("input-h"),
108
+ cv.getVar("input-s"),
109
+ calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
110
+ );
111
+ border-radius: cv.getVar("input-radius");
112
+ color: hsl(
113
+ #{cv.getVar("input-h")},
114
+ #{cv.getVar("input-s")},
115
+ #{cv.getVar("input-color-l")}
116
+ );
117
+
118
+ @include mx.placeholder {
119
+ color: cv.getVar("input-placeholder-color");
120
+ }
121
+
122
+ &:hover,
123
+ &.#{iv.$class-prefix}is-hovered {
124
+ @include cv.register-vars(
125
+ (
126
+ "input-border-l-delta": #{cv.getVar("input-hover-border-l-delta")},
127
+ )
128
+ );
129
+ }
130
+
131
+ &:active,
132
+ &.#{iv.$class-prefix}is-active {
133
+ @include cv.register-vars(
134
+ (
135
+ "input-border-l-delta": #{cv.getVar("input-active-border-l-delta")},
136
+ )
137
+ );
138
+ }
139
+
140
+ &:focus,
141
+ &:focus-within,
142
+ &.#{iv.$class-prefix}is-focused {
143
+ border-color: hsl(
144
+ cv.getVar("input-focus-h"),
145
+ cv.getVar("input-focus-s"),
146
+ cv.getVar("input-focus-l")
147
+ );
148
+ box-shadow: cv.getVar("input-focus-shadow-size")
149
+ hsla(
150
+ cv.getVar("input-focus-h"),
151
+ cv.getVar("input-focus-s"),
152
+ cv.getVar("input-focus-l"),
153
+ cv.getVar("input-focus-shadow-alpha")
154
+ );
155
+ }
156
+
157
+ &[disabled],
158
+ fieldset[disabled] & {
159
+ background-color: cv.getVar("input-disabled-background-color");
160
+ border-color: cv.getVar("input-disabled-border-color");
161
+ box-shadow: none;
162
+ color: cv.getVar("input-disabled-color");
163
+
164
+ @include mx.placeholder {
165
+ color: cv.getVar("input-disabled-placeholder-color");
166
+ }
167
+ }
168
+ }
169
+
170
+ %input {
171
+ @include input;
172
+ }
@@ -0,0 +1,341 @@
1
+ @use "shared";
2
+ @use "../utilities/controls";
3
+ @use "../utilities/css-variables" as cv;
4
+ @use "../utilities/initial-variables" as iv;
5
+ @use "../utilities/extends";
6
+ @use "../utilities/mixins" as mx;
7
+
8
+ $label-color: cv.getVar("text-strong") !default;
9
+ $label-weight: cv.getVar("weight-semibold") !default;
10
+
11
+ $help-size: cv.getVar("size-small") !default;
12
+
13
+ $label-colors: shared.$form-colors !default;
14
+
15
+ .#{iv.$class-prefix}label {
16
+ color: $label-color;
17
+ display: block;
18
+ font-size: cv.getVar("size-normal");
19
+ font-weight: $label-weight;
20
+
21
+ &:not(:last-child) {
22
+ margin-bottom: 0.5em;
23
+ }
24
+
25
+ // Sizes
26
+ &.#{iv.$class-prefix}is-small {
27
+ font-size: cv.getVar("size-small");
28
+ }
29
+
30
+ &.#{iv.$class-prefix}is-medium {
31
+ font-size: cv.getVar("size-medium");
32
+ }
33
+
34
+ &.#{iv.$class-prefix}is-large {
35
+ font-size: cv.getVar("size-large");
36
+ }
37
+ }
38
+
39
+ .#{iv.$class-prefix}help {
40
+ display: block;
41
+ font-size: $help-size;
42
+ margin-top: 0.25rem;
43
+
44
+ @each $name, $pair in $label-colors {
45
+ &.#{iv.$class-prefix}is-#{$name} {
46
+ color: hsl(
47
+ #{cv.getVar($name, "", "-h")},
48
+ #{cv.getVar($name, "", "-s")},
49
+ #{cv.getVar($name, "", "-on-scheme-l")}
50
+ );
51
+ }
52
+ }
53
+ }
54
+
55
+ // Containers
56
+
57
+ .#{iv.$class-prefix}field {
58
+ @include cv.register-vars(
59
+ (
60
+ "block-spacing": 0.75rem,
61
+ )
62
+ );
63
+
64
+ @extend %block;
65
+
66
+ // Modifiers
67
+ &.#{iv.$class-prefix}has-addons {
68
+ display: flex;
69
+ justify-content: flex-start;
70
+
71
+ .#{iv.$class-prefix}control {
72
+ &:not(:last-child) {
73
+ margin-inline-end: -1px;
74
+ }
75
+
76
+ &:not(:first-child):not(:last-child) {
77
+ .#{iv.$class-prefix}button,
78
+ .#{iv.$class-prefix}input,
79
+ .#{iv.$class-prefix}select select {
80
+ border-radius: 0;
81
+ }
82
+ }
83
+
84
+ &:first-child:not(:only-child) {
85
+ .#{iv.$class-prefix}button,
86
+ .#{iv.$class-prefix}input,
87
+ .#{iv.$class-prefix}select select {
88
+ // @include ltr {
89
+ border-bottom-right-radius: 0;
90
+ border-top-right-radius: 0;
91
+ // }
92
+ }
93
+ }
94
+
95
+ &:last-child:not(:only-child) {
96
+ .#{iv.$class-prefix}button,
97
+ .#{iv.$class-prefix}input,
98
+ .#{iv.$class-prefix}select select {
99
+ // @include ltr {
100
+ border-bottom-left-radius: 0;
101
+ border-top-left-radius: 0;
102
+ // }
103
+ }
104
+ }
105
+
106
+ .#{iv.$class-prefix}button,
107
+ .#{iv.$class-prefix}input,
108
+ .#{iv.$class-prefix}select select {
109
+ &:not([disabled]) {
110
+ &:hover,
111
+ &.#{iv.$class-prefix}is-hovered {
112
+ z-index: 2;
113
+ }
114
+
115
+ &:focus,
116
+ &.#{iv.$class-prefix}is-focused,
117
+ &:active,
118
+ &.#{iv.$class-prefix}is-active {
119
+ z-index: 3;
120
+
121
+ &:hover {
122
+ z-index: 4;
123
+ }
124
+ }
125
+ }
126
+ }
127
+
128
+ &.#{iv.$class-prefix}is-expanded {
129
+ flex-grow: 1;
130
+ flex-shrink: 1;
131
+ }
132
+ }
133
+
134
+ &.#{iv.$class-prefix}has-addons-centered {
135
+ justify-content: center;
136
+ }
137
+
138
+ &.#{iv.$class-prefix}has-addons-right {
139
+ justify-content: flex-end;
140
+ }
141
+
142
+ &.#{iv.$class-prefix}has-addons-fullwidth {
143
+ .#{iv.$class-prefix}control {
144
+ flex-grow: 1;
145
+ flex-shrink: 0;
146
+ }
147
+ }
148
+ }
149
+
150
+ &.#{iv.$class-prefix}is-grouped {
151
+ display: flex;
152
+ gap: 0.75rem;
153
+ justify-content: flex-start;
154
+
155
+ & > .#{iv.$class-prefix}control {
156
+ flex-shrink: 0;
157
+
158
+ &.#{iv.$class-prefix}is-expanded {
159
+ flex-grow: 1;
160
+ flex-shrink: 1;
161
+ }
162
+ }
163
+
164
+ &.#{iv.$class-prefix}is-grouped-centered {
165
+ justify-content: center;
166
+ }
167
+
168
+ &.#{iv.$class-prefix}is-grouped-right {
169
+ justify-content: flex-end;
170
+ }
171
+
172
+ &.#{iv.$class-prefix}is-grouped-multiline {
173
+ flex-wrap: wrap;
174
+ }
175
+ }
176
+
177
+ &.#{iv.$class-prefix}is-horizontal {
178
+ @include mx.tablet {
179
+ display: flex;
180
+ }
181
+ }
182
+ }
183
+
184
+ .#{iv.$class-prefix}field-label {
185
+ .#{iv.$class-prefix}label {
186
+ font-size: inherit;
187
+ }
188
+
189
+ @include mx.mobile {
190
+ margin-bottom: 0.5rem;
191
+ }
192
+
193
+ @include mx.tablet {
194
+ flex-basis: 0;
195
+ flex-grow: 1;
196
+ flex-shrink: 0;
197
+ margin-inline-end: 1.5rem;
198
+ text-align: right;
199
+
200
+ &.#{iv.$class-prefix}is-small {
201
+ font-size: cv.getVar("size-small");
202
+ padding-top: 0.375em;
203
+ }
204
+
205
+ &.#{iv.$class-prefix}is-normal {
206
+ padding-top: 0.375em;
207
+ }
208
+
209
+ &.#{iv.$class-prefix}is-medium {
210
+ font-size: cv.getVar("size-medium");
211
+ padding-top: 0.375em;
212
+ }
213
+
214
+ &.#{iv.$class-prefix}is-large {
215
+ font-size: cv.getVar("size-large");
216
+ padding-top: 0.375em;
217
+ }
218
+ }
219
+ }
220
+
221
+ .#{iv.$class-prefix}field-body {
222
+ .#{iv.$class-prefix}field .#{iv.$class-prefix}field {
223
+ margin-bottom: 0;
224
+ }
225
+
226
+ @include mx.tablet {
227
+ display: flex;
228
+ flex-basis: 0;
229
+ flex-grow: 5;
230
+ flex-shrink: 1;
231
+
232
+ .#{iv.$class-prefix}field {
233
+ margin-bottom: 0;
234
+ }
235
+
236
+ & > .#{iv.$class-prefix}field {
237
+ flex-shrink: 1;
238
+
239
+ &:not(.#{iv.$class-prefix}is-narrow) {
240
+ flex-grow: 1;
241
+ }
242
+
243
+ &:not(:last-child) {
244
+ margin-inline-end: 0.75rem;
245
+ }
246
+ }
247
+ }
248
+ }
249
+
250
+ .#{iv.$class-prefix}control {
251
+ box-sizing: border-box;
252
+ clear: both;
253
+ font-size: cv.getVar("size-normal");
254
+ position: relative;
255
+ text-align: inherit;
256
+
257
+ // Modifiers
258
+ &.#{iv.$class-prefix}has-icons-left,
259
+ &.#{iv.$class-prefix}has-icons-right {
260
+ .#{iv.$class-prefix}input,
261
+ .#{iv.$class-prefix}select {
262
+ &:hover {
263
+ & ~ .#{iv.$class-prefix}icon {
264
+ color: cv.getVar("input-icon-hover-color");
265
+ }
266
+ }
267
+
268
+ &:focus {
269
+ & ~ .#{iv.$class-prefix}icon {
270
+ color: cv.getVar("input-icon-focus-color");
271
+ }
272
+ }
273
+
274
+ &.#{iv.$class-prefix}is-small ~ .#{iv.$class-prefix}icon {
275
+ font-size: cv.getVar("size-small");
276
+ }
277
+
278
+ &.#{iv.$class-prefix}is-medium ~ .#{iv.$class-prefix}icon {
279
+ font-size: cv.getVar("size-medium");
280
+ }
281
+
282
+ &.#{iv.$class-prefix}is-large ~ .#{iv.$class-prefix}icon {
283
+ font-size: cv.getVar("size-large");
284
+ }
285
+ }
286
+
287
+ .#{iv.$class-prefix}icon {
288
+ color: cv.getVar("input-icon-color");
289
+ height: cv.getVar("input-height");
290
+ pointer-events: none;
291
+ position: absolute;
292
+ top: 0;
293
+ width: cv.getVar("input-height");
294
+ z-index: 4;
295
+ }
296
+ }
297
+
298
+ &.#{iv.$class-prefix}has-icons-left {
299
+ .#{iv.$class-prefix}input,
300
+ .#{iv.$class-prefix}select select {
301
+ padding-left: cv.getVar("input-height");
302
+ }
303
+
304
+ .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-left {
305
+ left: 0;
306
+ }
307
+ }
308
+
309
+ &.#{iv.$class-prefix}has-icons-right {
310
+ .#{iv.$class-prefix}input,
311
+ .#{iv.$class-prefix}select select {
312
+ padding-right: cv.getVar("input-height");
313
+ }
314
+
315
+ .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-right {
316
+ right: 0;
317
+ }
318
+ }
319
+
320
+ &.#{iv.$class-prefix}is-loading {
321
+ &::after {
322
+ @extend %loader;
323
+ inset-inline-end: 0.75em;
324
+ position: absolute !important;
325
+ top: 0.75em;
326
+ z-index: 4;
327
+ }
328
+
329
+ &.#{iv.$class-prefix}is-small:after {
330
+ font-size: cv.getVar("size-small");
331
+ }
332
+
333
+ &.#{iv.$class-prefix}is-medium:after {
334
+ font-size: cv.getVar("size-medium");
335
+ }
336
+
337
+ &.#{iv.$class-prefix}is-large:after {
338
+ font-size: cv.getVar("size-large");
339
+ }
340
+ }
341
+ }
@@ -0,0 +1,5 @@
1
+ /* Bulma Grid */
2
+ @charset "utf-8";
3
+
4
+ @forward "columns";
5
+ @forward "grid";