123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- // Divider
- .divider{
- display: block;
- text-align: center;
- overflow: hidden;
- white-space: nowrap;
- margin: 1rem 0;
- // divider text display prop
- .divider-text{
- position: relative;
- display: inline-block;
- font-size: .9375rem;
- padding: 0 1rem;
- background-color: $white;
- // divider icon font size
- i{
- font-size: 1rem;
- }
- // divider border
- &:before,&:after{
- content: "";
- position: absolute;
- top: 50%;
- width: 9999px;
- border-top: 1px solid rgba($pure-black, .1)
- }
- // divider spacing
- &:before{
- right: 100%;
- }
- &:after{
- left: 100%;
- }
- }
- // divider positions config
- &.divider-left{
- .divider-text{
- float: left;
- padding-left: 0;
- &:before{
- display: none;
- }
- }
- }
- &.divider-left-center{
- .divider-text{
- left: -25%;
- }
- }
- &.divider-right{
- .divider-text{
- float: right;
- padding-right: 0;
- &:after{
- display: none;
- }
- }
- }
- &.divider-right-center{
- .divider-text{
- right: -25%;
- }
- }
- // divider styles
- &.divider-dotted{
- .divider-text{
- &:before,&:after{
- border-style: dotted;
- border-width: 1px;
- border-top-width: 0;
- border-color: rgba($pure-black,1);
- }
- }
- }
- &.divider-dashed{
- .divider-text{
- &:before,&:after{
- border-style: dashed;
- border-width: 1px;
- border-top-width: 0;
- border-color: rgba($pure-black,1);
- }
- }
- }
- }
|