Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              mixin file(name, size, status)
  .file
    .file-description
      .file-name
        | #{name}
      .file-size
        | #{size}MB
    .file-status
      .status-field
        .status-line(style="width: #{status}%")
        
main
  p#inspired-by inspired by 
    a(href="https://dribbble.com/shots/2481317-031-DailyUI-File-Upload" target="_blank") this
    |  work
  .upload
    .upload-field
      .icon-field
        span(class="fa fa-file-o")
        p Drag your files here
    .upload-status
      h1 File upload
      +file("any_file.txt", "0.3", "91")
      +file("another_file.txt", "0.6", "79")
      +file("plan_on_1-02-13.txt", "0.12", "34")
      form
        input(type="text" placeholder="URL to the file")#upload-field
        input(type="button" value="UPLOAD")#upload-btn.focus-out
            
          
!

CSS

            
              @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300,500,600,700)

$white: #fff
$dwhite: #f3f3f3
$black: #000
$lblack: #111
$llblack: #333

$primary: #8c61a9

$easing: cubic-bezier(0.82, 0.01, 0.77, 0.78)

//flatuicolors.com
$fl-green: #27ae60
$fl-lgreen: #2ecc71

$fl-blue: #2980b9
$fl-lblue: #3498db

$fl-purple: #8e44ad
$fl-lpurple: #9b59b6

$fl-nightblue: #2c3e50
$fl-lnightblue: #34495e

$fl-yellow: #f1c40f

$fl-dorange: #d35400
$fl-orange: #e67e22
$fl-lorange: #f39c12

$fl-red: #c0392b
$fl-lred: #e74c3c

$fl-smoke: #bdc3c7
$fl-lsmoke: #ecf0f1

$fl-gray: #7f8c8d
$fl-lgray: #95a5a6

$fl-pink: #ff4081
$fl-lpink: #ff80ab

*
  box-sizing: border-box
  &::after, &::before
    box-sizing: border-box

body
  width: 100vw
  min-height: 100vh
  
  display: block
  position: relative
  z-index: 0
  
  background-image: linear-gradient(35deg, #ccc, #e9e9e9)
  font-family: 'Ubuntu'
  
  main
    width: 100%
    max-width: 960px
    margin: 50px auto
    position: relative
    display: block
    z-index: 1
    p#inspired-by
      text-align: center
      position: absolute
      top: -50px
      left: 50%
      transform: translateX(-50%)
    a
      text-decoration: none
      color: $fl-orange
.upload
  width: 520px
  height: 400px
  
  margin: 0 auto
  position: relative
  z-index: 2
  background-color: transparent
  
  h1,p
    margin: 0
    
  .upload-field
    width: 75%
    height: 100%
    
    background-image: linear-gradient(15deg, lighten($fl-purple, 0%), lighten($fl-lpurple, 0%))
    border-radius: 5px
    position: absolute
    z-index: 4
    
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    
    color: lighten($fl-lpurple, 5%)
    box-shadow: 0px 10px 40px transparentize($fl-purple, 0)
    pointer-events: hover
    cursor: pointer
    
    animation: fadeInUp 1s
    .icon-field
      width: 60%
      height: 65%
      padding: 10px
      border: 4px dashed lighten($fl-lpurple, 5%)
      
      font-size: 30px
      text-align: center
      text-transform: uppercase
      
      display: flex
      flex-direction: column
      justify-content: center
      align-items: center
      
      transition: transform 0.2s linear
      
      &:hover
        transform: scale(1.05)
      span
        font-size: 90px
        transform: rotateY(180deg) translateX(20px)
      p
        font-weight: 500
  .upload-status
    position: absolute
    display: block
    z-index: 5
    top: 50%
    right: 0
    transform: translateY(-50%)
    
    width: 60%
    height: 80%
    padding: 25px 45px
    background-color: #fff
    
    box-shadow: 0px 10px 75px rgba(0,0,0,0.5)
    h1
      text-transform: uppercase
      font-size: 20px
      text-align: center
      
      margin: 15px 0px
      color: $fl-nightblue
    .file
      height: 50px
      width: 100%
      position: relative
      
      margin: 8px 0px
      .file-description
        display: flex
        flex-direction: row
        justify-content: space-between
        align-items: baseline
        .file-name
          color: #6e6e6e
          font-weight: 500
        .file-size
          font-size: 13px
          text-transform: lowercase
          color: lighten($fl-lgreen, 25%)
      .file-status
        width: 100%
        height: 5px
        margin-top: 10px
        
        .status-field
          background-color: #e9e9e9
          height: 5px
          width: 100%
          border-radius: 2.5px
          position: relative
          overflow: hidden
          
          .status-line
            transition: background-image 0.2s linear
            max-width: 100%
            min-width: 1%
            height: 100%
            background-color: $fl-lpurple
            background-image: linear-gradient(0deg, $fl-purple 50%, $fl-lpurple 50%)
            animation: loading 1.5s
      &:hover
        .file-status
          .status-field
            .status-line
              background-image: linear-gradient(0deg, $fl-dorange 50%, $fl-orange 50%)
    form
      width: 100%
      height: 50px
      position: relative
      display: block
      
      input[type="text"]
        box-sizing: border-box
        display: block
        position: absolute
        
        height: 40px
        border: 0
        outline: 0
        padding: 10px 10px
        padding-right: 0px
        
        border-radius: 20px
        border: 1px solid #ccc
        
        &:focus, &:active
          border: 1px solid $fl-lpurple
          outline: 0
          
      input[type="button"]
        background-color: $fl-lpurple
        border: 0
        outline: 0
        &:active, &:focus
          border: 0
          outline: 0
        
        border-radius: 20px
        color: $white
        font-size: 12px
        font-weight: 600
        display: block
        position: absolute
        margin-top: 2px
        height: 36px
        width: 80px
        top: 0
        right: 0
        
        transition: transform 0.15s ease-in-out, box-shadow 0.35s linear, height 0.0s linear, margin-top 0.0s linear, width 0.0s linear
        transform: translateX(25px)
        
        box-shadow: 0px 5px 15px transparentize($fl-purple, 0.2)
        
        &.focus-out
          transform: translateX(0px)
          box-shadow: 0px 5px 15px transparent
        &:hover
          height: 40px
          margin-top: 0px
          width: 80px
        
            
@keyframes loading
  from
    max-width: 0%
  20%
    max-width: 40%
  60%
    max-width: 60%
  to
    max-width: 100%
            
          
!

JS

            
              function _(el){
  return $(''+ el +'');
}

_('#upload-field').focusout(function(){
  _('#upload-btn').addClass("focus-out"); 
  console.log('Hi!')
});
_('#upload-field').focusin(function(){
  _('#upload-btn').removeClass("focus-out")
});
            
          
!
999px

Console