bkui-vue 1.0.3-beta.24 → 1.0.3-beta.26

package/lib/upload/upload.less

@@ -13,9 +13,9 @@
   width: 100%;
   height: 100%;
   color: #fff;
-  background: rgba(0, 0, 0, .45);
+  background: rgba(0, 0, 0, 0.45);
   opacity: 0;
-  transition: opacity .35s;
+  transition: opacity 0.35s;
   align-items: center;
   justify-content: center;
 
@@ -34,19 +34,19 @@
   position: absolute;
 }
 
-.@{bk-prefix}-upload {
-  &__tip {
+:where(.@{bk-prefix}-upload) {
+  .@{bk-prefix}-upload__tip {
     font-size: 12px;
     color: @default-color;
   }
 
-  &--disabled {
+  .@{bk-prefix}-upload--disabled {
     .@{bk-prefix}-upload__tip {
       color: @light-gray;
     }
   }
 
-  &--button {
+  .@{bk-prefix}-upload--button {
     .@{bk-prefix}-upload-trigger {
       display: inline-flex;
     }
@@ -56,7 +56,7 @@
     }
   }
 
-  &--picture {
+  .@{bk-prefix}-upload--picture {
     display: flex;
     flex-wrap: wrap;
 
@@ -66,27 +66,27 @@
     }
   }
 
-  &--single-picture {
+  .@{bk-prefix}-upload--single-picture {
     .@{bk-prefix}-upload__tip {
       margin-top: 8px;
     }
   }
 
-  &--draggable {
+  .@{bk-prefix}-upload--draggable {
     .@{bk-prefix}-upload__tip {
       margin-top: 8px;
     }
   }
 }
 
-.@{bk-prefix}-upload-trigger {
+:where(.@{bk-prefix}-upload-trigger) {
   color: @default-color;
 
-  &__input-file {
+  .@{bk-prefix}-upload-trigger__input-file {
     display: none;
   }
 
-  &__picture-inner {
+  .@{bk-prefix}-upload-trigger__picture-inner {
     display: flex;
     width: 100%;
     height: 100%;
@@ -95,42 +95,42 @@
     flex-direction: column;
   }
 
-  &__picture-icon {
+  .@{bk-prefix}-upload-trigger__picture-icon {
     font-size: 24px;
     font-weight: bold;
     color: @gray-color;
   }
 
-  &__picture-text {
+  .@{bk-prefix}-upload-trigger__picture-text {
     font-size: 12px;
   }
 
   // 单图片/头像模式
-  &__picture-thumbnail {
-    .picture-item-thumbnail(88px)
+  .@{bk-prefix}-upload-trigger__picture-thumbnail {
+    .picture-item-thumbnail(88px);
   }
 
-  &__picture-actions {
-    .picture-item-actions()
+  .@{bk-prefix}-upload-trigger__picture-actions {
+    .picture-item-actions();
   }
 
-  &__picture-progress {
-    .picture-item-progress()
+  .@{bk-prefix}-upload-trigger__picture-progress {
+    .picture-item-progress();
   }
 
-  &--button {
+  .@{bk-prefix}-upload-trigger--button {
     font-size: 12px;
   }
 
-  &__button-icon {
+  .@{bk-prefix}-upload-trigger__button-icon {
     font-size: 18px;
   }
 
-  &__button-text {
+  .@{bk-prefix}-upload-trigger__button-text {
     font-size: 12px;
   }
 
-  &--draggable {
+  .@{bk-prefix}-upload-trigger--draggable {
     height: 80px;
     cursor: pointer;
     background-color: @whitesmoke-color;
@@ -138,11 +138,11 @@
     border-radius: @border-radius-base;
   }
 
-  &--dragover {
+  .@{bk-prefix}-upload-trigger--dragover {
     border-color: @primary-color;
   }
 
-  &__draggable {
+  .@{bk-prefix}-upload-trigger__draggable {
     display: flex;
     width: 100%;
     height: 100%;
@@ -151,21 +151,21 @@
     flex-direction: column;
   }
 
-  &__draggable-icon {
+  .@{bk-prefix}-upload-trigger__draggable-icon {
     font-size: 24px;
     font-weight: bold;
     color: @gray-color;
   }
 
-  &__draggable-text {
+  .@{bk-prefix}-upload-trigger__draggable-text {
     font-size: 12px;
   }
 
-  &__draggable-upload-link {
+  .@{bk-prefix}-upload-trigger__draggable-upload-link {
     color: @primary-color;
   }
 
-  &--picture {
+  .@{bk-prefix}-upload-trigger--picture {
     position: relative;
     display: inline-flex;
     width: 96px;
@@ -180,24 +180,24 @@
     justify-content: center;
   }
 
-  &--single-picture {
+  .@{bk-prefix}-upload-trigger--single-picture {
     &.@{bk-prefix}-upload-trigger {
       &--uploading {
-        background: rgba(0, 0, 0, .65);
+        background: rgba(0, 0, 0, 0.65);
       }
     }
   }
 
-  &--has-file {
+  .@{bk-prefix}-upload-trigger--has-file {
     border-style: solid;
   }
 
-  &--fail {
-    background: rgba(254, 221, 220, .40);
+  .@{bk-prefix}-upload-trigger--fail {
+    background: rgba(254, 221, 220, 0.4);
     border-color: #ff5656;
   }
 
-  &--disabled {
+  .@{bk-prefix}-upload-trigger--disabled {
     &.@{bk-prefix}-upload-trigger {
       color: @light-gray;
 
@@ -233,7 +233,7 @@
     }
   }
 
-  &--single-picture {
+  .@{bk-prefix}-upload-trigger--single-picture {
     &.@{bk-prefix}-upload-trigger--fail {
       &.@{bk-prefix}-upload-trigger--has-file {
         &:hover {
@@ -247,13 +247,12 @@
       }
     }
   }
-
 }
 
-.@{bk-prefix}-upload-list {
+:where(.@{bk-prefix}-upload-list) {
   @thumbnail-size: 32px;
 
-  &__item {
+  .@{bk-prefix}-upload-list__item {
     display: flex;
     max-height: 60px;
     padding: 10px;
@@ -261,7 +260,7 @@
     background: #fff;
     border: 1px solid @light-gray;
     border-radius: 2px;
-    transition: all .125s cubic-bezier(.55, 0, .1, 1);
+    transition: all 0.125s cubic-bezier(0.55, 0, 0.1, 1);
 
     &:hover {
       border-color: @gray-color;
@@ -278,7 +277,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition: all .625s;
+      transition: all 0.625s;
     }
 
     &-enter-from,
@@ -288,34 +287,34 @@
     }
   }
 
-  &__item-icon {
+  .@{bk-prefix}-upload-list__item-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: @gray-color;
   }
 
-  &__item-thumbnail {
+  .@{bk-prefix}-upload-list__item-thumbnail {
     width: @thumbnail-size;
     height: @thumbnail-size;
     object-fit: contain;
   }
 
-  &__item-file-icon {
+  .@{bk-prefix}-upload-list__item-file-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: @thumbnail-size;
   }
 
-  &__item-summary {
+  .@{bk-prefix}-upload-list__item-summary {
     flex: 1;
     position: relative;
     padding: 2px 2px 2px 10px;
     overflow: hidden;
   }
 
-  &__item-name {
+  .@{bk-prefix}-upload-list__item-name {
     font-size: 12px;
     color: @default-color;
     text-align: left;
@@ -323,7 +322,7 @@
     .ellipsis-style(85%, block);
   }
 
-  &__item-speed {
+  .@{bk-prefix}-upload-list__item-speed {
     position: absolute;
     top: 0;
     right: 0;
@@ -332,20 +331,20 @@
     color: @default-color;
   }
 
-  &__item-speed-rate {
+  .@{bk-prefix}-upload-list__item-speed-rate {
     margin-left: 4px;
   }
 
-  &__item-speed-percentage {
+  .@{bk-prefix}-upload-list__item-speed-percentage {
     margin-left: 16px;
   }
 
-  &__item-message {
+  .@{bk-prefix}-upload-list__item-message {
     .ellipsis-style(85%, flex);
     align-items: center;
   }
 
-  &__item-actions {
+  .@{bk-prefix}-upload-list__item-actions {
     position: absolute;
     top: 50%;
     right: 0;
@@ -354,25 +353,25 @@
     transform: translateY(-50%);
   }
 
-  &__item-del-icon {
+  .@{bk-prefix}-upload-list__item-del-icon {
     font-size: 14px;
     color: @gray-color;
     cursor: pointer;
   }
 
-  &__item-retry-icon {
+  .@{bk-prefix}-upload-list__item-retry-icon {
     margin-right: 12px;
     font-size: 14px;
     color: @gray-color;
     cursor: pointer;
   }
 
-  &__item-progress {
+  .@{bk-prefix}-upload-list__item-progress {
     margin-top: 8px;
     font-size: 12px;
   }
 
-  &__item--success {
+  .@{bk-prefix}-upload-list__item--success {
     .@{bk-prefix}-upload-list {
       &__item-speed {
         top: 50%;
@@ -398,8 +397,8 @@
     }
   }
 
-  &__item--fail {
-    background: rgba(254, 221, 220, .40);
+  .@{bk-prefix}-upload-list__item--fail {
+    background: rgba(254, 221, 220, 0.4);
     border-color: #ff5656;
     .@{bk-prefix}-upload-list {
       &__item-message {
@@ -417,7 +416,7 @@
   }
 
   // 图片列表模式
-  &__item-picture {
+  .@{bk-prefix}-upload-list__item-picture {
     position: relative;
     display: flex;
     width: 96px;
@@ -433,34 +432,34 @@
     &.@{bk-prefix}-upload-list {
       &__item {
         &--uploading {
-          background: rgba(0, 0, 0, .65);
+          background: rgba(0, 0, 0, 0.65);
         }
       }
     }
   }
 
-  &__picture-item-thumbnail {
-    .picture-item-thumbnail(88px)
+  .@{bk-prefix}-upload-list__picture-item-thumbnail {
+    .picture-item-thumbnail(88px);
   }
 
-  &__picture-item-actions {
-    .picture-item-actions()
+  .@{bk-prefix}-upload-list__picture-item-actions {
+    .picture-item-actions();
   }
 
-  &__picture-item-progress {
-    .picture-item-progress()
+  .@{bk-prefix}-upload-list__picture-item-progress {
+    .picture-item-progress();
   }
 
-  &--picture {
+  .@{bk-prefix}-upload-list--picture {
     display: flex;
     flex-wrap: wrap;
   }
 
-  &--disabled {
+  .@{bk-prefix}-upload-list--disabled {
     .@{bk-prefix}-upload-list {
       &__item {
         pointer-events: none;
       }
     }
   }
-}
+}