//
// Patternfly Mixins
// --------------------------------------------------
// PatternFly-specific mixins
// Patternfly button variants.
@mixin button-variant($color, $background, $background-image-start, $background-image-stop, $border){
background-color: $background;
@include 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;
}
}
}
// SASS CONVERSION FIX.
// Allows inclusion of sr-only rules in nested media queries where @extends .sr-only
// will not work.
@mixin sr-only-pf(){
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
@mixin 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;
}
}
// Ellipse overflow text
.text-overflow-pf {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}