/* Component - Note Setting */
.note {
margin-bottom: 20px;
padding: 15px;
border-left: 3px solid;
position: relative;
border-radius: 4px;
}
.panel > .note {
border-radius: 0;
}
.note h1,
.note h2,
.note h3,
.note h4,
.note h5,
.note h6 {
color: inherit;
}
.note .note-icon {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 80px;
font-size: 56px;
line-height: 56px;
text-align: center;
}
.note .note-icon > i {
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -28px;
}
.note .note-icon + .note-content {
margin-left: 85px;
}
.note.note-with-right-icon {
border-left: none;
border-right: 3px solid;
}
.note.note-with-right-icon .note-icon {
left: auto;
right: 0;
}
.note.note-with-right-icon .note-content {
margin-left: 0;
margin-right: 85px;
}
.note.note-danger { border-color: @red; background: #ffcecb; color: #801e18; }
.note.note-danger .note-icon { background: @red; }
.note.note-warning { border-color: @orange; background: #ffe4bf; color: #804b00; }
.note.note-warning .note-icon { background: @orange; }
.note.note-yellow { border-color: #ffd900; background: #fff2bf; color: #806d00; }
.note.note-yellow .note-icon { background: #ffd900; }
.note.note-lime { border-color: #90ca4b; background: #ddefc9; color: #486626; }
.note.note-lime .note-icon { background: #90ca4b; }
.note.note-success { border-color: @green; background: #d2f5d8; color: #266d32; }
.note.note-success .note-icon { background: @green; }
.note.note-primary { border-color: @blue; background: #bfdeff; color: #003d80; }
.note.note-primary .note-icon { background: @blue; }
.note.note-info { border-color: @aqua; background: #d6f1fe; color: #2d647d; }
.note.note-info .note-icon { background: @aqua; }
.note.note-purple { border-color: @purple; background: #f0cdff; color: #5b0280; }
.note.note-purple .note-icon { background: @purple; }
.note.note-dark, .note.note-inverse { border-color: @black; background: #c8c8c8; color: @black_darker; }
.note.note-dark .note-icon, .note.note-inverse .note-icon { background: @black; }
.note.note-secondary, .note.note-default { border-color: #bbb; background: #e2e2e3; color: #454548; }
.note.note-secondary .note-icon, .note.note-default .note-icon { background: #bbb; }
.note.note-light { border-color: #fff; background: #fff; color: #666; }
.note.note-light .note-icon { background: #fff; }
.note.note-indigo { border-color: @indigo; background: #cdccf3; color: #2c2b6b; }
.note.note-indigo .note-icon { background: @indigo; }
.note.note-pink { border-color: @pink; background: #ffc0cc; color: #80172b; }
.note.note-pink .note-icon { background: @pink; }
.note.note-green { border-color: @teal; background: #cdf9e3; color: #2c7551; }
.note.note-green .note-icon { background: @teal; }
|
Download
