| Current Path : /home/poneycluc/www/plugins/system/t4/admin/assets/scss/ |
| Current File : /home/poneycluc/www/plugins/system/t4/admin/assets/scss/_mixins.scss |
@mixin clearfix() {
&::after {
display: block;
clear: both;
content: "";
}
}
//
// Insert Font Awesome Icons
// Default is Angle Right [http://fortawesome.github.io/Font-Awesome/icon/angle-right/]
@mixin icon($icon: "\f105") {
content: $icon;
display: inline-block;
font-family: $iconFont;
font-style: normal;
}
//
// Reset button properties
@mixin btn-reset() {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
@mixin btn-icon($fs: 14px, $color: $gray-400, $hover-color: $gray-600, $w: 20px, $h: 20px, $pd: 10px) {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
color: $color;
display: inline-block;
font-size: $fs;
height: $h + $pd*2;
padding: $pd;
position: relative;
text-align: center;
width: $w + $pd*2;
&:hover, &:focus, &:active {
background-color: transparent;
cursor: pointer;
&:before {
opacity: 1;
}
}
.fa, .fal {
line-height: $h;
margin: 0;
}
&:before {
background-color: rgba(0,0,0,0.075);
border-radius: 50%;
content: "";
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all 0.25s ease-out;
width: 100%;
}
&[data-tooltip]:after {
background-color: $gray-800;
border-radius: 4px;
display: none;
color: #fff;
content: attr(data-tooltip);
font-size: $font-size-xs;
font-weight: 400;
min-height: $base-height;
opacity: 0;
line-height: 1;
padding: $base-padding $base-padding;
position: absolute;
top: $h + $pd*2;
left: 50%;
white-space: nowrap;
transform: translate(-50%, 0);
z-index: 3000;
}
&[data-tooltip]:hover:after {
display: inline-block;
opacity: 1;
top: $h + $pd*2.5;
}
}