path: root/client/components/forms/forms.styl

@import 'nib'

select,
textarea,
input:not([type=file]),
button
  box-sizing: border-box
  background-color: #ebebeb
  border: 1px solid #ccc
  border-radius: 3px
  display: block
  margin-bottom: 12px
  min-height: 34px
  padding: 7px

  &.full
    width: 100%

  &.input-error
    background-color: #ece9e9
    border-color: #ba1212

  &:focus
    outline: 0

input[type="file"]
  margin-bottom: 16px

input[type="radio"]
  -webkit-appearance: radio
  min-height: inherit

input[type="text"],
input[type="password"],
input[type="email"]
  transition: background 85ms ease-in,
        border-color 85ms ease-in
  width: 250px

  &.inline-input
    background: none
    border: 0
    margin: 0
    padding: 2px
    min-height: 0
    height: 18px
    width: 200px

  &.full-line
    width: 100%

input[type="email"]:invalid
  box-shadow: none

input[type="text"],
input[type="password"],
input[type="email"],
textarea

  &:hover
    border-color: #999

    &.input-error
      border-color: #ba1212

  &:focus
    background: #fff
    border-color: #318ec4
    box-shadow: 0 0 2px #318ec4

    &.input-error
      background-color: #f8f7f7
      border-color: #ba1212
      box-shadow: 0 0 2px #d11515

  &:disabled
    background-color: #dcdcdc
    border-color: #bfbfbf
    color: #8c8c8c
    -webkit-touch-callout: none
    user-select: none

select
  max-height: 300px
  width: 256px
  margin-bottom: 8px

  &.inline
  	width: 100%

option[disabled]
  color: #8c8c8c

textarea
  height: 150px
  transition: background 85ms ease-in,
        border-color 85ms ease-in
  resize: vertical
  width: 100%

  &.editor
    resize: none
    padding-bottom: 22px


.button
  border-radius: 3px
  text-decoration: none
  position: relative

input[type="submit"],
button
  background: #cfcfcf
  background: linear-gradient(#cfcfcf, #c2c2c2)
  border: none
  cursor: pointer
  display: inline-block
  font-weight: 700
  line-height: 22px
  margin: 8px 4px 0 0
  padding: 7px 20px
  text-align: center

  .wide
    padding-left: 30px
    padding-right: 30px

  &:hover,
  &:focus
    background: #c2c2c2
    background: linear-gradient(#c2c2c2, #b5b5b5)

  &:active
    background: #b5b5b5
    background: linear-gradient(#b5b5b5, #a8a8a8)
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)

    &:hover,
    &:focus,
    &:active
      background: #e6e6e6
      background: linear-gradient(#e6e6e6, #e6e6e6)

  &.primary
    background: #005377
    box-shadow: 0 1px 0 #4d4d4d
    color: white

    &:hover,
    &:focus
      background: #004766

    &:active
      background: #01628C

  &.negate
    &:hover,
    &:focus
      background: #990f0f
      background: linear-gradient(#990f0f, #7d0c0c)
      box-shadow: 0 1px 0 #4d4d4d
      color: #fff

    &:active
      background: #7d0c0c
      box-shadow: 0 1px 0 #4d4d4d
      color: #fff

  i.fa
    margin-right: 10px

input[type="submit"].disabled,
input[type="submit"]:disabled,
input[type="button"].disabled,
button.disabled,
.button.disabled

  &,
  &:hover,
  &:active
    background: #cfcfcf
    cursor: default
    box-shadow: none
    color: #a8a8a8

fieldset
  border: 1px solid #bfbfbf
  padding: 15px
  margin-bottom: 15px

input[type="hidden"]
  display: none

.radio-div,
.check-div
  display: block
  margin: 0 0 4px 20px
  min-height: 20px
  position: relative

  input
    left: -18px
    min-height: 0
    margin: 0
    padding: 0
    position: absolute
    top: 2px

  label
    font-weight: 400

label
  display: block
  font-weight: 700
  margin-bottom: 4px

  &.form-error
    color: #ba1212

input,
textarea
  &::-webkit-input-placeholder,
  &::-moz-placeholder
    color: #8c8c8c

.edit-controls,
.add-controls
  display: flex
  align-items: baseline
  margin-top: 0

  button[type=submit]
  input[type=button]
    float: left
    height: 32px
    margin-top: -2px
    padding-top: 5px
    padding-bottom: 5px

  .fa-times-thin
    font-size: 26px
    margin: 3px 4px

// Material Design checkboxes
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked
  position: absolute
  left: -9999px
  visibility: hidden

.materialCheckBox
  position: relative
  width: 13px
  height: @width
  z-index: 0
  border: 2px solid #5a5a5a
  border-radius: 1px
  transition: .2s
  margin: 0
  cursor: pointer

  &.is-checked
    top: -4px
    left: -3px
    width: 7px
    height: 15px
    margin-right: 6px
    border-top: 2px solid transparent
    border-left: 2px solid transparent
    transform: rotate(40deg)
    -webkit-backface-visibility: hidden
    transform-origin: 100% 100%

.button-link
  background: #fff
  background: linear-gradient(#fff, #f5f5f5)
  border-radius: 3px
  box-sizing: border-box
  user-select: none
  border: 1px solid #e3e3e3
  border-bottom-color: #c2c2c2
  cursor: pointer
  display: block
  font-weight: 700
  height: 34px
  margin-top: 6px
  max-width: 300px
  padding: 7px
  position: relative
  text-decoration: none
  overflow: ellipsis

  .on
    background: #48b512
    background: linear-gradient(#48b512, #3d990f)
    border-radius: 3px
    color: #fff
    display: none
    font-size: 12px
    font-weight: 700
    height: 17px
    line-height: @height
    margin: 0
    padding: 2px 4px
    position: absolute
    right: 5px
    top: 5px
    text-align: center

  &.is-on
    padding-right: 30px
    max-width: 196px

    .on
      display: block

  &.inline
    color: #666
    padding: 2px 14px
    margin-left: 4px

  &.setting
    height: 52px
    float: left
    position: relative
    margin-top: 0

    &.disabled
      background: #fff
      border-color: #e9e9e9
      color: #8c8c8c
      cursor: default

      select
        display: none

      &:hover .label
        color: #8c8c8c

      &,
      &:hover,
      &:active,
      &.primary,
      &.primary:hover,
      &.primary:active
        background: #cfcfcf
        border-color: #c2c2c2
        border-bottom-color: #b5b5b5
        cursor: default
        box-shadow: none
        color: #a8a8a8

    .label
      color: #8c8c8c
      display: block
      font-size: 12px
      line-height: 14px
      margin-bottom: 0

    &:hover .label
      color: #eee

    .value
      display: block
      font-size: 18px
      line-height: 24px
      overflow: hidden
      text-overflow: ellipsis

    label
      display: none

    select
      border: none
      cursor: pointer
      height: 50px
      left: 0
      margin: 0
      opacity: 0
      position: absolute
      top: 0
      z-index: 2
      width: 100%

  &:hover
    background: #318ec4
    background: linear-gradient(#318ec4, #2b7cab)
    border-color: #2e85b8
    color: #fff

    .on
      background-image: none
      background-color: rgba(255, 255, 255, .3)
      border-color: transparent

  &:active
    background: #2e85b8
    background: linear-gradient(#2e85b8, #28739f)
    border-color: #2b7cab
    color: #fff

  .button-link.negate

    &:hover
      background: #990f0f
      background: linear-gradient(#990f0f, #7d0c0c)
      border-color: @background

    &:active
      background: #7d0c0c
      border-color: #990f0f


  &.primary
    background: #48b512
    background: linear-gradient(#48b512, #3d990f)
    border: 1px solid
    border-color: #3d990f
    color: #fff

    &:hover
      background: #3d990f
      background: linear-gradient(#3d990f, #327d0c)
      border-color: #3d990f

  &.danger
    background: #ba1212
    background: linear-gradient(#ba1212, #8b0e0e)
    border: 1px solid
    border-color: #a21010
    color: #fff

    &:hover
      background: #a21010
      background: linear-gradient(#a21010, #740b0b)
      border-color: #8b0e0e

button
  &.quiet-button,
  &.loud-text-button
    background: none
    text-align: left
    line-height: normal
    border: none
    box-shadow: none

    &:active
      color: #4d4d4d
      background: #d3d3d3
      box-shadow: none

  &.quiet-button
    font-weight: 400
    text-decoration: underline

  &.loud-text-button
    width: 100%

    &:hover
      color: #111

.emphasis-button,
.quiet-button
  border-radius: 3px
  user-select: none
  color: #8c8c8c
  display: block
  margin: 2px 0
  padding: 6px 8px
  position: relative

  &.w-img
    padding-left: 28px

  &:hover
    color: #4d4d4d
    background: #dcdcdc

  &:active
    color: #4d4d4d
    background: #d3d3d3

.quiet-button-large
  padding: 16px 24px

.emphasis-button
  color: #74663e
  background: #ecdfbb

  &:hover
    color: #53492d
    background: #e7d6a7

  &:active
    color: #53492d
    background: #e1cc93

.is-editable
  cursor: pointer

.big-link
  border-radius: 3px
  display: block
  margin: 6px 0 6px 40px
  padding: 11px
  position: relative
  text-decoration: none
  font-size: 16px
  line-height: 20px

  .text
    text-decoration: underline

  &:hover
    background: #dcdcdc

  &.options
    padding-right: 41px

  .option
    height: 30px
    width: @height
    position: absolute
    right: 6px
    top: 6px

  &.none
    color: #8c8c8c
    text-decoration: none

    &:hover
      background: transparent

  &.avatar-changer
    padding-right: 51px

    .member
      border: 1px solid #ccc
      border-radius: 3px
      height: 40px
      width: @height
      position: absolute
      right: 0
      top: 0

      .member-avatar
        height: 40px
        width: @height

      .member-initials
        font-size: 16px
        height: 40px
        line-height: @height
        max-height: @height

.show-more
  border-radius: 3px
  color: #8c8c8c
  display: block
  padding: 16px 8px 16px 40px
  margin: 8px 0

  &:hover
    background: #dcdcdc
    text-decoration: underline

  &.compact
    padding: 12px 8px
    margin: 8px 0 0
    text-align: center

.board-widget .show-more
  padding: 12px 8px 12px 40px

.uploader
  clear: both
  cursor: pointer
  position: relative
  height: 34px
  width: 100%

  .realfile
    cursor: pointer
    height: 34px
    line-height: @height
    position: absolute
    top: 0
    left: 0
    width: 100%
    z-index: 2
    font-size: 23px

    input[type="file"]
      cursor: pointer
      height: 34px
      line-height: @height
      margin: 0
      opacity: 0
      padding: 0
      width: 100%
      z-index: 2
      font-size: 23px

  &:hover .fakefile
    background: #318ec4
    background: linear-gradient(#318ec4, #2b7cab)
    border-color: #2e85b8
    color: #fff

.dropdown-menu
  border-radius: 2px
  overflow: hidden

  li
    border-top: none

    a
      padding: 4px 12px 4px 8px

      img
        width: 18px
        height: @width
        margin-right: 5px
        vertical-align: middle

      .minicard-label
        width: 11px
        height: @width
        border-radius: 2px
        margin: 2px 7px -2px -2px
        display: inline-block

    &.active
      background: #005377

      a, .quiet
        color: white

// Material Design Toggle Switch
.material-toggle-switch
  display: flex

.toggle-label
  position: relative
  display: block
  height: 20px
  width: 44px
  background-color: #a6a6a6
  border-radius: 100px
  cursor: pointer
  transition: all 0.3s ease

  &:after
    position: absolute
    left: -2px
    top: -3px
    display: block
    width: 26px
    height: 26px
    border-radius: 100px
    background-color: #fff
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
    content: ''
    transition: all 0.3s ease

  &:active
    &:after
      transform: scale(1.15, 0.85)

.toggle-switch:checked ~ .toggle-label
  background-color: #6fbeb5

  &:after
    left: 20px
    background-color: #179588

.toggle-switch:checked:disabled ~ .toggle-label
  background-color: #d5d5d5
  pointer-events: none

  &:after
    background-color: #bcbdbc

.toggle-switch
  display: none

.toggle-switch-title
  margin: 0 0.5em
  display: flex


@media screen and (max-width: 800px)
  .edit-controls,
  .add-controls
    .fa-times-thin
      margin: 3px 20px