kdf/src/themes/default/kd.styl

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

@import "./kdfn"


@css {
/*
KD FRAMEWORK stylesheet starts
kd.styl
*/
}

body.dragInAction
  noTextSelection()

body.onscroll
  pointer-events    none

/*
**  KDView STYLES --
*/

.kdview
  rel()
  overflow hidden
  size(100%,100%)

span.hint
  color             #7e6b3d
  line-height       2em
  font-style        italic
  font-size         .8em

.border-box
  borderBox()

.content-box
  contentBox()

.fl
  fl()
.fr
  fr()
.ib
  display           inline-block

.lowercase
  text-transform    lowercase
/*
**  KDHeaderView STYLES
*/
h1.kdheaderview,h2.kdheaderview,h3.kdheaderview,h4.kdheaderview
  font-weight normal
  color #444
  border-bottom 1px solid #ddd
/*
  span
    margin 0 15px
*/
h1.kdheaderview
  font-size 20px
  line-height 40px
  height 40px

h2.kdheaderview
  font-size 16px
  line-height 31px
  height 31px
  span
    margin 0 10px

h3.kdheaderview
  font-size 14px
  line-height 25px
  height 25px
  span
    margin 0 10px

h4.kdheaderview
  font-size 12px
  line-height 20px
  height 20px
  width auto
  span
    margin 0 5px

/*
**  KDSplitView STYLES
*/
body.resize-in-action
  overflow          hidden !important

  .kdsplitview
  .kdsplitview-panel
    overflow        hidden !important

.kdsplitview

  .kdsplitview-panel
    overflow        auto
    abs()

  >.kdsplitview-resizer
    left            0
    top             0
    z-index         1
    bg              color transparent
    noTextSelection()
    abs()

  &.min-width-reached
    overflow auto

.kdsplitview-vertical

  >.kdsplitview-resizer
    cursor          ew-resize
    size            10px 100%

.kdsplitview-horizontal

  >.kdsplitview-resizer
    cursor          ns-resize
    size            100% 10px

.resize-in-action
  noTextSelection()

.kdsplitview-panel.floating
  z-index           10000

/*
**  KDTabView STYLES
*/

.kdview.kdhiddentab
  abs()
  left              -100% !important
  top               -100% !important
  visibility        hidden

.kdtabhandlecontainer
  padding-top       10px
  border-bottom     1px solid #ddd
  background-color  browser-bg
  overflow          visible
  height            30px
  vendor            transition, width .3s linear

  &.resize-in-action
    overflow hidden !important

  .kdtabhandle
    rel()
    color           k-orange
    overflow        hidden
    line-height     30px
    padding         0 25px 0 15px
    cursor          pointer
    border          1px solid transparent
    border-width    1px 1px 0
    rounded    3px,3px,0,0
    size            auto,29px
    borderBox()
    fl()
    &:hover
      size          auto,28px
      bg            color,avatar-border-color
    // &:first-child
    //   margin-left   15px
    b
      font-weight   normal
      text-overflow ellipsis
      white-space   nowrap
      overflow      hidden
      width         100%
      display       inline-block

  .kdtabhandle.hide-close-icon
    padding 0 15px 1px 15px
    span.close-tab
      display none

  .kdtabhandle.hidden
    hidden()

  .kdtabhandle.active
    color #222
    padding-bottom: 1px
    border 1px solid #ddd
    border-width 1px 1px 0
    background-color #fff
    size(auto,29px)
    z-index 1

    span.close-tab
      bg          color, #FFF
      bg          position,-80px -220px
      &:hover
        bg        position,-80px -240px

.kdtabhandlecontainer.hide-close-icons
  span.close-tab
    display none
  .kdtabhandle
    padding 0 15px 1px 15px

.kdtabview.subtabs
  .kdtabhandlecontainer
    padding 5px 0 2px 0
    font-size .85em
    border-bottom 1px solid #eee
    background-color white
    overflow visible
    height 20px
    .kdtabhandle
      color             k-orange
      line-height       20px
      padding           0 25px 0 15px
      cursor            pointer
      border            none
      size              auto, 20px
      // vendor            transition, opacity .1s linear
      rel()
      fl()
      &:hover
        size(auto,20px)
        background-color white
        span.close-tab
          opacity       1
      &:first-child
        margin-left 15px

      b
        font-weight normal

    .kdtabhandle.active
      color #222
      padding-bottom none
      border none
      size(auto,20px)
      z-index 1
      b
        font-weight bold

/*
**  KDListView STYLES
*/
.kdview.kdlistview
  size(auto,auto)

/*
**  KDAutoComplete STYLES
*/
.kdautocomplete.listview-wrapper
  abs()
  border            1px solid rgba(125,190,241,1)
  border-top        1px solid #f2f2f2
  margin            -1px 0 0 4px
  z-index           20000
  size              auto,auto
  bg                color,white
  shadow            0 3px 6px rgba(0,0,0,.1)
  rounded           0 0 5px 5px
  .kdview.kdlistview.kdautocompletelist
    padding           5px 0
    .kdlistitemview-default
      padding         0 5px
      border          none
      cursor          pointer
      line-height     27px
      bg(color,transparent)
      borderBox()
    .kdlistitemview-default.active
      color           white
      text-shadow     0 1px 0 rgba(0,0,0,.5)
      bg              color,rgba(125,190,241,1)
      shadow          0 0 1px rgba(0,0,0,.2) inset

.kdautocompletewrapper
  rel()
  display             block
  background          #fff
  // border              1px solid #ccc
  outline             none
  rounded             4px
  shadow              0 1px 0 white
  borderBox()
  // &:hover
  //   border            1px solid #aaa
  &.input-with-extras

    input.kdinput.text
      height          22px
      padding         2px 40px 2px 2px
      // border          none
      shadow(none)
      fl()
      &:hover
        border none
      &:focus
        shadow(none)
        border none

// .kdautocompletewrapper.focus
//   border            1px solid rgba(125,190,241,1)
//   shadow(0,0,3px,rgba(125,190,241,.7))

.kdview.kdautocompletedlistitem
  margin            1px 0 0 1px
  font-size         11px
  color             link-color
  line-height       20px
  padding           0 20px 0 8px
  border            1px solid rgba(204,217,225,1)
  bg                color,rgba(224,237,245,.9)
  size              auto,20px
  rounded           3px
  fl()
  span.close-icon
    abs()
    right           0
    top             0
    cursor          pointer




/*
**  KDNotification STYLES
*/
.kdnotificationholder
  abs()
  left -9999px
  size(100%,100%)

.kdnotification
  position            fixed
  background-color    rgba(0,0,0,.4)
  padding             10px
  z-index             20001
  rounded             5px
  .kdnotification-title
    color             white
    font-size         24px
    line-height       36px
    margin            2px
    // padding           2px 10px
    font-weight       bold

  .kdnotification-content
    // margin-top        8px
    font-size         16px
    line-height       18px
    // margin            5px 2px 2px
    // padding           2px 10px
    color             white

  .kdnotification-timer
    abs()
    top               21px
    right             25px
    color             white
    line-height       15px
    text-align        center
    font-size         15px
    size              20px,24px

  a.kdnotification-close
    abs()
    cursor                pointer
    display               block
    top                   24px
    right                 5px
    line-height           24px
    text-align            center
    font-size             24px
    text-decoration       none
    color                 white
    size                  20px,24px
    &:hover
      text-shadow         0 1px 0 #444

  &.tray
    vendor                transition, bottom .3s ease-in-out
    bottom                -100px
  &.growl
    vendor                transition, top .3s ease-in-out
    top                   -100px
  &.tray
  &.growl
    background-color      rgba(0,0,0,.4)
    .kdnotification-title
      font-size           18px
      line-height         28px
      float               none

    .kdnotification-content
      margin-top          0
      font-size           11px
      line-height         20px
      float               none
      padding             2px 0

    a.kdnotification-close
      top                 18px
      right               5px
      line-height         24px
      font-size           18px
      size                20px,18px
      bg                  position, -80px -540px
      kdfsprite()
      &:hover
        text-shadow       0 1px 0 #444
    &.mini
      padding             5px 25px 5px 5px
      rounded             5px
      a.kdnotification-close
        top               8px
        right             7px
        size              16px,16px
        rounded           2px
      .kdnotification-title
        font-size         12px
        line-height       16px
        font-weight       normal
        float             none

      .kdnotification-content
        margin-top        0
        font-size         10px
        line-height       14px
        float             none

  &.mini
    rounded               0 0 5px 5px
    padding               1px
    shadow                0 0px 1px 1px  rgba(255,255,255,0.1)\, inset 0 0px 2px #000
    .kdnotification-title
      font-size           12px
      line-height         16px
      font-weight         normal
      float               none
      padding             2px 10px
      p
        padding           0 10px

    .kdnotification-content
      margin-top          0
      font-size           10px
      line-height         14px
      float               none
    &.error
      background        rgba(185, 74, 72, 0.9)
      font-weight       600
    &.success
      background        rgba(70, 136, 71, .8)
      font-weight       600


/*
**  KDOverlay STYLES
*/
.kdoverlay
  abs()
  noTextSelection()
  top                   0
  left                  0
  z-index               10000
  background            rgba(0,0,0,.2)
  size                  100%,100%
  // vendor                transition, opacity .3s ease-in-out
  opacity               1
  &.animated
    opacity             0
    &.in
      opacity           1
  &.transparent
    background          transparent
  &.half-white
    background          rgba(255,255,255,.5)

.kdspotlightview
  fix()
  top                   0
  left                  0
  z-index               1000
  .kdoverlay
    bg                  color, rgba(0, 0, 0, .6)
    &.main
      bg                color, rgba(0, 0, 0, 0)
      background        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .6) 60%)
  &.shadow
    .main
      shadow            0 0 20px 40px rgba(0, 0, 0, .6) inset
      background        transparent

/*
  Global styles
*/
span.close-tab,.close-icon
  display       block
  right         0
  top           2px
  overflow      hidden
  size          20px, 20px
  cursor        pointer
  bg            position, -60px -220px
  kdfsprite()
  abs()
  &:hover
    bg          position,-60px -240px

span.close-btn-x
  abs()
  display       block
  right         0
  top           2px
  overflow      hidden
  size          20px,20px
  kdfsprite()
  bg            position,-60px -220px
  &:hover
    cursor      pointer
    bg          position,-60px -240px


.kdview.kdloader
  display             inline-block
  span
    size              100%,100%
    > *
      vertical-align  top

/**/
/* GENERIC STYLES */
/**/
.kddraggable
  position: relative

.kdcontenteditableview
  display     inline-block
  min-width   1px