tools.sass 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. $label-color: $grey-darker !default
  2. $label-weight: $weight-bold !default
  3. $help-size: $size-small !default
  4. .label
  5. color: $label-color
  6. display: block
  7. font-size: $size-normal
  8. font-weight: $label-weight
  9. &:not(:last-child)
  10. margin-bottom: 0.5em
  11. // Sizes
  12. &.is-small
  13. font-size: $size-small
  14. &.is-medium
  15. font-size: $size-medium
  16. &.is-large
  17. font-size: $size-large
  18. .help
  19. display: block
  20. font-size: $help-size
  21. margin-top: 0.25rem
  22. @each $name, $pair in $colors
  23. $color: nth($pair, 1)
  24. &.is-#{$name}
  25. color: $color
  26. // Containers
  27. .field
  28. &:not(:last-child)
  29. margin-bottom: 0.75rem
  30. // Modifiers
  31. &.has-addons
  32. display: flex
  33. justify-content: flex-start
  34. .control
  35. &:not(:last-child)
  36. margin-right: -1px
  37. &:not(:first-child):not(:last-child)
  38. .button,
  39. .input,
  40. .select select
  41. border-radius: 0
  42. &:first-child:not(:only-child)
  43. .button,
  44. .input,
  45. .select select
  46. border-bottom-right-radius: 0
  47. border-top-right-radius: 0
  48. &:last-child:not(:only-child)
  49. .button,
  50. .input,
  51. .select select
  52. border-bottom-left-radius: 0
  53. border-top-left-radius: 0
  54. .button,
  55. .input,
  56. .select select
  57. &:not([disabled])
  58. &:hover,
  59. &.is-hovered
  60. z-index: 2
  61. &:focus,
  62. &.is-focused,
  63. &:active,
  64. &.is-active
  65. z-index: 3
  66. &:hover
  67. z-index: 4
  68. &.is-expanded
  69. flex-grow: 1
  70. flex-shrink: 1
  71. &.has-addons-centered
  72. justify-content: center
  73. &.has-addons-right
  74. justify-content: flex-end
  75. &.has-addons-fullwidth
  76. .control
  77. flex-grow: 1
  78. flex-shrink: 0
  79. &.is-grouped
  80. display: flex
  81. justify-content: flex-start
  82. & > .control
  83. flex-shrink: 0
  84. &:not(:last-child)
  85. margin-bottom: 0
  86. margin-right: 0.75rem
  87. &.is-expanded
  88. flex-grow: 1
  89. flex-shrink: 1
  90. &.is-grouped-centered
  91. justify-content: center
  92. &.is-grouped-right
  93. justify-content: flex-end
  94. &.is-grouped-multiline
  95. flex-wrap: wrap
  96. & > .control
  97. &:last-child,
  98. &:not(:last-child)
  99. margin-bottom: 0.75rem
  100. &:last-child
  101. margin-bottom: -0.75rem
  102. &:not(:last-child)
  103. margin-bottom: 0
  104. &.is-horizontal
  105. +tablet
  106. display: flex
  107. .field-label
  108. .label
  109. font-size: inherit
  110. +mobile
  111. margin-bottom: 0.5rem
  112. +tablet
  113. flex-basis: 0
  114. flex-grow: 1
  115. flex-shrink: 0
  116. margin-right: 1.5rem
  117. text-align: right
  118. &.is-small
  119. font-size: $size-small
  120. padding-top: 0.375em
  121. &.is-normal
  122. padding-top: 0.375em
  123. &.is-medium
  124. font-size: $size-medium
  125. padding-top: 0.375em
  126. &.is-large
  127. font-size: $size-large
  128. padding-top: 0.375em
  129. .field-body
  130. .field .field
  131. margin-bottom: 0
  132. +tablet
  133. display: flex
  134. flex-basis: 0
  135. flex-grow: 5
  136. flex-shrink: 1
  137. .field
  138. margin-bottom: 0
  139. & > .field
  140. flex-shrink: 1
  141. &:not(.is-narrow)
  142. flex-grow: 1
  143. &:not(:last-child)
  144. margin-right: 0.75rem
  145. .control
  146. box-sizing: border-box
  147. clear: both
  148. font-size: $size-normal
  149. position: relative
  150. text-align: left
  151. // Modifiers
  152. &.has-icons-left,
  153. &.has-icons-right
  154. .input,
  155. .select
  156. &:focus
  157. & ~ .icon
  158. color: $input-icon-active-color
  159. &.is-small ~ .icon
  160. font-size: $size-small
  161. &.is-medium ~ .icon
  162. font-size: $size-medium
  163. &.is-large ~ .icon
  164. font-size: $size-large
  165. .icon
  166. color: $input-icon-color
  167. height: $input-height
  168. pointer-events: none
  169. position: absolute
  170. top: 0
  171. width: $input-height
  172. z-index: 4
  173. &.has-icons-left
  174. .input,
  175. .select select
  176. padding-left: $input-height
  177. .icon.is-left
  178. left: 0
  179. &.has-icons-right
  180. .input,
  181. .select select
  182. padding-right: $input-height
  183. .icon.is-right
  184. right: 0
  185. &.is-loading
  186. &::after
  187. @extend %loader
  188. position: absolute !important
  189. right: 0.625em
  190. top: 0.625em
  191. z-index: 4
  192. &.is-small:after
  193. font-size: $size-small
  194. &.is-medium:after
  195. font-size: $size-medium
  196. &.is-large:after
  197. font-size: $size-large