Skip to content

Commit

Permalink
demo: remove styles array (#4629)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bastienmoulia
bastienmoulia committed Nov 17, 2023
1 parent 01299c0 commit 8deee2e
Show file tree
Hide file tree
Showing 15 changed files with 206 additions and 232 deletions.
44 changes: 21 additions & 23 deletions demo/src/app/components/datepicker/demos/customday/datepicker-customday.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,27 @@ import { FormsModule } from '@angular/forms';
standalone: true,
imports: [NgbDatepickerModule, FormsModule],
templateUrl: './datepicker-customday.html',
styles: [
`
.custom-day {
text-align: center;
padding: 0.185rem 0.25rem;
border-radius: 0.25rem;
display: inline-block;
width: 2rem;
}
.custom-day:hover,
.custom-day.focused {
background-color: #e6e6e6;
}
.weekend {
background-color: #f0ad4e;
border-radius: 1rem;
color: white;
}
.hidden {
display: none;
}
`,
],
styles: `
.custom-day {
text-align: center;
padding: 0.185rem 0.25rem;
border-radius: 0.25rem;
display: inline-block;
width: 2rem;
}
.custom-day:hover,
.custom-day.focused {
background-color: #e6e6e6;
}
.weekend {
background-color: #f0ad4e;
border-radius: 1rem;
color: white;
}
.hidden {
display: none;
}
`,
})
export class NgbdDatepickerCustomday {
private calendar = inject(NgbCalendar);
Expand Down
24 changes: 11 additions & 13 deletions demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,17 @@ import { NgbDatepicker, NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
imports: [NgbDatepickerModule],
templateUrl: './datepicker-custommonth.html',
encapsulation: ViewEncapsulation.None,
styles: [
`
.no-header-padding .ngb-dp-header {
padding: 0;
}
.custom-month-grid {
display: grid;
grid-template-columns: auto auto;
grid-column-gap: 1rem;
grid-row-gap: 0.5rem;
}
`,
],
styles: `
.no-header-padding .ngb-dp-header {
padding: 0;
}
.custom-month-grid {
display: grid;
grid-template-columns: auto auto;
grid-column-gap: 1rem;
grid-row-gap: 0.5rem;
}
`,
})
export class NgbdDatepickerCustommonth {
navigate(datepicker: NgbDatepicker, number: number) {
Expand Down
52 changes: 25 additions & 27 deletions demo/src/app/components/datepicker/demos/hebrew/datepicker-hebrew.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,31 @@ import { JsonPipe } from '@angular/common';
standalone: true,
imports: [NgbDatepickerModule, FormsModule, JsonPipe],
templateUrl: './datepicker-hebrew.html',
styles: [
`
.hebrew-day {
text-align: right;
padding: 0.25rem 0.65rem 0.25rem 0.25rem;
border-radius: 0.25rem;
display: inline-block;
height: 2.75rem;
width: 2.75rem;
}
.hebrew-day:hover,
.hebrew-day.focused {
background-color: #e6e6e6;
}
.hebrew-day.selected {
background-color: #007bff;
color: white;
}
.outside {
color: lightgray;
}
.gregorian-num {
font-size: 0.5rem;
direction: ltr;
}
`,
],
styles: `
.hebrew-day {
text-align: right;
padding: 0.25rem 0.65rem 0.25rem 0.25rem;
border-radius: 0.25rem;
display: inline-block;
height: 2.75rem;
width: 2.75rem;
}
.hebrew-day:hover,
.hebrew-day.focused {
background-color: #e6e6e6;
}
.hebrew-day.selected {
background-color: #007bff;
color: white;
}
.outside {
color: lightgray;
}
.gregorian-num {
font-size: 0.5rem;
direction: ltr;
}
`,
providers: [
{ provide: NgbCalendar, useClass: NgbCalendarHebrew },
{ provide: NgbDatepickerI18n, useClass: NgbDatepickerI18nHebrew },
Expand Down
14 changes: 6 additions & 8 deletions demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,12 @@ import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
standalone: true,
imports: [NgbDatepickerModule, FormsModule],
templateUrl: './datepicker-multiple.html',
styles: [
`
select.form-select {
margin: 0.5rem 0.5rem 0 0;
width: auto;
}
`,
],
styles: `
select.form-select {
margin: 0.5rem 0.5rem 0 0;
width: auto;
}
`,
})
export class NgbdDatepickerMultiple {
displayMonths = 2;
Expand Down
54 changes: 26 additions & 28 deletions demo/src/app/components/datepicker/demos/range-popup/datepicker-range-popup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,32 @@ import { JsonPipe } from '@angular/common';
standalone: true,
imports: [NgbDatepickerModule, FormsModule, JsonPipe],
templateUrl: './datepicker-range-popup.html',
styles: [
`
.dp-hidden {
width: 0;
margin: 0;
border: none;
padding: 0;
}
.custom-day {
text-align: center;
padding: 0.185rem 0.25rem;
display: inline-block;
height: 2rem;
width: 2rem;
}
.custom-day.focused {
background-color: #e6e6e6;
}
.custom-day.range,
.custom-day:hover {
background-color: rgb(2, 117, 216);
color: white;
}
.custom-day.faded {
background-color: rgba(2, 117, 216, 0.5);
}
`,
],
styles: `
.dp-hidden {
width: 0;
margin: 0;
border: none;
padding: 0;
}
.custom-day {
text-align: center;
padding: 0.185rem 0.25rem;
display: inline-block;
height: 2rem;
width: 2rem;
}
.custom-day.focused {
background-color: #e6e6e6;
}
.custom-day.range,
.custom-day:hover {
background-color: rgb(2, 117, 216);
color: white;
}
.custom-day.faded {
background-color: rgba(2, 117, 216, 0.5);
}
`,
})
export class NgbdDatepickerRangePopup {
calendar = inject(NgbCalendar);
Expand Down
42 changes: 20 additions & 22 deletions demo/src/app/components/datepicker/demos/range/datepicker-range.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,26 @@ import { JsonPipe } from '@angular/common';
standalone: true,
imports: [NgbDatepickerModule, FormsModule, JsonPipe],
templateUrl: './datepicker-range.html',
styles: [
`
.custom-day {
text-align: center;
padding: 0.185rem 0.25rem;
display: inline-block;
height: 2rem;
width: 2rem;
}
.custom-day.focused {
background-color: #e6e6e6;
}
.custom-day.range,
.custom-day:hover {
background-color: rgb(2, 117, 216);
color: white;
}
.custom-day.faded {
background-color: rgba(2, 117, 216, 0.5);
}
`,
],
styles: `
.custom-day {
text-align: center;
padding: 0.185rem 0.25rem;
display: inline-block;
height: 2rem;
width: 2rem;
}
.custom-day.focused {
background-color: #e6e6e6;
}
.custom-day.range,
.custom-day:hover {
background-color: rgb(2, 117, 216);
color: white;
}
.custom-day.faded {
background-color: rgba(2, 117, 216, 0.5);
}
`,
})
export class NgbdDatepickerRange {
calendar = inject(NgbCalendar);
Expand Down
66 changes: 32 additions & 34 deletions demo/src/app/components/datepicker/overview/demo/datepicker-overview-demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,40 +50,38 @@ import { DatePipe } from '@angular/common';
[displayMonths]="2"
/>
`,
styles: [
`
.custom-day {
text-align: center;
display: inline-block;
width: 2rem;
height: 2rem;
line-height: 2rem;
}
.custom-day:hover {
background-color: #e6e6e6;
}
.disabled {
color: #bbbbbb;
}
.disabled:hover {
background-color: transparent;
}
.holiday,
.holiday.disabled,
.holiday:hover {
color: white;
background-color: coral;
}
.range:not(.holiday):not(.disabled),
.custom-day:not(.disabled):not(.holiday):hover {
background-color: rgb(2, 117, 216);
color: white;
}
.faded:not(.holiday):not(.disabled) {
background-color: rgba(2, 117, 216, 0.5);
}
`,
],
styles: `
.custom-day {
text-align: center;
display: inline-block;
width: 2rem;
height: 2rem;
line-height: 2rem;
}
.custom-day:hover {
background-color: #e6e6e6;
}
.disabled {
color: #bbbbbb;
}
.disabled:hover {
background-color: transparent;
}
.holiday,
.holiday.disabled,
.holiday:hover {
color: white;
background-color: coral;
}
.range:not(.holiday):not(.disabled),
.custom-day:not(.disabled):not(.holiday):hover {
background-color: rgb(2, 117, 216);
color: white;
}
.faded:not(.holiday):not(.disabled) {
background-color: rgba(2, 117, 216, 0.5);
}
`,
providers: [NgbDateNativeAdapter],
})
export class NgbdDatepickerOverviewDemoComponent {
Expand Down
26 changes: 12 additions & 14 deletions demo/src/app/components/modal/demos/options/modal-options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,18 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
standalone: true,
templateUrl: './modal-options.html',
encapsulation: ViewEncapsulation.None,
styles: [
`
.dark-modal .modal-content {
background-color: #292b2c;
color: white;
}
.dark-modal .close {
color: white;
}
.light-blue-backdrop {
background-color: #5cb3fd;
}
`,
],
styles: `
.dark-modal .modal-content {
background-color: #292b2c;
color: white;
}
.dark-modal .close {
color: white;
}
.light-blue-backdrop {
background-color: #5cb3fd;
}
`,
})
export class NgbdModalOptions {
private modalService = inject(NgbModal);
Expand Down

0 comments on commit 8deee2e

Please sign in to comment.