|
|
|
|
$list-height = 500px
|
|
|
|
|
$sidebar-width = 250px
|
|
|
|
|
$input-height = 80px
|
|
|
|
|
$input-padding = 10px
|
|
|
|
|
$send-button-width = 50px
|
|
|
|
|
|
|
|
|
|
#messagePad
|
|
|
|
|
min-height: rem($list-height)
|
|
|
|
|
position: relative
|
|
|
|
|
|
|
|
|
|
.messagepad
|
|
|
|
|
position: relative
|
|
|
|
|
|
|
|
|
|
.messagepad__sidebar
|
|
|
|
|
border-right: 1px solid #EEE
|
|
|
|
|
float: left
|
|
|
|
|
width: rem($sidebar-width)
|
|
|
|
|
|
|
|
|
|
.messagepad__list
|
|
|
|
|
overflow: auto
|
|
|
|
|
height: rem($list-height)
|
|
|
|
|
|
|
|
|
|
.messagepad__header
|
|
|
|
|
position: absolute
|
|
|
|
|
left: rem($sidebar-width)
|
|
|
|
|
right: 0
|
|
|
|
|
top: 0
|
|
|
|
|
height: rem(30px)
|
|
|
|
|
padding: rem(5px)
|
|
|
|
|
text-align: center
|
|
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
|
|
|
|
|
|
.messagepad__content
|
|
|
|
|
position: absolute
|
|
|
|
|
left: rem($sidebar-width)
|
|
|
|
|
right: 0
|
|
|
|
|
top: rem(30px)
|
|
|
|
|
bottom: rem($input-height)
|
|
|
|
|
overflow: auto
|
|
|
|
|
padding: rem(30px)
|
|
|
|
|
|
|
|
|
|
.messagepad__input
|
|
|
|
|
display: none
|
|
|
|
|
position: absolute
|
|
|
|
|
left: rem($sidebar-width)
|
|
|
|
|
right: 0
|
|
|
|
|
bottom: 0
|
|
|
|
|
height: $input-height
|
|
|
|
|
border-top: 1px solid #EEE
|
|
|
|
|
|
|
|
|
|
&.visible
|
|
|
|
|
display: block
|
|
|
|
|
|
|
|
|
|
button
|
|
|
|
|
display: block
|
|
|
|
|
appearance: none
|
|
|
|
|
position: absolute
|
|
|
|
|
right: 0
|
|
|
|
|
width: rem($send-button-width)
|
|
|
|
|
top: 0
|
|
|
|
|
height: 100%
|
|
|
|
|
border: 0
|
|
|
|
|
background: none
|
|
|
|
|
text-align: center
|
|
|
|
|
line-height: rem($input-height)
|
|
|
|
|
font-size: rem($font-size-icon)
|
|
|
|
|
transition: background-color .1s, color .1s, opacity .1s
|
|
|
|
|
transition-timing-function: linear
|
|
|
|
|
outline: 0
|
|
|
|
|
|
|
|
|
|
&:enabled
|
|
|
|
|
cursor: pointer
|
|
|
|
|
background-color: $primary-color
|
|
|
|
|
color: #FFF
|
|
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
|
background-color: lighten($primary-color, 10%)
|
|
|
|
|
|
|
|
|
|
&:disabled
|
|
|
|
|
color: $text-1-color
|
|
|
|
|
opacity: 0.3
|
|
|
|
|
|
|
|
|
|
.messagepad__textarea-container
|
|
|
|
|
position: absolute
|
|
|
|
|
left: rem($input-padding)
|
|
|
|
|
right: rem($send-button-width + $input-padding)
|
|
|
|
|
top: rem($input-padding)
|
|
|
|
|
bottom: rem($input-padding)
|
|
|
|
|
|
|
|
|
|
textarea
|
|
|
|
|
display: block
|
|
|
|
|
border: 0
|
|
|
|
|
background: none
|
|
|
|
|
padding: 0
|
|
|
|
|
width: 100%
|
|
|
|
|
height: 100%
|
|
|
|
|
font-size: rem($font-size-secondary)
|
|
|
|
|
resize: none
|
|
|
|
|
outline: 0
|
