Commit 9e24b5b8 authored by Felix Kopp's avatar Felix Kopp Committed by Frank Nägler
Browse files

[BUGFIX] FormEngine & DynTab styling and contrast

Fixes DynTabs where background and tab body content
lack on necessary contrast - especially FormEngine.

Resolves: #62002
Releases: master
Change-Id: Ib762306c0d825a77cdbb4255f51de1c30d7d6e76
Reviewed-on: http://review.typo3.org/34822

Reviewed-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: default avatarFrank Nägler <typo3@naegler.net>
Tested-by: default avatarFrank Nägler <typo3@naegler.net>
parent b917202b
......@@ -16,7 +16,28 @@ Tab menu
- - - - - - - - - - - - - - - - - - - - - */
.nav-tabs {
background-color: @gray-light;
background-color: darken(@nav-tabs-active-link-bg, 5%);
> li {
> a {
margin-right: 3px;
&:hover {
background: @nav-tabs-link-hover-bg;
}
}
&.active > a {
&,
&:focus {
background: @nav-tabs-active-link-bg;
}
&:hover {
background: @nav-tabs-active-link-hover-bg;
}
}
}
}
......@@ -24,9 +45,10 @@ div.typo3-dyntabmenu-divs {
padding: floor(@line-height-computed * 1.5) @line-height-computed;
margin-bottom: 1em;
border-right: 1px solid @gray-light;
border-bottom: 1px solid @gray-light;
border-left: 1px solid @gray-light;
background: @nav-tabs-active-link-bg;
border-right: 1px solid @nav-tabs-border-color;
border-bottom: 1px solid @nav-tabs-border-color;
border-left: 1px solid @nav-tabs-border-color;
p.c-descr {
background: #e7dba8;
......@@ -83,4 +105,4 @@ div.typo3-dyntabmenu-divs-foldout div.disabled:hover {
.c-tablayer {
margin: 0;
padding: 0;
}
\ No newline at end of file
}
......@@ -39,7 +39,7 @@ TCEforms
background: none;
&.palette-header {
border-top: 1px solid @gray-light;
border-top: 1px solid @nav-tabs-border-color;
padding: ceil(@line-height-computed * 1.5) @line-height-computed floor(@line-height-computed * 0.25) @line-height-computed;
h3 {
......
......@@ -414,23 +414,28 @@
@nav-open-link-hover-color: #fff;
//== Tabs
@nav-tabs-border-color: @gray-light;
@nav-tabs-border-color: #ccc;
@nav-tabs-link-hover-bg: darken(@nav-tabs-active-link-bg, 10%);
@nav-tabs-link-hover-border-color: @gray-light;
@nav-tabs-active-link-bg: #fafafa;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: #000;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
@nav-tabs-active-link-hover-border-color: #ccc;
@nav-tabs-active-link-hover-bg: darken(@nav-tabs-active-link-bg, 5%);
@nav-tabs-justified-link-border-color: #ccc;
@nav-tabs-justified-active-link-border-color: @nav-tabs-border-color;
//== Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
//== Pagination
//
//##
......
......@@ -2800,7 +2800,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
max-width: none;
}
.nav-tabs {
border-bottom: 1px solid #d7d7d7;
border-bottom: 1px solid #cccccc;
}
.nav-tabs > li {
float: left;
......@@ -2813,14 +2813,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-radius: 2px 2px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #d7d7d7 #d7d7d7 #d7d7d7;
border-color: #d7d7d7 #d7d7d7 #cccccc;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #000000;
background-color: #ffffff;
border: 1px solid #dddddd;
background-color: #ededed;
border: 1px solid #cccccc;
border-bottom-color: transparent;
cursor: default;
}
......@@ -2855,17 +2855,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border: 1px solid #dddddd;
border: 1px solid #cccccc;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li > a {
border-bottom: 1px solid #dddddd;
border-bottom: 1px solid #cccccc;
border-radius: 2px 2px 0 0;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border-bottom-color: #ffffff;
border-bottom-color: #cccccc;
}
}
.nav-pills > li {
......@@ -2923,17 +2923,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
border: 1px solid #dddddd;
border: 1px solid #cccccc;
}
@media (min-width: 768px) {
.nav-tabs-justified > li > a {
border-bottom: 1px solid #dddddd;
border-bottom: 1px solid #cccccc;
border-radius: 2px 2px 0 0;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
border-bottom-color: #ffffff;
border-bottom-color: #cccccc;
}
}
.tab-content > .tab-pane {
......@@ -7863,14 +7863,28 @@ span.spinner {
Tab menu
- - - - - - - - - - - - - - - - - - - - - */
.nav-tabs {
background-color: #d7d7d7;
background-color: #ededed;
}
.nav-tabs > li > a {
margin-right: 3px;
}
.nav-tabs > li > a:hover {
background: #e1e1e1;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus {
background: #fafafa;
}
.nav-tabs > li.active > a:hover {
background: #ededed;
}
div.typo3-dyntabmenu-divs {
padding: 27px 18px;
margin-bottom: 1em;
border-right: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7;
border-left: 1px solid #d7d7d7;
background: #fafafa;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
}
div.typo3-dyntabmenu-divs p.c-descr {
background: #e7dba8;
......@@ -9245,7 +9259,7 @@ TCEforms
background: none;
}
.typo3-TCEforms .c-tablayer > table > tbody > tr > td.palette-header {
border-top: 1px solid #d7d7d7;
border-top: 1px solid #cccccc;
padding: 27px 18px 4px 18px;
}
.typo3-TCEforms .c-tablayer > table > tbody > tr > td.palette-header h3 {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment