plain-design 1.0.0-beta.71 → 1.0.0-beta.73

package/src/packages/components/StepGroup/step-group.scss

@@ -1,411 +1,411 @@
-@include prefix(step-group) {
-  .#{componentName(step)} {
-    .step-title {
-      font-size: plv(font-size-normal);
-      color: plv(text-1);
-    }
-
-    .step-content {
-      font-size: plv(font-size-small);
-    }
-
-    .step-dot {
-      width: 12px;
-      height: 12px;
-      border-radius: 12px;
-      display: inline-block;
-    }
-  }
-
-  &:not(.step-group-dot-icon ) {
-    .step-icon {
-      width: 32px;
-      height: 32px;
-      font-size: plv(font-size-normal);
-      line-height: 32px;
-      text-align: center;
-      border-radius: 32px;
-      border: solid 1px plv(secondary-light-4);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0 8px;
-
-      .#{componentName(icon)}, .#{componentName(loading)} {
-        font-size: 1em;
-      }
-
-      .step-number {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-
-        .#{componentName(icon)} {
-          font-size: 1em;
-        }
-      }
-    }
-  }
-
-  &.step-group-horizontal {
-    display: flex;
-    align-items: flex-start;
-
-    .#{componentName(step)} {
-      flex: 1;
-
-      .step-divider {
-        flex: 1;
-        height: 1px;
-        background-color: plv(secondary-light-4);
-        transform: scaleY(0.5);
-      }
-
-      .step-head, .step-body {
-        display: flex;
-      }
-
-      .step-head {
-        align-items: center;
-        margin-bottom: 8px;
-
-        .step-title {
-          margin-right: 8px;
-        }
-
-        .step-dot {
-          margin-right: 8px;
-        }
-      }
-
-      .step-body {
-        align-items: flex-start;
-
-        .step-icon {
-          border: none;
-        }
-
-        .step-title {
-          margin-bottom: 8px;
-        }
-      }
-
-      &.step-last {
-        flex: initial;
-      }
-    }
-
-    &.step-group-title-align-bottom {
-      .#{componentName(step)} {
-        &:first-child {
-          .step-head {
-            .step-divider:first-child {
-              background-color: transparent !important;
-            }
-          }
-        }
-
-        &:last-child {
-          flex: 1;
-
-          .step-head {
-            .step-divider:last-child {
-              background-color: transparent !important;
-            }
-          }
-        }
-      }
-
-      .step-body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-
-  &.step-group-vertical {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: revert;
-
-    .#{componentName(step)} {
-      display: flex;
-
-      .step-head {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .step-divider {
-          flex: 1;
-          width: 1px;
-          background-color: plv(secondary-light-4);
-          transform: scaleX(0.5);
-        }
-      }
-
-      .step-body {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-
-        .step-title {
-          line-height: 32px;
-        }
-
-        .step-content {
-          padding: 8px 0;
-        }
-      }
-
-      &:last-child {
-        .step-head .step-divider {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .#{componentName(step)} {
-    &.step-has-icon {
-      .step-head {
-        .step-icon {
-          border: none;
-          position: relative;
-          top: 1px;
-        }
-      }
-    }
-
-    &.step-status-wait {
-      .step-title {
-        color: plv(text-1);
-      }
-
-      .step-content {
-        color: plv(text-2);
-      }
-
-      .step-dot {
-        border: solid 1px plv(text-3);
-        background-color: white;
-      }
-    }
-
-    &.step-status-finish {
-      .step-head {
-        .step-icon {
-          border-color: plv(primary-6);
-          background-color: plv(primary-6);
-          color: plv(pbfc);
-        }
-
-        .step-dot {
-          background-color: plv(primary-6);
-        }
-
-        .step-divider.step-divider-next {
-          background-color: plv(primary-6);
-        }
-      }
-
-      & + .#{componentName(step)} {
-        .step-head {
-          .step-divider-prev {
-            background-color: plv(primary-6);
-          }
-        }
-      }
-    }
-
-    &.step-status-process {
-
-      .step-head {
-        .step-icon {
-          border-color: plv(primary-6);
-          background-color: plv(primary-6);
-          color: plv(pbfc);
-        }
-
-        .step-title {
-          color: plv(primary-6);
-        }
-
-        .step-dot {
-          border: solid 4px plv(primary-6);
-          box-sizing: border-box;
-          background-color: white;
-        }
-      }
-
-      .step-body {
-        .step-content {
-          color: plv(primary-6);
-        }
-
-        .step-title {
-          color: plv(primary-6);
-        }
-      }
-
-      &.step-has-icon {
-        .step-icon {
-          border-color: transparent;
-          background-color: transparent;
-          color: plv(primary-6);
-        }
-      }
-    }
-
-    &.step-status-error {
-
-      .step-head {
-        .step-icon {
-          border-color: plv(error-6);
-          background-color: plv(error-6);
-          color: plv(pbfc);
-        }
-
-        .step-title {
-          color: plv(error-6);
-        }
-
-        .step-dot {
-          background-color: plv(error-6);
-        }
-      }
-
-      .step-body {
-        .step-content {
-          color: plv(error-6);
-        }
-
-        .step-title {
-          color: plv(error-6);
-        }
-      }
-
-      &.step-has-icon {
-        .step-icon {
-          border-color: transparent;
-          background-color: transparent;
-          color: plv(error-6);
-        }
-      }
-    }
-  }
-
-  &.step-group-mini {
-
-    &:not(.step-group-dot-icon) {
-      .step-icon {
-        width: 20px;
-        height: 20px;
-        font-size: plv(font-size-small);
-        line-height: 20px;
-        text-align: center;
-        border-radius: 20px;
-        border: solid 1px plv(secondary-light-4);
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        color: plv(text-3);
-        margin: 0 8px;
-
-        .icon, .loading {
-          font-size: 1em;
-        }
-
-        .step-number {
-          .icon {
-            font-size: 1em;
-          }
-        }
-      }
-    }
-
-    .step-title {
-      font-size: plv(font-size-normal);
-    }
-
-    .step-content {
-      font-size: plv(font-size-small);
-    }
-
-    &.step-group-vertical {
-      .#{componentName(step)} {
-        .step-body {
-          .step-title {
-            line-height: 20px;
-          }
-        }
-      }
-    }
-  }
-
-  &.step-group-dot-icon {
-    .#{componentName(step)} {
-      .step-head {
-        .step-icon {
-          background-color: transparent;
-        }
-      }
-    }
-
-    &.step-group-horizontal:not(.step-group-vertical) {
-      .#{componentName(step)} {
-        .step-content {
-          padding-left: 20px;
-        }
-      }
-    }
-
-    &.step-group-title-align-bottom {
-      .#{componentName(step)} .step-head .step-dot {
-        margin-right: 0;
-      }
-    }
-
-    &.step-group-vertical {
-      .step-head {
-        margin-right: 8px;
-        position: relative;
-
-        .step-divider {
-          position: absolute;
-          left: 5px;
-          top: 22px;
-          bottom: -10px;
-        }
-      }
-
-      .step-icon {
-        margin-top: 10px;
-        height: 12px;
-        display: inline-block;
-
-        .step-dot {
-          float: left;
-        }
-      }
-
-      &.step-group-mini {
-        .step-icon {
-          margin-top: 5px;
-        }
-
-        .step-head {
-          .step-divider {
-            position: absolute;
-            left: 5px;
-            top: 16px;
-            bottom: -5px;
-          }
-        }
-      }
-    }
-  }
-}
+@include prefix(step-group) {
+  .#{componentName(step)} {
+    .step-title {
+      font-size: plv(font-size-normal);
+      color: plv(text-1);
+    }
+
+    .step-content {
+      font-size: plv(font-size-small);
+    }
+
+    .step-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 12px;
+      display: inline-block;
+    }
+  }
+
+  &:not(.step-group-dot-icon ) {
+    .step-icon {
+      width: 32px;
+      height: 32px;
+      font-size: plv(font-size-normal);
+      line-height: 32px;
+      text-align: center;
+      border-radius: 32px;
+      border: solid 1px plv(secondary-light-4);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 8px;
+
+      .#{componentName(icon)}, .#{componentName(loading)} {
+        font-size: 1em;
+      }
+
+      .step-number {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+
+        .#{componentName(icon)} {
+          font-size: 1em;
+        }
+      }
+    }
+  }
+
+  &.step-group-horizontal {
+    display: flex;
+    align-items: flex-start;
+
+    .#{componentName(step)} {
+      flex: 1;
+
+      .step-divider {
+        flex: 1;
+        height: 1px;
+        background-color: plv(secondary-light-4);
+        transform: scaleY(0.5);
+      }
+
+      .step-head, .step-body {
+        display: flex;
+      }
+
+      .step-head {
+        align-items: center;
+        margin-bottom: 8px;
+
+        .step-title {
+          margin-right: 8px;
+        }
+
+        .step-dot {
+          margin-right: 8px;
+        }
+      }
+
+      .step-body {
+        align-items: flex-start;
+
+        .step-icon {
+          border: none;
+        }
+
+        .step-title {
+          margin-bottom: 8px;
+        }
+      }
+
+      &.step-last {
+        flex: initial;
+      }
+    }
+
+    &.step-group-title-align-bottom {
+      .#{componentName(step)} {
+        &:first-child {
+          .step-head {
+            .step-divider:first-child {
+              background-color: transparent !important;
+            }
+          }
+        }
+
+        &:last-child {
+          flex: 1;
+
+          .step-head {
+            .step-divider:last-child {
+              background-color: transparent !important;
+            }
+          }
+        }
+      }
+
+      .step-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  &.step-group-vertical {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: revert;
+
+    .#{componentName(step)} {
+      display: flex;
+
+      .step-head {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .step-divider {
+          flex: 1;
+          width: 1px;
+          background-color: plv(secondary-light-4);
+          transform: scaleX(0.5);
+        }
+      }
+
+      .step-body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .step-title {
+          line-height: 32px;
+        }
+
+        .step-content {
+          padding: 8px 0;
+        }
+      }
+
+      &:last-child {
+        .step-head .step-divider {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .#{componentName(step)} {
+    &.step-has-icon {
+      .step-head {
+        .step-icon {
+          border: none;
+          position: relative;
+          top: 1px;
+        }
+      }
+    }
+
+    &.step-status-wait {
+      .step-title {
+        color: plv(text-1);
+      }
+
+      .step-content {
+        color: plv(text-2);
+      }
+
+      .step-dot {
+        border: solid 1px plv(text-3);
+        background-color: white;
+      }
+    }
+
+    &.step-status-finish {
+      .step-head {
+        .step-icon {
+          border-color: plv(primary-6);
+          background-color: plv(primary-6);
+          color: plv(pbfc);
+        }
+
+        .step-dot {
+          background-color: plv(primary-6);
+        }
+
+        .step-divider.step-divider-next {
+          background-color: plv(primary-6);
+        }
+      }
+
+      & + .#{componentName(step)} {
+        .step-head {
+          .step-divider-prev {
+            background-color: plv(primary-6);
+          }
+        }
+      }
+    }
+
+    &.step-status-process {
+
+      .step-head {
+        .step-icon {
+          border-color: plv(primary-6);
+          background-color: plv(primary-6);
+          color: plv(pbfc);
+        }
+
+        .step-title {
+          color: plv(primary-6);
+        }
+
+        .step-dot {
+          border: solid 4px plv(primary-6);
+          box-sizing: border-box;
+          background-color: white;
+        }
+      }
+
+      .step-body {
+        .step-content {
+          color: plv(primary-6);
+        }
+
+        .step-title {
+          color: plv(primary-6);
+        }
+      }
+
+      &.step-has-icon {
+        .step-icon {
+          border-color: transparent;
+          background-color: transparent;
+          color: plv(primary-6);
+        }
+      }
+    }
+
+    &.step-status-error {
+
+      .step-head {
+        .step-icon {
+          border-color: plv(error-6);
+          background-color: plv(error-6);
+          color: plv(pbfc);
+        }
+
+        .step-title {
+          color: plv(error-6);
+        }
+
+        .step-dot {
+          background-color: plv(error-6);
+        }
+      }
+
+      .step-body {
+        .step-content {
+          color: plv(error-6);
+        }
+
+        .step-title {
+          color: plv(error-6);
+        }
+      }
+
+      &.step-has-icon {
+        .step-icon {
+          border-color: transparent;
+          background-color: transparent;
+          color: plv(error-6);
+        }
+      }
+    }
+  }
+
+  &.step-group-mini {
+
+    &:not(.step-group-dot-icon) {
+      .step-icon {
+        width: 20px;
+        height: 20px;
+        font-size: plv(font-size-small);
+        line-height: 20px;
+        text-align: center;
+        border-radius: 20px;
+        border: solid 1px plv(secondary-light-4);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: plv(text-3);
+        margin: 0 8px;
+
+        .icon, .loading {
+          font-size: 1em;
+        }
+
+        .step-number {
+          .icon {
+            font-size: 1em;
+          }
+        }
+      }
+    }
+
+    .step-title {
+      font-size: plv(font-size-normal);
+    }
+
+    .step-content {
+      font-size: plv(font-size-small);
+    }
+
+    &.step-group-vertical {
+      .#{componentName(step)} {
+        .step-body {
+          .step-title {
+            line-height: 20px;
+          }
+        }
+      }
+    }
+  }
+
+  &.step-group-dot-icon {
+    .#{componentName(step)} {
+      .step-head {
+        .step-icon {
+          background-color: transparent;
+        }
+      }
+    }
+
+    &.step-group-horizontal:not(.step-group-vertical) {
+      .#{componentName(step)} {
+        .step-content {
+          padding-left: 20px;
+        }
+      }
+    }
+
+    &.step-group-title-align-bottom {
+      .#{componentName(step)} .step-head .step-dot {
+        margin-right: 0;
+      }
+    }
+
+    &.step-group-vertical {
+      .step-head {
+        margin-right: 8px;
+        position: relative;
+
+        .step-divider {
+          position: absolute;
+          left: 5px;
+          top: 22px;
+          bottom: -10px;
+        }
+      }
+
+      .step-icon {
+        margin-top: 10px;
+        height: 12px;
+        display: inline-block;
+
+        .step-dot {
+          float: left;
+        }
+      }
+
+      &.step-group-mini {
+        .step-icon {
+          margin-top: 5px;
+        }
+
+        .step-head {
+          .step-divider {
+            position: absolute;
+            left: 5px;
+            top: 16px;
+            bottom: -5px;
+          }
+        }
+      }
+    }
+  }
+}