/*#region Tabs*/ /*#region Tab Content*/ .tab-content { background-color: @snow; padding: 16px 12px; position: relative; .box-shadow(1px 0 10px 1px rgba(0,0,0,.3)); &.no-padding { padding: 0; } &.no-border { border: 0; padding: 12px; } &.radius-bordered { .border-radius(3px); } &.tabs-flat { .box-shadow(none); border-top: 1px solid #e5e5e5; } } /*#endregion Tab Content*/ /*#region Tab*/ .nav-tabs { margin-bottom: 0; margin-left: 0; border: 0; top: 2px; background-color: @ivory; .box-shadow(0 0 4px rgba(0,0,0,.3)); > li { margin-bottom: -2px; > a { &:hover { color: @darkcarbon; background-color: transparent; border-color: transparent; } &:active, &:focus { outline: none !important; } &, &:focus { border-radius: 0 !important; color: @silver; margin-right: -1px; line-height: 12px; position: relative; z-index: 11; } > .badge { padding: 0 4px; line-height: 15px; opacity: .75; height: 16px; min-width: 16px; } .fa, .glyphicon, .typcn, .wi { opacity: .75; } } &:first-child > a { margin-left: 0; border-left: 1px solid @snow; } &.active { > a { &, &:hover, &:focus { color: @darkcarbon; border: 0; border-top: 2px solid @themeprimary; border-bottom-color: transparent; background-color: @snow; z-index: 12; line-height: 16px; margin-top: -2px; box-shadow: 0 -2px 3px 0 rgba(0,0,0,0.15); } > .badge, > [class*="fa-"] { opacity: 1; } } } /*#region Colred Tab*/ &.active { &.tab-white { > a { border-color: @white !important; > .fa, .glyphicon, .typcn, .wi { color: @white; } } } tab-snow { > a { border-color: @snow !important; > .fa, .glyphicon, .typcn, .wi { color: @snow; } } } &.tab-whitesmoke { > a { border-color: @whitesmoke !important; > .fa, .glyphicon, .typcn, .wi { color: @whitesmoke; } } } &.tab-seashell { > a { border-color: @seashell !important; > .fa, .glyphicon, .typcn, .wi { color: @seashell; } } } &.tab-ivory { > a { border-color: @ivory !important; > .fa, .glyphicon, .typcn, .wi { color: @ivory; } } } &.tab-platinum { > a { border-color: @platinum !important; > .fa, .glyphicon, .typcn, .wi { color: @platinum; } } } &.tab-lightgray { > a { border-color: @lightgray !important; > .fa, .glyphicon, .typcn, .wi { color: @lightgray; } } } &.tab-gray { > a { border-color: @gray !important; > .fa, .glyphicon, .typcn, .wi { color: @gray; } } } &.tab-darkgray { > a { border-color: @darkgray !important; > .fa, .glyphicon, .typcn, .wi { color: @darkgray; } } } &.tab-silver { > a { border-color: @silver !important; > .fa, .glyphicon, .typcn, .wi { color: @silver; } } } &.tab-sonic-silver { > a { border-color: @sonic-silver !important; > .fa, .glyphicon, .typcn, .wi { color: @sonic-silver; } } } &.tab-storm-cloud { > a { border-color: @storm-cloud !important; > .fa, .glyphicon, .typcn, .wi { color: @storm-cloud; } } } &.tab-lightcarbon { > a { border-color: @lightcarbon !important; > .fa, .glyphicon, .typcn, .wi { color: @lightcarbon; } } } &.tab-carbon { > a { border-color: @carbon !important; > .fa, .glyphicon, .typcn, .wi { color: @carbon; } } } &.tab-primary { > a { border-color: @primary !important; > .fa, .glyphicon, .typcn, .wi { color: @primary; } } } &.tab-slate-gray { > a { border-color: @slate-gray !important; > .fa, .glyphicon, .typcn, .wi { color: @slate-gray; } } } &.tab-darkcarbon { > a { border-color: @darkcarbon !important; > .fa, .glyphicon, .typcn, .wi { color: @darkcarbon; } } } &.tab-blue { > a { border-color: @blue !important; > .fa, .glyphicon, .typcn, .wi { color: @blue; } } } &.tab-info { > a { border-color: @info !important; > .fa, .glyphicon, .typcn, .wi { color: @info; } } } &.tab-sky { > a { border-color: @sky !important; > .fa, .glyphicon, .typcn, .wi { color: @sky; } } } &.tab-primary { > a { border-color: @primary !important; > .fa, .glyphicon, .typcn, .wi { color: @primary; } } } &.tab-primary { > a { border-color: @primary !important; > .fa, .glyphicon, .typcn, .wi { color: @primary; } } } &.tab-blueberry { > a { border-color: @blueberry !important; > .fa, .glyphicon, .typcn, .wi { color: @blueberry; } } } &.tab-palegreen { > a { border-color: @palegreen !important; > .fa, .glyphicon, .typcn, .wi { color: @palegreen; } } } &.tab-success { > a { border-color: @success !important; > .fa, .glyphicon, .typcn, .wi { color: @success; } } } &.tab-green { > a { border-color: @green !important; > .fa, .glyphicon, .typcn, .wi { color: @green; } } } &.tab-lightyellow { > a { border-color: @lightyellow !important; > .fa, .glyphicon, .typcn, .wi { color: @lightyellow; } } } &.tab-yellow { > a { border-color: @yellow !important; > .fa, .glyphicon, .typcn, .wi { color: @yellow; } } } &.tab-warning { > a { border-color: @warning !important; > .fa, .glyphicon, .typcn, .wi { color: @warning; } } } &.tab-gold { > a { border-color: @gold !important; > .fa, .glyphicon, .typcn, .wi { color: @gold; } } } &.tab-orange { > a { border-color: @orange !important; > .fa, .glyphicon, .typcn, .wi { color: @orange; } } } &.tab-lightred { > a { border-color: @lightred !important; > .fa, .glyphicon, .typcn, .wi { color: @lightred; } } } &.tab-darkorange { > a { border-color: @darkorange !important; > .fa, .glyphicon, .typcn, .wi { color: @darkorange; } } } &.tab-red { > a { border-color: @red !important; > .fa, .glyphicon, .typcn, .wi { color: @red; } } } &.tab-pink { > a { border-color: @pink !important; > .fa, .glyphicon, .typcn, .wi { color: @pink; } } } &.tab-danger { > a { border-color: @danger !important; > .fa, .glyphicon, .typcn, .wi { color: @danger; } } } &.tab-magenta { > a { border-color: @magenta !important; > .fa, .glyphicon, .typcn, .wi { color: @magenta; } } } &.tab-purple { > a { border-color: @purple !important; > .fa, .glyphicon, .typcn, .wi { color: @purple; } } } &.tab-maroon { > a { border-color: @maroon !important; > .fa, .glyphicon, .typcn, .wi { color: @maroon; } } } } /*#endregion Colred Tab*/ } &.nav-justified { margin-bottom:-2px; > li { > a { border: none; margin-top: -2px; &:hover { background-color: transparent; } } } & > .active { & > a { &, &:hover, &:focus { border: 0; border-top: 2px solid @themeprimary; background-color: @snow; } } } } .dropdown-menu { margin-top: -3px; } &.tabs-flat { .box-shadow(none); background-color: rgba(0, 0, 0, 0); } } .tabs-below { > .nav-tabs { top: auto; margin-bottom: 0; margin-top: -1px; border-bottom-width: 0; li { &.active { > a { &, &:hover, &:focus { border-top-width: 1px; border-bottom: 2px solid @blue; border-top-color: transparent; margin-top: 0; .box-shadow(0 2px 3px 0 rgba(0,0,0,0.15)); } } } } &.nav-justified { & > li { & > a { margin-bottom: -2px; } } & > .active { & > a { &, &:hover, &:focus { border: 0; border-bottom: 2px solid @blue; } } } } } } .tabs-left { > .nav-tabs { top: auto; margin-bottom: 0; float: left; > li { float: none; > a { &, &:focus, &:hover { margin: 0 -1px 0 0; } } &.active { > a { &, &:focus, &:hover { border: 0; border-left: 2px solid @blue; border-right-color: transparent; margin: 0 -1px 0 -1px; .box-shadow(-2px 0 3px 0 @black3); } } } } } } .tabs-right { > .nav-tabs { top: auto; margin-bottom: 0; float: right; > li { float: none; > a { &, &:focus, &:hover { border-top: 0; margin: 0 -1px; } } &.active { > a { &, &:focus, &:hover { border-top-width: 0; border-right: 2px solid @blue; border-left-color: transparent; margin: 0 -2px 0 -1px; .box-shadow(2px 0 3px 0 @black3); } } } } } } .tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a { min-width: 60px; } .nav-tabs li [class*=" fa-"], .nav-tabs li [class^="fa-"] { width: 1.25em; display: inline-block; text-align: center; } .nav-tabs > li.open .dropdown-toggle { background-color: @platinum; border-color: @platinum; } .tabs-left .tab-content, .tabs-right .tab-content { overflow: auto; } .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover, .nav > li.dropdown.open.active > a:focus { background-color: @snow; } .nav .dropdown-menu > .active > a, .nav .dropdown-menu > .active > a:hover, .nav .dropdown-menu > .active > a:focus { color: @darkcarbon; background-color: @platinum; } .nav-tabs > li:not(.active):not(.open) > a:not(:hover) > [class*="fa-"].disabled:first-child { color: #909090 !important; } /*#endregion Tab*/ /*#endregion Tabs*/