stylus-common-mixins

Stylus mixins often used.

Content Table

• Install
• Import
• Examples
  • background-gradient
  • background-gradient-x
  • background-gradient-y
  • background-cover
  • background-contain
  • border-top-radius
  • border-right-radius
  • border-bottom-radius
  • border-left-radius
  • caret-up
  • caret-right
  • caret-down
  • caret-left
  • circle
  • clearfix
  • flex-center
  • hr
  • list-unstyle
  • rect
  • square
  • text-truncate

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.