Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(calendar): remove extra divs

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-20 11:37:10 +03:00
parent 5060c2b228
commit 1cb04f3bb3
2 changed files with 50 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/app/pages/extra-components/calendar/calendar.component.html
View file

@ -1,20 +1,20 @@
<div class="row"> <div class="calendars">
<div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4"> <div class="calendar-container">
<h2> <span class="subtitle">
Selected date: {{ date | date }} Selected date: {{ date | date }}
</h2> </span>
<nb-calendar [(date)]="date" [boundingMonth]="true"></nb-calendar> <nb-calendar [(date)]="date" [boundingMonth]="true"></nb-calendar>
</div> </div>
<div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4"> <div class="calendar-container">
<h2> <span class="subtitle">
Selected range: {{ range.start | date }} - {{ range.end | date }} Selected range: {{ range.start | date }} - {{ range.end | date }}
</h2> </span>
<nb-calendar-range [(range)]="range"></nb-calendar-range> <nb-calendar-range [(range)]="range"></nb-calendar-range>
</div> </div>
<div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4"> <div class="calendar-container">
<h2> <span class="subtitle">
Selected date: {{ date2 | date }} Selected date: {{ date2 | date }}
</h2> </span>
<nb-calendar <nb-calendar
[(date)]="date2" [(date)]="date2"
[dayCellComponent]="dayCellComponent" [dayCellComponent]="dayCellComponent"

53
src/app/pages/extra-components/calendar/calendar.component.scss
View file

@ -1,19 +1,46 @@
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@import '../../../@theme/styles/themes'; @import '../../../@theme/styles/themes';
@include nb-install-component() { @include nb-install-component() {
.calendars-container { .calendars {
margin-top: 2rem;
}
h2 {
font-size: nb-theme(font-size-xlg);
text-align: center;
}
.nebular-calendar {
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
align-items: center; margin: -1rem -0.5rem;
margin-bottom: 3rem; justify-content: center;
}
.calendar-container {
margin: 1rem 0.5rem;
}
.subtitle {
display: block;
font-family: nb-theme(text-subtitle-font-family);
font-size: nb-theme(text-subtitle-font-size);
font-weight: nb-theme(text-subtitle-font-weight);
line-height: nb-theme(text-subtitle-line-height);
margin-bottom: 0.5rem;
}
@include media-breakpoint-up(md) {
.calendars {
justify-content: flex-start;
}
}
@include media-breakpoint-up(lg) {
.calendars {
margin: -1.1rem;
}
.calendar-container {
margin: 1rem;
}
}
@include media-breakpoint-up(xxxl) {
.calendars {
margin: -1rem;
}
} }
} }