_divider.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. /* Divider style 01 */
  2. .divider-style-01 {
  3. .divider-shadow {
  4. &:after, &:before {
  5. flex: 1 1 auto;
  6. -webkit-box-flex:1 1 auto;
  7. -ms-flex:1 1 auto;
  8. content: "";
  9. height: 10px;
  10. margin-top: 7px;
  11. box-shadow: 0 6px 10px -10px #8c8b8b inset;
  12. }
  13. }
  14. .divider-border {
  15. &:after, &:before {
  16. flex: 1 1 auto;
  17. -webkit-box-flex:1 1 auto;
  18. -ms-flex:1 1 auto;
  19. content: "";
  20. height: 10px;
  21. margin-top: 7px;
  22. border-top: 1px solid #E4E4E4;
  23. }
  24. }
  25. }
  26. /* Divider style 02 */
  27. .divider-style-02 {
  28. .divider-dot {
  29. position: relative;
  30. span {
  31. content: "";
  32. position: absolute;
  33. z-index: 1;
  34. top: 50%;
  35. left: 50%;
  36. margin: -10px 0 0 -13px;
  37. width: 25px;
  38. height: 25px;
  39. box-shadow: inset 0 0 0 6px white;
  40. }
  41. &:after {
  42. top: 0;
  43. content: "";
  44. height: 100%;
  45. width: 1px;
  46. flex: 1 1 auto;
  47. -webkit-box-flex:1 1 1px;
  48. -ms-flex:1 1 1px;
  49. border-left: 1px solid #E4E4E4;
  50. position: absolute;
  51. left: 0;
  52. right: 0;
  53. margin: 0 auto;
  54. }
  55. }
  56. }
  57. /* Divider style 03 */
  58. .divider-style-03 {
  59. &.divider-style-03-01 {
  60. border-top: 1px solid;
  61. width: 100%;
  62. }
  63. &.divider-style-03-02 {
  64. border-top: 1px dashed;
  65. }
  66. &.divider-style-03-03 {
  67. border-top: 4px double;
  68. }
  69. &.divider-style-03-04 {
  70. border-top: 2px dashed;
  71. }
  72. &.divider-style-03-05 {
  73. border-top: 2px dotted;
  74. }
  75. }