relayers-network-ui/assets/styles/_modal.scss

165 lines
2.9 KiB
SCSS

.vue-modal-resizer {
position: absolute;
right: 0;
bottom: 0;
width: 1.2rem;
height: 1.2rem;
display: block;
background: $color-transparent;
z-index: $zIndex-7;
overflow: hidden;
cursor: se-resize;
&::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
background: $color-transparent;
border-bottom: 1rem solid #ddd;
border-left: 1rem solid $color-transparent;
}
.vue-modal-resizer.clicked::after {
border-bottom: 1rem solid #369be9;
}
}
.vm {
&--block-scroll {
overflow: hidden;
width: 100vw;
}
&--container {
position: fixed;
box-sizing: border-box;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: $zIndex-6;
}
&--overlay {
position: fixed;
box-sizing: border-box;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: $color-overlay-modal;
opacity: $opacity-default;
}
&--container.scrollable {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.vm--modal {
margin-bottom: 0.2rem;
}
}
&--modal {
box-sizing: border-box;
position: relative;
background-color: $color-bg-primary;
border-radius: 0.6rem;
overflow-x: hidden;
overflow-y: auto;
}
&--top-right-slot {
position: absolute;
right: 0;
top: 0;
display: block;
}
}
.vm-transition {
&--overlay-enter-active,
&--overlay-leave-active {
transition: all 50ms;
}
&--overlay-enter,
&--overlay-leave-active {
opacity: 0;
}
&--modal-enter-active,
&--modal-leave-active {
transition: all 400ms;
}
&--modal-enter,
&--modal-leave-active {
opacity: 0;
transform: translateY(-2rem);
}
&--default-enter,
&--default-leave-active {
opacity: 0;
}
}
.vm-transition .vm-transition--default-enter-active,
.vm-transition--default-leave-active {
transition: all 2ms;
}
.vue-dialog {
font-size: 1.4rem;
div {
box-sizing: border-box;
}
&-content {
flex: 1 0 auto;
width: 100%;
padding: 1.4rem;
}
&-content-title {
font-weight: 600;
padding-bottom: 1.4rem;
}
&-buttons {
display: flex;
flex: 0 1 auto;
width: 100%;
border-top: 0.1rem solid #eee;
}
&-buttons-none {
width: 100%;
padding-bottom: 1.4rem;
}
&-button {
font-size: inherit;
background: transparent;
padding: 0;
margin: 0;
border: 0;
cursor: pointer;
box-sizing: border-box;
line-height: 4rem;
height: 4rem;
color: inherit;
font: inherit;
outline: none;
&:hover {
background: #f9f9f9;
}
&:active {
background: #f3f3f3;
}
&:not(:first-of-type) {
border-left: 0.1rem solid #eee;
}
}
}
// NO PADDING USAGE
.modal {
box-shadow: none;
&_top {
margin: 3rem 0 0;
}
&_black {
background-color: $color-black;
background-image: none;
}
}