LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

(js,css) Adapt time picker to latest md changes

pull/214/head
Francis Lachapelle 2016-06-14 12:17:50 -04:00
parent d9f499ff52
commit 7f4474f47c
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
UI/WebServerResources/js/Common/sgTimepicker.directive.js
View File

@ -388,7 +388,7 @@
'<div class="sg-timepicker-time-pane md-whiteframe-z1">',
' <div class="sg-timepicker-input-mask">',
' <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 class="sg-timepicker-time" md-colors="::{background: \'default-background-A100\'}">',
' <sg-time-pane role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ',

42
UI/WebServerResources/scss/components/timepicker/timepicker.scss
View File

@ -98,12 +98,9 @@ sg-timepicker {
vertical-align: middle;
}
// The calendar icon button used to open the calendar pane.
// Need absurd specificty to override md-button.md-icon-button.
// The time icon button used to open the time pane.
.sg-timepicker-button {
display: inline-block;
box-sizing: border-box;
background: none;
@extend .md-datepicker-button;
}
// 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.
.sg-timepicker-input-mask {
height: 40px;
position: relative;
background: transparent;
pointer-events: none;
cursor: text;
@extend .md-datepicker-input-mask;
}
.sg-timepicker-input-mask-opaque {
@ -207,21 +199,37 @@ sg-timepicker[disabled] {
// Open state for all of the elements of the picker.
.sg-timepicker-open {
.sg-timepicker-input-container {
@include rtl-prop(margin-left, margin-right, -$md-datepicker-button-gap);
overflow: hidden;
.sg-timepicker-input-container {
// The negative bottom margin prevents the content around the datepicker
// from jumping when it gets opened.
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);
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;
}