summaryrefslogtreecommitdiffstats
path: root/public/css/icinga/tabs.less
diff options
context:
space:
mode:
Diffstat (limited to 'public/css/icinga/tabs.less')
-rw-r--r--public/css/icinga/tabs.less105
1 files changed, 105 insertions, 0 deletions
diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less
new file mode 100644
index 0000000..8103735
--- /dev/null
+++ b/public/css/icinga/tabs.less
@@ -0,0 +1,105 @@
+/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
+
+// Styles for tab navigation of containers
+
+.tabs {
+ background-color: @menu-bg-color;
+ letter-spacing: -0.417em;
+}
+
+.tabs > li {
+ display: inline-block;
+ letter-spacing: normal;
+}
+
+.tabs a {
+ padding: 0 1em;
+ line-height: 2.5em;
+
+ &:focus {
+ outline-offset: -0.5em;
+ }
+}
+
+.tabs > li {
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
+
+ > a {
+ color: @menu-color;
+
+ &:hover {
+ text-decoration: none;
+ background: @tab-hover-bg-color;
+ }
+ }
+
+ &.active > a,
+ > a:focus {
+ background-color: @body-bg-color;
+ color: @text-color;
+ }
+}
+
+.tabs > .dropdown-nav-item > a,
+.tabs > li > .close-container-control,
+.tabs > li > .refresh-container-control {
+ text-align: center;
+ width: 3em;
+}
+
+.tabs > .dropdown-nav-item:hover > a,
+.tabs > .dropdown-nav-item > a:focus,
+.tabs > li > .close-container-control:focus,
+.tabs > li > .close-container-control:hover,
+.tabs > li > .refresh-container-control:focus,
+.tabs > li > .refresh-container-control:hover {
+ background-color: @body-bg-color;
+ color: @text-color;
+ text-decoration: none;
+}
+
+.tabs > .dropdown-nav-item > ul {
+ .box-shadow();
+ .rounded-corners(0 0 0.3em 0.3em);
+
+ background-color: @body-bg-color;
+ border: 1px solid;
+ border-color: @gray-light;
+ border-top: none;
+ margin-left: -1px;
+ min-width: 14em;
+ z-index: 10;
+}
+
+.tabs > .dropdown-nav-item > ul > li:hover > a {
+ background-color: @gray-lighter;
+ text-decoration: none;
+}
+
+// Dropdown tabs after the fourth title should be right-aligned
+.tabs > li:nth-child(n+5).dropdown-nav-item > ul {
+ transform: translate(~"calc(-100% + 3em)"); // -full width + tab width
+ margin-left: 1px;
+}
+
+// TODO(el): Rename display-on-hover and move it to main.less
+.display-on-hover {
+ font-size: @font-size-small;
+ left: -999em;
+ position: relative;
+}
+
+.dropdown-nav-item > ul > li > a:focus > .display-on-hover,
+.dropdown-nav-item > ul > li:hover > a > .display-on-hover {
+ position: static;
+}
+
+.tabs > li > .close-container-control {
+ display: none;
+}
+
+#layout.twocols .tabs > li > .close-container-control {
+ display: block;
+}