更新:登录功能
This commit is contained in:
148
uni_modules/wot-design-uni/components/wd-grid-item/index.scss
Normal file
148
uni_modules/wot-design-uni/components/wd-grid-item/index.scss
Normal file
@@ -0,0 +1,148 @@
|
||||
@import "../common/abstracts/variable";
|
||||
@import "../common/abstracts/mixin";
|
||||
|
||||
.wot-theme-dark {
|
||||
@include b(grid-item) {
|
||||
|
||||
@include when(border) {
|
||||
&::before {
|
||||
background-color: $-dark-border-color;
|
||||
}
|
||||
&::after {
|
||||
background-color: $-dark-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 第一行元素
|
||||
@include when(first) {
|
||||
&::after {
|
||||
background-color: $-dark-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include e(content) {
|
||||
background-color: $-dark-background2;
|
||||
|
||||
@include m(hover) {
|
||||
background-color: $-grid-item-hover-bg-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(grid-item) {
|
||||
height: 100%;
|
||||
font-size: $-grid-item-fs;
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
@include when(border) {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
transform: scaleY(0.5);
|
||||
background-color: $-grid-item-border-color;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: scaleX(0.5);
|
||||
height: 100%;
|
||||
background-color: $-grid-item-border-color;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 第一行元素
|
||||
@include when(first) {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: scaleX(0.5);
|
||||
height: 100%;
|
||||
background-color: $-grid-item-border-color;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 每行右侧的元素
|
||||
@include when(right) {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(last) {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include e(wrapper) {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
height: 100%;
|
||||
padding: $-grid-item-padding;
|
||||
background-color: $-grid-item-bg;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@include when(square) {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@include when(round) {
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border: 1px solid $-grid-item-border-color;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(hover) {
|
||||
background-color: $-grid-item-hover-bg !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(text) {
|
||||
margin-top: 8px;
|
||||
font-size: $-grid-item-fs;
|
||||
line-height: $-grid-item-fs;
|
||||
@include lineEllipsis;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user