Generated by TRAVIS-CI 8a3fea1

Add date picker spin button example for issue 125 (pull #1053)

To resolve issue #125, add an example that uses the spin button pattern to create a date picker.

examples/spinbutton/css/datepicker-spinbuttons.css

@@ -0,0 +1,91 @@
+.datepicker-spinbuttons {
+ margin-top: 1em;
+}
+
+.datepicker-spinbuttons .day {
+ width: 2em;
+}
+
+.datepicker-spinbuttons .month {
+ width: 6em;
+}
+
+.datepicker-spinbuttons .year {
+ width: 3em;
+}
+
+.datepicker-spinbuttons .spinbutton {
+ float: left;
+ text-align: center;
+}
+
+.datepicker-spinbuttons .spinbutton:first-child {
+ border-left: 4px;
+}
+
+.datepicker-spinbuttons .spinbutton:last-child {
+ border-right: 4px;
+}
+
+.datepicker-spinbuttons .spinbutton .previous,
+.datepicker-spinbuttons .spinbutton .next {
+ color: #666;
+}
+
+.datepicker-spinbuttons .spinbutton.focus {
+ outline: 2px solid #005a9c;
+}
+
+.datepicker-spinbuttons .spinbutton.focus,
+.datepicker-spinbuttons .spinbutton:hover {
+ color: #444;
+ background-color: #eee;
+}
+
+.datepicker-spinbuttons .spinbutton.focus [role="spinbutton"],
+.datepicker-spinbuttons .spinbutton:hover [role="spinbutton"] {
+ background-color: #fff;
+ color: black;
+}
+
+.datepicker-spinbuttons .spinbutton .previous {
+ border-bottom: 1px solid black;
+}
+
+.datepicker-spinbuttons .spinbutton .next {
+ border-top: 1px solid black;
+}
+
+.datepicker-spinbuttons .spinbutton button {
+ padding: 0;
+ margin: 0;
+ border: none;
+ background-color: transparent;
+}
+
+.datepicker-spinbuttons .spinbutton .decrease svg polygon,
+.datepicker-spinbuttons .spinbutton .increase svg polygon {
+ fill: #333;
+ stroke-width: 3px;
+ stroke: transparent;
+}
+
+.datepicker-spinbuttons .spinbutton .decrease {
+ position: relative;
+ top: 4px;
+}
+
+.datepicker-spinbuttons .spinbutton.focus svg polygon {
+ fill: #005a9c;
+ stroke: #005a9c;
+}
+
+.datepicker-spinbuttons .spinbutton .decrease:hover svg polygon,
+.datepicker-spinbuttons .spinbutton .increase:hover svg polygon {
+ fill: #005a9c;
+ stroke: #005a9c;
+}
+
+div[role="separator"] {
+ clear: both;
+}