Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #1991 from ONLYOFFICE/feature/toolbar-top-border

Browse source 
Feature/toolbar top border
This commit is contained in:
maxkadushkin 2022-10-06 14:38:11 +03:00 committed by GitHub
parent 527633324b c517e82938
commit 3f1252330e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
apps/common/main/resources/less/toolbar.less
View file

@ -40,6 +40,8 @@
.extra { .extra {
background-color: @header-background-color-ie; background-color: @header-background-color-ie;
background-color: @header-background-color; background-color: @header-background-color;
box-shadow: inset 0 @minus-px 0 0 @border-toolbar-active-panel-top;
} }
//&::after { //&::after {
@ -62,6 +64,8 @@
display: flex; display: flex;
flex-shrink: 1; flex-shrink: 1;
box-shadow: inset 0 @minus-px 0 0 @border-toolbar-active-panel-top;
> ul { > ul {
padding: 4px 0 0; padding: 4px 0 0;
margin: 0; margin: 0;
@ -75,14 +79,19 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
position: relative;
&:hover { &:hover {
background-color: @highlight-header-button-hover-ie; background-color: @highlight-header-button-hover-ie;
background-color: @highlight-header-button-hover; background-color: @highlight-header-button-hover;
box-shadow: inset 0 @minus-px 0 0 @border-toolbar-active-panel-top;
} }
&.active { &.active {
background-color: @background-toolbar-ie; background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
box-shadow: inset @minus-px 0px 0 0 @border-toolbar-active-panel-top, inset @scaled-one-px-value @scaled-one-px-value 0 0 @border-toolbar-active-panel-top;
} }
@ -111,6 +120,30 @@
} }
} }
//&:not(:where(.style-off-tabs *)) { IE doesn't support "where" pseudo selector
:not(.style-off-tabs) > & {
&.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;
}
}
}
}
}
.scroll { .scroll {
line-height: @height-tabs; line-height: @height-tabs;
min-width: 20px; min-width: 20px;
@ -132,7 +165,7 @@
&.left{ &.left{
box-shadow: 5px 0 20px 5px @header-background-color-ie; box-shadow: 5px 0 20px 5px @header-background-color-ie;
box-shadow: 5px 0 20px 5px @header-background-color; box-shadow: 18px calc(38px - @scaled-one-px-value) 0 10px @border-toolbar-active-panel-top, 5px 0 20px 5px @header-background-color;
&:after { &:after {
transform: rotate(135deg); transform: rotate(135deg);
@ -141,7 +174,7 @@
} }
&.right{ &.right{
box-shadow: -5px 0 20px 5px @header-background-color-ie; box-shadow: -5px 0 20px 5px @header-background-color-ie;
box-shadow: -5px 0 20px 5px @header-background-color; box-shadow: -10px calc(38px - @scaled-one-px-value) 0 10px @border-toolbar-active-panel-top, -5px 0 20px 5px @header-background-color;
&:after { &:after {
transform: rotate(-45deg); transform: rotate(-45deg);
@ -403,6 +436,7 @@
li { li {
position: relative; position: relative;
&:after { &:after {
//transition: opacity .1s; //transition: opacity .1s;
//transition: bottom .1s; //transition: bottom .1s;
@ -417,6 +451,7 @@
&.active { &.active {
background-color: transparent; background-color: transparent;
box-shadow: none;
//> a { //> a {
// padding: 0 12px; // padding: 0 12px;
//} //}
@ -428,6 +463,7 @@
&:hover:not(.active) { &:hover:not(.active) {
background-color: rgba(0, 0, 0, .05); background-color: rgba(0, 0, 0, .05);
box-shadow: none;
.theme-type-dark & { .theme-type-dark & {
background-color: rgba(255, 255, 255, .05); background-color: rgba(255, 255, 255, .05);