summaryrefslogtreecommitdiff
path: root/addons/web/static/lib/jquery.ui.bootstrap/css/less/patterns.less
diff options
context:
space:
mode:
Diffstat (limited to 'addons/web/static/lib/jquery.ui.bootstrap/css/less/patterns.less')
-rw-r--r--addons/web/static/lib/jquery.ui.bootstrap/css/less/patterns.less1065
1 files changed, 1065 insertions, 0 deletions
diff --git a/addons/web/static/lib/jquery.ui.bootstrap/css/less/patterns.less b/addons/web/static/lib/jquery.ui.bootstrap/css/less/patterns.less
new file mode 100644
index 00000000000..8d1ce36463c
--- /dev/null
+++ b/addons/web/static/lib/jquery.ui.bootstrap/css/less/patterns.less
@@ -0,0 +1,1065 @@
+/* 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 <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,.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;
+ /* jQueryUI Bootstrap Theme */
+ max-height: 500px;
+ overflow: auto;
+ /* // jQuery UI Bootstrap Theme */
+ 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);
+ text-shadow: none;
+ &.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));
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-10-24 03:08:40 +0000