/*justify position*/
@mixin justify-content ($position : start) {
-webkit-box-pack: $position;
-ms-flex-pack: $position;
-webkit-justify-content: $position;
-moz-box-pack: $position;
justify-content: $position;
}
/*to use*/
@include justify-content ($position : center);
@mixin truncate ($line: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: $line;
}
/*to use*/
@include truncate ($line: 3);
@mixin title-form {
font-style: normal;
font-weight: 200;
color: #555;
&:after {
content: ":";
margin-right: 10px;
}
}
/*opacity*/
@mixin opacity($opacity: 0.5) {
filter: alpha(opacity=$opacity*100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opacity*100});
opacity: $opacity;
}
/*to use*/
@include opacity ($opacity: 0.5);
/*Wrapper: mixin acts variable*/
@mixin block-wrapper {
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 9;
}
/*Icon before: mixin acts variable*/
@mixin icon-before {
font-family: FontAwesome;
content: "";
margin-right: 6px;
}
/*For gradient effect on background*/
@mixin brand-gradient {
background: $brand_purple; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, $brand_purple , $brand_pink); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, $brand_purple, $brand_pink); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, $brand_purple, $brand_pink); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, $brand_purple , $brand_pink); /* Standard syntax */
}
/*For inner gradient effect on icon*/
@mixin icon-gradient {
background: -webkit-linear-gradient(left, $brand_purple , $brand_pink); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, $brand_purple, $brand_pink); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, $brand_purple, $brand_pink); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, $brand_purple , $brand_pink);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*For inner gradient effect on icon:hover*/
@mixin icon-gradient-hover {
background: none;
-webkit-text-fill-color: #fff;
}