Wallet/src/sass/views/includes/actionSheet.scss

58 lines
1.3 KiB
SCSS
Raw Normal View History

2016-10-12 15:01:48 -04:00
action-sheet {
.bp-action-sheet {
2016-10-12 17:20:06 -04:00
$border-color: #EFEFEF;
2016-10-12 15:01:48 -04:00
&__sheet {
background: #fff;
width: calc(100% + 1px);
2016-10-12 15:01:48 -04:00
position: fixed;
bottom: 0;
2016-10-12 19:09:54 -04:00
left: 50%;
transform: translateY(100%) translateX(-50%);
2016-10-19 16:45:29 -04:00
transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
2016-10-12 15:01:48 -04:00
z-index: 100;
2016-10-12 17:20:06 -04:00
padding-top: 1.75rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
2016-10-12 17:20:06 -04:00
color: #2f2f2f;
padding-bottom: 3.5rem;
2016-10-12 19:09:54 -04:00
max-width: 550px;
max-height: 100vh;
overflow: scroll;
2016-10-12 15:01:48 -04:00
&.slide-up {
2016-10-12 19:09:54 -04:00
transform: translateY(0) translateX(-50%);
2016-10-12 15:21:38 -04:00
box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3);
}
.back-arrow {
2016-10-12 17:51:09 -04:00
padding-bottom: 1.25rem;
2016-10-12 15:21:38 -04:00
cursor: pointer;
2016-10-12 15:01:48 -04:00
}
2016-10-12 17:20:06 -04:00
.header {
font-weight: 600;
padding-bottom: 1rem;
border-bottom: 1px solid $border-color;
margin-bottom: 1px;
}
2016-10-12 15:01:48 -04:00
}
&__backdrop {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0);
2016-10-12 15:21:38 -04:00
transition: background 250ms cubic-bezier(0.4, 0.0, 0.2, 1);;
2016-10-12 15:01:48 -04:00
pointer-events: none;
z-index: 99;
&.fade-in {
2016-10-12 15:21:38 -04:00
background: rgba(0, 0, 0, .4);
2016-10-12 15:01:48 -04:00
pointer-events: all;
}
}
}
}