Skip to content

Commit

Permalink
fix(timepicker): use ViewEncapsulation.None forgotten in 4.0.0
Browse files Browse the repository at this point in the history 
Closes #2932
  • Loading branch information
@maxokorokov
maxokorokov committed Dec 17, 2018
1 parent 34baece commit 1d01940
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 50 deletions.
74 changes: 37 additions & 37 deletions src/timepicker/timepicker.scss
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
:host {
ngb-timepicker {
font-size: 1rem;
}

.ngb-tp {
display: flex;
align-items: center;
}

.ngb-tp-input-container {
width: 4em;
}
&-input-container {
width: 4em;
}

.ngb-tp-hour,
.ngb-tp-minute,
.ngb-tp-second,
.ngb-tp-meridian {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
&-chevron {
&::before {
border-style: solid;
border-width: 0.29em 0.29em 0 0;
content: '';
display: inline-block;
height: 0.69em;
left: 0.05em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: middle;
width: 0.69em;
}

.ngb-tp-spacer {
width: 1em;
text-align: center;
}
&.bottom:before {
top: -.3em;
transform: rotate(135deg);
}
}

.chevron {
&::before {
border-style: solid;
border-width: 0.29em 0.29em 0 0;
content: '';
display: inline-block;
height: 0.69em;
left: 0.05em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: middle;
width: 0.69em;
&-input {
text-align: center;
}

&.bottom:before {
top: -.3em;
transform: rotate(135deg);
&-hour,
&-minute,
&-second,
&-meridian {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
}

input {
text-align: center;
&-spacer {
width: 1em;
text-align: center;
}
}
27 changes: 14 additions & 13 deletions src/timepicker/timepicker.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Component, forwardRef, Input, OnChanges, SimpleChanges} from '@angular/core';
import {Component, forwardRef, Input, OnChanges, SimpleChanges, ViewEncapsulation} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

import {isInteger, isNumber, padNumber, toInteger} from '../util/util';
Expand All @@ -17,6 +17,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
*/
@Component({
selector: 'ngb-timepicker',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./timepicker.scss'],
template: `
<fieldset [disabled]="disabled" [class.disabled]="disabled">
Expand All @@ -25,17 +26,17 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
<button *ngIf="spinners" type="button" (click)="changeHour(hourStep)"
class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize" [class.disabled]="disabled"
[disabled]="disabled">
<span class="chevron"></span>
<span class="chevron ngb-tp-chevron"></span>
<span class="sr-only" i18n="@@ngb.timepicker.increment-hours">Increment hours</span>
</button>
<input type="text" class="form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize" maxlength="2"
placeholder="HH" i18n-placeholder="@@ngb.timepicker.HH"
<input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
maxlength="2" placeholder="HH" i18n-placeholder="@@ngb.timepicker.HH"
[value]="formatHour(model?.hour)" (change)="updateHour($event.target.value)"
[readonly]="readonlyInputs" [disabled]="disabled" aria-label="Hours" i18n-aria-label="@@ngb.timepicker.hours">
<button *ngIf="spinners" type="button" (click)="changeHour(-hourStep)"
class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize" [class.disabled]="disabled"
[disabled]="disabled">
<span class="chevron bottom"></span>
<span class="chevron ngb-tp-chevron bottom"></span>
<span class="sr-only" i18n="@@ngb.timepicker.decrement-hours">Decrement hours</span>
</button>
</div>
Expand All @@ -44,17 +45,17 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
<button *ngIf="spinners" type="button" (click)="changeMinute(minuteStep)"
class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize" [class.disabled]="disabled"
[disabled]="disabled">
<span class="chevron"></span>
<span class="chevron ngb-tp-chevron"></span>
<span class="sr-only" i18n="@@ngb.timepicker.increment-minutes">Increment minutes</span>
</button>
<input type="text" class="form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize" maxlength="2"
placeholder="MM" i18n-placeholder="@@ngb.timepicker.MM"
<input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
maxlength="2" placeholder="MM" i18n-placeholder="@@ngb.timepicker.MM"
[value]="formatMinSec(model?.minute)" (change)="updateMinute($event.target.value)"
[readonly]="readonlyInputs" [disabled]="disabled" aria-label="Minutes" i18n-aria-label="@@ngb.timepicker.minutes">
<button *ngIf="spinners" type="button" (click)="changeMinute(-minuteStep)"
class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize" [class.disabled]="disabled"
[disabled]="disabled">
<span class="chevron bottom"></span>
<span class="chevron ngb-tp-chevron bottom"></span>
<span class="sr-only" i18n="@@ngb.timepicker.decrement-minutes">Decrement minutes</span>
</button>
</div>
Expand All @@ -63,17 +64,17 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
<button *ngIf="spinners" type="button" (click)="changeSecond(secondStep)"
class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize" [class.disabled]="disabled"
[disabled]="disabled">
<span class="chevron"></span>
<span class="chevron ngb-tp-chevron"></span>
<span class="sr-only" i18n="@@ngb.timepicker.increment-seconds">Increment seconds</span>
</button>
<input type="text" class="form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize" maxlength="2"
placeholder="SS" i18n-placeholder="@@ngb.timepicker.SS"
<input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
maxlength="2" placeholder="SS" i18n-placeholder="@@ngb.timepicker.SS"
[value]="formatMinSec(model?.second)" (change)="updateSecond($event.target.value)"
[readonly]="readonlyInputs" [disabled]="disabled" aria-label="Seconds" i18n-aria-label="@@ngb.timepicker.seconds">
<button *ngIf="spinners" type="button" (click)="changeSecond(-secondStep)"
class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize" [class.disabled]="disabled"
[disabled]="disabled">
<span class="chevron bottom"></span>
<span class="chevron ngb-tp-chevron bottom"></span>
<span class="sr-only" i18n="@@ngb.timepicker.decrement-seconds">Decrement seconds</span>
</button>
</div>
Expand Down

0 comments on commit 1d01940

Please sign in to comment.