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