app/assets/stylesheets/modules/questions.sass
@import load
div.related_data ul.related_nav li.top-nav-ask-wrap
float: right
.top-nav-ask
margin-top: 9px
padding: 10px 16px
color: $white
.top-nav-ask
margin-top: .85em
float: right
section.questions ol > li div.question_content a.title.question-title
&:hover
text-decoration: underline
color: $middleblue
// Question progress
div.question_progress
display: block
height: 12px
width: 100%
border: 1px solid #c1ccc8
+border-radius(4px)
background: #f5f9fa
overflow: hidden
div.progress_filler
background: #F47362
height: 12px
width: 0
padding: 1px
+transition-duration(.5s)
+transition-property(width)
+transition-delay(2s)
input[type=submit].cta-pill
width: 100%
span.question_progress_count
padding:
top: 3px
bottom: 3px
display: inline-block
width: 100%
font-size: 15px
color: #7B969E
line-height: 1.385em
//.count_needed
//text-align: right
section.unaffiliated
margin-top: 15px
section.questions
header
text-align: right
h1
display: inline-block
float: left
clear: both
div.filters
margin-bottom: 0
a.sign_on
max-width: 160px
@media (max-width: 420px)
float: left
clear: both
ol>li
margin:
right: 2%
left: 2%
padding:
top: 30px
bottom: 30px
position: relative
width: 96%
border:
bottom: 1px solid #F3F3F3
left: 0px solid $white
&:hover
a.sign_on
+opacity(1)
&:last-child
border-bottom: 0
span.view
padding-left: 20px
display: none
color: #D0D0D0
font:
size: 24px
weight: 100
div.question_content
display: inline-block
float: left
vertical-align: top
@media (min-width: 420px)
// margin-right: 33px
width: 70%
a.title
display: block
font-size: 1.5em
line-height: 1.25em
color: #3c636e
&:hover
color: $linkhover
p
margin-top: 12px
font-size: 0.813em
color: #477380
line-height: 1.385em
span.context
display: none
color: $context
ul.activity
margin:
top: 18px
right: 3.85%
bottom: 6px
display: inline-block
width: 20%
text-align: right
vertical-align: bottom
@media (min-width: 420px)
float: right
li
display: inline-block
width: 113px
text-align: center
line-height: 24px
a
display: inline-block
width: 100%
+border-radius(16px)
font:
size: 1em
weight: 600
line-height: 1.385em
color: #948C83
span.target
margin-top: 18px
padding: 6px
display: inline-block
+border-radius(3px)
a
margin-right: 10px
padding-left: 25px
display: inline-block
font-size: 13px
line-height: 18px
text-indent: -25px
vertical-align: top
color: $lightblue
img
margin-right: 5px
position: relative
top: -12px
height: 40px
width: 40px
+border-radius(50%)
vertical-align: bottom
span.to
margin-right: 5px
color: #999
div.question_attr
display: inline-block
position: absolute
right: 2.5641026%
bottom: 27px
font-size: 0.75em
line-height: 1.5em
vertical-align: top
color: #919191
span.followers
padding:
left: 20px
bottom: 12px
display: block
background: url(/assets/followers_icon@2x.png) no-repeat left top transparent
background-size: 15px 14px
border-bottom: 1px solid #f7f7f7
font:
size: 0.75em
weight: 600
line-height: 1.5em
color: $darkblue
span.posted
padding-top: 12px
display: block
font:
size: 0.75em
weight: 100
line-height: 1.5em
color: #c8c8c8
span.author
padding-top: 6px
display: block
a
margin-left: 5px
display: inline-block
font-weight: 600
line-height: 1.5em
img
margin-right: 6px
width: 20px
height: 20px
+rounded_corners
vertical-align: middle
/*
*Questions on a person or bill detail page
&.related_focus
ol
li
.question_content
@media (min-width: 420px)
width: 70.867075664622%
p
width: 100%
color: $lightgrey
span.target a
@media (min-width: 420px)
max-width: 65%
div.question_attr
font-size: 0.75em
line-height: 1.5em
color: $lightgrey
span.author a
margin-left: 5px
font-size: 1em
&.listings
h1
display: inline-block
float: left
clear: both
section.question
margin-top: 1em
position: relative
article
display: inline-block
margin-bottom: 68px
@media (min-width: 420px)
width: 58.974359%
float: left
h1
padding:
top: 18px
bottom: 24px
line-height: 1.2
p
padding-bottom: 18px
font-size: 1em
line-height: 1.5em
span.author_wrap
margin-bottom: 18px
padding-top: 6px
display: block
span.posted, span.author
font-size: 0.813em
line-height: 1.385em
color: $lightgrey
a
display: inline-block
font-size: 0.813em
line-height: 1.385em
img
margin:
left: 6px
right: 6px
height: 30px
width: 30px
+rounded_corners
vertical-align: middle
div.support
margin-bottom: 36px
padding: 10px
display: block
position: relative
border: 1px solid #e0e6e4
background: #f1f7f5
a.email
position: absolute
right: 20px
top: 24px
font-size: 0.813em
line-height: 1.385em
div.comments
margin-top: 3em
padding-top: 36px
border-top: 1px solid #e5e5e5
clear: both
// Ask a question flow
&.ask
article
margin-bottom: 0
div.progress
height: 100%
width: 33.205128205128%
position: absolute
top: 0
bottom: 0
right: 0
div.actions, .supporters
padding: 13.333333333333%
width: 73.333333333333%
// Scrolling questions
&.scroll_this.inmotion
position: fixed
top: 0
width: 190px
padding: 35px
&.magnetize
top: auto
position: absolute
bottom: 0
margin-bottom: 0
div.flow_info
display: inline-block
vertical-align: top
margin-top: 12px
padding-left: 8.974359%
width: 29.487179%
h3
color: $darkblue
font-size: 1.5em
font-weight: 100
line-height: 1.25em
margin-bottom: 6px
ul>li
font-size: 0.875em
line-height: 1.286em
font-weight: 100
color: #2c4850
padding-bottom: 12px
list-style: disc inside
p
font-size: 0.875em
line-height: 1.286em
font-weight: 100
color: #2c4850
padding-bottom: 12px
a
text-decoration: underline
div.actions
margin-bottom: 60px
@media (min-width: 420px)
float: right
width: 25%
h4
color: $middleblue
font-size: 1em
line-height: 1.5em
div.row
padding-bottom: 18px
padding-top: 18px
border-bottom: 1px solid #eaeaea
+box-shadow(0 1px 0 white)
&.last
margin-bottom: 18px
&.signup
border-bottom: 0
padding-bottom: 0
div.sidebar-row
padding-top: 0
ul.recipient
margin-bottom: 0
li
margin-bottom: 0
.person-info
display: inline-block
margin-left: 5.128205128205%
width: 73.470588235294%
h2
color: $middleblue
font-size: 0.813em
line-height: 1.385em
font-weight: 600
span.jurisdiction
color: $middleblue
font-size: 0.688em
line-height: 1.455em
font-weight: 100
div.question_preview
h5
color: $middleblue
font-size: 1em
line-height: 1.5em
font-weight: 600
text-transform: none
border-bottom: 0
margin-bottom: 0
padding-bottom: 0
&.empty
color: $lightblue
p
color: $lightblue
font-size: 0.813em
line-height: 1.385em
word-wrap: break-word
div.question_issue
span
color: $lightblue
font-size: 0.813em
line-height: 1.385em
font-weight: 100
strong
font-weight: 600
/*
*Actions
div.actions
@include gray-container(22.948718%)
display: inline-block
float: right
margin-top: 12px
padding: 4.974359%
vertical-align: top
a.cta-pill
+box-sizing(border-box)
width: 100%
text-align: center
ul
margin-bottom: 24px
ul li
margin-bottom: 12px
a.upvote
background: url(/assets/up_vote_sm@2x.png) no-repeat $darkblue
color: #FBFCF9
display: block
background-size: 12px 11px
text-indent: 40px
background-position: 20px center
font-size: 1.125em
line-height: 1.333em
max-width: 95px
height: 31px
padding-top: 11px
+rounded_corners
ul.tags li
position: relative
a
padding-top: 1px
display: block
position: relative
font:
size: 0.688em
weight: 600
line-height: 2.182em
z-index: 2
div.usage
background: #eaf5f5
left: 0
top: 0
height: 26px
position: absolute
z-index: 1
+rounded_corners
a.flag
padding-left: 10px
background: url(/assets/flag_icon@2x.png) no-repeat 0 0 transparent
background-size: 8px 14px
font:
size: 0.688em
weight: 600
line-height: 2.182em
color: #C7C7C7
h5
margin-bottom: 12px
padding-bottom: 6px
border-bottom: 1px solid #e5e5e5
/*
*Preview
section.preview
padding:
top: 48px
bottom: 36px
div.actions a
margin-bottom: 12px
&.edit
width: 79px
text-indent: -10px
/* Address Lookup people-list, etc.
ul.people-type
display: block
li
display: inline-block
position: relative
vertical-align: top
a
padding: 12px 18px
+RobotoRegular
display: inline-block
font:
size: 0.85em
weight: 600
line-height: 1.636em
color: #84a1a8
+transition(color 0.2s ease-in)
&:hover
color: #3c636e
i
display: none
&.active
a
color: #3c636e
i
margin: -9px auto -8px
display: block
position: relative
width: 25px
clear: both
background: $white
text-align: center
color: #F77665
.question-recipient
margin:
bottom: 16px
left: .75em
display: inline-block
position: relative
top: 20px
width: 75%
.official-info
margin-left: 0
.official-image
margin-left: .75em
position: relative
top: .75em
.official-image-big
margin-right: .75em
float: left
.official-info
margin-left: 160px
display: block
.official-name
font-size: 1.25em
section.question article span.author_wrap a img.avatar-image, .avatar-image
+border-radius(50%)
.recent-signatures
@media (min-width: 420px)
width: 275px
float: right
clear: both
img
margin-right: 10px
float: left
.recent-signature
margin-top: 1em
font-size: .75em
overflow: auto
a
display: block
#content-step
.ref
display: inline-block
.data_collection
.question-textarea
min-height: 100px
.question-title
min-height: 84px
.share-question
margin-bottom: 2em
display: block
.question-video, .question-image
width: 100%
.question-video
height: 300px
div.actions
ul
li.share-button
margin-bottom: 6px
li
h4.has-signed
margin-top: 24px
p.sharing-text
font-size: smaller
.answered-indicator, .delivered-indicator
@include gray-container(90%)
padding: 5px
font-size: larger
margin-top: -10px
margin-bottom: 15px
text-align: center
text-transform: uppercase
text-decoration: none
.answer-text
margin-top: 15px
.or-login
font-size: smaller