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

[component] changed tabs scroll's arrow

Browse source
This commit is contained in:
Maxim Kadushkin 2018-11-16 17:37:25 +03:00
parent 90eaf7de72
commit 89f55c9d93
2 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/main/lib/component/Mixtbar.js
View file

@ -88,7 +88,7 @@ define([
var _template_tabs = var _template_tabs =
'<section class="tabs">' + '<section class="tabs">' +
'<a class="scroll left"><i class="icon">&lt;</i></a>' + '<a class="scroll left"></a>' +
'<ul>' + '<ul>' +
'<% for(var i in items) { %>' + '<% for(var i in items) { %>' +
'<li class="ribtab' + '<li class="ribtab' +
@ -98,7 +98,7 @@ define([
'</li>' + '</li>' +
'<% } %>' + '<% } %>' +
'</ul>' + '</ul>' +
'<a class="scroll right"><i class="icon">&gt;</i></a>' + '<a class="scroll right"></a>' +
'</section>'; '</section>';
this.$layout = $(options.template({ this.$layout = $(options.template({

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

@ -108,20 +108,46 @@
.scroll { .scroll {
line-height: @height-tabs; line-height: @height-tabs;
min-width: 20px; min-width: 20px;
text-align: center;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
color: #fff; position: relative;
display: flex;
align-items: center;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
&:not(:hover) {
&:after {
opacity: .8;
}
}
&.left{ &.left{
box-shadow: 5px 0 20px 5px @tabs-bg-color box-shadow: 5px 0 20px 5px @tabs-bg-color;
&:after {
transform: rotate(135deg);
margin-left: 8px;
}
} }
&.right{ &.right{
box-shadow: -5px 0 20px 5px @tabs-bg-color box-shadow: -5px 0 20px 5px @tabs-bg-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;
} }
} }
} }