From 3afa70c494814809a0537ecc4a8bd785fe86408d Mon Sep 17 00:00:00 2001 From: Thomas Gelf Date: Tue, 25 Mar 2014 08:02:21 +0000 Subject: [PATCH] Improve tabs and dropdown tabs styling --- public/css/icinga/tabs.less | 38 ++++++++++++++++++++++++++++--------- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less index a6780e436..0da29a98f 100644 --- a/public/css/icinga/tabs.less +++ b/public/css/icinga/tabs.less @@ -6,7 +6,7 @@ ul.tabs { } .controls ul.tabs { - margin-top: -3.5em; + margin-top: -3.6em; height: 2.6em; overflow: hidden; } @@ -30,7 +30,7 @@ ul.tabs li a { margin-right: 0.5em; } -ul.tabs li.active a, ul.tabs li.dropdown:hover { +ul.tabs li.active a, ul.tabs li.dropdown:hover, ul.tabs li.dropdown.hover { background-color: white; color: #333; } @@ -46,12 +46,29 @@ ul.tabs li a:hover { ul.dropdown-menu { margin: 0; padding: 0; - background-color: white; + background-color: #555; position: absolute; overflow: hidden; z-index: 1000; border: 1px solid #555; border-top: none; + margin-left: -1px; +} + +/* Dropdown tabs after the fourth title should be right-aligned */ +ul.tabs li:nth-child(n+5) ul.dropdown-menu { + width: 13em; + margin-left: -9em; +} + +ul.dropdown-menu { + -moz-box-shadow: 0.2em 0.2em 0.3em -0.2em #555; + -webkit-box-shadow: 0.2em 0.2em 0.3em -0.2em #555; + box-shadow: 0.2em 0.2em 0.3em -0.2em #555; +} + +ul.dropdown-menu li { + background-color: white; } ul.dropdown-menu li { @@ -72,17 +89,20 @@ ul.tabs ul.dropdown-menu li a:hover { color: #333; } -ul.tabs li.dropdown { - -/* text-align: right; */ -} - ul.tabs li.dropdown:hover a { text-decoration: none; color: #555; } -ul.tabs li.dropdown:hover ul.dropdown-menu { +li.dropdown:hover ul.dropdown-menu, li.dropdown.hover ul.dropdown-menu { display: block; } +ul.tabs img.icon { + height: 16px; + margin-right: 4px; + margin-top: -4px; + vertical-align: middle; + width: 16px; +} +