Skip to content

Commit 6b6b54b

Browse files
ArgoZhangArgoZhang
committed
refactor: 调整样式
1 parent 7e44d0f commit 6b6b54b

2 files changed

Lines changed: 63 additions & 41 deletions

File tree

‎src/components/BootstrapBlazor.Region/Components/SelectCity.razor.css‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,18 @@
99
.dropdown-menu {
1010
--bs-dropdown-padding-y: .5rem;
1111
--bs-dropdown-padding-x: .5rem;
12-
max-width: 400px;
13-
max-height: 400px;
12+
--bb-region-body-color: #495057;
13+
--bb-region-body-hover-bg-color: #e9ecef;
14+
--bb-region-body-active-bg-color: #dee2e6;
15+
--bb-region-body-hover-color: #000;
16+
--bb-region-body-active-color: #000;
17+
--bb-region-body-width: 400px;
18+
--bb-region-body-height: 400px;
19+
--bb-region-body-padding: .5rem;
20+
--bb-region-body-item-padding: 3px 12px;
21+
--bb-region-body-gap: 5px;
22+
width: var(--bb-region-body-width);
23+
height: var(--bb-region-body-height);
1424
overflow-y: auto;
1525
}
1626

@@ -19,43 +29,45 @@
1929
padding: 0;
2030
display: flex;
2131
flex-wrap: wrap;
22-
gap: 5px;
32+
gap: var(--bb-region-body-gap);
2333
}
2434

2535
.dropdown-menu li {
2636
list-style: none;
2737
transition: background-color .3s linear, color .3s linear;
2838
cursor: pointer;
29-
padding: 3px 12px;
39+
padding: var(--bb-region-body-item-padding);
3040
border-radius: var(--bs-border-radius);
31-
color: #777;
41+
color: var(--bb-region-body-color);
3242
}
3343

3444
.dropdown-menu li:hover {
35-
background-color: #e9ecef;
36-
color: #000;
45+
background-color: var(--bb-region-body-hover-bg-color);
46+
color: var(--bb-region-body-hover-color);
3747
}
3848

3949
.dropdown-menu li.active {
40-
background-color: #e3e3e3;
41-
color: #000;
50+
background-color: var(--bb-region-body-active-bg-color);
51+
color: var(--bb-region-body-active-color);
4252
}
4353

54+
[data-bs-theme="dark"] .dropdown-menu {
55+
--bb-region-body-color: #ddd;
56+
--bb-region-body-hover-color: #fff;
57+
--bb-region-body-active-color: #fff;
58+
--bb-region-body-hover-bg-color: #495057;
59+
--bb-region-body-active-bg-color: #6c757d;
60+
}
61+
4462
.bb-region-city-item:not(:last-child) {
4563
margin-bottom: 3px;
4664
padding-bottom: 3px;
4765
border-bottom: 1px solid var(--bs-border-color);
4866
}
4967

5068
.bb-region-city-title {
51-
padding: 3px 12px;
52-
color: #000;
69+
padding: var(--bb-region-body-item-padding);
70+
color: var(--bb-region-body-color);
5371
font-weight: bold;
5472
cursor: pointer;
5573
}
56-
57-
[data-bs-theme="dark"] .bb-region-body {
58-
--bb-region-body-color: #b5b5c3;
59-
--bb-region-body-hover-color: #000;
60-
--bb-region-body-active-color: #000;
61-
}

‎src/components/BootstrapBlazor.Region/Components/SelectRegion.razor.css‎

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,4 @@
1-
.popover-region {
2-
--bb-region-body-color: #777;
3-
--bb-region-body-hover-color: #000;
4-
--bb-region-body-active-color: #000;
5-
}
6-
7-
[data-bs-theme="dark"] .bb-region-body {
8-
--bb-region-body-color: #b5b5c3;
9-
--bb-region-body-hover-color: #000;
10-
--bb-region-body-active-color: #000;
11-
}
12-
13-
.bb-region {
1+
.bb-region {
142
position: relative;
153
}
164

@@ -20,6 +8,18 @@
208

219
.dropdown-menu {
2210
--bs-dropdown-padding-y: 0;
11+
--bb-region-header-padding: 3px 12px;
12+
--bb-region-header-hover-bg-color: #e9ecef;
13+
--bb-region-header-active-bg-color: #dee2e6;
14+
--bb-region-body-color: #495057;
15+
--bb-region-body-hover-bg-color: #e9ecef;
16+
--bb-region-body-active-bg-color: #dee2e6;
17+
--bb-region-body-hover-color: #000;
18+
--bb-region-body-active-color: #000;
19+
--bb-region-body-width: 400px;
20+
--bb-region-body-padding: .5rem;
21+
--bb-region-body-item-padding: 3px 12px;
22+
--bb-region-body-gap: 5px;
2323
}
2424

2525
.dropdown-menu ul {
@@ -32,8 +32,18 @@
3232
transition: background-color .3s linear, color .3s linear;
3333
}
3434

35+
[data-bs-theme="dark"] .dropdown-menu {
36+
--bb-region-header-hover-bg-color: #495057;
37+
--bb-region-header-active-bg-color: #6c757d;
38+
--bb-region-body-color: #ddd;
39+
--bb-region-body-hover-color: #fff;
40+
--bb-region-body-active-color: #fff;
41+
--bb-region-body-hover-bg-color: #495057;
42+
--bb-region-body-active-bg-color: #6c757d;
43+
}
44+
3545
.bb-region-header {
36-
width: 400px;
46+
width: var(--bb-region-body-width);
3747
border-bottom: 1px solid var(--bs-border-color);
3848
}
3949

@@ -47,48 +57,48 @@
4757

4858
.bb-region-header ul li {
4959
cursor: pointer;
50-
padding: 3px 12px;
60+
padding: var(--bb-region-header-padding);
5161
border-radius: var(--bs-border-radius);
5262
}
5363

5464
.bb-region-header ul li.active {
55-
background-color: #e3e3e3;
65+
background-color: var(--bb-region-header-active-bg-color);
5666
color: var(--bb-region-body-active-color);
5767
}
5868

5969
.bb-region-header ul li:hover {
60-
background-color: #e3e3e3;
70+
background-color: var(--bb-region-header-hover-bg-color);
6171
color: var(--bb-region-body-hover-color);
6272
}
6373

6474
.bb-region-body {
65-
padding: .5rem;
66-
width: 400px;
75+
padding: var(--bb-region-body-padding);
76+
width: var(--bb-region-body-width);
6777
}
6878

6979
.bb-region-body ul {
7080
display: flex;
7181
flex-wrap: wrap;
72-
gap: 5px;
82+
gap: var(--bb-region-body-gap);
7383
}
7484

7585
.bb-region-body .bb-region-body-item:not(.active) {
7686
display: none;
7787
}
7888

7989
.bb-region-body ul li {
80-
padding: 3px 12px;
90+
padding: var(--bb-region-body-item-padding);
8191
border-radius: var(--bs-border-radius);
82-
cursor: pointer;
8392
color: var(--bb-region-body-color);
93+
cursor: pointer;
8494
}
8595

8696
.bb-region-body ul li:hover {
87-
background-color: #e9ecef;
97+
background-color: var(--bb-region-body-hover-bg-color);
8898
color: var(--bb-region-body-hover-color);
8999
}
90100

91101
.bb-region-body ul li.active {
92-
background-color: #e3e3e3;
102+
background-color: var(--bb-region-body-active-bg-color);
93103
color: var(--bb-region-body-active-color);
94104
}

0 commit comments

Comments
 (0)