You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
551 lines
9.0 KiB
551 lines
9.0 KiB
@accordion-border:#CDD8E3;
|
|
@accordion-header-text:@ace-blue;
|
|
@accordion-header-text-hover:#6EA6CC;
|
|
@accordion-header-hover-bg:#F1F8FD;
|
|
@accordion-active-bg:#EEF4F9;
|
|
|
|
|
|
.enable_tabs() when(@enable-tabs = true) {
|
|
|
|
.tab-content {
|
|
border: 1px solid @tab-border;
|
|
padding: 16px 12px;
|
|
position: relative;
|
|
//z-index:11;
|
|
}
|
|
.tab-content.no-padding {
|
|
padding:0;
|
|
}
|
|
.tab-content.no-border {
|
|
border:none;
|
|
padding:12px;
|
|
}
|
|
.tab-content {
|
|
.tab-paddingX (@index) when (@index >= 0) {
|
|
&.padding-@{index} { padding:unit(@index,px) unit(ceil(@index * 0.75),px); }
|
|
&.no-border.padding-@{index} { padding:unit(@index,px); }
|
|
.tab-paddingX(@index - 2);
|
|
}
|
|
.tab-paddingX(32);
|
|
}
|
|
|
|
|
|
.nav.nav-tabs {
|
|
.navtab-paddingX (@index) when (@index > 0) {
|
|
&.padding-@{index} { padding-left:unit(@index,px); }
|
|
.tabs-right > &.padding-@{index} , .tabs-left > &.padding-@{index} { padding-left:0; padding-top:unit(@index,px); }
|
|
.navtab-paddingX(@index - 2);
|
|
}
|
|
.navtab-paddingX(32);
|
|
}
|
|
|
|
|
|
.nav-tabs {
|
|
border-color: #C5D0DC;
|
|
margin-bottom: 0 !important;//to override .rtl's
|
|
margin-left: 0;
|
|
position: relative;
|
|
top: 1px;
|
|
|
|
> li {
|
|
> a {
|
|
padding: 7px 12px 8px;
|
|
|
|
&,&:focus {
|
|
border-radius: 0 !important;
|
|
border-color: @tab-border;
|
|
|
|
background-color: #F9F9F9;
|
|
color: #999;
|
|
|
|
margin-right: -1px;
|
|
line-height: 18px;
|
|
|
|
position:relative;
|
|
//z-index:11;
|
|
}
|
|
&:hover {
|
|
background-color: #FFF;
|
|
color: @tab-hover-color;
|
|
border-color: @tab-border;
|
|
}
|
|
&:active, &:focus {
|
|
outline:none !important;
|
|
}
|
|
}//a
|
|
|
|
&:first-child > a {
|
|
margin-left:0;
|
|
}
|
|
|
|
&.active > a{
|
|
&,&:hover,&:focus {
|
|
color: @tab-active-color;
|
|
border-color: @tab-border;
|
|
border-top: 2px solid @tab-active-border;
|
|
border-bottom-color: transparent;
|
|
background-color: #FFF;
|
|
|
|
z-index: 1;
|
|
line-height: 18px;
|
|
margin-top: -1px;
|
|
|
|
box-shadow: 0 -2px 3px 0 rgba(0,0,0,0.15);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.enable_tab_positions() when(@enable-tab-positions = true) {
|
|
.tabs-below > & {
|
|
/* tabs below */
|
|
top:auto;
|
|
margin-bottom:0;
|
|
margin-top:-1px;
|
|
border-color:@tab-border;
|
|
border-bottom-width:0;
|
|
|
|
> li {
|
|
> a {
|
|
&,&:hover,&:focus {
|
|
border-color:@tab-border;
|
|
}
|
|
}
|
|
|
|
&.active > a {
|
|
&,&:hover,&:focus {
|
|
border-color:@tab-border;
|
|
border-top-width:1px;
|
|
border-bottom:2px solid @tab-active-border;
|
|
border-top-color:transparent;
|
|
|
|
margin-top:0;
|
|
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.15);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.tabs-left > & > li > a, .tabs-right > & > li > a {
|
|
//tabs left
|
|
min-width:60px;
|
|
}
|
|
.tabs-left > & {
|
|
top:auto;
|
|
margin-bottom:0;
|
|
border-color:@tab-border;
|
|
|
|
float: left;
|
|
|
|
> li {
|
|
float: none !important;//to override .rtl's
|
|
|
|
> a {
|
|
&,&:focus,&:hover {
|
|
border-color:@tab-border;
|
|
margin:0 -1px 0 0;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
> a {
|
|
& , &:focus , &:hover {
|
|
border-color: @tab-border;
|
|
border-top-width: 1px;
|
|
border-left: 2px solid @tab-active-border;
|
|
border-right-color: transparent;
|
|
margin: 0 -1px 0 -1px;
|
|
|
|
.box-shadow(~"-2px 0 3px 0 rgba(0,0,0,0.15)") !important;//to override .rtl's
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tabs-right > & {
|
|
//tabs right
|
|
top:auto;
|
|
margin-bottom: 0;
|
|
border-color: @tab-border;
|
|
|
|
float: right;
|
|
|
|
> li {
|
|
float: none !important;//to override RTL's
|
|
|
|
> a {
|
|
&,&:focus,&:hover {
|
|
border-color: @tab-border;
|
|
margin: 0 -1px;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
> a {
|
|
& , &:focus , &:hover {
|
|
border-color: @tab-border;
|
|
border-top-width: 1px;
|
|
border-right: 2px solid @tab-active-border;
|
|
border-left-color: transparent;
|
|
margin: 0 -2px 0 -1px;
|
|
|
|
.box-shadow(~"2px 0 3px 0 rgba(0,0,0,0.15)");//to override .rtl's
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.enable_tab_positions();
|
|
|
|
|
|
|
|
> li > a {
|
|
//icon and badges
|
|
> .badge {
|
|
padding: 1px 5px;
|
|
line-height: 15px;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
> .@{icon} {
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
> li.active > a {
|
|
> .badge , > .@{icon} {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
li .@{icon} {
|
|
width:1.25em;
|
|
display:inline-block;
|
|
text-align:center;
|
|
}
|
|
|
|
|
|
|
|
> li.open .dropdown-toggle {
|
|
//dropdown in tabs
|
|
background-color: #4F99C6;
|
|
border-color: #4F99C6;
|
|
color: #FFF;
|
|
|
|
> .@{icon} {
|
|
color:#FFF !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs-left , .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: #4F99C6;
|
|
border-color: #4F99C6;
|
|
color: #FFFFFF;
|
|
> .@{icon} {
|
|
color:#FFF !important;
|
|
}
|
|
}
|
|
|
|
|
|
.enable_tab_options() when (@enable-tab-options = true) {
|
|
|
|
|
|
/* bigger tab buttons */
|
|
.nav-tabs > li:not(.active):not(.open) > a:not(:hover) > .@{icon}:first-child.disabled {
|
|
color:#909090 !important;
|
|
}
|
|
|
|
/* bigger tab buttons */
|
|
.nav-tabs.tab-size-bigger > li > a {
|
|
padding-left:14px;
|
|
padding-right:14px;
|
|
|
|
> .@{icon}:first-child {
|
|
display:block;
|
|
margin-bottom:6px;
|
|
width:auto;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
//some tab customizations
|
|
|
|
//spaced tabs (top & bottom)
|
|
.nav-tabs.tab-space-1 > li > a {
|
|
margin-right: 1px;
|
|
}
|
|
.nav-tabs.tab-space-2 > li > a {
|
|
margin-right: 2px;
|
|
}
|
|
.nav-tabs.tab-space-3 > li > a {
|
|
margin-right: 3px;
|
|
}
|
|
.nav-tabs.tab-space-4 > li > a {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
|
|
//colored tabs
|
|
|
|
@tab-color-blue:#7DB4D8;
|
|
|
|
.nav-tabs[class*="tab-color-"] > li > a {
|
|
& , &:focus, &:hover {
|
|
color: #FFF;
|
|
border-color: transparent;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
> .badge {
|
|
.border-radius(2px);
|
|
}
|
|
}
|
|
|
|
.nav-tabs[class*="tab-color-"] > li:not(.active) > a {
|
|
&:hover {
|
|
opacity:0.85;
|
|
border-color:rgba(0,0,0,0.15);
|
|
border-bottom-color:transparent;
|
|
}
|
|
> .@{icon}:first-child{
|
|
color:#FFF !important;
|
|
}
|
|
> .badge{
|
|
color:rgba(0,0,0,0.4) !important;
|
|
background-color:#FFF !important;
|
|
.border-radius(2px);
|
|
}
|
|
}
|
|
|
|
.nav-tabs.tab-color-blue > li > a {
|
|
& , &:focus {
|
|
background-color:@tab-color-blue;
|
|
}
|
|
}
|
|
|
|
.nav-tabs[class*="tab-color-"] > li.active > a {
|
|
& , &:focus, &:hover {
|
|
background-color:#FFF;
|
|
color:darken(desaturate(@tab-color-blue, 20%), 20%);
|
|
.box-shadow(none) !important;
|
|
}
|
|
}
|
|
|
|
.nav-tabs.tab-color-blue > li.active > a {
|
|
& , &:focus, &:hover {
|
|
color:darken(desaturate(@tab-color-blue, 25%), 25%);
|
|
border-color:@tab-color-blue @tab-color-blue transparent;
|
|
}
|
|
.tabs-below & {
|
|
border-color:transparent @tab-color-blue @tab-color-blue;
|
|
}
|
|
}
|
|
|
|
|
|
.nav-tabs.tab-color-blue {
|
|
border-bottom-color:#C5D0DC;
|
|
}
|
|
|
|
|
|
/* background for tab links */
|
|
.nav-tabs.background-blue {
|
|
padding-top:6px;
|
|
background-color:#EFF3F8;
|
|
border:1px solid #C5D0DC;
|
|
}
|
|
|
|
.tabs-below .nav-tabs.background-blue {
|
|
padding-top:0;
|
|
padding-bottom:6px;
|
|
}
|
|
.tabs-below .nav-tabs.tab-color-blue {
|
|
border-top:none;
|
|
border-bottom-color:#C5D0DC;
|
|
}
|
|
|
|
}
|
|
.enable_tab_options();
|
|
|
|
|
|
}
|
|
.enable_tabs();
|
|
|
|
|
|
|
|
|
|
|
|
//accordion
|
|
.enable_accordion() when(@enable-accordion = true) {
|
|
.accordion-style1.panel-group {
|
|
.panel {
|
|
border-radius: 0;
|
|
border-color: @accordion-border;
|
|
background-color: #FFF;
|
|
box-shadow: none;
|
|
|
|
&:last-child {
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.collapse {
|
|
background-color: #FFF;
|
|
}
|
|
|
|
+ .panel {
|
|
margin-top:2px;
|
|
}
|
|
}
|
|
.panel-heading + .panel-collapse .panel-body {
|
|
border-top-color: @accordion-border !important;
|
|
}
|
|
|
|
.panel-heading {
|
|
padding:0;
|
|
|
|
}
|
|
|
|
.panel-heading .accordion-toggle {
|
|
color:@tab-hover-color;
|
|
background-color:@accordion-active-bg;
|
|
position:relative;
|
|
font-weight:bold;
|
|
|
|
font-size: @font-size-accordion-toggle;
|
|
line-height: 1;
|
|
|
|
padding: 10px;
|
|
display:block;
|
|
|
|
&.collapsed {
|
|
color:@accordion-header-text;
|
|
font-weight:normal;
|
|
background-color:#F9F9F9;
|
|
}
|
|
|
|
&:hover {
|
|
color:@accordion-header-text-hover;
|
|
background-color:@accordion-header-hover-bg;
|
|
text-decoration:none;
|
|
}
|
|
|
|
&:focus,&:active {
|
|
outline:none;
|
|
text-decoration:none;
|
|
}
|
|
|
|
|
|
> .@{icon}:first-child {
|
|
width:16px;
|
|
}
|
|
&:hover > .@{icon}:first-child{
|
|
text-decoration:none;
|
|
}
|
|
}
|
|
|
|
|
|
.panel-body , .collapse.in > .panel-body{
|
|
border-top:1px solid @accordion-border;
|
|
}
|
|
|
|
&.no-padding {
|
|
padding:0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//style2, used in faq, etc...
|
|
.enable_accordion_style_2() when (@enable-accordion-style-2 = true) {
|
|
.accordion-style2.panel-group {
|
|
.panel {
|
|
border-width:0;
|
|
&:last-child {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
+ .panel {
|
|
margin-top:4px;
|
|
}
|
|
|
|
.panel-body {
|
|
border-top:none;
|
|
}
|
|
}
|
|
|
|
.panel-heading .accordion-toggle {
|
|
background-color:#EDF3F7;
|
|
|
|
border:2px solid #6EAED1;
|
|
border-width:0 0 0 2px;
|
|
|
|
&:hover {
|
|
text-decoration:none;
|
|
}
|
|
|
|
&.collapsed {
|
|
background-color:#F3F3F3;
|
|
color:#606060;
|
|
border-width:0 0 0 1px;
|
|
border-color:#D9D9D9;
|
|
|
|
&:hover {
|
|
background-color:#F6F6F6;
|
|
color:#438EB9;
|
|
text-decoration:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.panel-body , .collapse.in > .panel-body{
|
|
border-top:none;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//nested questions
|
|
.accordion-style2.panel-group .accordion-style2.panel-group {
|
|
.panel {
|
|
border-bottom:1px dotted #D9D9D9;
|
|
&:last-child {
|
|
border-bottom:none;
|
|
}
|
|
|
|
.panel-heading , .panel-heading .accordion-toggle {
|
|
background-color: transparent;
|
|
border-width: 0;
|
|
font-size: @font-size-accordion-toggle;
|
|
|
|
padding-top: 6px;
|
|
padding-bottom: 8px;
|
|
}
|
|
.panel-heading {
|
|
padding-top:0; padding-bottom:0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.enable_accordion_style_2();
|
|
|
|
}
|
|
.enable_accordion();
|
|
|