Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui

This commit is contained in:
Suraj Shetty 2020-07-27 16:56:20 +05:30
commit d327744f2d
8 changed files with 64 additions and 84 deletions

View file

@ -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>

View file

@ -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-"] {

View file

@ -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 {

View file

@ -15,6 +15,10 @@
stroke: var(--gray-700);
}
#icon-close {
fill: var(--gray-600);
}
/* like icon */
use.like-icon {
cursor: pointer;

View file

@ -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;

View file

@ -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;
}

View file

@ -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;

View file

@ -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);