From 3a1cf0a59b24ee542f775d28aa1c26883ccf5f75 Mon Sep 17 00:00:00 2001 From: fernandocode Date: Tue, 19 Jun 2018 17:45:19 -0300 Subject: [PATCH 1/7] #174 (https://github.com/HsuanXyz/ion2-calendar/issues/174) --- ng-package.json | 7 +++++++ public_api.ts | 1 + 2 files changed, 8 insertions(+) create mode 100644 ng-package.json create mode 100644 public_api.ts diff --git a/ng-package.json b/ng-package.json new file mode 100644 index 000000000..e4a282d24 --- /dev/null +++ b/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "./node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public_api.ts" + }, + "whitelistedNonPeerDependencies": ["."] +} \ No newline at end of file diff --git a/public_api.ts b/public_api.ts new file mode 100644 index 000000000..e910bb060 --- /dev/null +++ b/public_api.ts @@ -0,0 +1 @@ +export * from "./src/index"; From fd1acc34affc19c76ff92dcabf542f32917ca2d4 Mon Sep 17 00:00:00 2001 From: fernandocode Date: Tue, 19 Jun 2018 17:45:45 -0300 Subject: [PATCH 2/7] #174 (https://github.com/HsuanXyz/ion2-calendar/issues/174) --- dev/src/demos/demo-modal-custom-sub-header.ts | 46 +++++++++++++++++++ dev/src/demos/demos.module.ts | 9 +++- dev/src/demos/sub-header-calendar-modal.ts | 19 ++++++++ .../components/calendar.modal.ts | 2 + dev/src/pages/home/home.html | 1 + src/components/calendar.modal.ts | 2 + 6 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 dev/src/demos/demo-modal-custom-sub-header.ts create mode 100644 dev/src/demos/sub-header-calendar-modal.ts diff --git a/dev/src/demos/demo-modal-custom-sub-header.ts b/dev/src/demos/demo-modal-custom-sub-header.ts new file mode 100644 index 000000000..e82089078 --- /dev/null +++ b/dev/src/demos/demo-modal-custom-sub-header.ts @@ -0,0 +1,46 @@ +import { Component } from '@angular/core'; +import { ModalController } from 'ionic-angular'; +import { + CalendarModalOptions, +} from '../ion2-calendar' +import { SubHeaderCalendarModal } from './sub-header-calendar-modal'; + +@Component({ + selector: 'demo-modal-custom-sub-header', + template: ` + + ` +}) +export class DemoModalCustomSubHeaderComponent { + + date: Date = new Date(); + + constructor(public modalCtrl: ModalController) { + } + + openCalendar() { + const options: CalendarModalOptions = { + title: 'Custom Sub Header', + defaultDate: this.date, + canBackwardsSelected: true + }; + + let myCalendar = this.modalCtrl.create(SubHeaderCalendarModal, { + options: options + }); + + myCalendar.present(); + + myCalendar.onDidDismiss((date, type) => { + if (type === 'done') { + this.date = date.dateObj; + } + console.log(date); + console.log('type', type); + }) + + } + +} diff --git a/dev/src/demos/demos.module.ts b/dev/src/demos/demos.module.ts index 4bac783f9..d9ff70a47 100644 --- a/dev/src/demos/demos.module.ts +++ b/dev/src/demos/demos.module.ts @@ -17,11 +17,15 @@ import { DemoRangeComponent } from "./demo-range"; import { DemoOptionsComponent } from "./demo-options"; import { DemoEventsComponent } from "./demo-events"; import { DemoMethodsComponent } from "./demo-methods"; +import { DemoModalCustomSubHeaderComponent } from './demo-modal-custom-sub-header'; +import { SubHeaderCalendarModal } from './sub-header-calendar-modal'; const COMPONENTS = [ DemoModalBasicComponent, DemoModalMultiComponent, DemoModalRangeComponent, + DemoModalCustomSubHeaderComponent, + SubHeaderCalendarModal, DemoModalDisableWeekComponent, DemoModalLocaleComponent, DemoModalCustomStyleComponent, @@ -32,13 +36,14 @@ const COMPONENTS = [ DemoRangeComponent, DemoOptionsComponent, DemoEventsComponent, - DemoMethodsComponent + DemoMethodsComponent, ]; @NgModule({ declarations: [...COMPONENTS], imports: [IonicModule.forRoot(MyApp), CalendarModule], - exports: [...COMPONENTS] + exports: [...COMPONENTS], + entryComponents: [...COMPONENTS], }) export class DemosModule { } diff --git a/dev/src/demos/sub-header-calendar-modal.ts b/dev/src/demos/sub-header-calendar-modal.ts new file mode 100644 index 000000000..742b011a7 --- /dev/null +++ b/dev/src/demos/sub-header-calendar-modal.ts @@ -0,0 +1,19 @@ +import { Component, ViewChild } from '@angular/core'; + +@Component({ + template: ` + +
+ + + + +
+ + ` +}) +export class SubHeaderCalendarModal { + toDate(p) { + console.log(p); + } +} \ No newline at end of file diff --git a/dev/src/ion2-calendar/components/calendar.modal.ts b/dev/src/ion2-calendar/components/calendar.modal.ts index 995bc329c..e1e932285 100755 --- a/dev/src/ion2-calendar/components/calendar.modal.ts +++ b/dev/src/ion2-calendar/components/calendar.modal.ts @@ -29,6 +29,8 @@ import { pickModes } from "../config"; + + modal mode + diff --git a/src/components/calendar.modal.ts b/src/components/calendar.modal.ts index 995bc329c..e1e932285 100755 --- a/src/components/calendar.modal.ts +++ b/src/components/calendar.modal.ts @@ -29,6 +29,8 @@ import { pickModes } from "../config"; + + Date: Tue, 19 Jun 2018 17:57:03 -0300 Subject: [PATCH 3/7] revert --- ng-package.json | 7 ------- public_api.ts | 1 - 2 files changed, 8 deletions(-) delete mode 100644 ng-package.json delete mode 100644 public_api.ts diff --git a/ng-package.json b/ng-package.json deleted file mode 100644 index e4a282d24..000000000 --- a/ng-package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "$schema": "./node_modules/ng-packagr/ng-package.schema.json", - "lib": { - "entryFile": "public_api.ts" - }, - "whitelistedNonPeerDependencies": ["."] -} \ No newline at end of file diff --git a/public_api.ts b/public_api.ts deleted file mode 100644 index e910bb060..000000000 --- a/public_api.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./src/index"; From b4fd6f1b5e3b6eea554ca74b5e739a8474614886 Mon Sep 17 00:00:00 2001 From: fernandocode Date: Tue, 19 Jun 2018 18:00:21 -0300 Subject: [PATCH 4/7] revert --- dev/src/demos/demo-modal-custom-sub-header.ts | 46 ------------------- dev/src/demos/demos.module.ts | 9 +--- dev/src/demos/sub-header-calendar-modal.ts | 19 -------- .../components/calendar.modal.ts | 2 - dev/src/pages/home/home.html | 1 - src/components/calendar.modal.ts | 2 - 6 files changed, 2 insertions(+), 77 deletions(-) delete mode 100644 dev/src/demos/demo-modal-custom-sub-header.ts delete mode 100644 dev/src/demos/sub-header-calendar-modal.ts diff --git a/dev/src/demos/demo-modal-custom-sub-header.ts b/dev/src/demos/demo-modal-custom-sub-header.ts deleted file mode 100644 index e82089078..000000000 --- a/dev/src/demos/demo-modal-custom-sub-header.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Component } from '@angular/core'; -import { ModalController } from 'ionic-angular'; -import { - CalendarModalOptions, -} from '../ion2-calendar' -import { SubHeaderCalendarModal } from './sub-header-calendar-modal'; - -@Component({ - selector: 'demo-modal-custom-sub-header', - template: ` - - ` -}) -export class DemoModalCustomSubHeaderComponent { - - date: Date = new Date(); - - constructor(public modalCtrl: ModalController) { - } - - openCalendar() { - const options: CalendarModalOptions = { - title: 'Custom Sub Header', - defaultDate: this.date, - canBackwardsSelected: true - }; - - let myCalendar = this.modalCtrl.create(SubHeaderCalendarModal, { - options: options - }); - - myCalendar.present(); - - myCalendar.onDidDismiss((date, type) => { - if (type === 'done') { - this.date = date.dateObj; - } - console.log(date); - console.log('type', type); - }) - - } - -} diff --git a/dev/src/demos/demos.module.ts b/dev/src/demos/demos.module.ts index d9ff70a47..4bac783f9 100644 --- a/dev/src/demos/demos.module.ts +++ b/dev/src/demos/demos.module.ts @@ -17,15 +17,11 @@ import { DemoRangeComponent } from "./demo-range"; import { DemoOptionsComponent } from "./demo-options"; import { DemoEventsComponent } from "./demo-events"; import { DemoMethodsComponent } from "./demo-methods"; -import { DemoModalCustomSubHeaderComponent } from './demo-modal-custom-sub-header'; -import { SubHeaderCalendarModal } from './sub-header-calendar-modal'; const COMPONENTS = [ DemoModalBasicComponent, DemoModalMultiComponent, DemoModalRangeComponent, - DemoModalCustomSubHeaderComponent, - SubHeaderCalendarModal, DemoModalDisableWeekComponent, DemoModalLocaleComponent, DemoModalCustomStyleComponent, @@ -36,14 +32,13 @@ const COMPONENTS = [ DemoRangeComponent, DemoOptionsComponent, DemoEventsComponent, - DemoMethodsComponent, + DemoMethodsComponent ]; @NgModule({ declarations: [...COMPONENTS], imports: [IonicModule.forRoot(MyApp), CalendarModule], - exports: [...COMPONENTS], - entryComponents: [...COMPONENTS], + exports: [...COMPONENTS] }) export class DemosModule { } diff --git a/dev/src/demos/sub-header-calendar-modal.ts b/dev/src/demos/sub-header-calendar-modal.ts deleted file mode 100644 index 742b011a7..000000000 --- a/dev/src/demos/sub-header-calendar-modal.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, ViewChild } from '@angular/core'; - -@Component({ - template: ` - -
- - - - -
- - ` -}) -export class SubHeaderCalendarModal { - toDate(p) { - console.log(p); - } -} \ No newline at end of file diff --git a/dev/src/ion2-calendar/components/calendar.modal.ts b/dev/src/ion2-calendar/components/calendar.modal.ts index e1e932285..995bc329c 100755 --- a/dev/src/ion2-calendar/components/calendar.modal.ts +++ b/dev/src/ion2-calendar/components/calendar.modal.ts @@ -29,8 +29,6 @@ import { pickModes } from "../config"; - - modal mode - diff --git a/src/components/calendar.modal.ts b/src/components/calendar.modal.ts index e1e932285..995bc329c 100755 --- a/src/components/calendar.modal.ts +++ b/src/components/calendar.modal.ts @@ -29,8 +29,6 @@ import { pickModes } from "../config"; - - Date: Fri, 22 Jun 2018 08:49:01 -0300 Subject: [PATCH 5/7] Added in the scss of component styles treatment to go through all the informed colors including the custom ones, so even new colors (with a new name) will be considered in the generation of the styles of the components --- dev/src/demos/demo-basic.ts | 1 + dev/src/demos/demo-modal-range.ts | 3 +- dev/src/demos/demo-range.ts | 3 +- .../components/calendar-week.component.scss | 35 +- .../components/month-picker.component.scss | 33 +- .../components/month.component.scss | 322 ++++++++---------- dev/src/theme/variables.scss | 3 +- src/components/calendar-week.component.scss | 35 +- src/components/month-picker.component.scss | 33 +- src/components/month.component.scss | 322 ++++++++---------- 10 files changed, 335 insertions(+), 455 deletions(-) diff --git a/dev/src/demos/demo-basic.ts b/dev/src/demos/demo-basic.ts index a9e63a1e1..3ab0747c5 100644 --- a/dev/src/demos/demo-basic.ts +++ b/dev/src/demos/demo-basic.ts @@ -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) { diff --git a/dev/src/demos/demo-modal-range.ts b/dev/src/demos/demo-modal-range.ts index 531a4b9c2..084fae83a 100644 --- a/dev/src/demos/demo-modal-range.ts +++ b/dev/src/demos/demo-modal-range.ts @@ -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, { diff --git a/dev/src/demos/demo-range.ts b/dev/src/demos/demo-range.ts index 7ae388ddc..985cfa456 100644 --- a/dev/src/demos/demo-range.ts +++ b/dev/src/demos/demo-range.ts @@ -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) { diff --git a/dev/src/ion2-calendar/components/calendar-week.component.scss b/dev/src/ion2-calendar/components/calendar-week.component.scss index c5fd694c8..2e762abd3 100644 --- a/dev/src/ion2-calendar/components/calendar-week.component.scss +++ b/dev/src/ion2-calendar/components/calendar-week.component.scss @@ -23,35 +23,14 @@ ion-calendar-week { min-height: 44px; } - .week-title.primary { - @include week-title(primary); + + @each $color-name, + $color-base, + $color-contrast in get-colors($colors) { + .week-title.#{$color-name} { + @include week-title($color-name, $color-contrast); + } } - - .week-title.secondary { - @include week-title(secondary); - } - - .week-title.danger { - @include week-title(danger); - } - - .week-title.dark { - @include week-title(dark); - } - - .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; diff --git a/dev/src/ion2-calendar/components/month-picker.component.scss b/dev/src/ion2-calendar/components/month-picker.component.scss index 3fb472b87..3efdb6e0c 100644 --- a/dev/src/ion2-calendar/components/month-picker.component.scss +++ b/dev/src/ion2-calendar/components/month-picker.component.scss @@ -37,33 +37,12 @@ ion-calendar-month-picker { } } - .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); - } - - .month-picker.transparent { - @include month-picker(light, #9e9e9e); - background-color: transparent; - } - - .month-picker.cal-color { - @include month-picker(cal-color); + @each $color-name, + $color-base, + $color-contrast in get-colors($colors) { + .month-picker.#{$color-name} { + @include month-picker($color-name, $color-contrast); + } } } diff --git a/dev/src/ion2-calendar/components/month.component.scss b/dev/src/ion2-calendar/components/month.component.scss index 66cdd2a9b..383caf74a 100755 --- a/dev/src/ion2-calendar/components/month.component.scss +++ b/dev/src/ion2-calendar/components/month.component.scss @@ -1,100 +1,99 @@ @import "../functions"; @mixin transition-property($args...) { - -webkit-transition-property: $args; - -moz-transition-property: $args; - -ms-transition-property: $args; - -o-transition-property: $args; - transition-property: $args; + -webkit-transition-property: $args; + -moz-transition-property: $args; + -ms-transition-property: $args; + -o-transition-property: $args; + transition-property: $args; } @mixin transition-duration($args...) { - -webkit-transition-duration: $args; - -moz-transition-duration: $args; - -ms-transition-duration: $args; - -o-transition-duration: $args; - transition-duration: $args; + -webkit-transition-duration: $args; + -moz-transition-duration: $args; + -ms-transition-duration: $args; + -o-transition-duration: $args; + transition-duration: $args; } @mixin transition-timing-function($args...) { - -webkit-transition-timing-function: $args; - -moz-transition-timing-function: $args; - -ms-transition-timing-function: $args; - -o-transition-timing-function: $args; - transition-timing-function: $args; + -webkit-transition-timing-function: $args; + -moz-transition-timing-function: $args; + -ms-transition-timing-function: $args; + -o-transition-timing-function: $args; + transition-timing-function: $args; } @mixin month-color($background-color: primary, $color: #fff) { - button.days-btn small, - .days .marked p, - .days .today p { - color: bindColors($background-color); - } - .days .today p { - font-weight: 700; - } - .days .last-month-day p, - .days .next-month-day p { - color: rgba(0, 0, 0, .25); - } - .days .today.on-selected p, - .days .marked.on-selected p { - color: $color; - } - .days .on-selected, - .startSelection button.days-btn, - .endSelection button.days-btn { - background-color: bindColors($background-color); - color: $color; - } - .startSelection { - position: relative; - &:after { - height: 36px; - width: 50%; - content: ''; - position: absolute; - top: 0; - right: 0; - display: block; - background-color: lighten(bindColors($background-color), 12%); - } - } - .endSelection { - position: relative; - &:after { - height: 36px; - width: 50%; - content: ''; - position: absolute; - top: 0; - left: 0; - display: block; - background-color: lighten(bindColors($background-color), 12%); - } + button.days-btn small, + .days .marked p, + .days .today p { + color: bindColors($background-color); + } + .days .today p { + font-weight: 700; + } + .days .last-month-day p, + .days .next-month-day p { + color: rgba(0, 0, 0, .25); + } + .days .today.on-selected p, + .days .marked.on-selected p { + color: $color; + } + .days .on-selected, + .startSelection button.days-btn, + .endSelection button.days-btn { + background-color: bindColors($background-color); + color: $color; + } + .startSelection { + position: relative; + &:after { + height: 36px; + width: 50%; + content: ''; + position: absolute; + top: 0; + right: 0; + display: block; + background-color: lighten(bindColors($background-color), 12%); } - .startSelection.endSelection { - &:after { - background-color: transparent; - } + } + .endSelection { + position: relative; + &:after { + height: 36px; + width: 50%; + content: ''; + position: absolute; + top: 0; + left: 0; + display: block; + background-color: lighten(bindColors($background-color), 12%); } - .startSelection button.days-btn { - border-radius: 50% + } + .startSelection.endSelection { + &:after { + background-color: transparent; } - .between button.days-btn { - background-color: lighten(bindColors($background-color), 12%); - width: 100%; - border-radius: 0; - p { - color: $color; - } + } + .startSelection button.days-btn { + border-radius: 50% + } + .between button.days-btn { + background-color: lighten(bindColors($background-color), 12%); + width: 100%; + border-radius: 0; + p { + color: $color; } - .endSelection button.days-btn { - border-radius: 50%; - p { - color: $color; - } + } + .endSelection button.days-btn { + border-radius: 50%; + p { + color: $color; } - + } .days.startSelection:nth-child(7n):after, .days.between:nth-child(7n) button.days-btn, button.days-btn.is-last { @@ -103,13 +102,11 @@ border-radius: 50% } } - .days.endSelection:nth-child(7n+1):after, .days.between:nth-child(7n+1) button.days-btn, button.days-btn.is-first { border-radius: 36px 0 0 36px; } - .startSelection button.days-btn.is-first, .endSelection button.days-btn.is-first, button.days-btn.is-first.on-selected, @@ -118,109 +115,92 @@ .endSelection button.days-btn.is-last { border-radius: 50% } - .startSelection.is-last-wrap { &::after { border-radius: 0 36px 36px 0; } } - .endSelection.is-first-wrap { &::after { border-radius: 36px 0 0 36px; } } - .days .on-selected p { - color: $color; - } - .startSelection, - .endSelection, - .between { - button.days-btn { - @include transition-property(background-color); - @include transition-duration(180ms); - @include transition-timing-function(ease-out); - } + color: $color; + } + .startSelection, + .endSelection, + .between { + button.days-btn { + @include transition-property(background-color); + @include transition-duration(180ms); + @include transition-timing-function(ease-out); } + } } ion-calendar-month { - display: inline-block; - width: 100%; - .days-box { - padding: 0.5rem; - } - .days:nth-of-type(7n), - .days:nth-of-type(7n+1) { - width: 15%; - } - .days { - width: 14%; - float: left; - text-align: center; - height: 36px; - margin-bottom: 5px; - } - .days .marked p { - font-weight: 500; - } - .days .on-selected { - border: none; - p { - font-size: 1.3em; - } - } - button.days-btn { - border-radius: 36px; - width: 36px; - display: block; - margin: 0 auto; - padding: 0; - height: 36px; - background-color: transparent; - position: relative; - z-index: 2; - } - button.days-btn p { - margin: 0; - font-size: 1.2em; - color: #333; - } - button.days-btn.on-selected small { - transition: bottom .3s; - bottom: -14px; - } - button.days-btn small { - overflow: hidden; - display: block; - left: 0; - right: 0; - bottom: -5px; - position: absolute; - z-index: 1; - text-align: center; - font-weight: 200; - } - .primary { - @include month-color(); - } - .secondary { - @include month-color(secondary); - } - .danger { - @include month-color(danger); - } - .dark { - @include month-color(dark); - } - .light { - @include month-color(light, #a0a0a0); - .days .today p { - color: #565656; - } + display: inline-block; + width: 100%; + .days-box { + padding: 0.5rem; + } + .days:nth-of-type(7n), + .days:nth-of-type(7n+1) { + width: 15%; + } + .days { + width: 14%; + float: left; + text-align: center; + height: 36px; + margin-bottom: 5px; + } + .days .marked p { + font-weight: 500; + } + .days .on-selected { + border: none; + p { + font-size: 1.3em; } - .cal-color { - @include month-color(cal-color); + } + button.days-btn { + border-radius: 36px; + width: 36px; + display: block; + margin: 0 auto; + padding: 0; + height: 36px; + background-color: transparent; + position: relative; + z-index: 2; + } + button.days-btn p { + margin: 0; + font-size: 1.2em; + color: #333; + } + button.days-btn.on-selected small { + transition: bottom .3s; + bottom: -14px; + } + button.days-btn small { + overflow: hidden; + display: block; + left: 0; + right: 0; + bottom: -5px; + position: absolute; + z-index: 1; + text-align: center; + font-weight: 200; + } + @each $color-name, + $color-base, + $color-contrast in get-colors($colors) { + .#{$color-name} { + @include month-color($color-name, $color-contrast); } + } } diff --git a/dev/src/theme/variables.scss b/dev/src/theme/variables.scss index 18276a461..d8468c0de 100644 --- a/dev/src/theme/variables.scss +++ b/dev/src/theme/variables.scss @@ -38,7 +38,8 @@ $colors: ( secondary: #32db64, danger: #f53d3d, light: #f4f4f4, - dark: #222 + dark: #222, + color-custom: #207B45, ); diff --git a/src/components/calendar-week.component.scss b/src/components/calendar-week.component.scss index c5fd694c8..2e762abd3 100644 --- a/src/components/calendar-week.component.scss +++ b/src/components/calendar-week.component.scss @@ -23,35 +23,14 @@ ion-calendar-week { min-height: 44px; } - .week-title.primary { - @include week-title(primary); + + @each $color-name, + $color-base, + $color-contrast in get-colors($colors) { + .week-title.#{$color-name} { + @include week-title($color-name, $color-contrast); + } } - - .week-title.secondary { - @include week-title(secondary); - } - - .week-title.danger { - @include week-title(danger); - } - - .week-title.dark { - @include week-title(dark); - } - - .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; diff --git a/src/components/month-picker.component.scss b/src/components/month-picker.component.scss index 3fb472b87..3efdb6e0c 100644 --- a/src/components/month-picker.component.scss +++ b/src/components/month-picker.component.scss @@ -37,33 +37,12 @@ ion-calendar-month-picker { } } - .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); - } - - .month-picker.transparent { - @include month-picker(light, #9e9e9e); - background-color: transparent; - } - - .month-picker.cal-color { - @include month-picker(cal-color); + @each $color-name, + $color-base, + $color-contrast in get-colors($colors) { + .month-picker.#{$color-name} { + @include month-picker($color-name, $color-contrast); + } } } diff --git a/src/components/month.component.scss b/src/components/month.component.scss index 66cdd2a9b..383caf74a 100755 --- a/src/components/month.component.scss +++ b/src/components/month.component.scss @@ -1,100 +1,99 @@ @import "../functions"; @mixin transition-property($args...) { - -webkit-transition-property: $args; - -moz-transition-property: $args; - -ms-transition-property: $args; - -o-transition-property: $args; - transition-property: $args; + -webkit-transition-property: $args; + -moz-transition-property: $args; + -ms-transition-property: $args; + -o-transition-property: $args; + transition-property: $args; } @mixin transition-duration($args...) { - -webkit-transition-duration: $args; - -moz-transition-duration: $args; - -ms-transition-duration: $args; - -o-transition-duration: $args; - transition-duration: $args; + -webkit-transition-duration: $args; + -moz-transition-duration: $args; + -ms-transition-duration: $args; + -o-transition-duration: $args; + transition-duration: $args; } @mixin transition-timing-function($args...) { - -webkit-transition-timing-function: $args; - -moz-transition-timing-function: $args; - -ms-transition-timing-function: $args; - -o-transition-timing-function: $args; - transition-timing-function: $args; + -webkit-transition-timing-function: $args; + -moz-transition-timing-function: $args; + -ms-transition-timing-function: $args; + -o-transition-timing-function: $args; + transition-timing-function: $args; } @mixin month-color($background-color: primary, $color: #fff) { - button.days-btn small, - .days .marked p, - .days .today p { - color: bindColors($background-color); - } - .days .today p { - font-weight: 700; - } - .days .last-month-day p, - .days .next-month-day p { - color: rgba(0, 0, 0, .25); - } - .days .today.on-selected p, - .days .marked.on-selected p { - color: $color; - } - .days .on-selected, - .startSelection button.days-btn, - .endSelection button.days-btn { - background-color: bindColors($background-color); - color: $color; - } - .startSelection { - position: relative; - &:after { - height: 36px; - width: 50%; - content: ''; - position: absolute; - top: 0; - right: 0; - display: block; - background-color: lighten(bindColors($background-color), 12%); - } - } - .endSelection { - position: relative; - &:after { - height: 36px; - width: 50%; - content: ''; - position: absolute; - top: 0; - left: 0; - display: block; - background-color: lighten(bindColors($background-color), 12%); - } + button.days-btn small, + .days .marked p, + .days .today p { + color: bindColors($background-color); + } + .days .today p { + font-weight: 700; + } + .days .last-month-day p, + .days .next-month-day p { + color: rgba(0, 0, 0, .25); + } + .days .today.on-selected p, + .days .marked.on-selected p { + color: $color; + } + .days .on-selected, + .startSelection button.days-btn, + .endSelection button.days-btn { + background-color: bindColors($background-color); + color: $color; + } + .startSelection { + position: relative; + &:after { + height: 36px; + width: 50%; + content: ''; + position: absolute; + top: 0; + right: 0; + display: block; + background-color: lighten(bindColors($background-color), 12%); } - .startSelection.endSelection { - &:after { - background-color: transparent; - } + } + .endSelection { + position: relative; + &:after { + height: 36px; + width: 50%; + content: ''; + position: absolute; + top: 0; + left: 0; + display: block; + background-color: lighten(bindColors($background-color), 12%); } - .startSelection button.days-btn { - border-radius: 50% + } + .startSelection.endSelection { + &:after { + background-color: transparent; } - .between button.days-btn { - background-color: lighten(bindColors($background-color), 12%); - width: 100%; - border-radius: 0; - p { - color: $color; - } + } + .startSelection button.days-btn { + border-radius: 50% + } + .between button.days-btn { + background-color: lighten(bindColors($background-color), 12%); + width: 100%; + border-radius: 0; + p { + color: $color; } - .endSelection button.days-btn { - border-radius: 50%; - p { - color: $color; - } + } + .endSelection button.days-btn { + border-radius: 50%; + p { + color: $color; } - + } .days.startSelection:nth-child(7n):after, .days.between:nth-child(7n) button.days-btn, button.days-btn.is-last { @@ -103,13 +102,11 @@ border-radius: 50% } } - .days.endSelection:nth-child(7n+1):after, .days.between:nth-child(7n+1) button.days-btn, button.days-btn.is-first { border-radius: 36px 0 0 36px; } - .startSelection button.days-btn.is-first, .endSelection button.days-btn.is-first, button.days-btn.is-first.on-selected, @@ -118,109 +115,92 @@ .endSelection button.days-btn.is-last { border-radius: 50% } - .startSelection.is-last-wrap { &::after { border-radius: 0 36px 36px 0; } } - .endSelection.is-first-wrap { &::after { border-radius: 36px 0 0 36px; } } - .days .on-selected p { - color: $color; - } - .startSelection, - .endSelection, - .between { - button.days-btn { - @include transition-property(background-color); - @include transition-duration(180ms); - @include transition-timing-function(ease-out); - } + color: $color; + } + .startSelection, + .endSelection, + .between { + button.days-btn { + @include transition-property(background-color); + @include transition-duration(180ms); + @include transition-timing-function(ease-out); } + } } ion-calendar-month { - display: inline-block; - width: 100%; - .days-box { - padding: 0.5rem; - } - .days:nth-of-type(7n), - .days:nth-of-type(7n+1) { - width: 15%; - } - .days { - width: 14%; - float: left; - text-align: center; - height: 36px; - margin-bottom: 5px; - } - .days .marked p { - font-weight: 500; - } - .days .on-selected { - border: none; - p { - font-size: 1.3em; - } - } - button.days-btn { - border-radius: 36px; - width: 36px; - display: block; - margin: 0 auto; - padding: 0; - height: 36px; - background-color: transparent; - position: relative; - z-index: 2; - } - button.days-btn p { - margin: 0; - font-size: 1.2em; - color: #333; - } - button.days-btn.on-selected small { - transition: bottom .3s; - bottom: -14px; - } - button.days-btn small { - overflow: hidden; - display: block; - left: 0; - right: 0; - bottom: -5px; - position: absolute; - z-index: 1; - text-align: center; - font-weight: 200; - } - .primary { - @include month-color(); - } - .secondary { - @include month-color(secondary); - } - .danger { - @include month-color(danger); - } - .dark { - @include month-color(dark); - } - .light { - @include month-color(light, #a0a0a0); - .days .today p { - color: #565656; - } + display: inline-block; + width: 100%; + .days-box { + padding: 0.5rem; + } + .days:nth-of-type(7n), + .days:nth-of-type(7n+1) { + width: 15%; + } + .days { + width: 14%; + float: left; + text-align: center; + height: 36px; + margin-bottom: 5px; + } + .days .marked p { + font-weight: 500; + } + .days .on-selected { + border: none; + p { + font-size: 1.3em; } - .cal-color { - @include month-color(cal-color); + } + button.days-btn { + border-radius: 36px; + width: 36px; + display: block; + margin: 0 auto; + padding: 0; + height: 36px; + background-color: transparent; + position: relative; + z-index: 2; + } + button.days-btn p { + margin: 0; + font-size: 1.2em; + color: #333; + } + button.days-btn.on-selected small { + transition: bottom .3s; + bottom: -14px; + } + button.days-btn small { + overflow: hidden; + display: block; + left: 0; + right: 0; + bottom: -5px; + position: absolute; + z-index: 1; + text-align: center; + font-weight: 200; + } + @each $color-name, + $color-base, + $color-contrast in get-colors($colors) { + .#{$color-name} { + @include month-color($color-name, $color-contrast); } + } } From 85cc864ddfa8eba4ba4ad732686f9064539cb793 Mon Sep 17 00:00:00 2001 From: fernandocode Date: Fri, 22 Jun 2018 16:21:14 -0300 Subject: [PATCH 6/7] correcting extra css excluded --- .../components/calendar-week.component.scss | 23 +++++++++---------- .../components/month-picker.component.scss | 14 +++++------ .../components/month.component.scss | 3 +++ package.json | 1 + 4 files changed, 22 insertions(+), 19 deletions(-) diff --git a/dev/src/ion2-calendar/components/calendar-week.component.scss b/dev/src/ion2-calendar/components/calendar-week.component.scss index 2e762abd3..12a880fac 100644 --- a/dev/src/ion2-calendar/components/calendar-week.component.scss +++ b/dev/src/ion2-calendar/components/calendar-week.component.scss @@ -1,5 +1,4 @@ @import "../functions"; - @mixin week-title($background-color: primary, $color: #fff) { margin: 0; color: $color; @@ -10,20 +9,16 @@ } 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; } - - @each $color-name, $color-base, $color-contrast in get-colors($colors) { @@ -31,6 +26,13 @@ ion-calendar-week { @include week-title($color-name, $color-contrast); } } + .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; @@ -38,11 +40,8 @@ ion-calendar-week { 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%; } - } - - diff --git a/dev/src/ion2-calendar/components/month-picker.component.scss b/dev/src/ion2-calendar/components/month-picker.component.scss index 3efdb6e0c..57d9ca0bd 100644 --- a/dev/src/ion2-calendar/components/month-picker.component.scss +++ b/dev/src/ion2-calendar/components/month-picker.component.scss @@ -1,5 +1,4 @@ @import "../functions"; - @mixin month-picker($background-color: primary, $color: #fff) { .month-packer-item { &.this-month button { @@ -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; @@ -36,7 +33,6 @@ ion-calendar-month-picker { background-color: transparent; } } - @each $color-name, $color-base, $color-contrast in get-colors($colors) { @@ -44,7 +40,11 @@ ion-calendar-month-picker { @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); + } } - - diff --git a/dev/src/ion2-calendar/components/month.component.scss b/dev/src/ion2-calendar/components/month.component.scss index 383caf74a..5a4f0f087 100755 --- a/dev/src/ion2-calendar/components/month.component.scss +++ b/dev/src/ion2-calendar/components/month.component.scss @@ -203,4 +203,7 @@ ion-calendar-month { @include month-color($color-name, $color-contrast); } } + .cal-color { + @include month-color(cal-color); + } } diff --git a/package.json b/package.json index b73fc3c16..1207e148b 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "typings": "./dist/index.d.ts", "scripts": { "start": "cd ./dev && ionic serve", + "start-code": "cd ./dev && ionic serve --port 8101 --livereload-port 53704 --dev-logger-port 53704", "clean:dist": "rm -rf dist", "demo:link": "npm link && cd ./demo && npm link ion2-calendar", "demo:serve": "cd ./demo && ionic serve", From 2474beacfc313cfb10eeee6b1b8be563b663139c Mon Sep 17 00:00:00 2001 From: fernandocode Date: Fri, 22 Jun 2018 16:34:37 -0300 Subject: [PATCH 7/7] correcting extra css excluded --- src/components/calendar-week.component.scss | 23 ++++++++++----------- src/components/month-picker.component.scss | 14 ++++++------- src/components/month.component.scss | 3 +++ 3 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/components/calendar-week.component.scss b/src/components/calendar-week.component.scss index 2e762abd3..12a880fac 100644 --- a/src/components/calendar-week.component.scss +++ b/src/components/calendar-week.component.scss @@ -1,5 +1,4 @@ @import "../functions"; - @mixin week-title($background-color: primary, $color: #fff) { margin: 0; color: $color; @@ -10,20 +9,16 @@ } 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; } - - @each $color-name, $color-base, $color-contrast in get-colors($colors) { @@ -31,6 +26,13 @@ ion-calendar-week { @include week-title($color-name, $color-contrast); } } + .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; @@ -38,11 +40,8 @@ ion-calendar-week { 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%; } - } - - diff --git a/src/components/month-picker.component.scss b/src/components/month-picker.component.scss index 3efdb6e0c..57d9ca0bd 100644 --- a/src/components/month-picker.component.scss +++ b/src/components/month-picker.component.scss @@ -1,5 +1,4 @@ @import "../functions"; - @mixin month-picker($background-color: primary, $color: #fff) { .month-packer-item { &.this-month button { @@ -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; @@ -36,7 +33,6 @@ ion-calendar-month-picker { background-color: transparent; } } - @each $color-name, $color-base, $color-contrast in get-colors($colors) { @@ -44,7 +40,11 @@ ion-calendar-month-picker { @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); + } } - - diff --git a/src/components/month.component.scss b/src/components/month.component.scss index 383caf74a..5a4f0f087 100755 --- a/src/components/month.component.scss +++ b/src/components/month.component.scss @@ -203,4 +203,7 @@ ion-calendar-month { @include month-color($color-name, $color-contrast); } } + .cal-color { + @include month-color(cal-color); + } }