web-apps/apps/common/main/resources/less/toolbar.less
2021-02-03 10:12:26 +03:00

578 lines
12 KiB
Plaintext

@height-title: 28px;
@height-tabs: 32px;
@height-controls: 67px;
@img-equition-filter: var(--image-border-types-filter);
.toolbar {
position: relative;
&:not(.folded) {
height: @height-tabs + @height-controls;
}
&.folded {
height: @height-tabs;
transition: height .2s;
overflow: hidden;
&.expanded {
height: @height-tabs + @height-controls;
overflow: visible;
}
&:not(.expanded):not(.cover){
.ribtab.active {
> a {
font-weight: normal;
}
}
}
}
.box-tabs {
height: @height-tabs;
font-size: 12px;
display: flex;
align-items: stretch;
.extra {
background-color: @header-background-color;
}
//&::after {
// content: '';
// position: absolute;
// width: 100%;
// border-top: 1px solid @gray-dark;
// top: @height-tabs - 1;
// left: 0;
// z-index: 1;
//}
}
.tabs {
//flex-grow: 1;
background-color: @header-background-color;
position: relative;
overflow: hidden;
display: flex;
> ul {
padding: 4px 0 0;
margin: 0;
white-space: nowrap;
overflow: hidden;
list-style: none;
font-size: 0;
}
li {
display: inline-flex;
align-items: center;
height: 100%;
&:hover {
background-color: @highlight-header-button-hover;
}
&.active {
background-color: @background-toolbar;
}
> a {
display: inline-block;
padding: 0 12px;
text-decoration: none;
cursor: default;
font-size: 12px;
text-align: center;
color: @text-toolbar-header;
}
&.active {
> a {
color: @text-normal;
}
}
}
&:not(.short) {
.scroll {
display: none;
}
}
.scroll {
line-height: @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;
}
}
&.left{
box-shadow: 5px 0 20px 5px @header-background-color;
&:after {
transform: rotate(135deg);
margin-left: 8px;
}
}
&.right{
box-shadow: -5px 0 20px 5px @header-background-color;
&:after {
transform: rotate(-45deg);
margin-left: 4px;
}
}
@arrow-length: 8px;
&:after {
content: ' ';
width: @arrow-length;
height: @arrow-length;
border: solid white;
border-width: 0 2px 2px 0;
}
}
}
.box-controls {
//height: @height-controls; // button has strange offset in IE when odd height
padding: 10px 0;
display: flex;
//background-color: #F2CBBF;
.panel {
display: table;
height: 100%;
}
//width: 100%;
}
.box-panels {
flex-grow: 1;
-ms-flex: 1;
.panel:not(.active) {
display: none;
}
/* ##adopt-panel-width */
.panel:not(#plugns-panel) .compactwidth {
.btn-group, .btn-toolbar {
&.x-huge {
.caption {
display: none;
}
.inner-box-caption {
justify-content: center;
}
}
}
}
/**/
}
background-color: @background-toolbar;
.box-inner-shadow(0 -1px 0 @border-toolbar);
.group {
position: relative;
display: table-cell;
vertical-align: middle;
white-space: nowrap;
padding-left: 12px;
font-size: 0;
&:last-child {
padding-right: 12px;
}
}
.elset {
height: 20px;
font-size: 0;
&:not(:first-child) {
margin-top: 6px;
}
}
.separator {
margin-left: 12px;
&.close {
margin-left: 5px;
}
&.long {
height: 46px;
}
&.short {
height: 20px;
}
}
.btn-slot {
display: inline-block;
width: 20px;
height: auto;
&.split {
width: 31px;
}
&.text {
width: auto;
}
&.border {
border: 1px solid @border-regular-control;
.border-radius(1px);
width: 22px;
height: 22px;
}
.checkbox-indeterminate {
margin-top: 3px;
}
}
.toolbar-mask {
position: absolute;
top: 32px;
left: 48px;
right: 0;
bottom: 0;
opacity: 0;
background-color: @background-toolbar;
/* z-index: @zindex-tooltip + 1; */
}
&.toolbar-view .toolbar-mask{
left: 0;
}
.top-title > & {
&:not(.folded) {
height: 28 + @height-controls;
}
&.folded {
height: 28px;
&.expanded {
height: 28 + @height-controls;
}
}
.tabs > ul {
padding-top: 0;
}
.box-tabs {
height: 28px;
}
.toolbar-mask {
left: 0;
}
}
}
.style-off-tabs {
.toolbar {
@underscore_height: 3px;
.tabs, .extra {
background-color: transparent;
box-shadow: inset 0 -1px 0 0 @border-regular-control;
}
.tabs {
ul {
padding: 0;
}
li {
position: relative;
&:after {
//transition: opacity .1s;
//transition: bottom .1s;
border-top: @underscore_height solid @text-normal;
content: '';
position: absolute;
width: 100%;
bottom: -@underscore_height;
opacity: 0;
}
&.active {
background-color: transparent;
&:after {
opacity: 1;
bottom: 0;
}
}
&:hover:not(.active) {
background-color: rgba(0, 0, 0, .05);
//background-color: @highlight-button-hover;
}
> a {
color: @text-normal;
&::after {
display:block;
content:attr(data-title);
font-weight:bold;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
margin-bottom:-1px;
}
}
}
}
.extra {
#header-logo {
i {
.background-ximage-v2('header/dark-logo.png', 86px);
}
}
}
.tabs .scroll {
&.left {
box-shadow: 5px 0 20px 5px @background-toolbar;
}
&.right {
box-shadow: -5px 0 20px 5px @background-toolbar;
}
&:after {
border-color: @text-normal;
}
}
// TODO: move to appropriate module
.btn-header, .btn-users {
&:not(:active) .icon--inverse {
background-position-x: 0;
}
svg.icon {
fill: @icon-toolbar-header;
}
.caption {
color: @text-normal;
}
&:hover:not(.disabled) {
background-color: @highlight-button-hover;
}
&:active, &.active {
&:not(.disabled) {
background-color: @highlight-button-pressed;
svg.icon {
fill: @icon-toolbar-header;
}
.caption {
color: @text-inverse;
}
}
}
}
#rib-doc-name {
color: @text-normal;
}
&.editor-native-color {
.tabs li:after {
border-color: @header-background-color;
}
}
}
&.style-skip-docname .toolbar {
#box-doc-name > label {
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 {
&:active {
svg.icon {
fill: @icon-toolbar-header;
}
}
svg.icon {
background-image: none;
fill: @icon-normal;
}
&.borders--small {
border-radius: 2px;
background-color: @background-normal;
&:not(:active) {
box-shadow: inset 0 0 0 1px @border-regular-control;
}
&, .icon {
width: 21px;
height: 21px;
}
}
}
[applang=ru] {
.dropdown-menu.toc-menu {
--bckgHOffset: -144px;
}
}
.item-shape {
.icon {
width: 20px;
height: 20px;
}
svg.icon {
display: inline-block;
vertical-align: middle;
fill: @icon-normal;
}
width: 20px;
height: 20px;
}
.item-equation {
border: 1px solid @border-regular-control;
.equation-icon {
.background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
.theme-dark & {
-webkit-filter: @img-equition-filter;
filter: @img-equition-filter;
}
}
}
// charts
.menu-insertchart {
.group-description {
padding-left: 4px;
}
.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;
}
}
.color-schemas-menu {
span {
&.colors {
display: inline-block;
margin-right: 15px;
}
&.color {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 2px;
border: 1px solid @border-color-shading;
vertical-align: middle;
}
&.text {
vertical-align: middle;
}
}
&.checked {
&:before {
display: none !important;
}
&, &:hover, &:focus {
background-color: @highlight-button-pressed;
color: @dropdown-link-active-color;
span.color {
border-color: @icon-normal;
}
}
}
}