less/patternfly/infotip.less

   1 //
   2 // Info Tip
   3 // --------------------------------------------------
   4
   5 // Overwrites for navbar.less
   6 .navbar-nav > li > .dropdown-menu.infotip {
   7   border-top-width: 1px !important;
   8   margin-top: @popover-arrow-width;
   9 }
  10
  11 // Overwrites for PatternFly - navbar.less
  12 @media (max-width: @grid-float-breakpoint-max) {
  13   .navbar-pf .navbar-nav .open .dropdown-menu.infotip {
  14     background-color: #fff !important;
  15     margin-top: 0;
  16   }
  17 }
  18
  19 // Extends "dropdown-menu"
  20 .infotip {
  21   min-width: 235px;
  22   padding: 0;
  23   .list-group {
  24     border-top: 0;
  25     margin: 0;
  26     padding: 8px 0;
  27     .list-group-item {
  28       border: none;
  29       margin: 0 15px 0 34px;
  30       padding: 5px 0;
  31       > .i {
  32         color: @gray-pf;
  33         font-size: 13px;
  34         left: -20px;
  35         position: absolute;
  36         top: 8px;
  37       }
  38       > a {
  39         color: @gray-pf;
  40         line-height: 13px;
  41       }
  42       > .close {
  43         float: right;
  44       }
  45     }
  46   }
  47   .footer {
  48     background-color: #f5f5f5;
  49     padding: 6px 15px;
  50     a:hover {
  51       color: @link-color;
  52     }
  53   }
  54 }
  55
  56 // Arrows (Copy from popovers.less)
  57 //
  58 // .arrow is outer, .arrow:after is inner
  59
  60 .infotip .arrow {
  61   &,
  62   &:after {
  63     border-color: transparent;
  64     border-style: solid;
  65     display: block;
  66     height: 0;
  67     position: absolute;
  68     width: 0;
  69   }
  70 }
  71 .infotip .arrow {
  72   border-width: @popover-arrow-outer-width;
  73 }
  74 .infotip .arrow:after {
  75   border-width: @popover-arrow-width;
  76   content: "";
  77 }
  78
  79 .infotip {
  80   &.bottom .arrow,
  81   &.bottom-left .arrow,
  82   &.bottom-right .arrow {
  83     border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
  84     border-bottom-color: @popover-arrow-outer-color;
  85     border-top-width: 0;
  86     left: 50%;
  87     margin-left: -@popover-arrow-outer-width;
  88     top: -@popover-arrow-outer-width;
  89     &:after {
  90       border-top-width: 0;
  91       border-bottom-color: @popover-arrow-color;
  92       content: " ";
  93       margin-left: -@popover-arrow-width;
  94       top: 1px;
  95     }
  96   }
  97   &.bottom-left .arrow {
  98     left: 20%;
  99   }
 100   // Default:
 101   &.bottom-right .arrow {
 102     left: 80%;
 103   }
 104   &.top .arrow {
 105     border-bottom-width: 0;
 106     border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
 107     border-top-color: @popover-arrow-outer-color;
 108     bottom: -@popover-arrow-outer-width;
 109     left: 50%;
 110     margin-left: -@popover-arrow-outer-width;
 111     &:after {
 112       border-bottom-width: 0;
 113       border-top-color: #f5f5f5;
 114       bottom: 1px;
 115       content: " ";
 116       margin-left: -@popover-arrow-width;
 117     }
 118   }
 119   &.right .arrow {
 120     border-left-width: 0;
 121     border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
 122     border-right-color: @popover-arrow-outer-color;
 123     left: -@popover-arrow-outer-width;
 124     margin-top: -@popover-arrow-outer-width;
 125     top: 50%;
 126     &:after {
 127       bottom: -@popover-arrow-width;
 128       border-left-width: 0;
 129       border-right-color: @popover-arrow-color;
 130       content: " ";
 131       left: 1px;
 132     }
 133   }
 134   &.left .arrow {
 135     border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
 136     border-left-color: @popover-arrow-outer-color;
 137     border-right-width: 0;
 138     margin-top: -@popover-arrow-outer-width;
 139     right: -@popover-arrow-outer-width;
 140     top: 50%;
 141     &:after {
 142       border-left-color: @popover-arrow-color;
 143       border-right-width: 0;
 144       bottom: -@popover-arrow-width;
 145       content: " ";
 146       right: 1px;
 147     }
 148   }
 149 }