Browse Source

Added styles for dropdown warning state

pull/669/head
Michael Musatov 10 years ago
parent
commit
0a28508f67
2 changed files with 81 additions and 1 deletions
  1. 40
      src/collections/form.less
  2. 42
      src/modules/dropdown.less

40
src/collections/form.less

@ -288,6 +288,7 @@
-moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
}
.ui.form .field.error textarea:focus,
.ui.form .field.error input[type="text"]:focus,
.ui.form .field.error input[type="email"]:focus,
@ -305,6 +306,45 @@
box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
}
/*----------------------------
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 {
background-color: #FFFAFA;
color: #D95C5C;
}
.ui.form .fields.error .field .ui.selection.dropdown,
.ui.form .field.error .ui.selection.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 {
-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 {
-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 {
background-color: #FFF2F2;
}
.ui.form .fields.error .field .ui.selection.dropdown .menu .active.item,
.ui.form .field.error .ui.selection.dropdown .menu .active.item {
background-color: #FDCFCF !important;
}
/*--------------------
Empty (Placeholder)
---------------------*/

42
src/modules/dropdown.less

@ -361,6 +361,35 @@
margin-right: 0.5em;
}
/*--------------------
Error
----------------------*/
.ui.selection.dropdown.error,
.ui.selection.dropdown.error .item {
background-color: #FFFAFA;
color: #D95C5C;
}
.ui.selection.dropdown.error {
-webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
}
.ui.selection.dropdown.error .menu {
-webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
-moz-box-shadow: 0px 1px 0px 1px #E7BEBE;
box-shadow: 0px 1px 0px 1px #E7BEBE;
-moz-border-radius: 0px 0px 0.325em 0.325em;
-webkit-border-radius: 0px 0px 0.325em 0.325em;
border-radius: 0px 0px 0.325em 0.325em;
}
/* Menu Item Active */
.ui.selection.dropdown.error .menu .active.item {
background-color: #FDCFCF !important;
}
/* Hover */
.ui.selection.dropdown:hover {
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
@ -375,6 +404,18 @@
.ui.selection.dropdown:hover > .dropdown.icon {
opacity: 1;
}
.ui.selection.dropdown.error:hover {
-webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
}
.ui.selection.dropdown.error: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.selection.dropdown.error .menu .item:hover {
background-color: #FFF2F2;
}
/* Visible */
.ui.visible.selection.dropdown {
@ -384,7 +425,6 @@
/* Active */
.ui.active.selection.dropdown {
-webkit-border-radius: 0.3125em 0.3125em 0em 0em !important;
-moz-border-radius: 0.3125em 0.3125em 0em 0em !important;
border-radius: 0.3125em 0.3125em 0em 0em !important;

Loading…
Cancel
Save