升级

react-melon · Dec 15, 2016 · 853c453 · 853c453
1 parent 9064623
commit 853c453
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 20 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "melon-calendar",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "homepage": "http://react-melon.github.io/melon-calendar",
   "authors": [
     "ludafa@outlook.com",

diff --git a/example/index.js b/example/index.js
@@ -67,6 +67,14 @@ class View extends React.Component {
                         2015-7-10 to 2015-9-28
                     </div>
                 </div>
+
+                <div className="melon-row">
+                    <div className="melon-column melon-column-4">
+                        <Title level={5}>fluid</Title>
+                        <Calendar variants={['fluid']}></Calendar>
+                    </div>
+                </div>
+
                 <div className="melon-row">
                     <div className="melon-column melon-column-4">
                         <Title level={5}>自动确定</Title>

diff --git a/lib/Calendar.js b/lib/Calendar.js
diff --git a/lib/Calendar.js.map b/lib/Calendar.js.map
diff --git a/lib/RangeCalendar.js b/lib/RangeCalendar.js
diff --git a/lib/RangeCalendar.js.map b/lib/RangeCalendar.js.map
diff --git a/lib/index.styl b/lib/index.styl
@@ -33,7 +33,9 @@ for level, value in $-melon-calendar-sizes
     font-size: $-melon-medium-font-size
     display: inline-block
     position: relative
-    margin-right: 1.2em
+
+    border-bottom: 1px solid $-melon-colors.grey300
+    transition: border-color 1s
 
     &-label-placeholder
         color: $-melon-colors.grey500
@@ -42,17 +44,21 @@ for level, value in $-melon-calendar-sizes
         display inline-block
         font-size: 1em
         width: 100%
-        line-height: 1.5em
-        border-bottom: 1px solid $-melon-colors.grey300
-        transition: border-color 1s
         cursor: pointer
+        text-align: left
+        line-height: 1.5em
+        padding: 0.5em 0
+        padding-right: 1.5em
+        box-sizing: border-box
 
         > .{$-melon-class-prefix}-icon
+            position: absolute
+            right: 0
+            top: 0.5em
             display: inline-block
             font-size: 1.2em
             width: @font-size
-            vertical-align middle
-            margin-right: -@width
+            vertical-align: middle
 
     &.state-focus > label
         border-bottom-color: $-melon-colors.blue500

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "melon-calendar",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React Calendar Component",
   "main": "lib/Calendar.js",
   "directories": {

diff --git a/src/Calendar.js b/src/Calendar.js
@@ -262,7 +262,7 @@ export default class Calendar extends InputComponent {
             .build();
 
         return (
-            <div {...omit(others, ['dateFormat', 'name', 'autoConfirm'])} className={className}>
+            <div {...omit(others, ['dateFormat', 'name', 'autoConfirm', 'variants'])} className={className}>
                 {this.renderHiddenInput()}
                 <label onClick={(disabled || readOnly) ? null : this.onLabelClick}>
                     {value ? value : (

diff --git a/src/RangeCalendar.js b/src/RangeCalendar.js
@@ -305,7 +305,7 @@ export default class RangeCalendar extends InputComponent {
 
         return (
             <div
-                {...omit(others, ['dateFormat', 'name', 'autoConfirm'])}
+                {...omit(others, ['dateFormat', 'name', 'autoConfirm', 'variants'])}
                 className={className}>
                 {this.renderHiddenInput()}
                 <label onClick={(disabled || readOnly) ? null : this.onLabelClick}>

diff --git a/src/index.styl b/src/index.styl
@@ -33,7 +33,9 @@ for level, value in $-melon-calendar-sizes
     font-size: $-melon-medium-font-size
     display: inline-block
     position: relative
-    margin-right: 1.2em
+
+    border-bottom: 1px solid $-melon-colors.grey300
+    transition: border-color 1s
 
     &-label-placeholder
         color: $-melon-colors.grey500
@@ -42,17 +44,21 @@ for level, value in $-melon-calendar-sizes
         display inline-block
         font-size: 1em
         width: 100%
-        line-height: 1.5em
-        border-bottom: 1px solid $-melon-colors.grey300
-        transition: border-color 1s
         cursor: pointer
+        text-align: left
+        line-height: 1.5em
+        padding: 0.5em 0
+        padding-right: 1.5em
+        box-sizing: border-box
 
         > .{$-melon-class-prefix}-icon
+            position: absolute
+            right: 0
+            top: 0.5em
             display: inline-block
             font-size: 1.2em
             width: @font-size
-            vertical-align middle
-            margin-right: -@width
+            vertical-align: middle
 
     &.state-focus > label
         border-bottom-color: $-melon-colors.blue500