Permalink
Browse files

feature: Date- and TimePicker are stackable

  • Loading branch information...
MikeMitterer committed Oct 27, 2017
1 parent 1c043ac commit 091528b3f7292e34f34a52df60fbd3800d206c8c
@@ -150,6 +150,8 @@
// Special Date-Picker-Dialog settings
.mdl-dialog.mdl-datepicker {
left: calc(50% - (#{$_datepicker_width}) / 2);
.mdl-dialog-container & {
max-height : 90%;
}
@@ -16,111 +16,117 @@
// See the License for the specific language governing permissions and
// limitations under the License.
//
@import "../theme/theme";
@import "../shadow/mixins";
@import "../typography/mixins";
@import "../scrollbars/mixins";
@import "variables";
@import "mixins";
.mdl-dialog-container {
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : $dialog-z-index;
visibility : hidden;
background-color : transparent;
&.is-visible {
background-color: rgba(0, 0, 0, 0.25);
visibility: visible;
.mdl-dialog {
opacity : 1;
transition : $dialog-swift-ease-out-duration;
transform : translate3d(0, 0, 0) scale(1.0);
}
}
&.is-hidden {
.mdl-dialog {
// hidden
transition : $dialog-swift-ease-out;
transform : translate3d(0, 100%, 0) scale(0.2);
}
}
.mdl-dialog {
.mdl-dialog, .mdl-datepicker, .mdl-timepicker {
&-container {
display : flex;
flex-direction : column;
box-sizing : border-box;
background-color : white;
opacity : 0;
min-width : 280px;
max-width : 80%;
max-height : 80%;
position : relative;
overflow : hidden; // stop content from leaking out of dialog parent
@include shadow-2dp();
.mdl-dialog__toolbar {
padding : 18px 24px 18px 24px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start; // ↓
align-content: space-between; // =
align-items: flex-start; // ⇾
justify-content : center;
align-items : center;
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : $dialog-z-index;
visibility : hidden;
background-color : transparent;
&.is-visible {
background-color : rgba(0, 0, 0, 0.25);
visibility : visible;
.mdl-dialog {
opacity : 1;
transition : $dialog-swift-ease-out-duration;
transform : translate3d(0, 0, 0) scale(1.0);
}
}
.mdl-dialog__content {
display: block;
box-sizing : border-box;
&.is-hidden {
.mdl-dialog {
// hidden
transition : $dialog-swift-ease-out;
transform : translate3d(0, 100%, 0) scale(0.2);
}
}
order : 1;
padding : 24px 24px 0 24px;
overflow : auto;
-webkit-overflow-scrolling : touch;
> .mdl-dialog {
pointer-events : none;
&:not([layout=row]) > *:first-child:not(.mdl-subheader) {
margin-top : 0;
&:last-of-type {
pointer-events : all;
}
}
h1,h2,h3,h4,h5,h6 { margin-bottom: 18px; }
.mdl-dialog {
display : flex;
flex-direction : column;
box-sizing : border-box;
background-color : white;
opacity : 0;
min-width : 280px;
max-width : 80%;
max-height : 80%;
//position : relative;
overflow : hidden; // stop content from leaking out of dialog parent
@include shadow-2dp();
.mdl-dialog__toolbar {
padding : 18px 24px 18px 24px;
display : flex;
flex-direction : column;
flex-wrap : nowrap;
justify-content : flex-start; // ↓
align-content : space-between; // =
align-items : flex-start; // ⇾
}
p { @include typo-subhead(true); color: $dialog-secondary-color; }
.mdl-dialog__content {
display : block;
box-sizing : border-box;
order : 1;
padding : 24px 24px 0 24px;
overflow : auto;
-webkit-overflow-scrolling : touch;
@include hide_scrollbar($show_on_hover: false);
}
&:not([layout=row]) > *:first-child:not(.mdl-subheader) {
margin-top : 0;
}
.mdl-dialog__actions {
display : flex;
order : 2;
box-sizing : border-box;
align-items : center;
justify-content : flex-end;
padding : 6px 16px 6px 0;
margin-top : 16px;
margin-bottom : 8px;
min-height : $dialog-baseline-grid * 5;
> * {
margin-left : 8px;
h1, h2, h3, h4, h5, h6 { margin-bottom : 18px; }
p { @include typo-subhead(true); color : $dialog-secondary-color; }
@include hide_scrollbar($show_on_hover : false);
}
}
&.mdl-content-overflow .mdl-actions {
border-top : 1px solid;
.mdl-dialog__actions {
display : flex;
order : 2;
box-sizing : border-box;
align-items : center;
justify-content : flex-end;
padding : 6px 16px 6px 0;
margin-top : 16px;
margin-bottom : 8px;
min-height : $dialog-baseline-grid * 5;
> * {
margin-left : 8px;
}
}
&.mdl-content-overflow .mdl-actions {
border-top : 1px solid;
}
}
}
}
@@ -20,9 +20,9 @@
$dialog-secondary-color: ($color-black) !default;
$dialog-baseline-grid : 8px !default;
$dialog-swift-ease-out-duration : 0.2s !default;
$dialog-swift-ease-out-duration : 0.3s !default;
$dialog-swift-ease-out-duration : 0.2s !default;
$dialog-swift-ease-out-duration : 0.3s !default;
$dialog-swift-ease-out-timing-function : cubic-bezier(0.25, 0.8, 0.25, 1) !default;
$dialog-swift-ease-out : all $dialog-swift-ease-out-duration $dialog-swift-ease-out-timing-function !default;
Oops, something went wrong.

0 comments on commit 091528b

Please sign in to comment.