vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: refactor link preview popover style

Browse source
This commit is contained in:
prssanna 2021-02-24 16:36:08 +05:30
parent 0006ad2867
commit 4c910ab8db
3 changed files with 59 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frappe/public/scss/desk/global.scss
View file

@ -280,6 +280,7 @@ select.input-xs {
/* popover */
.popover {
background-color: var(--popover-bg);
border: 0;
}
.bold {

82
frappe/public/scss/desk/link_preview.scss
View file

@ -1,48 +1,80 @@
.link-preview-popover {
border-radius: 0;
max-width: 100%;
.popover-content {
padding: 0;
padding: 15px 25px;
.preview-popover-header {
padding: var(--padding-md);
.preview-header {
display: inline-block;
vertical-align: top;
@include flex(flex, null, center, column);
}
.preview-image {
width: 70px;
height: 70px;
object-fit: cover;
margin-right: var(--margin-sm);
margin-bottom: var(--margin-sm);
// object-fit: cover;
// border-radius: var(--border-radius-sm);
.avatar {
width: 52px;
height: 52px;
}
}
img:after {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
}
img[alt]:after {
height: 52px;
@include flex();
position: absolute;
z-index: 1;
top: -15px;
left: 0px;
width: 100%;
background-color: var(--bg-color);
border-radius: var(--border-radius);
}
.preview-name {
display: block;
// display: block;
font-size: var(--text-base);
font-weight: 500;
}
.preview-title {
display: block;
.preview-title:not(:empty) {
margin-top: var(--margin-xs);
font-size: var(--text-md);
}
}
hr {
margin: 0;
}
.popover-body {
padding: 0;
.preview-table {
padding: var(--padding-md);
padding-bottom: var(--padding-xs);
max-width: 330px;
min-width: 200px;
overflow-wrap: break-word;
.preview-table {
padding-bottom: var(--padding-xs);
max-width: 330px;
min-width: 200px;
overflow-wrap: break-word;
.preview-field {
padding-bottom: var(--padding-sm);
.preview-label {
padding-bottom: 4px;
.preview-field {
.preview-label {
padding-bottom: 4px;
}
.preview-value {
font-weight: 500;
}
.ql-snow .ql-editor {
min-height: 0;
}
&:not(:last-child) {
margin-bottom: var(--margin-md);
}
}
}
}

2
frappe/public/scss/desk/variables.scss
View file

@ -98,7 +98,7 @@ $mark-padding: 0;
$enable-shadows: true;
$popover-border-radius: var(--border-radius);
$popover-bg: var(--popover-bg);
$popover-box-shadow: var(--shadow-md);
$popover-box-shadow: 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1);
$popover-body-padding-x: var(--padding-md);
$popover-body-padding-y: var(--padding-md);
$popover-border-color: var(--dark-border-color);