Skip to content
This repository has been archived by the owner on May 12, 2018. It is now read-only.

Commit

Permalink
update(timepicker): improve clock hand dragging
Browse files Browse the repository at this point in the history
  • Loading branch information
alenaksu committed Feb 17, 2016
1 parent 1ab0905 commit 44a7c8e
Show file tree
Hide file tree
Showing 11 changed files with 408 additions and 405 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
@@ -1,3 +1,7 @@
### 0.5.1

Minor bugfixes and improvements

### 0.5.0

#### Breaking Changes
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
@@ -1,6 +1,6 @@
{
"name": "mdPickers",
"version": "0.5.0",
"version": "0.5.1",
"homepage": "https://github.com/alenaksu/mdPickers",
"authors": [
"alenaksu"
Expand Down
303 changes: 151 additions & 152 deletions dist/mdPickers.css
View file
Expand Up @@ -5,7 +5,7 @@
}
.mdp-animate-next-remove {
-webkit-transition: all 0.5s cubic-bezier(0.35, 0, 0.25, 1);
transition: all 0.5s cubic-bezier(0.35, 0, 0.25, 1);
transition: all 0.5s cubic-bezier(0.35, 0, 0.25, 1);
opacity: 0;
-webkit-transform: translate3d(50%, 0, 1px);
transform: translate3d(50%, 0, 1px);
Expand All @@ -22,7 +22,7 @@
}
.mdp-animate-prev-remove {
-webkit-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 1px);
transform: translate3d(-50%, 0, 1px);
Expand Down Expand Up @@ -66,161 +66,12 @@
}
.mdp-animation-zoom.ng-enter {
-webkit-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-name: mdp-animation-bounce;
animation-name: mdp-animation-bounce;
}
.mdp-clock {
width: 200px;
height: 200px;
border-radius: 50%;
padding: 24px;
background: #ededed;
}
.mdp-clock .md-button {
box-shadow: none !important;
background-color: transparent;
display: block;
position: absolute;
min-height: 32px;
width: 32px;
height: 32px;
font-size: 12px;
line-height: 32px;
margin: 0;
padding: 0;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mdp-clock .mdp-clock-container {
width: 100%;
height: 100%;
position: relative;
display: block;
}
.mdp-clock .mdp-pointer {
min-height: 0px;
width: 1px;
height: 50%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
z-index: 0;
pointer-events: none;
}
.mdp-clock .mdp-clock-center {
min-height: 0px;
height: 6px;
width: 6px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
}
.mdp-clock .md-button.mdp-clock-selected {
position: absolute;
border-radius: 50%;
width: 8px;
height: 8px;
bottom: -8px;
left: 0px;
min-width: 0;
min-height: 0;
pointer-events: none;
}
.mdp-timepicker .mdp-clock-switch-container {
padding: 20px;
width: 309px;
}
.mdp-timepicker .mdp-timepicker-time {
padding: 15px;
}
.mdp-timepicker .mdp-timepicker-selected-time {
font-size: 3rem;
}
.mdp-timepicker:not(.portrait) .mdp-timepicker-time {
width: 138px;
}
.mdp-timepicker.portrait .mdp-timepicker-selected-time {
font-size: 4rem;
margin-right: 1.5rem;
}
.mdp-timepicker-selected-time > span,
.mdp-timepicker-selected-ampm > span {
outline: 0;
opacity: 0.6;
}
.mdp-timepicker-selected-time > span:not(.active),
.mdp-timepicker-selected-ampm > span:not(.active) {
cursor: pointer;
}
.mdp-timepicker-selected-time > span.active,
.mdp-timepicker-selected-ampm > span.active {
opacity: 1;
}
.mdp-clock-deg0 {
top: 0%;
left: 50%;
}
.mdp-clock-deg30 {
top: 6.69872981%;
left: 75%;
}
.mdp-clock-deg60 {
top: 25%;
left: 93.30127019%;
}
.mdp-clock-deg90 {
top: 50%;
left: 100%;
}
.mdp-clock-deg120 {
top: 75%;
left: 93.30127019%;
}
.mdp-clock-deg150 {
top: 93.30127019%;
left: 75%;
}
.mdp-clock-deg180 {
top: 100%;
left: 50%;
}
.mdp-clock-deg210 {
top: 93.30127019%;
left: 25%;
}
.mdp-clock-deg240 {
top: 75%;
left: 6.69872981%;
}
.mdp-clock-deg270 {
top: 50%;
left: 0%;
}
.mdp-clock-deg300 {
top: 25%;
left: 6.69872981%;
}
.mdp-clock-deg330 {
top: 6.69872981%;
left: 25%;
}
.mdp-clock-deg360 {
top: 0%;
left: 50%;
}
.mdp-datepicker {
max-height: initial;
}
Expand Down Expand Up @@ -402,3 +253,151 @@ mdp-calendar {
.mdp-calendar-days .mdp-day-placeholder {
margin: 0;
}
.mdp-clock {
width: 200px;
height: 200px;
border-radius: 50%;
cursor: pointer;
padding: 24px;
background: #ededed;
}
.mdp-clock .md-button {
box-shadow: none !important;
background-color: transparent;
display: block;
position: absolute;
min-height: 32px;
width: 32px;
height: 32px;
font-size: 12px;
line-height: 32px;
margin: 0;
padding: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mdp-clock .mdp-clock-container {
width: 100%;
height: 100%;
position: relative;
display: block;
}
.mdp-clock .mdp-pointer {
min-height: 0px;
width: 1px;
height: 50%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
-webkit-transform-origin: top center;
transform-origin: top center;
z-index: 0;
pointer-events: none;
}
.mdp-clock .mdp-clock-center {
min-height: 0px;
height: 6px;
width: 6px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
}
.mdp-clock .md-button.mdp-clock-selected {
position: absolute;
border-radius: 50%;
width: 8px;
height: 8px;
bottom: -8px;
left: 0px;
min-width: 0;
min-height: 0;
pointer-events: none;
}
.mdp-timepicker .mdp-clock-switch-container {
padding: 20px;
width: 309px;
}
.mdp-timepicker .mdp-timepicker-time {
padding: 15px;
}
.mdp-timepicker .mdp-timepicker-selected-time {
font-size: 3rem;
}
.mdp-timepicker:not(.portrait) .mdp-timepicker-time {
width: 138px;
}
.mdp-timepicker.portrait .mdp-timepicker-selected-time {
font-size: 4rem;
margin-right: 1.5rem;
}
.mdp-timepicker-selected-time > span,
.mdp-timepicker-selected-ampm > span {
outline: 0;
opacity: 0.6;
}
.mdp-timepicker-selected-time > span:not(.active),
.mdp-timepicker-selected-ampm > span:not(.active) {
cursor: pointer;
}
.mdp-timepicker-selected-time > span.active,
.mdp-timepicker-selected-ampm > span.active {
opacity: 1;
}
.mdp-clock-deg0 {
top: 0%;
left: 50%;
}
.mdp-clock-deg30 {
top: 6.69872981%;
left: 75%;
}
.mdp-clock-deg60 {
top: 25%;
left: 93.30127019%;
}
.mdp-clock-deg90 {
top: 50%;
left: 100%;
}
.mdp-clock-deg120 {
top: 75%;
left: 93.30127019%;
}
.mdp-clock-deg150 {
top: 93.30127019%;
left: 75%;
}
.mdp-clock-deg180 {
top: 100%;
left: 50%;
}
.mdp-clock-deg210 {
top: 93.30127019%;
left: 25%;
}
.mdp-clock-deg240 {
top: 75%;
left: 6.69872981%;
}
.mdp-clock-deg270 {
top: 50%;
left: 0%;
}
.mdp-clock-deg300 {
top: 25%;
left: 6.69872981%;
}
.mdp-clock-deg330 {
top: 6.69872981%;
left: 25%;
}
.mdp-clock-deg360 {
top: 0%;
left: 50%;
}

0 comments on commit 44a7c8e

Please sign in to comment.