Skip to content
This repository
Browse code

Validation error styling in CMS

Blocklevel to avoid weird alignment relative to actual form field
Highlighted background, same as other error messages
  • Loading branch information...
commit ac5989560eaeece7f378e602c6bd0146f9b617b7 1 parent 498a3fd
Ingo Schommer authored July 18, 2012
4  admin/css/screen.css
@@ -331,11 +331,11 @@ body.cms { overflow: hidden; }
331 331
 .cms-content-actions { margin: 0; padding: 12px 16px; z-index: 0; border-top: 1px solid rgba(201, 205, 206, 0.8); border-top: 1px solid #FAFAFA; -webkit-box-shadow: #cccccc 0 -1px 1px; -moz-box-shadow: #cccccc 0 -1px 1px; box-shadow: #cccccc 0 -1px 1px; }
332 332
 
333 333
 /** -------------------------------------------- Messages -------------------------------------------- */
334  
-.message { margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; }
  334
+.message { display: block; clear: both; margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; }
335 335
 .message.notice { background-color: #ffbe66; border-color: #ff9300; }
336 336
 .message.notice a { color: #999; }
337 337
 .message.warning { background-color: #ffbe66; border-color: #ff9300; }
338  
-.message.error, .message.bad, .message.required { background-color: #ffbe66; border-color: #ff9300; }
  338
+.message.error, .message.bad, .message.required, .message.validation { background-color: #ffbe66; border-color: #ff9300; }
339 339
 .message.good { background-color: #65a839; background-color: rgba(101, 168, 57, 0.7); border-color: #65a839; color: #fff; text-shadow: 1px -1px 0 #1f9433; -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; }
340 340
 .message p { margin: 0; }
341 341
 
4  admin/scss/_style.scss
@@ -387,6 +387,8 @@ body.cms {
387 387
  * -------------------------------------------- */
388 388
 
389 389
 .message {
  390
+	display: block;
  391
+	clear: both;
390 392
 	margin: 0 0 $grid-y 0;
391 393
 	padding: $grid-y - 1 $grid-x - 1;
392 394
 	font-weight: bold;
@@ -406,7 +408,7 @@ body.cms {
406 408
 		background-color: lighten($color-warning, 20%);
407 409
 		border-color: $color-warning;
408 410
 	}
409  
-	&.error, &.bad, &.required {
  411
+	&.error, &.bad, &.required, &.validation {
410 412
 		background-color: lighten($color-error, 20%);
411 413
 		border-color: $color-error;
412 414
 	}

0 notes on commit ac59895

Please sign in to comment.
Something went wrong with that request. Please try again.