First Initial
This commit is contained in:
Nakorn Rientrakrunchai
141
wwwroot/BackendScript/assets/dropzone/css/stylus/basic.styl
Normal file
141
wwwroot/BackendScript/assets/dropzone/css/stylus/basic.styl
Normal file
@@ -0,0 +1,141 @@
|
||||
@import "nib"
|
||||
|
||||
.dropzone
|
||||
.dropzone *
|
||||
.dropzone-previews
|
||||
.dropzone-previews *
|
||||
box-sizing border-box
|
||||
|
||||
|
||||
.dropzone
|
||||
position relative
|
||||
border 1px solid rgba(0, 0, 0, 0.08)
|
||||
background rgba(0, 0, 0, 0.02)
|
||||
padding 1em
|
||||
|
||||
&.clickable
|
||||
cursor pointer
|
||||
.message
|
||||
cursor pointer
|
||||
*
|
||||
cursor default
|
||||
|
||||
.message
|
||||
opacity 1
|
||||
|
||||
&.drag-hover
|
||||
border-color rgba(0, 0, 0, 0.15)
|
||||
background rgba(0, 0, 0, 0.04)
|
||||
|
||||
&.started
|
||||
.message
|
||||
display none
|
||||
|
||||
.dropzone
|
||||
.dropzone-previews
|
||||
.preview
|
||||
background rgba(255, 255, 255, 0.8)
|
||||
position relative
|
||||
display inline-block
|
||||
margin 17px
|
||||
|
||||
vertical-align top
|
||||
|
||||
border 1px solid #acacac
|
||||
|
||||
padding 6px 6px 28px 6px
|
||||
|
||||
.details
|
||||
width 100px
|
||||
height @width
|
||||
position relative
|
||||
background #ebebeb
|
||||
padding 5px
|
||||
|
||||
.filename
|
||||
overflow hidden
|
||||
height 100%
|
||||
|
||||
|
||||
img
|
||||
absolute top left
|
||||
width @width
|
||||
height @width
|
||||
|
||||
.size
|
||||
absolute bottom -28px left 3px
|
||||
height 28px
|
||||
line-height @height
|
||||
|
||||
|
||||
&.error
|
||||
.error-mark
|
||||
display block
|
||||
&.success
|
||||
.success-mark
|
||||
display block
|
||||
|
||||
|
||||
&:hover
|
||||
.details
|
||||
img
|
||||
display none
|
||||
.success-mark
|
||||
.error-mark
|
||||
display none
|
||||
|
||||
|
||||
.success-mark
|
||||
.error-mark
|
||||
display none
|
||||
position absolute
|
||||
|
||||
width 40px
|
||||
height 40px
|
||||
|
||||
font-size 30px
|
||||
text-align center
|
||||
right -10px
|
||||
top -10px
|
||||
|
||||
.success-mark
|
||||
color #8CC657
|
||||
.error-mark
|
||||
color #EE162D
|
||||
|
||||
|
||||
.progress
|
||||
position absolute
|
||||
top 100px
|
||||
left 6px
|
||||
right 6px
|
||||
height 6px
|
||||
background #d7d7d7
|
||||
display none
|
||||
|
||||
.upload
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
width 0%
|
||||
background-color #8CC657
|
||||
|
||||
|
||||
&.processing
|
||||
.progress
|
||||
display block
|
||||
|
||||
|
||||
.error-message
|
||||
display none
|
||||
absolute top -5px left -20px
|
||||
background rgba(245, 245, 245, 0.8)
|
||||
padding 8px 10px
|
||||
color #800
|
||||
min-width 140px
|
||||
max-width 500px
|
||||
z-index 500
|
||||
&:hover.error
|
||||
.error-message
|
||||
display block
|
||||
152
wwwroot/BackendScript/assets/dropzone/css/stylus/dropzone.styl
Normal file
152
wwwroot/BackendScript/assets/dropzone/css/stylus/dropzone.styl
Normal file
@@ -0,0 +1,152 @@
|
||||
@import "nib"
|
||||
@import "basic"
|
||||
|
||||
@keyframes loading
|
||||
from
|
||||
background-position: 0 -400px
|
||||
to
|
||||
background-position: -7px -400px
|
||||
|
||||
.dropzone
|
||||
border 1px solid rgba(0, 0, 0, 0.03)
|
||||
min-height 360px
|
||||
border-radius 3px
|
||||
background rgba(0, 0, 0, 0.03)
|
||||
padding 23px
|
||||
|
||||
.default.message
|
||||
opacity 1
|
||||
transition opacity 0.3s ease-in-out
|
||||
|
||||
image "../images/spritemap.png" 428px 406px
|
||||
background-repeat no-repeat
|
||||
background-position 0 0
|
||||
|
||||
position absolute
|
||||
width 428px
|
||||
height 123px
|
||||
margin-left -(@width / 2)
|
||||
margin-top -(@height / 2)
|
||||
top 50%
|
||||
left 50%
|
||||
span
|
||||
display none
|
||||
|
||||
&.square
|
||||
.default.message
|
||||
background-position 0 -123px
|
||||
width 268px
|
||||
margin-left -(@width / 2)
|
||||
height 174px
|
||||
margin-top -(@height / 2)
|
||||
|
||||
&.drag-hover
|
||||
.message
|
||||
opacity 0.15
|
||||
|
||||
&.started
|
||||
.message
|
||||
display block
|
||||
opacity 0 // Rather fade out nicely
|
||||
|
||||
|
||||
.dropzone
|
||||
.dropzone-previews
|
||||
|
||||
.preview
|
||||
box-shadow 1px 1px 4px rgba(0, 0, 0, 0.16)
|
||||
font-size 14px
|
||||
|
||||
|
||||
.details
|
||||
img
|
||||
width 100px
|
||||
height 100px
|
||||
|
||||
// Not implemented yet. This is the CSS definition of the file
|
||||
// content as text.
|
||||
// .content
|
||||
// font-size 3px
|
||||
// white-space pre
|
||||
// position absolute
|
||||
// top 5px
|
||||
// left 12px
|
||||
// right 19px
|
||||
// bottom 5px
|
||||
// overflow hidden
|
||||
// line-height 100%
|
||||
// cursor default
|
||||
// word-wrap break-word
|
||||
|
||||
&.image-preview
|
||||
&:hover
|
||||
.details
|
||||
img
|
||||
display block
|
||||
opacity 0.1
|
||||
|
||||
&.success
|
||||
.success-mark
|
||||
opacity 1
|
||||
&.error
|
||||
.error-mark
|
||||
opacity 1
|
||||
.progress .upload
|
||||
background #EE1E2D
|
||||
|
||||
.error-mark
|
||||
.success-mark
|
||||
display block
|
||||
opacity 0 // Fade in / out
|
||||
transition opacity 0.4s ease-in-out
|
||||
image "../images/spritemap.png" 428px 406px
|
||||
background-repeat no-repeat
|
||||
|
||||
span
|
||||
display none
|
||||
.error-mark
|
||||
background-position -268px -123px
|
||||
.success-mark
|
||||
background-position -268px -163px
|
||||
|
||||
|
||||
|
||||
.progress
|
||||
.upload
|
||||
animation loading 0.4s linear infinite
|
||||
transition width 0.3s ease-in-out
|
||||
border-radius 2px
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 0%
|
||||
height 100%
|
||||
|
||||
image "../images/spritemap.png" 428px 406px
|
||||
background-repeat repeat-x
|
||||
background-position 0px -400px
|
||||
|
||||
|
||||
&.success
|
||||
.progress
|
||||
display block
|
||||
opacity 0
|
||||
transition opacity 0.4s ease-in-out
|
||||
|
||||
|
||||
// Disabled for now until I find a better way to cope with long filenames
|
||||
// .filename
|
||||
// span
|
||||
// overflow ellipsis
|
||||
|
||||
.error-message
|
||||
display block
|
||||
opacity 0 // Rather fade in / out
|
||||
transition opacity 0.3s ease-in-out
|
||||
|
||||
&:hover.error
|
||||
.error-message
|
||||
opacity 1
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user