From 9003ae238ef87573a107f15ee392c623752f4bcd Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 20 Jul 2020 17:56:40 +0530 Subject: [PATCH 01/13] refactor: dark mode variables for layouts * desktop * icons * indicator * navbar * toasts --- frappe/public/scss/desktop.scss | 65 +++++++++++------------ frappe/public/scss/icons.scss | 4 +- frappe/public/scss/indicator.scss | 88 +++++++++++++++++++++++-------- frappe/public/scss/navbar.scss | 2 +- frappe/public/scss/toast.scss | 7 +-- frappe/public/scss/variables.scss | 57 +++++++++++++++++--- 6 files changed, 154 insertions(+), 69 deletions(-) diff --git a/frappe/public/scss/desktop.scss b/frappe/public/scss/desktop.scss index bbe0a073ca..0394d9cba8 100644 --- a/frappe/public/scss/desktop.scss +++ b/frappe/public/scss/desktop.scss @@ -1,5 +1,8 @@ $disabled-background: var(--gray-100); -$panel-bg: $gray-50; + +html, body { + background-color: var(--bg-color); +} .desk-sidebar { .list-sidebar-label { @@ -13,10 +16,9 @@ $panel-bg: $gray-50; margin-bottom: 1px; border-radius: 4px; cursor: pointer; - text-rendering: optimizelegibility; &:focus { - background-color: $panel-bg; + background-color: var(--sidebar-select-color); outline: 0; } @@ -25,15 +27,15 @@ $panel-bg: $gray-50; } &:hover { - background-color: $panel-bg; + background-color: var(--sidebar-select-color); } &.selected { - background-color: $panel-bg; + background-color: var(--sidebar-select-color); } a { - color: $gray-800; + color: var(--text-color); text-decoration: none; } @@ -63,7 +65,7 @@ $panel-bg: $gray-50; justify-content: space-between; .widget-group-title { - color: var(--gray-900); + color: var(--heading-color); font-weight: 600; font-size: var(--text-lg); margin-bottom: 1.2rem; @@ -142,7 +144,7 @@ $panel-bg: $gray-50; border-radius: var(--border-radius-md); height: 100%; box-shadow: var(--card-shadow); - background-color: white; + background-color: var(--card-bg); &.widget-shadow { &:hover { @@ -166,7 +168,7 @@ $panel-bg: $gray-50; font-family: inherit; font-weight: 500; line-height: 1.3em; - color: var(--gray-900); + color: var(--heading-color); svg { margin-right: 6px; @@ -218,7 +220,7 @@ $panel-bg: $gray-50; &.new-widget { min-height: 65px; background-color: $disabled-background; - color: $text-muted; + color: var(--text-muted); border: 1px dashed var(--gray-300); display: flex; align-content: center; @@ -238,7 +240,7 @@ $panel-bg: $gray-50; .frappe-chart { line.line-horizontal { - stroke: $border-color !important; + stroke: var(--border-color) !important; } } } @@ -249,7 +251,7 @@ $panel-bg: $gray-50; .widget-subtitle { font-size: $font-size-sm; - color: $text-muted; + color: var(--text-muted); margin-top: 5px; } @@ -285,7 +287,7 @@ $panel-bg: $gray-50; .widget-subtitle { margin-top: 5px; - color: $text-muted; + color: var(--text-muted); font-size: 14px; font-weight: 400; } @@ -293,7 +295,7 @@ $panel-bg: $gray-50; .widget-control { align-self: flex-start; margin-top: -5px; - color: $text-muted; + color: var(--text-muted); } } @@ -305,7 +307,7 @@ $panel-bg: $gray-50; letter-spacing: 0.015em; i { - color: $text-muted; + color: var(--text-muted); padding-left: 5px; padding-right: 2px; } @@ -318,7 +320,7 @@ $panel-bg: $gray-50; } span { - color: $text-muted; + color: var(--text-muted); cursor: pointer; } @@ -334,16 +336,16 @@ $panel-bg: $gray-50; &.skipped { i { - color: $text-muted; + color: var(--text-muted); } span { - color: $text-muted; + color: var(--text-muted); } &:hover { span { - color: $text-muted; + color: var(--text-muted); } .step-skip { @@ -369,7 +371,7 @@ $panel-bg: $gray-50; cursor: pointer; .widget-head { - margin-top: 5px; + margin-top: var(--margin-xs); margin-bottom: 5px; } @@ -382,19 +384,14 @@ $panel-bg: $gray-50; .link-item { display: block; text-decoration: none; - color: var(--gray-900); - padding: 5px; - margin: 3px 0px; - border-radius: 6px; + color: var(--text-color); + padding: var(--padding-xs); + margin: var(--margin-xs) 0px; + border-radius: var(--border-radius-md); cursor: pointer; &:hover { - background-color: var(--gray-50); - - .indicator-pill, - .indicator-pill-right { - background: white; - } + background-color: var(--bg-color); } &:first-child { @@ -410,7 +407,7 @@ $panel-bg: $gray-50; } .disabled-link { - color: $text-muted; + color: var(--text-muted); } .popover { @@ -439,7 +436,7 @@ $panel-bg: $gray-50; .widget-title { font-weight: 500; - color: var(--gray-900); + color: var(--heading-color); font-size: var(--text-base); margin-top: -5px; } @@ -477,7 +474,7 @@ $panel-bg: $gray-50; } .number-text { - color: $text-muted; + color: var(--text-muted); padding: 5px; font-size: 14px; } @@ -546,7 +543,7 @@ $panel-bg: $gray-50; left: 2px; // font-weight: bold; display: inline-block; - background: $text-muted; + background: var(--text-muted); font-size: 12px; line-height: 20px; padding: 0 8px; diff --git a/frappe/public/scss/icons.scss b/frappe/public/scss/icons.scss index 2c99caf1ce..6138eeed0b 100644 --- a/frappe/public/scss/icons.scss +++ b/frappe/public/scss/icons.scss @@ -7,8 +7,8 @@ background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; - fill: var(--gray-900); - stroke: var(--gray-900); + fill: var(--icon-fill); + stroke: var(--icon-stroke); } #icon-search { diff --git a/frappe/public/scss/indicator.scss b/frappe/public/scss/indicator.scss index 7a4f93a116..0611a9f1aa 100644 --- a/frappe/public/scss/indicator.scss +++ b/frappe/public/scss/indicator.scss @@ -43,69 +43,115 @@ margin: 0 0 0 4px; } +:root { + --indicator-green: var(--dark-green-500); + --indicator-green-bg: var(--dark-green-50); + + --indicator-blue: var(--blue-500); + --indicator-blue-bg: var(--blue-50); + + --indicator-orange: var(--orange-500); + --indicator-orange-bg: var(--orange-50); + + --indicator-yellow: var(--yellow-500); + --indicator-yellow-bg: var(--yellow-50); + + --indicator-gray: var(--gray-500); + --indicator-gray-bg: var(--gray-50); + + --indicator-darkgray: var(--dark-gray-500); + --indicator-darkgray-bg: var(--dark-gray-50); + + --indicator-red: var(--red-500); + --indicator-red-bg: var(--red-50); +} + +[data-theme="dark"] { + --indicator-green: var(--dark-green-50); + --indicator-green-bg: var(--dark-green-500); + + --indicator-blue: var(--blue-50); + --indicator-blue-bg: var(--blue-500); + + --indicator-orange: var(--orange-100); + --indicator-orange-bg: var(--orange-500); + + --indicator-yellow: var(--yellow-50); + --indicator-yellow-bg: var(--yellow-500); + + --indicator-gray: var(--gray-100); + --indicator-gray-bg: var(--gray-600); + + --indicator-dark-gray: var(--dark-gray-200); + --indicator-dark-gray-bg: var(--dark-gray-700); + + --indicator-red: var(--red-50); + --indicator-red-bg: var(--red-500); +} + .indicator-pill.green, .indicator-pill-right.green, .indicator-pill-round.green { - background: var(--dark-green-50); - color: var(--dark-green-500); + background: var(--indicator-green-bg); + color: var(--indicator-green); &::before, &::after { - background: var(--dark-green-500); + background: var(--indicator-green); } } .indicator-pill.blue, .indicator-pill-right.blue { - background: var(--blue-50); - color: var(--blue-500); + background: var(--indicator-blue-bg); + color: var(--indicator-blue); &::before, &::after { - background: var(--blue-500); + background: var(--indicator-blue); } } .indicator-pill.orange, .indicator-pill-right.orange { - background: var(--orange-100); - color: var(--orange-500); + background: var(--indicator-orange-bg); + color: var(--indicator-orange); &::before, &::after { - background: var(--orange-500); + background: var(--indicator-orange); } } .indicator-pill.yellow, .indicator-pill-right.yellow { - background: var(--yellow-50); - color: var(--yellow-500); + background: var(--indicator-yellow-bg); + color: var(--indicator-yellow); &::before, &::after { - background: var(--yellow-500); + background: var(--indicator-yellow); } } .indicator-pill.grey, .indicator-pill-right.grey, .indicator-pill-round.grey { - background: var(--gray-100); - color: var(--gray-600); + background: var(--indicator-gray-bg); + color: var(--indicator-gray); &::before, &::after { - background: var(--gray-600); + background: var(--indicator-gray); } } .indicator-pill.darkgrey, .indicator-pill-right.darkgrey { - background: var(--gray-200); - color: var(--gray-600); + background: var(--indicator-dark-gray-bg); + color: var(--indicator-gray); &::before, &::after { - background: var(--gray-700); + background: var(--indicator-dark-gray); } } .indicator-pill.red, .indicator-pill-right.red, .indicator-pill-round.red { - background: var(--red-50); - color: var(--red-500); + background: var(--indicator-red-bg); + color: var(--indicator-red); &::before, &::after { - background: var(--red-500); + background: var(--indicator-red); } } diff --git a/frappe/public/scss/navbar.scss b/frappe/public/scss/navbar.scss index 2039b33b78..99ac65ec2d 100644 --- a/frappe/public/scss/navbar.scss +++ b/frappe/public/scss/navbar.scss @@ -1,7 +1,7 @@ .navbar { height: $navbar-height; background: var(--fg-color); - box-shadow: inset 0px -1px 0px var(--gray-100); + box-shadow: inset 0px -1px 0px var(--shadow-inset); .navbar-brand { padding: 0rem 1rem; diff --git a/frappe/public/scss/toast.scss b/frappe/public/scss/toast.scss index 15339f5d13..64bc783d86 100644 --- a/frappe/public/scss/toast.scss +++ b/frappe/public/scss/toast.scss @@ -6,11 +6,11 @@ } #alert-container .desk-alert { - box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08); + box-shadow: $card-box-shadow; width: 400px; min-height: 50px; max-height: 200px; - background-color: $white; + background-color: var(--toast-bg); -webkit-animation-name: backInRight; animation-name: backInRight; @@ -38,13 +38,14 @@ .alert-message { font-weight: 500; - color: var(--gray-900); + color: var(--text-color); line-height: 20px; } .alert-subtitle { font-size: 13px; padding-left: 34px; + color: var(--text-muted); } } diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss index 64ddee7b61..d6ebfce7f0 100644 --- a/frappe/public/scss/variables.scss +++ b/frappe/public/scss/variables.scss @@ -139,27 +139,42 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6 --text-xl: 18px; --text-2xl: 20px; + // Type Colors --text-muted: var(--gray-600); --text-light: var(--gray-700); --text-color: var(--gray-900); --heading-color: var(--gray-900); + // SVG Colors + --icon-fill: var(--gray-900); + --icon-stroke: var(--gray-900); + + // Layout Colors + --bg-color: var(--gray-50); + --fg-color: white; + --card-bg: var(--fg-color); + --control-bg: var(--gray-100); + --modal-bg: white; + --toast-bg: var(--modal-bg); + + --sidebar-select-color: var(--gray-100); + + --shadow-inset: var(--gray-100); + --border-color: var(--gray-100); + + // Border Sizes --border-radius-sm: 4px; --border-radius: 6px; --border-radius-md: 8px; --border-radius-lg: 12px; - - --bg-color: var(--gray-50); - --fg-color: white; - --card-bg: var(--fg-color); } html, body { font-size: 14px; } -$border-color: var(--gray-100); -$control-bg: var(--gray-100); +$border-color: var(--border-color); +$control-bg: var(--control-bg); $code-color: var(--purple-600); $border-radius: var(--border-radius); @@ -205,13 +220,39 @@ $dropdown-item-padding-y: 0.5rem !default; $dropdown-item-padding-x: 0.5rem !default; [data-theme="dark"] { - --bg-color: var(--gray-900); - --fg-color: var(--gray-700); + --gray-50: #{$gray-50}; + --gray-100: #F7FAFC; + --gray-200: #EDF2F7; + --gray-300: #E2E8F0; + --gray-400: #CBD5E0; + --gray-500: #A0AEC0; + --gray-600: #718096; + --gray-700: #4A5568; + --gray-800: #2D3748; + --gray-900: #1A202C; + // Type Colors --text-muted: var(--gray-300); --text-light: var(--gray-400); --text-color: var(--gray-50); --heading-color: var(--gray-50); + + // SVG Colors + --icon-fill: var(--gray-50); + --icon-stroke: var(--gray-50); + + // Layout Colors + --bg-color: var(--gray-900); + --fg-color: var(--gray-800); + --card-bg: var(--gray-800); + --control-bg: var(--gray-700); + --modal-bg: var(--gray-700); + --toast-bg: var(--modal-bg); + + --sidebar-select-color: var(--gray-800); + + --shadow-inset: var(--fg-color); + --border-color: var(--gray-100); } $spacer: 14px; From fed54ae7779919bad65720ec7240a9a2c6fbe79e Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 20 Jul 2020 18:16:51 +0530 Subject: [PATCH 02/13] feat: update variables for toast --- frappe/public/js/frappe/ui/messages.js | 2 +- frappe/public/scss/toast.scss | 26 ++++++++++++-------------- frappe/public/scss/variables.scss | 2 +- 3 files changed, 14 insertions(+), 16 deletions(-) diff --git a/frappe/public/js/frappe/ui/messages.js b/frappe/public/js/frappe/ui/messages.js index cba15377db..9013cc79c9 100644 --- a/frappe/public/js/frappe/ui/messages.js +++ b/frappe/public/js/frappe/ui/messages.js @@ -366,7 +366,7 @@ frappe.show_alert = function(message, seconds=7, actions={}) { message: message }; } - + if (!$('#dialog-container').length) { $('
').appendTo('body'); } diff --git a/frappe/public/scss/toast.scss b/frappe/public/scss/toast.scss index 64bc783d86..35e16c8bbf 100644 --- a/frappe/public/scss/toast.scss +++ b/frappe/public/scss/toast.scss @@ -16,19 +16,17 @@ animation-name: backInRight; animation-duration: 600ms; - // word-break: break-all; overflow-y: auto; position: relative; - // transform: translateX(calc(100% + 20px)); - // transition: transform 300ms ease; padding: 0px; border-radius: var(--border-radius-md); .alert-message-container { - padding: 16px 40px 16px 16px; + padding: var(--padding-md); + padding-right: var(--padding-xl); .icon { - margin-right: 10px; + margin-right: var(--margin-sm); } .alert-title-container { @@ -43,7 +41,7 @@ } .alert-subtitle { - font-size: 13px; + font-size: var(--text-md); padding-left: 34px; color: var(--text-muted); } @@ -51,8 +49,8 @@ .close { position: absolute; - top: 10px; - right: 10px; + top: var(--padding-sm); + right: var(--padding-sm); color: inherit; opacity: 1; font-size: inherit; @@ -65,16 +63,16 @@ border: none; background: none; width: 100%; - border-top: 1px solid $border-color; - border-right: 1px solid $border-color; - padding: 7px; + border-top: 1px solid var(--border-color); + border-right: 1px solid var(--border-color); + padding: var(--padding-sm); outline: none; - font-size: 12px; + font-size: var(--text-sm); font-weight: 500; - color: $text-muted; + color: var(--text-light); &:hover { - color: var(--gray-900) + color: var(--text-color) } &:last-child { diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss index d6ebfce7f0..d396825987 100644 --- a/frappe/public/scss/variables.scss +++ b/frappe/public/scss/variables.scss @@ -252,7 +252,7 @@ $dropdown-item-padding-x: 0.5rem !default; --sidebar-select-color: var(--gray-800); --shadow-inset: var(--fg-color); - --border-color: var(--gray-100); + --border-color: var(--gray-600); } $spacer: 14px; From d1966fd08f32908c3d43e4794a7d9ae8d3ce2817 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 20 Jul 2020 20:45:44 +0530 Subject: [PATCH 03/13] feat: separate flex mixin --- frappe/public/scss/main.scss | 1 + frappe/public/scss/mixins.scss | 6 ++++++ frappe/public/scss/notification.scss | 7 ------- 3 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 frappe/public/scss/mixins.scss diff --git a/frappe/public/scss/main.scss b/frappe/public/scss/main.scss index 1c569199b6..42170f982d 100644 --- a/frappe/public/scss/main.scss +++ b/frappe/public/scss/main.scss @@ -1,4 +1,5 @@ @import "variables"; +@import "mixins"; @import "~bootstrap/scss/bootstrap"; @import "global"; diff --git a/frappe/public/scss/mixins.scss b/frappe/public/scss/mixins.scss new file mode 100644 index 0000000000..17e04f26f5 --- /dev/null +++ b/frappe/public/scss/mixins.scss @@ -0,0 +1,6 @@ +@mixin flex($dis, $x, $y, $dir) { + display: $dis; + justify-content: $x; + align-items: $y; + flex-direction: $dir; +} \ No newline at end of file diff --git a/frappe/public/scss/notification.scss b/frappe/public/scss/notification.scss index 3b6c1e6b25..c5fdc273b9 100644 --- a/frappe/public/scss/notification.scss +++ b/frappe/public/scss/notification.scss @@ -3,13 +3,6 @@ height: $h; } -@mixin flex($dis, $x, $y, $dir) { - display: $dis; - justify-content: $x; - align-items: $y; - flex-direction: $dir; -} - .navbar { perspective: 3200px; } From 5a6369e5d3c6fa5e88625503808ff374bb66702d Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 20 Jul 2020 20:46:12 +0530 Subject: [PATCH 04/13] feat: add 2xl spacing --- frappe/public/scss/variables.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss index d396825987..23feff2944 100644 --- a/frappe/public/scss/variables.scss +++ b/frappe/public/scss/variables.scss @@ -124,12 +124,14 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6 --padding-md: 15px; --padding-lg: 20px; --padding-xl: 30px; + --padding-2xl: 40px; --margin-xs: 5px; --margin-sm: 10px; --margin-md: 15px; --margin-lg: 20px; --margin-xl: 30px; + --margin-2xl: 40px; --text-xs: 11px; --text-sm: 12px; From 49a11bc2ab6ee239d993b87dd94e2df765da8d7e Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 20 Jul 2020 20:46:31 +0530 Subject: [PATCH 05/13] feat: update variables for desktop --- frappe/public/scss/desktop.scss | 218 ++++---------------------------- frappe/public/scss/toast.scss | 2 +- 2 files changed, 27 insertions(+), 193 deletions(-) diff --git a/frappe/public/scss/desktop.scss b/frappe/public/scss/desktop.scss index 0394d9cba8..7feb500ec6 100644 --- a/frappe/public/scss/desktop.scss +++ b/frappe/public/scss/desktop.scss @@ -1,5 +1,3 @@ -$disabled-background: var(--gray-100); - html, body { background-color: var(--bg-color); } @@ -8,13 +6,15 @@ html, body { .list-sidebar-label { margin-bottom: 1rem; } + .desk-sidebar-item { + @include flex(flex, null, center, null); display: flex; align-items: center; font-size: var(--text-base); padding: 8px 12px; - margin-bottom: 1px; - border-radius: 4px; + margin-bottom: 2px; + border-radius: var(--border-radius-md); cursor: pointer; &:focus { @@ -22,10 +22,6 @@ html, body { outline: 0; } - &:first-child { - margin-top: 100px; - } - &:hover { background-color: var(--sidebar-select-color); } @@ -40,29 +36,20 @@ html, body { } svg { - margin-right: 0.875rem; + margin-right: var(--margin-sm); } } } .desk-page { - padding: 15px; -} - -.frappe-rtl { - .desk-body { - padding-left: 0px; - padding-right: calc(20rem + 15px); - } + padding: var(--padding-md); } .widget-group { - margin-bottom: 40px; + margin-bottom: var(--margin-2xl); .widget-group-head { - display: flex; - align-items: center; - justify-content: space-between; + @include flex(flex, space-between, center, null); .widget-group-title { color: var(--heading-color); @@ -74,7 +61,7 @@ html, body { .legend { display: flex; - padding: 15px; + padding: var(--padding-md); .legend-item { margin-right: 20px; @@ -114,8 +101,7 @@ html, body { @media (max-width: 768px) { .legend { - display: flex; - flex-direction: column; + @include flex(flex, null, null, column); .legend-item { margin-right: 20px; @@ -137,33 +123,29 @@ html, body { } .widget { - display: flex; - flex-direction: column; + @include flex(flex, null, null, column); min-height: 1px; padding: 15px; border-radius: var(--border-radius-md); height: 100%; - box-shadow: var(--card-shadow); + box-shadow: var(--shadow-sm); background-color: var(--card-bg); &.widget-shadow { &:hover { - box-shadow: 0px 2px 8px rgba(17, 43, 66, 0.1), 0px 3px 12px rgba(17, 43, 66, 0.08); + box-shadow: var(--shadow-md); } } &.border { - border: 1px solid $border-color; + border: 1px solid var(--border-color); } .widget-head { - display: flex; - justify-content: space-between; + @include flex(flex, space-between, center, null); .widget-title { - display: flex; - align-self: center; - align-items: center; + @include flex(flex, null, center, null); font-size: var(--text-lg); font-family: inherit; font-weight: 500; @@ -176,9 +158,7 @@ html, body { } } .widget-control { - align-self: center; - display: flex; - flex-direction: row-reverse; + @include flex(flex, null, center, row-reverse); // Any immidiate child >* { @@ -213,18 +193,17 @@ html, body { } &.sortable-ghost { - background-color: $disabled-background; - border-color: $disabled-background + background-color: var(--gray-100); + border-color: var(--gray-100) } &.new-widget { + @include flex(flex, center, center, null); min-height: 65px; - background-color: $disabled-background; + box-shadow: none; + background-color: var(--gray-100); color: var(--text-muted); border: 1px dashed var(--gray-300); - display: flex; - align-content: center; - justify-content: center; cursor: pointer; } @@ -232,7 +211,7 @@ html, body { &.dashboard-widget-box { min-height: 240px; padding: 10px 15px; - box-shadow: $card-box-shadow; + box-shadow: var(--shadow-sm); .chart-container { margin-right: -10px; @@ -455,16 +434,13 @@ html, body { text-align: left; .number-card-loading { - display: flex; + @include flex(flex, space-between, center, null); height: 50px; - align-items: center; - justify-content: center; } .widget-content { + @include flex(flex, space-between, null, null); padding-top: 25px; - display: flex; - justify-content: space-between; .number { font-weight: 600; @@ -480,9 +456,7 @@ html, body { } .card-stats { - display: flex; - flex-direction: column; - align-items: flex-end; + @include flex(flex, null, flex-end, column); } .percentage-stat-area { @@ -551,146 +525,6 @@ html, body { border-radius: 10px; } -@-webkit-keyframes smallBounce { - from, - 20%, - 53%, - 80%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 40%, - 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -12px, 0); - transform: translate3d(0, -12px, 0); - } - - 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -6px, 0); - transform: translate3d(0, -6px, 0); - } - - 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); - } -} - -@keyframes smallBounce { - from, - 20%, - 53%, - 80%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 40%, - 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -12px, 0); - transform: translate3d(0, -12px, 0); - } - - 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -6px, 0); - transform: translate3d(0, -6px, 0); - } - - 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); - } -} - -.small-bounce { - -webkit-animation-name: smallBounce; - animation-name: smallBounce; - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - animation-duration: 1s; -} - -@-webkit-keyframes slideInUp { - from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes slideInUp { - from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.slide-in-up { - -webkit-animation-name: slideInUp; - animation-name: slideInUp; - animation-duration: 1s; -} - - -@-webkit-keyframes pulse { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 50% { - -webkit-transform: scale3d(1.05, 1.05, 1.05); - transform: scale3d(1.05, 1.05, 1.05); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@keyframes pulse { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 50% { - -webkit-transform: scale3d(1.05, 1.05, 1.05); - transform: scale3d(1.05, 1.05, 1.05); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} .zoomOutDelete { transition: opacity 0.2s, visibility 0.2s, transform 0.2s; diff --git a/frappe/public/scss/toast.scss b/frappe/public/scss/toast.scss index 35e16c8bbf..d0f2566615 100644 --- a/frappe/public/scss/toast.scss +++ b/frappe/public/scss/toast.scss @@ -23,7 +23,7 @@ .alert-message-container { padding: var(--padding-md); - padding-right: var(--padding-xl); + padding-right: var(--padding-2xl); .icon { margin-right: var(--margin-sm); From 9b6d086e85a595e0d7b4ad69ce3497a68f04e623 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 20 Jul 2020 20:46:47 +0530 Subject: [PATCH 06/13] feat: add shadow and sidebar select to variables --- frappe/public/scss/variables.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss index 23feff2944..fdd7957760 100644 --- a/frappe/public/scss/variables.scss +++ b/frappe/public/scss/variables.scss @@ -117,7 +117,6 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6 --purple-100: #EAEAFB; --purple-50: #F2F2FD; - --card-shadow: 0px 0px 0.5px rgba(0, 0, 0, 0.75), 0px 1px 2px rgba(0, 0, 0, 0.13); --padding-xs: 5px; --padding-sm: 10px; @@ -141,6 +140,13 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6 --text-xl: 18px; --text-2xl: 20px; + --shadow-sm: 0px 0px 0.5px rgba(0, 0, 0, 0.75), 0px 1px 2px rgba(0, 0, 0, 0.13); + --shadow-md: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1); + --shadow-base: 0px 4px 8px rgba(25, 39, 52, 0.06), 0px 0px 4px rgba(25, 39, 52, 0.12); + --shadow-lg: 0px 8px 14px rgba(25, 39, 52, 0.08), 0px 2px 6px rgba(25, 39, 52, 0.04); + --shadow-xl: 0px 18px 22px rgba(25, 39, 52, 0.1), 0px 1px 10px rgba(0, 0, 0, 0.06), 0px 0.5px 5px rgba(25, 39, 52, 0.04); + --card-shadow: var(--shadow-sm); + // Type Colors --text-muted: var(--gray-600); --text-light: var(--gray-700); @@ -159,7 +165,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6 --modal-bg: white; --toast-bg: var(--modal-bg); - --sidebar-select-color: var(--gray-100); + --sidebar-select-color: var(--gray-200); --shadow-inset: var(--gray-100); --border-color: var(--gray-100); From 45954fa6377294bdb8e0c8d6b83448928dec8bd9 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Tue, 21 Jul 2020 12:18:36 +0530 Subject: [PATCH 07/13] fix: Apply card style only in main form --- frappe/public/js/frappe/form/form.js | 3 ++- frappe/public/js/frappe/form/layout.js | 3 +-- frappe/public/scss/form.scss | 14 +++++++++----- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/frappe/public/js/frappe/form/form.js b/frappe/public/js/frappe/form/form.js index f7d1b3e873..9200a14711 100644 --- a/frappe/public/js/frappe/form/form.js +++ b/frappe/public/js/frappe/form/form.js @@ -159,7 +159,8 @@ frappe.ui.form.Form = class FrappeForm { parent: this.body, doctype: this.doctype, frm: this, - with_dashboard: true + with_dashboard: true, + card_layout: true, }); this.layout.make(); diff --git a/frappe/public/js/frappe/form/layout.js b/frappe/public/js/frappe/form/layout.js index d4d0a6a551..add9539d0a 100644 --- a/frappe/public/js/frappe/form/layout.js +++ b/frappe/public/js/frappe/form/layout.js @@ -554,7 +554,6 @@ frappe.ui.form.Layout = Class.extend({ frappe.ui.form.Section = Class.extend({ init: function(layout, df) { - var me = this; this.layout = layout; this.df = df || {}; this.fields_list = []; @@ -578,7 +577,7 @@ frappe.ui.form.Section = Class.extend({ this.layout.page = $('
').appendTo(this.layout.wrapper); } - this.wrapper = $('
') + this.wrapper = $(`
`) .appendTo(this.layout.page); this.layout.sections.push(this); diff --git a/frappe/public/scss/form.scss b/frappe/public/scss/form.scss index aa02bfc3fe..7604a9b738 100644 --- a/frappe/public/scss/form.scss +++ b/frappe/public/scss/form.scss @@ -16,11 +16,7 @@ $form-left-padding: var(--padding-xl); } .form-section { - margin: var(--margin-lg) 0px; - border-radius: var(--border-radius-md); - box-shadow: var(--card-shadow); - padding: var(--padding-sm); - background: var(--card-bg); + margin: 0px; .form-section-description { margin-bottom: 10px; @@ -51,6 +47,14 @@ $form-left-padding: var(--padding-xl); } } +.form-section.card_layout { + margin: var(--margin-lg) 0px; + border-radius: var(--border-radius-md); + box-shadow: var(--card-shadow); + padding: var(--padding-sm); + background: var(--card-bg); +} + .form-dashboard { .section-head { font-size: var(--text-xl); From b999e62cb00a29851893f61a40811ae9f982d1f7 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Tue, 21 Jul 2020 12:19:45 +0530 Subject: [PATCH 08/13] fix: Make data pill a button --- frappe/public/js/frappe/dom.js | 2 +- frappe/public/scss/sidebar.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frappe/public/js/frappe/dom.js b/frappe/public/js/frappe/dom.js index 337ad376ea..d5ab13c969 100644 --- a/frappe/public/js/frappe/dom.js +++ b/frappe/public/js/frappe/dom.js @@ -291,7 +291,7 @@ frappe.scrub = function(text, spacer='_') { frappe.get_data_pill = (label, target_id=null, remove_action=null) => { let data_pill_wrapper = $(` -
+
${label}
`); diff --git a/frappe/public/scss/sidebar.scss b/frappe/public/scss/sidebar.scss index 6247088bfb..ee5c7f007b 100644 --- a/frappe/public/scss/sidebar.scss +++ b/frappe/public/scss/sidebar.scss @@ -405,7 +405,7 @@ body[data-route^="Module"] .main-menu { .remove-btn { margin-left: var(--margin-xs); } - background-color: var(--gray-50); + background-color: var(--fg-color); border-radius: var(--border-radius); padding: var(--padding-xs) var(--padding-sm); color: $gray-800; From 8aeb6239849b31cd9809c43d19d7bc635ade3209 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Tue, 21 Jul 2020 12:20:02 +0530 Subject: [PATCH 09/13] fix: Review style --- frappe/public/scss/sidebar.scss | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/frappe/public/scss/sidebar.scss b/frappe/public/scss/sidebar.scss index ee5c7f007b..4cf345758e 100644 --- a/frappe/public/scss/sidebar.scss +++ b/frappe/public/scss/sidebar.scss @@ -421,10 +421,31 @@ body[data-route^="Module"] .main-menu { } .form-reviews { - .review-row { + // REDESIGN-TODO: Refactor + .review { + display: inline-block; font-weight: 500; + border-radius: 50%; margin-bottom: var(--margin-sm); + margin-right: var(--margin-sm); + font-size: var(--text-xs); + height: 34px; + width: 34px; + text-align: center; cursor: pointer; + padding: var(--padding-xs); + padding-top: 8px; + &.appreciation { + background-color: var(--dark-green-100); + color: var(--dark-green-600); + } + &.criticism { + background-color: var(--red-100); + color: var(--red-600); + } + } + li:last-child { + display: inline-block; } .add-review-btn { height: 28px; From 75a7948f354ab6dd04d2f09623ac48a9aaf1810d Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Tue, 21 Jul 2020 12:20:55 +0530 Subject: [PATCH 10/13] fix: Review style 2 --- frappe/public/js/frappe/form/sidebar/review.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/frappe/public/js/frappe/form/sidebar/review.js b/frappe/public/js/frappe/form/sidebar/review.js index 21eb217e97..dd991778d3 100644 --- a/frappe/public/js/frappe/form/sidebar/review.js +++ b/frappe/public/js/frappe/form/sidebar/review.js @@ -72,7 +72,6 @@ frappe.ui.form.Review = class Review { } show_review_dialog() { const user_options = this.get_involved_users(); - const doc_owner = this.frm.doc.owner; const review_dialog = new frappe.ui.Dialog({ 'title': __('Add Review'), 'fields': [{ @@ -140,12 +139,11 @@ frappe.ui.form.Review = class Review { const review_logs = this.frm.get_docinfo().energy_point_logs .filter(log => ['Appreciation', 'Criticism'].includes(log.type)); - this.parent.find('.review-row').remove(); + this.parent.find('.review').remove(); review_logs.forEach(log => { let review_pill = $(` -
  • - ${frappe.avatar(log.owner)} - ${log.points > 0 ? '+': ''}${log.points} ${ __('Points')} +
  • + ${log.points > 0 ? '+': ''}${log.points}
    • `); review_pill.insertBefore(this.add_review_button_wrapper); From 4ecc9d95fe772bffe199b3ac7c126a2cd04cfcdd Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Tue, 21 Jul 2020 12:22:48 +0530 Subject: [PATCH 11/13] fix: Background color of table multiselect input --- frappe/public/less/controls.less | 1 + 1 file changed, 1 insertion(+) diff --git a/frappe/public/less/controls.less b/frappe/public/less/controls.less index 53f0aba43c..660793b340 100644 --- a/frappe/public/less/controls.less +++ b/frappe/public/less/controls.less @@ -82,6 +82,7 @@ border: none; padding: 0; font-size: @text-medium; + background-color: var(--control-bg); } .table-multiselect .awesomplete { From 9a9eda1f10e924d35fd2a2acde8f0a89fdd62ae8 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Tue, 21 Jul 2020 14:15:07 +0530 Subject: [PATCH 12/13] feat: Add controls.scss --- frappe/public/less/controls.less | 23 ----------------------- frappe/public/scss/controls.scss | 22 ++++++++++++++++++++++ frappe/public/scss/global.scss | 9 +++++++-- frappe/public/scss/main.scss | 1 + 4 files changed, 30 insertions(+), 25 deletions(-) create mode 100644 frappe/public/scss/controls.scss diff --git a/frappe/public/less/controls.less b/frappe/public/less/controls.less index 660793b340..d16811843d 100644 --- a/frappe/public/less/controls.less +++ b/frappe/public/less/controls.less @@ -66,29 +66,6 @@ margin-bottom: 5px; } -/* table multiselect */ -.table-multiselect { - display: flex; - align-items: center; - flex-wrap: wrap; - height: auto; - padding: 10px; - padding-bottom: 5px; -} - -.table-multiselect.form-control input { - display: inline-block; - outline: none; - border: none; - padding: 0; - font-size: @text-medium; - background-color: var(--control-bg); -} - -.table-multiselect .awesomplete { - display: inline; -} - .tb-selected-value { display: inline-block; margin-right: 5px; diff --git a/frappe/public/scss/controls.scss b/frappe/public/scss/controls.scss new file mode 100644 index 0000000000..9a05c2f34b --- /dev/null +++ b/frappe/public/scss/controls.scss @@ -0,0 +1,22 @@ +/* table multiselect */ +.table-multiselect { + display: flex; + align-items: center; + flex-wrap: wrap; + height: auto; + padding: 10px; + padding-bottom: 5px; +} + +.table-multiselect.form-control input { + display: inline-block; + outline: none; + border: none; + padding: 0; + font-size: var(--text-xs); + background-color: var(--control-bg); +} + +.table-multiselect .awesomplete { + display: inline; +} \ No newline at end of file diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss index 8573433b3c..cdbe64271e 100644 --- a/frappe/public/scss/global.scss +++ b/frappe/public/scss/global.scss @@ -181,11 +181,16 @@ h2 { } } -.btn-group-sm > .btn, .btn-sm, .btn-xs { - padding: 4px 12px; +.btn-group-sm > .btn, .btn-sm { + padding: var(--padding-xs) var(--padding-sm); font-size: var(--text-md); } +.btn-xs { + padding: var(--padding-xs) var(--padding-sm); + font-size: var(--text-xs); +} + .input-xs { height: 26px; font-size: var(--text-md); diff --git a/frappe/public/scss/main.scss b/frappe/public/scss/main.scss index 42170f982d..6b057a5d7c 100644 --- a/frappe/public/scss/main.scss +++ b/frappe/public/scss/main.scss @@ -26,6 +26,7 @@ @import "kanban"; @import "calendar"; @import "dashboard-view"; +@import "controls"; @import "frappe/public/css/font-awesome"; @import "multilevel-dropdown"; From 8ef4d4b7ade29816e865037c5040b8dda91fa97b Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Tue, 21 Jul 2020 19:44:14 +0530 Subject: [PATCH 13/13] feat: Add card mixin --- frappe/public/js/frappe/form/layout.js | 2 +- frappe/public/scss/form.scss | 7 ++----- frappe/public/scss/mixins.scss | 12 ++++++++++++ 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/frappe/public/js/frappe/form/layout.js b/frappe/public/js/frappe/form/layout.js index add9539d0a..1829ec66d2 100644 --- a/frappe/public/js/frappe/form/layout.js +++ b/frappe/public/js/frappe/form/layout.js @@ -577,7 +577,7 @@ frappe.ui.form.Section = Class.extend({ this.layout.page = $('
    ').appendTo(this.layout.wrapper); } - this.wrapper = $(`
    `) + this.wrapper = $(`
    `) .appendTo(this.layout.page); this.layout.sections.push(this); diff --git a/frappe/public/scss/form.scss b/frappe/public/scss/form.scss index 7604a9b738..14ec2dd238 100644 --- a/frappe/public/scss/form.scss +++ b/frappe/public/scss/form.scss @@ -47,12 +47,9 @@ $form-left-padding: var(--padding-xl); } } -.form-section.card_layout { +.form-section.frappe-card { margin: var(--margin-lg) 0px; - border-radius: var(--border-radius-md); - box-shadow: var(--card-shadow); - padding: var(--padding-sm); - background: var(--card-bg); + @include card(); } .form-dashboard { diff --git a/frappe/public/scss/mixins.scss b/frappe/public/scss/mixins.scss index 17e04f26f5..99327d2043 100644 --- a/frappe/public/scss/mixins.scss +++ b/frappe/public/scss/mixins.scss @@ -3,4 +3,16 @@ justify-content: $x; align-items: $y; flex-direction: $dir; +} + +@mixin card( + $radius: var(--border-radius-md), + $shadow: var(--card-shadow), + $padding: var(--padding-sm), + $background-color: var(--card-bg) +) { + border-radius: $radius; + box-shadow: $shadow; + padding: $padding; + background-color: $background-color; } \ No newline at end of file