<div id="container">
  <h3>Arrow Box with CSS </br><span style="font-size: 80%; color:#999">(12 positions)</span></h3>

  <!-- the boxes -->
  <div id="boxContainer"></div>
</div>

@import "nib"

// Some styles besides the box with arrow
@import url(https://fonts.googleapis.com/css?family=Open+Sans);


// Variables

$blue         =     #3498db
$green        =     #1abc9c
$orange       =     #e67e22
$red          =     #e74c3c
$default-color=     $blue

$box-width    =     150px
$box-height   =     100px
$border-width =     10px


/////////////////////////////////////
// Main styles for box with arrows //
/////////////////////////////////////

.box 
  width: $box-width
  height: $box-height
  background-color:$default-color // default background color
  position: relative
  border-radius: 4px

  &:after
    content: ""
    display: block
    border-width: $border-width $border-width 0
    border-style: solid
    border-color: @background-color transparent transparent
    margin-left: - @border-width
    position: absolute
    bottom: - @border-width
    left: 50%   
  
   
  &.arrow-bottom-left,
  &.arrow-bottom-right,
  &.arrow-top-left,
  &.arrow-top-right,
  &.arrow-left-top,
  &.arrow-left-bottom,
  &.arrow-right-top,
  &.arrow-right-bottom
    &:after
      border-width: $border-width * 0.5
      margin: 0
      
  // Bottom Arrows
  
  &.arrow-bottom-left,
  &.arrow-bottom-right
    &:after
      border-left-color: @background-color    
          
  &.arrow-bottom-left
    &:after
      left: 0
      right: auto
      
  &.arrow-bottom-right
    &:after
      border-left-color: transparent
      border-right-color: @background-color
      left: auto
      right: 0
      
  // Top Arrows
      
  &.arrow-top-center,
  &.arrow-top-left,
  &.arrow-top-right
    &:after
      border-top-color: transparent
      border-bottom-color: @background-color
      top: - $border-width
      bottom: auto
      
  &.arrow-top-center
    &:after
      border-top-width: 0
      border-bottom-width: $border-width
      
    
  &.arrow-top-left,
  &.arrow-top-right
    &:after
      border-width: $border-width * 0.5
      border-left-color: @background-color 
      
      
  &.arrow-top-left
    &:after
      left: 0
      right: auto
      
  &.arrow-top-right
    &:after
      border-left-color: transparent
      border-right-color: @background-color
      left: auto
      right: 0
      
  // Left Arrows    
      
  &.arrow-left-center,
  &.arrow-left-top,
  &.arrow-left-bottom
    &:after
      border-width: $border-width
      border-left-color: transparent
      border-left-width: 0
      border-top-color: transparent
      border-right-color: @background-color
      margin: - $border-width 0 0
      left: - $border-width
      right: auto
      top: 50%
      bottom: auto
     
    
  &.arrow-left-top,
  &.arrow-left-bottom
    &:after
      border-width: $border-width * 0.5 
      margin: 0
      
  &.arrow-left-top
    &:after
      border-top-color: @background-color 
      top: 0
      
  &.arrow-left-bottom
    &:after
      border-bottom-color: @background-color
      top: auto
      bottom: 0
      
      
  // Right Arrows    
      
  &.arrow-right-center,
  &.arrow-right-top,
  &.arrow-right-bottom
    &:after
      border-width: $border-width
      border-right-width: 0
      border-top-color: transparent
      border-left-color: @background-color
      margin: - $border-width 0 0
      left: auto
      right: - $border-width
      top: 50%
      bottom: auto
     
    
  &.arrow-right-top,
  &.arrow-right-bottom
    &:after
      border-width: $border-width * 0.5 
      margin: 0
      
  &.arrow-right-top
    &:after
      border-top-color: @background-color 
      top: 0
      
  &.arrow-right-bottom
    &:after
      border-bottom-color: @background-color
      top: auto
      bottom: 0
      
      
      
  // Border radius
  
  &.arrow-bottom-left,
  &.arrow-left-bottom
    border-bottom-left-radius: 0
      
  &.arrow-bottom-right,
  &.arrow-right-bottom
    border-bottom-right-radius: 0
      
  &.arrow-top-left,
  &.arrow-left-top
    border-top-left-radius: 0
  
  &.arrow-top-right,
  &.arrow-right-top
    border-top-right-radius: 0
      
      
      
      
////////////////////////////////////      
// Styles only for this test page //
////////////////////////////////////
      
// Stylus function to create alternative colors
      
createOtherColors(class, color) {
  &.{class} {
    background-color: color
    &.arrow-bottom-center,
    &.arrow-bottom-left,
    &.arrow-bottom-right {
      &:after {
        border-top-color: color 
      } 
    }
    &.arrow-bottom-left {
      &:after {
        border-left-color: color
      }
    }
    &.arrow-bottom-right {
      &:after {
        border-right-color: color
      }
    }
    &.arrow-top-center,
    &.arrow-top-left,
    &.arrow-top-right {
      &:after {
        border-bottom-color: color 
      } 
    }
    &.arrow-top-left {
      &:after {
        border-left-color: color
      }
    }
    &.arrow-top-right {
      &:after {
        border-right-color: color
      }
    }
    &.arrow-left-center,
    &.arrow-left-top,
    &.arrow-left-bottom {
      &:after {
        border-right-color: color 
      } 
    }
    &.arrow-left-top {
      &:after {
        border-top-color: color
      }
    }
    &.arrow-left-bottom {
      &:after {
        border-bottom-color: color
      }
    }
    &.arrow-right-center,
    &.arrow-right-top,
    &.arrow-right-bottom {
      &:after {
        border-left-color: color 
      } 
    }
    &.arrow-right-top {
      &:after {
        border-top-color: color
      }
    }
    &.arrow-right-bottom {
      &:after {
        border-bottom-color: color
      }
    }
  }
}

html, body 
  background: #f5f5f5
  font-size: 100%
  font-family: 'Open Sans', sans-serif  
  width: 100%

h3
  position: relative
  text-align: center
  text-transform: uppercase
  width: 240px
  display: block
  margin: 20px auto
  
h3:before, h3:after
  content: ""
  display: block
  height: 1px
  width: 50px
  background-color: #ddd
  position: absolute
  top: 50%
  left: -60px

h3:after
  right: -60px
  left: auto
      
.box
  margin: 20px 10px
  float: left
  
  createOtherColors("blue", $blue)
  createOtherColors("green", $green)
  createOtherColors("orange", $orange)
  createOtherColors("red", $red)

var CLASS_NAME_LOOKUP = {
  "bottom center": "",
  "bottom left": "arrow-bottom-left",
  "bottom right": "arrow-bottom-right",
  "top center": "arrow-top-center",
  "top left": "arrow-top-left",
  "top right": "arrow-top-right",
  "left center": "arrow-left-center",
  "left top": "arrow-left-top",
  "left bottom": "arrow-left-bottom",
  "right center": "arrow-right-center",
  "right top": "arrow-right-top",
  "right bottom": "arrow-right-bottom"
};

var BOX_BG_CLASS = ["blue", "green", "orange", "red"];

(function (){
  var targetNode = document.getElementById("boxContainer");
  var boxesHTML = "";
  var classNames = "";
  var i = 0;
  
  for(var pos in CLASS_NAME_LOOKUP){
    classNames = "box " + BOX_BG_CLASS[Math.floor(i / 3)];
    classNames += " " + CLASS_NAME_LOOKUP[pos];
    //var div = document.createElement("div");
    var div = "<div class='" + classNames + "'></div>"; 
    boxesHTML += div; 
    ++i;
  }   
  
  targetNode.innerHTML = boxesHTML;
})();