Permalink
Browse files

feature: Date-Picker added

  • Loading branch information...
MikeMitterer committed Oct 17, 2017
1 parent 1609410 commit a7e5d661c6b18d3f817e12bdbf41e637140326f3
@@ -32,6 +32,7 @@
@import "accordion/accordion";
@import "badge/badge";
@import "dialog/dialog";
@import "datepicker/datepicker";
@import "dnd/dnd";
@import "footer/sticky_mini_footer";
@import "forms/forms";
@@ -0,0 +1,169 @@
@import "../scrollbars/mixins";
@import "variables";
@import "mixin";
.mdl-datepicker {
display : block;
width : $_datepicker_width;
.mdl-datepicker__year, .mdl-datepicker__date {
opacity : 0.8;
cursor: pointer;
&.is-active {
opacity : 1;
cursor: default;
}
}
.mdl-datepicker__day_view {
height: $_datepicker_content_height;
@at-root .mdl-datepicker.show-year-view {
.mdl-datepicker__day_view {
display: none;
}
}
.mdl-datepicker__month_selection {
display : flex;
flex-direction : row;
flex-wrap : nowrap;
justify-content : flex-start; // ⇾
align-content : space-between; // ||
align-items : center; // ↓
margin-bottom : 8px;
i {
cursor: pointer;
}
.mdl-datepicker__month_selection--month {
flex-grow : 1;
text-align : center;
}
}
.mdl-datepicker__dow {
display : flex;
flex-direction : row;
flex-wrap : nowrap;
justify-content : space-between; // ⇾
align-content : space-around; // ||
align-items : center; // ↓
height : $_datepicker_line_height;
font-size : $_datepicker_day_font-size;
opacity : 0.6;
> * {
text-align : center;
width : calc(100% / 7);
}
}
.mdl-datepicker__dom {
display : flex;
flex-direction : column;
flex-wrap : wrap;
justify-content : flex-start; // ↓
align-content : space-between; // =
align-items : stretch; // ⇾
.mdl-datepicker__dom__row {
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : space-between; // ⇾
align-content : space-around; // ||
align-items : center; // ↓
height : $_datepicker_line_height;
> .mdl-datepicker__dom--day {
display : flex;
flex-direction : column;
flex-wrap : wrap;
justify-content : center; // ↓
align-content : space-around; // =
align-items : center; // ⇾
text-align : center;
width : calc(100% / 7);
font-size : $_datepicker_day_font-size;
line-height : $_datepicker_line_height;
cursor: pointer;
// Selection
&.mdl-color--accent {
border-radius : 100%;
vertical-align : middle;
}
}
}
}
}
.mdl-datepicker__year_view {
@include hide_scrollbar(false);
display: none;
height: $_datepicker_content_height;
overflow : scroll;
@at-root .mdl-datepicker.show-year-view {
.mdl-datepicker__year_view {
display : flex;
flex-direction : column;
flex-wrap : wrap;
justify-content : flex-start; // ↓
align-content : space-between; // =
align-items : center; // ⇾
}
}
ul {
li {
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : center; // ⇾
align-content : space-between; // ||
align-items : center; // ↓
cursor : pointer;
&.mdl-color-text--accent {
font-size : 26px;
}
}
}
}
}
// Special Date-Picker-Dialog settings
.mdl-dialog.mdl-datepicker {
.mdl-dialog-container & {
max-height : 90%;
}
.mdl-dialog__toolbar {
min-height : 60px; // Padding top+bottom 18px x 2 + 60 = 96
}
.mdl-dialog__content {
padding : 18px 18px 0 18px;
}
.mdl-dialog__actions {
padding-top : 0;
padding-right : 0;
margin-right : -8px;
margin-bottom : 2px;
}
}
@@ -0,0 +1,61 @@
/// Mixin to put items on a circle
/// [1] - Allows children to be absolutely positioned
/// [2] - Allows the mixin to be used on a list
/// [3] - In case box-sizing: border-box has been enabled
/// [4] - Allows any type of direct children to be targeted
///
/// @param {Integer} $nb-items - Number or items
/// @param {Origin} $origin - 0deg means east (3 on clock, -90deg means 12 on clock)
/// @param {Length} $circle-size - Container size
/// @param {Length} $item-size - Item size
///
/// Usage: @include distribute-on-circle(12, -60deg, 250px, 20px);
///
/// More: https://hugogiraudel.com/2013/04/02/items-on-circle/
@mixin distribute-on-circle( $nb-items, $origin, $circle-size, $item-size) {
$half-item: ($item-size / 2);
$half-parent: ($circle-size / 2);
position: relative; /* 1 */
width: $circle-size;
height: $circle-size;
padding: 0;
border-radius: 50%;
list-style: none; /* 2 */
box-sizing: content-box; /* 3 */
> * { /* 4 */
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $item-size;
height: $item-size;
line-height: $item-size;
margin: -$half-item;
text-align: center;
vertical-align: center;
}
$angle: (360 / $nb-items);
$rot: 0;
transform: rotate($origin);
@for $i from 1 through $nb-items {
> :nth-of-type(#{$i}) {
// Rotate the axis
transform: rotate($rot * 1deg)
// Move the item from the center
translate($half-parent)
// Rotate the item back to its default position
rotate(($rot * -1deg) - $origin);
}
$rot: ($rot + $angle);
}
}
@@ -0,0 +1,5 @@
$_datepicker_width : 330px;
$_datepicker_content_height : 320px;
$_datepicker_line_height : 40px;
$_datepicker_day_font-size : 12px;
@@ -72,6 +72,17 @@
@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; // ⇾
}
.mdl-dialog__content {
display: block;
box-sizing : border-box;
Oops, something went wrong.

0 comments on commit a7e5d66

Please sign in to comment.