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

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

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