237 lines
5.3 KiB
Sass
237 lines
5.3 KiB
Sass
@import environment.sass
|
|
@import utilities/admin_links.scss
|
|
|
|
.clear
|
|
:clear both
|
|
:display block
|
|
:margin 0
|
|
:padding 0
|
|
:height 0px
|
|
:font-size 0px
|
|
|
|
// Clearing floats without extra markup (from blueprint)
|
|
Based on How To Clear Floats Without Structural Markup by PiE
|
|
[http://www.positioniseverything.net/easyclearing.html]
|
|
.clearfix:after
|
|
content: "\0020"
|
|
display: block
|
|
height: 0
|
|
clear: both
|
|
visibility: hidden
|
|
overflow: hidden
|
|
.clearfix
|
|
display: block
|
|
|
|
|
|
.ui-icon-inline
|
|
display: inline
|
|
padding-left: 16px
|
|
|
|
.accessible_hide
|
|
:outline none
|
|
:text-indent -9999px
|
|
:display inline-block
|
|
|
|
.unstyled_list
|
|
:margin 0
|
|
:padding 0
|
|
:list-style none
|
|
&.wide_spacing
|
|
:line-height 1.7em
|
|
|
|
//
|
|
makes a counter for a new and a total count, like the one used on discussion topics,
|
|
could also be used for inbox and other places.
|
|
if the .new-items or .total-items is blank it will just not show up at all so you dont
|
|
need a conditional to hide/show it
|
|
|
|
sample markup:
|
|
|
|
<div class="new-and-total-badge">
|
|
<span class="new-items">3</span>
|
|
<span class="total-items">10</span>
|
|
</div>
|
|
|
|
you can combine it with tooltips like this:
|
|
|
|
<div class="new-and-total-badge">
|
|
<span class="tooltip new-items">
|
|
<span class="tooltip_wrap">
|
|
<span class="tooltip_text">3 new messages</span>
|
|
</span>
|
|
3
|
|
</span>
|
|
<span class="tooltip total-items">
|
|
<span class="tooltip_wrap">
|
|
<span class="tooltip_text">
|
|
15 messages in this thread
|
|
</span>
|
|
</span>
|
|
15
|
|
</span>
|
|
</div>
|
|
|
|
|
|
$new-total-padding: 5px
|
|
$new-total-border-radius: 3px
|
|
.new-and-total-badge
|
|
.new-items, .total-items
|
|
color: white
|
|
border-radius: $new-total-border-radius
|
|
padding: 0 $new-total-padding
|
|
font-weight: bold
|
|
font-size: 11px
|
|
float: left
|
|
color: white
|
|
.new-items
|
|
background-color: $highlight-color
|
|
margin-right: -$new-total-border-radius
|
|
padding-right: $new-total-padding + $new-total-border-radius
|
|
.total-items
|
|
background-color: $diminutive-color
|
|
|
|
|
|
//
|
|
code to make tooltips.
|
|
here is some sample html to use this:
|
|
|
|
<a href="#" class="tooltip">
|
|
<span class="tooltip_wrap">
|
|
<span class="tooltip_text">The tip</span>
|
|
</span>
|
|
the thing to put tip on
|
|
</a>
|
|
|
|
.tooltip
|
|
:position relative
|
|
:z-index 2
|
|
:outline none
|
|
&:hover, &:active, &:focus
|
|
:outline none
|
|
:text-decoration none
|
|
.tooltip_wrap, .tooltip_text
|
|
:visibility visible
|
|
.tooltip_wrap, .tooltip_text
|
|
:display block
|
|
:visibility hidden
|
|
.tooltip_wrap
|
|
:background url(/images/tooltip_carat.png) no-repeat left bottom
|
|
:bottom 15px
|
|
:padding-bottom 3px
|
|
:position absolute
|
|
+opacity(0.9)
|
|
// ie puts the tooltips too low.
|
|
.ie &
|
|
:bottom 25px
|
|
.tooltip_text
|
|
:background-color #444
|
|
:background-position left bottom
|
|
:color #fff
|
|
:left 0px
|
|
:max-width 250px
|
|
:padding 2px 7px 2px
|
|
:white-space nowrap
|
|
+border-radius(5px)
|
|
font-weight: normal
|
|
|
|
.right
|
|
:right 0px
|
|
:background-position right bottom
|
|
|
|
// used for the zip_file_upload form
|
|
.ui-dialog-no-close-button
|
|
.ui-dialog-titlebar-close
|
|
display: none
|
|
|
|
.six-checkbox
|
|
background: url(/images/six_state_checkbox.png) no-repeat left top
|
|
width: 20px
|
|
height: 20px
|
|
display: inline-block
|
|
cursor: pointer
|
|
vertical-align: bottom
|
|
.six-checkbox-disabled-checked
|
|
background-position: 0 -109px
|
|
cursor: auto
|
|
.six-checkbox-disabled-unchecked
|
|
background-position: 0 -162px
|
|
cursor: auto
|
|
.six-checkbox-default-checked
|
|
background-position: 0 -215px
|
|
.six-checkbox-default-unchecked
|
|
background-position: 0 -268px
|
|
.six-checkbox-checked
|
|
background-position: 0 0px
|
|
.six-checkbox-unchecked
|
|
background-position: 0 -53px
|
|
|
|
table.zebra-stripes
|
|
tbody
|
|
th, td
|
|
border-top: 1px solid #A6C9E2
|
|
th
|
|
text-align: left
|
|
padding-left: 4px
|
|
tr.odd
|
|
background: #F5F8F9 url(/images/jqueryui/ui-bg_inset-hard_100_f5f8f9_1x100.png) repeat-x 50%
|
|
color: #030F1B
|
|
|
|
.close_link
|
|
display: block
|
|
background: url(/images/close.png) 0 -0 no-repeat
|
|
height: 16px
|
|
width: 16px
|
|
text-indent: -99999px
|
|
overflow: hidden
|
|
&:hover, &:focus
|
|
background-position: 0 -16px
|
|
|
|
// this allows you to have a block-level element that does not have a defined with be horizontally centered.
|
|
// usage:
|
|
// <div class="centered-block">
|
|
// <div class="centered-block-wrap">
|
|
// <div class="centered-block-inner">
|
|
// put your the element you want centered here
|
|
.centered-block
|
|
float: left
|
|
width: 100%
|
|
overflow: hidden
|
|
position: relative
|
|
.centered-block-wrap
|
|
clear: left
|
|
float: left
|
|
margin: 0
|
|
padding: 0
|
|
position: relative
|
|
left: 50%
|
|
text-align: center
|
|
.centered-block-inner
|
|
display: block
|
|
float: left
|
|
margin: 0
|
|
padding: 0
|
|
position: relative
|
|
right: 50%
|
|
text-align: left
|
|
|
|
//this used to be in _layout.sass but for sure did not belong there, I didnt want to get rid of it
|
|
//because I didnt know if anything actually uses it -RS
|
|
.small
|
|
font-size: 11px
|
|
|
|
// CLOSE ICONS
|
|
// -----------
|
|
a.x-close-link
|
|
float: right
|
|
color: black !important
|
|
font-size: 20px
|
|
font-weight: bold
|
|
line-height: 13.5px
|
|
text-shadow: 0 1px 0 white
|
|
text-decoration: none
|
|
+opacity(.25)
|
|
&:hover, &:focus
|
|
color: black
|
|
text-decoration: none
|
|
+opacity(.60)
|