@hocgin/gin-featbar
Version:
@hocgin/gin-featbar
108 lines (107 loc) • 2.13 kB
CSS
.featbar {
position: fixed;
width: 300px;
bottom: -220px;
font-size: 13px ;
right: 100px;
display: none;
z-index: 2147483640;
}
@media only screen and (max-width: 800px) {
.featbar {
right: 0;
width: 100%;
}
}
.featbar.open {
bottom: 0;
}
.featbar.visible {
display: inline-block ;
}
.featbar .toggle {
text-align: center;
position: absolute;
top: -18px;
right: 20px;
width: 40px;
height: 18px;
padding-top: 2px;
cursor: pointer;
border: none;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3) ;
z-index: 2147483640;
border-radius: 5px 5px 0 0;
background: #ffffff;
}
.featbar .toggle::before {
content: '';
position: absolute;
left: -4px;
right: -4px;
bottom: -8px;
height: 8px;
background: inherit;
}
.featbar .container {
background-color: #ffffff;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3) ;
border-radius: 5px 5px 0 0;
z-index: 2147483640;
animation: slide-to-top 300ms linear;
}
@-webkit-keyframes slide-to-top {
0% {
bottom: -100%;
}
100% {
bottom: 0;
}
}
.featbar .container .body .title {
color: #111 ;
padding: 12px;
font-weight: bold ;
margin: 0;
line-height: 17px ;
min-height: 17px;
word-break: break-all;
word-wrap: break-word;
cursor: pointer;
}
.featbar .container .body .lbl {
padding: 0 12px 12px 12px;
}
.featbar .container .footer {
border-top-color: #cccccc ;
border-top: 1px solid;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 12px;
box-sizing: border-box;
}
.featbar .container .footer .btn {
margin: 12px 0 12px 0;
padding: 7px 10px ;
font-size: 1.1em ;
font-weight: bold ;
cursor: pointer;
text-decoration: underline;
}
.dil div {
width: calc(50% - 10px);
box-sizing: border-box;
display: inline-block;
background-color: rgb(245 245 245);
padding: 5px;
border: 1px solid #ebedf1;
margin: 5px;
}
.dil div a {
text-decoration: inherit;
box-sizing: inherit;
color: #595959;
}