123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              section.header
  div.container
    div.row
      div.four.columns
        h3 BOXLY
      div.twelve.columns
        ul
          li
            i.fi-torsos-all
            span Clients
          li
            i.fi-eye
            span Sitters
          li
            i.fi-torso
            span Admin
          li
            i.fi-graph-bar
            span Reports
          li
            i.fi-star
            span Functions
          li
            i.fi-key
            span Keys
          li
            i.fi-clipboard
            span Accounting
          li
            i.fi-torsos
            span New Client
          li
            i.fi-alert
            span Alerts

div.container.content
  div.row
    div.four.columns.block
      section.block-content
        i.fi-widget.pull-right
        img.avatar.block-center(src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg")
        section.push-top-sm.hr
          h4.text-center Matthew Reichardt
        section.user-details.push-top-sm
          ul
            li
              i.fi-star
              span Founder
            li
              i.fi-marker
              span St. Louis, MO
            
      section.block-content
        i.fi-alert.pull-right
        h5.text-left.hr Alerts
        section.user-alerts.push-top-sm
          ul
            li
              i.fi-alert.red
              span Upcoming appointment
            li
              i.fi-alert.red
              span Lorem ipsum dolar
            li
              i.fi-alert.red
              span Some random alert
            li
              i.fi-alert.red
              span This design is slick!
            
      section.block-content
        i.fi-clipboard.pull-right
        h5.text-left.hr Completed Alerts
        section.user-alerts.push-top-sm
          ul
            li
              i.fi-check.green
              span Upcoming appointment
            li
              i.fi-check.green
              span Lorem ipsum dolar
            li
              i.fi-check.green
              span Some random alert
            li
              i.fi-check.green
              span This design is slick!
              
      section.block-content
        h5.text-left.hr Completed Jobs
        section.user-alerts.push-top-sm
          ul
            li
              i.fi-check.green
              span 3 jobs complete
            li
              i.fi-alert.red
              span 7 uncompleted jobs
              
            
    div.four.columns.block
      section.block-content
        div.row
          h5.text-left.hr Staff Online
          section.staff.hr-dotted
            img.avatar.block-center(src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg")
            div.staff-name Grant Burns
            div.text-center
              i.fi-power.green
            div.online.text-center.green Active
            
        div.row
          section.staff
            img.avatar.block-center(src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg")
            div.staff-name Grant Burns
            div.text-center
              i.fi-power.green
            div.online.text-center.green Active
            
    // Calender Section
    div.four.columns.block
      section.block-content
        div.row
          h5.text-left.hr Calendar
          section.calendar
            h3.day 28
            div.extend-day
              p Sunday
              p.pull December/2014
            div.toggle-month
              h3 <
              h3 >
          section.cal-alerts.push-top-sm
            ul
              li
                i.fi-alert.red
                span Upcoming appointment
              li
                i.fi-alert.red
                span Lorem ipsum dolar
              li
                i.fi-alert.red
                span Some random alert
              li
                i.fi-alert.red
                span This design is slick!

    // Schedule Requests Section
    // Calender Section
    div.four.columns.block
      section.block-content
        h5.text-left.hr Schedule Requests
        section.user-alerts.push-top-sm
          ul
            li.sched-request
              i.fi-compass.pull-left
              div.pull-left
                i Meet the team
                br
                p.sub-heading T-Rex St Loius
            li.sched-request
              i.fi-compass.pull-left
              div.pull-left
                i Build Initial Specs
                br
                p.sub-heading T-Rex St Loius
            li.sched-request
              i.fi-compass.pull-left
              div.pull-left
                i Design User Board
                br
                p.sub-heading Remote
    
    div.twelve.columns.block
      section.block-content.revenue-icon
        i.fi-dollar.pull-right
        h5.text-left.hr Revenue
        div.row
          div.four.columns.user-alerts.revenue.push-top-sm.block
            h6 
              strong Daily
            h2.pull-left $2.089
            span.pull-left
              h4 .00
            div.commission.pull-left COMMISSION: 1,000.00
            div.percent.down 2.7%
          
          div.four.columns.user-alerts.revenue.push-top-sm.block
            h6 
              strong Monthly
            h2.pull-left $27.125
            span.pull-left
              h4 .00
            div.commission.pull-left COMMISSION: 16,000.00
            div.percent.up 1.5%
            
          div.four.columns.user-alerts.push-top-sm.block.revenue
            h6 
              strong Yesterday
            h2.pull-left $86.079
            span.pull-left
              h4 .86
            div.commission.pull-left COMMISSION: 16,000.00
            div.percent.up 3.1%
            
    div.eight.columns.block
      section.block-content
        div.row
          h5.text-left.hr Arivals | Departures
          
    div.four.columns.block
      section.block-content
        div.row
          h5.text-left.hr Late Timeframes
          
    //Logins Section
    div.row
      div.four.columns.block
        section.block-content.user-details
          div.row
            h5.text-left.hr Current Login's [STAFF]
            ul.push-top-sm
              li
                i.fi-torso.green
                span Matthew Reichardt
              li
                i.fi-torso.green
                span Grant Burns
              li
                i.fi-torso.yellow
                span Lorem Ipsum
              li
                i.fi-torso.green
                span Ipsum Lorem

      div.four.columns.block
        section.block-content
          div.row
            h5.text-left.hr Clients
            
      div.four.columns.block
        section.block-content.no-pad-bottom
          div.row
            h5.text-left.hr Daily Cancellations
            h6.cancellation 
              strong Today
            div.cancellation-count 8
          div.cancellations
            ul
              li Week
              li Month
              li Total
            ul.big
              li 3
              li(style="margin-left:21px;") 32
              li 57
            
          
!
            
              /* COLOR SETUP */
$headerBG: #4E5861;
$blockBG: #FCFCFC;
$background: darken($blockBG, 5%);

/* HELPER CLASSES */
.no-margin {
  margin-left: 0px;
}

.no-pad-bottom {
  padding-bottom: 0px;
}

.pull-left { float: left; }
.pull-right { float: right; }

.hr {
  border-bottom: 1px solid darken($blockBG, 10%);
}

.hr-dotted {
  border-bottom: 1px dotted darken($blockBG, 10%);
}

.text-left { text-align: left; }
.text-center { text-align: center; }

.block-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.block-center-2 {
}

.push-top-sm {
  margin-top: 15px;
}

.cancellation-count {
  margin-top: 40px;
  margin-bottom: 40px;
  bottom: -20px;
  text-align: center;
  font-size: 700%;
  color: #31F7DD;
}

.cancellations {
  background: #31F7DD;
  padding-top: 0px;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: -15px;
  height: 45px;
  color: #fff;
  
  
  ul {
      margin: 0px;
      margin-bottom: -15px;
      padding-left: 10px;
      padding-right: 10px;
      list-style-type: none;
      text-align: justify;
  }
  
  ul.big {
    margin-top: -20px;
    li {
      font-size: 140%;
    }
  }

  ul:after {
      content: "";
      width: 100%;
      display: inline-block;
  }
  
  li {
    display: inline;
    font-size: 75%;
  }
}
  /* IMAGE CLASSES */
  .avatar {
    height: 150px;
    width: 150px;
    border: 8px solid darken($blockBG, 7%);
    border-radius: 50%;
  }
    .big {  }


/* MAIN CLASSES */
body {
  background: $background;
  color: darken($blockBG, 52%);
}

.header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background: darken($headerBG, 2%);
  color: lighten(gray, 32.5%);
  padding-top: 15px;
  
  h3 {
    margin: 0px;
    color: lighten($blockBG, 20%);
  }
  
  i {
    margin-right: 5px;
    font-size: 120%;    
  }
  
  ul {
    float: right;
    margin: 0px;
    line-height: 30px;
    list-style-type: none;
    
    li {
      display: inline;
      padding: 0px 2px 0px 2px;
      
      &:hover {
        color: lighten(gray, 15%);
      }
    }
  }
}

.content {
  position: relative;
  top: 110px;
  
  .block-content {
    background: $blockBG;
    padding: 15px;
    margin-bottom: 12px;
    -webkit-box-shadow: 0px 5px 5px -3px darken($blockBG, 25%);
    -moz-box-shadow: 0px 5px 5px -3px darken($blockBG, 25%);
    box-shadow: 0px 5px 5px -3px darken($blockBG, 25%);
    
    h5 {
      padding-bottom: 3px;
    }
  }
  
  .cal-alerts {
    margin-top: 85px;
    margin-bottom: -15px;
    
    i {
      width: 30px;
      font-size: 130%;
      margin: 0 auto;
      margin-right: 5px;
    }
    
    li {
      line-height: 10px;
      letter-spacing: 0px;
      font-size: 85%;
      color: darken($blockBG, 52%);
      
      .red {
        color: red;
      }
      
      .yellow {
        color: yellow;
      }
      
      .green {
        color: lighten(green, 18%);
      }
    }
  }
  
  .user-details, .user-alerts {
    margin-bottom: -15px;
    
    .sub-heading {
      margin-top: -3px;
      font-size: 85%;
    }
    
    i {
      width: 30px;
      font-size: 130%;
      margin: 0 auto;
      margin-right: 5px;
    }
    
    li {
      line-height: 10px;
      letter-spacing: 0px;
      font-size: 85%;
      color: darken($blockBG, 52%);
      
      .red {
        color: red;
      }
      
      .yellow {
        color: darken(yellow, 8%);
      }
      
      .green {
        color: lighten(green, 18%);
      }
    }
    
  }
  
  .staff {
    
    i {
      font-size: 170%;
    }
    
    .red {
      color: red;
    }

    .green {
      color: lighten(green, 10%);
    }
    
    img {
      margin-top: 10px;
      height: 40px;
      width: 40px;
      border: none;
    }
    
    .staff-name {
      font-weight: bold;
      font-size: 110%;
      margin-top: 5px;
      text-align: center;
    }
    
    .online {
      font-size: 85%;
      margin-top: -3px;
    }
  }
  
  .footer {
    width: 100%;
    margin-left: -15px;
    margin-right: -30px;
    padding: 1px;
    background-color: #F47A60;
  }
  
  .calendar {
    float: left;
    width: 100%;
    margin-left: -15px;
    margin-right: -15px;
    padding: 15px;
    background-color: #F47A60;
    color: $blockBG;
    
    h3.day { float: left; color: $blockBG; }
    
    .extend-day {
      float: left;
      
      p {
        float: left;
        clear: left;
        margin: 0px;
        margin-left: 10px;
      }
      
      .pull {
        margin-top: -5px;
        font-size: 75%;
        color: darken($blockBG, 12%);
      }
    }
    
    .toggle-month {
      float: right;
      
      h3 { display: inline; color: $blockBG; }
    }
  }
  
  .sheet {
    padding-top: 85px;
    font-size: 85%;
    
    li {
      display: inline;
      padding-left: 3px;
      padding-right: 3px;
    }
    
    .sheet-day {
      margin-top: -5px;
      
      li {
        margin-right: 3px;
        padding: 9px;
        background: darken($blockBG, 10%);
        font-size: 93%;
      }
      li.empty {
        padding-right: 19px;
        background: transparent;
      }
    }
    
    .calendar-footer {
      width: 100%;
      height: 10px;
      margin-left: -15px;
      margin-right: -15px;
      padding: 15px;
      background-color: #F47A60;
      color: $blockBG;
    }
    
  }
  
  .sched-request {
    clear: left;
  }
  
  .revenue-icon {
    font-size: 180%;
    color: lighten(gray, 15%);
  }
  
  .revenue {
    margin: 0px;
    margin-top: 10px;
    padding-right: 0px;
    
    h4 {
      line-height: 45px;
      color: lighten(gray, 5%);
    }
    
    .percent {
      clear: left;
      font-size: 40%;
      line-height: 0px;
      color: lighten(gray, 15%);
      
      
    }
    
    .up {
      color: lighten(green, 10%);
    }

    .down {
      color: red;
    }
    
    .commission {
      clear: left;
      margin-top: -15px;
      font-size: 40%;
      font-weight: bold
    }
  }
  
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console