Border
Controls borders and border radii.
The borders are colored using the default border color of the browser, usually black.
Use border-color
to change the line colors.
Basically a clone of basscss/border, see http://basscss.com/#basscss-border for details.
$border-radius
$border-radius: 3px !default;
Sets the default radius when border-radius is applied to an element.
Used By
@mixin rounded()
@mixin rounded-top()
@mixin rounded-right()
@mixin rounded-bottom()
@mixin rounded-left()
Used By
@mixin border()
@mixin border-top()
@mixin border-right()
@mixin border-bottom()
@mixin border-left()
@mixin border()
Puts a border around the element.
Examples
.border.example {
@extend @border;
}
<div class="border example">My Element</div>
Requires
@mixin border-top()
Puts a border on top of the element.
Requires
@mixin border-right()
Puts a border to the right of the element.
Requires
@mixin border-bottom()
Puts a border on the bottom of the element.
Requires
@mixin border-left()
Puts a border to the left of the element.
Requires
@mixin border-none()
Removes all borders
@mixin rounded()
Rounds all corners of the element
Examples
.rounded.example {
@extend @rounded;
}
<div class="rounded example">My Element</div>
Requires
@mixin circle()
Makes the element circular, if it’s square, or elliptical if it’s rectangular.
@mixin rounded-top()
Rounds the two top corners of the element.
Requires
@mixin rounded-right()
Rounds the two right corners of the element.
Requires
@mixin rounded-bottom()
Rounds the two bottom corners of the element.
Requires
@mixin rounded-left()
Rounds the two left corners of the element.
Requires
@mixin not-rounded()
Removes rounded corners from the element.