@persagy2/meri-design/custom/theme/Breadcrumb.styl

fork from meri-design and extend it.

/*!
 * @@persagy2/meri-design v1.4.9-extend.2
 * (c) 2019-2020 xiongshuang
 * Released under the MIT License.
 * 2022-12-07 10:33:25
 */
.fadeDownUpUi-enter-active
  animation: fadeInDownUi .3s ease-out

.fadeDownUpUi-leave-active
  animation: fadeOutUpUi .3s ease-in

@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
.p-tooltip-box
  position: absolute
  padding: 8px 12px
  border: 1px solid $grey-300
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  background-color: $theme
  color: $grey-900
  font-size: 12px
  pointer-events: none

.p-breadcrumb
  display: flex
  align-items: center
  font-size: 0

.p-breadcrumb .p-breadcrumb-item .p-breadcrumb-item-text
  display: inline-block
  vertical-align: middle
  height: 24px
  line-height: 24px
  color: $grey-500
  font-size: 14px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  cursor: pointer
  transition: color .3s

.p-breadcrumb .p-breadcrumb-item .p-breadcrumb-item-text:hover
  color: $blue-500

.p-breadcrumb .p-breadcrumb-item .p-breadcrumb-item-active
  color: $grey-900

.p-breadcrumb .p-breadcrumb-item .p-breadcrumb-item-width
  max-width: 44px

.p-breadcrumb .p-breadcrumb-item .p-breadcrumb-item-max-width
  max-width: 100px

.p-breadcrumb .p-breadcrumb-item .p-breadcrumb-arrow
  display: inline-block
  vertical-align: middle
  margin-left: 4px
  margin-right: 4px
  width: 8px
  height: 24px
  line-height: 24px

.p-breadcrumb .p-breadcrumb-item .p-breadcrumb-arrow svg
  vertical-align: middle
  width: 8px
  height: 14px