README
stylus-common-mixins
Stylus mixins often used.
Content Table
Install
npm install --save stylus-common-mixins
Import
@require 'stylus-common-mixins'
Examples
background-gradient
Usage:
background-gradient($begin, $end, $angle = 180deg)
Input:
.background-gradient-default
background-gradient(#fff, #000)
.background-gradient-custom-angle
background-gradient(#fff, #000, 60deg)
Output:
.background-gradient-default {
background-color: #7f7f7f;
background-image: linear-gradient(180deg, #fff, #000);
}
.background-gradient-custom-angle {
background-color: #7f7f7f;
background-image: linear-gradient(60deg, #fff, #000);
}
background-gradient-x
Usage:
background-gradient-x($begin, $end)
Input:
.background-gradient-x
background-gradient-x(#fff, #000)
Output:
.background-gradient-x {
background-color: #7f7f7f;
background-image: linear-gradient(90deg, #fff, #000);
}
background-gradient-y
Usage:
background-gradient-y($begin, $end)
Input:
.background-gradient-y
background-gradient-y(#fff, #000)
Output:
.background-gradient-y {
background-color: #7f7f7f;
background-image: linear-gradient(180deg, #fff, #000);
}
background-cover
Usage:
background-cover($image)
Input:
.background-cover
background-cover('url(image)')
Output:
.background-cover {
background-image: 'url(image)';
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
background-contain
Usage:
background-contain($image)
Input:
.background-contain
background-contain('url(image)')
Output:
.background-contain {
background-image: 'url(image)';
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
border-top-radius
Usage:
border-top-radius($radius)
Input:
.border-top-radius
border-top-radius(10px)
Output:
.border-top-radius {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
border-right-radius
Usage:
border-right-radius($radius)
Input:
.border-right-radius
border-right-radius(10px)
Output:
.border-right-radius {
border-top-right-radius: 10px;
border-botton-right-radius: 10px;
}
border-bottom-radius
Usage:
border-bottom-radius($radius)
Input:
.border-bottom-radius
border-bottom-radius(10px)
Output:
.border-bottom-radius {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
border-left-radius
Usage:
border-left-radius($radius)
Input:
.border-left-radius
border-left-radius(10px)
Output:
.border-left-radius {
border-top-left-radius: 10px;
border-botton-left-radius: 10px;
}
caret-up
Usage:
caret-up($size, $color)
Input:
.caret-up-default
caret-up()
.caret-up-custom
caret-up(12px, #000)
Output:
.caret-up-default {
border-top: 0;
border-right: 8px solid transparent;
border-bottom: 8px solid #666;
border-left: 8px solid transparent;
}
.caret-up-custom {
border-top: 0;
border-right: 12px solid transparent;
border-bottom: 12px solid #000;
border-left: 12px solid transparent;
}
caret-right
Usage:
caret-right($size, $color)
Input:
.caret-right-default
caret-right()
.caret-right-custom
caret-right(12px, #000)
Output:
.caret-right-default {
border-top: 8px solid transparent;
border-right: 0;
border-bottom: 8px solid transparent;
border-left: 8px solid #666;
}
.caret-right-custom {
border-top: 12px solid transparent;
border-right: 0;
border-bottom: 12px solid transparent;
border-left: 12px solid #000;
}
caret-down
Usage:
caret-down($size, $color)
Input:
.caret-down-default
caret-down()
.caret-down-custom
caret-down(12px, #000)
Output:
.caret-down-default {
border-top: 8px solid #666;
border-right: 8px solid transparent;
border-bottom: 0;
border-left: 8px solid transparent;
}
.caret-down-custom {
border-top: 12px solid #000;
border-right: 12px solid transparent;
border-bottom: 0;
border-left: 12px solid transparent;
}
caret-left
Usage:
caret-left($size, $color)
Input:
.caret-left-default
caret-left()
.caret-left-custom
caret-left(12px, #000)
Output:
.caret-left-default {
border-top: 8px solid transparent;
border-right: 8px solid #666;
border-bottom: 8px solid transparent;
border-left: 0;
}
.caret-left-custom {
border-top: 12px solid transparent;
border-right: 12px solid #000;
border-bottom: 12px solid transparent;
border-left: 0;
}
circle
Usage:
circle($size)
Input:
.circle
circle(20px)
Output:
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
}
clearfix
Usage:
clearfix()
Input:
.clearfix
clearfix()
Output:
.clearfix:after {
display: table;
clear: both;
content: "";
}
flex-center
Usage:
flex-center()
Input:
.flex-center
flex-center()
Output:
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
hr
Usage:
hr($color, $size = 1px, $style = solid, $direction = horizontal)
Input:
.hr-default
hr(#eee)
.hr-custom
hr(#eee, 2px, dashed, vertical)
Output:
.hr-default {
width: 100%;
border-top: 1px solid #eee;
}
.hr-custom {
height: 100%;
border-left: 2px dashed #eee;
}
list-unstyle
Usage:
list-unstyle()
Input:
.list-unstyle
list-unstyle()
Output:
.list-unstyle {
padding-left: 0;
list-style: none;
}
rect
Usage:
rect($width, $height)
Input:
.rect
rect(10px, 20px)
Output:
.rect {
width: 10px;
height: 20px;
}
square
Usage:
square($size)
Input:
.square
square(10px)
Output:
.square {
width: 10px;
height: 10px;
}
text-truncate
Usage:
text-truncate($rows: 1)
Input:
.text-truncate-default
text-truncate()
.text-truncate-custom
text-truncate(3)
Output:
.text-truncate-default {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-truncate-custom {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
License
MIT.