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.
122 lines
2.2 KiB
122 lines
2.2 KiB
/** |
|
* @file |
|
* Visual styles for tabs. |
|
*/ |
|
|
|
div.tabs { |
|
margin: 1em 0; |
|
} |
|
ul.tabs { |
|
margin: 0; |
|
padding: 0; |
|
list-style: none; |
|
} |
|
.tabs > li { |
|
display: inline-block; |
|
margin-right: 0.3em; /* LTR */ |
|
} |
|
[dir='rtl'] .tabs > li { |
|
margin-right: 0; |
|
margin-left: 0.3em; |
|
} |
|
.tabs a { |
|
display: block; |
|
padding: 0.2em 1em; |
|
font-family: $button-font-family; |
|
text-decoration: none; |
|
} |
|
.tabs a.is-active { |
|
background-color: #fff; |
|
color: $red; |
|
} |
|
.tabs.primary > li > a.is-active { |
|
color: $red; |
|
} |
|
.tabs a:focus, |
|
.tabs a:hover { |
|
background-color: #fff; |
|
} |
|
//lp search tabs |
|
.searchtabs__container { |
|
margin-top: $global-margin; |
|
@include flex-grid-row(); |
|
//@include callout; |
|
} |
|
.searchtabs { |
|
width: 100%; |
|
@include callout; |
|
background: #757575; |
|
border: 0px; |
|
ul { |
|
border: 0px; |
|
} |
|
.tabs-title > a { |
|
border-radius: $global-radius $global-radius 0 0; |
|
color: $white; |
|
font-weight: 600; |
|
font-size: rem-calc(18); |
|
font-family: $roboto-condensed; |
|
margin-right: 2px; |
|
padding: 0px; |
|
padding: 0.8rem 1rem; |
|
@include breakpoint(medium) { |
|
padding: 0.8rem 1.5rem; |
|
} |
|
&:hover { |
|
color: $primary-color; |
|
} |
|
} |
|
.tabs-title > a:focus, |
|
.tabs-title > a[aria-selected='true'] { |
|
color: $primary-color; |
|
outline: none; |
|
} |
|
.tabs-content { |
|
padding: $global-padding; |
|
border-radius: 0 $global-radius $global-radius $global-radius; |
|
} |
|
} |
|
|
|
.form-submit { |
|
} |
|
.searchtabs { |
|
p { |
|
margin: 0; |
|
} |
|
form > div { |
|
@extend .input-group; |
|
} |
|
input[type='submit'] { |
|
@extend .input-group-button; |
|
@include button(); |
|
@include button-style( |
|
//$background, |
|
$success-color, |
|
//$background-hover, |
|
auto, |
|
//$color |
|
auto |
|
); |
|
border-radius: 0 $global-radius $global-radius 0; |
|
|
|
margin-bottom: 0; |
|
} |
|
input[type='text'] { |
|
@extend .input-group-field; |
|
//@include button(); |
|
border-radius: $global-radius 0 0 $global-radius; |
|
background: #fff; |
|
} |
|
.tabs-panel { |
|
@include padding(1, 0, 0, 0); |
|
} |
|
.tabs { |
|
background: #757575; |
|
} |
|
} |
|
.searchtabs .tabs-title > a:focus, |
|
.searchtabs .tabs-title > a[aria-selected='true'] { |
|
color: #8c2004; |
|
background: #fff; |
|
outline: none; |
|
}
|
|
|