204 lines
3.9 KiB
CSS
204 lines
3.9 KiB
CSS
/* 底栏壳层：轨道只位移，圆点/胶囊/细线用真实子节点，不用伪元素 */
|
|
.ttb--native {
|
|
width: 100%;
|
|
background: transparent;
|
|
}
|
|
.ttb {
|
|
order: 999;
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
.ttb-ph {
|
|
height: calc(60px + env(safe-area-inset-bottom));
|
|
background: transparent;
|
|
pointer-events: none;
|
|
}
|
|
.ttb-fixed {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 980;
|
|
background: transparent;
|
|
}
|
|
.ttb-shell {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 56px;
|
|
margin: 0 8px 4px;
|
|
border: 1px solid;
|
|
border-radius: 22px;
|
|
position: relative;
|
|
overflow: visible;
|
|
box-sizing: border-box;
|
|
}
|
|
.ttb-shell--plain {
|
|
margin: 0;
|
|
border-radius: 0;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
overflow: hidden;
|
|
}
|
|
.ttb-ind,
|
|
.ttb-dot {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 33.333%;
|
|
pointer-events: none;
|
|
background: transparent;
|
|
will-change: transform;
|
|
transition-property: transform;
|
|
}
|
|
.ttb-ind {
|
|
top: 0;
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
.ttb-ind--pill {
|
|
top: 6px;
|
|
height: calc(100% - 12px);
|
|
padding: 0 6px;
|
|
box-sizing: border-box;
|
|
}
|
|
.ttb-ind-core {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
}
|
|
.ttb-ind--line .ttb-ind-core {
|
|
position: absolute;
|
|
left: 28%;
|
|
right: 28%;
|
|
bottom: 6px;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
.ttb-dot {
|
|
top: 38px;
|
|
height: 6px;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.ttb-dot-core {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.ttb-item {
|
|
flex: 1;
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
.ttb-pair {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
}
|
|
.ttb-shell--plain .ttb-pair,
|
|
.ttb-shell--line .ttb-pair {
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
.ttb-ico-wrap {
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px;
|
|
flex-shrink: 0;
|
|
transition: opacity var(--ttb-ms, 320ms) var(--ttb-ease, cubic-bezier(0.32, 0.72, 0, 1)),
|
|
transform var(--ttb-ms, 320ms) var(--ttb-ease, cubic-bezier(0.32, 0.72, 0, 1));
|
|
}
|
|
.ttb-ico {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
transition: opacity var(--ttb-ms, 220ms) var(--ttb-ease, cubic-bezier(0.32, 0.72, 0, 1));
|
|
}
|
|
.ttb-ico--on {
|
|
opacity: 0;
|
|
}
|
|
.ttb-item.is-on .ttb-ico--on {
|
|
opacity: 1;
|
|
}
|
|
.ttb-item.is-on .ttb-ico--off {
|
|
opacity: 0;
|
|
}
|
|
.ttb-item.is-stroke-ok .ttb-ico--off,
|
|
.ttb-item.is-stroke-ok .ttb-ico--on {
|
|
opacity: 0;
|
|
}
|
|
.ttb-cv {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.ttb-cv.is-show {
|
|
opacity: 1;
|
|
}
|
|
.ttb-txt {
|
|
font-size: 11px;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
transition: opacity var(--ttb-ms, 280ms) var(--ttb-ease, cubic-bezier(0.32, 0.72, 0, 1)),
|
|
transform var(--ttb-ms, 320ms) var(--ttb-ease, cubic-bezier(0.32, 0.72, 0, 1)),
|
|
max-width var(--ttb-ms, 320ms) var(--ttb-ease, cubic-bezier(0.32, 0.72, 0, 1)),
|
|
margin var(--ttb-ms, 320ms) var(--ttb-ease, cubic-bezier(0.32, 0.72, 0, 1));
|
|
}
|
|
.ttb-shell--pill .ttb-txt {
|
|
max-width: 0;
|
|
margin-left: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
transform: translate3d(8px, 0, 0);
|
|
}
|
|
.ttb-shell--pill .is-on .ttb-txt {
|
|
max-width: 3em;
|
|
margin-left: 4px;
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
.ttb-shell--dot .ttb-pair {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.ttb-shell--dot .ttb-ico-wrap {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -14px;
|
|
margin-top: -14px;
|
|
}
|
|
.ttb-shell--dot .is-on .ttb-ico-wrap {
|
|
opacity: 0;
|
|
transform: translate3d(0, -8px, 0) scale(0.72);
|
|
}
|
|
.ttb-shell--dot .ttb-txt {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
opacity: 0;
|
|
transform: translate3d(-50%, 10px, 0);
|
|
}
|
|
.ttb-shell--dot .is-on .ttb-txt {
|
|
opacity: 1;
|
|
transform: translate3d(-50%, 0, 0);
|
|
}
|
|
.ttb-safe {
|
|
height: env(safe-area-inset-bottom);
|
|
background: transparent;
|
|
}
|