Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 207 | espaco | 1 | body { |
| 2 | .ui-tabs { |
||
| 3 | padding: 0; |
||
| 4 | position: static; |
||
| 5 | |||
| 6 | .ui-tabs-nav { |
||
| 7 | margin: 0; |
||
| 8 | padding: 0; |
||
| 9 | background: $tabsNavBg; |
||
| 10 | @include flex(); |
||
| 11 | |||
| 12 | li { |
||
| 13 | &.ui-tabs-header { |
||
| 14 | list-style: none; |
||
| 15 | white-space: nowrap; |
||
| 16 | display: inline-block; |
||
| 17 | vertical-align: top; |
||
| 18 | float: none; |
||
| 19 | padding: $tabsHeaderPadding; |
||
| 20 | background: $tabsHeaderBg; |
||
| 21 | color: $tabsHeaderTextColor; |
||
| 22 | margin: 0; |
||
| 23 | cursor: pointer; |
||
| 24 | @include flex(); |
||
| 25 | @include flex-align-center(); |
||
| 26 | transition: $transition; |
||
| 27 | |||
| 28 | a { |
||
| 29 | color: $tabsHeaderTextColor; |
||
| 30 | padding: 0; |
||
| 31 | font-weight: $tabsHeaderFontWeight; |
||
| 32 | display: block; |
||
| 33 | line-height: 1; |
||
| 34 | transition: $transition; |
||
| 35 | } |
||
| 36 | |||
| 37 | .ui-icon { |
||
| 38 | position: static; |
||
| 39 | |||
| 40 | &.ui-icon-close { |
||
| 41 | margin: 0; |
||
| 42 | float: none; |
||
| 43 | @include icon_override("\e90b"); |
||
| 44 | margin-left: $inlineSpacing; |
||
| 45 | } |
||
| 46 | } |
||
| 47 | |||
| 48 | &.ui-state-hover { |
||
| 49 | background: $tabsHeaderHoverBg; |
||
| 50 | |||
| 51 | a { |
||
| 52 | color: $tabsHeaderTextHoverColor; |
||
| 53 | } |
||
| 54 | |||
| 55 | .ui-icon { |
||
| 56 | color: $tabsHeaderTextHoverColor; |
||
| 57 | } |
||
| 58 | } |
||
| 59 | |||
| 60 | &.ui-state-active { |
||
| 61 | background: $tabsHeaderActiveBg; |
||
| 62 | |||
| 63 | a { |
||
| 64 | color: $tabsHeaderTextActiveColor; |
||
| 65 | } |
||
| 66 | |||
| 67 | .ui-icon { |
||
| 68 | color: $tabsHeaderTextActiveColor; |
||
| 69 | } |
||
| 70 | } |
||
| 71 | |||
| 72 | &.ui-tabs-outline { |
||
| 73 | @include focused(); |
||
| 74 | } |
||
| 75 | } |
||
| 76 | |||
| 77 | &.ui-tabs-actions { |
||
| 78 | order: 1; |
||
| 79 | margin-left: auto; |
||
| 80 | } |
||
| 81 | } |
||
| 82 | } |
||
| 83 | |||
| 84 | .ui-tabs-panels { |
||
| 85 | border: $tabsContentBorder; |
||
| 86 | background: $tabsContentBg; |
||
| 87 | color: $tabsContentTextColor; |
||
| 88 | padding: 0; |
||
| 89 | margin: 0; |
||
| 90 | position: static; |
||
| 91 | @include border-radius-bottom($borderRadius); |
||
| 92 | |||
| 93 | .ui-tabs-panel { |
||
| 94 | padding: $tabsContentPadding; |
||
| 95 | } |
||
| 96 | } |
||
| 97 | |||
| 98 | &.ui-tabs-top { |
||
| 99 | > .ui-tabs-nav { |
||
| 100 | margin: 0; |
||
| 101 | padding: 0; |
||
| 102 | position: relative; |
||
| 103 | @include flex(); |
||
| 104 | @include flex-wrap(wrap); |
||
| 105 | |||
| 106 | &:before { |
||
| 107 | content: ""; |
||
| 108 | position: absolute; |
||
| 109 | display: block; |
||
| 110 | border-bottom: $tabsNavBorder; |
||
| 111 | left: 0; |
||
| 112 | bottom: 0; |
||
| 113 | width: 100%; |
||
| 114 | } |
||
| 115 | |||
| 116 | li.ui-tabs-header { |
||
| 117 | top: 0; |
||
| 118 | border-bottom: $tabsNavBorder; |
||
| 119 | |||
| 120 | &.ui-state-hover { |
||
| 121 | border-color: $tabsHeaderHoverBorderColor; |
||
| 122 | } |
||
| 123 | |||
| 124 | &.ui-state-active { |
||
| 125 | border-color: $tabsHeaderActiveBorderColor; |
||
| 126 | } |
||
| 127 | } |
||
| 128 | } |
||
| 129 | |||
| 130 | > .ui-tabs-panels { |
||
| 131 | border-width: 1px 0 0 0; |
||
| 132 | } |
||
| 133 | } |
||
| 134 | |||
| 135 | &.ui-tabs-bottom { |
||
| 136 | > .ui-tabs-nav { |
||
| 137 | margin: 0; |
||
| 138 | padding: 0; |
||
| 139 | position: relative; |
||
| 140 | @include flex(); |
||
| 141 | @include flex-wrap(wrap); |
||
| 142 | |||
| 143 | &:before { |
||
| 144 | content: ""; |
||
| 145 | position: absolute; |
||
| 146 | display: block; |
||
| 147 | border-top: $tabsNavBorder; |
||
| 148 | left: 0; |
||
| 149 | top: 0; |
||
| 150 | width: 100%; |
||
| 151 | } |
||
| 152 | |||
| 153 | li.ui-tabs-header { |
||
| 154 | top: 0; |
||
| 155 | border-top: $tabsNavBorder; |
||
| 156 | |||
| 157 | &.ui-state-hover { |
||
| 158 | border-color: $tabsHeaderHoverBorderColor; |
||
| 159 | } |
||
| 160 | |||
| 161 | &.ui-state-active { |
||
| 162 | border-color: $tabsHeaderActiveBorderColor; |
||
| 163 | } |
||
| 164 | } |
||
| 165 | } |
||
| 166 | |||
| 167 | > .ui-tabs-panels { |
||
| 168 | border-width: 1px 0 0 0; |
||
| 169 | } |
||
| 170 | } |
||
| 171 | |||
| 172 | &.ui-tabs-left, &.ui-tabs-right { |
||
| 173 | > .ui-tabs-nav { |
||
| 174 | width: 25%; |
||
| 175 | margin: 0; |
||
| 176 | padding: 0; |
||
| 177 | height: auto; |
||
| 178 | @include flex-direction-column(); |
||
| 179 | |||
| 180 | li.ui-tabs-header { |
||
| 181 | width: 100%; |
||
| 182 | } |
||
| 183 | } |
||
| 184 | |||
| 185 | > .ui-tabs-panels { |
||
| 186 | width: 75%; |
||
| 187 | } |
||
| 188 | } |
||
| 189 | |||
| 190 | &.ui-tabs-right { |
||
| 191 | > .ui-tabs-nav { |
||
| 192 | margin: 0; |
||
| 193 | padding: 0; |
||
| 194 | border-left: $tabsNavBorder; |
||
| 195 | |||
| 196 | li.ui-tabs-header { |
||
| 197 | top: 0; |
||
| 198 | border-left: $tabsNavBorder; |
||
| 199 | left: -1 * $tabsNavBorderWidth; |
||
| 200 | |||
| 201 | &.ui-state-hover { |
||
| 202 | border-color: $tabsHeaderHoverBorderColor; |
||
| 203 | } |
||
| 204 | |||
| 205 | &.ui-state-active { |
||
| 206 | border-color: $tabsHeaderActiveBorderColor; |
||
| 207 | } |
||
| 208 | } |
||
| 209 | } |
||
| 210 | |||
| 211 | > .ui-tabs-panels { |
||
| 212 | border-width: 1px 0 0 0; |
||
| 213 | } |
||
| 214 | } |
||
| 215 | |||
| 216 | &.ui-tabs-left { |
||
| 217 | > .ui-tabs-nav { |
||
| 218 | margin: 0; |
||
| 219 | padding: 0; |
||
| 220 | right: -1 * $tabsNavBorderWidth; |
||
| 221 | |||
| 222 | li.ui-tabs-header { |
||
| 223 | top: 0; |
||
| 224 | border-right: $tabsNavBorder; |
||
| 225 | margin-right: -1 * $tabsNavBorderWidth; |
||
| 226 | |||
| 227 | &.ui-state-hover { |
||
| 228 | border-color: $tabsHeaderHoverBorderColor; |
||
| 229 | } |
||
| 230 | |||
| 231 | &.ui-state-active { |
||
| 232 | border-color: $tabsHeaderActiveBorderColor; |
||
| 233 | } |
||
| 234 | } |
||
| 235 | } |
||
| 236 | |||
| 237 | > .ui-tabs-panels { |
||
| 238 | border-width: 1px 0 0 0; |
||
| 239 | } |
||
| 240 | } |
||
| 241 | |||
| 242 | .ui-tabs-navscroller { |
||
| 243 | position: relative; |
||
| 244 | |||
| 245 | .ui-tabs-navscroller-btn { |
||
| 246 | border: 0 none; |
||
| 247 | background: $tabsScrollerButtonBg; |
||
| 248 | color: $tabsScrollerButtonIconColor; |
||
| 249 | outline: 0 none; |
||
| 250 | z-index: 1; |
||
| 251 | @include flex(); |
||
| 252 | @include flex-align-center(); |
||
| 253 | transition: $transition; |
||
| 254 | |||
| 255 | &.ui-tabs-navscroller-btn-left { |
||
| 256 | left: 0; |
||
| 257 | height: 100%; |
||
| 258 | |||
| 259 | .ui-icon { |
||
| 260 | margin: 0; |
||
| 261 | @include icon_override("\e900"); |
||
| 262 | } |
||
| 263 | } |
||
| 264 | |||
| 265 | &.ui-tabs-navscroller-btn-right { |
||
| 266 | right: 0; |
||
| 267 | height: 100%; |
||
| 268 | |||
| 269 | .ui-icon { |
||
| 270 | margin: 0; |
||
| 271 | @include icon_override("\e901"); |
||
| 272 | } |
||
| 273 | } |
||
| 274 | |||
| 275 | &.ui-state-hover { |
||
| 276 | background: $tabsScrollerButtonHoverBg; |
||
| 277 | color: $tabsScrollerButtonIconHoverColor; |
||
| 278 | } |
||
| 279 | } |
||
| 280 | } |
||
| 281 | } |
||
| 282 | } |