Browse Source

upd: switch && sidenavbar

suzigang 5 years ago
parent
commit
c8de257cdf

+ 3 - 2
src/packages/sidenavbaritem/sidenavbaritem.scss

@@ -1,8 +1,9 @@
 .nut-sidenavbaritem {
-	height: 48px;
-	line-height: 48px;
+    padding: 12px 0;
 
 	.item-title {
+        height: 24px;
+        line-height: 24px;
 		color: $text-black-2;
 		background-color: #fff;
 		text-decoration: none;

+ 9 - 7
src/packages/subsidenavbar/subsidenavbar.scss

@@ -7,8 +7,8 @@
 	.item-title {
 		display: flex;
 		width: 100%;
-		height: 48px;
-		position: relative;
+        position: relative;
+        padding: 12px 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -26,20 +26,22 @@
 		.sidenavbar-title {
 			display: flex;
 			width: 80%;
-			height: 100%;
 			flex-flow: column;
 			color: $text-black-2;
 			text-decoration: none;
-			justify-content: center;
+            justify-content: center;
+            .sidenavbar-title-title{
+                height: 24px;
+                line-height: 24px;
+            }
 		}
 	}
 
 	.sidenavbar-icon {
-		position: absolute;
+        position: absolute;
 		top: 50%;
-		right: 20px;
+        right: 20px;
 		transform: translateY(-50%);
-
 		i {
 			transition: transform $animation-duration $ease-in-out;
 

+ 2 - 2
src/packages/subsidenavbar/subsidenavbar.vue

@@ -3,12 +3,12 @@
     <div class="item-title" @click.stop="handleClick">
       <span v-if="$slots.icon" class="subsidenavbar-icon"><slot name="icon"></slot></span>
       <a href="javascript:;" class="sidenavbar-title">
-        {{ title }}
+        <span class="sidenavbar-title-title">{{ title }}</span>
         <slot name="desc"></slot>
       </a>
       <span class="sidenavbar-icon">
           <span v-if="$slots.oper"><slot name="oper"></slot></span>
-          <nut-icon v-if="!$slots.oper" type="self" :url="require('../../assets/svg/arrow-to-right.svg')"></nut-icon>
+          <nut-icon v-if="!$slots.oper" type="self" :url="require('../../assets/svg/arrow-to-right.svg')" size="16px"></nut-icon>
       </span>
     </div>
     <div class="sub-sidenavbar-list" :class="!direction ? 'nutFadeIn' : 'nutFadeOut'" :style="{ height: !direction ? 'auto' : 0 }">

+ 4 - 4
src/packages/switch/demo.vue

@@ -8,11 +8,11 @@
         </nut-cell>
         <nut-cell>
             <div slot="title">开启禁用</div>
-            <span slot="desc"><nut-switch :disabled="true"></nut-switch></span>
+            <span slot="desc"><nut-switch :active="true" :disabled="true"></nut-switch></span>
         </nut-cell>
         <nut-cell>
             <div slot="title">关闭禁用</div>
-            <span slot="desc"><nut-switch @change="onChange" :active="true" :disabled="true"></nut-switch></span>
+            <span slot="desc"><nut-switch :disabled="true"></nut-switch></span>
         </nut-cell>
     </div>
 
@@ -24,11 +24,11 @@
         </nut-cell>
         <nut-cell>
             <div slot="title">开启禁用</div>
-            <span slot="desc"><nut-switch :disabled="true" size="small"></nut-switch></span>
+            <span slot="desc"><nut-switch :active="true" :disabled="true" size="small"></nut-switch></span>
         </nut-cell>
         <nut-cell>
             <div slot="title">关闭禁用</div>
-            <span slot="desc"><nut-switch @change="onChange" :active="true" :disabled="true" size="small"></nut-switch></span>
+            <span slot="desc"><nut-switch :disabled="true" size="small"></nut-switch></span>
         </nut-cell>
     </div>
 

+ 2 - 2
src/packages/switch/switch.scss

@@ -7,7 +7,6 @@
 	box-sizing: content-box;
 	border: 0;
 	transition: all $transition-duration $animation-timing-fun;
-
 	.nut-switch-btn {
 		position: absolute;
 		left: 0;
@@ -15,7 +14,8 @@
 		border: 0;
 		border-radius: 50%;
 		box-sizing: border-box;
-		transition: all $transition-duration $animation-timing-fun;
+        transition: all $transition-duration $animation-timing-fun;
+        box-shadow: 0px 1px 6px 0px rgba(0,0,0,.1);
 	}
 
 	&.nut-switch-active {