SimenB/stylint

// Filter controls

.filter
  @media ( max-width: $screen-xs )
    padding: .25em

    h3
      display: none

  @media ( max-width: $screen-xs )
    padding: .25em


// @REPLACE
.filter-indication
  border-bottom: none
  border-left: 1px solid $color-white
  box-shadow: none
  color: $color-green
  display: inline-block !important
  font-size: 9pt !important
  position: relative
  vertical-align: text-top

  span
    color: $color-gray-m
    display: inline

  // @REPLACE
  select
    @extends .btn
    @extends .btn-sm
    @extends .button-green
    border-radius: 0 !important
    border: 0 !important
    box-shadow: none
    display: inline-block
    outline: 0 !important
    padding-right: 3em
    vertical-align: text-top

  // @REPLACE
  .ss-icon
    @extends .text-shadow-reverse
    color: $color-white
    cursor: pointer
    display: inline-block
    font-size: .72em
    pointer-events: none
    position: relative
    right: 2em
    top: .22em


// $TODO REMOVE ME LATER
.form-control
  box-shadow( inset 0 1px 1px rgba( 0, 0, 0, .075 ) )
  form-control-focus()
  placeholder()
  transition( all, $fast )
  background-color: $input-bg
  background-image: none
  border-radius: $input-border-radius
  border: 1px solid $input-border
  color: $input-color
  display: block
  font-size: $font-size-base
  height: $input-height-base // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  line-height: $line-height-base
  padding: $padding-base-vertical $padding-base-horizontal
  width: 100%

  // Disabled and read-only inputs
  // HTML5 says that controls under a fieldset > legend:first-child won't be
  // disabled if the fieldset is disabled. Due to implementation difficulty, we
  // don't honor that edge case we style them as disabled anyway.
  &[disabled],
  &[readonly],
  fieldset[disabled] &
    background-color: $input-bg-disabled
    cursor: not-allowed
    opacity: 1 // iOS fix for unreadable disabled content

  // Reset height for `textarea`s
  textarea&
    height: auto


// just pulling out of bootstrap
// this is way way overkill $TODO
// Input groups
// --------------------------------------------------

// Base styles
// prevent input groups from inheriting border styles from table cells when placed within a table
.input-group
  border-collapse: separate
  display: table
  position: relative // For dropdowns

  // Undo padding and float of grid classes
  &[class*='col-']
    float: none
    padding-left: 0
    padding-right: 0

  /**
   * 1 Ensure that the input is always above the *appended* addon button for border colors
     2 IE9 fubars the placeholder attribute in text inputs
   */
  .form-control
    float: left // 2
    margin-bottom: 0
    position: relative // 1
    width: 100%
    z-index: 2 // 1


// Sizing options
// Remix the default form control sizing classes into new ones for easier
// manipulation.
// @REPLACE
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn
  input-lg()

.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn
  input-sm()


// Display as table-cell
// @REPLACE
.input-group-addon,
.input-group-btn,
.input-group .form-control
  display: table-cell

  &:not( :first-child ):not( :last-child )
    border-radius: 0


// @REPLACE
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn
  width: 1%
  white-space: nowrap
  vertical-align: middle // Match the inputs


// Text input groups
// @REPLACE
.input-group-addon
  background-color: $input-group-addon-bg
  border-radius: $border-radius-base
  border: 1px solid $input-group-addon-border-color
  color: $input-color
  font-size: $font-size-base
  font-weight: normal
  line-height: 1
  padding: $padding-base-vertical $padding-base-horizontal
  text-align: center

  // Sizing
  &.input-sm
    border-radius: $border-radius-small
    font-size: $font-size-small
    padding: $padding-small-vertical $padding-small-horizontal

  &.input-lg
    border-radius: $border-radius-large
    font-size: $font-size-large
    padding: $padding-large-vertical $padding-large-horizontal

  // Nuke default margins from checkboxes and radios to vertically center within.
  input[type='radio'],
  input[type='checkbox']
    margin-top: 0



// @REPLACE
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn
  border-right-radius( 0 )

// @REPLACE
.input-group-addon:first-child
  border-right: 0

// @REPLACE
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn
  border-left-radius( 0 )

// @REPLACE
.input-group-addon:last-child
  border-left: 0


// @REPLACE
// Button input groups
.input-group-btn
  position: relative
  // Jankily prevent input button groups from wrapping with `white-space` and
  // `font-size` in combination with `inline-block` on buttons.
  font-size: 0
  white-space: nowrap

  // Negative margin for spacing, position for bringing hovered/focused/actived
  // element above the siblings.
  > .btn
    position: relative
    + .btn
      margin-left: -1px

    // Bring the 'active' button to the front
    &:hover,
    &:focus,
    &:active
      z-index: 2

  // Negative margin to only have a 1px border between the two
  &:first-child
    > .btn,
    > .btn-group
      margin-right: -1px

  &:last-child
    > .btn,
    > .btn-group
      margin-left: -1px