plain-design 1.0.0-beta.147 → 1.0.0-beta.149

package/src/packages/components/Image/image.scss

@@ -1,334 +1,334 @@
-/*---------------------------------------image-preview-service-------------------------------------------*/
-@include prefix(image-preview-service) {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(black, 0.85);
-  color: plv(pbfc);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .image-preview-service-indicator {
-
-    position: absolute;
-    bottom: 80px;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    user-select: none;
-
-    .image-preview-service-indicator-item {
-      width: 16px;
-      height: 2px;
-      background-color: rgba(white, 0.25);
-      transition: all ease 300ms;
-
-      & + div {
-        margin-left: 8px;
-      }
-
-      &.image-preview-service-indicator-item-active {
-        background-color: white;
-        width: 32px;
-        height: 4px;
-      }
-    }
-  }
-
-  .image-preview-service-button-group {
-    position: absolute;
-    bottom: 20px;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    user-select: none;
-
-    .image-preview-service-button {
-      height: 48px;
-      width: 48px;
-      background-color: rgba(white, 0.45);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 1px;
-      font-size: 24px;
-      transition: all ease 300ms;
-
-      &:first-child {
-        padding-left: 5px;
-        border-top-left-radius: 100px;
-        border-bottom-left-radius: 100px;
-      }
-
-      &:last-child {
-        padding-right: 5px;
-        border-top-right-radius: 100px;
-        border-bottom-right-radius: 100px;
-      }
-
-      &:hover {
-        background-color: rgba(white, 0.25);
-        cursor: pointer;
-      }
-    }
-  }
-
-  & > .image-preview-service-img-wrapper {
-    & > div > img {
-      max-height: 70vh;
-      max-width: 90vw;
-      cursor: grab;
-      position: relative;
-      user-select: none;
-      transition: transform linear 0.1s;
-    }
-  }
-}
-
-/*---------------------------------------image preview transition-------------------------------------------*/
-
-.#{componentName('')}image-preview-enter:not(.#{componentName('')}image-preview-enter-active), .#{componentName('')}image-preview-exit-active {
-  opacity: 0;
-
-  .image-preview-service-img-wrapper {
-    transform: scale(0.25);
-  }
-
-  .image-preview-service-button-group {
-    transform: translateY(200px);
-  }
-}
-
-.#{componentName('')}image-preview-enter-active, .#{componentName('')}image-preview-exit:not(.#{componentName('')}image-preview-exit-active) {
-  opacity: 1;
-
-  .image-preview-service-img-wrapper {
-    transform: scale(1);
-  }
-
-  .image-preview-service-button-group {
-    transform: translateY(0);
-  }
-}
-
-.#{componentName('')}image-preview-enter-active, .#{componentName('')}image-preview-exit-active {
-  transition: all 300ms linear;
-
-  .image-preview-service-indicator {
-    transition: transform linear 300ms;
-
-    .image-preview-service-indicator-item {
-      transition: all linear 300ms;
-    }
-  }
-
-  .image-preview-service-button-group {
-    transition: transform ease 300ms;
-  }
-
-  .image-preview-service-img-wrapper {
-    transition: transform ease 300ms;
-  }
-}
-
-/*---------------------------------------image uploader-------------------------------------------*/
-
-@include prefix(image-uploader) {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  vertical-align: bottom;
-  user-select: none;
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-
-  & > img {
-    height: 100%;
-    width: 100%;
-  }
-
-  &, & .#{componentName(icon)}, & span {
-    transition: all linear 300ms;
-  }
-
-  @include prefix(image) {
-    padding: 0;
-  }
-
-  & > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    & > .#{componentName(icon)} {
-      font-size: 32px;
-    }
-
-    & > span:not(.#{componentName(icon)}) {
-      font-size: 12px;
-      margin-top: 4px;
-    }
-  }
-
-  &.image-uploader-status-empty {
-    border: dashed 2px plv(border-color);
-
-    .#{componentName(icon)} {
-      color: plv(text-2);
-    }
-
-    span {
-      color: plv(text-2);
-    }
-
-    &:hover {
-      border-color: plv(primary-6);
-
-      .#{componentName(icon)}, span {
-        color: plv(primary-6);
-      }
-    }
-
-    &:active {
-      background-color: plv(primary-light-2);
-    }
-  }
-
-  &.image-uploader-status-fail {
-    .image-uploader-fail {
-      background-color: rgba(black, 0.85);
-      color: plv(pbfc);
-    }
-  }
-
-  & > .image-uploader-button-group {
-    bottom: 0;
-    top: initial;
-    left: 0;
-    right: 0;
-    height: 40px;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    transition: all ease 300ms;
-    transform: translateY(100%);
-
-    & > div {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: rgba(#999, 0.65);
-      border-radius: 4px;
-      transform: scale(0.9);
-
-      &:hover {
-        background-color: rgba(black, 0.45);
-      }
-
-      &:active {
-        opacity: 0.75;
-      }
-
-      .#{componentName(icon)} {
-        color: plv(pbfc);
-      }
-    }
-  }
-
-  &.image-editable.image-uploader-status-success {
-    &:hover > .image-uploader-button-group {
-      transform: translateY(0);
-    }
-  }
-}
-
-/*---------------------------------------image-------------------------------------------*/
-
-.#{componentName(image)} {
-  vertical-align: bottom;
-  box-sizing: border-box;
-}
-
-img.image-preview-on-click {
-  cursor: zoom-in;
-}
-
-div.#{componentName(image)} {
-  vertical-align: bottom;
-  min-height: 50px;
-  min-width: 50px;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-
-  @include prefix(icon) {
-    font-size: 36px;
-    color: plv(text-2);
-  }
-
-  span {
-    color: plv(text-2);
-    font-size: 12px;
-  }
-
-  &.image-status-pending {
-    @include prefix(loading) {
-      margin-bottom: 0;
-    }
-  }
-
-  &.image-status-empty {
-    background-color: plv(background-hover);
-
-    @include prefix(icon) {
-      color: plv(text-2);
-    }
-
-    span {
-      color: plv(text-2);
-    }
-  }
-
-  &.image-status-error {
-    background-color: plv(error-light-2);
-
-    @include prefix(icon) {
-      color: plv(error-6);
-    }
-
-    span {
-      color: plv(error-6);
-    }
-  }
-
-  &.image-status-pending {
-    background-color: plv(primary-light-2);
-
-    @include prefix(icon) {
-      color: plv(primary-6);
-    }
-
-    span {
-      color: plv(primary-6);
-    }
-  }
-}
+/*---------------------------------------image-preview-service-------------------------------------------*/
+@include prefix(image-preview-service) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(black, 0.85);
+  color: plv(pbfc);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .image-preview-service-indicator {
+
+    position: absolute;
+    bottom: 80px;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+
+    .image-preview-service-indicator-item {
+      width: 16px;
+      height: 2px;
+      background-color: rgba(white, 0.25);
+      transition: all ease 300ms;
+
+      & + div {
+        margin-left: 8px;
+      }
+
+      &.image-preview-service-indicator-item-active {
+        background-color: white;
+        width: 32px;
+        height: 4px;
+      }
+    }
+  }
+
+  .image-preview-service-button-group {
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+
+    .image-preview-service-button {
+      height: 48px;
+      width: 48px;
+      background-color: rgba(white, 0.45);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 1px;
+      font-size: 24px;
+      transition: all ease 300ms;
+
+      &:first-child {
+        padding-left: 5px;
+        border-top-left-radius: 100px;
+        border-bottom-left-radius: 100px;
+      }
+
+      &:last-child {
+        padding-right: 5px;
+        border-top-right-radius: 100px;
+        border-bottom-right-radius: 100px;
+      }
+
+      &:hover {
+        background-color: rgba(white, 0.25);
+        cursor: pointer;
+      }
+    }
+  }
+
+  & > .image-preview-service-img-wrapper {
+    & > div > img {
+      max-height: 70vh;
+      max-width: 90vw;
+      cursor: grab;
+      position: relative;
+      user-select: none;
+      transition: transform linear 0.1s;
+    }
+  }
+}
+
+/*---------------------------------------image preview transition-------------------------------------------*/
+
+.#{componentName('')}image-preview-enter:not(.#{componentName('')}image-preview-enter-active), .#{componentName('')}image-preview-exit-active {
+  opacity: 0;
+
+  .image-preview-service-img-wrapper {
+    transform: scale(0.25);
+  }
+
+  .image-preview-service-button-group {
+    transform: translateY(200px);
+  }
+}
+
+.#{componentName('')}image-preview-enter-active, .#{componentName('')}image-preview-exit:not(.#{componentName('')}image-preview-exit-active) {
+  opacity: 1;
+
+  .image-preview-service-img-wrapper {
+    transform: scale(1);
+  }
+
+  .image-preview-service-button-group {
+    transform: translateY(0);
+  }
+}
+
+.#{componentName('')}image-preview-enter-active, .#{componentName('')}image-preview-exit-active {
+  transition: all 300ms linear;
+
+  .image-preview-service-indicator {
+    transition: transform linear 300ms;
+
+    .image-preview-service-indicator-item {
+      transition: all linear 300ms;
+    }
+  }
+
+  .image-preview-service-button-group {
+    transition: transform ease 300ms;
+  }
+
+  .image-preview-service-img-wrapper {
+    transition: transform ease 300ms;
+  }
+}
+
+/*---------------------------------------image uploader-------------------------------------------*/
+
+@include prefix(image-uploader) {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  vertical-align: bottom;
+  user-select: none;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+
+  & > img {
+    height: 100%;
+    width: 100%;
+  }
+
+  &, & .#{componentName(icon)}, & span {
+    transition: all linear 300ms;
+  }
+
+  @include prefix(image) {
+    padding: 0;
+  }
+
+  & > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    & > .#{componentName(icon)} {
+      font-size: 32px;
+    }
+
+    & > span:not(.#{componentName(icon)}) {
+      font-size: 12px;
+      margin-top: 4px;
+    }
+  }
+
+  &.image-uploader-status-empty {
+    border: dashed 2px plv(border-color);
+
+    .#{componentName(icon)} {
+      color: plv(text-2);
+    }
+
+    span {
+      color: plv(text-2);
+    }
+
+    &:hover {
+      border-color: plv(primary-6);
+
+      .#{componentName(icon)}, span {
+        color: plv(primary-6);
+      }
+    }
+
+    &:active {
+      background-color: plv(primary-light-2);
+    }
+  }
+
+  &.image-uploader-status-fail {
+    .image-uploader-fail {
+      background-color: rgba(black, 0.85);
+      color: plv(pbfc);
+    }
+  }
+
+  & > .image-uploader-button-group {
+    bottom: 0;
+    top: initial;
+    left: 0;
+    right: 0;
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    transition: all ease 300ms;
+    transform: translateY(100%);
+
+    & > div {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(#999, 0.65);
+      border-radius: 4px;
+      transform: scale(0.9);
+
+      &:hover {
+        background-color: rgba(black, 0.45);
+      }
+
+      &:active {
+        opacity: 0.75;
+      }
+
+      .#{componentName(icon)} {
+        color: plv(pbfc);
+      }
+    }
+  }
+
+  &.image-editable.image-uploader-status-success {
+    &:hover > .image-uploader-button-group {
+      transform: translateY(0);
+    }
+  }
+}
+
+/*---------------------------------------image-------------------------------------------*/
+
+.#{componentName(image)} {
+  vertical-align: bottom;
+  box-sizing: border-box;
+}
+
+img.image-preview-on-click {
+  cursor: zoom-in;
+}
+
+div.#{componentName(image)} {
+  vertical-align: bottom;
+  min-height: 50px;
+  min-width: 50px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+
+  @include prefix(icon) {
+    font-size: 36px;
+    color: plv(text-2);
+  }
+
+  span {
+    color: plv(text-2);
+    font-size: 12px;
+  }
+
+  &.image-status-pending {
+    @include prefix(loading) {
+      margin-bottom: 0;
+    }
+  }
+
+  &.image-status-empty {
+    background-color: plv(background-hover);
+
+    @include prefix(icon) {
+      color: plv(text-2);
+    }
+
+    span {
+      color: plv(text-2);
+    }
+  }
+
+  &.image-status-error {
+    background-color: plv(error-light-2);
+
+    @include prefix(icon) {
+      color: plv(error-6);
+    }
+
+    span {
+      color: plv(error-6);
+    }
+  }
+
+  &.image-status-pending {
+    background-color: plv(primary-light-2);
+
+    @include prefix(icon) {
+      color: plv(primary-6);
+    }
+
+    span {
+      color: plv(primary-6);
+    }
+  }
+}