Browse Source

Finished modifications to dropdown error states for form/dropdown

pull/690/head
jlukic 11 years ago
parent
commit
295e225ae4
3 changed files with 53 additions and 17 deletions
  1. 36
      server/documents/collections/form.html.eco
  2. 28
      src/collections/form.less
  3. 6
      src/modules/dropdown.less

36
server/documents/collections/form.html.eco

@ -209,6 +209,18 @@ type : 'UI Collection'
<input placeholder="Last Name" type="text"> <input placeholder="Last Name" type="text">
</div> </div>
</div> </div>
<div class="field">
<label>Gender</label>
<div class="ui fluid selection dropdown">
<div class="text">Select</div>
<i class="dropdown icon"></i>
<input type="hidden" name="gender">
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<div class="field"> <div class="field">
<label>Username</label> <label>Username</label>
<input placeholder="Username" type="text"> <input placeholder="Username" type="text">
@ -245,6 +257,18 @@ type : 'UI Collection'
<input placeholder="Last Name" type="text"> <input placeholder="Last Name" type="text">
</div> </div>
</div> </div>
<div class="field">
<label>Gender</label>
<div class="ui fluid selection dropdown">
<div class="text">Select</div>
<i class="dropdown icon"></i>
<input type="hidden" name="gender">
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<div class="field"> <div class="field">
<label>Username</label> <label>Username</label>
<input placeholder="Username" type="text"> <input placeholder="Username" type="text">
@ -322,6 +346,18 @@ type : 'UI Collection'
<input placeholder="Last Name" type="text"> <input placeholder="Last Name" type="text">
</div> </div>
</div> </div>
<div class="field error">
<label>Gender</label>
<div class="ui fluid selection dropdown">
<div class="text">Select</div>
<i class="dropdown icon"></i>
<input type="hidden" name="gender">
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
</div> </div>
</div> </div>

28
src/collections/form.less

@ -310,38 +310,38 @@
Dropdown Selection Warning Dropdown Selection Warning
-----------------------------*/ -----------------------------*/
.ui.form .fields.error .field .ui.selection.dropdown,
.ui.form .fields.error .field .ui.selection.dropdown .item,
.ui.form .field.error .ui.selection.dropdown,
.ui.form .field.error .ui.selection.dropdown .item {
.ui.form .fields.error .field .ui.dropdown,
.ui.form .fields.error .field .ui.dropdown .item,
.ui.form .field.error .ui.dropdown,
.ui.form .field.error .ui.dropdown .item {
background-color: #FFFAFA; background-color: #FFFAFA;
color: #D95C5C; color: #D95C5C;
} }
.ui.form .fields.error .field .ui.selection.dropdown,
.ui.form .field.error .ui.selection.dropdown {
.ui.form .fields.error .field .ui.dropdown,
.ui.form .field.error .ui.dropdown {
-webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important; -webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important;
box-shadow: 0px 0px 0px 1px #E7BEBE !important; box-shadow: 0px 0px 0px 1px #E7BEBE !important;
} }
.ui.form .fields.error .field .ui.selection.dropdown:hover,
.ui.form .field.error .ui.selection.dropdown:hover {
.ui.form .fields.error .field .ui.dropdown:hover,
.ui.form .field.error .ui.dropdown:hover {
-webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important; -webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important;
box-shadow: 0px 0px 0px 1px #E7BEBE !important; box-shadow: 0px 0px 0px 1px #E7BEBE !important;
} }
.ui.form .fields.error .field .ui.selection.dropdown:hover .menu,
.ui.form .field.error .ui.selection.dropdown:hover .menu {
.ui.form .fields.error .field .ui.dropdown:hover .menu,
.ui.form .field.error .ui.dropdown:hover .menu {
-webkit-box-shadow: 0px 1px 0px 1px #E7BEBE; -webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
-moz-box-shadow: 0px 1px 0px 1px #E7BEBE; -moz-box-shadow: 0px 1px 0px 1px #E7BEBE;
box-shadow: 0px 1px 0px 1px #E7BEBE; box-shadow: 0px 1px 0px 1px #E7BEBE;
} }
.ui.form .fields.error .field .ui.selection.dropdown .menu .item:hover,
.ui.form .field.error .ui.selection.dropdown .menu .item:hover {
.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
.ui.form .field.error .ui.dropdown .menu .item:hover {
background-color: #FFF2F2; background-color: #FFF2F2;
} }
.ui.form .fields.error .field .ui.selection.dropdown .menu .active.item,
.ui.form .field.error .ui.selection.dropdown .menu .active.item {
.ui.form .fields.error .field .ui.dropdown .menu .active.item,
.ui.form .field.error .ui.dropdown .menu .active.item {
background-color: #FDCFCF !important; background-color: #FDCFCF !important;
} }

6
src/modules/dropdown.less

@ -258,9 +258,9 @@
} }
.ui.dropdown.error .menu { .ui.dropdown.error .menu {
-webkit-box-shadow: 0px 1px 0px 1px #E7BEBE !important;
-moz-box-shadow: 0px 1px 0px 1px #E7BEBE !important;
box-shadow: 0px 1px 0px 1px #E7BEBE !important;
-webkit-box-shadow: 0px 0px 1px 1px #E7BEBE !important;
-moz-box-shadow: 0px 0px 1px 1px #E7BEBE !important;
box-shadow: 0px 0px 1px 1px #E7BEBE !important;
} }
/* Item Hover */ /* Item Hover */

Loading…
Cancel
Save