summaryrefslogtreecommitdiff
path: root/styles/_sass/form/file.sass
blob: 41cc02154ae6cab9e3c9499e4642d0e237092abf (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
$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
  @extend %unselectable
  align-items: stretch
  display: flex
  justify-content: flex-start
  position: relative
  // Colors
  @each $name, $pair in $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: darken($color, 2.5%)
          border-color: transparent
          color: $color-invert
      &:focus,
      &.is-focused
        .file-cta
          border-color: transparent
          box-shadow: 0 0 0.5em rgba($color, 0.25)
          color: $color-invert
      &:active,
      &.is-active
        .file-cta
          background-color: darken($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: darken($file-cta-background-color, 2.5%)
      color: $file-cta-hover-color
    .file-name
      border-color: darken($file-name-border-color, 2.5%)
  &:active
    .file-cta
      background-color: darken($file-cta-background-color, 5%)
      color: $file-cta-active-color
    .file-name
      border-color: darken($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: left
  text-overflow: ellipsis

.file-icon
  align-items: center
  display: flex
  height: 1em
  justify-content: center
  margin-right: 0.5em
  width: 1em
  .fa
    font-size: 14px