shop.balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

_tooltip.scss (3108B)

      1 //
      2 // Tooltips
      3 // --------------------------------------------------
      4 
      5 
      6 // Base class
      7 .tooltip {
      8   position: absolute;
      9   z-index: $zindex-tooltip;
     10   display: block;
     11   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
     12   // So reset our font and text properties to avoid inheriting weird values.
     13   @include reset-text;
     14   font-size: $font-size-small;
     15 
     16   @include opacity(0);
     17 
     18   &.in     { @include opacity($tooltip-opacity); }
     19   &.top    { margin-top:  -3px; padding: $tooltip-arrow-width 0; }
     20   &.right  { margin-left:  3px; padding: 0 $tooltip-arrow-width; }
     21   &.bottom { margin-top:   3px; padding: $tooltip-arrow-width 0; }
     22   &.left   { margin-left: -3px; padding: 0 $tooltip-arrow-width; }
     23 }
     24 
     25 // Wrapper for the tooltip content
     26 .tooltip-inner {
     27   max-width: $tooltip-max-width;
     28   padding: 3px 8px;
     29   color: $tooltip-color;
     30   text-align: center;
     31   background-color: $tooltip-bg;
     32   border-radius: $border-radius-base;
     33 }
     34 
     35 // Arrows
     36 .tooltip-arrow {
     37   position: absolute;
     38   width: 0;
     39   height: 0;
     40   border-color: transparent;
     41   border-style: solid;
     42 }
     43 // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
     44 .tooltip {
     45   &.top .tooltip-arrow {
     46     bottom: 0;
     47     left: 50%;
     48     margin-left: -$tooltip-arrow-width;
     49     border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
     50     border-top-color: $tooltip-arrow-color;
     51   }
     52   &.top-left .tooltip-arrow {
     53     bottom: 0;
     54     right: $tooltip-arrow-width;
     55     margin-bottom: -$tooltip-arrow-width;
     56     border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
     57     border-top-color: $tooltip-arrow-color;
     58   }
     59   &.top-right .tooltip-arrow {
     60     bottom: 0;
     61     left: $tooltip-arrow-width;
     62     margin-bottom: -$tooltip-arrow-width;
     63     border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
     64     border-top-color: $tooltip-arrow-color;
     65   }
     66   &.right .tooltip-arrow {
     67     top: 50%;
     68     left: 0;
     69     margin-top: -$tooltip-arrow-width;
     70     border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
     71     border-right-color: $tooltip-arrow-color;
     72   }
     73   &.left .tooltip-arrow {
     74     top: 50%;
     75     right: 0;
     76     margin-top: -$tooltip-arrow-width;
     77     border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
     78     border-left-color: $tooltip-arrow-color;
     79   }
     80   &.bottom .tooltip-arrow {
     81     top: 0;
     82     left: 50%;
     83     margin-left: -$tooltip-arrow-width;
     84     border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
     85     border-bottom-color: $tooltip-arrow-color;
     86   }
     87   &.bottom-left .tooltip-arrow {
     88     top: 0;
     89     right: $tooltip-arrow-width;
     90     margin-top: -$tooltip-arrow-width;
     91     border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
     92     border-bottom-color: $tooltip-arrow-color;
     93   }
     94   &.bottom-right .tooltip-arrow {
     95     top: 0;
     96     left: $tooltip-arrow-width;
     97     margin-top: -$tooltip-arrow-width;
     98     border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
     99     border-bottom-color: $tooltip-arrow-color;
    100   }
    101 }