Jony/assets/css/joe.census.min.scss

123 lines
2.4 KiB
SCSS
Raw Normal View History

2021-05-17 02:27:29 +00:00
.joe_census {
&__basic {
display: grid;
2021-05-20 10:39:18 +00:00
grid-template-columns: repeat(2, 1fr);
2021-05-17 02:27:29 +00:00
gap: 15px;
2021-05-20 01:27:35 +00:00
margin-bottom: 15px;
2021-05-17 02:27:29 +00:00
&-item {
2021-05-20 10:39:18 +00:00
&.list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
.list {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--background);
box-shadow: var(--box-shadow);
border-radius: var(--radius-inner) var(--radius-wrap) var(--radius-wrap) var(--radius-inner);
padding: 15px 15px 12px;
.count {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
h6 {
font-size: 12px;
margin-bottom: 10px;
color: var(--seat);
}
p {
font-size: 28px;
font-weight: 700;
}
}
.icon {
fill: var(--classA);
}
&:nth-child(1) {
border-left: 5px solid #1cc88a;
color: #1cc88a;
}
&:nth-child(2) {
border-left: 5px solid #36b9cc;
color: #36b9cc;
}
&:nth-child(3) {
border-left: 5px solid #2196f3;
color: #2196f3;
}
&:nth-child(4) {
border-left: 5px solid #9c27b0;
color: #9c27b0;
}
2021-05-17 02:27:29 +00:00
}
}
2021-05-20 10:39:18 +00:00
&.category {
background: var(--background);
box-shadow: var(--box-shadow);
border-radius: var(--radius-wrap);
#category {
height: 230px;
}
2021-05-17 02:27:29 +00:00
}
}
}
2021-05-20 10:39:18 +00:00
&__lately {
background: var(--background);
margin-bottom: 15px;
border-radius: var(--radius-wrap);
box-shadow: var(--box-shadow);
.title {
display: flex;
align-items: center;
height: 45px;
padding: 0 12px;
border-bottom: 1px solid var(--classC);
color: var(--main);
justify-content: space-between;
user-select: none;
}
2021-05-21 02:14:21 +00:00
.content {
padding: 15px;
#lately {
height: 300px;
}
2021-05-20 10:39:18 +00:00
}
}
2021-05-20 01:27:35 +00:00
&__server {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
&-item {
background: var(--background);
box-shadow: var(--box-shadow);
border-radius: var(--radius-wrap);
.title {
display: flex;
align-items: center;
height: 45px;
padding: 0 12px;
2021-05-20 10:39:18 +00:00
border-bottom: 1px solid var(--classC);
2021-05-20 01:27:35 +00:00
color: var(--main);
justify-content: space-between;
user-select: none;
.count {
color: var(--minor);
font-size: 12px;
.split {
margin: 0 5px;
}
}
}
.content {
padding: 15px;
#work,
#flow {
2021-05-21 02:14:21 +00:00
height: 315px;
2021-05-20 01:27:35 +00:00
}
}
}
}
2021-05-17 02:27:29 +00:00
}