/** * generates base style rules for both tabs and buttons * * @param {string} [$base-cls='button'] * * @param {boolean} [$include-arrows=true] * * @member Ext.button.Button * @private */@mixin extjs-button-base( $base-cls: 'btn', $btn-display: inline-block, $include-arrows: true, $flexbox: true) { .#{$prefix}#{$base-cls} { display: $btn-display; outline: 0; cursor: pointer; white-space: nowrap; text-decoration: none; vertical-align: top; overflow: hidden; // buttons are position:relative because they may contain an absolutely positioned // pseudo element for imitating box-shadow in IE8 when used in a segmented button // see extjs-button-ui position: relative; > .#{$prefix}frame { height: 100%; width: 100%; } } .#{$prefix}#{$base-cls}-wrap { height: 100%; width: 100%; @if $flexbox { @include ext-box; @include ext-box-align(stretch); &.#{$prefix}btn-arrow-bottom, &.#{$prefix}btn-split-bottom { @include ext-box-orient(vertical); } @if $include-ie { .#{$prefix}ie9m & { display: table; border-spacing: 0; } } } @else { display: table; border-spacing: 0; } } .#{$prefix}#{$base-cls}-button { white-space: nowrap; line-height: 0; // this element must be position:relative so that the split line can be absolutely // positioned inside of it position: relative; @if $flexbox { @include ext-box; @include ext-box-align(center); @include ext-box-flex; &.#{$prefix}#{$base-cls}-icon-top, &.#{$prefix}#{$base-cls}-icon-bottom { @include ext-box-orient(vertical); @include ext-box-align(stretch); @include ext-box-pack(center); } @if $include-ie { .#{$prefix}ie9m & { display: table-cell; vertical-align: middle; } } } @else { display: table-cell; vertical-align: middle; } } .#{$prefix}#{$base-cls}-inner { overflow: hidden; text-overflow: ellipsis; @if $flexbox { -ms-flex-negative: 1; display: block; @if $include-ie { .#{$prefix}ie9m & { display: inline-block; vertical-align: middle; } } } @else { display: inline-block; vertical-align: middle; } .#{$prefix}#{$base-cls}-icon.#{$prefix}#{$base-cls}-no-text > & { display: none; } } .#{$prefix}#{$base-cls}-icon-el { display: none; vertical-align: middle; text-align: center; background-position: center center; background-repeat: no-repeat; @if $flexbox { .#{$prefix}#{$base-cls}-icon > & { display: block; } @if $include-ie { .#{$prefix}ie9m .#{$prefix}#{$base-cls}-icon-left > &, .#{$prefix}ie9m .#{$prefix}#{$base-cls}-icon-right > & { display: inline-block; } } } @else { .#{$prefix}#{$base-cls}-icon > & { display: inline-block; } .#{$prefix}#{$base-cls}-icon-top > &, .#{$prefix}#{$base-cls}-icon-bottom > & { display: block; } } } .#{$prefix}#{$base-cls}-button-center { text-align: center; @if $flexbox { @include ext-box-pack(center); } } .#{$prefix}#{$base-cls}-button-left { text-align: left; @if $flexbox { @include ext-box-pack(start); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}#{$base-cls}-button-left { text-align: right; } } .#{$prefix}#{$base-cls}-button-right { text-align: right; @if $flexbox { @include ext-box-pack(end); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}#{$base-cls}-button-right { text-align: left; } } @if $include-arrows { .#{$prefix}#{$base-cls}-arrow:after, .#{$prefix}#{$base-cls}-split:after { display: block; background-repeat: no-repeat; content: ''; // pseudo elements don't match wildcard selectors, so ".x-border-box *" will not apply // to this element box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; text-align: center; } .#{$prefix}#{$base-cls}-arrow-right:after, .#{$prefix}#{$base-cls}-split-right:after { background-position: right center; @if $flexbox { @include ext-box; @include ext-box-align(center); @include ext-box-pack(center); @if $include-ie { .#{$prefix}ie9m & { display: table-cell; vertical-align: middle; } } } @else { display: table-cell; vertical-align: middle; } } @if $include-rtl { .#{$prefix}rtl { &.#{$prefix}#{$base-cls}-arrow-right:after, &.#{$prefix}#{$base-cls}-split-right:after { background-position: left center; } } } .#{$prefix}#{$base-cls}-arrow-bottom:after, .#{$prefix}#{$base-cls}-split-bottom:after { background-position: center bottom; // when this pseudo el is display:table-row (with no table-cell inside) in needs // content other than emtpy or space in order to render in some browsers (IE8-11), // so use non-breaking space content: '\00a0'; // line-height:0 prevents the pseudo el from inheriting line-height and being // taller than specified by $icon-size. line-height: 0; @if $flexbox { @if $include-ie { .#{$prefix}ie9m & { display: table-row; } } } @else { display: table-row; } } // placeholder pseudo element for split line when line is not contained in arrow image .#{$prefix}#{$base-cls}-split-right > .#{$prefix}btn-button:after { position: absolute; display: block; top: -100%; right: 0; height: 300%; content: ''; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}#{$base-cls}-split-right > .#{$prefix}btn-button:after { left: 0; right: auto; } } // placeholder pseudo element for split line when line is not contained in arrow image .#{$prefix}#{$base-cls}-split-bottom > .#{$prefix}btn-button:after { position: absolute; display: block; bottom: 0; left: -100%; font-size: 0; width: 300%; content: ''; } } .#{$prefix}#{$base-cls}-mc { // buttons and tabs can have a focus outline on the btnWrap element. The default // overflow:hidden styling of the frame body hides the outline, so override it to // overflow:visible. overflow: visible; }} @include extjs-button-base();