Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
869 lines (797 sloc) 18.5 KB
/* Patterns.scss
* Repeatable UI elements outside the base styles provided from the scaffolding
* ----------------------------------------------------------------------------
// TOPBAR
// ------
// Topbar for Branding and Nav
.topbar
height: 40px
position: fixed
top: 0
left: 0
right: 0
z-index: 10000
overflow: visible
// Links get text shadow
a
color: $grayLight
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
// Hover and active states
// h3 for backwards compatibility
h3 a:hover,
.brand a:hover,
ul .active > a
background-color: #333
background-color: rgba(255, 255, 255, 0.05)
color: $white
text-decoration: none
// Website name
// h3 left for backwards compatibility
h3
position: relative
h3 a,
.brand
float: left
display: block
padding: 8px 20px 12px
margin-left: -20px
// negative indent to left-align the text down the page
color: $white
font-size: 20px
font-weight: 200
line-height: 1
// Plain text in topbar
p
margin: 0
line-height: 40px
a:hover
background-color: transparent
color: $white
// Search Form
form
float: left
margin: 5px 0 0 0
position: relative
+opacity(100)
// Todo: remove from v2.0 when ready, added for legacy
form.pull-right
float: right
input
background-color: #444
background-color: rgba(255, 255, 255, 0.3)
+sans-serif-font(13px, normal, 1)
padding: 4px 9px
color: $white
color: rgba(255, 255, 255, 0.75)
border: 1px solid #111
+border-radius(4px)
$shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25)
+box-shadow($shadow)
+transition(none)
// Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder
color: $grayLighter
&::-webkit-input-placeholder
color: $grayLighter
// Hover states
&:hover
background-color: $grayLight
background-color: rgba(255, 255, 255, 0.5)
color: $white
// Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus,
&.focused
outline: 0
background-color: $white
color: $grayDark
text-shadow: 0 1px 0 $white
border: 0
padding: 5px 10px
+box-shadow(0 0 3px rgba(0, 0, 0, 0.15))
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
// For backwards compatibility, include .topbar .fill
.topbar-inner,
.topbar .fill
background-color: #222
+vertical-gradient(#333333, #222222)
$shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)
+box-shadow($shadow)
// NAVIGATION
// ----------
// Topbar Nav
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
// For backwards compatibility, leave in .topbar div > ul
.topbar div > ul,
.nav
display: block
float: left
margin: 0 10px 0 0
position: relative
left: 0
> li
display: block
float: left
a
display: block
float: none
padding: 10px 10px 11px
line-height: 19px
text-decoration: none
&:hover
color: $white
text-decoration: none
.active > a
background-color: #222
background-color: rgba(0, 0, 0, 0.5)
// Secondary (floated right) nav in topbar
&.secondary-nav
float: right
margin-left: 10px
margin-right: 0
// backwards compatibility
.menu-dropdown,
.dropdown-menu
right: 0
border: 0
// Dropdowns within the .nav
// a.menu:hover and li.open .menu for backwards compatibility
a.menu:hover,
li.open .menu,
.dropdown-toggle:hover,
.dropdown.open .dropdown-toggle
background: #444
background: rgba(255, 255, 255, 0.05)
// .menu-dropdown for backwards compatibility
.menu-dropdown,
.dropdown-menu
background-color: #333
// a.menu for backwards compatibility
a.menu,
.dropdown-toggle
color: $white
&.open
background: #444
background: rgba(255, 255, 255, 0.05)
li a
color: #999
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5)
&:hover
+vertical-gradient(#292929, #191919)
color: $white
.active a
color: $white
.divider
background-color: #222
border-color: #444
// For backwards compatibility with new dropdowns, redeclare dropdown link padding
.topbar ul .menu-dropdown li a,
.topbar ul .dropdown-menu li a
padding: 4px 15px
// Dropdown Menus
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
// li.menu for backwards compatibility
li.menu,
.dropdown
position: relative
// The link that is clicked to toggle the dropdown
// a.menu for backwards compatibility
a.menu:after,
.dropdown-toggle:after
width: 0
height: 0
display: inline-block
content: "&darr;"
text-indent: -99999px
vertical-align: top
margin-top: 8px
margin-left: 4px
border-left: 4px solid transparent
border-right: 4px solid transparent
border-top: 4px solid $white
+opacity(50)
// The dropdown menu (ul)
// .menu-dropdown for backwards compatibility
.menu-dropdown,
.dropdown-menu
background-color: $white
float: left
display: none
// None by default, but block on "open" of the menu
position: absolute
top: 40px
z-index: 900
min-width: 160px
max-width: 220px
_width: 160px
margin-left: 0
// override default ul styles
margin-right: 0
padding: 6px 0
zoom: 1
// do we need this?
border-color: #999
border-color: rgba(0, 0, 0, 0.2)
border-style: solid
border-width: 0 1px 1px
+border-radius(0 0 6px 6px)
+box-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
+background-clip(padding-box)
// Unfloat any li's to make them stack
li
float: none
display: block
background-color: none
// Dividers (basically an hr) within the dropdown
.divider
height: 1px
margin: 5px 0
overflow: hidden
background-color: #eee
border-bottom: 1px solid $white
.topbar .dropdown-menu, .dropdown-menu
// Links within the dropdown menu
a
display: block
padding: 4px 15px
clear: both
font-weight: normal
line-height: 18px
color: $gray
text-shadow: 0 1px 0 $white
// Hover state
&:hover
+vertical-gradient(#eeeeee, #dddddd)
color: $grayDark
text-decoration: none
$shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025)
+box-shadow($shadow)
// Open state for the dropdown
// .open for backwards compatibility
.open,
.dropdown.open
// .menu for backwards compatibility
.menu,
.dropdown-toggle
color: $white
background: #ccc
background: rgba(0, 0, 0, 0.3)
// .menu-dropdown for backwards compatibility
.menu-dropdown,
.dropdown-menu
display: block
// Tabs and Pills
.tabs,
.pills
margin: 0 0 20px
padding: 0
list-style: none
+clearfix
> li
float: left
> a
display: block
// Basic Tabs
.tabs
float: left
width: 100%
border-bottom: 1px solid #ddd
> li
position: relative
// For the dropdowns mostly
top: 1px
> a
padding: 0 15px
margin-right: 2px
line-height: $baseline * 2
border: 1px solid transparent
+border-radius(4px 4px 0 0)
&:hover
text-decoration: none
background-color: #eee
border-color: #eee #eee #ddd
&.active > a
color: $gray
background-color: $white
border: 1px solid #ddd
border-bottom-color: transparent
// first one for backwards compatibility
.menu-dropdown,
.dropdown-menu
top: 35px
border-width: 1px
+border-radius(0 6px 6px 6px)
// first one for backwards compatibility
a.menu:after,
.dropdown-toggle:after
border-top-color: #999
margin-top: 15px
margin-left: 5px
// first one for backwards compatibility
li.open.menu .menu,
.open.dropdown .dropdown-toggle
border-color: #999
// first one for backwards compatibility
li.open a.menu:after,
.dropdown.open .dropdown-toggle:after
border-top-color: #555
.tab-content
clear: both
// Basic pill nav
.pills
a
margin: 5px 3px 5px 0
padding: 0 15px
text-shadow: 0 1px 1px $white
line-height: 30px
+border-radius(15px)
&:hover
background: $linkColorHover
color: $white
text-decoration: none
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25)
.active a
background: $linkColor
color: $white
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25)
.tab-content > *,
.pill-content > *
display: none
.tab-content > .active,
.pill-content > .active
display: block
// BREADCRUMBS
// -----------
.breadcrumb
margin: 0 0 $baseline
padding: 7px 14px
+vertical-gradient(white, #f5f5f5)
border: 1px solid #ddd
+border-radius(3px)
+box-shadow(inset 0 1px 0 $white)
li
display: inline
text-shadow: 0 1px 0 $white
.divider
padding: 0 5px
color: $grayLight
.active a
color: $grayDark
// PAGE HEADERS
// ------------
.hero-unit
background-color: #f5f5f5
margin-bottom: 30px
padding: 60px
+border-radius(6px)
h1
margin-bottom: 0
font-size: 60px
line-height: 1
letter-spacing: -1px
p
font-size: 18px
font-weight: 200
line-height: $baseline * 1.5
footer
margin-top: $baseline - 1
padding-top: $baseline - 1
border-top: 1px solid #eee
// PAGE HEADERS
// ------------
.page-header
margin-bottom: $baseline - 1
border-bottom: 1px solid #ddd
+box-shadow(0 1px 0 rgba(255, 255, 255, 0.5))
h1
margin-bottom: $baseline / 2 - 1px
// BUTTON STYLES
// -------------
// Shared colors for buttons and alerts
.btn,
.alert-message
// Set text color
&.danger,
&.danger:hover,
&.error,
&.error:hover,
&.success &.success:hover,
&.info &.info:hover
color: $white
// Danger and error appear as red
&.danger,
&.error
+gradientBar(#ee5f5b, #c43c35)
// Success appears as green
&.success
+gradientBar(#62c462, #57a957)
// Info appears as a neutral blue
&.info
+gradientBar(#5bc0de, #339bb9)
// Base .btn styles
.btn
// Button Base
cursor: pointer
display: inline-block
+vertical-three-colors-gradient(white, white, 0.25, darken(white, 10%))
padding: 5px 14px 6px
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75)
color: #333
font-size: $basefont
line-height: normal
border: 1px solid #ccc
border-bottom-color: #bbb
+border-radius(4px)
$shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
+box-shadow($shadow)
&:hover
background-position: 0 -15px
color: #333
text-decoration: none
// Focus state for keyboard and accessibility
&:focus
outline: 1px dotted #666
// Primary Button Type
&.primary
color: $white
+gradientBar($blue, $blueDark)
// Transitions
+transition(0.1s linear all)
// Active and Disabled states
&:active
$shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05)
+box-shadow($shadow)
&.disabled
cursor: default
background-image: none
+reset-filter
+opacity(65)
+box-shadow(none)
&[disabled]
// disabled pseudo can't be included with .disabled
// def because IE8 and below will drop it ;_;
cursor: default
background-image: none
+reset-filter
+opacity(65)
+box-shadow(none)
// Button Sizes
&.large
font-size: $basefont + 2px
line-height: normal
padding: 9px 14px 9px
+border-radius(6px)
&.small
padding: 7px 9px 7px
font-size: $basefont - 2px
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
// :root .alert-message,
// :root .btn
// border-radius: 0 \0
// Help Firefox not be a jerk about adding extra padding to buttons
button.btn,
input[type=submit].btn
&::-moz-focus-inner
padding: 0
border: 0
// CLOSE ICONS
// -----------
.close
float: right
color: $black
font-size: 20px
font-weight: bold
line-height: $baseline * 0.75
text-shadow: 0 1px 0 rgba(255, 255, 255, 1)
+opacity(20)
&:hover
color: $black
text-decoration: none
+opacity(40)
// ERROR STYLES
// ------------
// Base alert styles
.alert-message
position: relative
padding: 7px 15px
margin-bottom: $baseline
color: $grayDark
+gradientBar(#fceec1, #eedc94)
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
border-width: 1px
border-style: solid
+border-radius(4px)
+box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.25))
// Adjust close icon
.close
*margin-top: 3px
/* IE7 spacing
// Remove extra margin from content
h5
line-height: $baseline
p
margin-bottom: 0
div
margin-top: 5px
margin-bottom: 2px
line-height: 28px
.btn
// Provide actions with buttons
+box-shadow(0 1px 0 rgba(255, 255, 255, 0.25))
&.block-message
background-image: none
background-color: lighten(#fceec1, 5%)
+reset-filter
padding: 14px
border-color: #fceec1
+box-shadow(none)
ul, p
margin-right: 30px
ul
margin-bottom: 0
li
color: $grayDark
.alert-actions
margin-top: 5px
&.error,
&.success,
&.info
color: $grayDark
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
&.error
background-color: lighten(#f56a66, 25%)
border-color: lighten(#f56a66, 20%)
&.success
background-color: lighten(#62c462, 30%)
border-color: lighten(#62c462, 25%)
&.info
background-color: lighten(#6bd0ee, 25%)
border-color: lighten(#6bd0ee, 20%)
// PAGINATION
// ----------
.pagination
height: $baseline * 2
margin: $baseline 0
ul
float: left
margin: 0
border: 1px solid #ddd
border: 1px solid rgba(0, 0, 0, 0.15)
+border-radius(3px)
+box-shadow(0 1px 2px rgba(0, 0, 0, 0.05))
li
display: inline
a
float: left
padding: 0 14px
line-height: $baseline * 2 - 2
border-right: 1px solid
border-right-color: #ddd
border-right-color: rgba(0, 0, 0, 0.15)
*border-right-color: #ddd
/* IE6-7
text-decoration: none
a:hover,
.active a
background-color: lighten($blue, 45%)
.disabled a,
.disabled a:hover
background-color: transparent
color: $grayLight
.next a
border: 0
// WELLS
// -----
.well
background-color: #f5f5f5
margin-bottom: 20px
padding: 19px
min-height: 20px
border: 1px solid #eee
border: 1px solid rgba(0, 0, 0, 0.05)
+border-radius(4px)
+box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05))
blockquote
border-color: #ddd
border-color: rgba(0, 0, 0, 0.15)
// MODALS
// ------
.modal-backdrop
background-color: $black
position: fixed
top: 0
left: 0
right: 0
bottom: 0
z-index: 10000
// Fade for backdrop
&.fade
opacity: 0
.modal-backdrop, .modal-backdrop.fade.in
+opacity(80)
.modal
position: fixed
top: 50%
left: 50%
z-index: 11000
width: 560px
margin: -250px 0 0 -250px
background-color: $white
border: 1px solid #999
border: 1px solid rgba(0, 0, 0, 0.3)
*border: 1px solid #999
/* IE6-7
+border-radius(6px)
+box-shadow(0 3px 7px rgba(0, 0, 0, 0.3))
+background-clip(padding-box)
.close
margin-top: 7px
&.fade
+transition("opacity .3s linear, top .3s ease-out")
top: -25%
&.fade.in
top: 50%
.modal-header
border-bottom: 1px solid #eee
padding: 5px 15px
.modal-body
padding: 20px
.modal-footer
background-color: #f5f5f5
padding: 14px 15px 15px
border-top: 1px solid #ddd
+border-radius(0 0 6px 6px)
+box-shadow(inset 0 1px 0 $white)
+clearfix
margin-bottom: 0
.btn
float: right
margin-left: 5px
// POPOVER ARROWS
// --------------
=popover-arrow-above($arrowWidth: 5px)
bottom: 0
left: 50%
margin-left: -$arrowWidth
border-left: $arrowWidth solid transparent
border-right: $arrowWidth solid transparent
border-top: $arrowWidth solid $black
=popover-arrow-left($arrowWidth: 5px)
top: 50%
right: 0
margin-top: -$arrowWidth
border-top: $arrowWidth solid transparent
border-bottom: $arrowWidth solid transparent
border-left: $arrowWidth solid $black
=popover-arrow-below($arrowWidth: 5px)
top: 0
left: 50%
margin-left: -$arrowWidth
border-left: $arrowWidth solid transparent
border-right: $arrowWidth solid transparent
border-bottom: $arrowWidth solid $black
=popover-arrow-right($arrowWidth: 5px)
top: 50%
left: 0
margin-top: -$arrowWidth
border-top: $arrowWidth solid transparent
border-bottom: $arrowWidth solid transparent
border-right: $arrowWidth solid $black
// TWIPSY
// ------
.twipsy
display: block
position: absolute
visibility: visible
padding: 5px
font-size: 11px
z-index: 1000
+opacity(80)
&.fade.in
+opacity(80)
&.above .twipsy-arrow
+popover-arrow-above
&.left .twipsy-arrow
+popover-arrow-left
&.below .twipsy-arrow
+popover-arrow-below
&.right .twipsy-arrow
+popover-arrow-right
.twipsy-inner
padding: 3px 8px
background-color: $black
color: white
text-align: center
max-width: 200px
text-decoration: none
+border-radius(4px)
.twipsy-arrow
position: absolute
width: 0
height: 0
// POPOVERS
// --------
.popover
position: absolute
top: 0
left: 0
z-index: 1000
padding: 5px
display: none
&.above .arrow
+popover-arrow-above
&.right .arrow
+popover-arrow-right
&.below .arrow
+popover-arrow-below
&.left .arrow
+popover-arrow-left
.arrow
position: absolute
width: 0
height: 0
.inner
background-color: $black
background-color: rgba(0, 0, 0, 0.8)
padding: 3px
overflow: hidden
width: 280px
+border-radius(6px)
+box-shadow(0 3px 7px rgba(0, 0, 0, 0.3))
.title
background-color: #f5f5f5
padding: 9px 15px
line-height: 1
+border-radius(3px 3px 0 0)
border-bottom: 1px solid #eee
.content
background-color: $white
padding: 14px
+border-radius(0 0 3px 3px)
+background-clip(padding-box)
p, ul, ol
margin-bottom: 0
// PATTERN ANIMATIONS
// ------------------
.fade
+transition(opacity 0.15s linear)
opacity: 0
&.in
opacity: 1
// LABELS
// ------
.label
padding: 1px 3px 2px
background-color: $grayLight
font-size: $basefont * 0.75
font-weight: bold
color: $white
text-transform: uppercase
+border-radius(3px)
&.important
background-color: #c43c35
&.warning
background-color: $orange
&.success
background-color: $green
&.notice
background-color: lighten($blue, 25%)
// MEDIA GRIDS
// -----------
.media-grid
margin-left: -20px
margin-bottom: 0
+clearfix
li
display: inline
a
float: left
padding: 4px
margin: 0 0 20px 20px
border: 1px solid #ddd
+border-radius(4px)
+box-shadow(0 1px 1px rgba(0, 0, 0, 0.075))
img
display: block
&:hover
border-color: $linkColor
+box-shadow(0 1px 4px rgba(0, 105, 214, 0.25))