public/styles/layout/_atom-list.scss (50 lines of code) (raw):
.atom-list {
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
&__item {
width: 100%;
background-color: #edf7f9;
display: flex;
margin-bottom: 5px;
&__icon {
justify-content: center;
align-items: center;
background-color: $brandColor;
padding: 8px;
}
&__content {
flex-grow: 2;
padding: 10px;
text-align: left;
font-size: 13px;
line-height: 18px;
}
}
&__item:nth-child(odd) {
background-color: #dbebef;
}
&__link {
font-weight: bold;
text-decoration: none;
color: $cBlueLink;
cursor: pointer;
display: inline-block;
&:hover {
text-decoration: underline;
}
}
&__icon {
background-color: $color600Grey;
width: 15px;
height: 15px;
position:relative;
top: 3px;
margin-left: 5px;
}
&__title {
font-size: 15px;
padding: 5px 0;
}
}