@img-equition-filter: var(--image-border-types-filter); #toolbar { padding: @layout-padding-toolbar-ie; padding: @layout-padding-toolbar; &.style-off-tabs { padding: 0; } &:not(.style-off-tabs) { background: @header-background-color-ie; background: @header-background-color; .toolbar { background-color: @header-background-color-ie; background-color: @header-background-color; } } } .toolbar { .box-controls { border-radius: @border-radius-toolbar-ie; border-radius: @border-radius-toolbar; background-color: @background-toolbar-ie; background-color: @background-toolbar; &:not(.z-clear *) { &:before { content: ''; position: absolute; box-shadow: @shadow-toolbar-ie; box-shadow: @shadow-toolbar; width: 100%; height: @toolbar-height-controls-ie; height: @toolbar-height-controls; bottom: 0; border-radius: @border-radius-toolbar-ie; border-radius: @border-radius-toolbar; .style-off-tabs & { box-shadow: @shadow-toolbar-style-off-ie; box-shadow: @shadow-toolbar-style-off; border-radius: 0; } } } .winxp &, .ie & { box-shadow: @shadow-toolbar-ie; } } .box-tabs{ .top-title & { padding-left: @border-radius-toolbar-ie; padding-left: @border-radius-toolbar; padding-right: @border-radius-toolbar-ie; padding-right: @border-radius-toolbar; } } .ribtab { border-top-left-radius: @toolbar-tab-radius-ie; border-top-left-radius: @toolbar-tab-radius; border-top-right-radius: @toolbar-tab-radius-ie; border-top-right-radius: @toolbar-tab-radius; } } .toolbar { position: relative; &:not(.folded) { height: calc(@toolbar-height-tabs + @toolbar-height-controls-ie); height: calc(@toolbar-height-tabs + @toolbar-height-controls); } &.folded { height: @toolbar-height-tabs; transition: height .2s; overflow: hidden; &.expanded { height: calc(@toolbar-height-tabs + @toolbar-height-controls-ie); height: calc(@toolbar-height-tabs + @toolbar-height-controls); overflow: visible; } &:not(.expanded):not(.cover){ .ribtab.active { > a { font-weight: normal; } } } } .box-tabs { height: @toolbar-height-tabs; .font-size-medium(); display: flex; align-items: stretch; &:not(.z-clear *) { position: relative; z-index: 1; } .extra { .header-background-color(); box-shadow: inset 0 @minus-px 0 0 @border-toolbar-active-panel-top; .folded.z-clear& { box-shadow: inset 0 @minus-px 0 0 @border-toolbar-z-clear; } } //&::after { // content: ''; // position: absolute; // width: 100%; // border-top: 1px solid @gray-dark; // top: @height-tabs - 1; // left: 0; // z-index: 1; //} } --toolbar-tabs-scroller-height: 38px; @tabs-scroller-height: var(--toolbar-tabs-scroller-height, 38px); .tabs { //flex-grow: 1; .header-background-color(); position: relative; overflow: hidden; display: flex; flex-shrink: 1; box-shadow: inset 0 @minus-px 0 0 @border-toolbar-active-panel-top; .folded.z-clear& { box-shadow: inset 0 @minus-px 0 0 @border-toolbar-z-clear; } > ul { padding: 4px 0 0; margin: 0; white-space: nowrap; overflow: hidden; list-style: none; font-size: 0; } li { display: inline-flex; .ie &, .winxp & { align-items: center; } align-items: end; height: 100%; position: relative; &:hover { background-color: @highlight-header-button-hover-ie; background-color: @highlight-header-button-hover; box-shadow: inset 0 @minus-px 0 0 @border-toolbar-active-panel-top; &:not(.x-lone.active) { .folded.z-clear& { box-shadow: inset 0 @minus-px 0 0 @border-toolbar-z-clear; } } } &.active { background-color: @background-toolbar-tab-ie; background-color: @background-toolbar-tab; box-shadow: inset 0 @minus-px 0 0 @background-toolbar, inset @minus-px 0px 0 0 @border-toolbar-active-tab, inset @scaled-one-px-value @scaled-one-px-value 0 0 @border-toolbar-active-tab; } > a { display: inline-block; padding: 0 12px; .ie &, .winxp & { margin-bottom: @toolbar-tab-text-margin-ie; } margin-bottom: @toolbar-tab-text-margin; text-decoration: none; cursor: default; .font-size-medium(); text-align: center; color: @text-toolbar-header-ie; color: @text-toolbar-header; &:focus { outline: none; } } &.active { > a { color: @text-normal-ie; color: @text-normal; outline: none; } } } &:not(.short) { .scroll { display: none; } } &:not(.style-off-tabs *):not(.z-clear *) { &.short { li { &:after { content: ''; position: absolute; background: @border-toolbar-active-panel-top; height: @scaled-one-px-value; bottom: 0; left: 1px; right: 1px; z-index: 2; } &.active { &:after { background: @background-toolbar; } } } } } &:not(.style-off-tabs *) { &.short { li.x-lone.active { &:after { content: ''; position: absolute; background: @border-toolbar-active-panel-top; height: @scaled-one-px-value; bottom: 0; left: 1px; right: 1px; z-index: 2; } &.active { &:after { background: @background-toolbar; } } } } } &:not(.top-title *) { --toolbar-tabs-scroller-height: 42px; } .scroll { line-height: @toolbar-height-tabs; min-width: 20px; z-index: 1; cursor: pointer; position: relative; display: flex; align-items: center; &:hover { text-decoration: none; } &:not(:hover) { &:after { opacity: .8; } } &.disabled { cursor: default; &:after, &:hover:after { opacity: 0.4; } } &.left{ box-shadow: 5px 0 20px 5px @header-background-color-ie; box-shadow: 18px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px @border-toolbar-active-panel-top, 5px 0 20px 5px @header-background-color; .pdf-form & { box-shadow: 5px 0 20px 5px @header-background-color-pdf-ie; box-shadow: 18px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px @border-toolbar-active-panel-top, 5px 0 20px 5px @header-background-color-pdf; } .style-off-tabs & { box-shadow: 5px 0 20px 5px @background-toolbar-ie; box-shadow: 18px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px transparent, 5px 0 20px 5px @background-toolbar; } .folded.z-clear& { box-shadow: 18px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px @border-toolbar-z-clear, 5px 0 20px 5px @header-background-color; .pdf-form & { box-shadow: 5px 0 20px 5px @header-background-color-pdf-ie; box-shadow: 18px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px @border-toolbar-z-clear, 5px 0 20px 5px @header-background-color-pdf; } .style-off-tabs & { box-shadow: 5px 0 20px 5px @background-toolbar-ie; box-shadow: 18px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px @border-toolbar-z-clear, 5px 0 20px 5px @background-toolbar; } } &:after { transform: rotate(135deg); margin-left: 8px; .rtl & { margin-left: 0; margin-right: 4px; } } } &.right{ box-shadow: -5px 0 20px 5px @header-background-color-ie; box-shadow: -10px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px @border-toolbar-active-panel-top, -5px 0 20px 5px @header-background-color; .pdf-form & { box-shadow: -5px 0 20px 5px @header-background-color-pdf-ie; box-shadow: -10px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px @border-toolbar-active-panel-top, -5px 0 20px 5px @header-background-color-pdf; } .style-off-tabs & { box-shadow: -5px 0 20px 5px @background-toolbar-ie; box-shadow: -10px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px transparent, -5px 0 20px 5px @background-toolbar; } .folded.z-clear& { box-shadow: -10px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px @border-toolbar-z-clear, -5px 0 20px 5px @header-background-color; .pdf-form & { box-shadow: -5px 0 20px 5px @header-background-color-pdf-ie; box-shadow: -10px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px @border-toolbar-z-clear, -5px 0 20px 5px @header-background-color-pdf; } .style-off-tabs & { box-shadow: -5px 0 20px 5px @background-toolbar-ie; box-shadow: -10px calc(@tabs-scroller-height - @scaled-one-px-value) 0 10px @border-toolbar-z-clear, -5px 0 20px 5px @background-toolbar; } } &:after { transform: rotate(-45deg); margin-left: 4px; .rtl & { margin-left: 0; margin-right: 8px; } } } @arrow-length: 8px; &:after { content: ' '; width: @arrow-length; height: @arrow-length; border: solid @text-toolbar-header-ie; border: solid @text-toolbar-header; border-width: 0 2px 2px 0; .style-off-tabs & { border-color: @text-normal-ie; border-color: @text-normal; } } } } .box-controls { height: @toolbar-height-controls-ie; // button has strange offset in IE when odd height height: @toolbar-height-controls; // button has strange offset in IE when odd height padding: @toolbar-v-paddings-ie 0; padding: @toolbar-v-paddings 0; display: flex; .panel { display: table; height: 100%; } } .box-panels { flex-grow: 1; -ms-flex: 1; .padding-right-6(); .panel:not(.active) { display: none; } /* ##adopt-panel-width */ .panel { .compactwidth:not(.emptycaption), .nocaption { .btn-group, .btn-toolbar { &.x-huge { .caption { display: none; } .inner-box-caption { justify-content: center; align-items: center; padding: 0 2px; } .compact-caret { display: block; } } } } } /**/ } .more-container { background-color: @background-toolbar-ie; background-color: @background-toolbar; min-width:auto; padding: 12px 10px 7px 0; border-radius: 0; z-index:999; .rtl & { padding: 12px 0 7px 10px; } .compactwidth:not(.emptycaption), .nocaption { .btn-group, .btn-toolbar { &.x-huge { .caption { display: none; } .inner-box-caption { justify-content: center; align-items: center; } .compact-caret { display: block; } } } } .group { height: @toolbar-group-height-ie !important; height: @toolbar-group-height !important; &.flex { vertical-align: bottom; } } &[data-tab=pivot] { padding: 5px 10px 0 0; .rtl & { padding: 5px 0 0 10px; } .group { height: 60px !important; } .separator { margin-top: 4px; margin-bottom: 4px; } } } .more-box { background-color: @background-toolbar-ie; background-color: @background-toolbar; position: absolute; right: 0; .padding-x(12px, 6px); display: none; .rtl & { right: unset; left: 0; } } background-color: @background-toolbar-ie; background-color: @background-toolbar; @minus-px: calc(-1 * @scaled-one-px-value); //.box-inner-shadow(0 -1px @border-toolbar-ie); //.box-inner-shadow(0 @minus-px @border-toolbar); .group { position: relative; display: table-cell; vertical-align: middle; white-space: nowrap; .padding-left-6(); font-size: 0; &.small { .padding-left-10(); &.padding-right-10 { .padding-right-10(); } + .separator:not(.invisible) { .margin-left-10(); } } //&.no-group-mask { // .elset { // position: relative; // } //} } .elset { height: @x-small-btn-size-ie; height: @x-small-btn-size; font-size: 0; &:not(:first-child) { margin-top: @toolbar-small-btn-margin-top-ie; margin-top: @toolbar-small-btn-margin-top; } &.font-normal { .font-size-normal(); } } .separator { .margin-left-6(); &.close { margin-left: 5px; } &.invisible { margin-left: 0; border: none; .rtl & { margin-right: 0; } } &.long { height: @toolbar-group-height-ie; height: @toolbar-group-height; } &.short { height: @x-small-btn-size-ie; height: @x-small-btn-size; } } .btn-slot { display: inline-block; width: @x-small-btn-size-ie; width: @x-small-btn-size; height: auto; &.split-large { width: calc(@x-small-btn-size-ie + 17px); width: calc(@x-small-btn-size + 17px); } &.split { width: calc(@x-small-btn-size-ie + @dd-button-size-ie); width: calc(@x-small-btn-size + @dd-button-size); } &.split-small { width: calc(@x-small-btn-size-ie + 6px); width: calc(@x-small-btn-size + 6px); } &.text { width: auto; } &.border { border: 1px solid @border-regular-control-ie; border: 1px solid @border-regular-control; .border-radius(@border-radius-button-toolbar-ie); .border-radius(@border-radius-button-toolbar); width: @form-control-size-ie; width: @form-control-size; height: @form-control-size-ie; height: @form-control-size; } .checkbox-indeterminate { margin-top: 3px; } } .toolbar-mask { position: absolute; top: 32px; left: 48px; right: 0; bottom: 0; opacity: 0; background-color: @background-toolbar-ie; background-color: @background-toolbar; /* z-index: @zindex-tooltip + 1; */ } &.toolbar-view { .toolbar-mask { left: 0; } } .top-title > & { &:not(.folded) { height: calc(@toolbar-height-tabs-top-title + @toolbar-height-controls-ie); height: calc(@toolbar-height-tabs-top-title + @toolbar-height-controls); } &.folded { height: @toolbar-height-tabs-top-title; &.expanded { height: calc(@toolbar-height-tabs-top-title + @toolbar-height-controls-ie); height: calc(@toolbar-height-tabs-top-title + @toolbar-height-controls); } } .tabs > ul { padding-top: 0; } .box-tabs { height: @toolbar-height-tabs-top-title; } .toolbar-mask { left: 0; } } #slot-btn-start-fill, #slot-btn-header-form-submit { padding: 2px 0; } &.masked { .group:not(.no-mask) { opacity: 0.4; } } .font-attr { > .btn-slot:not(:last-child):not(.split) { .margin-right-4(); } > .btn-slot:not(:last-child).split { .margin-right-2(); } } #slot-field-fontname { min-width: 60px; flex-grow: 1; } .transparent { opacity: 0; } } .style-off-tabs { background-color: @background-toolbar-ie; background-color: @background-toolbar; .toolbar { .tabs, .box-tabs .extra { background-color: transparent; //box-shadow: inset 0 calc(-1 * @scaled-one-px-value-ie) 0 0 @border-regular-control-ie; //box-shadow: inset 0 calc(-1 * @scaled-one-px-value) 0 0 @border-regular-control; box-shadow: inset 0 -1px 0 0 transparent; } .tabs { li { > a { color: @text-normal-ie; color: @text-normal; } &.active { > a { color: @text-normal-pressed-ie; color: @text-normal-pressed; } } &:hover { background-color: @highlight-button-hover-ie; background-color: @highlight-button-hover; box-shadow: none; } &.active { background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed; box-shadow: none; } } } // TODO: move to appropriate module .btn-current-user, .btn-header { .color-user-name { background-color: @text-normal-ie; background-color: @text-normal; color: @text-inverse-ie; color: @text-inverse; } } .btn-header, .btn-users, .btn-header-share, .btn-header-pdf-mode { .icon { &.icon--inverse { background-position-x: 0 !important; background-position-x: @button-small-normal-icon-offset-x !important; } } &:active, &.active { &:not(.disabled) .icon.toolbar__icon { &.icon--inverse { background-position-x: @button-small-active-icon-offset-x-ie !important; background-position-x: @button-small-active-icon-offset-x !important; } } } svg.icon { fill: @icon-normal-ie; fill: @icon-normal; } .caption { color: @text-normal-ie; color: @text-normal; } .caret { border-color: @icon-normal-ie; border-color: @icon-normal; } .inner-box-icon { > svg { fill: @text-normal-ie; fill: @text-normal; } } &:hover:not(.disabled) { background-color: @highlight-button-hover-ie; background-color: @highlight-button-hover; } &:active, &.active { &:not(.disabled) { background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed; svg.icon { fill: @icon-normal-pressed-ie; fill: @icon-normal-pressed; } .caption { color: @text-normal-pressed-ie; color: @text-normal-pressed; } .inner-box-icon { > svg { fill: @text-normal-pressed-ie; fill: @text-normal-pressed; } } .color-user-name { background-color: @text-normal-pressed-ie; background-color: @text-normal-pressed; color: @highlight-button-pressed-ie; color: @highlight-button-pressed; } .caret { border-color: @icon-normal-pressed-ie; border-color: @icon-normal-pressed; } } } } #rib-doc-name { color: @text-normal-ie; color: @text-normal; &:hover:not(:disabled):not(:focus){ background-color: @highlight-button-hover-ie; background-color: @highlight-button-hover; } &:focus{ color: @text-normal-pressed-ie; color: @text-normal-pressed; background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed; } } } } .lined-tabs { .toolbar { #slot-btn-start-fill, #slot-btn-header-form-submit { padding: 4px 0; } .tabs { ul { padding: 0; } li { position: relative; &:after { border-top-style: solid; border-top-width: @toolbar-tab-line-height-ie; border-top-width: @toolbar-tab-line-height; content: ''; position: absolute; .margin-left-7(); width: calc(100% - 14px); bottom: calc(-1 * @toolbar-tab-line-height-ie); bottom: calc(-1 * @toolbar-tab-line-height); opacity: 0; .tab-header-color(); .style-off-tabs& { .tab-toolbar-color(); } border-radius: @toolbar-tab-line-radius-ie; border-radius: @toolbar-tab-line-radius; transition: margin-left .05s ease-in-out, width .05s ease-in-out, opacity .1s ease-in-out; } &.active, &:hover { background-color: transparent; box-shadow: none; } &.active { &:after { opacity: 1; bottom: @toolbar-tab-line-bottom-ie; bottom: @toolbar-tab-line-bottom; } } &:hover:not(.active) { &:after { opacity: 0.4; bottom: @toolbar-tab-line-bottom-ie; bottom: @toolbar-tab-line-bottom; } } &:hover.active { &:after { .margin-left-2(); width: calc(100% - 4px); } } & > a { color: @text-toolbar-header-ie; color: @text-toolbar-header; .style-off-tabs& { color: @text-normal-ie; color: @text-normal; } } } &:not(.style-off-tabs *):not(.z-clear *) { &.short { li { &:after { bottom: @toolbar-tab-line-bottom-ie; bottom: @toolbar-tab-line-bottom; } } } } } &.editor-native-color { .tabs li:after { .tab-header-color(); } } &.editor-native-color { .tabs li:after { .style-off-tabs& { .tab-toolbar-color(); } } } } } .style-skip-docname .toolbar { #box-doc-name > input { display: none; } } .toolbar-fullview-panel { position: absolute; bottom: 0; width: 100%; z-index: @zindex-navbar + 3; } .toolbar { &.cover { ul { z-index: @zindex-navbar + 4; } } &:not(.cover):not(.z-clear) { z-index: @zindex-navbar + 1; } } .btn-toolbar { &:hover:not(.disabled) { svg.icon { .btn& { opacity: 1; } } } &:active, &.active { &:not(.disabled) { svg.icon { fill: @icon-normal-pressed-ie; fill: @icon-normal-pressed; .btn& { opacity: 1; } } } } svg.icon { background-image: none; fill: @icon-normal-ie; fill: @icon-normal; .btn& { opacity: 1; } } &.borders--small { border-radius: @border-radius-button-normal-ie; border-radius: @border-radius-button-normal; &:not(:active) { //box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-regular-control-ie; //box-shadow: inset 0 0 0 @scaled-one-px-value @border-regular-control; } & { width: calc(@x-small-btn-size-ie + 1px); width: calc(@x-small-btn-size + 1px); height: calc(@x-small-btn-size-ie + 1px); height: calc(@x-small-btn-size + 1px); .pixel-ratio__2_5 & { width: @x-small-btn-size-ie; width: @x-small-btn-size; height: @x-small-btn-size-ie; height: @x-small-btn-size; } } .icon { width: @x-small-btn-size-ie; width: @x-small-btn-size; height: @x-small-btn-size-ie; height: @x-small-btn-size; .pixel-ratio__1_25 &, .pixel-ratio__1_75 &, .pixel-ratio__2_5 & { width: @x-small-btn-icon-size-ie; width: @x-small-btn-icon-size; height: @x-small-btn-icon-size-ie; height: @x-small-btn-icon-size; } } } } [applang=ru] { .dropdown-menu.toc-menu { --bckgHOffset: -144px; } } #id-dlg-list-bullet-format, #id-dlg-numbering-format { .dropdown-menu li a span, .form-control span { display: inline-block; } } #slot-combo-insertshape, .slot-combo-insertshape { @combo-dataview-button-width: 14px; @combo-dataview-button-width: calc(2*@scaled-one-px-value + @dd-button-size); width: 155px; height: 46px; .view { .padding-right(14px); .padding-right(calc(@combo-dataview-button-width - @scaled-two-px-value)); } .dataview.field-picker { height: 100%; margin: 0; padding: 2px; .item { margin: 0; -webkit-box-shadow: none; box-shadow: none; } &:not(.disabled) { .item { &:hover { background-color: @highlight-button-hover-ie; background-color: @highlight-button-hover; } &.active { background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed; svg.icon { fill: @icon-normal-pressed-ie; fill: @icon-normal-pressed; } } } } } .button { width: 14px; width: @combo-dataview-button-width; .caret { width: 4px !important; height: 4px !important; } } } .item-shape { .icon { width: 20px; height: 20px; } svg.icon { display: inline-block; vertical-align: middle; fill: @icon-normal-ie; fill: @icon-normal; } width: 20px; height: 20px; } .item-equation { .equation-icon { .background-ximage-all('toolbar/math.png', 1500px, @commonimage: true); opacity: @component-normal-icon-opacity; .theme-type-dark & { -webkit-filter: @img-equition-filter; filter: @img-equition-filter; } border-radius: @border-radius-dataview-item-ie; border-radius: @border-radius-dataview-item; } } // charts .menu-insertchart { margin: 5px 5px 0 10px; .rtl & { margin: 5px 10px 0 5px; } .group-description { .padding-left-4(); } .group-items-container { .float-left(); position: relative; } } .item-chartlist { width: 40px; height: 40px; .icon { width: 40px; height: 40px; } svg.icon { display: inline-block; vertical-align: middle; fill: @icon-normal-ie; fill: @icon-normal; } } .color-schemas-menu { span { &.colors { display: inline-block; .margin-right-15(); } &.color { display: inline-block; width: 12px; height: 12px; .margin-right-2(); border: @scaled-one-px-value-ie solid @border-color-shading-ie; border: @scaled-one-px-value solid @border-color-shading; vertical-align: middle; } &.text { vertical-align: middle; } } a{ height: 27px; } &.checked { &:before { display: none !important; } &, &:hover, &:focus { background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed; color: @text-normal-pressed-ie; color: @text-normal-pressed; span.color { border-color: @icon-normal-ie; border-color: @icon-normal; } } } } .dropdown-menu { &.select-checked-items { .menu-item.checked { &:before { display: none !important; } &, &:hover, &:focus { background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed; color: @text-normal-pressed-ie; color: @text-normal-pressed; label { color: @text-normal-pressed-ie; color: @text-normal-pressed; } } .menu-item-icon { background-position-x: @button-small-active-icon-offset-x-ie; background-position-x: @button-small-active-icon-offset-x; } svg.menu-item-icon { fill: @icon-normal-pressed-ie; fill: @icon-normal-pressed; } } } } .item-databar { .icon { width: 25px; height: 25px; } svg.icon { display: inline-block; vertical-align: middle; fill: @icon-normal-ie; fill: @icon-normal; } width: 25px; height: 25px; } .item-colorscale { .icon { width: 25px; height: 25px; } svg.icon { display: inline-block; vertical-align: middle; fill: @icon-normal-ie; fill: @icon-normal; } width: 25px; height: 25px; } .menu-iconsets { margin: 5px 5px 0 10px; .rtl & { margin: 5px 10px 0 5px; } .group-items-container > div { margin-right: 8px !important; .rtl & { margin-right: 4px !important; margin-left: 8px !important; } &:not(:hover), &:not(.selected) { .box-shadow(none); } } .item-iconset { img { margin: 2px; .rtl & { float: right; } } width: 100px; height: 20px; } } #slot-field-zoom, .slot-field-zoom { float: left; min-width: 50px; } section .field-styles { width: 100%; } .toolbar, #special-paste-container, #chart-element-container { .btn-group, .btn-toolbar { .pixel-ratio__2_5 & { display: inline-flex; align-items: center; } } .menu-header { font-weight: bold; cursor: default; padding: 5px 20px; .text-align-left(); } } .background-plugins { .menu-header { display: block; font-weight: bold; padding: 10px 16px; } > li > .menu-item { display: flex; align-items: center; padding: 8px 16px; .menu-item-icon { float: none; margin: 0; .margin-right(5px); width: 28px; height: 28px; } .plugin-caption { flex-basis: 100%; padding-top: 3px; .padding-right(6px); } .plugin-tools { display: flex; .float-right(); padding-top: 2px; .plugin-toggle { display: flex; align-items: center; } .plugin-settings { .btn-toolbar.dropdown-toggle { min-width: @x-small-btn-size-ie; min-width: @x-small-btn-size; } .btn-group { width: @x-small-btn-size-ie; width: @x-small-btn-size; height: @x-small-btn-size-ie; height: @x-small-btn-size; .margin-left-8(); &:active, &.active { &:not(.disabled) .icon { background-position-x: @button-small-active-icon-offset-x !important; } } } } } } }