canvas-lms/app/stylesheets/g_instructure.sass

1454 lines
30 KiB
Sass

@import environment.sass
@import turnitin.sass
// DO NOT ADD ANYTHING TO THIS FILE
// there is certainly a better place to put whatever it is that you were thinking
// about putting here. Ask the UX team if you need advice.
//
// In fact, you will get a cookie for anything that you safely remove from this.
#instructure_ajax_error_box
:display none
:position fixed
:top 10px
:left 50px
:z-index 9999
:background-color #fff
:border 2px solid #888
#instructure_ajax_error_result
:width 600px
:height 300px
:overflow auto
#fixed_bottom, #flash_message_holder
position: fixed
z-index: 100000
left: 0
width: 100%
#flash_message_buffer // contains copies of all static messages so that we reserve enough height in the ui
visibility: hidden
#flash_message_holder
height: 0
#flash_message_holder, #flash_message_buffer
top: 0
list-style: none
margin: 0
padding: 0
li:not(.ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error), .ui-effects-wrapper
margin: 0 auto !important
li:not(.ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error)
box-shadow: 0 1px 1px rgba(0,0,0,0.25)
border-bottom-color: rgba(0,0,0,0.5)
padding: 4px 40px 4px 8px
min-height: 20px
vertical-align: middle
text-align: center
font-weight: bold
position: relative
z-index: 2
width: 400px
&.static_message
width: auto
a
text-decoration: underline
color: inherit
a.close_link
position: absolute
right: 10px
top: 50%
width: 20px
height: 20px
overflow: hidden
margin-top: -11px
color: white
text-decoration: none
i
display: inline-block
vertical-align: middle
margin-right: 0
width: 20px
height: 20px
background-image: url(/images/check_16.png)
background-repeat: no-repeat
&.ui-state-error, &.ui-state-warning
i
background-image: url(/images/warning_16.png)
&.no_close
a.close_link
display: none
#unauthorized_message
border: 1px solid #000
margin: 4em auto
width: 500px
.ui-state-error, &.ui-state-error
position: relative
z-index: 1
border-style: solid
border-width: 1px
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.5)
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 3px -1px rgba(0,0,0,0.25)
&:before
content: " "
background: transparent url(/images/warning_36.png) 0 4px no-repeat
position: absolute
top: 6px
left: 22px
width: 42px
height: 42px
h2, .h2
font-size: 1.5em
&.ui-state-error
padding: 15px
margin: -1px
color: #fff
height: 60px
line-height: 60px
padding: 0 0 0 80px
p
font-size: 1.1em
padding: 2em 3em
font-weight: bold
margin: 0
.user_content,.mceContentBody
position: relative
min-height: 5px
h3, .h3
margin-top: 1.0em
margin-bottom: 1.0em
table
:margin-left 5px
td
:padding 2px
p
:margin-bottom 0
.enhanceable_content
&.ui-accordion
.ui-accordion-header
margin-bottom: 1px
.user_content iframe
border: 0
padding: 0
margin: 0
.reminder,.reminder-content
:border 1px solid #aaa
+border-radius(5px)
:margin 5px 20px
:clear both
:font-size 0.9em
h2, .h2
margin-top: 0
:background-color #eee
:text-transform uppercase
:color #248
:padding 0px 10px
:border-bottom 1px solid #aaa
:font-size 1.2em
+border-top-radius(4px)
.body
:width auto
:padding 5px 10px
#floating_reminders
:cursor move
:padding 5px 10px
:position absolute
:top 5px
:left 0px
:background-color #fe8
:border 2px solid #FBAD00
+border-radius(5px)
:width 300px
:z-index 2
a
:font-weight bold
:cursor pointer
#right-side
h2, .h2
.small_link
:font-size 0.6em
:font-family arial, sans-serif
h4.item_list_header, .h4.item_list_header
:font-size 1.3em
:font-weight bold
:border-bottom 1px solid #888
:margin 0
ul.item_list
:margin-top 0
:list-style-type none
:margin-left 15px
&.limit_height
:max-height 150px
:overflow auto
p
:margin-top 0
:margin-bottom 1em
table.summary
:margin 5px 0px
width: 100%
td, tbody th
background-color: #e6e7e9
table.notifications
:border-top 2px solid #999
:border-collapse collapse
tr
:border-color #999
td
:border-color #999
:border-bottom 2px solid #999
table.courses
:width 100%
td
:padding 5px 5px 10px 10px
:background-color #eee
:color #888
.name
:font-size 1.5em
:font-weight bold
.links
:font-size 0.8em
:text-align center
a
:text-decoration none
:color #444
&:hover
:text-decoration underline
.events_list
:margin-bottom 20px
.event-list-view-calendar
float: right
font-size: 10px
font-weight: normal
&[class*=icon-]:before, &[class^=icon-]:before
font-size: 16px
vertical-align: middle
table.assignments
:width 100%
td
:background-color #ddd
:padding 0.1em 0.5em
:font-size 1.1em
a
:color #333
:text-decoration none
&:hover
:text-decoration underline
&.grade
:width 60px
:text-align center
:font-weight bold
:background-color #aaa
:font-style italic
:font-size 0.6em
:padding-bottom 3px
&.graded
:background-color #bbb
:color #000
.total
:margin 0
:padding 0
.grade
:display block
:line-height 1
:margin 0.3em 0px 0.1em 0px
:padding 0
:font-size 1.5em
:font-style normal
&.date
:width 60px
:text-align center
:font-weight bold
:background-color #333
:color #aaa
:font-style italic
:font-size 0.6em
:padding-bottom 3px
.duedate
:display block
:line-height 1
:margin 0.2em 0px 0.1em 0px
:padding 0
:font-size 1.5em
:color #fff
:font-style normal
&.today
:background-color #FBAD00
:color #333
.duedate
:background-color #FBAD00
:color #333
.attachments
:width 30px
:padding 0
:vertical-align middle
:text-align center
:background-color #aaa
.long_text
:position relative
:overflow hidden
&.show_context
:min-height 1.7em
.text
:line-height 1.0em
.text_holder
:position absolute
:width 500px
:top 0
:left 0
.header
:font-size 0.6em
:line-height 1.2em
:color #888
:padding-left 20px
.details
:margin 5px
:padding 5px 10px
:border 1px solid #888
+border-radius(5px)
.header
:color #444
:font-weight bold
.preview
:margin 5px 30px 10px
:padding 5px
:border 1px solid #aaa
:text-align center
+border-radius(5px)
.links
:margin 10px 0
table.summary
width: auto
th, caption
text-align: left
th, td, caption
padding: 2px 8px
vertical-align: top
thead th, caption
background-color: #4d4d4d
color: #fff
font-weight: normal
border-top: 1px solid #4d4d4d
td, tbody th
border-top: 1px dotted #aaa
background-color: #f2f3f5
color: #595959
table.subtable
th, td
border-top: 0
padding: 1px 5px 1px 0
font-size: 0.8em
form table.formtable
:margin 0
:padding 0
:width auto
table.formtable td
vertical-align: top
padding: 2px 3px
.courses, .groups, .accounts
.name
font-size: 1.1em
font-weight: bold
.unpublished .name a
color: #888
.details
color: #888
font-size: 0.8em
margin: 0 0 0 10px
.info
clear: left
font-size: 0.8em
margin: 0 0 5px 10px
visibility: hidden
.links
color: #eee
a
color: #bbb
.touch .course,
.touch .group,
.touch .account,
.course:hover,
.group:hover,
.account:hover
.course, .group, .account
.info
visibility: visible
.links
color: #ccc
a
color: #666
span.hint
:color #666
:font-size 0.8em
.event_pending
+opacity(0.4)
.error_message
:color #ED002F
.formError
:color #ED002F
:font-size 0.8em
:padding-left 15px
.nobr
:white-space nowrap
.mini_discussion
:font-size 0.8em
.name
:font-weight bold
:margin-left 10px
.date
:margin-left 5px
.message
:font-size 1.5em
:color #000
.loading_image
:background-color #fff
// the body part here is to make this selector more specific than the atr-*** ones in g_util_fancy_links.sass so this overrides
body .disabled_link
:display none
.error_box
:position absolute
:top -1000px
:left -100px
:z-index 11
:max-width 200px
:min-width 100px
.error_text
:max-height 100px
:overflow auto
:margin-bottom 10px
:background-color #edd
:border 2px solid #a44
+border-radius(5px)
:padding 5px
.error_bottom
:position absolute
:bottom 0
:left 4px
.datetime_suggest
:font-size 0.8em
:color #888
:padding-left 10px
#submission_preview
:margin 20px auto
&.paper
:min-width 400px
:padding 10px 20px
:border 1px solid #aaa
&.plain_text
:width 90%
:font-family courier,monospace
#sidebar .ui-widget
:margin-bottom 1em
ul.notification_list
:line-height 1.7em
:padding-left 10px
:margin-bottom 20px
ul.group_list
:line-height 1.7em
:padding-left 10px
:margin-bottom 20px
#wizard_box
:border-bottom 1px solid #aaa
:z-index 111
:position fixed
:bottom 0
:left 0
:width 100%
:display none
h3, .h3
:border-bottom 1px solid #aaa
:margin 0 0 10px
:padding-bottom 5px
.wizard_content
:background-color #eee
:border-top 1px solid #888
:padding 10px
// :position relative
@include clearfix
box-shadow: 0 0 10px #333
.links
float: right
.wizard_options
:float left
:width 40%
:padding-right 20px
:position relative
.wizard_details
:float left
:width 43%
:display none
:border 1px solid #aaa
+border-radius(5px)
:padding 10px
:margin 0px 20px
:color #444
:position relative
// adding override to link appearance, as javascript depends on there being a .link class here
a.link
:background-image none
:padding 0
p
:margin-top 0
.wizard_options_list
:list-style-type none
:margin 0 10px 0 0
:padding-left 5px
li
line-height: 1.8em
.option
:cursor pointer
:font-weight bold
:color #444
+border-radius(3px)
&:hover
:background-color #ddd
&.completed a
:color #aaa
&.selected
:background-color #ccc
a[class*=icon-], a[class^=icon-]
&:before
:font-size 16px
:line-height 16px
:vertical-align text-top
:color #555
#content_tags_dialog
h3, .h3
:margin 0
:padding 0
:font-size 0.8em
:color #888
.tags
:list-style-type none
:padding 0
:margin 0
> .tag
:display block
:float left
:border 1px solid #ccc
+border-radius(3px)
:background-color #cdf
:padding 1px 4px
:margin 2px 3px
:font-size 0.9em
&.uneditable
:background-color #ddd
.delete_link
:display none
.hidden-readable
:position absolute
:left -100000px
:top auto
:width 1px
:height 1px
:overflow hidden
#keyboard_navigation
:display none
ul.navigation_list
:padding 0
:margin 0
:list-style-type none
:line-height 1.7em
li
span
:padding 1px 2px
.keycode
:font-weight bold
:font-size 1.2em
:color #248
:font-family courier, monospace
:text-align right
.communication_messages_list
.communication_message,.communication_sub_message
.context_code
display: none
&.communication_messages_show_context
.communication_message,.communication_sub_message
.context_code
display: inline
.communication_message
:margin 0 0.5em 0.5em 0.5em
:padding 0 0 0.5em 0
:width auto
:color #000
:border-bottom 1px solid #ddd
&.selected
:border-width 1px
div
&.header
:padding 2px 5px
/* :border-bottom 1px solid #eee */
:_height 25px
:color #666
.header_title
:float left
.header_icon
:float left
:padding-top 5px
&.announcement_header_icon
:display none
.title
:margin-left 10px
:font-size 1.0em
:font-weight bold
// :color #444
.sub_title
:margin-left 30px
:line-height 0.8em
.context_code
:font-size 0.8em
:padding-right 5px
:padding-left 0
.context_name
:font-size 0.8em
padding: 0 5px
color: inherit
text-decoration: none
.points_possible
:font-size 0.8em
:padding-right 5px
:padding-left 0
.podcast
display: none
.user_name
:white-space nowrap
:font-size 0.8em
.post_date
:float right
:padding-right 10px
:font-size 0.8em
:padding-top 0.2em
.new-and-total-badge
float: right
.under_links
:float right
:clear right
:padding-right 10px
font-size: 0.8em
a
color: inherit
.link_box
:float right
:width 60px
:text-align right
:min-height 10px
:margin-right 5px
a
+opacity(0)
&:hover, &:focus
+opacity(1)
&.content
:padding 5px 5px 1px 50px
:color #444
.links
:text-align right
:margin-right 2.5em
:display block
:font-size 0.8em
:color #888
a
:color #666
&.brief_footer_link
:display none
&.verbose_footer_link
:display inline
.subcontent
:padding-top 5px
.status
:text-align right
:font-size 0.8em
.original_post_date
text-align: right
font-size: 0.8em
padding-right: 44px
color: #888
.statistics
td
&.name
width: 20%
vertical-align: top
padding: 5px 0
border-bottom: 1px solid #eee
.text
font-size: 0.8em
&.stats
vertical-align: top
padding: 5px 0 5px 10px
border-bottom: 1px solid #eee
.answer
.text
font-size: 0.8em
.answer_bar
margin-bottom: 3px
border: 1px solid #888
background: #ccc
height: 10px
&.correct_answer
.answer_bar
background: #8EC778
.attachments_list
a
:color #888
.extras
font-size: 0.8em
color: #888
&.footer
:margin 5px
&.base_links
:font-size 1.5em
:text-align center
&.subcontent
/* :border-left 1px solid #ddd */
&.pinned_notification
border: 1px solid #bbb
background: #ffb
.header
.links
float: right
font-size: 0.8em
.user_content
p:last-child
margin-bottom: 0
&.has_podcast
.header
.podcast
display: block
float: right
+opacity(.7)
a.disable_item_link
visibility: hidden
float: right
margin-right: 6px
// use less padding on ones that are a boostrap .alert
//(like enrollment invitation and account notifications)
&.alert div.content
padding-left: 35px
.communication_message_hover
div.header
.link_box
a
+opacity(0.5)
a.disable_item_link
visibility: visible
+opacity(0.5)
&:hover
+opacity(1.0)
.brief_communication_message
div.header
.link_box
:display none
div.content
.links a
&.brief_footer_link
:display inline
&.verbose_footer_link
:display none
.communication_message.announcement
div.header
.header_icon.announcement_header_icon
:display inline
.header_icon.discussion_topic_header_icon
:display none
.communication_message.conversation
.submission
ul
margin: 0 10px 10px 0
padding: 0
li
padding: 2px 5px
margin: 0 0 2px 0
list-style: none
background: #e8e8e8
.user_name
font-size: 0.8em
padding: 0
.score
float: right
padding-right: 10px
.communication_sub_message
:margin 0 2.5em 2px 0em
:padding 0
:width auto
:color #000
:border-width 0px
:font-size 0.85em
:background-color #f2f2f2
div
&.header, li
:padding 0 5px
:border-width 0px
:color #999
.link_box
:float right
:width 60px
:text-align right
:min-height 10px
:margin-right 5px
:opacity 0.5
a
:visibility hidden
&:hover
:opacity 1.0
a
:visibility visible
.header_title
:float left
.user_name
:padding-left 5px
:white-space nowrap
.post_date
:float right
:padding-right 10px
:font-size 0.9em
:padding-top 0.2em
a
:color #888
&.content
:padding 1px 5px 1px 30px
:color #444
.less_important
:color #888
:display block
text-align: right
padding-right: 20px
a.textarea
display: block
+border-radius(4px)
border: 1px solid #aaa
background-color: #fff
text-decoration: none
padding: 2px
width: 94%
textarea
border: 1px solid #aaa
+border-radius(4px)
padding: 2px
font-size: 1.1em
font-family: Arial, sans-serif
width: 94% /*hack for IE6 */
&.dim
height: 1.0em
color: #aaa
font-family: arial, sans-serif
&.behavior_content
:color #999
:padding 2px 5px 2px 30px
a
:color #888
&.footer
:float right
&.toggled_communication_sub_message
:display none
&.lonely_behavior_message
background-color: transparent
div.content
a.textarea
display: inline
color: inherit
padding: 0
margin-right: 15px
border-width: 0
&:hover,
&:focus
text-decoration: underline
.less_important
display: inline
color: inherit
html > body .communication_sub_message .content textarea
width: 97% /* for everyone else */
html > body .communication_sub_message .content a.textarea
width: 97% /* for everyone else */
// hide the '.under_links' untill you hover to message, but only if its not IE6, since it can't do :hover on a <div>
html > body .communication_message div.header .under_links
+opacity(0)
html > body .communication_message:hover div.header .under_links
+opacity(1)
.new_activity_message
a.textarea
display: block
+border-radius(4px)
border: 1px solid #aaa
color: #888
text-decoration: none
cursor: text
background-color: #fff
padding: 2px
width: 94%
.message_type
img
+border-radius(2px)
padding: 0 5px
cursor: pointer
border: 1px solid #fff
&:hover
border-color: #ccc
&.selected
border-color: #888
background-color: #eee
form
textarea
height: 4.8em
border: 1px solid #aaa
+border-radius(4px)
padding: 2px
font-size: 1.1em
font-family: Arial, sans-serif
width: 94% /*hack for IE6 */
html > body .new_activity_message a.textarea
width: 97% /* for everyone else */
html > body .new_activity_message form textarea
width: 97% /* for everyone else */
.notification_list
li a
:padding-left 20px
:background-image url(/images/other_icon.png)
:background-repeat no-repeat
:background-position left center
&.announcement
:background-image url(/images/announcement_icon.png)
&.course_content
:background-image url(/images/course_content_icon.png)
&.due_date
:background-image url(/images/due_date_icon.png)
&.discussion
:background-image url(/images/discussion_icon.png)
&.grading
:background-image url(/images/grading_icon.png)
&.invitation
:background-image url(/images/invitation_icon.png)
&.message
:background-image url(/images/message_icon.png)
.module_legend
:float right
:clear right
:border 1px solid #ccc
:min-width 200px
:margin-bottom 5px
:margin-left 10px
&.module_legend_locked
.title
:display none
.locked_title,.locked_message
:display inline
.locked_title,.locked_message
:display none
.header
:border-bottom 1px solid #ccc
:background-color #eee
:font-size 1.2em
:font-weight bold
:padding 2px 5px
.content
:padding 5px 20px 5px 10px
:max-height 50px
:overflow auto
ul
:padding 0
:margin 0
:list-style-type none
.context_module_item .type_icon
:background url(/images/file.png) no-repeat left top
.attachment_module_item .type_icon
:background-image url(/images/file_download.png)
.assignment_module_item .type_icon
:background-image url(/images/assignment.png)
.footer
:text-align right
:font-size 0.8em
.context_module_item
.criterion
:width 16px
:height 16px
&.completed
img
:visibility hidden
:background url(/images/pass.png) no-repeat left top
&:hover
img
:visibility visible
:background transparent
#user_list_boxes
position: relative
min-height: 165px
margin-top: 10px
#user_list_textarea_container, #user_list_processing, #user_list_parsed
min-height: 165px
width: 100%
background-color: white
label
font-size: 0.8em
textarea
width: 98%
height: 108px
margin: 0
#user_lists_processed_people
overflow: auto
height: 126px
.ui-widget
margin: 0 8px 8px 0
.person
display: inline-block
position: relative
background: #FFF
margin: 0 8px 8px 0
padding: 4px
font-size: 11px
min-height: 21px
-webkit-box-shadow: inset 33px 0 0 #F7F7F7, inset 34px 0 0 #CCC
-moz-box-shadow: inset 33px 0 0 #F7F7F7, inset 34px 0 0 #CCC
box-shadow: inset 33px 0 0 #F7F7F7, inset 34px 0 0 #CCC
div
margin: 2px 0 0 33px
.name::after
content: "\a0"
.address, .login
font-weight: normal
&::before
content: ""
display: block
height: 100%
background: url(/images/circle-plus.png) no-repeat center center
position: absolute
margin: -4px
width: 33px
&.existing-user::before
background-image: url(/images/circle-check.png)
body > #ui-datepicker-div
display: none
#instructure_dropdown_list
z-index: 10
.list
list-style-type: none
padding: 0
margin: 0
overflow: auto
.option
&.ui-state-default
&.minimal
background: #fff
border-color: #DDE8F0
.ui-icon
float: left
margin-top: 0.2em
margin-right: 2px
.communication_message .media_comment_thumbnail
margin: 3px 0
table.side_tabs_table
border-collapse: collapse
td
vertical-align: top
&.left
width: 25%
border-right: 1px solid #ccc
padding-right: 5px
&.right
width: 65%
border-left: 1px solid #ccc
padding-left: 5px
ul.side_tabs
:margin 0
:padding 0
:list-style none
:max-height 300px
:overflow auto
:min-width 150px
li
padding: 2px 5px
margin-bottom: 3px
-moz-border-radius: 3px
cursor: pointer
&:hover
background-color: #eee
&.selected_side_tab
font-weight: bold
background-color: #ddd
div.sub_content
font-size: 0.8em
padding-left: 10px
color: #888
div.side_tabs_content
max-height: 300px
overflow: auto
div.side_tabs_content_with_room_for_button
max-height: 252px
overflow: auto
.quoted_text_holder
.show_quoted_text_link
font-size: 0.8em
#sequence_details
.sequence_list
margin-left: 10px
li
padding-left: 20px
background: url(/images/ball.png) no-repeat center left
&.prev,&.next
font-size: 0.9em
&.prev
background-image: url(/images/uptick.png)
&.next
background-image: url(/images/downtick.png)
&.current
font-weight: bold
font-size: 1.1em
margin: 2px 0
body.padless-content #content,#content.padless
#sequence_footer
margin-left: 10px
margin-right: 10px
padding-top: 5px
#sequence_footer
padding-top: 15px
.next,.prev
width: 150px
overflow: hidden
.title
display: block
font-size: 0.8em
white-space: nowrap
&:hover
.title
text-decoration: none
.next
float: right
.prev
float: left
.all
clear: right
float: right
.content_lock_icon
cursor: pointer
#module_prerequisites_list
list-style-type: none
padding-left: 10px
li.module
padding: 5px 0
ul
list-style-type: none
padding: 5px 0 5px 20px
li.requirement
.description
font-size: 0.8em
&.locked_requirement
.description
padding-left: 20px
background: transparent url(/images/lock.png) no-repeat left center
color: #888
a
color: #888
&.locked
padding-left: 20px
cursor: pointer
background: transparent url(/images/lock_small.png) no-repeat left 5px
h3
color: #888
ul
display: none
#aligned_outcomes
.outcomes
list-style-type: none
padding-left: 10px
.outcome
margin-bottom: 5px
.short_description
font-weight: bold
.description
font-size: 0.8em
margin-left: 20px
.mastery
margin-top: 5px
font-size: 0.7em
font-style: italic
margin-left: 20px
#align_outcomes_dialog
.all_outcomes
list-style-type: none
padding-left: 10px
.outcome
padding: 2px 5px
margin-bottom: 2px
&.selected_outcome
background-color: #eee
-moz-border-radius: 3px
.custom_search_results_link
font-size: 1.2em
h2.h-margin-top,h3.h-margin-top, .h2.h-margin-top, .h3.h-margin-top
margin-top: 20px
#license_help_dialog
#licence-help-options
th
vertical-align: top
white-space: nowrap
.option
display: block
color: inherit
text-decoration: none
margin: 0 2px
padding: 4px 2px
border: 2px solid #444
+border-radius(5px)
&:hover
background-color: #eee
&.selected
background-color: #c3decf
img
vertical-align: middle
.licenses
margin-top: 10px
.license
float: left
display: none
font-size: 1.2em
font-weight: bold
img
vertical-align: middle
&.active
display: block
.select
float: left
margin-right: 10px
#option-explanations td
font-size: 0.8em
padding: 5px 5px 0
vertical-align: top
form.user_content_post_form
display: none
#change_gradebook_version_link_holder, #change_calendar_version_link_holder
float: right !important
background: none !important
#change_gradebook_version_link_holder a, #change_calendar_version_link_holder a, .dashboard-toggle a
margin-right: 10px
padding: 1px 10px
+border-radius(3px)
+vertical-gradient(#0abdff, #008fd6)
text-decoration: none !important
&:hover
border-color: #165A92
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5)
font-size: 12px
font-family: GillSans,Calibri,Trebuchet,sans-serif
border: 1px solid #1e7eca
color: white !important
text-shadow: rgba(0,0,0,0.5) 1px 0 1px
-moz-user-select: none
cursor: pointer
.equation_image
vertical-align: middle
.dashboard-toggle
display: block
padding: 10px 0 0
#breadcrumbs .dashboard-toggle
margin: 4px 0
.with-fixed-bottom #wrapper-container
padding-bottom: 60px
#fixed_bottom
bottom: 0
i
vertical-align: middle
margin-right: 10px
b
line-height: 28px
vertical-align: middle
#masquerade_bar
padding: 15px
.buttons
float: right
.btn
margin-left: 10px
.btn-primary
color: white
.button-explanation
float: right
font-size: 10px
text-align: right
.masquerading_avatar
float: left
.avatar
margin: -9px 10px 0 0
width: 44px
height: 44px
.fixed_warning
background-color: #FDD
border-width: 2px 0 0 0
border-style: solid
border-color: black
padding: 15px
opacity: 0.90
color: black
.hidden-text
overflow: hidden
text-indent: -10000px
white-space: nowrap
.hidden-inline-text
display: inline-block
height: 0
overflow: hidden
text-indent: -10000px
white-space: nowrap
width: 0
.nav-badge
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
+border-radius(10px)
background-color: $highlight-color
padding: 1px 7px
font-size: 12px
color: white
float: right
.unread-grade
float: left
display: inline-block
line-height: 8px
width: 8px
margin-top: 6px
margin-left: -16px
background-color: #06a9ee
+border-radius(4px)
.clear
clear: both