fix: update form, grid and sidebar to new design
updated design for form, grid and sidebar. - sidebar only empty state is done need to work on other states. - grid height feels too much, need to reduce it.
This commit is contained in:
Maharshi Patel
parent
5152d7e6fa
commit
fd6c0e2291
3 changed files with 76 additions and 48 deletions
|
|
@ -1,6 +1,6 @@
|
|||
.form-grid {
|
||||
border: 1px solid var(--table-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
border-radius: var(--border-radius-md);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
|
@ -10,13 +10,26 @@
|
|||
|
||||
.grid-heading-row {
|
||||
border-bottom: 1px solid var(--table-border-color);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-md);
|
||||
|
||||
color: var(--gray-600);
|
||||
background-color: var(--gray-100);
|
||||
font-size: var(--text-base);
|
||||
height: 32px;
|
||||
padding: 0 !important;
|
||||
border-top-left-radius: var(--border-radius-md);
|
||||
border-top-right-radius: var(--border-radius-md);
|
||||
|
||||
.grid-static-col, .row-check, .row-index {
|
||||
height: 32px;
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
.grid-static-col {
|
||||
.static-area.reqd:after {
|
||||
content: ' *';
|
||||
color: var(--red-400);
|
||||
padding: 6px 8px !important;
|
||||
.static-area{
|
||||
line-height: normal;
|
||||
&.reqd:after {
|
||||
content: ' *';
|
||||
color: var(--red-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -28,7 +41,7 @@
|
|||
}
|
||||
|
||||
.data-row textarea {
|
||||
height: 40px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.form-grid .data-row {
|
||||
|
|
@ -72,7 +85,9 @@
|
|||
}
|
||||
|
||||
.grid-body .data-row {
|
||||
font-size: $font-size-sm;
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--weight-regular);
|
||||
color: var(--gray-700)
|
||||
}
|
||||
|
||||
.grid-empty,
|
||||
|
|
@ -88,8 +103,7 @@
|
|||
|
||||
.grid-static-col,
|
||||
.row-index {
|
||||
height: 34px;
|
||||
padding: 8px;
|
||||
height: 46px;
|
||||
max-height: 200px;
|
||||
|
||||
&.search {
|
||||
|
|
@ -103,8 +117,7 @@
|
|||
}
|
||||
|
||||
.row-check {
|
||||
height: 34px;
|
||||
padding: 8px 3px !important;
|
||||
height: 46px;
|
||||
text-align: center;
|
||||
|
||||
input {
|
||||
|
|
@ -153,8 +166,7 @@
|
|||
}
|
||||
|
||||
.col {
|
||||
padding-left: var(--padding-sm);
|
||||
padding-right: var(--padding-sm);
|
||||
padding: var(--grid-padding);
|
||||
border-right: 1px solid var(--table-border-color);
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
|
@ -171,15 +183,16 @@
|
|||
|
||||
.btn-open-row {
|
||||
display: flex;
|
||||
padding-top: var(--padding-sm);
|
||||
justify-content: center;
|
||||
line-height: unset;
|
||||
div {
|
||||
margin-left: var(--margin-xs);
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-row {
|
||||
--control-bg: var(--neutral-white);
|
||||
--input-disabled-bg: var(--gray-50);
|
||||
.grid-static-col {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
|
@ -191,7 +204,7 @@
|
|||
}
|
||||
|
||||
textarea {
|
||||
height: 37px !important;
|
||||
height: 46px !important;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
|
|
@ -199,11 +212,11 @@
|
|||
border: 0px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 9px;
|
||||
height: 34px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
top: 2px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
|
|
@ -411,7 +424,9 @@
|
|||
.grid-custom-buttons:empty {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-footer {
|
||||
margin-top: var(--margin-sm);
|
||||
}
|
||||
.grid-footer, .grid-custom-buttons {
|
||||
padding: var(--padding-sm) 0px;
|
||||
background-color: var(--fg-color);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@
|
|||
|
||||
.std-form-layout > .form-layout > .form-page {
|
||||
border-radius: var(--border-radius-md);
|
||||
box-shadow: var(--card-shadow);
|
||||
border: 1px solid var(--gray-200);
|
||||
box-shadow: none;
|
||||
background-color: var(--card-bg);
|
||||
}
|
||||
|
||||
|
|
@ -35,13 +36,15 @@
|
|||
|
||||
.form-section-description {
|
||||
margin-bottom: 10px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-xl);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
@extend .head-title;
|
||||
font-size: var(--text-base);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--gray-800);
|
||||
width: 100%;
|
||||
padding: var(--padding-sm) var(--padding-md);
|
||||
margin: 0;
|
||||
|
|
@ -136,9 +139,8 @@
|
|||
}
|
||||
|
||||
.comment-box {
|
||||
@include card();
|
||||
margin-top: var(--margin-lg);
|
||||
padding: var(--padding-lg);
|
||||
padding: 0;
|
||||
.comment-input-header {
|
||||
@extend .head-title;
|
||||
margin-bottom: var(--margin-sm);
|
||||
|
|
@ -146,9 +148,13 @@
|
|||
.comment-input-container {
|
||||
.frappe-control {
|
||||
margin-bottom: var(--margin-xs);
|
||||
}
|
||||
.ql-editor {
|
||||
background-color: var(--control-bg);
|
||||
padding-right: 0;
|
||||
.ql-editor {
|
||||
background-color: var(--bg-color) !important;
|
||||
border: 1px solid var(--gray-200);
|
||||
min-height: 24px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -166,7 +172,7 @@
|
|||
.form-link-title {
|
||||
margin-top: var(--margin-md);
|
||||
margin-bottom: var(--margin-sm);
|
||||
font-weight: var(--text-bold);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
.form-documents:first-of-type .row:first-child {
|
||||
.form-link-title {
|
||||
|
|
@ -184,9 +190,10 @@
|
|||
background-color: var(--control-bg);
|
||||
.count {
|
||||
font-size: var(--text-xs);
|
||||
background-color: var(--gray-500);
|
||||
border-radius: var(--border-radius-sm);
|
||||
color: var(--gray-50);
|
||||
font-weight: var(--weight-regular);
|
||||
background-color: var(--bg-color);
|
||||
border-radius: var(--border-radius-full);
|
||||
color: var(--gray-700);
|
||||
padding: 0 var(--padding-xs);
|
||||
margin-right: var(--margin-xs);
|
||||
}
|
||||
|
|
@ -198,7 +205,7 @@
|
|||
.open-notification {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: var(--indicator-red-bg);
|
||||
background-color: var(--gray-100);
|
||||
font-size: var(--text-xs);
|
||||
padding: 0 var(--padding-sm);
|
||||
color: var(--indicator-red);
|
||||
|
|
@ -277,13 +284,14 @@
|
|||
}
|
||||
|
||||
@mixin form-message-background($color) {
|
||||
background: var(--bg-#{$color});
|
||||
color: var(--text-on-#{$color});
|
||||
border: 1px solid var(--#{$color}-100);
|
||||
color: var(--#{$color}-800);
|
||||
background: var(--#{$color}-50);
|
||||
}
|
||||
|
||||
.form-message {
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--padding-md) var(--padding-xl);
|
||||
padding: 8px 10px;
|
||||
font-size: var(--text-md, 13px);
|
||||
margin-bottom: var(--margin-md);
|
||||
|
||||
|
|
@ -362,14 +370,16 @@
|
|||
z-index: 5;
|
||||
transition: 0.5s top;
|
||||
padding-left: var(--padding-xs);
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
|
||||
|
||||
.form-tabs {
|
||||
.nav-item {
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--weight-regular);
|
||||
.nav-link {
|
||||
color: var(--text-muted);
|
||||
padding: var(--padding-md) 0;
|
||||
color: var(--text-light);
|
||||
padding: 10px 0;
|
||||
margin: 0 var(--margin-md);
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,8 @@ body[data-route^="Module"] .main-menu {
|
|||
.sidebar-menu {
|
||||
.data-pill {
|
||||
width: 100%;
|
||||
justify-content: unset;
|
||||
|
||||
}
|
||||
&.user-actions {
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -98,7 +100,7 @@ body[data-route^="Module"] .main-menu {
|
|||
}
|
||||
|
||||
use.comment-icon {
|
||||
stroke: var(--gray-500);
|
||||
fill: var(--gray-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -106,6 +108,8 @@ body[data-route^="Module"] .main-menu {
|
|||
.sidebar-image-section {
|
||||
width: min(100%, 170px);
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: var(--border-radius-lg);
|
||||
|
||||
.sidebar-image {
|
||||
height: auto;
|
||||
|
|
@ -158,7 +162,7 @@ body[data-route^="Module"] .main-menu {
|
|||
}
|
||||
|
||||
.layout-side-section {
|
||||
font-size: var(--text-md);
|
||||
font-size: var(--text-base);
|
||||
padding-right: 30px;
|
||||
|
||||
> .divider {
|
||||
|
|
@ -175,13 +179,12 @@ body[data-route^="Module"] .main-menu {
|
|||
}
|
||||
|
||||
.sidebar-label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-regular);
|
||||
margin-bottom: var(--margin-sm);
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.04rem;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-light);
|
||||
.icon {
|
||||
margin: 0;
|
||||
margin-right: var(--margin-xs);
|
||||
|
|
@ -389,7 +392,7 @@ body[data-route^="Module"] .main-menu {
|
|||
display: inline-flex;
|
||||
}
|
||||
|
||||
.add-attachment-btn,
|
||||
.add-assignment-btn, .add-attachment-btn,
|
||||
.shares,
|
||||
.followed-by {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue