mirror_php/winter
1
0
Fork 0
mirror of https://github.com/wintercms/winter.git synced 2024-06-28 05:33:29 +02:00
Code Issues Projects Releases Wiki Activity

New tabs design

Browse Source
This commit is contained in:
alekseybobkov 2014-07-15 01:23:10 +11:00
parent f7f81822ec
commit e8c6d25038
5 changed files with 230 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
modules/backend/assets/css/october.css
View File

@ -11935,11 +11935,27 @@ div.popover-overlay {
padding-left: 20px;
padding-right: 20px;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs {
margin-left: -8px;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li {
margin-left: -10px;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close {
top: 9px;
right: -3px;
left: auto;
z-index: 110;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close i,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close i {
top: 4px;
right: 1px;
color: #e39664 !important;
color: rgba(255, 255, 255, 0.3) !important;
font: 14px bold "Helvetica Neue", Helvetica, Arial, sans-seri8;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close i:hover,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close i:hover {
@ -11949,18 +11965,104 @@ div.popover-overlay {
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a {
border-bottom: none;
background: transparent;
padding: 11px 15px 12px 5px;
font-size: 14px;
color: #e39664;
padding: 6px 0 0 0;
overflow: visible;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title {
position: relative;
display: inline-block;
padding: 8px 5px 9px 5px;
font-size: 13px;
z-index: 100;
background-color: #b9530f;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after {
content: ' ';
position: absolute;
background: transparent url(../images/tab-shape.svg) no-repeat left -80px;
width: 20px;
display: block;
height: 30px;
top: 0;
z-index: 100;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before {
left: -20px;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after {
right: -20px;
background-position: -80px -80px;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a:before,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a:before {
z-index: 110;
position: relative;
margin-right: -12px;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a[class*=icon] > span.title,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a[class*=icon] > span.title {
padding-left: 18px;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a {
z-index: 107;
color: #ffffff;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active span.tab-close i,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active span.tab-close i {
color: #ffffff;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title {
background-color: #e67e22;
z-index: 105;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title:before,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title:before {
background-position: left -40px;
z-index: 107;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title:after,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title:after {
background-position: -80px -40px;
z-index: 107;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li[data-modified] span.tab-close i,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li[data-modified] span.tab-close i {
top: 4px;
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li[data-modified] span.tab-close i:before,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li[data-modified] span.tab-close i:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
content: "\f111";
font-size: 9px;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li:first-child,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li:first-child {
margin-left: 0;
}
.fancy-layout .control-tabs.master[data-closable] > div > div.tabs-container > ul.nav-tabs > li a > span.title,
.fancy-layout.control-tabs.master[data-closable] > div > div.tabs-container > ul.nav-tabs > li a > span.title {
padding-right: 10px;
}
.fancy-layout .control-tabs.master.has-tabs:before,
.fancy-layout.control-tabs.master.has-tabs:before,
.fancy-layout .control-tabs.master.has-tabs:after,

16
modules/backend/assets/images/tab-shape.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="100px" height="110px" viewBox="0 0 100 110" enable-background="new 0 0 100 110" xml:space="preserve">
<defs>
</defs>
<path d="M0,30C5,30,10,0,20,0c5,0,60,0,65,0c10,0,10,30,15,30"/>
<path fill="#E67E22" d="M0,70c5,0,10-30,20-30c0,10,0,15,0,15v15"/>
<path fill="#E67E22" d="M100,70c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>
<path fill="#B9530F" d="M0,110c5,0,10-30,20-30c0,10,0,15,0,15v15"/>
<path fill="#B9530F" d="M100,110c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 909 B

7
modules/backend/assets/js/october.tab.js
View File

@ -139,8 +139,13 @@
if (!$a.attr('title'))
$a.attr('title', $a.text())
var html = $a.html()
$a.html('')
$a.append($('<span class="title"></span>').html(html))
var pane = $('> .tab-pane', this.$pagesContainer).eq(tabIndex).attr('id', targetId)
$(li).append($('<span class="tab-close"><i class="icon-times"></i></span>').click(function(){
$(li).append($('<span class="tab-close"><i>&times;</i></span>').click(function(){
$(this).trigger('close.oc.tab')
return false
}))

110
modules/backend/assets/less/controls/fancylayout.less
View File

@ -52,26 +52,122 @@
padding-right: 20px;
> ul.nav-tabs {
margin-left: -8px;
> li {
span.tab-close i {
top: 4px;
right: 1px;
color: @color-fancy-master-tabs-inactive-text!important;
margin-left: -10px;
&:hover {color: @color-fancy-master-tabs-active-text!important;}
span.tab-close{
top: 9px;
right: -3px;
left: auto;
z-index: 110;
i {
top: 4px;
right: 1px;
color: rgba(255, 255, 255, 0.3)!important;
font: 14px bold "Helvetica Neue", Helvetica, Arial, sans-seri8;
&:hover {color: @color-fancy-master-tabs-active-text!important;}
}
}
a {
border-bottom: none;
background: transparent;
padding: 11px 15px 12px 5px;
font-size: 14px;
color: @color-fancy-master-tabs-inactive-text;
padding: 6px 0 0 0;
overflow: visible;
> span.title {
position: relative;
display: inline-block;
padding: 8px 5px 9px 5px;
font-size: 13px;
z-index: 100;
background-color: @color-fancy-form-inactive-tab;
&:before, &:after {
content: ' ';
position: absolute;
background: transparent url(../images/tab-shape.svg) no-repeat left -80px;
width: 20px;
display: block;
height: 30px;
top: 0;
z-index: 100;
}
&:before {
left: -20px;
}
&:after {
right: -20px;
background-position: -80px -80px;
}
}
&:before {
z-index: 110;
position: relative;
margin-right: -12px;
}
&[class*=icon] > span.title {
padding-left: 18px;
}
}
&.active {
a {color: @color-fancy-master-tabs-active-text;}
a {
z-index: 107;
color: @color-fancy-master-tabs-active-text;
}
span.tab-close i {color: @color-fancy-master-tabs-active-text;}
a > span.title {
background-color: @color-fancy-form-tabless-fields-bg;
z-index: 105;
&:before {
background-position: left -40px;
z-index: 107;
}
&:after {
background-position: -80px -40px;
z-index: 107;
}
}
}
&[data-modified] {
span.tab-close i {
top: 4px;
.hide-text();
&:before {
.icon(@circle);
font-size: 9px;
}
}
}
&:first-child {
margin-left: 0;
}
}
}
}
&[data-closable] {
> div > div.tabs-container {
> ul.nav-tabs {
> li {
a > span.title {
padding-right: 10px;
}
}
}
}

1
modules/backend/assets/less/core/variables.less
View File

@ -221,6 +221,7 @@
@color-fancy-form-text: #ffffff;
@color-fancy-form-text-selection: #d35400;
@color-fancy-form-placeholder: #f4c69e;
@color-fancy-form-inactive-tab: #b9530f;
@color-popup-header-bg: #d35400;
@color-popup-header-text: #ECF0F1;