// Horizontal rule $hr-style: line; // [ line / type ] $hr-type-content: '***'; // [ '***' ] $hr-type-char-spacing: .2em; // [ .2em ] $hr-margin: 2; $hr-margin-desktop: $hr-margin; $hr-color: $color-font-body; $hr-width: 100; // [ 100 ] — In pixels, only for line style $hr-height: 4; // [ 2 ] — In pixels, only for line style
hr {
@include margin-top($hr-margin); @include margin-bottom($hr-margin); box-sizing: content-box; border: 0; color: $hr-color; display: block; height: #{$leading + 'px'}; height: #{$leading-rem + 'rem'}; margin-right: auto; margin-left: auto; @media screen and (min-width: #{ $max-width + 5 + 'em'}) { $leading: $leading-desktop; $leading-rem: $leading-rem-desktop; @import '../mixins/margin'; @include margin-top($hr-margin); @include margin-bottom($hr-margin); height: #{$leading + 'px'}; height: #{$leading-rem + 'rem'}; } @if $hr-style == 'line' { background-size: 100% #{$leading + 'px'}; background-size: 100% #{$leading-rem + 'rem'}; background-image: linear-gradient(to bottom, transparent 1px, transparent #{ 0.5 * $leading - (0.5 * $hr-height) + 'px'}, $hr-color #{ 0.5 * $leading - (0.5 * $hr-height) + 'px'}, $hr-color #{ (0.5 * $leading - (0.5 * $hr-height)) + $hr-height + 'px'}, transparent #{ (0.5 * $leading - (0.5 * $hr-height)) + $hr-height + 'px'}, transparent #{$leading + 'px'}); @if $hr-width == null { width: 100%; } @else { width: #{$hr-width + 'px'}; } } @media screen and (min-width: #{ $max-width + 5 + 'em'}) { $leading: $leading-desktop; $leading-rem: $leading-rem-desktop; $hr-margin: $hr-margin-desktop; @if $hr-style == 'line' { background-size: 100% #{$leading + 'px'}; background-size: 100% #{$leading-rem + 'rem'}; background-image: linear-gradient(to bottom, transparent 1px, transparent #{ .5 * $leading - (.5 * $hr-height) + 'px'}, $hr-color #{ .5 * $leading - (.5 * $hr-height) + 'px'}, $hr-color #{ (.5 * $leading - (.5 * $hr-height)) + $hr-height + 'px'}, transparent #{ (.5 * $leading - (.5 * $hr-height)) + $hr-height + 'px'}, transparent #{$leading + 'px'}); } } @if $hr-style == 'type' { text-align: center; &:before { content: $hr-type-content; letter-spacing: $hr-type-char-spacing; } }
}