app/assets/stylesheets/modules/forms.sass
@import load
$placeholder-color: #c8c8c8
// $label-width: 19.863636363636%
$label-width: 20.5%
// $input-width: 76.136363636364%
$input-width: 75.5%
\::-webkit-input-placeholder
color: $placeholder-color
\:-moz-placeholder
color: $placeholder-color
\::-moz-placeholder
color: $placeholder-color
\:-ms-input-placeholder
color: $placeholder-color
form
input[type=text],input[type=email],input[type=password],input[type=number], textarea
font:
family: helvetica, arial, verdana, sans-serif
weight: 200
size: 1em
border: 1px solid #dde3e1
line-height: 1.5em
height: 42px
text-indent: 10px
+box-sizing(border-box)
+border-radius(3px)
+box-shadow(0 1px 2px #f3f3f3 inset)
width: 100%
+input-placeholder(#919191)
+transition-property(all)
+transition-duration(0.125s)
&:focus
+input-placeholder(#b9ccc8)
border-color: #82ccd7
outline: none
text-indent: 12px
textarea
padding:
top: 8px
right: 12px
left: 10px
text-indent: 0
&:focus
padding-left: 12px
text-indent: 0
label
margin-bottom: 12px
display: block
font:
size: 1.125em
weight: 600
line-height: 1em
color: $darkblue
span.details
margin-top: 6px
display: block
font:
size: 0.889em
weight: normal
line-height: 1.5em
color: $middleblue
span.option
font-size: 1.125em
line-height: 1em
color: #c8c8c8
div.inline_label.flatline
display: inline-block
position: relative
width: 100%
label
display: inline-block
position: absolute
top: 7px
left: 0
input[type=text], input[type=email], input[type=number]
display: inline-block
// input text-indents need to be defined case-by-case
&.to
input
display: inline-block
text-indent: 35px
fieldset
margin:
top: 18px
bottom: 42px
padding-top: 18px
border-top: 1px solid #EFEFEF
&.last
margin-bottom: 0
input[type=text],input[type=email],input[type=password],input[type=number], textarea
margin-bottom: 12px
max-width: 360px
label
margin:
top: 12px
bottom: 6px
font:
size: 0.813em
weight: 600
line-height: 1.385em
form div.pill_wrap
margin-bottom: 18px
position: relative
float: left
width: 100%
+box-shadow(0 2px 0 rgba(0, 0, 0, 0.03))
border: 1px solid #BCCED1
background-color: $white
clear: both
input[type=text],input[type=email],input[type=password],input[type=number],input[type=file]
margin-bottom: 0
padding-left: 20px
display: block
float: left
height: 54px
border: none
border-left: 1px solid #f2f2f2
+border-radius(0)
+input-placeholder(#cccccc, 600)
&:focus
+input-placeholder(#b9ccc8, 600)
@media (max-width: 420px)
width: 66%
@media (min-width: 420px)
width: $input-width
input[type=file]
padding-top: 18px
height: 36px
width: 50%
label
margin:
top: 19px
bottom: 17px
// padding-left: 4%
padding-left: 2.5%
display: block
float: left
line-height: 18px
text:
align: left
transform: uppercase
@media (max-width: 420px)
width: 30%
@media (min-width: 420px)
width: $label-width
abbr
color: #e32
div.input.select.sculpt
margin-bottom: 0
display: block
float: left
+box-sizing(border-box)
border: none
border-left: 1px solid #f2f2f2
+border-radius(0)
+box-shadow(none)
height: 54px
@media (max-width: 420px)
width: 65%
@media (min-width: 420px)
width: $input-width
select
padding: 17px 0
text-indent: 20px
&:before
top: 18px
right: 20px
span.tip
position: absolute
background-color: $white
font-size: 0.875em
text-align: left
line-height: 1.286em
&.private
@media (max-width: 420px)
display: none
@media (min-width: 420px)
padding: 10px
width: 120px
top: 7px
right: -200px
+box-shadow(0 3px rgba(0, 0, 0, 0.05))
+border-radius(6px)
&:before
position: absolute
top: 26%
left: -8px
height: 0
width: 0
border:
top: 12px solid rgba($black, 0)
right: 8px solid $white
bottom: 12px solid rgba($black, 0)
content: ' '
&.question
@media (max-width: 420px)
display: none
@media (min-width: 420px)
padding: 10px
width: 120px
right: -100px
+box-shadow(0 3px rgba(0, 0, 0, 0.05))
+border-radius(6px)
&:before
position: absolute
top: 26%
left: -8px
height: 0
width: 0
border:
top: 12px solid rgba($black, 0)
right: 8px solid $white
bottom: 12px solid rgba($black, 0)
content: ' '
// Signup to sign a question - @todo ST: classname too close to "action", rename
.actions form
label
input[type=text],input[type=email],input[type=password],input[type=number]
margin-bottom: 6px
height: 36px
width: 100%
+box-sizing(border-box)
font-size: 0.813em
line-height: 1.385em
.cta-pill
width: 100%
// Select menu sculpted style
div.input.select.sculpt
+background-image(linear-gradient(#fdfdfd, white))
+box-shadow(0 1px 2px #e2e2e2, 0 1px 0 white inset)
+border-radius(3px)
border: 1px solid #DDE3E1
cursor: pointer
margin-bottom: 6px
display: inline-block
height: 40px
position: relative
overflow: hidden
width: 100%
max-width: 360px
&:hover
border: 1px solid #BBC4C1
&:before
position: absolute
top: 13px
right: 13px
label
abbr
display: none
select
background: none
display: inline-block
cursor: pointer
outline: none
border: 0
width: 105%
text-indent: 10px
padding: 11px 0
font-size: 0.813em
position: relative
z-index: 2
-webkit-appearance: none
-webkit-appearance: none
-moz-appearance: none
appearance: none
&:focus
border-color: #82ccd7
div.controls
display: block
margin-top: 36px
clear: both
width: 100%
margin-bottom: 36px
input[type=submit]
display: inline-block
span.info
color: #C8C8C8
display: inline-block
clear: none
width: 250px
font-size: 0.875em
font-weight: 100
margin-left: 10px
line-height: 1.286em
text-transform: none
vertical-align: middle
ul
clear: both
margin-top: 36px
width: 100%
li
display: inline-block
vertical-align: top
width: 30%
.question div.controls
input[type=submit]
display: inline-block
width: 33%
span.count
color: $lightblue
font-size: 0.813em
line-height: 1.385em
font-weight: 600
text-align: center
display: inline-block
margin-left: 20px
margin-top: 16px
.question.ask div.controls
margin-top: 0
input[type=submit], a.cta-pill
min-width: 100px
text-align: center
// Special stuff
div.count
position: relative
span.summary_count
position: absolute
font-size: 13px
font-weight: 600
color: #999
@media (max-width: 420px)
right: 0
@media (min-width: 420px)
top: 6px
right: 4em
span.toggle
display: inline-block
color: $darkblue
margin: 18px 0 36px
padding: 0
width: 100%
a.select
+border-radius(24px)
+box-shadow(0 2px 0 0 rgba(0, 0, 0, 0.03))
background: #d0e4e8
border: 1px solid #cfe3e8
color: $darkblue
cursor: pointer
display: inline-block
+RobotoRegular
font-size: 0.8em
line-height: 1.385em
padding: 12px
margin: 0 4px
text-transform: uppercase
&:hover
background-color: #cae1e5
&.mobile
display: none
&.active
+box-shadow(0 2px 0 0 rgba(0, 0, 0, 0.03), inset 0 0 0 1px #bae530)
border-color: #99C472
background: #AFD82D
color: #576b16
&:before,&:after
display: inline-block
margin-right: 6px
i
font-size: 1.5em
line-height: 1em
.address_lookup, .twitter_lookup
@media (max-width: 420px)
margin:
top: 1em !important
bottom: 1em !important
// Recipient Selection
.people-list.select-person
li
background: #f9f9f9
+transition(all 0.125s ease-in)
+opacity(0.8)
cursor: pointer
height: 165px
width: 43%
margin-right: 1%
padding: 2.5%
border-radius: 3px
border: 1px solid #E4E4E4
margin-bottom: 1%
position: relative
&:hover, &.selected, &.deselected:hover
+opacity(1)
+box-shadow(0 2px 0 rgba(0, 0, 0, 0.05))
+border-radius(3px)
top: -3px
position: relative
&.selected
border-color: #a7c578
span.selected
display: block
color: #a7c578
position: absolute
top: 6px
right: 6px
font-size: 18px
width: auto
&.deselected
+opacity(0.3)
div.select_box
display: none
div.avatar
width: 20%
h2
margin-left: 2.5%
display: inline-block
div.person-info
margin-left: 0
width: 100%
span.selected
position: absolute
top: .75em
right: 2em
display: none
font-size: 24px
color: $green
&.twitter
li
cursor: inherit
width: 40%
height: 100px
margin-left: 27%
h2
text-align: center
margin-top: -7px
display: inline-block
/*
*Success, Info, Error treatments & messages
div.notif
+box-shadow(0 3px 0 rgba($black, 0.05))
+border-radius(3px)
padding: 40px 20px
margin: 12px 0 24px 0
h3
padding-bottom: 12px
font:
size: 1em
weight: 600
+RobotoThin
line-height: 1.125em
color: #477380
p
padding-bottom: 12px !important
font-size: 0.813em !important
line-height: 1.385em !important
color: #477380
&.preview
margin-bottom: 36px
padding-bottom: 36px
background-color: #FDFDFD
border: 1px solid #EFEFEF
a.edit
vertical-align: top
div.notif_wrap
display: inline-block
margin-left: 5%
width: 60%
&.success
border: 1px solid #9fc41e
background: #f1fee9
h3
color: #8db10e
p
color: #6b754e
&.info
border: 1px solid #ECECEC
background: #fbfbfb
text-align: center
h3
color: $darkblue
p
color: #919192
&.error
border: 1px solid #F86369
background: #FFF4F4
text-align: center
h3
color: #AC4747
font-weight: 600
p
color: #AC4747
span.secure
margin-bottom: 18px
display: block
font-weight: 600
i
font-size: 1.125em
line-height: 1.333em
.login-link
margin-bottom: 1em
display: block
color: $middleblue
div.field_with_errors, form div.pill_wrap div.field_with_errors
label.message
@media (max-width: 420px)
display: none
@media (min-width: 420px)
color: #F86369
margin-top: 0
input[type=text],input[type=email],input[type=password],input[type=number]
background-color: #FFF4F4
border: 1px solid #F86369
+input-placeholder(#f86369)
form div.pill_wrap div.field_with_errors
input[type=text],input[type=email],input[type=password],input[type=number]
border: none
border-left: 1px solid #F86369
label.message
position: absolute
right: 19px
top: 11px
text-transform: none
.related_wrap div.notif
margin: 12px 20px 24px 0
#next-button
margin-top: 3em
.devise_form
max-width: 420px
input
margin-bottom: 1em
.question_details
margin-top: 6px
display: block
font:
size: 0.889em
weight: normal
line-height: 1.5em
color: $middleblue
.question_media
padding-bottom: 1em
.sidebar-text
margin-bottom: 28px
font-size: 13px
line-height: 1.35