2.0.3 • Published 2 years ago
@stylize/sass-shape v2.0.3
sass-shape
Install
npm install @stylize/sass-shape --save-dev
Other packages
Name | Description | Package |
---|---|---|
@stylize/sass-func | Func's for general usage | |
@stylize/sass-mixin | Mixins for general usage |
Usage
Mixins can be imported directly from the package or namespace.
@use '~@stylize/sass-shape' as *
Shapes use sass-mixin, so complex size
, width
and height
args can be used.
Circle
Mixin defines the circle with size
and color
.
@include circle($size: null, $color: null)
// Radius 50%.
@include circle
// Radius 50%, [eq] width × height.
@include circle(20px)
// Radius 50%, [min] width × height.
@include circle(min 20px)
// Radius 50%, [max] width × height, color.
@include circle(max 20px, #fff)
// Radius 50%, [min] width × height, color.
@include circle($size: min 20px, $color: #fff)
// Radius 50%, [eq, min] width × height, color.
@include circle([auto, min 20px], #fff)
// Radius 50%, [eq, min, max] width × height, color.
@include circle([40px, min 20px, max 50px], #fff)
// Radius 50%, [eq, min, max] width × height, gradient color.
@include circle([40px, min 20px, max 50px], linear-gradient(#fff, #000))
Ellipse
Mixin defines the ellipse with width
, height
and color
.
@include ellipse($width: null, $height: null, $color: null)
// Radius 50%.
@include ellipse
// Radius 50%, [eq] width.
@include ellipse(20px)
// Radius 50%, [min] width.
@include ellipse(min 20px)
// Radius 50%, [max] width.
@include ellipse($width: max 20px)
// Radius 50%, [min] width, [max] height, color.
@include ellipse(min 10px, max 20px, #fff)
// Radius 50%, [eq, min] width, [max] height, color.
@include ellipse([auto, min 20px], max 20px, #fff)
// Radius 50%, [eq, min] width, [eq, max] height, color.
@include ellipse([40px, min 20px], [20px, max 10px], #fff)
// Radius 50%, [eq, min] width, [eq, max] height, gradient color.
@include ellipse([40px, min 20px], [20px, max 10px], linear-gradient(#fff, #000))
Square
Mixin defines the square with size
, radius
and color
.
@include square($size: null, $radius: null, $color: null)
// [eq] width × height.
@include square(20px)
// [min] width × height, radius.
@include square(min 20px, 5px)
// [max] width × height, radius, color.
@include square(max 20px, 5px, #fff)
// [min] width × height, radius, color.
@include square($size: min 20px, $radius: 4px, $color: #fff)
// [eq, min] width × height, radius, color.
@include square([auto, min 20px], 5px, #fff)
// [eq, min, max] width × height, [top-left, bottom-right] radius, color.
@include square([40px, min 20px, max 50px], 5px 4px, #fff)
// [eq, min, max] width × height, [top-left, bottom-right] radius, color.
@include square([40px, min 20px, max 50px], [5px, 4px], #fff)
// [eq, min, max] width × height, [top-left, bottom-right] radius, gradient color.
@include square([40px, min 20px, max 50px], [5px, 4px], linear-gradient(#fff, #000))
Rectangle
Mixin defines the rectangle with width
, height
, radius
and color
.
@include rectangle($width: null, $height: null, $radius: null, $color: null)
// [min] width.
@include rectangle(min 20px)
// [eq] width, [max] height.
@include rectangle(10px, max 20px)
// [min] width, [eq] height, radius.
@include rectangle(min 10px, 20px, 4px)
// [max] width, [max] height, radius, color.
@include rectangle(max 10px, max 20px, 4px, #fff)
// [eq, min] width, [max] height, radius, color.
@include rectangle([auto, min 20px], max 20px, 4px, #fff)
// [eq] width, [eq] height, [top-left, bottom-right] radius, color.
@include rectangle($width: 10px, $height: 20px, $radius: 4px 3px, $color: #fff)
// [eq, min] width, [eq, min] height, [top-left, bottom-right] radius, color.
@include rectangle([40px, min 20px], [20px, min 10px], 4px 3px, #fff)
// [eq, min] width, [eq, min] height, [top-left, bottom-right] radius, color.
@include rectangle([40px, min 20px], [20px, min 10px], [4px, 3px], #fff)
// [eq, min] width, [eq, min] height, [top-left, bottom-right] radius, gradient color.
@include rectangle([40px, min 20px], [20px, min 10px], [4px, 3px], linear-gradient(#fff, #000))
Triangle
Mixin defines the triangle with direction
, color
, width
and height
.
@include triangle($direction, $color, $width, $height: null)
// ↑ Triangle in top direction.
@include triangle(top #fff 5px)
// ↖ Triangle in top-left direction.
@include triangle(top-left, #fff, 5px, 10px)