Skip to content

Commit

Permalink
Changes around date selection for c1 | typography (#628)
Browse files Browse the repository at this point in the history
* Few changes around date selection for c1

* fix fonts
  • Loading branch information
ashwin1111 authored Mar 5, 2024
1 parent b744527 commit 1eb1588
Show file tree
Hide file tree
Showing 12 changed files with 103 additions and 362 deletions.
Original file line number Diff line number Diff line change
@@ -1,93 +0,0 @@
.container {
justify-content: center;
}

.pointer {
cursor: pointer;
}

.inside-container {
border-radius: 8px;
border: 1px solid var(--grayscale-light-border, #ECECEE);
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: auto;
}

.sub-text-container {
border-radius: 8px;
border: 1px solid var(--grayscale-light-border, #ECECEE);
background: var(--grayscale-background, #FAFCFF);
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: auto;
}

.flex-wrapper {
display: flex;
align-items: flex-start;
justify-content: space-between
}

.sub-header {
font-size: 14px;
font-weight: 400;
color: grey;
}

.truncate {
@apply tw-w-100-px tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis;
}

:host ::ng-deep .drop-down .p-dropdown {
@apply tw-w-200-px tw-border-0 #{!important};
}

:host ::ng-deep .p-progressbar {
@apply tw-h-1.5 tw-bg-progress-bar-bg #{!important};
}

:host ::ng-deep .p-progressbar .p-progressbar-value {
@apply tw-bg-mandatory-field-color tw-rounded-50 #{!important};
}

:host ::ng-deep .p-progressbar-determinate .p-progressbar-value {
content: none #{!important};
}

.export-btn:disabled {
@apply tw-cursor-not-allowed tw-bg-cta-disabled #{!important};
}

:host ::ng-deep .p-calendar .p-inputtext {
@apply tw-p-0 tw-bg-white tw-border-0 tw-cursor-pointer tw-transition-none ;
}

:host ::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):hover .p-calendar .p-inputtext{
@apply tw-bg-disabled-bg-color #{!important};
}

:host ::ng-deep .p-calendar ::placeholder {
@apply tw-text-sub-text-color #{!important};
}

:host ::ng-deep .p-datepicker table td > span.p-highlight {
@apply tw-text-white tw-bg-mandatory-field-color #{!important};
}

:host ::ng-deep .p-datepicker table td > span:focus {
@apply tw-shadow-none #{!important};
}

:host ::ng-deep .p-datepicker table th {
@apply tw-text-center ;
}

:host ::ng-deep .p-dialog {
max-height: 100% !important;
margin: 0rem !important;
}
Original file line number Diff line number Diff line change
@@ -1,62 +0,0 @@
.custom-search-field {
border: 1px solid #ccc;
border-radius: 4px;
padding: 2px 10px;
display: inline-flex;
align-items: center;
width: 350px;
height: 40px;
}

.custom-search-field i.pi-search {
margin-right: 10px;
color: grey;
}

.custom-search-field input[type="text"] {
border: none;
outline: none;
width: 100%;
}

input.custom-focus:focus {
outline: none;
border: 1px solid black !important;
}

.clickable-row:hover {
@apply tw-cursor-pointer;
&:hover {
@apply tw-bg-lv-table-hover-bg;
}
}

:host ::ng-deep .drop-down .p-dropdown {
@apply tw-w-200-px tw-border-0 #{!important};
}

:host ::ng-deep .p-progressbar {
@apply tw-h-1.5 tw-bg-progress-bar-bg #{!important};
}

:host ::ng-deep .p-progressbar .p-progressbar-value {
@apply tw-bg-mandatory-field-color tw-rounded-50 #{!important};
}

:host ::ng-deep .p-progressbar-determinate .p-progressbar-value {
content: none #{!important};
}

.export-btn:disabled {
@apply tw-cursor-not-allowed tw-bg-cta-disabled #{!important};
}

:host ::ng-deep .p-dialog {
max-height: 100% !important;
margin: 0rem !important;
}

:host ::ng-deep .selectedItem .p-dropdown-trigger {
@apply tw-hidden #{!important};
}

Original file line number Diff line number Diff line change
@@ -1,70 +0,0 @@
/* Mimic the look of the calendar field */
.custom-search-field {
border: 1px solid #ccc;
border-radius: 4px;
padding: 2px 10px;
display: inline-flex;
align-items: center;
width: 400px;
}

.custom-search-field i.pi-search {
margin-right: 10px;
}

.custom-search-field input[type="text"] {
border: none;
outline: none;
width: 100%;
}

.clickable-row:hover {
@apply tw-cursor-pointer;
&:hover {
@apply tw-bg-lv-table-hover-bg;
}
}

:host ::ng-deep .drop-down .p-dropdown {
@apply tw-w-200-px tw-border-0 #{!important};
}

:host ::ng-deep .p-progressbar {
@apply tw-h-1.5 tw-bg-progress-bar-bg #{!important};
}

:host ::ng-deep .p-progressbar .p-progressbar-value {
@apply tw-bg-mandatory-field-color tw-rounded-50 #{!important};
}

:host ::ng-deep .p-progressbar-determinate .p-progressbar-value {
content: none #{!important};
}

.export-btn:disabled {
@apply tw-cursor-not-allowed tw-bg-cta-disabled #{!important};
}

:host ::ng-deep .p-calendar .p-inputtext {
@apply tw-p-0 tw-bg-white tw-border-0 tw-cursor-pointer tw-transition-none ;
}

:host ::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):hover .p-calendar .p-inputtext{
@apply tw-bg-disabled-bg-color #{!important};
}

:host ::ng-deep .p-calendar ::placeholder {
@apply tw-text-sub-text-color #{!important};
}

:host ::ng-deep .p-datepicker table td > span.p-highlight {
@apply tw-text-white tw-bg-mandatory-field-color #{!important};
}

:host ::ng-deep .p-datepicker table td > span:focus {
@apply tw-shadow-none #{!important};
}

:host ::ng-deep .p-datepicker table th {
@apply tw-text-center ;
}
Original file line number Diff line number Diff line change
@@ -1,74 +0,0 @@
.custom-search-field {
border: 1px solid #ccc;
border-radius: 4px;
padding: 2px 8px;
display: inline-flex;
align-items: center;
width: 350px;
height: 40px;
}

.custom-search-field i.pi-search {
margin-right: 10px;
}

.custom-search-field input[type="text"] {
border: none;
outline: none;
width: 100%;
}

.clickable-row:hover {
@apply tw-cursor-pointer;
&:hover {
@apply tw-bg-lv-table-hover-bg;
}
}

:host ::ng-deep .drop-down .p-dropdown {
@apply tw-w-200-px tw-border-0 #{!important};
}

:host ::ng-deep .p-progressbar {
@apply tw-h-1.5 tw-bg-progress-bar-bg #{!important};
}

:host ::ng-deep .p-progressbar .p-progressbar-value {
@apply tw-bg-mandatory-field-color tw-rounded-50 #{!important};
}

:host ::ng-deep .p-progressbar-determinate .p-progressbar-value {
content: none #{!important};
}

.export-btn:disabled {
@apply tw-cursor-not-allowed tw-bg-cta-disabled #{!important};
}

:host ::ng-deep .p-calendar .p-inputtext {
@apply tw-p-0 tw-bg-white tw-border-0 tw-cursor-pointer tw-transition-none ;
}

:host ::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):hover .p-calendar .p-inputtext{
@apply tw-bg-disabled-bg-color #{!important};
}

:host ::ng-deep .p-calendar ::placeholder {
@apply tw-text-sub-text-color #{!important};
}

:host ::ng-deep .p-datepicker table td > span.p-highlight {
@apply tw-text-white tw-bg-mandatory-field-color #{!important};
}

:host ::ng-deep .p-datepicker table td > span:focus {
@apply tw-shadow-none #{!important};
}

:host ::ng-deep .p-datepicker table th {
@apply tw-text-center ;
}

:host ::ng-deep .selectedItem .p-dropdown-trigger {
@apply tw-hidden #{!important};
}
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@
[subLabel]="'If you\'ve made a field mandatory in Sage Intacct but don\'t collect a value from your employees in the expense form, you can set a default value here to be added to all the expenses. For Location and Department, you can opt to use the values from your employee records in Sage Intacct.'">
</app-configuration-step-sub-header>
<div class="tw-pt-28-px tw-pl-6 field-label">
<div><label>Default Location</label></div>
<div><label class="tw-text-form-label-text-color tw-text-14-px">Default Location</label></div>
<div class="tw-pt-2">
<p-dropdown appendTo="body" [options]="sageIntacctLocations" optionLabel="value"
formControlName="defaultLocation" placeholder="Select Location" [ngClass]="{'selectedItem': advancedSettingsForm.controls.defaultLocation.value, 'filterDropdown': !advancedSettingsForm.controls.defaultLocation.value, 'hideClearIcon': advancedSettingsForm.controls['defaultLocation'].value}">
Expand All @@ -155,7 +155,7 @@
</div>

<div class="tw-pt-20-px tw-pl-6 field-label">
<div><label>Default Department</label></div>
<div><label class="tw-text-form-label-text-color tw-text-14-px">Default Department</label></div>
<div class="tw-pt-2">
<p-dropdown appendTo="body" [options]="sageIntacctDepartments" optionLabel="value"
formControlName="defaultDepartment" placeholder="Select Department" [ngClass]="{'selectedItem': advancedSettingsForm.controls.defaultDepartment.value, 'filterDropdown': !advancedSettingsForm.controls.defaultDepartment.value, 'hideClearIcon': advancedSettingsForm.controls['defaultDepartment'].value}">
Expand All @@ -174,7 +174,7 @@
</div>

<div class="tw-pt-20-px tw-pl-6 field-label">
<div><label>Default Project</label></div>
<div><label class="tw-text-form-label-text-color tw-text-14-px">Default Project</label></div>
<div class="tw-pt-2">
<p-dropdown appendTo="body" [options]="sageIntacctProjects" optionLabel="value"
formControlName="defaultProject" placeholder="Select Project" [ngClass]="{'selectedItem': advancedSettingsForm.controls.defaultProject.value, 'filterDropdown': !advancedSettingsForm.controls.defaultProject.value, 'hideClearIcon': advancedSettingsForm.controls['defaultProject'].value}">
Expand All @@ -189,7 +189,7 @@
</div>

<div class="tw-pt-20-px tw-pl-6 field-label">
<div><label>Default Class</label></div>
<div><label class="tw-text-form-label-text-color tw-text-14-px">Default Class</label></div>
<div class="tw-pt-2">
<p-dropdown appendTo="body" [options]="sageIntacctClasses" optionLabel="value"
formControlName="defaultClass" placeholder="Select Class" [ngClass]="{'selectedItem': advancedSettingsForm.controls.defaultClass.value, 'filterDropdown': !advancedSettingsForm.controls.defaultClass.value, 'hideClearIcon': advancedSettingsForm.controls['defaultClass'].value}">
Expand All @@ -204,7 +204,7 @@
</div>

<div class="tw-pt-20-px tw-pl-6 field-label">
<div><label>Default Items</label></div>
<div><label class="tw-text-form-label-text-color tw-text-14-px">Default Items</label></div>
<div class="tw-pt-2">
<p-dropdown appendTo="body" [options]="sageIntacctDefaultItem" optionLabel="value"
formControlName="defaultItems" placeholder="Select Item" [ngClass]="{'selectedItem': advancedSettingsForm.controls.defaultItems.value, 'filterDropdown': !advancedSettingsForm.controls.defaultItems.value, 'hideClearIcon': advancedSettingsForm.controls['defaultItems'].value}">
Expand Down
Loading

0 comments on commit 1eb1588

Please sign in to comment.