logo

searx

My custom branche(s) on searx, a meta-search engine git clone https://hacktivis.me/git/searx.git

popovers.less (3406B)

    

  1. //

  2. // Popovers

  3. // --------------------------------------------------

  4. 

  5. 

  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));

  21. 

  22.   // Overrides for proper insertion

  23.   white-space: normal;

  24. 

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

  26.   &.top     { margin-top: -@popover-arrow-width; }

  27.   &.right   { margin-left: @popover-arrow-width; }

  28.   &.bottom  { margin-top: @popover-arrow-width; }

  29.   &.left    { margin-left: -@popover-arrow-width; }

  30. }

  31. 

  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: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;

  41. }

  42. 

  43. .popover-content {

  44.   padding: 9px 14px;

  45. }

  46. 

  47. // Arrows

  48. //

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

  50. 

  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. }

  69. 

  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.   }

  116. 

  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.   }

  132. 

  133. }