blob: 1cd38aeaa3eee2a13415851d1d5f130432c697b7 [file] [log] [blame]
//
// Mixins
// --------------------------------------------------
// Bootstrap overrides and PatternFly-specific mixins
// Bootstrap overrides
// -------------------
// Button variants
.button-variant(@color; @background; @background-image-start; @background-image-stop; @border) {
background-color: @background;
#gradient > .vertical(@background-image-start, @background-image-stop);
border-color: @border;
color: @color;
&:hover,
&:focus,
&:active,
&.active,
.open .dropdown-toggle& {
background-color: @background;
background-image: none;
border-color: @border;
color: @color;
}
&:active,
&.active,
.open .dropdown-toggle& {
background-image: none;
&:hover,
&:focus,
&.focus {
background-color: darken(@background, 5%);
border-color: darken(@border, 7%);
}
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: @background;
border-color: @border;
}
}
}
// Form control outline
.form-control-outline(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus {
border-color: @color;
outline: 0 !important;
.box-shadow(~"inset 0 1px 1px rgba(3, 3, 3, 0.075), 0 0 8px @{color-rgba}");
}
}
// Gradients
#gradient {
.striped(@color: fade(@color-pf-black, 15%); @angle: -45deg) {
background-image: linear-gradient(@angle, @color 25%, @color 26%, transparent 27%, transparent 49%, @color 50%, @color 51%, transparent 52%, transparent 74%, @color 75%, @color 76%, transparent 77%);
}
}
// Horizontal dividers
.nav-divider(@color: @color-pf-black-200, @margin: 4px 1px) {
background-color: @color;
height: 1px;
margin: @margin;
overflow: hidden;
}
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
&::placeholder { color: @color; font-style: italic; }
}
// PatternFly-specific
// -------------------
.tab-indicator(@background: @gray-light-pf, @left: 15px, @right: 15px) {
&:before {
background: @background;
bottom: -1px;
content: "";
display: block;
height: 2px;
left: @left;
position: absolute;
right: @right;
}
}