Borders
In this module you can find standard mixins for border-radius and prefix-free box-shadow property and pre-defined mixins for special cases.
File
lightingfly/modules/_borders.scssLinks
Specification for CSS 3 border radius: w3.org
Learn to CSS 3 border radius: w3schools.com
Specification for CSS 3 box shadow: w3.org
Learn to CSS 3 box shadow: w3schools.com
border-radius
Mixin for border-radius property with additional background clip property.
Mixin
@mixin border-radius($radius, $border, $clip)Arguments
$radius:
[5px, 100%, 2em ...]
- radius.$border: (variable argument)
['top left', 'top right', 'bottom right', 'bottom left']
- defines the corner to which is radius aplied.$clip: (variable argument)
[true, false]
- default value is true, use false if background clipping is already set.
Usage example
Demo
This element has rounded top right corner
border-top-radius
Extended border-radius mixin. Provides rounded border for both top corners.
Mixin
@mixin border-top-radius($radius, $clip)Arguments
$radius:
[5px, 100%, 2em ...]
- radius.$clip: (variable argument)
[true, false]
- default value is true, use false if background clipping is already set.
Usage example
Demo
This element has rounded both top corners.
border-right-radius
Extended border-radius mixin. Provides rounded border for both right corners.
Mixin
@mixin border-right-radius($radius, $clip)Arguments
$radius:
[5px, 100%, 2em ...]
- radius.$clip: (variable argument)
[true, false]
- default value is true, use false if background clipping is already set.
Usage example
Demo
This element has rounded both right corners.
border-bottom-radius
Extended border-radius mixin. Provides rounded border for both bottom corners.
Mixin
@mixin border-bottom-radius($radius, $clip)Arguments
$radius:
[5px, 100%, 2em ...]
- radius.$clip: (variable argument)
[true, false]
- default value is true, use false if background clipping is already set.
Usage example
Demo
This element has rounded both bottom corners.
border-left-radius
Extended border-radius mixin. Provides rounded border for both left corners.
Mixin
@mixin border-left-radius($radius, $clip)Arguments
$radius:
[5px, 100%, 2em ...]
- radius.$clip: (variable argument)
[true, false]
- default value is true, use false if background clipping is already set.
Usage example
Demo
This element has rounded both left corners.
box-shadow
Mixin for prefix-free using box-shadow property..
Mixin
@mixin box-shadow($arguments...)Arguments
$arguments...:
[0 2px 2px black, inset 2px 0 0 rgba(255,255,255,0.5), ...]
- comma-separated list of shadows.
Usage example
Demo
Elements with various shadows.