purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

ngx-color-picker style adjustments

Browse Source 
+ Calendar event form responsive fixes
This commit is contained in:
Sercan Yemen 2017-12-06 11:26:57 +03:00
parent 37a5c69269
commit 21fd488a8e
4 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/core/scss/partials/plugins/_ngx-color-picker.scss
View File

@ -3,20 +3,21 @@
.color-picker {
height: auto !important;
border: none !important;
@include mat-elevation(4);
.preset-area {
//padding: 4px 15px;
padding: 0 0 12px 12px !important;
padding: 0 0 16px 16px !important;
height: 140px;
overflow-y: auto;
overflow-x: hidden;
> hr {
display: none;
}
.preset-label {
display: none;
}
.preset-color {
@ -25,7 +26,8 @@
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
&:nth-child(14n+3) {
&:nth-child(14n+1) {
clear: both;
}
}

2
src/app/main/content/apps/calendar/calendar.component.scss
View File

@ -299,7 +299,7 @@
.add-event-button {
position: absolute;
right: 18px;
bottom: -32px;
bottom: -26px;
z-index: 10;
}

29
src/app/main/content/apps/calendar/event-form/event-form.component.html
View File

@ -32,9 +32,11 @@
</mat-slide-toggle>
</div>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
<mat-form-field class="mr-24" fxFlex>
<div class="py-16" fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row" formGroupName="color">
<mat-form-field class="mr-sm-24" fxFlex>
<input matInput
class="primary-color-input"
name="primary color"
formControlName="primary"
placeholder="Primary color"
@ -44,8 +46,10 @@
[style.background]="event.color.primary"
(colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
</mat-form-field>
<mat-form-field fxFlex>
<input matInput
class="secondary-color-input"
name="secondary color"
formControlName="secondary"
placeholder="Secondary color"
@ -55,11 +59,12 @@
[style.background]="event.color.secondary"
(colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
</mat-form-field>
</div>
<div fxFlex="1 0 auto" fxLayout="row">
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
<mat-form-field class="mr-24" fxFlex>
<mat-form-field class="mr-sm-24" fxFlex>
<input matInput [matDatepicker]="startDatePicker" placeholder="Start Date"
name="start"
formControlName="start">
@ -73,9 +78,9 @@
</div>
<div fxFlex="1 0 auto" fxLayout="row">
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
<mat-form-field class="mr-24" fxFlex>
<mat-form-field class="mr-sm-24" fxFlex>
<input matInput [matDatepicker]="endDatePicker" placeholder="End Date"
name="end"
formControlName="end">
@ -98,12 +103,12 @@
<mat-form-field formGroupName="meta" class="w-100-p">
<textarea matInput
formControlName="notes"
placeholder="Notes"
mat-maxlength="250"
max-rows="4">
</textarea>
<textarea matInput
formControlName="notes"
placeholder="Notes"
mat-maxlength="250"
max-rows="4">
</textarea>
</mat-form-field>
</form>

16
src/app/main/content/apps/calendar/event-form/event-form.component.scss
View File

@ -1,8 +1,17 @@
@import "src/app/core/scss/fuse";
.event-form-dialog {
@include media-breakpoint('xs') {
width: 100%;
}
@include media-breakpoint-up('xs') {
width: 480px;
}
.mat-dialog-container {
padding: 0;
width: 480px;
}
.dialog-content-wrapper {
@ -10,4 +19,9 @@
display: flex;
flex-direction: column;
}
.primary-color-input,
.secondary-color-input {
padding: 6px 8px;
}
}