[DE] split toolbar styles on common and private parts

This commit is contained in:
Maxim Kadushkin 2017-04-20 11:45:33 +03:00
parent 2c37dd34b3
commit 04ab2c5e85
3 changed files with 232 additions and 224 deletions

View file

@ -0,0 +1,231 @@
@height-tabs: 40px;
@height-controls: 67px;
@tabs-bg-color: #fff;
.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){
.marker {
opacity: 0;
}
.ribtab.active {
> a {
font-weight: normal;
}
}
}
}
.box-tabs {
height: @height-tabs;
display: flex;
align-items: stretch;
.extra {
background-color: @tabs-bg-color;
}
&::after {
content: '';
position: absolute;
width: 100%;
border-top: 1px solid @gray-dark;
top: @height-tabs - 1;
}
}
.tabs {
flex-grow: 1;
background-color: @tabs-bg-color;
position: relative;
overflow: hidden;
display: flex;
> ul {
padding: 0;
margin: 0;
white-space: nowrap;
overflow: hidden;
list-style: none;
font-size: 0;
}
li {
display: inline-block;
height: 100%;
//background-color: #a6c995;
> a {
display: inline-block;
line-height: @height-tabs;
height: 100%;
padding: 0 10px;
text-decoration: none;
cursor: default;
font-size: 12px;
text-align: center;
color: @gray-deep;
&::after {
display: block;
content: attr(data-title);
font-weight: bold;
height: 1px;
overflow: hidden;
visibility: hidden;
}
}
&.active {
> a {
font-weight: bold;
}
}
}
.marker {
position: relative;
border-top: 3px solid @gray-darker;
top: -5px;
-webkit-transition: width .2s, left .2s ease-out;
opacity: 1;
transition: width .2s, left .2s ease-out, opacity .2s;
}
&:not(.short) {
.scroll {
display: none;
}
}
.scroll {
line-height: @height-tabs;
min-width: 20px;
text-align: center;
z-index: 1;
&.left{
box-shadow: 5px 0 20px 5px rgba(208, 221, 182, .8)
}
&.right{
box-shadow: -5px 0 20px 5px rgba(208, 221, 182, .8)
}
}
}
.box-controls {
height: @height-controls;
padding: 10px 0;
display: flex;
//background-color: #F2CBBF;
.panel {
display: table;
height: 100%;
}
//width: 100%;
}
.box-panels {
.panel:not(.active) {
display: none;
}
}
background-color: @gray-light;
.box-inner-shadow(0 -1px 0 @gray-dark);
.group {
display: table-cell;
vertical-align: top;
white-space: nowrap;
padding-left: 12px;
&:last-child {
padding-right: 12px;
}
}
.group {
//background-color: #a9f261;
vertical-align: middle;
}
.elset {
height: 20px;
font-size: 0;
&:not(:first-child) {
margin-top: 6px;
}
}
.separator {
margin-left: 12px;
&.long {
height: 46px;
}
&.short {
height: 20px;
}
}
.btn-slot {
display: inline-block;
width: 20px;
height: 20px;
&:not(:first-child) {
margin-left: 1px;
}
&.split {
width: 29px;
}
&.text {
width: auto;
}
&.border {
border: 1px solid @gray;
.border-radius(1px);
width: 22px;
height: 22px;
}
&.x-huge {
height: 45px;
}
}
}
.toolbar-fullview-panel {
position: absolute;
top: @height-tabs;
bottom: 0;
width: 100%;
z-index: 995;
}

View file

@ -114,6 +114,7 @@
@import "../../../../common/main/resources/less/opendialog.less"; @import "../../../../common/main/resources/less/opendialog.less";
@import "../../../../common/main/resources/less/review-changes.less"; @import "../../../../common/main/resources/less/review-changes.less";
@import "../../../../common/main/resources/less/plugins.less"; @import "../../../../common/main/resources/less/plugins.less";
@import "../../../../common/main/resources/less/toolbar.less";
// App // App
// -------------------------------------------------- // --------------------------------------------------

View file

@ -1,237 +1,13 @@
@height-tabs: 40px;
@height-controls: 67px;
@tabs-bg-color: #fff;
#toolbar { #toolbar {
//z-index: 101; //z-index: 101;
} }
.toolbar { .toolbar {
position: relative;
z-index: 101; z-index: 101;
&: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){
.marker {
opacity: 0;
}
.rib-tab.active {
> a {
font-weight: normal;
}
}
}
}
.box-tabs {
height: @height-tabs;
display: flex;
align-items: stretch;
.extra {
background-color: @tabs-bg-color;
}
&::after {
content: '';
position: absolute;
width: 100%;
border-top: 1px solid @gray-dark;
top: @height-tabs - 1;
}
}
.tabs {
flex-grow: 1;
background-color: @tabs-bg-color;
position: relative;
overflow: hidden;
display: flex;
> ul {
padding: 0;
margin: 0;
white-space: nowrap;
overflow: hidden;
list-style: none;
font-size: 0;
}
li {
display: inline-block;
height: 100%;
//background-color: #a6c995;
> a {
display: inline-block;
line-height: @height-tabs;
height: 100%;
padding: 0 10px;
text-decoration: none;
cursor: default;
font-size: 12px;
text-align: center;
color: @gray-deep;
&::after {
display: block;
content: attr(data-title);
font-weight: bold;
height: 1px;
overflow: hidden;
visibility: hidden;
}
}
&.active {
> a {
font-weight: bold;
}
}
}
.marker {
position: relative;
border-top: 3px solid @gray-darker;
top: -5px;
-webkit-transition: width .2s, left .2s ease-out;
opacity: 1;
transition: width .2s, left .2s ease-out, opacity .2s;
}
&:not(.short) {
.scroll {
display: none;
}
}
.scroll {
line-height: @height-tabs;
min-width: 20px;
text-align: center;
z-index: 1;
&.left{
box-shadow: 5px 0 20px 5px rgba(208, 221, 182, .8)
}
&.right{
box-shadow: -5px 0 20px 5px rgba(208, 221, 182, .8)
}
}
}
.box-controls {
height: @height-controls;
padding: 10px 0;
display: flex;
//background-color: #F2CBBF;
.panel {
display: table;
height: 100%;
}
//width: 100%;
}
.box-panels {
.panel:not(.active) {
display: none;
}
}
//padding: 10px 0; //padding: 10px 0;
background-color: @gray-light;
.box-inner-shadow(0 -1px 0 @gray-dark);
.toolbar-group, .group {
display: table-cell;
vertical-align: top;
white-space: nowrap;
padding-left: 12px;
&:last-child {
padding-right: 12px;
}
}
.group {
//background-color: #a9f261;
vertical-align: middle;
}
.toolbar-row, .elset {
height: 20px;
font-size: 0;
&:not(:first-child) {
margin-top: 6px;
}
}
.elset {
//background-color: #f2f254;
}
.separator {
margin-left: 12px;
&.long {
height: 46px;
}
&.short {
height: 20px;
}
}
.btn-slot {
// background-color: red;
display: inline-block;
width: 20px;
height: 20px;
&:not(:first-child) {
margin-left: 1px;
}
&.split {
width: 29px;
}
&.text {
width: auto;
}
&.border {
border: 1px solid @gray;
.border-radius(1px);
width: 22px;
height: 22px;
}
&.x-huge {
height: 45px;
}
}
&.masked { &.masked {
button.disabled .icon:not(.no-mask) { button.disabled .icon:not(.no-mask) {
background-position-x: 0px !important; background-position-x: 0px !important;