cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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 css "Office icons" 
Designed by @RovaneDurso 
http://dribbble.com/shots/1474710-Office-Icon-Set

Too cute to stay simple visual icons. So here is my challenge.
-->

<div class="wrapper">
  <h1>Office Icon Set</h1>
  <div class="icons">
    <span class="office-icon-note"></span>
    <span class="office-icon-tablet"></span>
    <span class="office-icon-browser"></span>
    <span class="office-icon-calculator"></span>
    <span class="office-icon-paper"></span>
    
    <!-- This one is a bit different -->
    <span class="icon-group">
      <span class="office-icon-ruler-light"></span>
      <span class="office-icon-ruler-dark"></span>
      <span class="office-icon-pencil"></span>
    </span>
  </div>
  <h3>Those beautiful icons were designed by <a href="http://dribbble.com/shots/1474710-Office-Icon-Set" title="Rovane Durso">@RovaneDurso</a></h3>
  <h5>And coded with love by <a href="http://twitter.com/lukyvj">Myself</a></h5>
  <h6><a href="http://codepen.io/LukyVj/pen/lEjhk" target="_blank">Want more colors ? follow the link ! </a></h6>
</div>
            
          
!
            
              @import "bourbon";

/*
Html css "Office icons" 
Designed by @RovaneDurso 
http://dribbble.com/shots/1474710-Office-Icon-Set

Too cute to stay simple visual icons. So here is my challenge.
*/


// Colorset 

$c-1:#daecf9; // Background
$c-2:#f9f9f9; // White screens
$c-3:#84a0dd; // Borders
$c-4:#f7f3fa; // Tablet screen

$c-5:#f6c0e9; // browser close
$c-6:#f0d5e9; // browser reduce
$c-7:#bff0eb; // browser expand

$c-8:#edfbf7; // Calculator screen / Ruler lighten color
$c-9:#fbf7dc; // Calculator yellow part

$c-10:#dee2fe; // Ruler darken color  

//Sizes 
$s-1:2.625em; // Icons height
$s-2:0.245em; // Icons border size

$s-3:0.667em; // Type : Note top lines
$s-4:3em;  // Size double (browser / calculator )
$s-5:2em;     // Size normal  

$s-6:1.250em; // Size yellow calculator side height
$s-7:0.4em;   // width

$s-8:1.125em; // Ruler width
$s-9:0.550em; // Pencil width
//Mixins
@mixin reset {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  float:left;
  display:block;
}
@mixin high{
  @include box-sizing(border-box);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight:300; 
  line-height:34px;
  letter-spacing:.02em;
}
*{  
  @include high();
}

/* You can change the font name below */
html,body,.wrapper{
  @include reset();
  font-family:"Montserrat",Andale Mono,helvetica, sans-serif;
}
/* You can change the icons size by changing the em value below 
But keep in mind its "experimental", and should not be used on 
important websites.*/
html{
  font-size:1rem; /* <== The perfect size to me  :  1rem */
}
body{
  background:$c-1;
}

.wrapper{
  .icons{
    width:26em;
    height:20%;
    margin:10em auto 10em; 
    //border:1px solid darken($c-1,10%);
    border-radius:4px;
    padding-bottom:5%;
    padding-top:5%;
    padding-left:2em; 
    padding-right:2em;

    // Icons
    [class*="office-icon"]{
      display:block;
      float:left;
      margin:auto 1em 0 0 ;
      // Type
      &[class*="-note"]{
        width:$s-5;
        height:$s-1;
        background:$c-2;
        border:$s-2 solid $c-3;
        border-radius:3px;
        &:after{
          content:'';
          display:block;
          width:$s-2/1.009;
          height:$s-3;
          background:$c-3;
          margin:-$s-3/1.6 $s-2;

          box-shadow:
            $s-2*2 0 0 0 $c-3,
            $s-2*3.6 0 0 0 $c-3;
        }
      }//\Note

      &[class*="-tablet"]{
        width:$s-5;
        height:$s-1;
        background:$c-4;
        border:$s-2 solid $c-3;
        border-radius:3px;
        box-shadow:inset 0 -.35em 0 $c-3;
        &:after{
          content:'';
          display:block;
          position:relative;
          height:$s-2;
          width:$s-2;
          border-radius:100%;
          background:$c-2;
          margin:$s-1/1.26 auto;

        }
      }//\Tablet

      &[class*="-browser"]{
        width:$s-4;
        height:$s-1;
        background:$c-2;
        border:$s-2 solid $c-3;
        border-radius:3px;
        box-shadow:inset 0 .35em 0 $c-3;
        &:after{
          content:'';
          display:block;
          position:relative;
          height:$s-2;
          width:$s-2;
          border-radius:100%;
          background:$c-5;
          margin:-.05em .07em;
          box-shadow:
            $s-2*1.55 0 0 $c-6,
            $s-2*3.1 0 0 $c-7
            ;
        }
      }//\Browser

      &[class*="-calculator"]{
        width:$s-4;
        height:$s-1;
        background:$c-8;
        border:$s-2 solid $c-3;
        border-radius:3px;
        box-shadow:inset 0 0 -$s-1/1.6 0 $c-3;
        &:before{
          content:'';
          display:block;
          position:relative;
          height:$s-2*1.05;
          width:$s-2*1.05;
          border-radius:100%; 
          background:$c-2;
          margin:$s-1/2.9 .08em;
          @include transform(scale(1.14)); // Boooo dirty lazy hack
          box-shadow:$s-2*1.55 0 0 $c-2,
            $s-2*3.1 0 0 $c-2,
            $s-2*4.65 0 0 $c-2,
            $s-2*6.2 0 0 $c-2,
            0 $s-2*1.8 0 $c-2, 
            $s-2*1.55 $s-2*1.8 0 $c-2, 
            $s-2*3.1 $s-2*1.8 0 $c-2,
            $s-2*4.65 $s-2*1.8 0 $c-2,
            $s-2*6.2 $s-2*1.8 0 $c-2,
            0 $s-2*3.6 0 $c-2, 
            $s-2*1.55 $s-2*3.6 0 $c-2, 
            $s-2*3.1 $s-2*3.6 0 $c-2,
            $s-2*4.65 $s-2*3.6 0 $c-2,
            $s-2*6.2 $s-2*3.6 0 $c-2 
            ;
        }
        &:after{
          content:'';
          display:block;
          height:$s-6;
          width:$s-7*1.05; 
          background:$c-9;
          margin:-$s-6/1.1 $s-4/1.35;
          box-shadow:inset 0 .15em 0em $c-2; 
        }
      }//\Browser

      &[class*="-paper"]{
        width:$s-5;
        height:$s-1;
        background:$c-2;
        border:$s-2 solid $c-3;
        border-radius:3px;
        &:after{
          content:'';
          display:block;
          width:$s-2*4.2;
          height:$s-2/1.2;
          background:$c-3;
          margin:$s-2*2 $s-2;

          box-shadow:
            0 $s-2*1.6 0 0 $c-3, 
            0 $s-2*3.2 0 0 $c-3,
            0 $s-2*4.8 0 0 $c-3;
        }
      }//\Paper
      &[class*="-ruler-"]{
        &[class*="-light"]{
          background:$c-8;
        }
        &[class*="-dark"]{
          background:$c-10;
        }
        width:$s-8;
        height:$s-1;
        background:$c-2;
        border:$s-2 solid $c-3;
        border-radius:3px;
        &:after{
          content:'';
          display:block;
          width:$s-8/2.6;
          height:$s-8/3.8;  
          background:$c-3;
          margin:$s-8/11 $s-8/7;
          border-radius:0px;
          box-shadow:
            0 $s-8/2.4 0 $c-3,
            0 $s-8*1.2 0 $c-3,
            0 $s-8*1.6 0 $c-3;
        }
      }//\Paper

      &[class*="-pencil"]{
        width:$s-9;
        height:$s-1;
        border-bottom-right-radius:3px;
        border-bottom-left-radius:3px;        border-top-left-radius:6px;
        border-top-right-radius:6px;
        background:$c-5;
        border:$s-2 solid $c-3;
        box-shadow:
          inset 0 .15em 0 0 $c-3,
          inset 0 -.35em 0 0 $c-2,
          inset 0 -1em 0 0 $c-3
          ;
      }//\Paper
    }//\ Office icons

    //Handle groupped icons
    [class*="icon-group"]{
      >[class*="office-icon"]{
        margin:0 .2em 0 0 !important; 
      }
    }
  }//\ Icons

}




//Non related with icons 
h1,h3,h5,h6{ 
  text-align:center;
  color:darken($c-3,20%); 
  a{color:darken($c-3,10%);}
}
h1{
position:absolute;
top:2em;
left:0;
right:0;
margin:auto;
width:48%;
 }
            
          
!
            
              /*
Html css "Office icons" 
Designed by @RovaneDurso 
http://dribbble.com/shots/1474710-Office-Icon-Set

Too cute to stay simple visual icons. So here is my challenge.
*/
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console