bmui
Version:
Bluemoon Moon Components
77 lines (76 loc) • 1.64 kB
text/stylus
.{$PREFIX}-segment
color: #a3e2ff
font-size: $size3
min-height: 34px
display: flex
overflow: hidden
overflow-x: auto
background-color: $color_main1
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5)
&-item
flex-shrink: 0
min-width: 25%
width: 25%
max-width: 100%
for i in 1..4
&:first-child:nth-last-child({i}), &:first-child:nth-last-child({i}) ~ &
width: unit(100% / i, '%')
display: flex
justify-content: center
&-box
display: flex
align-items: center
position: relative
padding: 0 10px
max-width: 100%
&-box2
position: relative
width: 100%
&-text
white-space: nowrap
width: 100%
text-overflow: ellipsis
overflow: hidden
&-redMark
font-size: 10px
color: #fff
background-color: $color_main2
position: absolute
top: -5px
right: -13px
width: 15px
height 15px
padding: 2px 5px
border-radius: 50%
&-single-mark
font-size: 10px
color: #fff
background-color: $color_main2
position: absolute
top: 0
right: -8px
padding: 2px 5px
border-radius: 6px / 50%
border-radius: calc(1ch + 3px) / 50%
transform: translate(50%, -40%)
&-mark
font-size: 10px
color: #fff
background-color: $color_main2
position: absolute
top: 0
right: -8px
padding: 2px 3px
border-radius: 6px / 50%
border-radius: calc(1ch + 3px) / 50%
transform: translate(50%, -40%)
&-active
color: #fff
&-active &-box:after
content: ""
position: absolute
bottom: 2px
left: 10px
right: 10px
height: 2px
background-color: #fff