1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/components/ui/popover/index.scss
Erik Marks 40cd976e8c
Fix connected sites modal styling; add shortenUrl function (#8409)
* fix content row styling

* fix border styling

* handle long domain names
2020-04-27 08:36:08 -07:00

123 lines
2.1 KiB
SCSS

.popover {
&-wrap {
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #C4C4C4;
}
display: flex;
flex-direction: column;
position: absolute;
width: 328px;
max-height: 94vh;
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
border-radius: 10px;
background: white;
}
&-header {
display: flex;
padding: 24px;
flex-direction: column;
background: white;
position: relative;
border-radius: 10px;
&__title {
display: flex;
align-items: center;
justify-content: space-between;
@extend %font;
font-weight: bold;
font-size: 18px;
line-height: 25px;
padding-bottom: 8px;
h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
button {
margin-right: 24px;
}
}
}
&__subtitle {
@extend %font;
font-weight: normal;
font-size: 14px;
line-height: 20px;
}
&__button {
background: none;
font-size: inherit;
padding: 0;
}
i {
cursor: pointer;
}
}
&-bg {
width: 100%;
height: 100%;
background: black;
opacity: 20%;
}
&-content {
overflow-y: auto;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
&-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1050;
}
&-footer {
display: flex;
flex-direction: row;
justify-content: space-between;
border-top: 1px solid #D2D8DD;
padding: 16px 24px 24px;
& :only-child {
margin: 0 auto;
}
}
&-arrow {
width: 22px;
height: 22px;
background: white;
position: absolute;
transform: rotate(45deg);
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
}
}