Renamed top level class to datetime-input.

Author: g1eb

src/datetime-input.css

@@ -1,7 +1,7 @@
 /**
  * Datetime range styles
  */
-.datetime-range {
+.datetime-input {
   position: relative;
   width: 100%;
   height: auto;
@@ -27,7 +27,7 @@
 /**
  * Start and end datetime objects
  */
-.datetime-range .datetime {
+.datetime-input .datetime {
   cursor: pointer;
   position: absolute;
   left: 0;
@@ -36,30 +36,30 @@
   background-color: #efefef;
   transition: background-color 0.25s ease-out;
 }
-.datetime-range .datetime .date {
+.datetime-input .datetime .date {
   color: #777;
   font-size: 1em;
   line-height: 1em;
   margin-top: 0.5em;
   display: block;
   overflow: hidden;
 }
-.datetime-range .datetime .time {
+.datetime-input .datetime .time {
   font-size: 1.5em;
   line-height: 1.75em;
   display: block;
   overflow: hidden;
 }
-.datetime-range .datetime.active,
-.datetime-range .datetime:hover {
+.datetime-input .datetime.active,
+.datetime-input .datetime:hover {
   background-color: #ddd;
 }
 
 
 /**
  * Edit datetime popover
  */
-.datetime-range .edit-popover {
+.datetime-input .edit-popover {
   position: absolute;
   z-index: 5;
   top: 4.5em;
@@ -76,15 +76,15 @@
 /**
  * Calendar
  */
-.datetime-range .calendar-toggle {
+.datetime-input .calendar-toggle {
   width: 100%;
   color: #777;
   font-size: 1.5em;
   line-height: 2em;
   cursor: pointer;
   transition: background-color 0.25s ease-out;
 }
-.datetime-range .calendar-toggle::before {
+.datetime-input .calendar-toggle::before {
   content: "";
   display: block;
   position: absolute;
@@ -104,32 +104,32 @@
   -webkit-transform: rotate(-45deg);
   transition: background-color 0.25s ease-out;
 }
-.datetime-range .calendar-toggle:hover,
-.datetime-range .calendar-toggle:hover::before {
+.datetime-input .calendar-toggle:hover,
+.datetime-input .calendar-toggle:hover::before {
   background-color: #ddd;
 }
-.datetime-range .calendar .calendar-header {
+.datetime-input .calendar .calendar-header {
   cursor: default;
   background-color: #fff;
   position: relative;
   width: 100%;
   font-size: 1.5em;
   line-height: 2em;
 }
-.datetime-range .calendar .calendar-header .arrow {
+.datetime-input .calendar .calendar-header .arrow {
   display: inline-block;
   color: #ddd;
   cursor: pointer;
   line-height: 1.5em;
   font-size: 1.5em;
 }
-.datetime-range .calendar .calendar-header .arrow.arrow-left {
+.datetime-input .calendar .calendar-header .arrow.arrow-left {
   position: absolute;
   left: 0;
   width: 2em;
   height: 100%;
 }
-.datetime-range .calendar .calendar-header .arrow.arrow-left::before {
+.datetime-input .calendar .calendar-header .arrow.arrow-left::before {
   content: "";
   position: absolute;
   top: 15%;
@@ -139,16 +139,16 @@
   border-bottom: 0.5em solid transparent;
   transition: border 0.25s ease-out;
 }
-.datetime-range .calendar .calendar-header .arrow.arrow-left:hover::before {
+.datetime-input .calendar .calendar-header .arrow.arrow-left:hover::before {
   border-right-color: #999;
 }
-.datetime-range .calendar .calendar-header .arrow.arrow-right {
+.datetime-input .calendar .calendar-header .arrow.arrow-right {
   position: absolute;
   right: 0;
   width: 2em;
   height: 100%;
 }
-.datetime-range .calendar .calendar-header .arrow.arrow-right::before {
+.datetime-input .calendar .calendar-header .arrow.arrow-right::before {
   content: "";
   position: absolute;
   top: 15%;
@@ -158,13 +158,13 @@
   border-bottom: 0.5em solid transparent;
   transition: border 0.25s ease-out;
 }
-.datetime-range .calendar .calendar-header .arrow.arrow-right:hover::before {
+.datetime-input .calendar .calendar-header .arrow.arrow-right:hover::before {
   border-left-color: #999;
 }
-.datetime-range .calendar .calendar-body {
+.datetime-input .calendar .calendar-body {
   padding: 0.5em 0;
 }
-.datetime-range .calendar .calendar-body .weekdays {
+.datetime-input .calendar .calendar-body .weekdays {
   cursor: default;
   display: flex;
   justify-content: space-between;
@@ -174,15 +174,15 @@
   text-transform: uppercase;
   padding: 0 1em;
 }
-.datetime-range .calendar .calendar-body .weekdays .weekday {
+.datetime-input .calendar .calendar-body .weekdays .weekday {
   display: inline-block;
   width: 5em;
   height: 2.5em;
 }
-.datetime-range .calendar .calendar-body .weekdays .weekday {
+.datetime-input .calendar .calendar-body .weekdays .weekday {
   display: inline-block;
 }
-.datetime-range .calendar .calendar-body .week {
+.datetime-input .calendar .calendar-body .week {
   display: flex;
   justify-content: space-between;
   color: #777;
@@ -191,51 +191,51 @@
   letter-spacing: 1px;
   padding: 0.5em 1em;
 }
-.datetime-range .calendar .calendar-body .week .date {
+.datetime-input .calendar .calendar-body .week .date {
   display: inline-block;
   cursor: pointer;
   width: 2.5em;
   height: 2.5em;
   border-radius: 50%;
   transition: background-color 0.25s ease-out;
 }
-.datetime-range .calendar .calendar-body .week .date.current {
+.datetime-input .calendar .calendar-body .week .date.current {
   color: #444;
 }
-.datetime-range .calendar .calendar-body .week .date:not(.active):hover {
+.datetime-input .calendar .calendar-body .week .date:not(.active):hover {
   background-color: #ddd;
 }
-.datetime-range .calendar .calendar-body .week .date.active,
-.datetime-range .calendar .calendar-body .week .date.inactive.active {
+.datetime-input .calendar .calendar-body .week .date.active,
+.datetime-input .calendar .calendar-body .week .date.inactive.active {
   color: #efefef;
   background-color: rgba(255, 69, 0, 0.75);
 }
-.datetime-range .calendar .calendar-body .week .date.inactive {
+.datetime-input .calendar .calendar-body .week .date.inactive {
   color: #aaa;
 }
 
 
 /**
  * Timer
  */
-.datetime-range .timer {
+.datetime-input .timer {
   display: flex;
   justify-content: space-between;
   background-color: #fff;
 }
-.datetime-range .timer .timer-hours,
-.datetime-range .timer .timer-minutes,
-.datetime-range .timer .timer-seconds {
+.datetime-input .timer .timer-hours,
+.datetime-input .timer .timer-minutes,
+.datetime-input .timer .timer-seconds {
   cursor: default;
   width: 3em;
   display: inline-block;
   font-size: 3em;
   line-height: 1.5em;
   position: relative;
 }
-.datetime-range .timer .timer-hours .arrow,
-.datetime-range .timer .timer-minutes .arrow,
-.datetime-range .timer .timer-seconds .arrow {
+.datetime-input .timer .timer-hours .arrow,
+.datetime-input .timer .timer-minutes .arrow,
+.datetime-input .timer .timer-seconds .arrow {
   position: relative;
   color: #ddd;
   cursor: pointer;
@@ -244,9 +244,9 @@
   line-height: 1em;
   font-size: 0.75em;
 }
-.datetime-range .timer .timer-hours .arrow.arrow-up::before,
-.datetime-range .timer .timer-minutes .arrow.arrow-up::before,
-.datetime-range .timer .timer-seconds .arrow.arrow-up::before {
+.datetime-input .timer .timer-hours .arrow.arrow-up::before,
+.datetime-input .timer .timer-minutes .arrow.arrow-up::before,
+.datetime-input .timer .timer-seconds .arrow.arrow-up::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -256,14 +256,14 @@
   border-bottom: 0.5em solid #ddd;
   transition: border 0.25s ease-out;
 }
-.datetime-range .timer .timer-hours .arrow.arrow-up:hover::before,
-.datetime-range .timer .timer-minutes .arrow.arrow-up:hover::before,
-.datetime-range .timer .timer-seconds .arrow.arrow-up:hover::before {
+.datetime-input .timer .timer-hours .arrow.arrow-up:hover::before,
+.datetime-input .timer .timer-minutes .arrow.arrow-up:hover::before,
+.datetime-input .timer .timer-seconds .arrow.arrow-up:hover::before {
   border-bottom-color: #999;
 }
-.datetime-range .timer .timer-hours .arrow.arrow-down::before,
-.datetime-range .timer .timer-minutes .arrow.arrow-down::before,
-.datetime-range .timer .timer-seconds .arrow.arrow-down::before {
+.datetime-input .timer .timer-hours .arrow.arrow-down::before,
+.datetime-input .timer .timer-minutes .arrow.arrow-down::before,
+.datetime-input .timer .timer-seconds .arrow.arrow-down::before {
   content: "";
   position: absolute;
   top: 0;
@@ -273,12 +273,12 @@
   border-top: 0.5em solid #ddd;
   transition: border 0.25s ease-out;
 }
-.datetime-range .timer .timer-hours .arrow.arrow-down:hover::before,
-.datetime-range .timer .timer-minutes .arrow.arrow-down:hover::before,
-.datetime-range .timer .timer-seconds .arrow.arrow-down:hover::before {
+.datetime-input .timer .timer-hours .arrow.arrow-down:hover::before,
+.datetime-input .timer .timer-minutes .arrow.arrow-down:hover::before,
+.datetime-input .timer .timer-seconds .arrow.arrow-down:hover::before {
   border-top-color: #999;
 }
-.datetime-range .timer .timer-divider {
+.datetime-input .timer .timer-divider {
   font-size: 3em;
   line-height: 3em;
   -webkit-animation-name: blinker;

src/datetime-input.html

@@ -1,4 +1,4 @@
-<div class="datetime-range">
+<div class="datetime-input">
   <div class="datetime"
     ng-click="selectDate(datetime)"
     ng-class="{'active': !!selected }">