kdf/src/themes/default/kd.input.styl

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

@import "./kdfn"

@css {
/*
KDInputView styles
*/
}

label.kdlabel
  line-height 1.8em
  margin-right 5px
  color #888
  clear both

input.kdinput.text
textarea.kdinput.text
  size                100%, auto
  z-index             1
  padding             10px 14px
  color               #3E4F55
  font-size           16px
  line-height         22px
  font-weight         300
  rounded             6px
  text-align          left
  bg                  color, #f4f4f4
  border              1px solid #d7d7d7
  outline             none
  borderBox()
  rel()

  &.big
    padding           15px 19px

  &.medium
    padding           10px 14px
    line-height       22px

  &.small
    padding           3px 6px
    font-size         12px
    line-height       12px

  &:hover
    border            1px solid #aaa
  &:focus
    border            1px solid rgba(125,190,241,1)
    shadow            0 0 3px rgba(125,190,241,.7)

  &.validation-error
    border            1px solid #F13A18

  &::-webkit-input-placeholder
    color               #93979a
    font-weight         300
  &:-moz-placeholder
    color               #93979a
    font-weight         300

  &[readonly=true]
    opacity             .5

.kdinput:focus
  &::-webkit-input-placeholder
    opacity 0.5
  &:-moz-placeholder
    opacity 0.5

textarea.kdinput.text
  height              auto

textarea.kdinput.text.monospace
  font-family         mono

.kdinput.hitenterview
  resize              none
  overflow            hidden
  bg(image,url("../images/kd.hitenterview.inactive.png"))
  bg(color,transparent)
  bg(repeat,no-repeat)
  bg(position,right bottom)
  &.active
    bg(image,url("../images/kd.hitenterview.active.png"))

label.kdlabel
  cursor              default
  &[for]
    cursor            pointer
  .hitenterview-toggle
    font-family       sans
    font-size         11px
    text-transform    none
    text-decoration   underline

input.kdinput.checkbox
  &:focus
    shadow            0 0 3px rgba(125,190,241,.7)

select.kdinput.select
  rel()
  border              1px solid #ddd
  font-size           12px
  line-height         25px
  padding-top         5px
  margin              0
  color               #444
  outline             none
  bg                  color,#f2f2f2
  rounded             4px
  shadow              0 1px 0 white
  size                auto,25px
  &:hover
    border            1px solid #ccc
  &:focus
    border            1px solid rgba(125,190,241,1)
    shadow            0 0 3px rgba(125,190,241,.7)

@css {
/*
KDInputView > KDSelectBox styles
*/
}

div.kdselectbox
  background          #fff
  border              1px solid #d7d7d7
  border-radius       6px
  height              32px
  z-index             100
  overflow            hidden
  display             inline-block
  vertical-align      middle
  padding             0
  white-space         nowrap
  rel()

  &.focus
    outline           none

  select
    abs()
    cursor            pointer
    display           block
    vendor            appearance,none
    opacity           0.00001
    top               0
    left              0
    size              100%,100%
    z-index           100

  span.title
    font-size         12px
    font-weight       200
    color             #606060
    line-height       34px
    padding           0 40px 0 15px
    display           block
    text-decoration   none
    z-index           0

  span.arrows
    abs()
    z-index           0
    width             12px
    height            15px
    bg                image, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAPCAYAAADQ4S5JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEUyMjU2QTM5NkNCMTFFM0I3RTREQTIwRjcxRTYzMjAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEUyMjU2QTI5NkNCMTFFM0I3RTREQTIwRjcxRTYzMjAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEM1MDQ4RTU4MjNCMTFFM0IxMTNGNzk5NDUxRUEzRkEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEM1MDQ4RTY4MjNCMTFFM0IxMTNGNzk5NDUxRUEzRkEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7ihDfZAAAAb0lEQVR42pSSAQoAIQgETfz36V/rHR4cBWV62UJUtGOxRrVWcPT0WewBBWae9guEBzNPt22ANbsQHswbRAnzDEEJUgpVVPUKoNbaFYD9bZocPABJFJcBQAKSkRKa2OTP7H0NC4ntEUUNctafXgEGAD/kKSLY5c2uAAAAAElFTkSuQmCC')
    top               9px
    right             6px

.kd-radio-holder
.kd-checkbox-holder
  display             block
  line-height         30px
  min-height          30px

  input[type=checkbox],
  input[type=radio]
    display           inline-block
    margin            7px 5px 0 5px
    size              auto, auto
    vertical-align    top

  label
    display           inline-block

@css {
/*
KDInputView > KDSwitch styles
*/
}

.kdinputswitch
  background          transparent url("../images/switch_anim_orange_large1.png") no-repeat left bottom
  overflow            hidden
  margin              3px
  cursor              pointer
  size(59px,20px)
  fr()
.kdinputswitch.off
  background-position left bottom

.kdinputswitch.on
  background-position left top

@css {
/*
KDInputView > KDOnOffSwitch styles
*/
}

.on-off
  font-family           sans
  width                 auto
  rounded               2px
  a
    display             inline-block
    border              1px solid #cfcfcf
    font-size           9px
    font-weight         bold
    color               #b6b6b6
    line-height         8px
    text-align          center
    padding             7px 0px 6px 0px
    text-decoration     none
    text-shadow         0 1px 0 #ffffff
    text-transform      uppercase
    size                28px,auto
    gradient1           #e6e5e5,85.3%,white,23.9%
    shadow              0 1px 0 rgba(255, 255, 255, 0.69)
    &:hover
      gradient1         white,100%,#e6e5e5,15.3%
      color             #918f8c
      text-shadow       0 1px 0 #ffffff
      shadow            inset 0 1px 1px -1px rgba(0,0,0,0.32)
      border-top-color  #b9b9b9
    &.active
      border-color      #e2963f
      color             #ffffff
      text-shadow       0 -1px 0 #b97e42
      shadow            0 1px 0 rgba(255, 255, 255, 0.69), inset 0 1px 1px hsla(0, 0%, 0%, 0.12)
      gradient1         #f49f3f,82.7%,#e18931,30%
      &.off
        color               rgb(140,140,140)
        gradient1           white, 85.9%, #e6e5e5, 23.3%
        border              1px solid #cfcfcf
        text-shadow         0 0 0 #ccc
        shadow              0 1px 0 rgba(255,255,255,0.69), inset 0 3px 6px -5px rgba(0,0,0,0.69)
        // gradient1       rgb(199,81,29),100%,rgb(168,70,25),44%
    &.off
      // border-left       1px solid rgba(51, 51, 51, 0.15)
      letter-spacing    0px
      rounded           0 2px 2px 0
    &.on
      border-right      1px solid rgba(51, 51, 51, 0.15)
      rounded           2px 0 0 2px
  &.big
    width               76px
    a
      font-size         11px
      padding           9px 0px
      width             36px

  &.tiny
    a
      padding           3px 0px 2px 0px

  &.dark
    a
      border            none
      text-shadow       0 1px 0 #333
      background-image  none
      background-color  rgba(255,255,255,0.08)
      shadow            none
      &:hover
        shadow          none
      &.active
        gradient1       #f49f3f,82.7%,#e18931,30%
        shadow          none
        &.off
          shadow        none
    a:last-of-type
      border-right      none !important

  &.multiple-choice
    a
      border-radius       0
      padding-left        6px
      padding-right       6px
      width               auto
      border-right        none
      min-width           16px

    a:first-of-type
      border-top-left-radius     3px
      border-bottom-left-radius  3px

    a:last-of-type
      border-top-right-radius    3px
      border-bottom-right-radius 3px
      border-right               1px solid #cfcfcf
      &.active
        border-color             #e2963f

    .big
      width               auto

.kdview.kdfileupload
  min-width         340px

  .kdfileuploadlist,.kdfileuploadthumblist
    margin          5px 0
    span.file-size
      line-height   1.4em
      font-size     .9em
      color         dimmed-text
      margin-right  20px
      fr()
    span.file-title
      line-height   1.4em
    span.iconic.x
      abs()
      display       block
      top           3px
      right         0
      cursor        pointer
      line-height   21px
      text-align    center
      size(16px,16px)
      &:hover
        color       k-orange

  .kdfileuploadthumblist
    p.meta
      margin        0 5px
      fl()
      span
        display     block
        float       none
        &.close-icon
          top       3px
          right     3px
    img.thumb
      border        1px solid #ddd
      size(32px,32px)
      fl()

  .kdfileuploadarea
    border          1px solid #ddd
    height          58px
    shadow          0 0 5px rgba(0,0,0,.2) inset
    rounded(4px)
    borderBox()
    span
      display       block
      height        58px
      line-height   58px
      text-align    center
      color         dimmed-text
      font-size     1.2em
    span.info
      abs()
      top           0
      right         0
      display       block
      width         16px
      height        20px
      line-height   20px
      text-align    center
      color         dimmed-text
      font-size     1.2em
      cursor        pointer


  .kdfileuploadarea.hover
    border          1px solid rgba(125,190,241,1)
    shadow          0 0 3px rgba(125,190,241,.7) inset
    span
      color         link-color

.dragInAction
  .kdview.kdfileupload
    .kdfileuploadarea
      bg              color,rgba(125,190,241,.2)
      border          1px dashed rgba(125,190,241,1)
      shadow          0 0 3px rgba(125,190,241,.7) inset
      span
        color         link-color


/* INPUT HINT */
.kdinputwrapper
  rel()
span.kdinputhint
  abs()
  top               0
  left              0

@css {
/*
KDContentEditableView
*/
}
.kdcontenteditableview
  div
    size            100%, 100%
    min-width       1px

@css {
/*
KDInputView > KDTokenizedInputView styles
*/
}
.kdtokenizedinputview
  &:hover
    .kdcontenteditableview
      cursor          text

  .token
    color             #3aaaab