public/vendors/bulma/sass/form/file.sass

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