120 lines
3.3 KiB
SCSS
120 lines
3.3 KiB
SCSS
@import '@/uni_modules/lime-style/index.scss';
|
|
@import '@/uni_modules/lime-style/mixins/ellipsis.scss';
|
|
|
|
/* #ifdef uniVersion >= 4.75 */
|
|
$use-css-var: true;
|
|
/* #endif */
|
|
|
|
$item: #{$prefix}-tabbar-item;
|
|
|
|
// 尺寸变量
|
|
$tabbar-height: create-var(tabbar-height, 40px);
|
|
$tabbar-font-size: create-var(tabbar-font-size, $font-size-md);
|
|
$tabbar-min-font-size: create-var(tabbar-font-size, $font-size-sm);
|
|
|
|
// 颜色变量
|
|
$tabbar-color: create-var(tabbar-color, $text-color-1);
|
|
$tabbar-bg-color: create-var(tabbar-bg-color, $bg-color-container);
|
|
$tabbar-active-color: create-var(tabbar-active-color, $primary-color);
|
|
$tabbar-active-bg-color: create-var(tabbar-active-bg-color, $primary-color-1);
|
|
|
|
// 间距变量（新增）
|
|
$tabbar-item-margin-x: create-var(tabbar-item-margin-x, 0); // 水平margin
|
|
$tabbar-item-margin-y: create-var(tabbar-item-margin-y, 8px); // 垂直margin
|
|
$tabbar-item-padding-x: create-var(tabbar-item-padding-x, 12px); // 水平padding
|
|
$tabbar-item-padding-y: create-var(tabbar-item-padding-y, 0); // 垂直padding
|
|
$tabbar-item-crowded-padding-x: create-var(tabbar-item-crowded-padding-x, 8px); // 拥挤状态水平padding
|
|
|
|
/* #ifdef MP */
|
|
:host {
|
|
flex: 1;
|
|
}
|
|
/* #endif */
|
|
|
|
.#{$item} {
|
|
/* #ifndef UNI-APP-X && APP */
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
display: flex;
|
|
/* #endif */
|
|
|
|
flex: 1;
|
|
height: $tabbar-height;
|
|
position: relative;
|
|
// margin: $tabbar-item-margin-y $tabbar-item-margin-x; // 使用拆分后的margin变量
|
|
@include margin($tabbar-item-margin-y $tabbar-item-margin-x);
|
|
background-color: $tabbar-bg-color;
|
|
// padding: $tabbar-item-padding-y $tabbar-item-padding-x; // 使用拆分后的padding变量
|
|
@include padding($tabbar-item-padding-y $tabbar-item-padding-x);
|
|
overflow: visible;
|
|
|
|
&__icon {
|
|
&-wrap {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
&--crowded {
|
|
// padding: $tabbar-item-padding-y $tabbar-item-crowded-padding-x; // 拥挤状态使用专用变量
|
|
@include padding($tabbar-item-padding-y $tabbar-item-padding-x);
|
|
}
|
|
|
|
&--round {
|
|
border-radius: 99px;
|
|
}
|
|
|
|
&__content {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 16rpx;
|
|
overflow: visible;
|
|
|
|
&--checked {
|
|
/* #ifndef UNI-APP-X && APP */
|
|
color: $tabbar-active-color;
|
|
/* #endif */
|
|
/* #ifndef UNI-APP-X */
|
|
.l-tabbar-item__text {
|
|
color: $tabbar-active-color;
|
|
font-weight: 700;
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--disabled {
|
|
opacity: 0.5;
|
|
}
|
|
&--tag {
|
|
border-radius: 99px;
|
|
}
|
|
|
|
&--tag#{&}--checked {
|
|
background-color: $tabbar-active-bg-color;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
color: $tabbar-color;
|
|
}
|
|
|
|
&__text {
|
|
color: $tabbar-color;
|
|
&--small {
|
|
font-size: $tabbar-min-font-size;
|
|
padding-top: 4px;
|
|
}
|
|
&--only {
|
|
font-size: $tabbar-font-size;
|
|
}
|
|
&--checked {
|
|
color: $tabbar-active-color;
|
|
font-weight: 700;
|
|
}
|
|
&--ellipsis {
|
|
@include ellipsisLn(1);
|
|
}
|
|
}
|
|
} |