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">
</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">
<label>Username</label>
<input placeholder="Username" type="text">
@ -245,6 +257,18 @@ type : 'UI Collection'
<input placeholder="Last Name" type="text">
</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">
<label>Username</label>
<input placeholder="Username" type="text">
@ -322,6 +346,18 @@ type : 'UI Collection'
<input placeholder="Last Name" type="text">
</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>

28
src/collections/form.less

@ -310,38 +310,38 @@
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;
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;
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;
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;
-moz-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;
}
.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;
}

6
src/modules/dropdown.less

@ -258,9 +258,9 @@
}
.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 */

Loading…
Cancel
Save