Skip to content

Commit fce0118

Browse files
alotropicoalotropico
committed
Change checkbox check color, fix table rounded corners bleeding corners
1 parent 140bc7f commit fce0118

File tree

2 files changed

+147
-147
lines changed

2 files changed

+147
-147
lines changed

‎src/Checkbox/style/Checkbox.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
&:checked::before {
3636
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
37-
box-shadow: inset 1em 1em var(--color-input-background);
37+
box-shadow: inset 1em 1em var(--color-text-on-primary);
3838
}
3939

4040
&:not(:disabled) {

‎src/Table/style/Default.module.scss‎

Lines changed: 146 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,176 @@
11
$radius: var(--border-radius-2);
22

33
.table {
4-
display: table;
5-
width: 100%;
6-
border-collapse: collapse;
7-
border-spacing: 0;
8-
border-radius: $radius;
9-
outline: 1px solid var(--color-border);
10-
table-layout: fixed;
4+
display: table;
5+
width: 100%;
6+
border-collapse: collapse;
7+
border-spacing: 0;
8+
border-radius: $radius;
9+
outline: 1px solid var(--color-border);
10+
table-layout: fixed;
11+
12+
.thead {
13+
display: table-header-group;
14+
}
15+
16+
.tbody {
17+
display: table-row-group;
18+
}
19+
.tr {
20+
display: table-row;
21+
}
22+
.td {
23+
display: table-cell;
24+
vertical-align: middle;
25+
max-width: 300px;
26+
height: 48px;
27+
}
28+
.caption {
29+
display: table-caption;
30+
border-bottom: 1px solid var(--color-border);
31+
background-color: var(--color-background-modal);
32+
padding: 0 var(--m-s);
33+
border-radius: var(--border-radius-2) var(--border-radius-2) 0 0;
34+
}
35+
36+
.thead {
37+
.tr {
38+
margin-bottom: var(--m-s);
1139

12-
.thead {
13-
display: table-header-group;
40+
.td {
41+
font-weight: 600;
42+
white-space: nowrap;
43+
padding: var(--m-xxxs) var(--m-s);
44+
border-bottom: 1px solid var(--color-border);
45+
color: var(--color-text-soft);
46+
}
1447
}
48+
}
1549

16-
.tbody {
17-
display: table-row-group;
50+
&.fixHeader {
51+
border-radius: 0 0 $radius $radius;
52+
.thead {
53+
position: sticky;
54+
top: 0;
55+
z-index: 1;
56+
outline: 1px solid var(--color-border);
1857
}
58+
}
59+
60+
&:not(.fixHeader) .thead {
1961
.tr {
20-
display: table-row;
21-
}
22-
.td {
23-
display: table-cell;
24-
vertical-align: middle;
25-
max-width: 300px;
26-
height: 48px;
27-
}
28-
.caption {
29-
display: table-caption;
30-
border-bottom: 1px solid var(--color-border);
31-
background-color: var(--color-background-modal);
32-
padding: 0 var(--m-s);
62+
// .td {
63+
// &:first-of-type {
64+
// border-radius: $radius 0 0 0;
65+
// }
66+
67+
// &:last-child {
68+
// border-radius: 0 $radius 0 0;
69+
// }
70+
// }
3371
}
72+
}
3473

35-
.thead {
36-
.tr {
37-
margin-bottom: var(--m-s);
38-
39-
.td {
40-
font-weight: 600;
41-
white-space: nowrap;
42-
padding: var(--m-xxxs) var(--m-s);
43-
border-bottom: 1px solid var(--color-border);
44-
background-color: var(--color-background-modal);
45-
color: var(--color-text-soft);
46-
}
74+
.tbody {
75+
.tr {
76+
.td {
77+
vertical-align: middle;
78+
padding: var(--m-xxxs) var(--m-s);
79+
font-weight: 400;
80+
81+
& > span,
82+
& > small {
83+
text-overflow: ellipsis;
84+
white-space: nowrap;
85+
display: block;
86+
overflow: hidden;
4787
}
48-
}
4988

50-
&.fixHeader {
51-
border-radius: 0 0 $radius $radius;
52-
.thead {
53-
position: sticky;
54-
top: 0;
55-
z-index: 1;
56-
outline: 1px solid var(--color-border);
89+
&.highlight {
90+
font-weight: 500;
5791
}
58-
}
5992

60-
&:not(.fixHeader) .thead {
61-
.tr {
62-
// .td {
63-
// &:first-of-type {
64-
// border-radius: $radius 0 0 0;
65-
// }
66-
67-
// &:last-child {
68-
// border-radius: 0 $radius 0 0;
69-
// }
70-
// }
93+
&.element {
94+
padding: 0 var(--m-s);
7195
}
72-
}
96+
}
97+
98+
// &:nth-child(odd) {
99+
// .td {
100+
// .zebra & {
101+
// background-color: var(--color-background);
102+
// }
103+
// }
104+
// }
105+
106+
&:hover {
107+
box-shadow: 0 0 0 2px var(--color-border);
108+
position: relative;
109+
}
110+
111+
&:last-child {
112+
border-radius: 0 0 $radius $radius;
73113

74-
.tbody {
75-
.tr {
76-
.td {
77-
vertical-align: middle;
78-
padding: var(--m-xxxs) var(--m-s);
79-
font-weight: 400;
80-
81-
& > span,
82-
& > small {
83-
text-overflow: ellipsis;
84-
white-space: nowrap;
85-
display: block;
86-
overflow: hidden;
87-
}
88-
89-
&.highlight {
90-
font-weight: 500;
91-
}
92-
93-
&.element {
94-
padding: 0 var(--m-s);
95-
}
96-
}
97-
98-
// &:nth-child(odd) {
99-
// .td {
100-
// .zebra & {
101-
// background-color: var(--color-background);
102-
// }
103-
// }
104-
// }
105-
106-
&:hover {
107-
box-shadow: 0 0 0 2px var(--color-border);
108-
position: relative;
109-
}
110-
111-
&:last-child {
112-
border-radius: 0 0 $radius $radius;
113-
114-
.td {
115-
border-bottom-color: transparent;
116-
117-
&:first-of-type {
118-
border-radius: 0 0 0 $radius;
119-
}
120-
&:last-child {
121-
border-radius: 0 0 $radius 0;
122-
}
123-
}
124-
}
114+
.td {
115+
border-bottom-color: transparent;
116+
117+
&:first-of-type {
118+
border-radius: 0 0 0 $radius;
119+
}
120+
&:last-child {
121+
border-radius: 0 0 $radius 0;
122+
}
125123
}
124+
}
126125
}
126+
}
127127

128-
&.zebra {
129-
background-color: var(--color-background-modal);
130-
.tbody {
131-
.tr {
132-
&:nth-child(odd) {
133-
.td {
134-
background-color: var(--color-background);
135-
}
136-
}
137-
}
128+
&.zebra {
129+
background-color: var(--color-background-modal);
130+
.tbody {
131+
.tr {
132+
&:nth-child(odd) {
133+
.td {
134+
background-color: var(--color-background);
135+
}
138136
}
137+
}
139138
}
139+
}
140140

141-
&.dark {
142-
background-color: var(--color-background);
143-
}
141+
&.dark {
142+
background-color: var(--color-background);
143+
}
144144

145-
&.light {
146-
background-color: var(--color-background-modal);
147-
}
145+
&.light {
146+
background-color: var(--color-background-modal);
147+
}
148148

149-
&.dark,
150-
&.light {
151-
.tbody {
152-
.tr {
153-
&:hover {
154-
box-shadow: none;
155-
position: static;
156-
}
157-
.td {
158-
}
159-
&:first-of-type .td {
160-
padding-top: var(--m-s);
161-
}
162-
&:last-of-type .td {
163-
padding-bottom: var(--m-s);
164-
}
165-
}
149+
&.dark,
150+
&.light {
151+
.tbody {
152+
.tr {
153+
&:hover {
154+
box-shadow: none;
155+
position: static;
156+
}
157+
.td {
158+
}
159+
&:first-of-type .td {
160+
padding-top: var(--m-s);
161+
}
162+
&:last-of-type .td {
163+
padding-bottom: var(--m-s);
166164
}
165+
}
167166
}
167+
}
168168
}
169169

170170
.emptyMsg {
171-
display: flex;
172-
justify-content: center;
173-
align-items: center;
174-
margin-top: 15vh;
175-
text-align: center;
171+
display: flex;
172+
justify-content: center;
173+
align-items: center;
174+
margin-top: 15vh;
175+
text-align: center;
176176
}

0 commit comments

Comments
 (0)