Skip to content

Commit db00e16

Browse files
author
Sergio Baez
committed
feat: DPP-925 Re-arrange some css styles
1 parent 5938159 commit db00e16

8 files changed

+153
-105
lines changed

‎dist/react-select.css

+39-39
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,45 @@
7575
.Select .Select-arrow-zone:hover > .Select-arrow {
7676
border-top-color: #666;
7777
}
78+
.Select.is-unique {
79+
background-color: #fff;
80+
box-shadow: 0px 5px 7px 3px #a3a3a3;
81+
border-radius: 5px;
82+
}
83+
.Select.is-unique .Select-control {
84+
margin-top: 15px;
85+
margin-bottom: 15px;
86+
border-radius: 5px;
87+
}
88+
.Select.is-unique .Select-menu-outer {
89+
border: none;
90+
position: relative;
91+
}
92+
.Select.is-unique .Select-unique-input-value-wrapper {
93+
display: flex;
94+
justify-content: space-between;
95+
padding: 15px;
96+
border-bottom: 1px solid lightgray;
97+
}
98+
.Select.is-unique .Select-unique-input-list-wrapper {
99+
padding: 0 15px 0 15px;
100+
}
101+
.Select.is-unique .Select-unique-search-icon-wrapper {
102+
padding-left: 5px;
103+
}
104+
.Select.is-unique .Select-unique-selected-icon-wrapper {
105+
padding-right: 5px;
106+
display: inline-block;
107+
}
108+
.Select.is-unique .Select-unique-icon {
109+
display: inline-flex;
110+
vertical-align: middle;
111+
fill: lightgray;
112+
width: 20px;
113+
min-width: 20px;
114+
height: 20px;
115+
min-height: 20px;
116+
}
78117
.Select-control {
79118
background-color: #fff;
80119
border-color: #d9d9d9 #ccc #b3b3b3;
@@ -233,45 +272,6 @@
233272
overflow: hidden;
234273
float: left;
235274
}
236-
.Select.is-unique {
237-
background-color: #fff;
238-
box-shadow: 0px 5px 7px 3px #a3a3a3;
239-
border-radius: 5px;
240-
}
241-
.Select-control.is-unique {
242-
margin-top: 15px;
243-
margin-bottom: 15px;
244-
border-radius: 5px;
245-
}
246-
.Select-menu-outer.is-unique {
247-
border: none;
248-
position: relative;
249-
}
250-
.Select-unique-input-value-wrapper {
251-
display: flex;
252-
justify-content: space-between;
253-
padding: 15px;
254-
border-bottom: 1px solid lightgray;
255-
}
256-
.Select-unique-input-list-wrapper {
257-
padding: 0 15px 0 15px;
258-
}
259-
.Select-unique-search-icon-wrapper {
260-
padding-left: 5px;
261-
}
262-
.Select-unique-selected-icon-wrapper {
263-
padding-right: 5px;
264-
display: inline-block;
265-
}
266-
.Select-unique-icon {
267-
display: inline-flex;
268-
vertical-align: middle;
269-
fill: lightgray;
270-
width: 20px;
271-
min-width: 20px;
272-
height: 20px;
273-
min-height: 20px;
274-
}
275275
.Select-option.is-unique-selected {
276276
display: inline-block;
277277
background-color: initial;

‎dist/react-select.es.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1892,8 +1892,8 @@ var Select$1 = function (_React$Component) {
18921892
var _this8 = this;
18931893

18941894
var menu = this.renderMenu(options, valueArray, focusedOption);
1895-
var uniqueClass = this.props.type === 'unique' ? 'is-unique' : '';
1896-
var className = 'Select-menu-outer ' + uniqueClass;
1895+
// const uniqueClass = this.props.type === 'unique' ? 'is-unique' : '';
1896+
var className = 'Select-menu-outer';
18971897
if (!menu) {
18981898
return null;
18991899
}
@@ -1943,7 +1943,7 @@ var Select$1 = function (_React$Component) {
19431943
ref: function ref(_ref6) {
19441944
return _this9.control = _ref6;
19451945
},
1946-
className: 'Select-control is-unique',
1946+
className: 'Select-control',
19471947
style: this.props.style,
19481948
onKeyDown: this.handleKeyDown,
19491949
onMouseDown: this.handleMouseDown,

‎dist/react-select.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1897,8 +1897,8 @@ var Select$1 = function (_React$Component) {
18971897
var _this8 = this;
18981898

18991899
var menu = this.renderMenu(options, valueArray, focusedOption);
1900-
var uniqueClass = this.props.type === 'unique' ? 'is-unique' : '';
1901-
var className = 'Select-menu-outer ' + uniqueClass;
1900+
// const uniqueClass = this.props.type === 'unique' ? 'is-unique' : '';
1901+
var className = 'Select-menu-outer';
19021902
if (!menu) {
19031903
return null;
19041904
}
@@ -1948,7 +1948,7 @@ var Select$1 = function (_React$Component) {
19481948
ref: function ref(_ref6) {
19491949
return _this9.control = _ref6;
19501950
},
1951-
className: 'Select-control is-unique',
1951+
className: 'Select-control',
19521952
style: this.props.style,
19531953
onKeyDown: this.handleKeyDown,
19541954
onMouseDown: this.handleMouseDown,

‎dist/react-select.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/react-select.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎less/control.less

+100-52
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,54 @@
102102
.Select-arrow-zone:hover > .Select-arrow {
103103
border-top-color: @select-arrow-color-hover;
104104
}
105+
106+
// Unique select
107+
&.is-unique {
108+
background-color: #fff;
109+
box-shadow: 0px 5px 7px 3px rgba(163,163,163,1);
110+
border-radius: 5px;
111+
112+
.Select-control {
113+
margin-top: 15px;
114+
margin-bottom: 15px;
115+
border-radius: 5px;
116+
}
117+
118+
.Select-menu-outer {
119+
border: none;
120+
position: relative;
121+
}
122+
123+
.Select-unique-input-value-wrapper {
124+
display: flex;
125+
justify-content: space-between;
126+
padding: 15px;
127+
border-bottom: 1px solid lightgray;
128+
}
129+
130+
.Select-unique-input-list-wrapper {
131+
padding: 0 15px 0 15px;
132+
}
133+
134+
.Select-unique-search-icon-wrapper {
135+
padding-left: 5px;
136+
}
137+
138+
.Select-unique-selected-icon-wrapper {
139+
padding-right: 5px;
140+
display: inline-block
141+
}
142+
143+
.Select-unique-icon {
144+
display: inline-flex;
145+
vertical-align: middle;
146+
fill: lightgray;
147+
width: 20px;
148+
min-width: 20px;
149+
height: 20px;
150+
min-height: 20px;
151+
}
152+
}
105153
}
106154

107155
// base
@@ -283,58 +331,58 @@
283331

284332
// unique select
285333

286-
.Select {
287-
&.is-unique {
288-
background-color: #fff;
289-
box-shadow: 0px 5px 7px 3px rgba(163,163,163,1);
290-
border-radius: 5px;
291-
}
292-
}
293-
294-
.Select-control {
295-
&.is-unique {
296-
margin-top: 15px;
297-
margin-bottom: 15px;
298-
border-radius: 5px;
299-
}
300-
}
301-
302-
.Select-menu-outer {
303-
&.is-unique {
304-
border: none;
305-
position: relative;
306-
}
307-
}
308-
309-
.Select-unique-input-value-wrapper {
310-
display: flex;
311-
justify-content: space-between;
312-
padding: 15px;
313-
border-bottom: 1px solid lightgray;
314-
}
315-
316-
.Select-unique-input-list-wrapper {
317-
padding: 0 15px 0 15px;
318-
}
319-
320-
.Select-unique-search-icon-wrapper {
321-
padding-left: 5px;
322-
}
323-
324-
.Select-unique-selected-icon-wrapper {
325-
padding-right: 5px;
326-
display: inline-block
327-
}
328-
329-
.Select-unique-icon {
330-
display: inline-flex;
331-
vertical-align: middle;
332-
fill: lightgray;
333-
width: 20px;
334-
min-width: 20px;
335-
height: 20px;
336-
min-height: 20px;
337-
}
334+
// .Select {
335+
// &.is-unique {
336+
// background-color: #fff;
337+
// box-shadow: 0px 5px 7px 3px rgba(163,163,163,1);
338+
// border-radius: 5px;
339+
// }
340+
// }
341+
//
342+
// .Select-control {
343+
// &.is-unique {
344+
// margin-top: 15px;
345+
// margin-bottom: 15px;
346+
// border-radius: 5px;
347+
// }
348+
// }
349+
//
350+
// .Select-menu-outer {
351+
// &.is-unique {
352+
// border: none;
353+
// position: relative;
354+
// }
355+
// }
356+
//
357+
// .Select-unique-input-value-wrapper {
358+
// display: flex;
359+
// justify-content: space-between;
360+
// padding: 15px;
361+
// border-bottom: 1px solid lightgray;
362+
// }
363+
//
364+
// .Select-unique-input-list-wrapper {
365+
// padding: 0 15px 0 15px;
366+
// }
367+
//
368+
// .Select-unique-search-icon-wrapper {
369+
// padding-left: 5px;
370+
// }
371+
//
372+
// .Select-unique-selected-icon-wrapper {
373+
// padding-right: 5px;
374+
// display: inline-block
375+
// }
376+
//
377+
// .Select-unique-icon {
378+
// display: inline-flex;
379+
// vertical-align: middle;
380+
// fill: lightgray;
381+
// width: 20px;
382+
// min-width: 20px;
383+
// height: 20px;
384+
// min-height: 20px;
385+
// }
338386

339387
.Select-option {
340388
&.is-unique-selected {

‎lib/Select.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1202,8 +1202,8 @@ var Select = function (_React$Component) {
12021202
var _this8 = this;
12031203

12041204
var menu = this.renderMenu(options, valueArray, focusedOption);
1205-
var uniqueClass = this.props.type === 'unique' ? 'is-unique' : '';
1206-
var className = 'Select-menu-outer ' + uniqueClass;
1205+
// const uniqueClass = this.props.type === 'unique' ? 'is-unique' : '';
1206+
var className = 'Select-menu-outer';
12071207
if (!menu) {
12081208
return null;
12091209
}
@@ -1253,7 +1253,7 @@ var Select = function (_React$Component) {
12531253
ref: function ref(_ref6) {
12541254
return _this9.control = _ref6;
12551255
},
1256-
className: 'Select-control is-unique',
1256+
className: 'Select-control',
12571257
style: this.props.style,
12581258
onKeyDown: this.handleKeyDown,
12591259
onMouseDown: this.handleMouseDown,

‎src/Select.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1051,8 +1051,8 @@ class Select extends React.Component {
10511051

10521052
renderOuter (options, valueArray, focusedOption) {
10531053
let menu = this.renderMenu(options, valueArray, focusedOption);
1054-
const uniqueClass = this.props.type === 'unique' ? 'is-unique' : '';
1055-
const className = `Select-menu-outer ${uniqueClass}`;
1054+
// const uniqueClass = this.props.type === 'unique' ? 'is-unique' : '';
1055+
const className = `Select-menu-outer`;
10561056
if (!menu) {
10571057
return null;
10581058
}
@@ -1082,7 +1082,7 @@ class Select extends React.Component {
10821082
<div className="Select-unique-input-list-wrapper">
10831083
<div
10841084
ref={ref => this.control = ref}
1085-
className="Select-control is-unique"
1085+
className="Select-control"
10861086
style={this.props.style}
10871087
onKeyDown={this.handleKeyDown}
10881088
onMouseDown={this.handleMouseDown}

0 commit comments

Comments
 (0)