kdf/src/themes/default/kdfn.styl

KD: a non-document focused UI Framework for web applications.

/* FONTS */
serif  = Georgia, Times New Roman, Serif
sans   = Helvetica, Geneva, Arial
lucida = "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif
mono   = 'Monaco','Andale Mono','Courier New',monospace

/* COLORS */
light-green    = #7ebe4c
dark-green     = #5d9721
browser-bg     = #f8f8f8
k-orange       = #FF9200
normal-text    = #222
dimmed-text    = #666
link-color     = #07c
page-text      = #787878
grouppage-link = #f8b45f

linkColor1     = #ff9200

selectedBgColor = #1aaf5d

/* FUNCTIONS */

ellipsis()
  text-overflow   ellipsis
  overflow        hidden
  white-space     nowrap

vendor(a, b)
  -webkit-{a}  b
  -moz-{a}     b
  // -khtml-{a}   b
  // -o-{a}       b
  // -icab-{a}    b
  {a}          b


size()
  width   arguments[0]
  height  arguments[1]

rounded()
  vendor(border-radius,arguments)

shadow()
  vendor(box-shadow,arguments)

gradient()
  background-image -moz-linear-gradient(100% 100% 90deg, arguments[1], arguments[0]) arguments[2]
  background-image -webkit-gradient(linear, 0% 0%, 0% 100%, from(arguments[0]), to(arguments[1])) arguments[2]
  background-image -khtml-gradient(linear, 0% 0%, 0% 100%, from(arguments[0]), to(arguments[1])) arguments[2]
  background-image -o-linear-gradient(arguments[0], arguments[1]) arguments[2];

gradient1()
  background-image -moz-linear-gradient(270deg, arguments[2] arguments[3], arguments[0] arguments[1])
  background-image -webkit-gradient(linear, 0% arguments[1], 0% arguments[3], from(arguments[0]), to(arguments[2]))
  background-image -khtml-gradient(linear, 0% arguments[1], 0% arguments[3], from(arguments[0]), to(arguments[2]))
  background-image -o-linear-gradient(arguments[0], arguments[1]);

gradient2()
  background-image -moz-radial-gradient(arguments[0] arguments[1], arguments[2] arguments[3])
  background-image -webkit-radial-gradient(arguments[0], arguments[1],arguments[2], arguments[3])
  background-image -khtml-radial-gradient(arguments[0], arguments[1], arguments[2], arguments[3])
  background-image -o-radial-gradient(arguments[2], arguments[3]);



fl()
  display block
  float left

fr()
  display block
  float right

kdfsprite()
  // TODO: Make a seperate sprite for framework only
  bg  image,url("../images/_kd.sprites.png")
  bg  color,transparent
  bg  repeat,no-repeat

noTextSelection()
  vendor(user-select,none)

bg(prop,args)
  background-{prop} args

hidden()
  display     none
  visibility  hidden

visible()
  display     block
  visibility  visible

invisible()
  visibility  hidden

borderBox()
  vendor(box-sizing,border-box)
contentBox()
  vendor(box-sizing,content-box)

blockMid()
  display           inline-block
  vertical-align    middle

blockMidTop()
  display           inline-block
  vertical-align    top

noTextDeco()
  text-decoration       none
  excludeHoverState = arguments[0]
  if excludeHoverState
    &:hover
      text-decoration   underline
  else
    &:hover
      text-decoration   none

abs()
  t = arguments[0]
  r = arguments[1]
  b = arguments[2]
  l = arguments[3]
  top t    if t
  right r  if r
  bottom b if b
  left l   if l
  _abs()

_abs()
  position absolute

rel()
  position    relative

sta()
  position    static

fix()
  position    fixed

headerFont()
  font-family Ubuntu, "Bree Serif", Helvetica, sans-serif

pointer()
  cursor     pointer

kalc()
  // vendor         transition, none
  {arguments[0]}  -webkit-calc(arguments[1]) arguments[2]
  {arguments[0]}  calc(arguments[1]) arguments[2]

flex()
  display         -webkit-box
  display         -moz-box
  display         flex

singleTransformTransition()

  -webkit-transition      -webkit-transform arguments[0] arguments[1]
  -moz-transition         -moz-transform arguments[0] arguments[1]
  transition              transform arguments[0] arguments[1]

cf()
  /**
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    contenteditable attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that are clearfixed.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */

  &:before
  &:after
    content " "   /* 1 */
    display table /* 2 */


  &:after
    clear both