oak-frontend-base/es/components/list/index.less

92 lines
1.9 KiB
Plaintext

@import '../../config/styles/mp/index.less';
@import '../../config/styles/mp/mixins.less';
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: var(--oak-bg-color-page);
}
.loading{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
}
.list-container {
display: flex;
flex-direction: column;
flex: 1;
margin-bottom: 20rpx;
.safe-area-inset-bottom();
}
.sticky-view {
z-index: 100;
position: sticky;
top: 0;
background-color: #fff;
}
.search-view {
padding: 20rpx;
}
.card {
margin: 20rpx;
margin-bottom: 0rpx;
border-radius: 20rpx;
display: flex;
flex-direction: column;
background-color: #fff;
.title-view {
padding: 20rpx 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 0.8px solid rgba(200, 200, 200, 0.2);
.title {
display: flex;
align-items: center;
font-weight: 600;
}
}
.card-content {
padding: 40rpx;
display: flex;
flex-direction: column;
}
.text-view {
display: flex;
align-items: center;
justify-content: space-between;
.label {
color: #888;
}
}
.state-view {
display: flex;
align-items: center;
}
.badge {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--oak-color-success);
margin-right: 5px;
}
.success {
background-color: var(--oak-color-success);
}
.error {
background-color: var(--oak-color-error);
}
.warning {
background-color: var(--oak-color-warning);
}
.default {
background-color: var(--oak-color-primary);
}
}
[class='text-view']:not(:last-child) {
margin-bottom: 16rpx;
}