From 9ec857c48c173b00b8770a4881ff12ca321880c3 Mon Sep 17 00:00:00 2001 From: prssanna Date: Mon, 27 Jul 2020 13:38:55 +0530 Subject: [PATCH 1/5] fix: fil color for close icon --- frappe/public/scss/icons.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frappe/public/scss/icons.scss b/frappe/public/scss/icons.scss index ddf3c9646b..1a1179ea1b 100644 --- a/frappe/public/scss/icons.scss +++ b/frappe/public/scss/icons.scss @@ -15,6 +15,10 @@ stroke: var(--gray-700); } +#icon-close { + fill: var(--gray-600); +} + /* like icon */ use.like-icon { cursor: pointer; From 64bd3702c1427cac97a6da68606012212c6b23b5 Mon Sep 17 00:00:00 2001 From: prssanna Date: Mon, 27 Jul 2020 13:40:50 +0530 Subject: [PATCH 2/5] fix: filter styles in .filter-area class --- frappe/public/scss/filters.scss | 55 +++++++++++++++++---------------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/frappe/public/scss/filters.scss b/frappe/public/scss/filters.scss index 03a5cc03c7..49f70acbf1 100644 --- a/frappe/public/scss/filters.scss +++ b/frappe/public/scss/filters.scss @@ -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-"] { From b170b26f6f90065e7f9418039c264d378f11e2d2 Mon Sep 17 00:00:00 2001 From: prssanna Date: Mon, 27 Jul 2020 13:41:51 +0530 Subject: [PATCH 3/5] fix: css variables for checkbox and popover --- frappe/public/scss/global.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss index 40403b4df1..3473459bb0 100644 --- a/frappe/public/scss/global.scss +++ b/frappe/public/scss/global.scss @@ -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 { From 1231369cdc3ddde271ab187bc514effd6ca1f60f Mon Sep 17 00:00:00 2001 From: prssanna Date: Mon, 27 Jul 2020 13:42:18 +0530 Subject: [PATCH 4/5] fix: use css variables for list and page style --- frappe/public/scss/list.scss | 8 ++++---- frappe/public/scss/page.scss | 2 +- frappe/public/scss/variables.scss | 4 +++- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/frappe/public/scss/list.scss b/frappe/public/scss/list.scss index 321a10639b..383c14a9f4 100644 --- a/frappe/public/scss/list.scss +++ b/frappe/public/scss/list.scss @@ -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; } diff --git a/frappe/public/scss/page.scss b/frappe/public/scss/page.scss index 2e8d7a0271..f1c958164c 100644 --- a/frappe/public/scss/page.scss +++ b/frappe/public/scss/page.scss @@ -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; diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss index 86f373a5ef..89a4c4c683 100644 --- a/frappe/public/scss/variables.scss +++ b/frappe/public/scss/variables.scss @@ -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); From de43875f3dcb2d43a8ec45f1dcd054cf5cf62d39 Mon Sep 17 00:00:00 2001 From: prssanna Date: Mon, 27 Jul 2020 13:58:09 +0530 Subject: [PATCH 5/5] refactor: image view style --- .../js/frappe/views/image/image_view.js | 1 - frappe/public/scss/image-view.scss | 69 ++++++------------- 2 files changed, 20 insertions(+), 50 deletions(-) diff --git a/frappe/public/js/frappe/views/image/image_view.js b/frappe/public/js/frappe/views/image/image_view.js index 00cd32b3e1..ff8d1c9164 100644 --- a/frappe/public/js/frappe/views/image/image_view.js +++ b/frappe/public/js/frappe/views/image/image_view.js @@ -59,7 +59,6 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView { this.$result.html(` ${this.get_header_html()} -
${html}
diff --git a/frappe/public/scss/image-view.scss b/frappe/public/scss/image-view.scss index 1a7f827b8c..2ca93ef007 100644 --- a/frappe/public/scss/image-view.scss +++ b/frappe/public/scss/image-view.scss @@ -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, "); - // 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;