diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 150987fe1..47a6ebabc 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -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,
diff --git a/modules/backend/assets/images/tab-shape.svg b/modules/backend/assets/images/tab-shape.svg
new file mode 100644
index 000000000..d90911ca0
--- /dev/null
+++ b/modules/backend/assets/images/tab-shape.svg
@@ -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>
diff --git a/modules/backend/assets/js/october.tab.js b/modules/backend/assets/js/october.tab.js
index 25e6c40dc..4e8dd214b 100644
--- a/modules/backend/assets/js/october.tab.js
+++ b/modules/backend/assets/js/october.tab.js
@@ -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>×</i></span>').click(function(){
$(this).trigger('close.oc.tab')
return false
}))
diff --git a/modules/backend/assets/less/controls/fancylayout.less b/modules/backend/assets/less/controls/fancylayout.less
index 44efc6366..bc9cf08bb 100644
--- a/modules/backend/assets/less/controls/fancylayout.less
+++ b/modules/backend/assets/less/controls/fancylayout.less
@@ -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;
+ }
}
}
}
diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less
index ad765bb43..99e18463c 100644
--- a/modules/backend/assets/less/core/variables.less
+++ b/modules/backend/assets/less/core/variables.less
@@ -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;