/**
* Creates the base structure of QuickTip.
* @member Ext.tip.QuickTip
*/
@mixin extjs-qtip {
.#{$prefix}tip {
position: absolute;
overflow: visible; /*pointer needs to be able to stick out*/
border-color: $tip-border-color;
.#{$prefix}tip-header {
.#{$prefix}box-item {
padding: $tip-header-padding;
}
.#{$prefix}tool {
padding: 0px 1px 0 0 !important;
}
}
}
@include x-frame(
$cls: 'tip',
$border-radius: $tip-border-radius,
$border-width: $tip-border-width,
$background-color: $tip-background-color,
$background-gradient: $tip-background-gradient,
$table: true
);
.#{$prefix}tip-header-text {
@include no-select;
color: $tip-header-color;
font-size: $tip-header-font-size;
font-weight: $tip-header-font-weight;
}
.#{$prefix}tip-header-draggable {
.#{$prefix}tip-header-text {
cursor: move;
}
}
// Tip is a Panel. It uses dock layout. Body style must be the same
.#{$prefix}tip-body,
.#{$prefix}form-invalid-tip-body {
overflow: hidden;
position: relative;
padding: $tip-body-padding;
}
.#{$prefix}tip-header,
.#{$prefix}tip-body,
.#{$prefix}form-invalid-tip-body {
color: $tip-body-color;
font-size: $tip-body-font-size;
font-weight: $tip-body-font-weight;
a {
color: $tip-body-link-color;
}
}
.#{$prefix}tip-anchor {
position: absolute;
overflow: hidden;
height: 0;
width: 0;
border-style: solid;
border-width: 5px;
border-color: $tip-border-color;
zoom: 1;
}
.#{$prefix}border-box .#{$prefix}tip-anchor {
width: 10px;
height: 10px;
}
.#{$prefix}tip-anchor-top {
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
@if $include_ie {
_border-top-color: pink;
_border-left-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}
}
.#{$prefix}tip-anchor-bottom {
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
@if $include_ie {
_border-bottom-color: pink;
_border-left-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}
}
.#{$prefix}tip-anchor-left {
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
@if $include-ie {
_border-top-color: pink;
_border-bottom-color: pink;
_border-left-color: pink;
_filter: chroma(color=pink);
}
}
.#{$prefix}tip-anchor-right {
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
@if $include-ie {
_border-top-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}
}
//error qtip
.#{$prefix}form-invalid-tip {
border-color: $tip-error-border-color;
@include inner-border(
$width: 1px,
$color: $tip-error-inner-border-color
);
}
.#{$prefix}form-invalid-tip-body {
background: 1px 1px no-repeat;
background-image: theme-background-image($theme-name, 'form/exclamation.gif');
padding-left: 22px;
li {
margin-bottom: 4px;
&.last {
margin-bottom: 0;
}
}
}
@include x-frame(
$cls: 'form-invalid-tip',
$ui: 'default',
$border-radius: $tip-error-border-radius,
$border-width: $tip-error-border-width,
$background-color: $tip-error-background-color,
$background-gradient: $tip-background-gradient,
$table: true
);
}
|