Sha256: ae63624a512017b0cf5e7bdbdf342d3ac3a21e0b1081b523a4898344bdcf8761
Contents?: true
Size: 1.65 KB
Versions: 42
Compression:
Stored size: 1.65 KB
Contents
@import "../helpers/index.scss";
.cm-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
background-color: rgba(0, 0, 0, .7);
&__container {
position: relative;
width: 360px;
height: 100%;
background: $white;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px;
background: $grey-lightest-clr;
&__lhs {
.title {
@include font($size: $t1-text, $color: $primary-text-clr, $weight: 600);
font-family: $primary-font;
line-height: 28px;
margin-bottom: 8px;
}
.description {
@include font($size: $t4-text, $color: $primary-text-clr);
font-family: $primary-font;
line-height: 22px;
margin-bottom: 0;
}
}
&__rhs {
color: $ink-lighter-clr;
}
}
.body {
padding: 24px;
.info-text {
@include font($size: $t4-text, $color: $primary-text-clr);
font-family: $primary-font;
line-height: 22px;
}
}
}
}
.drawer-slide-in {
animation: slideInLeft .3s ease-in forwards;
}
.drawer-slide-out {
animation: slideOutLeft .3s ease-in forwards;
}
@keyframes slideInLeft {
0% {
left: -400px;
opacity: 0;
}
100% {
left: 0;
opacity: 1;
}
}
@keyframes slideOutLeft {
0% {
left: 0;
opacity: 1;
}
100% {
left: -400px;
opacity: 0;
}
}
.drawer-btn {
cursor: pointer;
margin-left: 8px;
@include font($size: $t4-text, $color: $brand-color);
}
Version data entries
42 entries across 42 versions & 1 rubygems