display: block;
position: relative;
&:before {
- font-family: 'Material-Design-Iconic-Font';
- left: $-xs + 4px;
+ background-image: url("/icon/info-filled.svg?color=015380");
+ background-repeat: no-repeat;
+ content: '';
+ width: 1.2em;
+ height: 1.2em;
+ left: $-xs + 1px;
top: 50%;
margin-top: -9px;
- //top: $-xs + 5px;
display: inline-block;
position: absolute;
- font-size: 1.222em;
line-height: 1;
+ opacity: 0.8;
}
&.success {
border-left-color: $positive;
color: darken($positive, 16%);
}
&.success:before {
- content: '\f269';
+ background-image: url("/icon/check-circle.svg?color=376c39");
}
&.danger {
border-left-color: $negative;
color: darken($negative, 20%);
}
&.danger:before {
- content: '\f1f2';
+ background-image: url("/icon/danger.svg?color=b91818");
}
&.info {
border-left-color: $info;
background-color: lighten($info, 50%);
color: darken($info, 16%);
}
- &.info:before {
- content: '\f1f8';
- }
&.warning {
border-left-color: $warning;
background-color: lighten($warning, 36%);
color: darken($warning, 16%);
}
&.warning:before {
- content: '\f1f1';
+ background-image: url("/icon/warning.svg?color=b6531c");
}
}
margin: 0;
font-size: $fs-s;
color: #888;
+ fill: #888;
font-weight: 400;
text-transform: uppercase;
}
padding: 0;
align-items: center;
text-align: center;
+ justify-content: center;
width: 28px;
+ flex-grow: 0;
padding-left: $-xs;
padding-right: $-xs;
&:hover {
background-color: #EEE;
}
- i {
- flex: 1;
- padding: 0;
+ .svg-icon {
+ margin-right: 0px;
}
}
> div .outline input {
margin: $-s 0;
+ width: 100%;
}
> div.padded {
padding: $-s 0 !important;
> div {
padding: 0 $-s;
max-width: 80%;
+ flex: 1;
}
}
background-color: #F8F8F8;
padding: $-m;
border: 1px solid #DDD;
-}
\ No newline at end of file
+}