bulmil/dist/collection/core/layout/divider/divider.css


.is-divider, .is-divider-vertical {
  display: block;
  position: relative;
  border-top: 0.1rem solid #dbdbdb;
  height: 0.1rem;
  margin: 2rem 0;
  text-align: center;
}

.is-divider[data-content]::after, .is-divider-vertical[data-content]::after {
  background: white;
  color: #b5b5b5;
  content: attr(data-content);
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.4rem 0.8rem;
  -webkit-transform: translateY(-1.1rem);
  -ms-transform: translateY(-1.1rem);
  transform: translateY(-1.1rem);
  text-align: center;
}

@media screen and (min-width: 769px), print {
  .is-divider-vertical {
    display: block;
    -ms-flex: none;
        flex: none;
    width: auto;
    height: auto;
    padding: 2rem;
    margin: 0;
    position: relative;
    border-top: none;
    min-height: 2rem;
  }
  .is-divider-vertical::before {
    border-left: 0.1rem solid #dbdbdb;
    bottom: 1rem;
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 1rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .is-divider-vertical[data-content]::after {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0.1rem;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
  }
}

.is-divider.is-white,
.is-divider-vertical.is-white {
  border-top-color: white;
}
.is-divider.is-white[data-content]::after, .is-divider.is-white[data-content]::after,
.is-divider-vertical.is-white[data-content]::after,
.is-divider-vertical.is-white[data-content]::after {
  background: #0a0a0a;
  color: white;
}
.is-divider.is-white::before,
.is-divider-vertical.is-white::before {
  border-left-color: white;
}
.is-divider.is-black,
.is-divider-vertical.is-black {
  border-top-color: #0a0a0a;
}
.is-divider.is-black[data-content]::after, .is-divider.is-black[data-content]::after,
.is-divider-vertical.is-black[data-content]::after,
.is-divider-vertical.is-black[data-content]::after {
  background: white;
  color: #0a0a0a;
}
.is-divider.is-black::before,
.is-divider-vertical.is-black::before {
  border-left-color: #0a0a0a;
}
.is-divider.is-light,
.is-divider-vertical.is-light {
  border-top-color: whitesmoke;
}
.is-divider.is-light[data-content]::after, .is-divider.is-light[data-content]::after,
.is-divider-vertical.is-light[data-content]::after,
.is-divider-vertical.is-light[data-content]::after {
  background: rgba(0, 0, 0, 0.7);
  color: whitesmoke;
}
.is-divider.is-light::before,
.is-divider-vertical.is-light::before {
  border-left-color: whitesmoke;
}
.is-divider.is-dark,
.is-divider-vertical.is-dark {
  border-top-color: #363636;
}
.is-divider.is-dark[data-content]::after, .is-divider.is-dark[data-content]::after,
.is-divider-vertical.is-dark[data-content]::after,
.is-divider-vertical.is-dark[data-content]::after {
  background: #fff;
  color: #363636;
}
.is-divider.is-dark::before,
.is-divider-vertical.is-dark::before {
  border-left-color: #363636;
}
.is-divider.is-primary,
.is-divider-vertical.is-primary {
  border-top-color: #5851ff;
}
.is-divider.is-primary[data-content]::after, .is-divider.is-primary[data-content]::after,
.is-divider-vertical.is-primary[data-content]::after,
.is-divider-vertical.is-primary[data-content]::after {
  background: #fff;
  color: #5851ff;
}
.is-divider.is-primary::before,
.is-divider-vertical.is-primary::before {
  border-left-color: #5851ff;
}
.is-divider.is-link,
.is-divider-vertical.is-link {
  border-top-color: #5851ff;
}
.is-divider.is-link[data-content]::after, .is-divider.is-link[data-content]::after,
.is-divider-vertical.is-link[data-content]::after,
.is-divider-vertical.is-link[data-content]::after {
  background: #fff;
  color: #5851ff;
}
.is-divider.is-link::before,
.is-divider-vertical.is-link::before {
  border-left-color: #5851ff;
}
.is-divider.is-info,
.is-divider-vertical.is-info {
  border-top-color: #3298dc;
}
.is-divider.is-info[data-content]::after, .is-divider.is-info[data-content]::after,
.is-divider-vertical.is-info[data-content]::after,
.is-divider-vertical.is-info[data-content]::after {
  background: #fff;
  color: #3298dc;
}
.is-divider.is-info::before,
.is-divider-vertical.is-info::before {
  border-left-color: #3298dc;
}
.is-divider.is-success,
.is-divider-vertical.is-success {
  border-top-color: #48c774;
}
.is-divider.is-success[data-content]::after, .is-divider.is-success[data-content]::after,
.is-divider-vertical.is-success[data-content]::after,
.is-divider-vertical.is-success[data-content]::after {
  background: #fff;
  color: #48c774;
}
.is-divider.is-success::before,
.is-divider-vertical.is-success::before {
  border-left-color: #48c774;
}
.is-divider.is-warning,
.is-divider-vertical.is-warning {
  border-top-color: #ffdd57;
}
.is-divider.is-warning[data-content]::after, .is-divider.is-warning[data-content]::after,
.is-divider-vertical.is-warning[data-content]::after,
.is-divider-vertical.is-warning[data-content]::after {
  background: rgba(0, 0, 0, 0.7);
  color: #ffdd57;
}
.is-divider.is-warning::before,
.is-divider-vertical.is-warning::before {
  border-left-color: #ffdd57;
}
.is-divider.is-danger,
.is-divider-vertical.is-danger {
  border-top-color: #f14668;
}
.is-divider.is-danger[data-content]::after, .is-divider.is-danger[data-content]::after,
.is-divider-vertical.is-danger[data-content]::after,
.is-divider-vertical.is-danger[data-content]::after {
  background: #fff;
  color: #f14668;
}
.is-divider.is-danger::before,
.is-divider-vertical.is-danger::before {
  border-left-color: #f14668;
}
.is-divider.is-black-bis,
.is-divider-vertical.is-black-bis {
  border-top-color: #121212;
}
.is-divider.is-black-bis[data-content]::after, .is-divider.is-black-bis[data-content]::after,
.is-divider-vertical.is-black-bis[data-content]::after,
.is-divider-vertical.is-black-bis[data-content]::after {
  background: #fff;
  color: #121212;
}
.is-divider.is-black-bis::before,
.is-divider-vertical.is-black-bis::before {
  border-left-color: #121212;
}
.is-divider.is-black-ter,
.is-divider-vertical.is-black-ter {
  border-top-color: #242424;
}
.is-divider.is-black-ter[data-content]::after, .is-divider.is-black-ter[data-content]::after,
.is-divider-vertical.is-black-ter[data-content]::after,
.is-divider-vertical.is-black-ter[data-content]::after {
  background: #fff;
  color: #242424;
}
.is-divider.is-black-ter::before,
.is-divider-vertical.is-black-ter::before {
  border-left-color: #242424;
}
.is-divider.is-grey-darker,
.is-divider-vertical.is-grey-darker {
  border-top-color: #363636;
}
.is-divider.is-grey-darker[data-content]::after, .is-divider.is-grey-darker[data-content]::after,
.is-divider-vertical.is-grey-darker[data-content]::after,
.is-divider-vertical.is-grey-darker[data-content]::after {
  background: #fff;
  color: #363636;
}
.is-divider.is-grey-darker::before,
.is-divider-vertical.is-grey-darker::before {
  border-left-color: #363636;
}
.is-divider.is-grey-dark,
.is-divider-vertical.is-grey-dark {
  border-top-color: #4a4a4a;
}
.is-divider.is-grey-dark[data-content]::after, .is-divider.is-grey-dark[data-content]::after,
.is-divider-vertical.is-grey-dark[data-content]::after,
.is-divider-vertical.is-grey-dark[data-content]::after {
  background: #fff;
  color: #4a4a4a;
}
.is-divider.is-grey-dark::before,
.is-divider-vertical.is-grey-dark::before {
  border-left-color: #4a4a4a;
}
.is-divider.is-grey,
.is-divider-vertical.is-grey {
  border-top-color: #7a7a7a;
}
.is-divider.is-grey[data-content]::after, .is-divider.is-grey[data-content]::after,
.is-divider-vertical.is-grey[data-content]::after,
.is-divider-vertical.is-grey[data-content]::after {
  background: #fff;
  color: #7a7a7a;
}
.is-divider.is-grey::before,
.is-divider-vertical.is-grey::before {
  border-left-color: #7a7a7a;
}
.is-divider.is-grey-light,
.is-divider-vertical.is-grey-light {
  border-top-color: #b5b5b5;
}
.is-divider.is-grey-light[data-content]::after, .is-divider.is-grey-light[data-content]::after,
.is-divider-vertical.is-grey-light[data-content]::after,
.is-divider-vertical.is-grey-light[data-content]::after {
  background: #fff;
  color: #b5b5b5;
}
.is-divider.is-grey-light::before,
.is-divider-vertical.is-grey-light::before {
  border-left-color: #b5b5b5;
}
.is-divider.is-grey-lighter,
.is-divider-vertical.is-grey-lighter {
  border-top-color: #dbdbdb;
}
.is-divider.is-grey-lighter[data-content]::after, .is-divider.is-grey-lighter[data-content]::after,
.is-divider-vertical.is-grey-lighter[data-content]::after,
.is-divider-vertical.is-grey-lighter[data-content]::after {
  background: rgba(0, 0, 0, 0.7);
  color: #dbdbdb;
}
.is-divider.is-grey-lighter::before,
.is-divider-vertical.is-grey-lighter::before {
  border-left-color: #dbdbdb;
}
.is-divider.is-white-ter,
.is-divider-vertical.is-white-ter {
  border-top-color: whitesmoke;
}
.is-divider.is-white-ter[data-content]::after, .is-divider.is-white-ter[data-content]::after,
.is-divider-vertical.is-white-ter[data-content]::after,
.is-divider-vertical.is-white-ter[data-content]::after {
  background: rgba(0, 0, 0, 0.7);
  color: whitesmoke;
}
.is-divider.is-white-ter::before,
.is-divider-vertical.is-white-ter::before {
  border-left-color: whitesmoke;
}
.is-divider.is-white-bis,
.is-divider-vertical.is-white-bis {
  border-top-color: #fafafa;
}
.is-divider.is-white-bis[data-content]::after, .is-divider.is-white-bis[data-content]::after,
.is-divider-vertical.is-white-bis[data-content]::after,
.is-divider-vertical.is-white-bis[data-content]::after {
  background: rgba(0, 0, 0, 0.7);
  color: #fafafa;
}
.is-divider.is-white-bis::before,
.is-divider-vertical.is-white-bis::before {
  border-left-color: #fafafa;
}