Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

file.sass 4.0KB

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