patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
109 lines (107 loc) • 3.14 kB
text/less
//
// Bootstrap-select
// --------------------------------------------------
.bootstrap-select.btn-group {
&.form-control {
margin-bottom: 0;
}
.btn {
// TODO Create global variable for validation state box shadows?
@input-validation-focus-box-shadow: fade(@color-pf-black, 7.5%);
&:hover {
border-color: @input-border-hover;
}
.caret {
margin-top: -4px;
}
.form-control-outline();
.has-error & {
border-color: @state-danger-text;
&:focus {
// TODO Create global variable for validation state box shadows?
@state-danger-input-focus: lighten(@state-danger-text, 20%);
@shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-danger-input-focus}";
border-color: darken(@state-danger-text, 10%);
.box-shadow(@shadow);
}
}
.has-success & {
border-color: @state-success-text;
&:focus {
// TODO Create global variable for validation state box shadows?
@state-success-input-focus: lighten(@state-success-text, 20%);
@shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-success-input-focus}";
border-color: darken(@state-success-text, 10%);
.box-shadow(@shadow);
}
}
.has-warning & {
border-color: @state-warning-text;
&:focus {
// TODO Create global variable for validation state box shadows?
@state-warning-input-focus: lighten(@state-warning-text, 20%);
@shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-warning-input-focus}";
border-color: darken(@state-warning-text, 10%);
.box-shadow(@shadow);
}
}
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
}
.dropdown-menu { // Also see navbar.less
> .active > a {
&,
&:active {
background-color: @dropdown-link-hover-bg ;
border-color: @dropdown-link-hover-border-color ;
color: @gray-dark ;
small {
color: @gray-light ;
}
}
}
> .disabled > a {
color: @gray-light ;
}
> .selected > a {
background-color: @dropdown-link-active-bg ;
border-color: @dropdown-link-active-border-color ;
color: @color-pf-white ;
small {
color: fade(@color-pf-white, 50%) ;
}
}
.divider {
background: @dropdown-divider-bg ;
margin: @dropdown-divider-margin ;
}
dt {
color: @color-pf-black-500;
font-weight:normal;
padding: 1px 10px;
}
li {
& > a.opt {
padding: 1px 10px;
}
& a {
&:active small {
color: fade(@color-pf-white, 50%) ;
}
&:hover,
&:focus {
small {
color: @gray-light;
}
}
}
&:not(.disabled) {
a:hover,
a:focus {
small {
color: @gray-light;
}
}
}
}
}
}