Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / resources / themes / stylesheets / ext4 / default / widgets / _qtip.scss

diff --git a/resources/themes/stylesheets/ext4/default/widgets/_qtip.scss b/resources/themes/stylesheets/ext4/default/widgets/_qtip.scss
new file mode 100644 (file)
index 0000000..a63a8c2
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/_qtip.scss
@@ -0,0 +1,172 @@
+@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: theme-image($theme-name, 'form/exclamation.gif') 1px 1px no-repeat;
+        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
+    );
+    
+    @include x-frame(
+        $cls: 'form-invalid-tip-header',
+        $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
+    );
+}
\ No newline at end of file