58 lines
1.3 KiB
SCSS
58 lines
1.3 KiB
SCSS
action-sheet {
|
|
.bp-action-sheet {
|
|
$border-color: #EFEFEF;
|
|
|
|
&__sheet {
|
|
background: #fff;
|
|
width: calc(100% + 1px);
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateY(100%) translateX(-50%);
|
|
transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
z-index: 100;
|
|
padding-top: 1.75rem;
|
|
padding-left: 2rem;
|
|
padding-right: .75rem;
|
|
color: #2f2f2f;
|
|
padding-bottom: 3.5rem;
|
|
max-width: 550px;
|
|
max-height: 100vh;
|
|
overflow: scroll;
|
|
|
|
&.slide-up {
|
|
transform: translateY(0) translateX(-50%);
|
|
box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
.back-arrow {
|
|
padding-bottom: 1.25rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header {
|
|
font-weight: 600;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid $border-color;
|
|
margin-bottom: 1px;
|
|
}
|
|
}
|
|
|
|
&__backdrop {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0);
|
|
transition: background 250ms cubic-bezier(0.4, 0.0, 0.2, 1);;
|
|
pointer-events: none;
|
|
z-index: 99;
|
|
|
|
&.fade-in {
|
|
background: rgba(0, 0, 0, .4);
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
}
|
|
}
|