purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +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 { .color-picker {
height: auto !important; height: auto !important;
border: none !important; border: none !important;
@include mat-elevation(4); @include mat-elevation(4);
.preset-area { .preset-area {
//padding: 4px 15px; padding: 0 0 16px 16px !important;
padding: 0 0 12px 12px !important;
height: 140px; height: 140px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
> hr { > hr {
display: none; display: none;
} }
.preset-label { .preset-label {
display: none; display: none;
} }
.preset-color { .preset-color {
@ -25,7 +26,8 @@
margin: 0 !important; margin: 0 !important;
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
&:nth-child(14n+3) {
&:nth-child(14n+1) {
clear: both; clear: both;
} }
} }

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

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

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

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

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 { .event-form-dialog {
@include media-breakpoint('xs') {
width: 100%;
}
@include media-breakpoint-up('xs') {
width: 480px;
}
.mat-dialog-container { .mat-dialog-container {
padding: 0; padding: 0;
width: 480px;
} }
.dialog-content-wrapper { .dialog-content-wrapper {
@ -10,4 +19,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.primary-color-input,
.secondary-color-input {
padding: 6px 8px;
}
} }