tools.sass 4.6 KB

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