Skip to content

Commit 274b357

Browse files
jlukicjlukic
committed
Merge branch 'master' of https://github.com/musatov/Semantic-UI 
2 parents 532b904 + 28709c6 commit 274b357

File tree

3 files changed

+123
-2
lines changed

3 files changed

+123
-2
lines changed

‎server/documents/modules/dropdown.html.eco

+42-1
Original file line numberDiff line numberDiff line change
@@ -470,7 +470,6 @@ type : 'UI Module'
470470
</div>
471471
</div>
472472

473-
474473
<div class="hover example">
475474
<h3 class="ui header">Menu</h3>
476475
<p>A <a href="/collections/menu.html">menu</a> element can contain a dropdown</p>
@@ -535,6 +534,48 @@ type : 'UI Module'
535534
</div>
536535
</div>
537536

537+
<div class="dropdown example">
538+
<h3 class="ui header">Selection with error state</h3>
539+
<p>A <a href="/modules/dropdown.html">dropdown</a> can have error state</p>
540+
<div class="ui dropdown selection error">
541+
<input type="hidden" name="gender">
542+
<div class="default text">...</div>
543+
<i class="dropdown icon"></i>
544+
<div class="menu">
545+
<div class="item" data-value="male">Male</div>
546+
<div class="item" data-value="female">Female</div>
547+
</div>
548+
</div>
549+
</div>
550+
<div class="dropdown example">
551+
<p>It works inside a <a href="/collections/form.html">form</a> too</p>
552+
<div class="ui form segment">
553+
<p>Let's go ahead and get you signed up.</p>
554+
<div class="two fields">
555+
<div class="field">
556+
<label>First Name</label>
557+
<input placeholder="First Name" type="text">
558+
</div>
559+
<div class="field">
560+
<label>Last Name</label>
561+
<input placeholder="Last Name" type="text">
562+
</div>
563+
</div>
564+
<div class="field error">
565+
<label>Gender</label>
566+
<div class="ui dropdown selection">
567+
<input type="hidden" name="gender">
568+
<div class="default text">...</div>
569+
<i class="dropdown icon"></i>
570+
<div class="menu">
571+
<div class="item" data-value="male">Male</div>
572+
<div class="item" data-value="female">Female</div>
573+
</div>
574+
</div>
575+
</div>
576+
</div>
577+
</div>
578+
538579
<div class="transition example">
539580
<h3 class="ui header">Transitions</h3>
540581
<p>A dropdown can have different <a href="/modules/transition.html">transitions</a>.</p>

‎src/collections/form.less

+40
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@
288288
-moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
289289
box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
290290
}
291+
291292
.ui.form .field.error textarea:focus,
292293
.ui.form .field.error input[type="text"]:focus,
293294
.ui.form .field.error input[type="email"]:focus,
@@ -305,6 +306,45 @@
305306
box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
306307
}
307308

309+
/*----------------------------
310+
Dropdown Selection Warning
311+
-----------------------------*/
312+
313+
.ui.form .fields.error .field .ui.selection.dropdown,
314+
.ui.form .fields.error .field .ui.selection.dropdown .item,
315+
.ui.form .field.error .ui.selection.dropdown,
316+
.ui.form .field.error .ui.selection.dropdown .item {
317+
background-color: #FFFAFA;
318+
color: #D95C5C;
319+
}
320+
321+
.ui.form .fields.error .field .ui.selection.dropdown,
322+
.ui.form .field.error .ui.selection.dropdown {
323+
-webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important;
324+
box-shadow: 0px 0px 0px 1px #E7BEBE !important;
325+
}
326+
327+
.ui.form .fields.error .field .ui.selection.dropdown:hover,
328+
.ui.form .field.error .ui.selection.dropdown:hover {
329+
-webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important;
330+
box-shadow: 0px 0px 0px 1px #E7BEBE !important;
331+
}
332+
.ui.form .fields.error .field .ui.selection.dropdown:hover .menu,
333+
.ui.form .field.error .ui.selection.dropdown:hover .menu {
334+
-webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
335+
-moz-box-shadow: 0px 1px 0px 1px #E7BEBE;
336+
box-shadow: 0px 1px 0px 1px #E7BEBE;
337+
}
338+
.ui.form .fields.error .field .ui.selection.dropdown .menu .item:hover,
339+
.ui.form .field.error .ui.selection.dropdown .menu .item:hover {
340+
background-color: #FFF2F2;
341+
}
342+
343+
.ui.form .fields.error .field .ui.selection.dropdown .menu .active.item,
344+
.ui.form .field.error .ui.selection.dropdown .menu .active.item {
345+
background-color: #FDCFCF !important;
346+
}
347+
308348
/*--------------------
309349
Empty (Placeholder)
310350
---------------------*/

‎src/modules/dropdown.less

+41-1
Original file line numberDiff line numberDiff line change
@@ -361,6 +361,35 @@
361361
margin-right: 0.5em;
362362
}
363363

364+
/*--------------------
365+
Error
366+
----------------------*/
367+
.ui.selection.dropdown.error,
368+
.ui.selection.dropdown.error .item {
369+
background-color: #FFFAFA;
370+
color: #D95C5C;
371+
}
372+
.ui.selection.dropdown.error {
373+
-webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
374+
box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
375+
}
376+
377+
.ui.selection.dropdown.error .menu {
378+
-webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
379+
-moz-box-shadow: 0px 1px 0px 1px #E7BEBE;
380+
box-shadow: 0px 1px 0px 1px #E7BEBE;
381+
382+
-moz-border-radius: 0px 0px 0.325em 0.325em;
383+
-webkit-border-radius: 0px 0px 0.325em 0.325em;
384+
border-radius: 0px 0px 0.325em 0.325em;
385+
}
386+
387+
388+
/* Menu Item Active */
389+
.ui.selection.dropdown.error .menu .active.item {
390+
background-color: #FDCFCF !important;
391+
}
392+
364393
/* Hover */
365394
.ui.selection.dropdown:hover {
366395
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
@@ -375,6 +404,18 @@
375404
.ui.selection.dropdown:hover > .dropdown.icon {
376405
opacity: 1;
377406
}
407+
.ui.selection.dropdown.error:hover {
408+
-webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
409+
box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
410+
}
411+
.ui.selection.dropdown.error:hover .menu {
412+
-webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
413+
-moz-box-shadow: 0px 1px 0px 1px #E7BEBE;
414+
box-shadow: 0px 1px 0px 1px #E7BEBE;
415+
}
416+
.ui.selection.dropdown.error .menu .item:hover {
417+
background-color: #FFF2F2;
418+
}
378419

379420
/* Visible */
380421
.ui.visible.selection.dropdown {
@@ -384,7 +425,6 @@
384425

385426
/* Active */
386427
.ui.active.selection.dropdown {
387-
388428
-webkit-border-radius: 0.3125em 0.3125em 0em 0em !important;
389429
-moz-border-radius: 0.3125em 0.3125em 0em 0em !important;
390430
border-radius: 0.3125em 0.3125em 0em 0em !important;

0 commit comments

Comments
 (0)