针对rem时的样式调整

ZhongAnTech · Aug 22, 2017 · 970772f · 970772f
1 parent a549c80
commit 970772f
Show file tree

Hide file tree

Showing 18 changed files with 65 additions and 29 deletions.
diff --git a/components/Modal/ModalFooter.jsx b/components/Modal/ModalFooter.jsx
@@ -9,6 +9,7 @@ class ModalFooter extends PureComponent {
     const cls = classnames({
       [`${prefixCls}`]: true,
       [className]: !!className,
+      // block: true,
     });
 
     return (

diff --git a/components/Swipe/Swipe.jsx b/components/Swipe/Swipe.jsx
@@ -308,11 +308,9 @@ class Swipe extends Component {
 
     if (!this.isDirectionX()) {
       style.items.height = height;
-      style.pagination.marginTop = 3;
     } else {
       style.items.whiteSpace = 'nowrap';
       style.pagination.display = 'inline-block';
-      style.pagination.marginRight = 3;
     }
 
     return (

diff --git a/examples/components/Container.jsx b/examples/components/Container.jsx
@@ -15,7 +15,7 @@ class Container extends Component {
     return (
       <div className={cls} style={{ minHeight: window.innerHeight }}>
         <a className="github" href="https://github.com/ZhonganTechENG/zarm">
-          <svg aria-hidden="true" height="32" version="1.1" viewBox="0 0 16 16" width="32">
+          <svg aria-hidden="true" version="1.1" viewBox="0 0 16 16">
             <path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
           </svg>
         </a>

diff --git a/examples/pages/CellPage.jsx b/examples/pages/CellPage.jsx
@@ -3,6 +3,7 @@ import Container from '../components/Container';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
 import { Panel, Icon, Cell, Message, Input } from '../../components';
+import '../styles/pages/CellPage';
 
 const img = require('../images/icons/state.png');
 
@@ -72,9 +73,9 @@ class Page extends Component {
               <Cell
                 hasArrow
                 title={
-                  <div>
-                    <div>标题文字</div>
-                    <div style={{ fontSize: 12, color: 'gray' }}>描述文字</div>
+                  <div className="box">
+                    <div className="box-title">标题文字</div>
+                    <div className="box-description">描述文字</div>
                   </div>
                 }
                 description="附加提示"

diff --git a/examples/pages/IconPage.jsx b/examples/pages/IconPage.jsx
@@ -34,7 +34,7 @@ class Page extends Component {
                   ICONS.sort().map((icon, i) => {
                     return (
                       <div className="grid-column" key={+i}>
-                        <Icon theme="primary" type={icon} />
+                        <Icon className="icon" theme="primary" type={icon} />
                         <span className="icon-name">{icon}</span>
                       </div>
                     );

diff --git a/examples/pages/MessagePage.jsx b/examples/pages/MessagePage.jsx
@@ -26,11 +26,11 @@ class Page extends Component {
           </Panel>
           <Panel>
             <Panel.Header>
-              <Panel.Title>模式</Panel.Title>
+              <Panel.Title>可操作</Panel.Title>
             </Panel.Header>
             <Panel.Body>
-              <Message theme="warning" mode="link">链接模式</Message>
-              <Message theme="error" mode="closable">可关闭模式</Message>
+              <Message hasArrow theme="warning" onClick={() => alert('click this message!')}>链接样式的</Message>
+              <Message hasClosable theme="error">可关闭的</Message>
             </Panel.Body>
           </Panel>
         </main>

diff --git a/examples/pages/ToastPage.jsx b/examples/pages/ToastPage.jsx
@@ -3,6 +3,7 @@ import Container from '../components/Container';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
 import { Panel, Cell, Toast, Loading, Button, Icon } from '../../components';
+import '../styles/pages/ToastPage';
 
 class ToastPage extends Component {
 
@@ -56,9 +57,9 @@ class ToastPage extends Component {
                       toast.visible = true;
                       toast.duration = 3000;
                       toast.children = (
-                        <div>
-                          <Icon type="right-round-fill" style={{ fontSize: '3rem' }} />
-                          <div style={{ marginBottom: 5 }}>预约成功</div>
+                        <div className="box">
+                          <Icon className="box-icon" type="right-round-fill" />
+                          <div className="box-text">预约成功</div>
                         </div>
                       );
                       this.setState({ toast });

diff --git a/examples/styles/components/Container.scss b/examples/styles/components/Container.scss
@@ -8,6 +8,8 @@
     position: absolute;
     right: r(10);
     top: r(10);
+    width: r(32);
+    height: r(32);
   }
 }
 
diff --git a/examples/styles/pages/CellPage.scss b/examples/styles/pages/CellPage.scss
@@ -0,0 +1,10 @@
+@import "../core/func";
+
+.cell-page {
+  .box {
+    &-description {
+      font-size: r(12);
+      color: gray;
+    }
+  }
+}
diff --git a/examples/styles/pages/IconPage.scss b/examples/styles/pages/IconPage.scss
@@ -2,14 +2,14 @@
 @import "../core/func";
 
 .icon-page {
-  .icon-name {
-    font-size: r(13);
-  }
-
-  .za-icon {
+  .icon {
     display: block;
-    font-size: 45px;
     margin-bottom: r(15);
+    font-size: r(45);
+
+    &-name {
+      font-size: r(13);
+    }
   }
 
   .grid {

diff --git a/examples/styles/pages/PopupPage.scss b/examples/styles/pages/PopupPage.scss
@@ -20,6 +20,7 @@
     padding: r(10);
     background: rgba(0, 0, 0, .7);
     color: #fff;
+    font-size: r(14);
     text-align: center;
   }
 }
diff --git a/examples/styles/pages/ToastPage.scss b/examples/styles/pages/ToastPage.scss
@@ -0,0 +1,13 @@
+@import "../core/func";
+
+.toast-page {
+  .box {
+    &-icon {
+      font-size: r(50);
+    }
+
+    &-text {
+      margin-bottom: r(5);
+    }
+  }
+}
diff --git a/styles/components/ActionSheet.scss b/styles/components/ActionSheet.scss
@@ -5,6 +5,7 @@ $prefixCls: za-actionsheet;
   &:hover,
   &:focus,
   &:visited {
+    text-decoration: none;
     color: $color;
   }
 }

diff --git a/styles/components/Modal.scss b/styles/components/Modal.scss
@@ -74,11 +74,7 @@ $prefixCls: za-modal;
     display: flex;
     width: 100%;
 
-    &.block {
-      display: block;
-    }
-
-    .za-button {
+    a {
       flex: 1;
       height: r(50);
       line-height: r(50);
@@ -97,5 +93,15 @@ $prefixCls: za-modal;
         @include onepx(left top);
       }
     }
+
+    &.block {
+      display: block;
+
+      a {
+        &:not(:first-of-type) {
+          @include onepx(top);
+        }
+      }
+    }
   }
 }
diff --git a/styles/components/Picker.scss b/styles/components/Picker.scss
@@ -224,7 +224,7 @@ $picker-stackitem-height: r(35);
       position: relative;
       padding: 0 r(10);
       line-height: $picker-stackitem-height;
-      font-size: r(14);
+      font-size: r(16);
       color: #333;
       transition: padding-left .4s;
       white-space: nowrap;

diff --git a/styles/components/Swipe.scss b/styles/components/Swipe.scss
@@ -3,13 +3,12 @@ $prefixCls: za-swipe;
 .#{$prefixCls} {
   position: relative;
   overflow: hidden;
-  font-size: 0;
 
   &-item {
     display: inline-block;
     width: 100%;
     height: 100%;
-    font-size: r(16);
+    font-size: r(14);
   }
 
   &-pagination {
@@ -21,13 +20,15 @@ $prefixCls: za-swipe;
       list-style: none;
       margin: 0;
       padding: 0;
+      font-size: 0;
 
       li {
         width: r(8);
         height: r(8);
         border-radius: r(4);
         background: #ccc;
         cursor: pointer;
+        margin: r(3) 0 0 r(3);
 
         &.active {
           background: $theme-primary;

diff --git a/styles/components/Switch.scss b/styles/components/Switch.scss
@@ -16,7 +16,7 @@ $prefixCls: za-switch;
     position: relative;
     width: r(51);
     height: r(31);
-    border: 1px solid #e5e5e5;
+    border: r(1) solid #e5e5e5;
     border-radius: r(15.5);
     background-color: #e5e5e5;
     vertical-align: middle;
@@ -43,7 +43,7 @@ $prefixCls: za-switch;
     &:after {
       width: r(29);
       background-color: #fff;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+      box-shadow: 0 r(1) r(3) rgba(0, 0, 0, 0.4);
       transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
     }
 

diff --git a/styles/components/Tab.scss b/styles/components/Tab.scss
@@ -116,6 +116,7 @@ $prefixCls: za-tab;
 
     &-item {
       display: none;
+      font-size: r(14);
 
       &.active {
         display: block;