- add simple theme

Author: zbryikt

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## v0.0.2 (upcoming)
 
  - tweak layout
+ - add simple theme
 
 
 ## v0.0.1

build

@@ -5,11 +5,15 @@ echo "build src/index.ls -> dist/index.js ..."
 ./node_modules/.bin/lsc -cp --no-header src/index.ls > dist/index.js
 echo "build src/index.styl -> dist/index.css ..."
 ./node_modules/.bin/stylus -p src/index.styl > dist/index.css
+echo "build src/theme.styl -> dist/theme.css ..."
+./node_modules/.bin/stylus -p src/theme.styl > dist/theme.css
 
 echo "minifying index.js ..."
 ./node_modules/.bin/uglifyjs dist/index.js -m -c > dist/index.min.js
 echo "minifying index.css ..."
 ./node_modules/.bin/uglifycss dist/index.css > dist/index.min.css
+echo "minifying theme.css ..."
+./node_modules/.bin/uglifycss dist/theme.css > dist/theme.min.css
 
 echo "Copy dist/ to web/ ..."
 rm -rf web/static/assets/lib/lddatetimepicker/dev/

dist/index.css

@@ -14,6 +14,16 @@
   flex: 1 0 auto;
   text-align: center;
 }
+.lddtp-a:before,
+.lddtp-a:after {
+  display: block;
+}
+.lddtp-a:first-child:before {
+  content: "\25c0";
+}
+.lddtp-a:last-child:before {
+  content: "\25ba";
+}
 .lddtp {
   position: absolute;
   z-index: 100;

dist/index.js

@@ -1,6 +1,6 @@
 (function(){
   var html, lddatetimepicker;
-  html = '<div class="lddtp">\n  <div class="lddtp-h">\n    <div data-action="-">&#x25c0;</div>\n    <div class="lddtp-f"><select class="lddtp-month-sel"></select></div>\n    <div class="lddtp-f"><input class="lddtp-year-sel" type="number"/></div>\n    <div data-action="+">&#x25ba;</div>\n  </div>\n  <div class="lddtp-ds">\n  </div>\n  <div class="lddtp-t">\n    <div class="lddtp-f"><select class="lddtp-hour-sel"></select></div>\n    <div><b>:</b></div>\n    <div class="lddtp-f"><select class="lddtp-minute-sel"></select></div>\n  </div>\n</div>';
+  html = '<div class="lddtp">\n  <div class="lddtp-h">\n    <div class="lddtp-a" data-action="-"></div>\n    <div class="lddtp-f"><select class="lddtp-month-sel"></select></div>\n    <div class="lddtp-f"><input class="lddtp-year-sel" type="number"/></div>\n    <div class="lddtp-a" data-action="+"></div>\n  </div>\n  <div class="lddtp-ds">\n  </div>\n  <div class="lddtp-t">\n    <div class="lddtp-f"><select class="lddtp-hour-sel"></select></div>\n    <div><b>:</b></div>\n    <div class="lddtp-f"><select class="lddtp-minute-sel"></select></div>\n  </div>\n</div>';
   lddatetimepicker = function(opt){
     var div, r, ref$, x$, _handler, this$ = this;
     opt == null && (opt = {});
@@ -91,7 +91,7 @@
         minute: r.querySelector('.lddtp-minute-sel')
       }
     };
-    this.n.t.style.display = this._enabled.time ? 'block' : 'none';
+    this.n.t.style.display = this._enabled.time ? '' : 'none';
     this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
     this.wdays = ['SUN', 'MON', 'TUE', 'WED', 'THR', 'FRI', 'SAT'];
     this.n.ds.innerHTML = [0, 1, 2, 3, 4, 5, 6].map(function(w){

dist/index.min.css

@@ -0,0 +1,43 @@
+.lddtp {
+  padding: 0.5em;
+}
+.lddtp-ds .dim {
+  opacity: 0.4;
+  background: none;
+}
+.lddtp-d {
+  font-weight: 400;
+}
+.lddtp-w {
+  opacity: 0.3;
+}
+.lddtp-ds {
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+}
+.lddtp-d.selected {
+  background: none;
+  color: inherit;
+  position: relative;
+}
+.lddtp-d.selected:after {
+  display: block;
+  content: " ";
+  width: 80%;
+  height: 3px;
+  border-radius: 3px;
+  background: #0cf;
+  position: absolute;
+  bottom: 0.15em;
+  left: 10%;
+  right: 10%;
+}
+.lddtp-a:first-child:before {
+  content: "\00ab";
+}
+.lddtp-a:last-child:before {
+  content: "\00bb";
+}
+.lddtp-t {
+  padding: 0 0.5em;
+}