Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui
This commit is contained in:
commit
d327744f2d
8 changed files with 64 additions and 84 deletions
|
|
@ -59,7 +59,6 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
|
|||
|
||||
this.$result.html(`
|
||||
${this.get_header_html()}
|
||||
<hr class="image-view-divider">
|
||||
<div class="image-view-container">
|
||||
${html}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,43 +10,46 @@
|
|||
font-size: var(--text-md);
|
||||
}
|
||||
|
||||
.filter-box {
|
||||
padding: var(--padding-xs) var(--padding-md) var(--padding-xs) 0;
|
||||
.filter-area {
|
||||
.filter-box {
|
||||
padding: var(--padding-xs) var(--padding-md) var(--padding-xs) 0;
|
||||
|
||||
.form-group {
|
||||
@include media-breakpoint-up(xs) {
|
||||
margin-bottom: 0;
|
||||
.form-group {
|
||||
@include media-breakpoint-up(xs) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-filter {
|
||||
cursor: pointer;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.filter-field {
|
||||
.frappe-control {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remove-filter {
|
||||
cursor: pointer;
|
||||
line-height: 2;
|
||||
}
|
||||
.filter-action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.filter-field {
|
||||
.frappe-control {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
.add-filter {
|
||||
line-height: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.add-filter {
|
||||
line-height: 2;
|
||||
cursor: pointer;
|
||||
.divider {
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
// for sm and above
|
||||
@include media-breakpoint-up(sm) {
|
||||
.filter-box .row > div[class*="col-sm-"] {
|
||||
|
|
|
|||
|
|
@ -204,6 +204,7 @@ select.input-xs {
|
|||
|
||||
.popover {
|
||||
border-radius: 4px;
|
||||
background-color: var(--popover-bg);
|
||||
|
||||
.popover-content {
|
||||
padding: 14px;
|
||||
|
|
@ -258,11 +259,11 @@ input[type="checkbox"] {
|
|||
line-height: 11px;
|
||||
content: url('/assets/frappe/icons/frapicon-checkbox.svg');
|
||||
visibility: visible;
|
||||
border: 1px solid #C8CFD5;
|
||||
border: 1px solid var(--gray-400);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
background: #FFFFFF;
|
||||
background: var(--fg-color);
|
||||
}
|
||||
|
||||
&:checked:before {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@
|
|||
stroke: var(--gray-700);
|
||||
}
|
||||
|
||||
#icon-close {
|
||||
fill: var(--gray-600);
|
||||
}
|
||||
|
||||
/* like icon */
|
||||
use.like-icon {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,8 @@
|
|||
.image-view {
|
||||
|
||||
.list-header-subject {
|
||||
// border-bottom: 1px solid $border-color;
|
||||
|
||||
.list-image-header {
|
||||
display: flex;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.list-count {
|
||||
|
|
@ -17,31 +14,19 @@
|
|||
.list-image-header-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
margin-right: var(--margin-lg);
|
||||
|
||||
div {
|
||||
margin-left: 5px;
|
||||
margin-left: var(--margin-xs);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.image-view-divider {
|
||||
border-color: $border-color;
|
||||
margin: -5px 0 0 30px
|
||||
// margin-left: 30px;
|
||||
// margin-top: 0;
|
||||
}
|
||||
|
||||
.image-view-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
column-gap: 20px;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
max-width: 100%;
|
||||
row-gap: 20px;
|
||||
padding-left: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.image-view-row {
|
||||
display: flex;
|
||||
|
|
@ -49,13 +34,11 @@
|
|||
}
|
||||
|
||||
.image-view-item {
|
||||
padding: 10px 15px;
|
||||
padding: var(--padding-sm) var(--padding-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 260px;
|
||||
box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 66, 0.1);
|
||||
border-radius: 8px;
|
||||
border: 1px solid $border-color;
|
||||
height: 250px;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
.list-row-checkbox {
|
||||
&:before {
|
||||
|
|
@ -63,42 +46,40 @@
|
|||
}
|
||||
|
||||
&:checked:before {
|
||||
// content: url("data:image/svg+xml; utf8, <svg class='icon icon-sm' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4l1.667 1.8L7 1.2' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'></path></svg>");
|
||||
// content: url('/assets/frappe/icons/frapicon-checkbox-selected.svg');
|
||||
// background: linear-gradient(180deg, #4AC3F8 -124.51%, #2490EF 100%);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.not-liked {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.image-view-item:hover {
|
||||
// box-shadow: none;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 2px rgba(17, 43, 66, 0.16), 0px 1px 5px rgba(17, 43, 66, 0.1);
|
||||
background-color: var(--control-bg);
|
||||
|
||||
.list-row-checkbox {
|
||||
&:before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
// padding: 10px 15px;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// height: 260px;
|
||||
// box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 66, 0.1);
|
||||
// border-radius: 8px;
|
||||
// border: 1px solid $border-color;
|
||||
|
||||
.not-liked {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.image-view-header {
|
||||
margin-bottom: 10px;
|
||||
height: 20px;
|
||||
margin-bottom: var(--margin-sm);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-view-info {
|
||||
margin-top: 5px;
|
||||
margin-top: var(--margin-xs);
|
||||
font-size: $font-size-sm;
|
||||
color: var(--gray-600);
|
||||
margin-bottom: 0;
|
||||
|
|
@ -113,9 +94,6 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// margin-bottom: 25px;
|
||||
height: 130px;
|
||||
width: 130px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -138,7 +116,6 @@
|
|||
|
||||
img {
|
||||
max-width: 100%;
|
||||
// height: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: $border-radius;
|
||||
color: transparent;
|
||||
|
|
@ -151,19 +128,14 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
// top: -60px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
min-width: 130px;
|
||||
min-height: 130px;
|
||||
padding: 0;
|
||||
// border-radius: $border-radius;
|
||||
// background-color: var(--blue-50);
|
||||
background: var(--gray-50);
|
||||
/* max-height: 100%; */
|
||||
}
|
||||
&.no-image {
|
||||
// background-color: var(--blue-50);
|
||||
line-height: 130px;
|
||||
height: 130px;
|
||||
background-color: var(--gray-50);
|
||||
|
|
@ -184,13 +156,12 @@
|
|||
font-weight: 500;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
margin-top: var(--margin-lg);
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
font-size: $font-size-5xl;
|
||||
color: var(--gray-500);
|
||||
// color: var(--blue-400);
|
||||
}
|
||||
|
||||
.zoom-view {
|
||||
|
|
@ -202,7 +173,7 @@
|
|||
bottom: 3px;
|
||||
right: 3px;
|
||||
opacity: 0;
|
||||
font-size: 16px;
|
||||
font-size: $font-size-lg;
|
||||
position: absolute;
|
||||
background: var(--gray-300);
|
||||
border-radius: $border-radius;
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
font-size: var(--text-md);
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-50;
|
||||
background-color: var(--control-bg);
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 0px;
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
}
|
||||
|
||||
.list-paging-area, .footnote-area {
|
||||
border-top: 1px sol var(--gray-100);
|
||||
border-top: 1px sol var(--border-color);
|
||||
}
|
||||
|
||||
.frappe-card {
|
||||
|
|
@ -244,7 +244,7 @@ input.list-check-all, input.list-row-checkbox {
|
|||
font-size: var(--text-md);
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-50;
|
||||
background-color: var(--control-bg);
|
||||
}
|
||||
|
||||
// @media (max-width: $screen-xs) {
|
||||
|
|
@ -256,7 +256,7 @@ input.list-check-all, input.list-row-checkbox {
|
|||
// }
|
||||
|
||||
&--head {
|
||||
background-color: $gray-50;
|
||||
background-color: var(--control-bg);
|
||||
border-bottom: 1px solid $border-color;
|
||||
cursor: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: var(--card-bg);
|
||||
border-bottom: 1px solid var(--gray-100);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
.form-group {
|
||||
padding: 0px 5px;
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
|
|||
--orange-300: #FDAE8C;
|
||||
--orange-200: #FECDB8;
|
||||
--orange-100: #FFEAE1;
|
||||
--orange-050: #FFF5F0;
|
||||
--orange-50: #FFF5F0;
|
||||
|
||||
--purple-900: #343360;
|
||||
--purple-800: #45438F;
|
||||
|
|
@ -167,6 +167,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
|
|||
--control-bg: var(--gray-100);
|
||||
--modal-bg: white;
|
||||
--toast-bg: var(--modal-bg);
|
||||
--popover-bg: white;
|
||||
|
||||
--sidebar-select-color: var(--gray-200);
|
||||
|
||||
|
|
@ -260,6 +261,7 @@ $dropdown-item-padding-x: 0.5rem !default;
|
|||
--control-bg: var(--gray-700);
|
||||
--modal-bg: var(--gray-700);
|
||||
--toast-bg: var(--modal-bg);
|
||||
--popover-bg: var(--bg-color);
|
||||
|
||||
--sidebar-select-color: var(--gray-800);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue