divider.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. // Divider
  2. .divider{
  3. display: block;
  4. text-align: center;
  5. overflow: hidden;
  6. white-space: nowrap;
  7. margin: 1rem 0;
  8. // divider text display prop
  9. .divider-text{
  10. position: relative;
  11. display: inline-block;
  12. font-size: .9375rem;
  13. padding: 0 1rem;
  14. background-color: $white;
  15. // divider icon font size
  16. i{
  17. font-size: 1rem;
  18. }
  19. // divider border
  20. &:before,&:after{
  21. content: "";
  22. position: absolute;
  23. top: 50%;
  24. width: 9999px;
  25. border-top: 1px solid rgba($pure-black, .1)
  26. }
  27. // divider spacing
  28. &:before{
  29. right: 100%;
  30. }
  31. &:after{
  32. left: 100%;
  33. }
  34. }
  35. // divider positions config
  36. &.divider-left{
  37. .divider-text{
  38. float: left;
  39. padding-left: 0;
  40. &:before{
  41. display: none;
  42. }
  43. }
  44. }
  45. &.divider-left-center{
  46. .divider-text{
  47. left: -25%;
  48. }
  49. }
  50. &.divider-right{
  51. .divider-text{
  52. float: right;
  53. padding-right: 0;
  54. &:after{
  55. display: none;
  56. }
  57. }
  58. }
  59. &.divider-right-center{
  60. .divider-text{
  61. right: -25%;
  62. }
  63. }
  64. // divider styles
  65. &.divider-dotted{
  66. .divider-text{
  67. &:before,&:after{
  68. border-style: dotted;
  69. border-width: 1px;
  70. border-top-width: 0;
  71. border-color: rgba($pure-black,1);
  72. }
  73. }
  74. }
  75. &.divider-dashed{
  76. .divider-text{
  77. &:before,&:after{
  78. border-style: dashed;
  79. border-width: 1px;
  80. border-top-width: 0;
  81. border-color: rgba($pure-black,1);
  82. }
  83. }
  84. }
  85. }