/** * @class Ext.tip.Tip */ /** * @var {number} * The height (in all orientations) of the anchor pointer in pixels */$tip-anchor-height: dynamic(6px); /** * @var {number} * The width (in all orientations) of the anchor pointer in pixels */$tip-anchor-width: dynamic($tip-anchor-height * 2); /** * @var {color} * The background-color of the Tip */$tip-background-color: dynamic(#fff); /** * @var {string/list} * The background-gradient of the Tip. Can be either the name of a predefined gradient or a * list of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}. */$tip-background-gradient: dynamic('none'); /** * @var {color} * The text color of the Tip body */$tip-body-color: dynamic(#000); /** * @var {number} * The font-size of the Tip body */$tip-body-font-size: dynamic($font-size); /** * @var {string} * The font-weight of the Tip body */$tip-body-font-weight: dynamic($font-weight); /** * @var {number/list} * The padding of the Tip body */$tip-body-padding: dynamic(3px); /** * @var {color} * The text color of any anchor tags inside the Tip body */$tip-body-link-color: dynamic($tip-body-color); /** * @var {color} * The text color of the Tip header */$tip-header-color: dynamic($tip-body-color); /** * @var {number} * The font-size of the Tip header */$tip-header-font-size: dynamic($tip-body-font-size); /** * @var {string} * The font-weight of the Tip header */$tip-header-font-weight: dynamic(bold); // private - for 4.x compat $tip-header-body-padding: dynamic(3px 3px 0 3px); /** * @var {number/list} * The padding of the Tip header's body element */$tip-header-padding: dynamic($tip-header-body-padding); /** * @var {color} * The border-color of the Tip */$tip-border-color: dynamic($panel-border-color); /** * @var {number} * The border-width of the Tip */$tip-border-width: dynamic(1px); /** * @var {number} * The border-radius of the Tip */$tip-border-radius: dynamic(3px); /** * @var {color} * The inner border-color of the form field error Tip */$tip-error-inner-border-color: dynamic(#fff); /** * @var {number} * The inner border-width of the form field error Tip */$tip-error-inner-border-width: dynamic(0); /** * @var {color} * The border-color of the form field error Tip */$tip-error-border-color: dynamic($tip-border-color); /** * @var {number} * The border-radius of the form field error Tip */$tip-error-border-radius: dynamic($tip-border-radius); /** * @var {number} * The border-width of the form field error Tip */$tip-error-border-width: dynamic($tip-border-width); /** * @var {color} * The background-color of the form field error Tip */$tip-error-background-color: dynamic($tip-background-color); /** * @var {number/list} * The padding of the form field error Tip's body element */$tip-error-body-padding: dynamic($tip-body-padding); /** * @var {color} * The text color of the form field error Tip's body element */$tip-error-body-color: dynamic($tip-body-color); /** * @var {number} * The font-size of the form field error Tip's body element */$tip-error-body-font-size: dynamic($tip-body-font-size); /** * @var {string} * The font-weight of the form field error Tip's body element */$tip-error-body-font-weight: dynamic($tip-body-font-weight); /** * @var {color} * The color of anchor tags in the form field error Tip's body element */$tip-error-body-link-color: dynamic($tip-body-link-color); /** * @var {number} * The space between {@link Ext.panel.Tool Tools} in the header */$tip-tool-spacing: dynamic(4px); /** * @var {string} * The sprite to use for the header {@link Ext.panel.Tool Tools} */$tip-tool-background-image: dynamic('tools/tool-sprites'); /** * @var {boolean} * True to include the "default" tip UI */$include-tip-default-ui: dynamic($include-default-uis); /** * @var {boolean} * True to include the "form-invalid" tip UI */$include-tip-form-invalid-ui: dynamic($include-default-uis); /** * Creates a visual theme for a Ext.tip.Tip * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {color} [$ui-border-color=$tip-border-color] * The border-color of the Tip * * @param {number} [$ui-border-width=$tip-border-width] * The border-width of the Tip * * @param {number} [$ui-border-radius=$tip-border-radius] * The border-radius of the Tip * * @param {color} [$ui-background-color=$tip-background-color] * The background-color of the Tip * * @param {string/list} [$ui-background-gradient=$tip-background-gradient] * The background-gradient of the Tip. Can be either the name of a predefined gradient or a * list of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}. * * @param {number} [$ui-tool-spacing=$tip-tool-spacing] * The space between {@link Ext.panel.Tool Tools} in the header * * @param {string} [$ui-tool-background-image=$tip-tool-background-image] * The sprite to use for the header {@link Ext.panel.Tool Tools} * * @param {number/list} [$ui-header-padding=$tip-header-padding] * The padding of the Tip header's body element * * @param {color} [$ui-header-color=$tip-header-color] * The text color of the Tip header * * @param {number} [$ui-header-font-size=$tip-header-font-size] * The font-size of the Tip header * * @param {string} [$ui-header-font-weight=$tip-header-font-weight] * The font-weight of the Tip header * * @param {number/list} [$ui-body-padding=$tip-body-padding] * The padding of the Tip body * * @param {color} [$ui-body-color=$tip-body-color] * The text color of the Tip body * * @param {number} [$ui-body-font-size=$tip-body-font-size] * The font-size of the Tip body * * @param {string} [$ui-body-font-weight=$tip-body-font-weight] * The font-weight of the Tip body * * @param {color} [$ui-body-link-color=$tip-body-link-color] * The text color of any anchor tags inside the Tip body * * @param {number} [$ui-inner-border-width=0] * The inner border-width of the Tip * * @param {color} [$ui-inner-border-color=#fff] * The inner border-color of the Tip * * @param {number} [$ui-tip-anchor-height=$tip-anchor-height] * The height (in all orientations) of the anchor triangle. * * @param {number} [$ui-tip-anchor-width=$tip-anchor-width] * The width (in all orientations) of the anchor triangle. */@mixin extjs-tip-ui( $ui: null, $ui-border-color: $tip-border-color, $ui-border-width: $tip-border-width, $ui-border-radius: $tip-border-radius, $ui-background-color: $tip-background-color, $ui-background-gradient: $tip-background-gradient, $ui-tool-spacing: $tip-tool-spacing, $ui-tool-background-image: $tip-tool-background-image, $ui-header-padding: $tip-header-padding, $ui-header-color: $tip-header-color, $ui-header-font-size: $tip-header-font-size, $ui-header-font-weight: $tip-header-font-weight, $ui-body-padding: $tip-body-padding, $ui-body-color: $tip-body-color, $ui-body-font-size: $tip-body-font-size, $ui-body-font-weight: $tip-body-font-weight, $ui-body-link-color: $tip-body-link-color, $ui-inner-border-width: 0, $ui-inner-border-color: #fff, $ui-tip-anchor-height: $tip-anchor-height, $ui-tip-anchor-width: $tip-anchor-width, // deprecated - use $ui instead $ui-label: null) { @if $ui == null { @if $ui-label != null { @warn '$ui-label is deprecated. Use $ui instead'; $ui: $ui-label; } @else { @warn "#{error('$ui is required')}"; } } @if not is-null($ui-border-radius) and $ui-border-radius != 0 { @include x-frame( $cls: 'tip', $ui: '#{$ui}', $border-radius: $ui-border-radius, $border-width: $ui-border-width, $background-color: $ui-background-color, $background-gradient: $ui-background-gradient, $table: true ); } .#{$prefix}tip-#{$ui} { background-color: $ui-background-color; border-color: $ui-border-color; @if $ui-inner-border-width != 0 { @include inner-border( $width: $ui-inner-border-width, $color: $ui-inner-border-color ); } .#{$prefix}tool-img { @if $ui-tool-background-image != $tool-background-image { background-image: theme-background-image($ui-tool-background-image); } @if is-null($ui-background-gradient) { // EXTJSIV-8846: partially transparent png images do not display correctly // in winXP/IE8m when the image element has a transparent background. // to fix this, we give the element the same background-color as the tooltip. background-color: $ui-background-color; } } } $ui-tool-margin: 0 0 0 $ui-tool-spacing; .#{$prefix}tip-header-#{$ui} { .#{$prefix}tool-after-title { margin: $ui-tool-margin; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tool-after-title { margin: rtl($ui-tool-margin); } } .#{$prefix}tool-before-title { margin: rtl($ui-tool-margin); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tool-before-title { margin: $ui-tool-margin; } } } .#{$prefix}tip-header-#{$ui} { padding: $ui-header-padding; } .#{$prefix}tip-header-title-#{$ui} { color: $ui-header-color; font-size: $ui-header-font-size; font-weight: $ui-header-font-weight; } .#{$prefix}tip-body-#{$ui} { padding: $ui-body-padding; color: $ui-body-color; font-size: $ui-body-font-size; font-weight: $ui-body-font-weight; a { color: $ui-body-link-color; } } .#{$prefix}tip-#{$ui} { $anchor-border-width: $ui-tip-anchor-width / 2; // The main anchor element. // The individual orientations will have one triangle as the border color .#{$prefix}tip-anchor { border: $anchor-border-width solid transparent; @if $include-ie { _border-color: pink; _filter: chroma(color=pink); } } @if $ui-background-color != $ui-border-color { // This is the overlaying triangle which is $ui-border-width pixels smaller // And has the $ui-background-color to create the impression of the background // continuing into the anchor. // // Only needed if the background color and border color are different .#{$prefix}tip-anchor:after { position: absolute; border: $anchor-border-width - $ui-border-width solid transparent; content: ""; @if $include-ie { _border-color: pink; _filter: chroma(color=pink); } } .#{$prefix}tip-anchor-top { border-top-width: 0; border-bottom: $ui-tip-anchor-height solid darken($ui-border-color, 5%); top: -($ui-tip-anchor-height); } .#{$prefix}tip-anchor-bottom { border-bottom-width: 0; border-top: $ui-tip-anchor-height solid darken($ui-border-color, 5%); bottom: -($ui-tip-anchor-height); } .#{$prefix}tip-anchor-left { border-left-width: 0; border-right: $ui-tip-anchor-height solid darken($ui-border-color, 5%); left: -($ui-tip-anchor-height); } .#{$prefix}tip-anchor-right { border-right-width: 0; border-left: $ui-tip-anchor-height solid darken($ui-border-color, 5%); right: -($ui-tip-anchor-height); } .#{$prefix}tip-anchor-top:after { border-top-width: 0; border-bottom-color: $ui-background-color; top: $ui-border-width; margin-left: -($ui-tip-anchor-height) + $ui-border-width; } .#{$prefix}tip-anchor-bottom:after { border-bottom-width: 0; border-top-color: $ui-background-color; bottom: $ui-border-width; margin-left: -($ui-tip-anchor-height) + $ui-border-width; } .#{$prefix}tip-anchor-left:after { border-left-width: 0; border-right-color: $ui-background-color; left: $ui-border-width; margin-top: -($ui-tip-anchor-height) + $ui-border-width; } .#{$prefix}tip-anchor-right:after { border-right-width: 0; border-left-color: $ui-background-color; right: $ui-border-width; margin-top: -($ui-tip-anchor-height) + $ui-border-width; } } @else { .#{$prefix}tip-anchor-top { border-top-width: 0; border-bottom: $ui-tip-anchor-height solid $ui-border-color; top: -($ui-tip-anchor-height); } .#{$prefix}tip-anchor-bottom { border-bottom-width: 0; border-top: $ui-tip-anchor-height solid $ui-border-color; bottom: -($ui-tip-anchor-height); } .#{$prefix}tip-anchor-left { border-left-width: 0; border-right: $ui-tip-anchor-height solid $ui-border-color; left: -($ui-tip-anchor-height); } .#{$prefix}tip-anchor-right { border-right-width: 0; border-left: $ui-tip-anchor-height solid $ui-border-color; right: -($ui-tip-anchor-height); } } }}