UNPKG

apostrophe

Version:

Apostrophe is a user-friendly content management system. This core module of Apostrophe provides rich content editing and essential facilities to integrate Apostrophe into your Express project. Apostrophe also includes simple facilities for storing your r

134 lines (121 loc) 3.08 kB
// // Popovers // -------------------------------------------------- .popover { position: absolute; top: 0; left: 0; z-index: @zindexPopover; display: none; max-width: 276px; padding: 1px; text-align: left; // Reset given new insertion method background-color: @popoverBackground; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.2); .border-radius(6px); .box-shadow(0 5px 10px rgba(0,0,0,.2)); // Overrides for proper insertion white-space: normal; // Offset the popover to account for the popover arrow &.top { margin-top: -10px; } &.right { margin-left: 10px; } &.bottom { margin-top: 10px; } &.left { margin-left: -10px; } } .popover-title { margin: 0; // reset heading margin padding: 8px 14px; font-size: 14px; font-weight: normal; line-height: 18px; background-color: @popoverTitleBackground; border-bottom: 1px solid darken(@popoverTitleBackground, 5%); .border-radius(5px 5px 0 0); &:empty { display: none; } } .popover-content { padding: 9px 14px; } // Arrows // // .arrow is outer, .arrow:after is inner .popover .arrow, .popover .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .popover .arrow { border-width: @popoverArrowOuterWidth; } .popover .arrow:after { border-width: @popoverArrowWidth; content: ""; } .popover { &.top .arrow { left: 50%; margin-left: -@popoverArrowOuterWidth; border-bottom-width: 0; border-top-color: #999; // IE8 fallback border-top-color: @popoverArrowOuterColor; bottom: -@popoverArrowOuterWidth; &:after { bottom: 1px; margin-left: -@popoverArrowWidth; border-bottom-width: 0; border-top-color: @popoverArrowColor; } } &.right .arrow { top: 50%; left: -@popoverArrowOuterWidth; margin-top: -@popoverArrowOuterWidth; border-left-width: 0; border-right-color: #999; // IE8 fallback border-right-color: @popoverArrowOuterColor; &:after { left: 1px; bottom: -@popoverArrowWidth; border-left-width: 0; border-right-color: @popoverArrowColor; } } &.bottom .arrow { left: 50%; margin-left: -@popoverArrowOuterWidth; border-top-width: 0; border-bottom-color: #999; // IE8 fallback border-bottom-color: @popoverArrowOuterColor; top: -@popoverArrowOuterWidth; &:after { top: 1px; margin-left: -@popoverArrowWidth; border-top-width: 0; border-bottom-color: @popoverArrowColor; } } &.left .arrow { top: 50%; right: -@popoverArrowOuterWidth; margin-top: -@popoverArrowOuterWidth; border-right-width: 0; border-left-color: #999; // IE8 fallback border-left-color: @popoverArrowOuterColor; &:after { right: 1px; border-right-width: 0; border-left-color: @popoverArrowColor; bottom: -@popoverArrowWidth; } } }