(js,css) Adapt time picker to latest md changes
parent
d9f499ff52
commit
7f4474f47c
|
@ -388,7 +388,7 @@
|
||||||
'<div class="sg-timepicker-time-pane md-whiteframe-z1">',
|
'<div class="sg-timepicker-time-pane md-whiteframe-z1">',
|
||||||
' <div class="sg-timepicker-input-mask">',
|
' <div class="sg-timepicker-input-mask">',
|
||||||
' <div class="sg-timepicker-input-mask-opaque"',
|
' <div class="sg-timepicker-input-mask-opaque"',
|
||||||
' md-colors="::{background: \'default-background-A100\'}"></div>', // using mdColors
|
' md-colors="::{background: \'default-background-hue-1\'}"></div>', // using mdColors
|
||||||
' </div>',
|
' </div>',
|
||||||
' <div class="sg-timepicker-time" md-colors="::{background: \'default-background-A100\'}">',
|
' <div class="sg-timepicker-time" md-colors="::{background: \'default-background-A100\'}">',
|
||||||
' <sg-time-pane role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ',
|
' <sg-time-pane role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ',
|
||||||
|
|
|
@ -98,12 +98,9 @@ sg-timepicker {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
// The calendar icon button used to open the calendar pane.
|
// The time icon button used to open the time pane.
|
||||||
// Need absurd specificty to override md-button.md-icon-button.
|
|
||||||
.sg-timepicker-button {
|
.sg-timepicker-button {
|
||||||
display: inline-block;
|
@extend .md-datepicker-button;
|
||||||
box-sizing: border-box;
|
|
||||||
background: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// The input into which the user can type the time.
|
// The input into which the user can type the time.
|
||||||
|
@ -143,12 +140,7 @@ sg-timepicker {
|
||||||
|
|
||||||
// Portion of the floating panel that sits, invisibly, on top of the input.
|
// Portion of the floating panel that sits, invisibly, on top of the input.
|
||||||
.sg-timepicker-input-mask {
|
.sg-timepicker-input-mask {
|
||||||
height: 40px;
|
@extend .md-datepicker-input-mask;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
background: transparent;
|
|
||||||
pointer-events: none;
|
|
||||||
cursor: text;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-timepicker-input-mask-opaque {
|
.sg-timepicker-input-mask-opaque {
|
||||||
|
@ -207,21 +199,37 @@ sg-timepicker[disabled] {
|
||||||
|
|
||||||
// Open state for all of the elements of the picker.
|
// Open state for all of the elements of the picker.
|
||||||
.sg-timepicker-open {
|
.sg-timepicker-open {
|
||||||
.sg-timepicker-input-container {
|
overflow: hidden;
|
||||||
@include rtl-prop(margin-left, margin-right, -$md-datepicker-button-gap);
|
|
||||||
|
|
||||||
|
.sg-timepicker-input-container {
|
||||||
// The negative bottom margin prevents the content around the datepicker
|
// The negative bottom margin prevents the content around the datepicker
|
||||||
// from jumping when it gets opened.
|
// from jumping when it gets opened.
|
||||||
margin-bottom: -$md-datepicker-border-bottom-gap;
|
margin-bottom: -$md-datepicker-border-bottom-gap;
|
||||||
border: none;
|
|
||||||
|
// From datePicker-theme.scss
|
||||||
|
background: $colorGrey200; //'{{background-hue-1}}';
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-timepicker-input {
|
.md-icon-button + .sg-timepicker-input-container {
|
||||||
|
@include rtl-prop(margin-left, margin-right, -$md-datepicker-button-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-timepicker-input,
|
||||||
|
label:not(.md-no-float):not(._md-container-ignore) {
|
||||||
|
margin-bottom: -$md-datepicker-border-bottom-gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// This needs some extra specificity in order to override
|
||||||
|
// the focused/invalid border colors.
|
||||||
|
input.sg-timepicker-input {
|
||||||
@include rtl-prop(margin-left, margin-right, 24px);
|
@include rtl-prop(margin-left, margin-right, 24px);
|
||||||
height: 40px;
|
height: $md-datepicker-input-mask-height;
|
||||||
|
border-bottom-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-timepicker-triangle-button {
|
.sg-timepicker-triangle-button,
|
||||||
|
&.md-input-has-value > label,
|
||||||
|
&.md-input-has-placeholder > label {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue