bulma-rails 0.9.3 → 1.0.0

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 +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 +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 -166
  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 -345
  102. data/app/assets/stylesheets/sass/elements/container.sass +0 -29
  103. data/app/assets/stylesheets/sass/elements/content.sass +0 -159
  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 -133
  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 -87
  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 -136
  143. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -78
  144. data/app/assets/stylesheets/sass/utilities/mixins.sass +0 -280
@@ -1,31 +0,0 @@
1
- @import "../utilities/mixins"
2
-
3
- .block
4
- @extend %block
5
-
6
- .delete
7
- @extend %delete
8
-
9
- .heading
10
- display: block
11
- font-size: 11px
12
- letter-spacing: 1px
13
- margin-bottom: 5px
14
- text-transform: uppercase
15
-
16
- .loader
17
- @extend %loader
18
-
19
- .number
20
- align-items: center
21
- background-color: $background
22
- border-radius: $radius-rounded
23
- display: inline-flex
24
- font-size: $size-medium
25
- height: 2em
26
- justify-content: center
27
- margin-right: 1.5rem
28
- min-width: 2.5em
29
- padding: 0.25rem 0.5rem
30
- text-align: center
31
- vertical-align: top
@@ -1,73 +0,0 @@
1
- @import "../utilities/mixins"
2
-
3
- $progress-bar-background-color: $border-light !default
4
- $progress-value-background-color: $text !default
5
- $progress-border-radius: $radius-rounded !default
6
-
7
- $progress-indeterminate-duration: 1.5s !default
8
-
9
- $progress-colors: $colors !default
10
-
11
- .progress
12
- @extend %block
13
- -moz-appearance: none
14
- -webkit-appearance: none
15
- border: none
16
- border-radius: $progress-border-radius
17
- display: block
18
- height: $size-normal
19
- overflow: hidden
20
- padding: 0
21
- width: 100%
22
- &::-webkit-progress-bar
23
- background-color: $progress-bar-background-color
24
- &::-webkit-progress-value
25
- background-color: $progress-value-background-color
26
- &::-moz-progress-bar
27
- background-color: $progress-value-background-color
28
- &::-ms-fill
29
- background-color: $progress-value-background-color
30
- border: none
31
- // Colors
32
- @each $name, $pair in $progress-colors
33
- $color: nth($pair, 1)
34
- &.is-#{$name}
35
- &::-webkit-progress-value
36
- background-color: $color
37
- &::-moz-progress-bar
38
- background-color: $color
39
- &::-ms-fill
40
- background-color: $color
41
- &:indeterminate
42
- background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
43
-
44
- &:indeterminate
45
- animation-duration: $progress-indeterminate-duration
46
- animation-iteration-count: infinite
47
- animation-name: moveIndeterminate
48
- animation-timing-function: linear
49
- background-color: $progress-bar-background-color
50
- background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
51
- background-position: top left
52
- background-repeat: no-repeat
53
- background-size: 150% 150%
54
- &::-webkit-progress-bar
55
- background-color: transparent
56
- &::-moz-progress-bar
57
- background-color: transparent
58
- &::-ms-fill
59
- animation-name: none
60
-
61
- // Sizes
62
- &.is-small
63
- height: $size-small
64
- &.is-medium
65
- height: $size-medium
66
- &.is-large
67
- height: $size-large
68
-
69
- @keyframes moveIndeterminate
70
- from
71
- background-position: 200% 0
72
- to
73
- background-position: -200% 0
@@ -1,133 +0,0 @@
1
- @import "../utilities/mixins"
2
-
3
- $table-color: $text-strong !default
4
- $table-background-color: $scheme-main !default
5
-
6
- $table-cell-border: 1px solid $border !default
7
- $table-cell-border-width: 0 0 1px !default
8
- $table-cell-padding: 0.5em 0.75em !default
9
- $table-cell-heading-color: $text-strong !default
10
-
11
- $table-head-cell-border-width: 0 0 2px !default
12
- $table-head-cell-color: $text-strong !default
13
- $table-foot-cell-border-width: 2px 0 0 !default
14
- $table-foot-cell-color: $text-strong !default
15
-
16
- $table-head-background-color: transparent !default
17
- $table-body-background-color: transparent !default
18
- $table-foot-background-color: transparent !default
19
-
20
- $table-row-hover-background-color: $scheme-main-bis !default
21
-
22
- $table-row-active-background-color: $primary !default
23
- $table-row-active-color: $primary-invert !default
24
-
25
- $table-striped-row-even-background-color: $scheme-main-bis !default
26
- $table-striped-row-even-hover-background-color: $scheme-main-ter !default
27
-
28
- $table-colors: $colors !default
29
-
30
- .table
31
- @extend %block
32
- background-color: $table-background-color
33
- color: $table-color
34
- td,
35
- th
36
- border: $table-cell-border
37
- border-width: $table-cell-border-width
38
- padding: $table-cell-padding
39
- vertical-align: top
40
- // Colors
41
- @each $name, $pair in $table-colors
42
- $color: nth($pair, 1)
43
- $color-invert: nth($pair, 2)
44
- &.is-#{$name}
45
- background-color: $color
46
- border-color: $color
47
- color: $color-invert
48
- // Modifiers
49
- &.is-narrow
50
- white-space: nowrap
51
- width: 1%
52
- &.is-selected
53
- background-color: $table-row-active-background-color
54
- color: $table-row-active-color
55
- a,
56
- strong
57
- color: currentColor
58
- &.is-vcentered
59
- vertical-align: middle
60
- th
61
- color: $table-cell-heading-color
62
- &:not([align])
63
- text-align: inherit
64
- tr
65
- &.is-selected
66
- background-color: $table-row-active-background-color
67
- color: $table-row-active-color
68
- a,
69
- strong
70
- color: currentColor
71
- td,
72
- th
73
- border-color: $table-row-active-color
74
- color: currentColor
75
- thead
76
- background-color: $table-head-background-color
77
- td,
78
- th
79
- border-width: $table-head-cell-border-width
80
- color: $table-head-cell-color
81
- tfoot
82
- background-color: $table-foot-background-color
83
- td,
84
- th
85
- border-width: $table-foot-cell-border-width
86
- color: $table-foot-cell-color
87
- tbody
88
- background-color: $table-body-background-color
89
- tr
90
- &:last-child
91
- td,
92
- th
93
- border-bottom-width: 0
94
- // Modifiers
95
- &.is-bordered
96
- td,
97
- th
98
- border-width: 1px
99
- tr
100
- &:last-child
101
- td,
102
- th
103
- border-bottom-width: 1px
104
- &.is-fullwidth
105
- width: 100%
106
- &.is-hoverable
107
- tbody
108
- tr:not(.is-selected)
109
- &:hover
110
- background-color: $table-row-hover-background-color
111
- &.is-striped
112
- tbody
113
- tr:not(.is-selected)
114
- &:hover
115
- background-color: $table-row-hover-background-color
116
- &:nth-child(even)
117
- background-color: $table-striped-row-even-hover-background-color
118
- &.is-narrow
119
- td,
120
- th
121
- padding: 0.25em 0.5em
122
- &.is-striped
123
- tbody
124
- tr:not(.is-selected)
125
- &:nth-child(even)
126
- background-color: $table-striped-row-even-background-color
127
-
128
- .table-container
129
- @extend %block
130
- +overflow-touch
131
- overflow: auto
132
- overflow-y: hidden
133
- max-width: 100%
@@ -1,140 +0,0 @@
1
- @import "../utilities/mixins"
2
-
3
- $tag-background-color: $background !default
4
- $tag-color: $text !default
5
- $tag-radius: $radius !default
6
- $tag-delete-margin: 1px !default
7
-
8
- $tag-colors: $colors !default
9
-
10
- .tags
11
- align-items: center
12
- display: flex
13
- flex-wrap: wrap
14
- justify-content: flex-start
15
- .tag
16
- margin-bottom: 0.5rem
17
- &:not(:last-child)
18
- +ltr-property("margin", 0.5rem)
19
- &:last-child
20
- margin-bottom: -0.5rem
21
- &:not(:last-child)
22
- margin-bottom: 1rem
23
- // Sizes
24
- &.are-medium
25
- .tag:not(.is-normal):not(.is-large)
26
- font-size: $size-normal
27
- &.are-large
28
- .tag:not(.is-normal):not(.is-medium)
29
- font-size: $size-medium
30
- &.is-centered
31
- justify-content: center
32
- .tag
33
- margin-right: 0.25rem
34
- margin-left: 0.25rem
35
- &.is-right
36
- justify-content: flex-end
37
- .tag
38
- &:not(:first-child)
39
- margin-left: 0.5rem
40
- &:not(:last-child)
41
- margin-right: 0
42
- &.has-addons
43
- .tag
44
- +ltr-property("margin", 0)
45
- &:not(:first-child)
46
- +ltr-property("margin", 0, false)
47
- +ltr
48
- border-top-left-radius: 0
49
- border-bottom-left-radius: 0
50
- +rtl
51
- border-top-right-radius: 0
52
- border-bottom-right-radius: 0
53
- &:not(:last-child)
54
- +ltr
55
- border-top-right-radius: 0
56
- border-bottom-right-radius: 0
57
- +rtl
58
- border-top-left-radius: 0
59
- border-bottom-left-radius: 0
60
-
61
- .tag:not(body)
62
- align-items: center
63
- background-color: $tag-background-color
64
- border-radius: $tag-radius
65
- color: $tag-color
66
- display: inline-flex
67
- font-size: $size-small
68
- height: 2em
69
- justify-content: center
70
- line-height: 1.5
71
- padding-left: 0.75em
72
- padding-right: 0.75em
73
- white-space: nowrap
74
- .delete
75
- +ltr-property("margin", 0.25rem, false)
76
- +ltr-property("margin", -0.375rem)
77
- // Colors
78
- @each $name, $pair in $tag-colors
79
- $color: nth($pair, 1)
80
- $color-invert: nth($pair, 2)
81
- &.is-#{$name}
82
- background-color: $color
83
- color: $color-invert
84
- // If a light and dark colors are provided
85
- @if length($pair) > 3
86
- $color-light: nth($pair, 3)
87
- $color-dark: nth($pair, 4)
88
- &.is-light
89
- background-color: $color-light
90
- color: $color-dark
91
- // Sizes
92
- &.is-normal
93
- font-size: $size-small
94
- &.is-medium
95
- font-size: $size-normal
96
- &.is-large
97
- font-size: $size-medium
98
- .icon
99
- &:first-child:not(:last-child)
100
- +ltr-property("margin", -0.375em, false)
101
- +ltr-property("margin", 0.1875em)
102
- &:last-child:not(:first-child)
103
- +ltr-property("margin", 0.1875em, false)
104
- +ltr-property("margin", -0.375em)
105
- &:first-child:last-child
106
- +ltr-property("margin", -0.375em, false)
107
- +ltr-property("margin", -0.375em)
108
- // Modifiers
109
- &.is-delete
110
- +ltr-property("margin", $tag-delete-margin, false)
111
- padding: 0
112
- position: relative
113
- width: 2em
114
- &::before,
115
- &::after
116
- background-color: currentColor
117
- content: ""
118
- display: block
119
- left: 50%
120
- position: absolute
121
- top: 50%
122
- transform: translateX(-50%) translateY(-50%) rotate(45deg)
123
- transform-origin: center center
124
- &::before
125
- height: 1px
126
- width: 50%
127
- &::after
128
- height: 50%
129
- width: 1px
130
- &:hover,
131
- &:focus
132
- background-color: darken($tag-background-color, 5%)
133
- &:active
134
- background-color: darken($tag-background-color, 10%)
135
- &.is-rounded
136
- border-radius: $radius-rounded
137
-
138
- a.tag
139
- &:hover
140
- text-decoration: underline
@@ -1,70 +0,0 @@
1
- @import "../utilities/mixins"
2
-
3
- $title-color: $text-strong !default
4
- $title-family: false !default
5
- $title-size: $size-3 !default
6
- $title-weight: $weight-semibold !default
7
- $title-line-height: 1.125 !default
8
- $title-strong-color: inherit !default
9
- $title-strong-weight: inherit !default
10
- $title-sub-size: 0.75em !default
11
- $title-sup-size: 0.75em !default
12
-
13
- $subtitle-color: $text !default
14
- $subtitle-family: false !default
15
- $subtitle-size: $size-5 !default
16
- $subtitle-weight: $weight-normal !default
17
- $subtitle-line-height: 1.25 !default
18
- $subtitle-strong-color: $text-strong !default
19
- $subtitle-strong-weight: $weight-semibold !default
20
- $subtitle-negative-margin: -1.25rem !default
21
-
22
- .title,
23
- .subtitle
24
- @extend %block
25
- word-break: break-word
26
- em,
27
- span
28
- font-weight: inherit
29
- sub
30
- font-size: $title-sub-size
31
- sup
32
- font-size: $title-sup-size
33
- .tag
34
- vertical-align: middle
35
-
36
- .title
37
- color: $title-color
38
- @if $title-family
39
- font-family: $title-family
40
- font-size: $title-size
41
- font-weight: $title-weight
42
- line-height: $title-line-height
43
- strong
44
- color: $title-strong-color
45
- font-weight: $title-strong-weight
46
- &:not(.is-spaced) + .subtitle
47
- margin-top: $subtitle-negative-margin
48
- // Sizes
49
- @each $size in $sizes
50
- $i: index($sizes, $size)
51
- &.is-#{$i}
52
- font-size: $size
53
-
54
- .subtitle
55
- color: $subtitle-color
56
- @if $subtitle-family
57
- font-family: $subtitle-family
58
- font-size: $subtitle-size
59
- font-weight: $subtitle-weight
60
- line-height: $subtitle-line-height
61
- strong
62
- color: $subtitle-strong-color
63
- font-weight: $subtitle-strong-weight
64
- &:not(.is-spaced) + .title
65
- margin-top: $subtitle-negative-margin
66
- // Sizes
67
- @each $size in $sizes
68
- $i: index($sizes, $size)
69
- &.is-#{$i}
70
- font-size: $size
@@ -1,9 +0,0 @@
1
- /* Bulma Form */
2
- @charset "utf-8"
3
-
4
- @import "shared"
5
- @import "input-textarea"
6
- @import "checkbox-radio"
7
- @import "select"
8
- @import "file"
9
- @import "tools"
@@ -1,22 +0,0 @@
1
- %checkbox-radio
2
- cursor: pointer
3
- display: inline-block
4
- line-height: 1.25
5
- position: relative
6
- input
7
- cursor: pointer
8
- &:hover
9
- color: $input-hover-color
10
- &[disabled],
11
- fieldset[disabled] &,
12
- input[disabled]
13
- color: $input-disabled-color
14
- cursor: not-allowed
15
-
16
- .checkbox
17
- @extend %checkbox-radio
18
-
19
- .radio
20
- @extend %checkbox-radio
21
- & + .radio
22
- +ltr-property("margin", 0.5em, false)
@@ -1,184 +0,0 @@
1
- $file-border-color: $border !default
2
- $file-radius: $radius !default
3
-
4
- $file-cta-background-color: $scheme-main-ter !default
5
- $file-cta-color: $text !default
6
- $file-cta-hover-color: $text-strong !default
7
- $file-cta-active-color: $text-strong !default
8
-
9
- $file-name-border-color: $border !default
10
- $file-name-border-style: solid !default
11
- $file-name-border-width: 1px 1px 1px 0 !default
12
- $file-name-max-width: 16em !default
13
-
14
- $file-colors: $form-colors !default
15
-
16
- .file
17
- @extend %unselectable
18
- align-items: stretch
19
- display: flex
20
- justify-content: flex-start
21
- position: relative
22
- // Colors
23
- @each $name, $pair in $file-colors
24
- $color: nth($pair, 1)
25
- $color-invert: nth($pair, 2)
26
- &.is-#{$name}
27
- .file-cta
28
- background-color: $color
29
- border-color: transparent
30
- color: $color-invert
31
- &:hover,
32
- &.is-hovered
33
- .file-cta
34
- background-color: bulmaDarken($color, 2.5%)
35
- border-color: transparent
36
- color: $color-invert
37
- &:focus,
38
- &.is-focused
39
- .file-cta
40
- border-color: transparent
41
- box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
42
- color: $color-invert
43
- &:active,
44
- &.is-active
45
- .file-cta
46
- background-color: bulmaDarken($color, 5%)
47
- border-color: transparent
48
- color: $color-invert
49
- // Sizes
50
- &.is-small
51
- font-size: $size-small
52
- &.is-normal
53
- font-size: $size-normal
54
- &.is-medium
55
- font-size: $size-medium
56
- .file-icon
57
- .fa
58
- font-size: 21px
59
- &.is-large
60
- font-size: $size-large
61
- .file-icon
62
- .fa
63
- font-size: 28px
64
- // Modifiers
65
- &.has-name
66
- .file-cta
67
- border-bottom-right-radius: 0
68
- border-top-right-radius: 0
69
- .file-name
70
- border-bottom-left-radius: 0
71
- border-top-left-radius: 0
72
- &.is-empty
73
- .file-cta
74
- border-radius: $file-radius
75
- .file-name
76
- display: none
77
- &.is-boxed
78
- .file-label
79
- flex-direction: column
80
- .file-cta
81
- flex-direction: column
82
- height: auto
83
- padding: 1em 3em
84
- .file-name
85
- border-width: 0 1px 1px
86
- .file-icon
87
- height: 1.5em
88
- width: 1.5em
89
- .fa
90
- font-size: 21px
91
- &.is-small
92
- .file-icon .fa
93
- font-size: 14px
94
- &.is-medium
95
- .file-icon .fa
96
- font-size: 28px
97
- &.is-large
98
- .file-icon .fa
99
- font-size: 35px
100
- &.has-name
101
- .file-cta
102
- border-radius: $file-radius $file-radius 0 0
103
- .file-name
104
- border-radius: 0 0 $file-radius $file-radius
105
- border-width: 0 1px 1px
106
- &.is-centered
107
- justify-content: center
108
- &.is-fullwidth
109
- .file-label
110
- width: 100%
111
- .file-name
112
- flex-grow: 1
113
- max-width: none
114
- &.is-right
115
- justify-content: flex-end
116
- .file-cta
117
- border-radius: 0 $file-radius $file-radius 0
118
- .file-name
119
- border-radius: $file-radius 0 0 $file-radius
120
- border-width: 1px 0 1px 1px
121
- order: -1
122
-
123
- .file-label
124
- align-items: stretch
125
- display: flex
126
- cursor: pointer
127
- justify-content: flex-start
128
- overflow: hidden
129
- position: relative
130
- &:hover
131
- .file-cta
132
- background-color: bulmaDarken($file-cta-background-color, 2.5%)
133
- color: $file-cta-hover-color
134
- .file-name
135
- border-color: bulmaDarken($file-name-border-color, 2.5%)
136
- &:active
137
- .file-cta
138
- background-color: bulmaDarken($file-cta-background-color, 5%)
139
- color: $file-cta-active-color
140
- .file-name
141
- border-color: bulmaDarken($file-name-border-color, 5%)
142
-
143
- .file-input
144
- height: 100%
145
- left: 0
146
- opacity: 0
147
- outline: none
148
- position: absolute
149
- top: 0
150
- width: 100%
151
-
152
- .file-cta,
153
- .file-name
154
- @extend %control
155
- border-color: $file-border-color
156
- border-radius: $file-radius
157
- font-size: 1em
158
- padding-left: 1em
159
- padding-right: 1em
160
- white-space: nowrap
161
-
162
- .file-cta
163
- background-color: $file-cta-background-color
164
- color: $file-cta-color
165
-
166
- .file-name
167
- border-color: $file-name-border-color
168
- border-style: $file-name-border-style
169
- border-width: $file-name-border-width
170
- display: block
171
- max-width: $file-name-max-width
172
- overflow: hidden
173
- text-align: inherit
174
- text-overflow: ellipsis
175
-
176
- .file-icon
177
- align-items: center
178
- display: flex
179
- height: 1em
180
- justify-content: center
181
- +ltr-property("margin", 0.5em)
182
- width: 1em
183
- .fa
184
- font-size: 14px