Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui
This commit is contained in:
prssanna
commit
d5a99ecb9f
19 changed files with 284 additions and 321 deletions
|
|
@ -291,7 +291,7 @@ frappe.scrub = function(text, spacer='_') {
|
|||
|
||||
frappe.get_data_pill = (label, target_id=null, remove_action=null) => {
|
||||
let data_pill_wrapper = $(`
|
||||
<div class="data-pill">
|
||||
<div class="data-pill btn">
|
||||
<span class="pill-label ellipsis">${label}</span>
|
||||
</div>
|
||||
`);
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = $('<div class="form-page"></div>').appendTo(this.layout.wrapper);
|
||||
}
|
||||
|
||||
this.wrapper = $('<div class="row form-section">')
|
||||
this.wrapper = $(`<div class="row form-section ${this.layout.card_layout ? "frappe-card" : "" }">`)
|
||||
.appendTo(this.layout.page);
|
||||
this.layout.sections.push(this);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = $(`
|
||||
<li class="review-row">
|
||||
${frappe.avatar(log.owner)}
|
||||
${log.points > 0 ? '+': ''}${log.points} ${ __('Points')}
|
||||
<li class="review ${log.points < 0 ? 'criticism': 'appreciation'}">
|
||||
${log.points > 0 ? '+': ''}${log.points}
|
||||
</li>
|
||||
`);
|
||||
review_pill.insertBefore(this.add_review_button_wrapper);
|
||||
|
|
|
|||
|
|
@ -366,7 +366,7 @@ frappe.show_alert = function(message, seconds=7, actions={}) {
|
|||
message: message
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
if (!$('#dialog-container').length) {
|
||||
$('<div id="dialog-container"><div id="alert-container"></div></div>').appendTo('body');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,28 +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;
|
||||
}
|
||||
|
||||
.table-multiselect .awesomplete {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.tb-selected-value {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
|
|
|
|||
22
frappe/public/scss/controls.scss
Normal file
22
frappe/public/scss/controls.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,69 +1,58 @@
|
|||
$disabled-background: var(--gray-100);
|
||||
$panel-bg: $gray-50;
|
||||
html, body {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.desk-sidebar {
|
||||
.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;
|
||||
text-rendering: optimizelegibility;
|
||||
|
||||
&:focus {
|
||||
background-color: $panel-bg;
|
||||
background-color: var(--sidebar-select-color);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
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(--gray-900);
|
||||
color: var(--heading-color);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-lg);
|
||||
margin-bottom: 1.2rem;
|
||||
|
|
@ -72,7 +61,7 @@ $panel-bg: $gray-50;
|
|||
|
||||
.legend {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
padding: var(--padding-md);
|
||||
|
||||
.legend-item {
|
||||
margin-right: 20px;
|
||||
|
|
@ -112,8 +101,7 @@ $panel-bg: $gray-50;
|
|||
|
||||
@media (max-width: 768px) {
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include flex(flex, null, null, column);
|
||||
|
||||
.legend-item {
|
||||
margin-right: 20px;
|
||||
|
|
@ -135,38 +123,34 @@ $panel-bg: $gray-50;
|
|||
}
|
||||
|
||||
.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);
|
||||
background-color: white;
|
||||
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;
|
||||
line-height: 1.3em;
|
||||
color: var(--gray-900);
|
||||
color: var(--heading-color);
|
||||
|
||||
svg {
|
||||
margin-right: 6px;
|
||||
|
|
@ -174,9 +158,7 @@ $panel-bg: $gray-50;
|
|||
}
|
||||
}
|
||||
.widget-control {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
@include flex(flex, null, center, row-reverse);
|
||||
|
||||
// Any immidiate child
|
||||
>* {
|
||||
|
|
@ -212,18 +194,17 @@ $panel-bg: $gray-50;
|
|||
}
|
||||
|
||||
&.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;
|
||||
color: $text-muted;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -239,7 +220,7 @@ $panel-bg: $gray-50;
|
|||
|
||||
.frappe-chart {
|
||||
line.line-horizontal {
|
||||
stroke: $border-color !important;
|
||||
stroke: var(--border-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -286,7 +267,7 @@ $panel-bg: $gray-50;
|
|||
|
||||
.widget-subtitle {
|
||||
margin-top: 5px;
|
||||
color: $text-muted;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -294,7 +275,7 @@ $panel-bg: $gray-50;
|
|||
.widget-control {
|
||||
align-self: flex-start;
|
||||
margin-top: -5px;
|
||||
color: $text-muted;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -306,7 +287,7 @@ $panel-bg: $gray-50;
|
|||
letter-spacing: 0.015em;
|
||||
|
||||
i {
|
||||
color: $text-muted;
|
||||
color: var(--text-muted);
|
||||
padding-left: 5px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
|
@ -319,7 +300,7 @@ $panel-bg: $gray-50;
|
|||
}
|
||||
|
||||
span {
|
||||
color: $text-muted;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -335,16 +316,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 {
|
||||
|
|
@ -370,7 +351,7 @@ $panel-bg: $gray-50;
|
|||
cursor: pointer;
|
||||
|
||||
.widget-head {
|
||||
margin-top: 5px;
|
||||
margin-top: var(--margin-xs);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -383,19 +364,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 {
|
||||
|
|
@ -411,7 +387,7 @@ $panel-bg: $gray-50;
|
|||
}
|
||||
|
||||
.disabled-link {
|
||||
color: $text-muted;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.popover {
|
||||
|
|
@ -440,7 +416,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: var(--margin-xs);
|
||||
}
|
||||
|
|
@ -460,16 +436,13 @@ $panel-bg: $gray-50;
|
|||
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 {
|
||||
padding-top: 27px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include flex(flex, space-between, null, null);
|
||||
padding-top: 25px;
|
||||
|
||||
.number {
|
||||
font-weight: 600;
|
||||
|
|
@ -485,9 +458,7 @@ $panel-bg: $gray-50;
|
|||
}
|
||||
|
||||
.card-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
@include flex(flex, null, flex-end, column);
|
||||
}
|
||||
|
||||
.percentage-stat-area {
|
||||
|
|
@ -548,7 +519,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;
|
||||
|
|
@ -556,146 +527,6 @@ $panel-bg: $gray-50;
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -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,11 @@ $form-left-padding: var(--padding-xl);
|
|||
}
|
||||
}
|
||||
|
||||
.form-section.frappe-card {
|
||||
margin: var(--margin-lg) 0px;
|
||||
@include card();
|
||||
}
|
||||
|
||||
.form-dashboard {
|
||||
.section-head {
|
||||
font-size: var(--text-xl);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
@import "global";
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
@import "kanban";
|
||||
@import "calendar";
|
||||
@import "dashboard-view";
|
||||
@import "controls";
|
||||
|
||||
@import "frappe/public/css/font-awesome";
|
||||
@import "multilevel-dropdown";
|
||||
|
|
|
|||
18
frappe/public/scss/mixins.scss
Normal file
18
frappe/public/scss/mixins.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@mixin flex($dis, $x, $y, $dir) {
|
||||
display: $dis;
|
||||
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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -6,29 +6,27 @@
|
|||
}
|
||||
|
||||
#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;
|
||||
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-2xl);
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
margin-right: var(--margin-sm);
|
||||
}
|
||||
|
||||
.alert-title-container {
|
||||
|
|
@ -38,20 +36,21 @@
|
|||
|
||||
.alert-message {
|
||||
font-weight: 500;
|
||||
color: var(--gray-900);
|
||||
color: var(--text-color);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.alert-subtitle {
|
||||
font-size: 13px;
|
||||
font-size: var(--text-md);
|
||||
padding-left: 34px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
top: var(--padding-sm);
|
||||
right: var(--padding-sm);
|
||||
color: inherit;
|
||||
opacity: 1;
|
||||
font-size: inherit;
|
||||
|
|
@ -64,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 {
|
||||
|
|
|
|||
|
|
@ -117,19 +117,20 @@ $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;
|
||||
--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;
|
||||
|
|
@ -139,27 +140,49 @@ $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);
|
||||
--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-200);
|
||||
|
||||
--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 +228,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-600);
|
||||
}
|
||||
|
||||
$spacer: 14px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue