Browse Source

feat: 更新ActionSheet组件

songchenglin3 5 years ago
parent
commit
08f9612ae0
2 changed files with 28 additions and 17 deletions
  1. 17 17
      src/packages/actionsheet/actionsheet.scss
  2. 11 0
      src/styles/variable.scss

+ 17 - 17
src/packages/actionsheet/actionsheet.scss

@@ -2,18 +2,18 @@
 	padding: 13px 30px 13px;
 	padding: 13px 30px 13px;
 	margin: 0;
 	margin: 0;
 	text-align: center;
 	text-align: center;
-	background-color: #fff;
-	border-bottom: 1px solid rgba(230,230,230,1);
+	background-color: $as-base-bg-color;
+	border-bottom: 1px solid $as-border-color;
 	line-height: 22px;
 	line-height: 22px;
 	.nut-actionsheet-title {
 	.nut-actionsheet-title {
-		font-size: 15px;
+		font-size: $as-base-font-size;
 		font-weight: bold;
 		font-weight: bold;
-		color: #323232;
+		color: $as-base-color;
 	}
 	}
 
 
 	.nut-actionsheet-sub-title {
 	.nut-actionsheet-sub-title {
-		font-size: 14px;
-		color: #969696;
+		font-size: $as-desc-font-size;
+		color: $as-desc-color;
 		margin-inline-start: 0;
 		margin-inline-start: 0;
 		div{
 		div{
 			overflow: hidden;
 			overflow: hidden;
@@ -34,14 +34,14 @@
 	height: 28px;
 	height: 28px;
 	padding: 10px;
 	padding: 10px;
 	line-height: 28px;
 	line-height: 28px;
-	font-size: 15px;
-	color: #323232;
+	font-size: $as-base-font-size;
+	color: $as-base-color;
 	text-align: center;
 	text-align: center;
-	background-color: #fff;
+	background-color: $as-base-bg-color;
 }
 }
 
 
 .nut-actionsheet-item {
 .nut-actionsheet-item {
-	border-top: 1px solid rgba(230,230,230,1);
+	border-top: 1px solid $as-border-color;
 	&:first-child{
 	&:first-child{
 		border-top: 0;
 		border-top: 0;
 	}
 	}
@@ -52,24 +52,24 @@
 }
 }
 
 
 .nut-actionsheet-item-disabled {
 .nut-actionsheet-item-disabled {
-	color: #C8C8C8;
+	color: $as-disable-color;
 }
 }
 
 
 .nut-actionsheet-cancel {
 .nut-actionsheet-cancel {
-	border-top: 1px solid rgba(230,230,230,1);
-	color: #C8C8C8;
+	border-top: 1px solid $as-border-color;
+	color: $as-disable-color;
 }
 }
 
 
 .nut-actionsheet-confirm {
 .nut-actionsheet-confirm {
 	padding: 12px 15px;
 	padding: 12px 15px;
-	border-top: 1px solid rgba(230,230,230,1);
-	color: #FFF;
+	border-top: 1px solid $as-border-color;
+	color: $as-confirm-btn-color;
 	.confirm-btn{
 	.confirm-btn{
 		width: 100%;
 		width: 100%;
 		height: 40px;
 		height: 40px;
-		background: rgba(225,37,27,1);
+		background: $as-confirm-btn-bg;
 		border-radius: 4px;
 		border-radius: 4px;
-		font-size: 15px;
+		font-size: $as-base-font-size;
 		line-height: 40px;
 		line-height: 40px;
 		text-align: center;
 		text-align: center;
 	}
 	}

+ 11 - 0
src/styles/variable.scss

@@ -134,3 +134,14 @@ $tag-border-radius-circle: 10px !default;
 // ---- Badge ----
 // ---- Badge ----
 $badge-font-size: 11px !default;
 $badge-font-size: 11px !default;
 $badge-font-color: #fff !default;
 $badge-font-color: #fff !default;
+
+// ---- ActionSheet ----
+$as-border-color: rgba(230,230,230,1) !default;
+$as-disable-color: $text-black-4 !default;
+$as-base-color: $text-black-1 !default;
+$as-desc-color: $text-black-3 !default;
+$as-confirm-btn-bg: $primary-color-jd-red;
+$as-confirm-btn-color: #fff !default;
+$as-base-bg-color: #fff !default;
+$as-base-font-size: 15px !default;
+$as-desc-font-size: 14px !default;