-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmedia-ui.sass
157 lines (135 loc) · 3.07 KB
/
media-ui.sass
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
.dropzone
padding: 3rem 0.75rem 2rem
text-align: center
background-color: transparent
background-size: 1.75rem 1.75rem
background-image: linear-gradient(-45deg, rgba($grey-lightest, .5) 25%, transparent 25%, transparent 50%, rgba($grey-lightest, .5) 50%, rgba($grey-lightest, .5) 75%, transparent 75%, transparent)
transition: background-color $duration-medium
margin-bottom: 2rem
border-radius: $radius
&.is-active
background-color: rgba($primary, 0.2)
.medium
border-radius: $radius-small
background-color: $black-light
border: 2px solid $black-lighter
color: $white
box-shadow: $box-shadow
text-align: center
transition: transform $duration-medium, background-color $duration-medium, border-color $duration-medium
position: relative
&--highlighted
border-color: $primary
box-shadow: 0 0 6px rgba($primary, 0.8)
&--static
transform: none !important
cursor: pointer
transition: box-shadow $duration-short, border-color $duration-short
&.is-invalid
background-color: $danger
border-color: $danger-light
.medium-thumbnail
padding-top: 100%
position: relative
border-radius: 2px
overflow: hidden
background-color: $black
.medium-thumbnail-image, .medium-thumbnail-icon
position: absolute
top: 0
left: 0
width: 100%
height: 100%
.medium-thumbnail-icon > .icon
position: absolute
left: calc(50% - 1.5rem)
top: calc(50% - 1.5rem)
.medium-filename
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
padding: 0.75rem
font-size: $size-9
.medium-progress
border-radius: $radius-small
height: 0.25rem
width: calc(100% - 2rem)
position: absolute
top: calc(50% - 0.125rem)
left: 1rem
background-color: $grey
overflow: hidden
.medium-progress-bar
transition: width $duration-short
background-color: $white
height: 0.25rem
.medium-overlay-link
position: absolute
top: 0
left: 0
height: 100%
width: 100%
display: block
z-index: 1
.medium-checkbox
position: absolute
top: 0.75rem
left: 0.75rem
width: calc(100% - 1.5rem)
height: calc(100% - 1.5rem)
border-radius: $radius-small
background-color: rgba($primary, 0.9)
opacity: 0
transition: opacity $duration-medium
cursor: pointer
&.is-checked
opacity: 1
.icon
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
.medium-buttons
position: absolute
bottom: 0
left: 0
width: 100%
height: 2.4375rem
background-color: $black-light
opacity: 0
transition: opacity $duration-medium
.medium-button
width: 50%
height: 100%
text-align: center
display: inline-block
padding: 0.5rem
transition: opacity $duration-short
&:first-child
border-right: 1px solid $black-lighter
.medium-preview
img
max-height: 20rem
.image-edit
background-color: $black
text-align: center
& > img
vertical-align: bottom
max-width: 100%
margin: 0 auto
& > .jcrop-ux-no-outline
display: inline-block
text-align: left
margin: 0 auto
vertical-align: bottom
.touchevents
.medium-buttons
position: static
opacity: 1
.no-touchevents
.medium:hover
transform: scale(1.1, 1.1)
.medium-checkbox, .medium-buttons
opacity: 1
.medium-button:hover
opacity: 0.7