react-fontawesome-list
Version:
The fontawesome5 icon list component
104 lines (100 loc) • 2.53 kB
text/less
* {
margin: 0;
padding: 0;
}
.rfl-header {
height: 10%;
padding: 16px 24px;
border-radius: 4px 4px 0 0;
background: #fff;
color: rgba(0, 0, 0, 0.65);
border-bottom: 1px solid #e8e8e8;
input {
margin: 0;
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
padding: 0px 24px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
display: inline-block;
padding: 4px 11px;
width: 100%;
height: 32px;
font-size: 14px;
line-height: 1.5;
color: rgba(0,0,0,.65);
background-color: #fff;
background-image: none;
border: 1px solid #d9d9d9;
border-radius: 4px;
-webkit-transition: all .3s;
transition: all .3s;
&::placeholder {
color: #bfbfbf;
}
&:hover, &:focus {
border-color: #40a9ff;
border-right-width: 1px;
outline: 0;
-webkit-box-shadow: 0 0 0 2px rgba(24,144,255,.2);
box-shadow: 0 0 0 2px rgba(24,144,255,.2);
}
}
}
.rfl-body {
height: 90%;
margin: 16px;
overflow-y: auto;
padding: 24px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
}
.rfl-icon {
display: inline-block;
border-radius: 4px;
padding: 8px;
text-align: center;
cursor: pointer;
&-top {
transition: .5s ease;
color: inherit;
background-color: transparent;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
i {
margin: 8px 0 8px 0;
}
&:hover, &:focus {
background-color: #4dabf7;
color: #fff;
}
}
&-bottom {
transition: .5s ease;
color: #adb5bd;
font-size: .8rem;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
&:hover, &foucs {
background-color: rgba(0, 0, 0, .2);
color: #495057;
}
}
&.selected {
.rfl-icon-top {
background-color: #4dabf7;
color: #fff;
}
.rfl-icon-bottom {
background-color: rgba(0, 0, 0, .2);
color: #495057;
}
}
}