plain-design 1.0.0-beta.6 → 1.0.0-beta.61

package/src/packages/components/Table/table/table.scss

@@ -1,430 +1,434 @@
-@include prefix(table) {
-  position: relative;
-
-  @include sizeMixin(table, (font-size)) {
-  }
-  .virtual-table-head-table {
-    td {
-      font-weight: 600;
-      letter-spacing: 1px;
-
-      .plt-head-cell-indicator {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        height: inherit;
-        width: 6px;
-        right: 0;
-        content: '';
-        background-color: transparent;
-        cursor: ew-resize;
-        transition: opacity 500ms ease;
-        z-index: 1;
-      }
-
-      .plt-head-cell-sorter {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 1em;
-        height: 1em;
-        vertical-align: middle;
-        padding-left: 2px;
-
-        .plt-head-cell-sorter-inner {
-          display: flex;
-          flex-direction: column;
-          color: plv(secondary-4);
-        }
-
-        @include comp(icon) {
-          height: 0.5em;
-        }
-
-        &.plt-head-cell-sorter-desc {
-          .#{componentName(icon)}:nth-child(2) {
-            color: plv(primary-6);
-          }
-        }
-
-        &.plt-head-cell-sorter-asc {
-          .#{componentName(icon)}:nth-child(1) {
-            color: plv(primary-6);
-          }
-        }
-      }
-    }
-  }
-
-  .table-empty {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-  }
-
-  /*---------------------------------------cell-------------------------------------------*/
-  .plt-cell {
-    text-align: left;
-
-    &.plt-cell-align-center {
-      text-align: center;
-    }
-
-    &.plt-cell-align-right {
-      text-align: right;
-    }
-
-    &.plt-cell-no-padding {
-      padding: 0;
-    }
-
-    &.plt-cell-editing {
-      &:not(.plt-cell-add-edit-padding) {
-        padding-left: 2px;
-        @include comp(input) {
-          & > div, & > span, & > input, & > textarea {
-            &:first-child {
-              padding-left: calc(#{plv(input-padding-x)} - 3px);
-            }
-          }
-        }
-      }
-    }
-
-    &.plt-cell-link {
-      color: plv(primary-6);
-      cursor: pointer;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    @include comp(input) {
-      &:not(.input-multiple) {
-        .input-box {
-          padding-bottom: 4px;
-        }
-      }
-    }
-  }
-
-  &:not(.table-border) {
-    .virtual-table-head-table {
-      td {
-        &:not(:first-child) {
-          &:after {
-            position: absolute;
-            left: 0;
-            top: 33.33%;
-            content: '';
-            width: 1px;
-            background-color: plv(gray-3);
-            height: 33.33%;
-          }
-        }
-      }
-    }
-  }
-
-  /*---------------------------------------border-------------------------------------------*/
-  &.table-border {
-    tr {
-      td {
-        border-left: solid 1px plv(table-border-color);
-
-        &:last-child {
-          border-right: solid 1px plv(table-border-color);
-        }
-      }
-    }
-
-    &:after {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      top: 0;
-      left: 0;
-      background-color: transparent;
-      border: solid 0.5px plv(table-border-color);
-      content: '';
-      z-index: 5;
-      pointer-events: none;
-    }
-
-    &:not(.plt-table-hide-fixed-right) {
-      tr {
-        td {
-          &.plt-cell-first-fixed-right {
-            border-left-color: transparent;
-          }
-        }
-      }
-    }
-  }
-
-  /*---------------------------------------fixed shadow-------------------------------------------*/
-  &, &.table-border {
-
-    $inset-size: 3px;
-
-    .plt-cell-last-fixed-left, .plt-cell-first-fixed-right {
-      &:before {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: $inset-size;
-        pointer-events: none;
-        content: '' !important;
-        z-index: 4;
-        background-color: transparent;
-
-        left: initial;
-        right: initial;
-        transform: none;
-      }
-
-      &.plt-cell-last-fixed-left {
-        &:before {
-          right: 0;
-          box-shadow: inset $inset-size 0 $inset-size -#{$inset-size} plv(gray-5);
-        }
-      }
-
-      &.plt-cell-first-fixed-right {
-        &:before {
-          left: 0;
-          box-shadow: inset -#{$inset-size} 0 $inset-size -#{$inset-size} plv(gray-5);
-        }
-      }
-    }
-  }
-
-  &.plt-table-hide-fixed-left .plt-cell-last-fixed-left, &.plt-table-hide-fixed-right .plt-cell-first-fixed-right {
-    &:before {
-      display: none;
-    }
-  }
-
-  /*---------------------------------------expand-------------------------------------------*/
-  .plt-expand-row {
-    &, &:hover {
-      td {
-        padding: 0;
-        background-color: plv(background-color) !important;
-        overflow: unset !important;
-      }
-    }
-
-    .plt-expand-body {
-      box-sizing: border-box;
-      position: sticky;
-      left: 0;
-    }
-  }
-  .plc-expand-button {
-    width: calc(#{plv(box-size-mini-height)} - 4px);
-    height: calc(#{plv(box-size-mini-height)} - 4px);
-    background-color: plv(secondary-light-2);
-    border-radius: plv(box-size-small-border-radius);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    user-select: none;
-
-    &:hover, &.plc-expand-active {
-      background-color: plv(primary-light-2);
-      color: plv(primary-6);
-    }
-  }
-
-  /*---------------------------------------tree-------------------------------------------*/
-  @include comp(plc-tree-title) {
-    .plc-tree-button {
-      background-color: initial;
-    }
-  }
-  @include comp(plc-tree-node) {
-    display: flex;
-    align-items: center;
-    .tree-node-operator {
-      display: flex;
-      align-items: center;
-    }
-    .tree-node-content {
-      padding: 4px 8px;
-    }
-  }
-
-  .plc-tree-button {
-    text-align: center;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    user-select: none;
-
-    &.tree-node-expander:not(.tree-node-leaf) {
-      background-color: plv(secondary-light-2);
-      border-radius: plv(box-size-mini-border-radius);
-    }
-  }
-
-  .plc-tree-node-placeholder, .plc-tree-button:not(:last-child) {
-    margin-right: 8px;
-  }
-
-  .plt-head-cell {
-    &:hover {
-      .plc-tree-head-button {
-        background-color: plv(secondary-light-3);
-      }
-    }
-  }
-
-  .plc-tree-node-icon {
-    margin-right: 8px;
-  }
-
-  .tree-node-draggier {
-    &.tree-node-draggier-disable {
-      color: plv(text-4);
-      cursor: not-allowed;
-    }
-  }
-  /*---------------------------------------operations-------------------------------------------*/
-  .plc-operation-cell {
-    display: inline-block;
-    white-space: nowrap;
-    @include comp(button) {
-      & + button {
-        padding-left: 12px;
-      }
-    }
-  }
-
-  /*---------------------------------------row draggier-------------------------------------------*/
-  .plc-draggier-cell {
-    width: 24px;
-    height: 24px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: plv(box-size-normal-border-radius);
-    cursor: move;
-    user-select: none;
-
-    &:hover {
-      background-color: plv(secondary-2);
-    }
-  }
-
-  .plt-row-dragging {
-    opacity: 0;
-  }
-
-  .plt-row-dragging-moving {
-    transition: transform linear 300ms;
-
-    &.plt-row-dragging-moving-down {
-      transform: translateY(100%);
-    }
-
-    &.plt-row-dragging-moving-up {
-      transform: translateY(-100%);
-    }
-  }
-  /*---------------------------------------col draggier-------------------------------------------*/
-  .plt-head-cell-shadow-wrapper {
-    background-color: plv(table-head-background);
-    box-shadow: 0 0 5px plv(gray-6);
-    pointer-events: none;
-    z-index: 10;
-    opacity: 0.5;
-
-    .plt-head-cell-shadow-tag {
-      position: absolute;
-      top: 2px;
-      right: 2px;
-      padding: 2px;
-      font-size: 12px;
-      background-color: plv(secondary-3);
-      color: plv(secondary-6);
-      border-radius: plv(box-size-small-border-radius);
-    }
-  }
-  .plt-col-draggier-indicator {
-    &[droppable="true"] {
-      background-color: plv(primary-6);
-    }
-
-    &[droppable="false"] {
-      background-color: plv(error-6);
-    }
-  }
-
-  &.shadow-draggier-table {
-    position: fixed;
-    z-index: 19;
-    box-shadow: plv(notice-box-shadow);
-    pointer-events: none;
-
-    .virtual-list-strut {
-      width: 100% !important;
-    }
-
-    table {
-      width: 100% !important;
-    }
-  }
-  /*---------------------------------------check-------------------------------------------*/
-  .plt-cell {
-    @include comp(badge) {
-      line-height: 1em;
-    }
-  }
-}
-
-@include comp(table-col-draggier) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: plv(notice-box-shadow);
-  user-select: none;
-  cursor: move;
-
-  &[data-button-type=col] {
-    width: 40px;
-    height: 20px;
-  }
-  &[data-button-type=row] {
-    width: 20px;
-    height: 40px;
-  }
-}
-
-@include comp(dialog) {
-  &.table-modify-dialog {
-    .table-modify-dialog-operations {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 12px;
-
-      button + button {
-        margin-left: 8px;
-      }
-    }
-  }
-}
-
-@include comp(plt-head-cell-resizer-indicator) {
-  background-color: plv(primary-3);
-}
+@include prefix(table) {
+  position: relative;
+
+  @include sizeMixin(table, (font-size)) {
+    .plt-cell {
+      padding: 0 plv(input-padding-x-#{$name});
+
+      &.plt-cell-editing {
+        &:not(.plt-cell-add-edit-padding) {
+          padding-left: 2px;
+          @include comp(input) {
+            & > div, & > span, & > input, & > textarea {
+              &:first-child {
+                padding-left: calc(#{plv(input-padding-x-#{$name})} - 3px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .virtual-table-head-table {
+    td {
+      font-weight: 500;
+      letter-spacing: 1px;
+
+      .plt-head-cell-indicator {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        height: inherit;
+        width: 6px;
+        right: 0;
+        content: '';
+        background-color: transparent;
+        cursor: ew-resize;
+        transition: opacity 500ms ease;
+        z-index: 1;
+      }
+
+      .plt-head-cell-sorter {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1em;
+        height: 1em;
+        vertical-align: middle;
+        padding-left: 2px;
+
+        .plt-head-cell-sorter-inner {
+          display: flex;
+          flex-direction: column;
+          color: plv(secondary-4);
+        }
+
+        @include comp(icon) {
+          height: 0.5em;
+        }
+
+        &.plt-head-cell-sorter-desc {
+          .#{componentName(icon)}:nth-child(2) {
+            color: plv(primary-6);
+          }
+        }
+
+        &.plt-head-cell-sorter-asc {
+          .#{componentName(icon)}:nth-child(1) {
+            color: plv(primary-6);
+          }
+        }
+      }
+    }
+  }
+
+  .table-empty {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  /*---------------------------------------cell-------------------------------------------*/
+  .plt-cell {
+    text-align: left;
+
+    &.plt-cell-align-center {
+      text-align: center;
+    }
+
+    &.plt-cell-align-right {
+      text-align: right;
+    }
+
+    &.plt-cell-no-padding {
+      padding: 0;
+    }
+
+    &.plt-cell-link {
+      color: plv(primary-6);
+      cursor: pointer;
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    @include comp(input) {
+      &:not(.input-multiple) {
+        .input-box {
+          padding-bottom: 3px;
+        }
+      }
+    }
+  }
+
+  &:not(.table-border) {
+    .virtual-table-head-table {
+      td {
+        &:not(:first-child) {
+          &:after {
+            position: absolute;
+            left: 0;
+            top: 33.33%;
+            content: '';
+            width: 1px;
+            background-color: plv(gray-3);
+            height: 33.33%;
+          }
+        }
+      }
+    }
+  }
+
+  /*---------------------------------------border-------------------------------------------*/
+  &.table-border {
+    tr {
+      td {
+        border-left: solid 1px plv(table-border-color);
+
+        &:last-child {
+          border-right: solid 1px plv(table-border-color);
+        }
+      }
+    }
+
+    &:after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      left: 0;
+      background-color: transparent;
+      border: solid 0.5px plv(table-border-color);
+      content: '';
+      z-index: 5;
+      pointer-events: none;
+    }
+
+    &:not(.plt-table-hide-fixed-right) {
+      tr {
+        td {
+          &.plt-cell-first-fixed-right {
+            border-left-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  /*---------------------------------------fixed shadow-------------------------------------------*/
+  &, &.table-border {
+
+    $inset-size: 3px;
+
+    .plt-cell-last-fixed-left, .plt-cell-first-fixed-right {
+      &:before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: $inset-size;
+        pointer-events: none;
+        content: '' !important;
+        z-index: 4;
+        background-color: transparent;
+
+        left: initial;
+        right: initial;
+        transform: none;
+      }
+
+      &.plt-cell-last-fixed-left {
+        &:before {
+          right: 0;
+          box-shadow: inset $inset-size 0 $inset-size -#{$inset-size} plv(gray-5);
+        }
+      }
+
+      &.plt-cell-first-fixed-right {
+        &:before {
+          left: 0;
+          box-shadow: inset -#{$inset-size} 0 $inset-size -#{$inset-size} plv(gray-5);
+        }
+      }
+    }
+  }
+
+  &.plt-table-hide-fixed-left .plt-cell-last-fixed-left, &.plt-table-hide-fixed-right .plt-cell-first-fixed-right {
+    &:before {
+      display: none;
+    }
+  }
+
+  /*---------------------------------------expand-------------------------------------------*/
+  .plt-expand-row {
+    &, &:hover {
+      td {
+        padding: 0;
+        background-color: plv(background-color) !important;
+        overflow: unset !important;
+      }
+    }
+
+    .plt-expand-body {
+      box-sizing: border-box;
+      position: sticky;
+      left: 0;
+    }
+  }
+  .plc-expand-button {
+    width: calc(#{plv(box-size-mini-height)} - 4px);
+    height: calc(#{plv(box-size-mini-height)} - 4px);
+    background-color: plv(secondary-light-2);
+    border-radius: plv(box-size-small-border-radius);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover, &.plc-expand-active {
+      background-color: plv(primary-light-2);
+      color: plv(primary-6);
+    }
+  }
+
+  /*---------------------------------------tree-------------------------------------------*/
+  @include comp(plc-tree-title) {
+    .plc-tree-button {
+      background-color: initial;
+    }
+  }
+  @include comp(plc-tree-node) {
+    display: flex;
+    align-items: center;
+    .tree-node-operator {
+      display: flex;
+      align-items: center;
+    }
+    .tree-node-content {
+      padding: 4px 8px;
+    }
+  }
+
+  .plc-tree-button {
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+
+    &.tree-node-expander:not(.tree-node-leaf) {
+      background-color: plv(secondary-light-2);
+      border-radius: plv(box-size-mini-border-radius);
+    }
+  }
+
+  .plc-tree-node-placeholder, .plc-tree-button:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  .plt-head-cell {
+    &:hover {
+      .plc-tree-head-button {
+        background-color: plv(secondary-light-3);
+      }
+    }
+  }
+
+  .plc-tree-node-icon {
+    margin-right: 8px;
+  }
+
+  .tree-node-draggier {
+    &.tree-node-draggier-disable {
+      color: plv(text-4);
+      cursor: not-allowed;
+    }
+  }
+  /*---------------------------------------operations-------------------------------------------*/
+  .plc-operation-cell {
+    display: inline-block;
+    white-space: nowrap;
+    @include comp(button) {
+      & + button {
+        padding-left: 12px;
+      }
+    }
+  }
+
+  /*---------------------------------------row draggier-------------------------------------------*/
+  .plc-draggier-cell {
+    width: 24px;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: plv(box-size-normal-border-radius);
+    cursor: move;
+    user-select: none;
+
+    &:hover {
+      background-color: plv(secondary-2);
+    }
+  }
+
+  .plt-row-dragging {
+    opacity: 0;
+  }
+
+  .plt-row-dragging-moving {
+    transition: transform linear 300ms;
+
+    &.plt-row-dragging-moving-down {
+      transform: translateY(100%);
+    }
+
+    &.plt-row-dragging-moving-up {
+      transform: translateY(-100%);
+    }
+  }
+  /*---------------------------------------col draggier-------------------------------------------*/
+  .plt-head-cell-shadow-wrapper {
+    background-color: plv(table-head-background);
+    box-shadow: 0 0 5px plv(gray-6);
+    pointer-events: none;
+    z-index: 10;
+    opacity: 0.5;
+
+    .plt-head-cell-shadow-tag {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      padding: 2px;
+      font-size: 12px;
+      background-color: plv(secondary-3);
+      color: plv(secondary-6);
+      border-radius: plv(box-size-small-border-radius);
+    }
+  }
+  .plt-col-draggier-indicator {
+    &[droppable="true"] {
+      background-color: plv(primary-6);
+    }
+
+    &[droppable="false"] {
+      background-color: plv(error-6);
+    }
+  }
+
+  &.shadow-draggier-table {
+    position: fixed;
+    z-index: 19;
+    box-shadow: plv(notice-box-shadow);
+    pointer-events: none;
+
+    .virtual-list-strut {
+      width: 100% !important;
+    }
+
+    table {
+      width: 100% !important;
+    }
+  }
+  /*---------------------------------------check-------------------------------------------*/
+  .plt-cell {
+    @include comp(badge) {
+      line-height: 1em;
+    }
+  }
+}
+
+@include comp(table-col-draggier) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: plv(notice-box-shadow);
+  user-select: none;
+  cursor: move;
+
+  &[data-button-type=col] {
+    width: 40px;
+    height: 20px;
+  }
+  &[data-button-type=row] {
+    width: 20px;
+    height: 40px;
+  }
+}
+
+@include comp(dialog) {
+  &.table-modify-dialog {
+    .table-modify-dialog-operations {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 12px;
+
+      button + button {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+@include comp(plt-head-cell-resizer-indicator) {
+  background-color: plv(primary-3);
+}