Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug with custom color theme #184

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Bug with custom color theme #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3a1cf0a
#174 (https://github.com/HsuanXyz/ion2-calendar/issues/174)
fernandocode Jun 19, 2018
fd1acc3
#174 (https://github.com/HsuanXyz/ion2-calendar/issues/174)
fernandocode Jun 19, 2018
8b516ae
revert
fernandocode Jun 19, 2018
b4fd6f1
revert
fernandocode Jun 19, 2018
627d726
Added in the scss of component styles treatment to go through all the…
fernandocode Jun 22, 2018
85cc864
correcting extra css excluded
fernandocode Jun 22, 2018
2474bea
correcting extra css excluded
fernandocode Jun 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dev/src/demos/demo-basic.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export class DemoBasicComponent {
date: string = '2018-01-01';
options: CalendarComponentOptions = {
from: new Date(2000, 0, 1),
color: 'color-custom'
};

constructor(public modalCtrl: ModalController) {
Expand Down
3 changes: 2 additions & 1 deletion dev/src/demos/demo-modal-range.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ export class DemoModalRangeComponent {
const options: CalendarModalOptions = {
pickMode: 'range',
title: 'RANGE',
defaultDateRange: this.dateRange
defaultDateRange: this.dateRange,
color: 'color-custom'
};

let myCalendar = this.modalCtrl.create(CalendarModal, {
Expand Down
3 changes: 2 additions & 1 deletion dev/src/demos/demo-range.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ export class DemoRangeComponent {
};
options: CalendarComponentOptions = {
from: new Date(2000, 0, 1),
pickMode: 'range'
pickMode: 'range',
color: 'color-custom'
};

constructor(public modalCtrl: ModalController) {
Expand Down
42 changes: 10 additions & 32 deletions dev/src/ion2-calendar/components/calendar-week.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@import "../functions";

@mixin week-title($background-color: primary, $color: #fff) {
margin: 0;
color: $color;
Expand All @@ -10,60 +9,39 @@
}

ion-calendar-week {

.toolbar-background-md, .toolbar-background-ios {
.toolbar-background-md,
.toolbar-background-ios {
background: transparent;
}

.week-toolbar {
padding: 0;
}

.week-toolbar.toolbar-md {
min-height: 44px;
}

.week-title.primary {
@include week-title(primary);
}

.week-title.secondary {
@include week-title(secondary);
}

.week-title.danger {
@include week-title(danger);
}

.week-title.dark {
@include week-title(dark);
@each $color-name,
$color-base,
$color-contrast in get-colors($colors) {
.week-title.#{$color-name} {
@include week-title($color-name, $color-contrast);
}
}

.week-title.light {
@include week-title(light, #9e9e9e);
}

.week-title.transparent {
@include week-title(light, #9e9e9e);
background-color: transparent;
}

.week-title.cal-color {
@include week-title(cal-color);
}

.week-title li {
list-style-type: none;
display: block;
float: left;
width: 14%;
text-align: center;
}

.week-title li:nth-of-type(7n), .week-title li:nth-of-type(7n+1) {
.week-title li:nth-of-type(7n),
.week-title li:nth-of-type(7n+1) {
width: 15%;
}

}


33 changes: 6 additions & 27 deletions dev/src/ion2-calendar/components/month-picker.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@import "../functions";

@mixin month-picker($background-color: primary, $color: #fff) {
.month-packer-item {
&.this-month button {
Expand All @@ -15,13 +14,11 @@
}

ion-calendar-month-picker {

.month-picker {
margin: 20px 0;
display: inline-block;
width: 100%;
}

.month-packer-item {
width: 25%;
box-sizing: border-box;
Expand All @@ -36,36 +33,18 @@ ion-calendar-month-picker {
background-color: transparent;
}
}

.month-picker.primary {
@include month-picker(primary);
}

.month-picker.secondary {
@include month-picker(secondary);
}

.month-picker.danger {
@include month-picker(danger);
}

.month-picker.dark {
@include month-picker(dark);
}

.month-picker.light {
@include month-picker(light, #9e9e9e);
@each $color-name,
$color-base,
$color-contrast in get-colors($colors) {
.month-picker.#{$color-name} {
@include month-picker($color-name, $color-contrast);
}
}

.month-picker.transparent {
@include month-picker(light, #9e9e9e);
background-color: transparent;
}

.month-picker.cal-color {
@include month-picker(cal-color);
}

}


Loading