www/include/styles/tabcontrol.css

Code
Comments
Other
Rev Date Author Line
7604 25 Feb 19 nicklas 1 @charset "UTF-8";
7604 25 Feb 19 nicklas 2 /* $Id$
7604 25 Feb 19 nicklas 3   ------------------------------------------------------------------
7604 25 Feb 19 nicklas 4   Copyright (C) 2005 Nicklas Nordborg
7604 25 Feb 19 nicklas 5   Copyright (C) 2006 Jari Häkkinen, Nicklas Nordborg
7604 25 Feb 19 nicklas 6
7604 25 Feb 19 nicklas 7   This file is part of BASE - BioArray Software Environment.
7604 25 Feb 19 nicklas 8   Available at http://base.thep.lu.se/
7604 25 Feb 19 nicklas 9
7604 25 Feb 19 nicklas 10   BASE is free software; you can redistribute it and/or
7604 25 Feb 19 nicklas 11   modify it under the terms of the GNU General Public License
7604 25 Feb 19 nicklas 12   as published by the Free Software Foundation; either version 3
7604 25 Feb 19 nicklas 13   of the License, or (at your option) any later version.
7604 25 Feb 19 nicklas 14
7604 25 Feb 19 nicklas 15   BASE is distributed in the hope that it will be useful,
7604 25 Feb 19 nicklas 16   but WITHOUT ANY WARRANTY; without even the implied warranty of
7604 25 Feb 19 nicklas 17   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
7604 25 Feb 19 nicklas 18   GNU General Public License for more details.
7604 25 Feb 19 nicklas 19
7604 25 Feb 19 nicklas 20   You should have received a copy of the GNU General Public License
7604 25 Feb 19 nicklas 21   along with BASE. If not, see <http://www.gnu.org/licenses/>.
7604 25 Feb 19 nicklas 22   ------------------------------------------------------------------
7604 25 Feb 19 nicklas 23
7604 25 Feb 19 nicklas 24   Stylesheet used by the TabControl taglib. Used on all pages with a TabControl.
7604 25 Feb 19 nicklas 25
7604 25 Feb 19 nicklas 26   @author Nicklas
7604 25 Feb 19 nicklas 27   @version 2.0
7604 25 Feb 19 nicklas 28 */
7604 25 Feb 19 nicklas 29
7604 25 Feb 19 nicklas 30 /* Main tab control */
7604 25 Feb 19 nicklas 31 .tabcontrol
7604 25 Feb 19 nicklas 32 {}
7604 25 Feb 19 nicklas 33
7604 25 Feb 19 nicklas 34 /* Main content area */
7604 25 Feb 19 nicklas 35 .tabcontrol .tabcontents
7604 25 Feb 19 nicklas 36 {}
7604 25 Feb 19 nicklas 37
7604 25 Feb 19 nicklas 38 /* Each tab should fill up the main content area */
7604 25 Feb 19 nicklas 39 .tabcontrol .tabcontents > div
7604 25 Feb 19 nicklas 40 {
7604 25 Feb 19 nicklas 41   height: 100%;
7604 25 Feb 19 nicklas 42 }
7604 25 Feb 19 nicklas 43
7604 25 Feb 19 nicklas 44 /* Tabs */
7604 25 Feb 19 nicklas 45 .tabcontrol table.tabscontainer, .tabcontrol .tabs > table
7604 25 Feb 19 nicklas 46 {
7604 25 Feb 19 nicklas 47   border-collapse: separate;
7604 25 Feb 19 nicklas 48 }
7604 25 Feb 19 nicklas 49
7604 25 Feb 19 nicklas 50 .tabcontrol .tab
7604 25 Feb 19 nicklas 51 {
7604 25 Feb 19 nicklas 52   border-width: 1px;
7604 25 Feb 19 nicklas 53   padding: 2px 6px 2px 4px;
7604 25 Feb 19 nicklas 54 }
7604 25 Feb 19 nicklas 55
7604 25 Feb 19 nicklas 56 .tabcontrol .tab.disabled
7604 25 Feb 19 nicklas 57 {
7604 25 Feb 19 nicklas 58   pointer-events: none;
7604 25 Feb 19 nicklas 59   cursor: default;
7604 25 Feb 19 nicklas 60 }
7604 25 Feb 19 nicklas 61
7604 25 Feb 19 nicklas 62 /* Put blue-ish border around tab when hovering or tab is focused */
7604 25 Feb 19 nicklas 63 .tabcontrol .tab:hover, .tabcontrol .tab:focus
7604 25 Feb 19 nicklas 64 {
7604 25 Feb 19 nicklas 65   /* Decrese padding to avoid movement */
7604 25 Feb 19 nicklas 66   border-width: 2px;
7604 25 Feb 19 nicklas 67   padding: 1px 5px 1px 3px;
7604 25 Feb 19 nicklas 68   outline: 0;
7604 25 Feb 19 nicklas 69 }
7604 25 Feb 19 nicklas 70
7604 25 Feb 19 nicklas 71 .tabcontrol .tab.active
7604 25 Feb 19 nicklas 72 {
7604 25 Feb 19 nicklas 73   font-weight: bold;
7604 25 Feb 19 nicklas 74 }
7604 25 Feb 19 nicklas 75
7604 25 Feb 19 nicklas 76 /* White background color when the tab is active */
7604 25 Feb 19 nicklas 77 .tabcontrol .tab.active.white
7604 25 Feb 19 nicklas 78 {
7604 25 Feb 19 nicklas 79   background-color: #FFFFFF;
7604 25 Feb 19 nicklas 80 }
7604 25 Feb 19 nicklas 81
7604 25 Feb 19 nicklas 82 /* Creates a small space between the tabs */
7604 25 Feb 19 nicklas 83 .tabcontrol .tabspace
7604 25 Feb 19 nicklas 84 {
7604 25 Feb 19 nicklas 85   width: 2px;
7604 25 Feb 19 nicklas 86   max-width: 2px;
7604 25 Feb 19 nicklas 87   min-width: 2px;
7604 25 Feb 19 nicklas 88 }
7604 25 Feb 19 nicklas 89
7604 25 Feb 19 nicklas 90 /* Specific for tabcontrol with tabs at bottom */
7604 25 Feb 19 nicklas 91 .tabsatbottom .tabs
7604 25 Feb 19 nicklas 92 {
7604 25 Feb 19 nicklas 93   vertical-align: top;
7604 25 Feb 19 nicklas 94 }
7604 25 Feb 19 nicklas 95
7604 25 Feb 19 nicklas 96 .tabsatbottom .tab 
7604 25 Feb 19 nicklas 97 {
7604 25 Feb 19 nicklas 98   /* Rounded corners at bottom */
7604 25 Feb 19 nicklas 99   border-radius: 0 0 5px 5px;
7604 25 Feb 19 nicklas 100 }
7604 25 Feb 19 nicklas 101
7604 25 Feb 19 nicklas 102 /* Hide top border from active tab */
7604 25 Feb 19 nicklas 103 .tabsatbottom .tab.active
7604 25 Feb 19 nicklas 104 {
7604 25 Feb 19 nicklas 105   border-top-color: transparent;
7604 25 Feb 19 nicklas 106   border-bottom-width: 2px;
7604 25 Feb 19 nicklas 107   padding-bottom: 1px;
7604 25 Feb 19 nicklas 108   border-bottom-color: #2288AA;
7604 25 Feb 19 nicklas 109 }
7604 25 Feb 19 nicklas 110
7604 25 Feb 19 nicklas 111 /* Revert to default for the active tab */
7604 25 Feb 19 nicklas 112 .tabsatbottom .tab.active:hover, .tabsatbottom .tab.active:focus
7604 25 Feb 19 nicklas 113 {
7604 25 Feb 19 nicklas 114   cursor: auto;
7604 25 Feb 19 nicklas 115   border-width: 1px 1px 2px 1px;
7604 25 Feb 19 nicklas 116   padding: 2px 6px 1px 4px;
7604 25 Feb 19 nicklas 117 }
7604 25 Feb 19 nicklas 118
7604 25 Feb 19 nicklas 119 /* Add top border on tabspace */
7604 25 Feb 19 nicklas 120 .tabsatbottom .tabspace
7604 25 Feb 19 nicklas 121 {
7604 25 Feb 19 nicklas 122   border-top-width: 1px;
7604 25 Feb 19 nicklas 123 }
7604 25 Feb 19 nicklas 124
7604 25 Feb 19 nicklas 125 .tabsatbottom .tabfillbefore
7604 25 Feb 19 nicklas 126 {
7604 25 Feb 19 nicklas 127   width: 5px;
7604 25 Feb 19 nicklas 128   min-width: 5px;
7604 25 Feb 19 nicklas 129   max-width: 5px;
7604 25 Feb 19 nicklas 130   border-top-width: 1px;
7604 25 Feb 19 nicklas 131 }
7604 25 Feb 19 nicklas 132
7604 25 Feb 19 nicklas 133 .tabsatbottom .tabfillafter
7604 25 Feb 19 nicklas 134 {
7604 25 Feb 19 nicklas 135   width: 99%;
7604 25 Feb 19 nicklas 136   border-top-width: 1px;
7604 25 Feb 19 nicklas 137 }
7604 25 Feb 19 nicklas 138
7604 25 Feb 19 nicklas 139
7604 25 Feb 19 nicklas 140 /* Specific for tabcontrol with tabs on top */
7604 25 Feb 19 nicklas 141 .tabsattop .tabs
7604 25 Feb 19 nicklas 142 {
7604 25 Feb 19 nicklas 143   vertical-align: bottom;
7604 25 Feb 19 nicklas 144 }
7604 25 Feb 19 nicklas 145
7604 25 Feb 19 nicklas 146 .tabsattop .tab 
7604 25 Feb 19 nicklas 147 {
7604 25 Feb 19 nicklas 148   /* Rounded corners at bottom */
7604 25 Feb 19 nicklas 149   border-radius: 5px 5px 0px 0px;
7604 25 Feb 19 nicklas 150 }
7604 25 Feb 19 nicklas 151
7604 25 Feb 19 nicklas 152 /* Hide bottom border from active tab */
7604 25 Feb 19 nicklas 153 .tabsattop .tab.active
7604 25 Feb 19 nicklas 154 {
7604 25 Feb 19 nicklas 155   border-bottom-color: transparent;
7604 25 Feb 19 nicklas 156   padding-top: 1px;
7604 25 Feb 19 nicklas 157   border-top-width: 2px;
7604 25 Feb 19 nicklas 158   border-top-color: #2288AA;
7604 25 Feb 19 nicklas 159 }
7604 25 Feb 19 nicklas 160
7604 25 Feb 19 nicklas 161 /* Revert to default for the active tab */
7604 25 Feb 19 nicklas 162 .tabsattop .tab.active:hover, .tabsattop .tab.active:focus
7604 25 Feb 19 nicklas 163 {
7604 25 Feb 19 nicklas 164   cursor: auto;
7604 25 Feb 19 nicklas 165   border-width: 2px 1px 1px 1px;
7604 25 Feb 19 nicklas 166   padding: 1px 6px 2px 4px;
7604 25 Feb 19 nicklas 167 }
7604 25 Feb 19 nicklas 168
7604 25 Feb 19 nicklas 169 /* Add bottom border on tabspace */
7604 25 Feb 19 nicklas 170 .tabsattop .tabspace
7604 25 Feb 19 nicklas 171 {
7604 25 Feb 19 nicklas 172   border-bottom-width: 1px;
7604 25 Feb 19 nicklas 173 }
7604 25 Feb 19 nicklas 174
7604 25 Feb 19 nicklas 175 .tabsattop .tabfillbefore
7604 25 Feb 19 nicklas 176 {
7604 25 Feb 19 nicklas 177   width: 5px;
7604 25 Feb 19 nicklas 178   min-width: 5px;
7604 25 Feb 19 nicklas 179   max-width: 5px;
7604 25 Feb 19 nicklas 180   border-bottom-width: 1px;
7604 25 Feb 19 nicklas 181 }
7604 25 Feb 19 nicklas 182
7604 25 Feb 19 nicklas 183 .tabsattop .tabfillafter
7604 25 Feb 19 nicklas 184 {
7604 25 Feb 19 nicklas 185   width: 99%;
7604 25 Feb 19 nicklas 186   border-bottom-width: 1px;
7604 25 Feb 19 nicklas 187 }
7604 25 Feb 19 nicklas 188
7604 25 Feb 19 nicklas 189
7604 25 Feb 19 nicklas 190 /* Use all but the bottom 2em for tab contents */
7604 25 Feb 19 nicklas 191 .dialogtabcontrol.tabsatbottom .tabcontents 
7604 25 Feb 19 nicklas 192 {
7604 25 Feb 19 nicklas 193   position: absolute;
7604 25 Feb 19 nicklas 194   top: 0;
7604 25 Feb 19 nicklas 195   left: 0;
7604 25 Feb 19 nicklas 196   right: 0;
7604 25 Feb 19 nicklas 197   bottom: 2em;
7604 25 Feb 19 nicklas 198   overflow: auto;
7604 25 Feb 19 nicklas 199 }
7604 25 Feb 19 nicklas 200
7604 25 Feb 19 nicklas 201 .dialogtabcontrol.tabsatbottom .tabscontainer
7604 25 Feb 19 nicklas 202 {
7604 25 Feb 19 nicklas 203   position: absolute;
7604 25 Feb 19 nicklas 204   bottom: 0;
7604 25 Feb 19 nicklas 205   height: 2em;
7604 25 Feb 19 nicklas 206 }
7604 25 Feb 19 nicklas 207
7604 25 Feb 19 nicklas 208 /* Use all but the top 2em for tab contents */
7604 25 Feb 19 nicklas 209 .dialogtabcontrol.tabsattop .tabcontents 
7604 25 Feb 19 nicklas 210 {
7604 25 Feb 19 nicklas 211   position: absolute;
7604 25 Feb 19 nicklas 212   top: 2em;
7604 25 Feb 19 nicklas 213   left: 0;
7604 25 Feb 19 nicklas 214   right: 0;
7604 25 Feb 19 nicklas 215   bottom: 0;
7604 25 Feb 19 nicklas 216   overflow: auto;
7604 25 Feb 19 nicklas 217 }
7604 25 Feb 19 nicklas 218
7604 25 Feb 19 nicklas 219 .dialogtabcontrol.tabsattop .tabscontainer
7604 25 Feb 19 nicklas 220 {
7604 25 Feb 19 nicklas 221   position: absolute;
7604 25 Feb 19 nicklas 222   top: 0;
7604 25 Feb 19 nicklas 223   height: 2em;
7604 25 Feb 19 nicklas 224 }
7604 25 Feb 19 nicklas 225