/** * 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) { .#{$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 { display: table; height: 100%; width: 100%; } .#{$prefix}#{$base-cls}-button { vertical-align: middle; display: table-cell; white-space: nowrap; line-height: 0; } .#{$prefix}#{$base-cls}-inner { display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; .#{$prefix}#{$base-cls}-icon.#{$prefix}#{$base-cls}-no-text > & { display: none; } } .#{$prefix}#{$base-cls}-icon-el { display: none; vertical-align: middle; background-position: center center; background-repeat: no-repeat; .#{$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; } .#{$prefix}#{$base-cls}-button-left { text-align: left; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}#{$base-cls}-button-left { text-align: right; } } .#{$prefix}#{$base-cls}-button-right { text-align: right; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}#{$base-cls}-button-right { text-align: left; } } @if $include-arrows { @if $include-opera { // Opera 12 inserts an implicit table-row for each cell. This means that in order to // make 2 cells display beside each other, they must be wrapped in a table-row element .#{$prefix}opera12m-#{$base-cls}-arrow-right { display: table; > { .#{$prefix}#{$base-cls}-arrow-right, .#{$prefix}#{$base-cls}-split-right { display: table-row; } } } } .#{$prefix}#{$base-cls}-arrow:after, .#{$prefix}#{$base-cls}-split:after { 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; } .#{$prefix}#{$base-cls}-arrow-right:after, .#{$prefix}#{$base-cls}-split-right:after { display: table-cell; background-position: right center; } @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 { display: table-row; 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 // and opera 12m currently), so use non-breaking space content: '\00a0'; // line-height:0 is needed in opera 12 to prevent the pseudo el from inheriting // line-height and being taller than specified by $icon-size. line-height: 0; } } .#{$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();