1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- // Divider
- .divider,
- .divider-vert {
- display: block;
- position: relative;
- &[data-content]::after {
- background: $bg-color-light;
- color: $gray-color;
- content: attr(data-content);
- display: inline-block;
- font-size: $font-size-sm;
- padding: 0 $unit-2;
- transform: translateY(-$font-size-sm + $border-width);
- }
- }
- .divider {
- border-top: $border-width solid $border-color-light;
- height: $border-width;
- margin: $unit-2 0;
- &[data-content] {
- margin: $unit-4 0;
- }
- }
- .divider-vert {
- display: block;
- padding: $unit-4;
- &::before {
- border-left: $border-width solid $border-color;
- bottom: $unit-2;
- content: "";
- display: block;
- left: 50%;
- position: absolute;
- top: $unit-2;
- transform: translateX(-50%);
- }
- &[data-content]::after {
- left: 50%;
- padding: $unit-1 0;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
- }
- }
|