resources/themes/stylesheets/ext4/default/widgets/_qtip.scss

   1 @mixin extjs-qtip {
   2     .#{$prefix}tip {
   3         position: absolute;
   4         overflow: visible; /*pointer needs to be able to stick out*/
   5         border-color: $tip-border-color;
   6
   7         .#{$prefix}tip-header {
   8             .#{$prefix}box-item {
   9                 padding: $tip-header-padding;
  10             }
  11
  12             .#{$prefix}tool {
  13                 padding: 0px 1px 0 0 !important;
  14             }
  15         }
  16     }
  17
  18     @include x-frame(
  19         $cls: 'tip',
  20         $border-radius: $tip-border-radius,
  21         $border-width: $tip-border-width,
  22         $background-color: $tip-background-color,
  23         $background-gradient: $tip-background-gradient,
  24         $table: true
  25     );
  26
  27     .#{$prefix}tip-header-text {
  28         @include no-select;
  29
  30         color: $tip-header-color;
  31         font-size: $tip-header-font-size;
  32         font-weight: $tip-header-font-weight;
  33     }
  34
  35     .#{$prefix}tip-header-draggable {
  36         .#{$prefix}tip-header-text {
  37             cursor: move;
  38         }
  39     }
  40
  41     // Tip is a Panel. It uses dock layout. Body style must be the same
  42     .#{$prefix}tip-body,
  43     .#{$prefix}form-invalid-tip-body {
  44         overflow: hidden;
  45         position: relative;
  46         padding: $tip-body-padding;
  47     }
  48
  49     .#{$prefix}tip-header,
  50     .#{$prefix}tip-body,
  51     .#{$prefix}form-invalid-tip-body {
  52         color: $tip-body-color;
  53         font-size: $tip-body-font-size;
  54         font-weight: $tip-body-font-weight;
  55         a {
  56             color: $tip-body-link-color;
  57         }
  58     }
  59
  60     .#{$prefix}tip-anchor {
  61         position: absolute;
  62
  63         overflow: hidden;
  64
  65         height: 0;
  66         width: 0;
  67
  68         border-style: solid;
  69         border-width: 5px;
  70         border-color: $tip-border-color;
  71
  72         zoom: 1;
  73     }
  74
  75     .#{$prefix}border-box .#{$prefix}tip-anchor {
  76         width: 10px;
  77         height: 10px;
  78     }
  79
  80     .#{$prefix}tip-anchor-top {
  81         border-top-color: transparent;
  82         border-left-color: transparent;
  83         border-right-color: transparent;
  84
  85         @if $include_ie {
  86             _border-top-color: pink;
  87             _border-left-color: pink;
  88             _border-right-color: pink;
  89             _filter: chroma(color=pink);
  90         }
  91     }
  92
  93     .#{$prefix}tip-anchor-bottom {
  94         border-bottom-color: transparent;
  95         border-left-color: transparent;
  96         border-right-color: transparent;
  97
  98         @if $include_ie {
  99             _border-bottom-color: pink;
 100             _border-left-color: pink;
 101             _border-right-color: pink;
 102             _filter: chroma(color=pink);
 103         }
 104     }
 105
 106     .#{$prefix}tip-anchor-left {
 107         border-top-color: transparent;
 108         border-bottom-color: transparent;
 109         border-left-color: transparent;
 110
 111         @if $include-ie {
 112             _border-top-color: pink;
 113             _border-bottom-color: pink;
 114             _border-left-color: pink;
 115             _filter: chroma(color=pink);
 116         }
 117     }
 118
 119     .#{$prefix}tip-anchor-right {
 120         border-top-color: transparent;
 121         border-bottom-color: transparent;
 122         border-right-color: transparent;
 123
 124         @if $include-ie {
 125             _border-top-color: pink;
 126             _border-bottom-color: pink;
 127             _border-right-color: pink;
 128             _filter: chroma(color=pink);
 129         }
 130     }
 131
 132     //error qtip
 133     .#{$prefix}form-invalid-tip {
 134         border-color: $tip-error-border-color;
 135
 136         @include inner-border(
 137             $width: 1px,
 138             $color: $tip-error-inner-border-color
 139         );
 140     }
 141
 142     .#{$prefix}form-invalid-tip-body {
 143         background: 1px 1px no-repeat;
 144         background-image: theme-background-image($theme-name, 'form/exclamation.gif');
 145         padding-left: 22px;
 146
 147         li {
 148             margin-bottom: 4px;
 149             &.last {
 150                 margin-bottom: 0;
 151             }
 152         }
 153     }
 154
 155     @include x-frame(
 156         $cls: 'form-invalid-tip',
 157         $ui: 'default',
 158         $border-radius: $tip-error-border-radius,
 159         $border-width: $tip-error-border-width,
 160         $background-color: $tip-error-background-color,
 161         $background-gradient: $tip-background-gradient,
 162         $table: true
 163     );
 164 }