CodePen

HTML

            
              <!-- 
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>
            
          
!

CSS

            
              /*
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;

          @include 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;
        @include 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;
        @include 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;
          @include 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;
        @include 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
          @include 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;
          @include 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;

          @include 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;
          @include 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;
        @include 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%;
 }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
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.
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................