<span class="icon-device phone"></span>
<span class="icon-device tablet"></span>
<span class="icon-device imac"></span>

@import "lesshat";

body{
  margin-top: 10%;
  background: #5EC792;
  text-align: center;
  letter-spacing: 50px;
}

.icon-device{
  position: relative;
  display: inline-block;
  border: 3px solid #fefefe;
  .border-radius(3px);
  
  &::before,
  &::after{
    position: absolute;
    content: '';
  }
  &::before{
    @size: 15px;
    top: 4px;
    width: @size;
    height: 3px;
    margin-left: (@size / -2);
    background: #fefefe;
    .border-radius(@size);
  }
  &::after{
    @size: 10px;
    bottom: 4px;
    width: @size;
    height: @size;
    margin-left: (@size / -2);
    background: #fefefe;
    .border-radius(@size);
  }
  
  &.phone{
    width: 65px;
    height: 120px;
  }
  
  &.tablet{
    width: 95px;
    height: 120px;
  }
  
  &.imac{
    width: 220px;
    height: 150px;
    &::before{
      width: 4px;
      height: 4px;
      margin-left: -2px;
    }
    &::after{
      top: 100%;
      border-bottom: 30px solid #fefefe;
      border-left: 10px solid transparent;
    	border-right: 10px solid transparent;
      .border-radius(0);
      height: 0;
      width: 36px;
      margin-left: -28px;
    }
  }
}