Horizontal rule
Horizontal rule component pack for Seed
Install
npm install seed-hr --save
Dependencies
Usage
Once the pack has been @import, the seed-hr styles will automatically be added to the base <hr> HTML component.
<hr>You may also used the .c-hr component class to style your <hr> or another selector.
<hr class="c-hr">
<div class="c-hr"></div>Configurations
Below are the default Sass configuration variables for seed-hr. The variables can be found in the pack’s _config.scss file.
seed-hr/_config.scss// Namespaces
$seed-hr-namespace: "c-hr" !default;
// Config
$seed-hr-include-hr-selector: true !default;
// The above configuration determines this private variable
$__seed-hr-class: ".#{$seed-hr-image-namespace}";
// Include the image selector (Default)
@if $seed-hr-include-hr-selector == true {
$__seed-hr-class: ".#{$seed-hr-namespace}, hr";
}
// Styles
$seed-hr-border-color: #eee !default;
$seed-hr-border-size: 1px !default;
$seed-hr-border-style: solid !default;
$seed-hr-margin: 20px 0 !default;