2016-08-10 15:51:45 +02:00
|
|
|
/// timepicker.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
2016-05-09 19:52:52 +02:00
|
|
|
|
2015-08-28 19:59:41 +02:00
|
|
|
$sg-time-pane-cell-size: 40px;
|
2015-09-11 15:31:13 +02:00
|
|
|
$sg-time-width: (12 * $sg-time-pane-cell-size) + (2 * $md-calendar-side-padding);
|
2016-05-09 19:52:52 +02:00
|
|
|
$sg-time-font-size: 13px;
|
2015-08-28 19:59:41 +02:00
|
|
|
|
2016-05-09 19:52:52 +02:00
|
|
|
.sg-time-pane {
|
|
|
|
font-size: $sg-time-font-size;
|
2015-08-28 19:59:41 +02:00
|
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.hours-pane {
|
2015-09-11 15:31:13 +02:00
|
|
|
// TODO: should use background-200
|
2015-08-28 19:59:41 +02:00
|
|
|
border-bottom: solid 1px rgb(224,224,224);
|
|
|
|
}
|
|
|
|
|
2015-09-22 03:13:28 +02:00
|
|
|
.sg-time-scroll-mask {
|
|
|
|
display: inline-block;
|
|
|
|
overflow: hidden;
|
|
|
|
height: 6 * $sg-time-pane-cell-size;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
// These two properties are needed to get touch momentum to work.
|
|
|
|
// See https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
|
|
|
|
overflow-y: scroll;
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-09-11 15:31:13 +02:00
|
|
|
.hours-pane,
|
|
|
|
.min1,
|
|
|
|
.min5 {
|
|
|
|
padding: 0 $md-calendar-side-padding;
|
|
|
|
}
|
|
|
|
|
2016-05-09 19:52:52 +02:00
|
|
|
// Circle element inside of every hour/minute cell used to indicate selection or focus.
|
|
|
|
.sg-time-selection-indicator {
|
|
|
|
transition: background-color, color $swift-ease-out-duration $swift-ease-out-timing-function;
|
|
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
font-size: $sg-time-font-size;
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
|
|
width: $md-calendar-cell-emphasis-size;
|
|
|
|
min-width: $md-calendar-cell-emphasis-size;
|
|
|
|
height: $md-calendar-cell-emphasis-size;
|
|
|
|
line-height: $md-calendar-cell-emphasis-size;
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
// .md-calendar-date:not(.md-disabled) & {
|
|
|
|
// cursor: pointer;
|
|
|
|
// }
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: $colorGrey300; // {{background-300}}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.md-focus {
|
|
|
|
background: $colorGrey200; // {{background-hue-1}}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.sg-time-selected, &:hover.sg-time-selected, &.md-focus.sg-time-selected {
|
|
|
|
color: #fff; // {{primary-500-contrast}}
|
|
|
|
border-color: transparent;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-08-28 19:59:41 +02:00
|
|
|
.md-button.md-fab.toggleBtn,
|
|
|
|
.md-button.md-fab.toggleBtn.md-focused,
|
2015-09-11 15:31:13 +02:00
|
|
|
.md-button.md-fab.toggleBtn.md-focus {
|
2015-08-28 19:59:41 +02:00
|
|
|
min-width: 10px;
|
|
|
|
min-height: 10px;
|
|
|
|
border-color: transparent;
|
|
|
|
font-weight:normal;
|
2016-05-09 19:52:52 +02:00
|
|
|
color: #fff;
|
2015-09-11 15:31:13 +02:00
|
|
|
height: $sg-time-pane-cell-size;
|
|
|
|
width: $sg-time-pane-cell-size;
|
2015-08-28 19:59:41 +02:00
|
|
|
line-height: $sg-time-pane-cell-size;
|
|
|
|
box-shadow: none;
|
|
|
|
margin: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
sg-timepicker {
|
|
|
|
// Don't let linebreaks happen between the open icon-button and the input.
|
|
|
|
white-space: nowrap;
|
2016-01-18 22:15:33 +01:00
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
// Leave room for the down-triangle button to "overflow" it's parent without modifying scrollLeft
|
|
|
|
padding-right: $md-datepicker-triangle-button-width / 2;
|
|
|
|
margin-right: -$md-datepicker-triangle-button-width / 2;
|
|
|
|
|
|
|
|
vertical-align: middle;
|
2015-08-28 19:59:41 +02:00
|
|
|
}
|
|
|
|
|
2016-06-14 18:17:50 +02:00
|
|
|
// The time icon button used to open the time pane.
|
2015-08-28 19:59:41 +02:00
|
|
|
.sg-timepicker-button {
|
2016-06-14 18:17:50 +02:00
|
|
|
@extend .md-datepicker-button;
|
2015-08-28 19:59:41 +02:00
|
|
|
}
|
|
|
|
|
2015-09-11 15:31:13 +02:00
|
|
|
// The input into which the user can type the time.
|
2015-08-28 19:59:41 +02:00
|
|
|
.sg-timepicker-input {
|
2015-09-11 15:31:13 +02:00
|
|
|
@extend .md-datepicker-input;
|
2018-06-28 18:04:59 +02:00
|
|
|
|
|
|
|
// From datePicker-theme.scss
|
|
|
|
color: rgba(0,0,0,0.87);
|
2015-08-28 19:59:41 +02:00
|
|
|
}
|
|
|
|
|
2015-09-11 15:31:13 +02:00
|
|
|
// Container for the timepicker input.
|
2015-08-28 19:59:41 +02:00
|
|
|
.sg-timepicker-input-container {
|
2015-09-11 15:31:13 +02:00
|
|
|
@extend .md-datepicker-input-container;
|
2015-08-28 19:59:41 +02:00
|
|
|
|
2016-05-09 20:48:22 +02:00
|
|
|
// From datePicker-theme.scss
|
2016-09-07 22:12:39 +02:00
|
|
|
border-bottom-color: $colorGrey300; // {{foreground-4}}
|
2016-05-09 20:48:22 +02:00
|
|
|
|
2015-08-28 19:59:41 +02:00
|
|
|
&.sg-timepicker-focused {
|
2016-09-07 22:12:39 +02:00
|
|
|
border-bottom-color: sg-color($sogoBlue, 900); // {{primary-color}}
|
2015-08-28 19:59:41 +02:00
|
|
|
border-bottom-width: 2px;
|
|
|
|
}
|
2015-09-11 15:31:13 +02:00
|
|
|
|
2016-05-09 20:48:22 +02:00
|
|
|
&.sg-timepicker-invalid {
|
|
|
|
border-bottom-color: $colorRedA700; // {{warn-A700}}
|
|
|
|
}
|
2015-08-28 19:59:41 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Floating pane that contains the time at the bottom of the input.
|
|
|
|
.sg-timepicker-time-pane {
|
2015-09-11 15:31:13 +02:00
|
|
|
@extend .md-datepicker-calendar-pane;
|
2015-08-28 19:59:41 +02:00
|
|
|
|
2015-09-11 15:31:13 +02:00
|
|
|
// Because blocks of 1-minute cells are allowed to wrap on multiple rows,
|
|
|
|
// we limit the maximum size of the time pane
|
|
|
|
max-width: $sg-time-width;
|
|
|
|
|
|
|
|
// From datePicker-theme.css
|
2018-06-28 18:04:59 +02:00
|
|
|
border-color: rgb(255,255,255);
|
2016-09-07 22:12:39 +02:00
|
|
|
|
|
|
|
&.md-pane-open {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
2015-08-28 19:59:41 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Portion of the floating panel that sits, invisibly, on top of the input.
|
|
|
|
.sg-timepicker-input-mask {
|
2016-06-14 18:17:50 +02:00
|
|
|
@extend .md-datepicker-input-mask;
|
2015-08-28 19:59:41 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// The time portion of the floating pane (vs. the input mask).
|
|
|
|
.sg-timepicker-time {
|
|
|
|
opacity: 0;
|
|
|
|
// Use a modified timing function (from swift-ease-out) so that the opacity part of the
|
|
|
|
// animation doesn't come in as quickly so that the floating pane doesn't ever seem to
|
|
|
|
// cover up the trigger input.
|
|
|
|
transition: opacity $md-datepicker-open-animation-duration cubic-bezier(0.5, 0, 0.25, 1);
|
|
|
|
|
|
|
|
.md-pane-open & {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
2016-09-07 22:12:39 +02:00
|
|
|
sg-time-pane:focus {
|
2015-08-28 19:59:41 +02:00
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Down triangle/arrow indicating that the datepicker can be opened.
|
|
|
|
// We can do this entirely with CSS without needing to load an icon.
|
|
|
|
// See https://css-tricks.com/snippets/css/css-triangle/
|
2015-09-11 15:31:13 +02:00
|
|
|
//$md-date-arrow-size: 5px;
|
2015-08-28 19:59:41 +02:00
|
|
|
.sg-timepicker-expand-triangle {
|
2015-09-11 15:31:13 +02:00
|
|
|
@extend .md-datepicker-expand-triangle;
|
2015-08-28 19:59:41 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Button containing the down "disclosure" triangle/arrow.
|
|
|
|
.sg-timepicker-triangle-button {
|
2015-09-11 15:31:13 +02:00
|
|
|
@extend .md-datepicker-triangle-button;
|
2015-08-28 19:59:41 +02:00
|
|
|
|
2015-09-11 15:31:13 +02:00
|
|
|
// From datepicker-theme.scss
|
2018-06-28 18:04:59 +02:00
|
|
|
.sg-timepicker-expand-triangle {
|
2015-09-11 15:31:13 +02:00
|
|
|
border-top-color: rgba(0,0,0,0.54);
|
|
|
|
}
|
2015-08-28 19:59:41 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.sg-timepicker-triangle-button.md-button.md-icon-button {
|
2015-09-11 15:31:13 +02:00
|
|
|
@extend .md-datepicker-triangle-button.md-button.md-icon-button;
|
2015-08-28 19:59:41 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Disabled state for all elements of the picker.
|
|
|
|
sg-timepicker[disabled] {
|
|
|
|
.sg-timepicker-input-container {
|
|
|
|
border-bottom-color: transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sg-timepicker-triangle-button {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Open state for all of the elements of the picker.
|
|
|
|
.sg-timepicker-open {
|
2016-06-14 18:17:50 +02:00
|
|
|
overflow: hidden;
|
2016-05-09 19:52:52 +02:00
|
|
|
|
2016-09-07 22:12:39 +02:00
|
|
|
.sg-timepicker-input-container,
|
|
|
|
input.md-input {
|
2016-06-14 18:17:50 +02:00
|
|
|
border-bottom-color: transparent;
|
2015-08-28 19:59:41 +02:00
|
|
|
}
|
|
|
|
|
2016-06-14 18:17:50 +02:00
|
|
|
.sg-timepicker-triangle-button,
|
|
|
|
&.md-input-has-value > label,
|
|
|
|
&.md-input-has-placeholder > label {
|
2015-08-28 19:59:41 +02:00
|
|
|
display: none;
|
|
|
|
}
|
2015-09-22 03:13:28 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// When the position of the floating calendar pane is adjusted to remain inside
|
|
|
|
// of the viewport, hide the inputput mask, as the text input will no longer be
|
|
|
|
// directly underneath it.
|
|
|
|
.sg-timepicker-pos-adjusted .sg-timepicker-input-mask {
|
|
|
|
display: none;
|
|
|
|
}
|