eskp-app/1.0: static/less/popovers.less@0310a10ab15b

     1 //

     2 // Popovers

     3 // --------------------------------------------------

     6 .popover {

     7   position: absolute;

     8   top: 0;

     9   left: 0;

    10   z-index: @zindex-popover;

    11   display: none;

    12   max-width: @popover-max-width;

    13   padding: 1px;

    14   text-align: left; // Reset given new insertion method

    15   background-color: @popover-bg;

    16   background-clip: padding-box;

    17   border: 1px solid @popover-fallback-border-color;

    18   border: 1px solid @popover-border-color;

    19   border-radius: @border-radius-large;

    20   .box-shadow(0 5px 10px rgba(0,0,0,.2));

    22   // Overrides for proper insertion

    23   white-space: normal;

    25   // Offset the popover to account for the popover arrow

    26   &.top     { margin-top: -10px; }

    27   &.right   { margin-left: 10px; }

    28   &.bottom  { margin-top: 10px; }

    29   &.left    { margin-left: -10px; }

    30 }

    32 .popover-title {

    33   margin: 0; // reset heading margin

    34   padding: 8px 14px;

    35   font-size: @font-size-base;

    36   font-weight: normal;

    37   line-height: 18px;

    38   background-color: @popover-title-bg;

    39   border-bottom: 1px solid darken(@popover-title-bg, 5%);

    40   border-radius: 5px 5px 0 0;

    41 }

    43 .popover-content {

    44   padding: 9px 14px;

    45 }

    47 // Arrows

    48 //

    49 // .arrow is outer, .arrow:after is inner

    51 .popover .arrow {

    52   &,

    53   &:after {

    54     position: absolute;

    55     display: block;

    56     width: 0;

    57     height: 0;

    58     border-color: transparent;

    59     border-style: solid;

    60   }

    61 }

    62 .popover .arrow {

    63   border-width: @popover-arrow-outer-width;

    64 }

    65 .popover .arrow:after {

    66   border-width: @popover-arrow-width;

    67   content: "";

    68 }

    70 .popover {

    71   &.top .arrow {

    72     left: 50%;

    73     margin-left: -@popover-arrow-outer-width;

    74     border-bottom-width: 0;

    75     border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback

    76     border-top-color: @popover-arrow-outer-color;

    77     bottom: -@popover-arrow-outer-width;

    78     &:after {

    79       content: " ";

    80       bottom: 1px;

    81       margin-left: -@popover-arrow-width;

    82       border-bottom-width: 0;

    83       border-top-color: @popover-arrow-color;

    84     }

    85   }

    86   &.right .arrow {

    87     top: 50%;

    88     left: -@popover-arrow-outer-width;

    89     margin-top: -@popover-arrow-outer-width;

    90     border-left-width: 0;

    91     border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback

    92     border-right-color: @popover-arrow-outer-color;

    93     &:after {

    94       content: " ";

    95       left: 1px;

    96       bottom: -@popover-arrow-width;

    97       border-left-width: 0;

    98       border-right-color: @popover-arrow-color;

    99     }

   100   }

   101   &.bottom .arrow {

   102     left: 50%;

   103     margin-left: -@popover-arrow-outer-width;

   104     border-top-width: 0;

   105     border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback

   106     border-bottom-color: @popover-arrow-outer-color;

   107     top: -@popover-arrow-outer-width;

   108     &:after {

   109       content: " ";

   110       top: 1px;

   111       margin-left: -@popover-arrow-width;

   112       border-top-width: 0;

   113       border-bottom-color: @popover-arrow-color;

   114     }

   115   }

   117   &.left .arrow {

   118     top: 50%;

   119     right: -@popover-arrow-outer-width;

   120     margin-top: -@popover-arrow-outer-width;

   121     border-right-width: 0;

   122     border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback

   123     border-left-color: @popover-arrow-outer-color;

   124     &:after {

   125       content: " ";

   126       right: 1px;

   127       border-right-width: 0;

   128       border-left-color: @popover-arrow-color;

   129       bottom: -@popover-arrow-width;

   130     }

   131   }

   133 }

author	Jens-Uwe Grooss <j.-u.grooss@fz-juelich.de>
	Tue, 10 Feb 2015 08:14:09 +0100
changeset 391	0310a10ab15b
parent 53	3416f82943ea
permissions	-rwxr-xr-x