file.sass 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. $file-border-color: $border !default
  2. $file-radius: $radius !default
  3. $file-cta-background-color: $scheme-main-ter !default
  4. $file-cta-color: $text !default
  5. $file-cta-hover-color: $text-strong !default
  6. $file-cta-active-color: $text-strong !default
  7. $file-name-border-color: $border !default
  8. $file-name-border-style: solid !default
  9. $file-name-border-width: 1px 1px 1px 0 !default
  10. $file-name-max-width: 16em !default
  11. $file-colors: $form-colors !default
  12. .file
  13. @extend %unselectable
  14. align-items: stretch
  15. display: flex
  16. justify-content: flex-start
  17. position: relative
  18. // Colors
  19. @each $name, $pair in $file-colors
  20. $color: nth($pair, 1)
  21. $color-invert: nth($pair, 2)
  22. &.is-#{$name}
  23. .file-cta
  24. background-color: $color
  25. border-color: transparent
  26. color: $color-invert
  27. &:hover,
  28. &.is-hovered
  29. .file-cta
  30. background-color: bulmaDarken($color, 2.5%)
  31. border-color: transparent
  32. color: $color-invert
  33. &:focus,
  34. &.is-focused
  35. .file-cta
  36. border-color: transparent
  37. box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
  38. color: $color-invert
  39. &:active,
  40. &.is-active
  41. .file-cta
  42. background-color: bulmaDarken($color, 5%)
  43. border-color: transparent
  44. color: $color-invert
  45. // Sizes
  46. &.is-small
  47. font-size: $size-small
  48. &.is-medium
  49. font-size: $size-medium
  50. .file-icon
  51. .fa
  52. font-size: 21px
  53. &.is-large
  54. font-size: $size-large
  55. .file-icon
  56. .fa
  57. font-size: 28px
  58. // Modifiers
  59. &.has-name
  60. .file-cta
  61. border-bottom-right-radius: 0
  62. border-top-right-radius: 0
  63. .file-name
  64. border-bottom-left-radius: 0
  65. border-top-left-radius: 0
  66. &.is-empty
  67. .file-cta
  68. border-radius: $file-radius
  69. .file-name
  70. display: none
  71. &.is-boxed
  72. .file-label
  73. flex-direction: column
  74. .file-cta
  75. flex-direction: column
  76. height: auto
  77. padding: 1em 3em
  78. .file-name
  79. border-width: 0 1px 1px
  80. .file-icon
  81. height: 1.5em
  82. width: 1.5em
  83. .fa
  84. font-size: 21px
  85. &.is-small
  86. .file-icon .fa
  87. font-size: 14px
  88. &.is-medium
  89. .file-icon .fa
  90. font-size: 28px
  91. &.is-large
  92. .file-icon .fa
  93. font-size: 35px
  94. &.has-name
  95. .file-cta
  96. border-radius: $file-radius $file-radius 0 0
  97. .file-name
  98. border-radius: 0 0 $file-radius $file-radius
  99. border-width: 0 1px 1px
  100. &.is-centered
  101. justify-content: center
  102. &.is-fullwidth
  103. .file-label
  104. width: 100%
  105. .file-name
  106. flex-grow: 1
  107. max-width: none
  108. &.is-right
  109. justify-content: flex-end
  110. .file-cta
  111. border-radius: 0 $file-radius $file-radius 0
  112. .file-name
  113. border-radius: $file-radius 0 0 $file-radius
  114. border-width: 1px 0 1px 1px
  115. order: -1
  116. .file-label
  117. align-items: stretch
  118. display: flex
  119. cursor: pointer
  120. justify-content: flex-start
  121. overflow: hidden
  122. position: relative
  123. &:hover
  124. .file-cta
  125. background-color: bulmaDarken($file-cta-background-color, 2.5%)
  126. color: $file-cta-hover-color
  127. .file-name
  128. border-color: bulmaDarken($file-name-border-color, 2.5%)
  129. &:active
  130. .file-cta
  131. background-color: bulmaDarken($file-cta-background-color, 5%)
  132. color: $file-cta-active-color
  133. .file-name
  134. border-color: bulmaDarken($file-name-border-color, 5%)
  135. .file-input
  136. height: 100%
  137. left: 0
  138. opacity: 0
  139. outline: none
  140. position: absolute
  141. top: 0
  142. width: 100%
  143. .file-cta,
  144. .file-name
  145. @extend %control
  146. border-color: $file-border-color
  147. border-radius: $file-radius
  148. font-size: 1em
  149. padding-left: 1em
  150. padding-right: 1em
  151. white-space: nowrap
  152. .file-cta
  153. background-color: $file-cta-background-color
  154. color: $file-cta-color
  155. .file-name
  156. border-color: $file-name-border-color
  157. border-style: $file-name-border-style
  158. border-width: $file-name-border-width
  159. display: block
  160. max-width: $file-name-max-width
  161. overflow: hidden
  162. text-align: inherit
  163. text-overflow: ellipsis
  164. .file-icon
  165. align-items: center
  166. display: flex
  167. height: 1em
  168. justify-content: center
  169. +ltr-property("margin", 0.5em)
  170. width: 1em
  171. .fa
  172. font-size: 14px