123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- $file-border-color: $border !default
- $file-radius: $radius !default
- $file-cta-background-color: $scheme-main-ter !default
- $file-cta-color: $text !default
- $file-cta-hover-color: $text-strong !default
- $file-cta-active-color: $text-strong !default
- $file-name-border-color: $border !default
- $file-name-border-style: solid !default
- $file-name-border-width: 1px 1px 1px 0 !default
- $file-name-max-width: 16em !default
- $file-colors: $form-colors !default
- .file
- @extend %unselectable
- align-items: stretch
- display: flex
- justify-content: flex-start
- position: relative
- // Colors
- @each $name, $pair in $file-colors
- $color: nth($pair, 1)
- $color-invert: nth($pair, 2)
- &.is-#{$name}
- .file-cta
- background-color: $color
- border-color: transparent
- color: $color-invert
- &:hover,
- &.is-hovered
- .file-cta
- background-color: bulmaDarken($color, 2.5%)
- border-color: transparent
- color: $color-invert
- &:focus,
- &.is-focused
- .file-cta
- border-color: transparent
- box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
- color: $color-invert
- &:active,
- &.is-active
- .file-cta
- background-color: bulmaDarken($color, 5%)
- border-color: transparent
- color: $color-invert
- // Sizes
- &.is-small
- font-size: $size-small
- &.is-medium
- font-size: $size-medium
- .file-icon
- .fa
- font-size: 21px
- &.is-large
- font-size: $size-large
- .file-icon
- .fa
- font-size: 28px
- // Modifiers
- &.has-name
- .file-cta
- border-bottom-right-radius: 0
- border-top-right-radius: 0
- .file-name
- border-bottom-left-radius: 0
- border-top-left-radius: 0
- &.is-empty
- .file-cta
- border-radius: $file-radius
- .file-name
- display: none
- &.is-boxed
- .file-label
- flex-direction: column
- .file-cta
- flex-direction: column
- height: auto
- padding: 1em 3em
- .file-name
- border-width: 0 1px 1px
- .file-icon
- height: 1.5em
- width: 1.5em
- .fa
- font-size: 21px
- &.is-small
- .file-icon .fa
- font-size: 14px
- &.is-medium
- .file-icon .fa
- font-size: 28px
- &.is-large
- .file-icon .fa
- font-size: 35px
- &.has-name
- .file-cta
- border-radius: $file-radius $file-radius 0 0
- .file-name
- border-radius: 0 0 $file-radius $file-radius
- border-width: 0 1px 1px
- &.is-centered
- justify-content: center
- &.is-fullwidth
- .file-label
- width: 100%
- .file-name
- flex-grow: 1
- max-width: none
- &.is-right
- justify-content: flex-end
- .file-cta
- border-radius: 0 $file-radius $file-radius 0
- .file-name
- border-radius: $file-radius 0 0 $file-radius
- border-width: 1px 0 1px 1px
- order: -1
- .file-label
- align-items: stretch
- display: flex
- cursor: pointer
- justify-content: flex-start
- overflow: hidden
- position: relative
- &:hover
- .file-cta
- background-color: bulmaDarken($file-cta-background-color, 2.5%)
- color: $file-cta-hover-color
- .file-name
- border-color: bulmaDarken($file-name-border-color, 2.5%)
- &:active
- .file-cta
- background-color: bulmaDarken($file-cta-background-color, 5%)
- color: $file-cta-active-color
- .file-name
- border-color: bulmaDarken($file-name-border-color, 5%)
- .file-input
- height: 100%
- left: 0
- opacity: 0
- outline: none
- position: absolute
- top: 0
- width: 100%
- .file-cta,
- .file-name
- @extend %control
- border-color: $file-border-color
- border-radius: $file-radius
- font-size: 1em
- padding-left: 1em
- padding-right: 1em
- white-space: nowrap
- .file-cta
- background-color: $file-cta-background-color
- color: $file-cta-color
- .file-name
- border-color: $file-name-border-color
- border-style: $file-name-border-style
- border-width: $file-name-border-width
- display: block
- max-width: $file-name-max-width
- overflow: hidden
- text-align: inherit
- text-overflow: ellipsis
- .file-icon
- align-items: center
- display: flex
- height: 1em
- justify-content: center
- +ltr-property("margin", 0.5em)
- width: 1em
- .fa
- font-size: 14px
|