add theme css

dolymood · Sep 25, 2017 · 4428147 · 4428147
1 parent 4733667
commit 4428147
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 12 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
+example/
 dist/*.js
diff --git a/example/index.html b/example/index.html
@@ -9,8 +9,8 @@
     html {height:100%}
     body {min-height:100%}
   </style>
-  <link href="date-time-picker.min.css" rel="stylesheet">
-  <script type="text/javascript" src="date-time-picker.min.js"></script>
+  <link href="date-time-picker.css" rel="stylesheet">
+  <script type="text/javascript" src="date-time-picker.js"></script>
 </head>
 </head>
 <body>
@@ -40,7 +40,8 @@ <h1>date-time-picker examples</h1>
     var timePicker = new DateTimePicker.Time({
       default: time.value,
       min: '08:30',
-      max: '20:30'
+      max: '20:30',
+      minuteStep: 1
     })
     timePicker.on('selected', function (formatTime, now) {
       console.log('selected time: ', formatTime, now)

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "date-time-picker",
   "library": "DateTimePicker",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "No Dependencies Lightweight Material Date/Time Picker For Mobile Web",
   "main": "src/date+time.js",
   "scripts": {

diff --git a/src/css/dark.css b/src/css/dark.css
@@ -0,0 +1,20 @@
+.picker-container {background-color:#424242;}
+.picker-container .picker-disabled {color:rgba(255, 255, 255, .4);}
+.picker-head {color:rgba(255, 255, 255, .6);background-color:#616161;}
+.picker-actions-arrow i {color:#fff;}
+
+.picker-content {color:#fff;}
+
+.picker-foot {color:#82b1ff;}
+
+/** date picker **/
+.date-picker-days-bdy .picker-now {color:#82b1ff;}
+.date-picker-days-bdy i:before {background-color:#82b1ff;}
+
+.scroller-picker-main .picker-active {color:#82b1ff;}
+
+/** time picker **/
+.time-picker-main {background-color:#616161;}
+.time-picker-main:before {background-color:rgba(130, 177, 255, .9);}
+.time-picker-line {background-color:rgba(130, 177, 255, .9);}
+.time-picker-line:before {background-color:rgba(130, 177, 255, .9);}
diff --git a/src/css/index.css b/src/css/index.css
@@ -1,4 +1,4 @@
-.picker-mask {position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, .54);}
+.picker-mask {position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, .46);}
 @-webkit-keyframes pickerShow {
   from {
     opacity: 0;
@@ -17,7 +17,7 @@
 }
 .picker-mask.time-picker-ani {-webkit-animation:pickerShow .2s linear;animation:pickerShow .2s linear;}
 
-.picker-container {position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:280px;opacity:1;font-family:'PingFang SC', 'HanHei SC', 'Helvetica Neue', 'Helvetica', sans-serif;line-height:1.5;box-shadow:0 0 10px rgba(0, 0, 0, .8);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;}
+.picker-container {position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:280px;opacity:1;font-family:'PingFang SC', 'HanHei SC', 'Helvetica Neue', 'Helvetica', sans-serif;line-height:1.5;background-color:#fff;box-shadow:0 0 10px rgba(0, 0, 0, .8);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;}
 .picker-container i {font-style:normal;}
 .picker-container [data-active] {position:relative;}
 .picker-container [data-active]:after,
@@ -29,7 +29,7 @@
 .picker-head-active {color:#fff;}
 .picker-year {font-size:14px;width:4em;}
 .picker-date {font-size:24px;text-indent:-2px;}
-.picker-content {position:relative;overflow:hidden;width:100%;height:224px;font-size:12px;color:rgba(0, 0, 0, 0.8);background-color:#fff;}
+.picker-content {position:relative;overflow:hidden;width:100%;height:224px;font-size:12px;color:rgba(0, 0, 0, 0.8);}
 .picker-content ul,
 .picker-content li {list-style:none;margin:0;padding:0;}
 
@@ -73,8 +73,8 @@
 .date-picker-days-bdy i[data-val="0"] {color:transparent;}
 .date-picker-days-bdy i[data-val="0"]:before {content:none;}
 
-.picker-foot {padding:6px 10px;text-align:right;background-color:#fff;}
-.picker-act {padding:5px 15px;margin-left:10px;color:#393939;text-decoration:none;display:inline-block;font-size:14px;font-weight:600;background-color:transparent;border-radius:2px;-webkit-transition:background-color .2s linear;transition:background-color .2s linear;}
+.picker-foot {padding:6px 10px;text-align:right;color:#393939;}
+.picker-act {padding:5px 15px;margin-left:10px;text-decoration:none;display:inline-block;font-size:14px;font-weight:600;color:inherit;background-color:transparent;border-radius:2px;-webkit-transition:background-color .2s linear;transition:background-color .2s linear;}
 .picker-act:hover {background-color:rgba(153, 153, 153, 0.2);}
 .picker-act-clear {margin-left:0;float:left;}
 
@@ -101,7 +101,7 @@
 .picker-hour[data-active]:after, .picker-minute[data-active]:after {height:46px;top:5px;}
 .picker-hour {text-align:right;}
 .picker-minute {text-align:left;}
-.picker-cell {position:absolute!important;color:rgba(0, 0, 0, 0.8);top:0;left:50%;width:40px;height:28px;-webkit-transform-origin:50% 99px;transform-origin:50% 99px;-webkit-transition:all .2s;transition:all .2s;}
+.picker-cell {position:absolute!important;top:0;left:50%;width:40px;height:28px;-webkit-transform-origin:50% 99px;transform-origin:50% 99px;-webkit-transition:all .2s;transition:all .2s;}
 .picker-cell i {position:absolute;top:50%;left:50%;pointer-events:none;}
 .picker-cell-inner {top:30px;width:24px;height:24px;-webkit-transform-origin:50% 69px;transform-origin:50% 69px;}
 

diff --git a/src/css/light.css b/src/css/light.css
@@ -0,0 +1,19 @@
+.picker-container .picker-disabled {color:rgba(0, 0, 0, .4);}
+.picker-head {color:rgba(255, 255, 255, .6);background-color:#2196f3;}
+.picker-actions-arrow i {color:rgba(0, 0, 0, .54);}
+
+.picker-content {color:rgba(0, 0, 0, .87);}
+
+.picker-foot {color:#2196f3;}
+
+/** date picker **/
+.date-picker-days-bdy .picker-now {color:#2196f3;}
+.date-picker-days-bdy i:before {background-color:#2196f3;}
+
+.scroller-picker-main .picker-active {color:#2196f3;}
+
+/** time picker **/
+.time-picker-main {background-color:#e0e0e0;}
+.time-picker-main:before {background-color:rgba(33, 150, 243, .9);}
+.time-picker-line {background-color:rgba(33, 150, 243, .9);}
+.time-picker-line:before {background-color:rgba(33, 150, 243, .9);}
diff --git a/webpack.config.js b/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = {
   },
   output: {
     path: path.join(__dirname, './dev'),
-    filename: '[name].min.js',
+    filename: '[name].js',
     library: pkg.library,
     libraryTarget: 'umd'
   },
@@ -43,7 +43,7 @@ module.exports = {
       template: 'example/index.html',
       inject: false
     }),
-    new ExtractTextPlugin(pkg.name + '.min.css')
+    new ExtractTextPlugin(pkg.name + '.css')
   ],
   devServer: {
     contentBase: 'dev'