Missing CSS for semantic errors

[kmallory]

while this 'works' it isn't really in the 'theme' of material design where these should be likely a snackbar?

fieldset > ol > li {

/* Hints */
p.inline-hints {
font-size: 0.95em;
font-style: italic;
color:#666;
margin: 0.5em 0 0 20%;
}

/* Date and Time Fields */
&.date_select, &.time_select, &.datetime_select {
fieldset ol li {
float:left; width:auto; margin:0 0.5em 0 0;
label { display: none; }
input { display:inline; margin:0; padding:0; }
}
}

/* Check Boxes or Radio fields */
&.check_boxes, &.radio {
fieldset ol {
margin-bottom:-0.6em;
li {
margin:0.1em 0 0.5em 0;
label {
float:none;
width:100%;
input { margin-right:0.2em; }
}
}
}
}

/* Boolean Field */
&.boolean {
min-height: 1.1em;
label {
width: 80%;
padding-left:20%;
padding-right: 10px;
text-transform: none !important;
font-weight: normal;
input { margin:0 0.5em 0 0.2em; }
}
}

/* Hidden fields */
&.hidden {
padding: 0;
}

/* Errors */
p.inline-errors {
color: $error-color;
font-weight: bold;
margin:0.3em 0 0 20%;
}
ul.errors {
color: $error-color;
margin:0.5em 0 0 20%;
list-style:square;
li { padding:0; border:none; display:list-item; }
}

&.error {
input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=tel], textarea {
border: $border-width solid $error-color;
}
}
}
/* semantic_errors */
ul.errors {
background: lighten($error-color, 60%);
@include rounded(4px);
color: $error-color;
font-weight: bold;
margin-bottom: 10px;
padding: 10px;
list-style:square;
li { margin-left:15px; padding:0; border:none; display:list-item; }
}

[dkniffin]

@kmallory Can you elaborate more? I don't really understand. Maybe because I'm not as familiar with Material Design.