Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4211195

Browse files
adding corner prop
1 parent d4271b3 commit 4211195

File tree

6 files changed

+53
-2
lines changed

6 files changed

+53
-2
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,10 @@ function App() {
130130
- type : `String`
131131
- description : name attribute for the input element
132132
- default : `""`
133+
- **corner?**
134+
- type : `Boolean`
135+
- description : if it is true then the search box gets border-radius
136+
- default : `True`
133137

134138
## Test
135139

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@
1717
"UI component",
1818
"react component",
1919
"dynamic suggestions",
20-
"custom suggestions",
20+
"constant suggestions",
2121
"react search",
22+
"react searchBox",
2223
"popup suggestions",
2324
"user experience",
2425
"interactive search",

‎style/react-custom-search-list.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,29 @@
8585
display: block;
8686
}
8787

88+
.corner .rc-search-suggestions-container {
89+
border-radius: 5px;
90+
}
91+
.corner [data-popper-placement|=bottom] {
92+
border-bottom-left-radius: 5px;
93+
border-bottom-right-radius: 5px;
94+
}
95+
.corner [data-popper-placement|=bottom] + .rc-search-suggestions-container {
96+
border-bottom-left-radius: 0px;
97+
border-bottom-right-radius: 0px;
98+
}
99+
.corner [data-popper-placement|=top] {
100+
border-top-left-radius: 5px;
101+
border-top-right-radius: 5px;
102+
}
103+
.corner [data-popper-placement|=top] + .rc-search-suggestions-container {
104+
border-top-left-radius: 0px;
105+
border-top-right-radius: 0px;
106+
}
107+
88108
.underline .rc-search-suggestions-container {
89109
border-top: none;
90110
border-left: none;
91111
border-right: none;
112+
border-radius: 0px;
92113
}

‎style/react-custom-search-list.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style/scss/modules/_base.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,12 +96,36 @@
9696
}
9797
}
9898
}
99+
@mixin corner {
100+
.corner {
101+
.rc-search-suggestions-container {
102+
border-radius: 5px;
103+
}
104+
[data-popper-placement|='bottom'] {
105+
border-bottom-left-radius: 5px;
106+
border-bottom-right-radius: 5px;
107+
& + .rc-search-suggestions-container {
108+
border-bottom-left-radius: 0px;
109+
border-bottom-right-radius: 0px;
110+
}
111+
}
112+
[data-popper-placement|='top'] {
113+
border-top-left-radius: 5px;
114+
border-top-right-radius: 5px;
115+
& + .rc-search-suggestions-container {
116+
border-top-left-radius: 0px;
117+
border-top-right-radius: 0px;
118+
}
119+
}
120+
}
121+
}
99122
@mixin underline {
100123
.underline {
101124
.rc-search-suggestions-container {
102125
border-top: none;
103126
border-left: none;
104127
border-right: none;
128+
border-radius: 0px;
105129
}
106130
}
107131
}

‎style/scss/react-custom-search-list.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
@include base.main;
33
@include base.divider;
44
@include base.panel;
5+
@include base.corner;
56
@include base.underline;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /