/* Patterns.less * 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,.25); } // Hover and active states // h3 for backwards compatibility h3 a:hover, .brand:hover, ul .active > a { background-color: #333; background-color: rgba(255,255,255,.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,.3); #font > .sans-serif(13px, normal, 1); padding: 4px 9px; color: @white; color: rgba(255,255,255,.75); border: 1px solid #111; .border-radius(4px); @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.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,.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,.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; #gradient > .vertical(#333, #222); @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(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,.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,.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,.05); } } li a { color: #999; text-shadow: 0 1px 0 rgba(0,0,0,.5); &:hover { #gradient > .vertical(#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
  • 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: "↓"; 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,.2); border-style: solid; border-width: 0 1px 1px; .border-radius(0 0 6px 6px); .box-shadow(0 2px 4px rgba(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, &.hover { #gradient > .vertical(#eeeeee, #dddddd); color: @grayDark; text-decoration: none; @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(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,.3); } // .menu-dropdown for backwards compatibility .menu-dropdown, .dropdown-menu { display: block; } } // TABS AND PILLS // -------------- // Common styles .tabs, .pills { margin: 0 0 @baseline; padding: 0; list-style: none; .clearfix(); > li { float: left; > a { display: block; } } } // Tabs .tabs { border-color: #ddd; border-style: solid; border-width: 0 0 1px; > li { position: relative; // For the dropdowns mostly margin-bottom: -1px; > a { padding: 0 15px; margin-right: 2px; line-height: (@baseline * 2) - 2; border: 1px solid transparent; .border-radius(4px 4px 0 0); &:hover { text-decoration: none; background-color: #eee; border-color: #eee #eee #ddd; } } } // Active state, and it's :hover to override normal :hover .active > a, .active > a:hover { color: @gray; background-color: @white; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; } } // Dropdowns in tabs .tabs { // 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; } } // Pills .pills { a { margin: 5px 3px 5px 0; padding: 0 15px; line-height: 30px; text-shadow: 0 1px 1px @white; .border-radius(15px); &:hover { color: @white; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.25); background-color: @linkColorHover; } } .active a { color: @white; text-shadow: 0 1px 1px rgba(0,0,0,.25); background-color: @linkColor; } } // Stacked pills .pills-vertical > li { float: none; } // Tabbable areas .tab-content, .pill-content { } .tab-content > .tab-pane, .pill-content > .pill-pane, .tab-content > div, .pill-content > div { display: none; } .tab-content > .active, .pill-content > .active { display: block; } // BREADCRUMBS // ----------- .breadcrumb { padding: 7px 14px; margin: 0 0 @baseline; #gradient > .vertical(#ffffff, #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,.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 } // Sets the close button to the middle of message .close{ font-family: Arial, sans-serif; line-height: 18px; } // 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; #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255,255,255,.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,.2), 0 1px 2px rgba(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(.1s linear all); // Active and Disabled states &.active, &:active { @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(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 * .75; text-shadow: 0 1px 0 rgba(255,255,255,1); .opacity(25); &: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); // warning by default text-shadow: 0 1px 0 rgba(255,255,255,.5); border-width: 1px; border-style: solid; .border-radius(4px); .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); // Adjust close icon .close { margin-top: 1px; *margin-top: 0; // For IE7 } // Make links same color as text and stand out more a { font-weight: bold; color: @grayDark; } &.danger p a, &.error p a, &.success p a, &.info p a { color: @white; } // 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,.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,.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%); } // Change link color back &.danger p a, &.error p a, &.success p a, &.info p a { color: @grayDark; } } } // PAGINATION // ---------- .pagination { height: @baseline * 2; margin: @baseline 0; ul { float: left; margin: 0; border: 1px solid #ddd; border: 1px solid rgba(0,0,0,.15); .border-radius(3px); .box-shadow(0 1px 2px rgba(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,.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,.05); .border-radius(4px); .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); blockquote { border-color: #ddd; border-color: rgba(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 -280px; background-color: @white; border: 1px solid #999; border: 1px solid rgba(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(e('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: 15px; } .modal-body form { margin-bottom: 0; } .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; } } // Fix the stacking of these components when in modals .modal .popover, .modal .twipsy { z-index: 12000; } // POPOVER ARROWS // -------------- #popoverArrow { .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; } .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; } .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; } .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 { #popoverArrow > .above(); } &.left .twipsy-arrow { #popoverArrow > .left(); } &.below .twipsy-arrow { #popoverArrow > .below(); } &.right .twipsy-arrow { #popoverArrow > .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 { #popoverArrow > .above(); } &.right .arrow { #popoverArrow > .right(); } &.below .arrow { #popoverArrow > .below(); } &.left .arrow { #popoverArrow > .left(); } .arrow { position: absolute; width: 0; height: 0; } .inner { background: @black; background: rgba(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 .15s linear); opacity: 0; &.in { opacity: 1; } } // LABELS // ------ .label { padding: 1px 3px 2px; font-size: @basefont * .75; font-weight: bold; color: @white; text-transform: uppercase; white-space: nowrap; background-color: @grayLight; .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: -@gridGutterWidth; margin-bottom: 0; .clearfix(); li { display: inline; } a { float: left; padding: 4px; margin: 0 0 @baseline @gridGutterWidth; border: 1px solid #ddd; .border-radius(4px); .box-shadow(0 1px 1px rgba(0,0,0,.075)); img { display: block; } &:hover { border-color: @linkColor; .box-shadow(0 1px 4px rgba(0,105,214,.25)); } } }