Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui
This commit is contained in:
parent
e44c2bfb71
commit
66b06b42f3
9 changed files with 106 additions and 96 deletions
|
|
@ -33,6 +33,11 @@ frappe.views.CalendarView = class CalendarView extends frappe.views.ListView {
|
|||
});
|
||||
}
|
||||
|
||||
setup_page() {
|
||||
this.hide_page_form = true;
|
||||
super.setup_page();
|
||||
}
|
||||
|
||||
setup_view() {
|
||||
|
||||
}
|
||||
|
|
@ -180,7 +185,9 @@ frappe.views.Calendar = Class.extend({
|
|||
.removeClass("fc-state-default")
|
||||
.addClass("btn btn-default");
|
||||
|
||||
this.$wrapper.find(".fc-right").addClass("btn-group");
|
||||
this.$wrapper
|
||||
.find('.fc-month-button, .fc-agendaWeek-button, .fc-agendaDay-button')
|
||||
.wrapAll('<div class="btn-group" />');
|
||||
|
||||
this.$wrapper.find('.fc-prev-button span')
|
||||
.attr('class', '').html(frappe.utils.icon('left'));
|
||||
|
|
@ -198,7 +205,7 @@ frappe.views.Calendar = Class.extend({
|
|||
btn_group.find(".btn").on("click", function() {
|
||||
btn_group.find(".btn").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
});
|
||||
})
|
||||
},
|
||||
field_map: {
|
||||
"id": "name",
|
||||
|
|
@ -222,9 +229,8 @@ frappe.views.Calendar = Class.extend({
|
|||
this.cal_options = {
|
||||
locale: frappe.boot.user.language || "en",
|
||||
header: {
|
||||
left: 'today',
|
||||
center: 'prev, title, next',
|
||||
right: 'month, agendaWeek, agendaDay'
|
||||
left: 'prev, title, next',
|
||||
right: 'today, month, agendaWeek, agendaDay'
|
||||
},
|
||||
editable: true,
|
||||
selectable: true,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
.fc-unthemed {
|
||||
padding: 0 10px 0 30px;
|
||||
padding: 20px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
padding-top: 30px;
|
||||
// padding-top: 30px;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
|
@ -38,11 +39,11 @@ th.fc-widget-header {
|
|||
}
|
||||
|
||||
.fc-unthemed td.fc-sun {
|
||||
background: var(--gray-50);
|
||||
background: var(--highlight-color);
|
||||
}
|
||||
|
||||
.fc-unthemed .fc-today {
|
||||
background-color: $white !important;
|
||||
background-color: var(--fg-color) !important;
|
||||
|
||||
.fc-day-number {
|
||||
background-color: var(--blue-500);
|
||||
|
|
@ -108,7 +109,7 @@ th.fc-day-header {
|
|||
}
|
||||
}
|
||||
|
||||
.fc-center h2 {
|
||||
.fc-left h2 {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
|
|
@ -126,28 +127,22 @@ th.fc-day-header {
|
|||
}
|
||||
|
||||
.fc-right button {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
}
|
||||
|
||||
.fc-left button {
|
||||
width: 80px;
|
||||
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
// svg {
|
||||
// margin-right: 5px;
|
||||
// }
|
||||
}
|
||||
|
||||
.fc-prev-button, .fc-next-button {
|
||||
width: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-state-active {
|
||||
box-shadow: none !important;
|
||||
background: var(--gray-500) !important;
|
||||
color: white !important;
|
||||
color: var(--fg-color) !important;
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
|
|
@ -157,16 +152,54 @@ th.fc-day-header {
|
|||
padding: 1px 5px !important;
|
||||
}
|
||||
|
||||
.result .footnote-area {
|
||||
padding: 15px 10px 0 30px;
|
||||
// .result .footnote-area {
|
||||
// padding: 15px 10px 0 30px;
|
||||
// }
|
||||
|
||||
.fc-time-grid .fc-slats .fc-minor td {
|
||||
border-top-style: none !important;
|
||||
}
|
||||
|
||||
.fc-highlight {
|
||||
background: var(--blue-100) !important;
|
||||
}
|
||||
|
||||
.fc-left {
|
||||
.fc-prev-button, .fc-next-button {
|
||||
width: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--gray-100);
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
|
||||
// TODO: Fix color palette
|
||||
use {
|
||||
stroke-width: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-time-grid .fc-slats td {
|
||||
height: 2.5em !important;
|
||||
}
|
||||
|
||||
.fc-day-grid {
|
||||
border-bottom: 1px solid var(--gray-300);
|
||||
// height: 2em !important;
|
||||
}
|
||||
|
||||
.fc-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc .fc-axis {
|
||||
color: var(--gray-600) !important;
|
||||
text-align: center;
|
||||
width: 60px !important;
|
||||
}
|
||||
|
||||
// REDESIGN-TODO: Fix color palette
|
||||
// @mixin fc-bg-color($color){
|
||||
// $light: #{"${color}-light"};
|
||||
// $extra-light: #{"${color}-extra-light"};
|
||||
|
|
|
|||
|
|
@ -33,4 +33,5 @@
|
|||
|
||||
--shadow-inset: var(--fg-color);
|
||||
--border-color: var(--gray-600);
|
||||
--highlight-color: var(--gray-700);
|
||||
}
|
||||
|
|
@ -441,7 +441,7 @@ html, body {
|
|||
|
||||
.widget-content {
|
||||
@include flex(flex, space-between, null, null);
|
||||
padding-top: 25px;
|
||||
padding-top: var(--padding-xl);
|
||||
|
||||
.number {
|
||||
font-weight: 600;
|
||||
|
|
@ -487,10 +487,18 @@ html, body {
|
|||
|
||||
.green-stat {
|
||||
color: var(--dark-green-500);
|
||||
|
||||
use {
|
||||
stroke: var(--dark-green-500);
|
||||
}
|
||||
}
|
||||
|
||||
.red-stat {
|
||||
color: var(--red-500);
|
||||
|
||||
use {
|
||||
stroke: var(--red-500);
|
||||
}
|
||||
}
|
||||
|
||||
.grey-stat {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,22 @@
|
|||
.datatable {
|
||||
--dt-border-color: var(--gray-100);
|
||||
--dt-primary-color: $primary;
|
||||
--dt-light-bg: var(--highlight-color);
|
||||
--dt-light-red: var(--red-50);
|
||||
--dt-light-yellow: var(--yellow-50);
|
||||
--dt-orange: var(--orange-500);
|
||||
--dt-text-color: var(--text-light);
|
||||
--dt-text-light: var(--bg-color);
|
||||
--dt-spacer-1: 0.25rem;
|
||||
--dt-spacer-2: 0.5rem;
|
||||
--dt-spacer-3: 1rem;
|
||||
--dt-border-radius: var(--border-radius);
|
||||
background-color: $white;
|
||||
--dt-cell-bg: var(--fg-color);
|
||||
--dt-border-color: var(--border-color);
|
||||
--dt-border-radius: var(--border-radius);
|
||||
--dt-header-cell-bg: var(--fg-color);
|
||||
--dt-selection-highlight-color: var(--highlight-color);
|
||||
|
||||
background-color: var(--fg-color);
|
||||
margin-left: -5px;
|
||||
margin-top: 0px;
|
||||
font-size: var(--text-md);
|
||||
|
|
@ -15,9 +29,6 @@
|
|||
}
|
||||
|
||||
.dt-header {
|
||||
// --dt-header-cell-bg: white;
|
||||
// --dt-cell-bg: white;
|
||||
--dt-text-color: $text-muted;
|
||||
|
||||
.dt-row[data-is-filter] {
|
||||
display: flex !important;
|
||||
|
|
@ -58,9 +69,6 @@
|
|||
min-height: 100px;
|
||||
scrollbar-width: thin;
|
||||
|
||||
.dt-cell {
|
||||
--dt-text-color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.dt-cell__edit {
|
||||
|
|
@ -82,9 +90,9 @@
|
|||
}
|
||||
|
||||
.dt-filter.dt-input {
|
||||
border-radius: $border-radius;
|
||||
border-radius: var(--border-radius);
|
||||
height: 100%;
|
||||
background-color: $gray-100;
|
||||
background-color: var(--control);
|
||||
}
|
||||
|
||||
.dt-scrollable {
|
||||
|
|
@ -102,13 +110,7 @@
|
|||
|
||||
.dt-scrollable--highlight-all {
|
||||
.dt-cell__content {
|
||||
background: var(--gray-50)!important;
|
||||
}
|
||||
}
|
||||
|
||||
.dt-scrollable .dt-row--highlight {
|
||||
.dt-cell__content {
|
||||
background: var(--gray-50)!important;
|
||||
background: var(--dt-selection-highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
.image-view-item:hover {
|
||||
border: none;
|
||||
background-color: var(--control-bg);
|
||||
background-color: var(--highlight-color);
|
||||
|
||||
.list-row-checkbox {
|
||||
&:before {
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--gray-700);
|
||||
color: var(--text-light);
|
||||
background-color: var(--fg-color);
|
||||
box-shadow: none;
|
||||
height: 27px;
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
font-size: var(--text-md);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--control-bg);
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 0px;
|
||||
|
|
@ -163,12 +163,20 @@
|
|||
.list-row-col {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
|
||||
a {
|
||||
color: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
.list-subject {
|
||||
flex: 2;
|
||||
justify-content: start;
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.level-item {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
@ -244,7 +252,7 @@ input.list-check-all, input.list-row-checkbox {
|
|||
font-size: var(--text-md);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--control-bg);
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
// @media (max-width: $screen-xs) {
|
||||
|
|
@ -256,7 +264,7 @@ input.list-check-all, input.list-row-checkbox {
|
|||
// }
|
||||
|
||||
&--head {
|
||||
background-color: var(--control-bg);
|
||||
background-color: var(--highlight-color);
|
||||
border-bottom: 1px solid $border-color;
|
||||
cursor: auto;
|
||||
}
|
||||
|
|
@ -493,52 +501,3 @@ input.list-check-all, input.list-row-checkbox {
|
|||
// margin-top: 5px;
|
||||
// }
|
||||
|
||||
|
||||
// input[type="checkbox"] {
|
||||
// position: relative;
|
||||
// visibility: hidden;
|
||||
// // dispxlay: none;
|
||||
|
||||
// &:before {
|
||||
// position: absolute;
|
||||
// font-family: 'FontAwesome';
|
||||
// // width: 4px;
|
||||
// // height: 4px;
|
||||
// content: '\f096';
|
||||
// // content: ' ';
|
||||
// // background-image: url('../icons/frapicon-checkbox.svg');
|
||||
// // visibility: visible;
|
||||
// // font-style: normal;
|
||||
// // font-weight: normal;
|
||||
// // font-variant: normal;
|
||||
// // text-transform: none;
|
||||
// // line-height: 14px;
|
||||
// // display: inline-block;
|
||||
// // font-size: 14px;
|
||||
// // color: @text-extra-muted;
|
||||
// // .transition(150ms color);
|
||||
// // left: 0px;
|
||||
// // display: inline-block;
|
||||
// // vertical-align: middle;
|
||||
// // width: 45px;
|
||||
// // height: 45px;
|
||||
// // background-size: 50%;
|
||||
// // content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
|
||||
|
||||
// // background: url('../icons/frapicon-checkbox.svg') 0px center no-repeat;
|
||||
// }
|
||||
|
||||
// &:focus:before {
|
||||
// color: $text-muted;
|
||||
// }
|
||||
|
||||
// &:checked:before {
|
||||
// content: '\f14a';
|
||||
// font-size: 13px;
|
||||
// color: $checkbox-color;
|
||||
// }
|
||||
|
||||
// &:focus {
|
||||
// outline: none;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
|
|||
|
||||
--shadow-inset: var(--gray-100);
|
||||
--border-color: var(--gray-100);
|
||||
--highlight-color: var(--gray-50);
|
||||
|
||||
// Border Sizes
|
||||
--border-radius-sm: 4px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue