SOURCE CODE: Uize.Widgets.Buttons.Directional.Css (view docs)

<%@ required ('Uize.Widgets.CssUtil'); %>
<%
  /* TODO:
    - implement offset positioning for over and active states to emphasize arrow direction
      - shift 1px for over, and 2px for active
      - to simplify CSS, resolve state and direction in widget to CSS classes for X and Y...
        - shiftLeft, shiftLeftMore, shiftRight, shiftRightMore
        - shiftUp, shiftUpMore, shiftDown, shiftDownMore
  */
  var
    _cssUtil = Uize.Widgets.CssUtil,
    _boxBorderWidth = _cssUtil.box.border.width
  ;
%>

.`arrowCenterPin` {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
}

.`arrow` {
  display: block;
  position: absolute;
  border: 20px;
  border-style: solid;
  border-color: #666;
  opacity: .8;
}

/*** styling for different flavors ***/
<%
  function _flavorColorRule (_flavor) {
    %>.`<%= _flavor %>` .`arrow`,
    .`<%= _flavor %>-over` .`arrow`,
    .`<%= _flavor %>-active` .`arrow`,
    .`<%= _flavor %>-disabled` .`arrow` {
      border-color: #fff;
    }<%
  }
  _flavorColorRule ('positive');
  _flavorColorRule ('negative');
  _flavorColorRule ('primary');
%>

/*** styling for different directions ***/
  .`right` .`arrow`,
  .`up` .`arrow`,
  .`down` .`arrow`,
  .`upLeft` .`arrow`,
  .`downLeft` .`arrow` {
    border-right-color: transparent;
  }
  .`left` .`arrow`,
  .`right` .`arrow`,
  .`down` .`arrow`,
  .`upLeft` .`arrow`,
  .`upRight` .`arrow` {
    border-bottom-color: transparent;
  }
  .`left` .`arrow`,
  .`up` .`arrow`,
  .`down` .`arrow`,
  .`upRight` .`arrow`,
  .`downRight` .`arrow` {
    border-left-color: transparent;
  }
  .`left` .`arrow`,
  .`right` .`arrow`,
  .`up` .`arrow`,
  .`downLeft` .`arrow`,
  .`downRight` .`arrow` {
    border-top-color: transparent;
  }

/*** styling for different states ***/
<%
  function _stateOpacityRule (_state,_opacity) {
    %>.`normal-<%= _state %>` .`arrow`,
    .`positive-<%= _state %>` .`arrow`,
    .`negative-<%= _state %>` .`arrow`,
    .`primary-<%= _state %>` .`arrow` {
      opacity: <%= _opacity %>;
    }<%
  }
  _stateOpacityRule ('over',.9);
  _stateOpacityRule ('active',1);
  _stateOpacityRule ('disabled',.4);
%>

/*** styling for different sizes ***/
<%
  var _sizes = _cssUtil.sizes;
  function _sizeStyleRule (_sizeName,_horizontalPadding) {
    var
      _size = _sizes [_sizeName],
      _sizeOuter = _size.outer,
      _widthHeight = _sizeOuter - _boxBorderWidth * 2,
      _arrowBaseWidth = _widthHeight * .7,
      _halfArrowBaseWidth = _arrowBaseWidth / 2,
      _halfArrowBaseWidthHeight = _arrowBaseWidth / 2,
      _quarterArrowBaseWidthHeight = _arrowBaseWidth / 4,
      _diagonalArrowWidthHeight = Math.sqrt (_arrowBaseWidth * _arrowBaseWidth / 2),
      _diagonalArrowCenteringOffset = _diagonalArrowWidthHeight / 2
    ;
    %>.`<%= _sizeName %>` .`arrow` {
      border-width: <%= _halfArrowBaseWidth %>px;
    }
    .`<%= _sizeName %>`.`left` .`arrow`,
    .`<%= _sizeName %>`.`right` .`arrow` {
      top: <%= -_halfArrowBaseWidthHeight %>px;
    }
    .`<%= _sizeName %>`.`left` .`arrow` {
      left: <%= -_halfArrowBaseWidthHeight - _quarterArrowBaseWidthHeight %>px;
    }
    .`<%= _sizeName %>`.`right` .`arrow` {
      left: <%= -_quarterArrowBaseWidthHeight %>px;
    }
    .`<%= _sizeName %>`.`up` .`arrow`,
    .`<%= _sizeName %>`.`down` .`arrow` {
      left: <%= -_halfArrowBaseWidthHeight %>px;
    }
    .`<%= _sizeName %>`.`up` .`arrow` {
      top: <%= -_halfArrowBaseWidthHeight - _quarterArrowBaseWidthHeight %>px;
    }
    .`<%= _sizeName %>`.`down` .`arrow` {
      top: <%= -_quarterArrowBaseWidthHeight %>px;
    }
    .`<%= _sizeName %>`.`upLeft` .`arrow`,
    .`<%= _sizeName %>`.`upRight` .`arrow`,
    .`<%= _sizeName %>`.`downLeft` .`arrow`,
    .`<%= _sizeName %>`.`downRight` .`arrow`,
    .`<%= _sizeName %>`.`center` .`arrow` {
      border-width: <%= _diagonalArrowWidthHeight / 2 %>px;
    }
    .`<%= _sizeName %>`.`upLeft` .`arrow`,
    .`<%= _sizeName %>`.`upRight` .`arrow`,
    .`<%= _sizeName %>`.`downLeft` .`arrow`,
    .`<%= _sizeName %>`.`downRight` .`arrow`,
    .`<%= _sizeName %>`.`center` .`arrow` {
      top: <%= -_diagonalArrowCenteringOffset %>px;
      left: <%= -_diagonalArrowCenteringOffset %>px;
    }<%
  }
  _sizeStyleRule ('tiny');
  _sizeStyleRule ('small');
  _sizeStyleRule ('medium');
  _sizeStyleRule ('large');
%>