149 lines
4.3 KiB
SCSS
149 lines
4.3 KiB
SCSS
|
|
@import '~@/uni_modules/lime-style/index.scss';
|
|
// @import './icon';
|
|
@import '../../../lime-icon/components/l-icon/icon.scss';
|
|
// @import '~@/uni_modules/lime-icon/components/l-icon/icon.scss';
|
|
// @import '~@/uni_modules/lime-style/mixins/hairline.scss';
|
|
|
|
/* #ifdef uniVersion >= 4.75 */
|
|
$use-css-var: true;
|
|
/* #endif */
|
|
$cascader: #{$prefix}-cascader;
|
|
|
|
$cascader-title-color: create-var(cascader-title-color, $text-color-1);
|
|
$cascader-icon-color: create-var(cascader-icon-color, $primary-color);
|
|
$cascader-icon-size: create-var(cascader-icon-size, 24px);
|
|
$cascader-bg-color: create-var(cascader-bg-color, $bg-color-container);
|
|
$cascader-border-radius: create-var(cascader-border-radius, $border-radius-lg);
|
|
$cascader-height: create-var(cascader-height, 320px);
|
|
$cascader-cell-height: create-var(cascader-cell-height, 50px);
|
|
$cascader-cell-padding-x: create-var(cascader-cell-cell-padding, $spacer);
|
|
$cascader-cell-padding-y: create-var(cascader-cell-cell-padding, $spacer-sm);
|
|
$cascader-cell-title-color: create-var(cascader-cell-title-color, $text-color-1);
|
|
$cascader-cell-title-font-size: create-var(cascader-cell-title-font-size, $font-size-md);
|
|
|
|
$cascader-disabled-color: create-var(cascader-disabled-color, $text-color-3);
|
|
$cascader-title-height: create-var(cascader-title-height, 48px);
|
|
$cascader-title-padding-top: create-var(cascader-title-padding-top, $spacer);
|
|
$cascader-title-padding-bottom: create-var(cascader-title-padding-bottom, $spacer-xs);
|
|
$cascader-title-font-size: create-var(cascader-title-font-size, 18px);
|
|
$cascader-options-title-color: create-var(cascader-options-title-color, $text-color-3);
|
|
$cascader-close-icon-color: create-var(cascader-close-icon-color, $text-color-2);
|
|
|
|
|
|
.#{$cascader} {
|
|
background-color: $cascader-bg-color;
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
color: $cascader-title-color;
|
|
/* #endif */
|
|
// border-radius: 12px 12px 0 0;
|
|
@include border-radius($cascader-border-radius $cascader-border-radius 0 0);
|
|
&__title {
|
|
/* #ifndef UNI-APP-X */
|
|
display: flex;
|
|
// width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* #endif */
|
|
position: relative;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
color: $cascader-title-color;
|
|
// line-height: $cascader-title-height;
|
|
// height: $cascader-title-height;
|
|
// padding: 14px 0;
|
|
@include padding($cascader-title-padding-top 0 $cascader-title-padding-bottom);
|
|
font-size: $cascader-title-font-size;
|
|
}
|
|
&__close {
|
|
&-btn {
|
|
right: $cascader-cell-padding-x;
|
|
top: 12px;
|
|
position: absolute;
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
color: $cascader-close-icon-color !important;
|
|
/* #endif */
|
|
}
|
|
&-icon {
|
|
font-family: $prefix;
|
|
font-size: $cascader-icon-size;
|
|
color: $cascader-close-icon-color !important;
|
|
}
|
|
}
|
|
&__content {
|
|
// height: $cascader-content-height;
|
|
}
|
|
&__options {
|
|
// flex: 1;
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
width: 100vw;
|
|
/* #endif */
|
|
/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
width: 750rpx;
|
|
/* #endif */
|
|
height: $cascader-height;
|
|
&-container {
|
|
/* #ifndef UNI-APP-X */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
transition-property: transform;
|
|
transition-timing-function: ease;
|
|
transition-duration: 300ms;
|
|
}
|
|
&-title {
|
|
color: $cascader-options-title-color;
|
|
font-size: $font-size;
|
|
line-height: 22px;
|
|
padding-top: 16px;
|
|
padding-left: 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
&__cell {
|
|
/* #ifndef UNI-APP-X */
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
/* #endif */
|
|
// padding: $cascader-cell-padding;
|
|
@include padding($cascader-cell-padding-y $cascader-cell-padding-x);
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: $cascader-cell-height;
|
|
&--disabled {
|
|
color: $cascader-disabled-color;
|
|
}
|
|
&-title {
|
|
font-size: $cascader-cell-title-font-size;
|
|
color: $cascader-cell-title-color;
|
|
}
|
|
&-icon {
|
|
font-size: $cascader-icon-size;
|
|
color: $cascader-icon-color;
|
|
}
|
|
}
|
|
|
|
// 多选模式下的checkbox样式
|
|
&__checkbox {
|
|
width: 100%;
|
|
/* #ifndef UNI-APP-X */
|
|
display: flex;
|
|
/* #endif */
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
|
|
.l-checkbox {
|
|
width: 100%;
|
|
|
|
.l-checkbox__label {
|
|
flex: 1;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
&__footer {
|
|
padding: 16px;
|
|
}
|
|
|
|
} |