diff --git a/src/collections/form.less b/src/collections/form.less index abd3bfe91..1283df850 100755 --- a/src/collections/form.less +++ b/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) ---------------------*/ diff --git a/src/modules/dropdown.less b/src/modules/dropdown.less index c94425d9a..656177fb2 100755 --- a/src/modules/dropdown.less +++ b/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;