dtable-ui-component 0.2.0 → 0.2.2

package/es/css/cell-editor.css

@@ -0,0 +1,614 @@
+/* common */
+.dtable-ui-editor-popover {
+  width: 320px;
+  box-shadow: 0 0 5px #ccc;
+  background-color: #fff;
+  z-index: 10;
+}
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-editor-popover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    background-color: #f5f5f5;
+    z-index: 9;
+  }
+
+  .dtable-ui-mb-editor-header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-editor-header .editor-header-left-content {
+    min-width: 50px;
+    padding: 13px 16px;
+    font-size: 14px;
+    color: #888;
+  }
+
+  .dtable-ui-mb-editor-header .editor-header-title {
+    flex: 1;
+    font-size: 18px;
+    text-align: center;
+    text-overflow: ellipsis;
+    color: #333;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .dtable-ui-mb-editor-header .editor-header-right-content {
+    min-width: 50px;
+    padding: 13px 16px;
+    font-size: 14px;
+    color: #888;
+  }
+
+  .dtable-ui-mb-editor-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin-top: 50px;
+    overflow: auto;
+  }
+}
+
+/* pc-single-select */
+/* pc-multiple-select */
+.dtable-ui-single-select-editor,
+.dtable-ui-multiple-select-editor {
+  position: relative;
+}
+
+.dtable-ui-select-editor-container {
+  display: inline-block;
+  height: 30px;
+  padding: 0 10px;
+}
+
+.dtable-ui-select-editor-popover .select-options-search {
+  padding: 10px 10px 0 10px;
+}
+
+.dtable-ui-select-editor-popover .select-options-search input {
+  height: 28px;
+}
+
+.dtable-ui-select-editor-popover .select-options-container {
+  min-height: 160px;
+  max-height: 200px;
+  margin: 10px 0;
+  padding: 0 10px;
+  overflow: auto;
+}
+
+/* option item */
+.dtable-ui-select-editor-popover .select-option-item {
+  display: flex;
+  height: 30px;
+  padding-left: 12px;
+  font-size: 14px;
+  line-height: 30px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.dtable-ui-select-editor-popover .select-option-item:hover {
+  background-color: #f5f5f5;
+}
+
+.dtable-ui-select-editor-popover .option-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui-select-editor-popover .option-checked {
+  width: 20px;
+  text-align: center;
+}
+
+.dtable-ui-select-editor-popover .option-checked .dtable-font {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.dtable-ui-select-editor-popover .select-options-add {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  height: 30px;
+  border-top: 1px solid #ccc;
+}
+
+.dtable-ui-select-editor-popover .select-options-add .dtable-font {
+  margin-right: 5px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.dtable-ui-select-editor-popover .select-options-add > span {
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #212529;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* mobile select-editor */
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-select-editor-body .mb-selected-item {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-selected-item .title {
+    padding: 6px 16px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-selected-item .content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: 50px;
+    padding: 8px 16px;
+    border-bottom: 1px solid #e9e9e9;
+    overflow: auto;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-selected-item .content .select-option-item {
+    margin: 3px 10px 3px 0;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-search-select-items {
+    padding: 8px 16px;
+    margin-top: 20px;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-search-select-items > input {
+    outline: none;
+    height: 30px;
+    padding: 0;
+    line-height: 30px;
+    border: none;
+  }
+  .dtable-ui-mb-select-editor-body .mb-search-select-items > input:focus,
+  .dtable-ui-mb-select-editor-body .mb-search-select-items > input:active {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .title {
+    padding: 6px 16px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .content {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .search-result-none {
+    padding: 16px 0;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 10px 10px 10px 16px;
+    font-size: 13px;
+    background-color: #fff;
+    color: #202428;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item + .mb-select-option-item {
+    border-top: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item .item-name {
+    display: inline-block;
+    padding: 0 10px;
+    margin-top: 5px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    text-overflow: ellipsis;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item .dtable-font {
+    font-size: 12px;
+    color: #798d99;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-create-select-item {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    padding: 0 10px;
+    margin-top: 20px;
+    border-top: 1px solid #dedede;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-create-select-item .dtable-font {
+    margin-right: 10px;
+    font-size: 12px;
+    font-weight: 600px;
+    transition: translateY(1px);
+  }
+
+  .dtable-ui-mb-select-editor-body .mb-create-select-item .add-new-option {
+    font-size: 14px;
+    font-weight: 500px;
+  }
+
+}
+
+/* collaborator-editor */
+.dtable-ui-collaborator-editor {
+  position: relative;
+}
+
+.dtable-ui-collaborator-editor-container .collaborators-container {
+  margin-top: 8px;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-search-container {
+  padding: 10px 10px 0 10px;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-search-container input {
+  height: 28px;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-list-container {
+  min-height: 160px;
+  max-height: 200px;
+  margin: 10px 0;
+  padding: 0 10px;
+  overflow: auto;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-list-container .collaborator-item-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  padding-left: 12px;
+  font-size: 14px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-list-container .collaborator-item-container:hover {
+  background-color: #f5f5f5;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-checked {
+  width: 20px;
+  text-align: center;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-checked .dtable-font {
+  font-size: 12px;
+  color: #798d99;
+}
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-collaborator-editor-body .mb-search-collaborator-items {
+    padding: 8px 16px;
+    margin-top: 20px;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-search-collaborator-items > input {
+    outline: none;
+    height: 30px;
+    padding: 0;
+    line-height: 30px;
+    border: none;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-search-collaborator-items > input:focus,
+  .dtable-ui-mb-collaborator-editor-body .mb-search-collaborator-items > input:active {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborators-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    min-height: 0;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborators-container .title {
+    padding: 6px 16px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborators-container .content {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .search-result-none {
+    padding: 16px 0 16px 16px;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 10px 10px 10px 16px;
+    font-size: 13px;
+    background-color: #fff;
+    color: #202428;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item {
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item .mb-collaborator-info {
+    display: flex;
+    align-items: center;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item .collaborator-avatar img {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item .collaborator-name {
+    padding: 0 10px;
+    overflow: hidden;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item .dtable-font {
+    font-size: 12px;
+    color: #798d99;
+  }
+}
+
+/* link-editor */
+.dtable-ui-link-editor {
+  position: relative;
+}
+
+.dtable-ui-link-editor-container {
+  display: inline-block;
+  height: 30px;
+  padding: 0 10px;
+}
+
+.dtable-ui-link-editor-popover .link-options-search {
+  padding: 10px 10px 0 10px;
+}
+
+.dtable-ui-link-editor-popover .link-options-search input {
+  height: 28px;
+}
+
+.dtable-ui-link-editor-popover .link-options-container {
+  min-height: 160px;
+  max-height: 200px;
+  margin: 10px 0;
+  padding: 0 10px;
+  overflow: auto;
+}
+
+/* option item */
+.dtable-ui-link-editor-popover .link-option-item {
+  display: flex;
+  height: 30px;
+  padding-left: 12px;
+  font-size: 14px;
+  line-height: 30px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.dtable-ui-link-editor-popover .link-option-item:hover {
+  background-color: #f5f5f5;
+}
+
+.dtable-ui-link-editor-popover .option-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui-link-editor-popover .option-info .option-name {
+  max-width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dtable-ui-link-editor-popover .option-checked {
+  width: 20px;
+  text-align: center;
+}
+
+.dtable-ui-link-editor-popover .option-checked .dtable-font {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.dtable-ui-link-editor-popover .select-options-add {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  height: 30px;
+  border-top: 1px solid #ccc;
+}
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-link-editor-body .mb-search-link-items {
+    padding: 8px 16px;
+    margin-top: 20px;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-search-link-items > input {
+    outline: none;
+    height: 30px;
+    padding: 0;
+    line-height: 30px;
+    border: none;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-search-link-items > input:focus,
+  .dtable-ui-mb-link-editor-body .mb-search-link-items > input:active {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    min-height: 0;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-container .title {
+    padding: 6px 16px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-container .content {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-link-editor-body .search-result-none {
+    padding: 16px 0 16px 16px;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-option-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 10px 10px 10px 16px;
+    font-size: 13px;
+    color: #202428;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-option-item {
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-option-item .mb-option-info {
+    display: flex;
+    align-items: center;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-option-item .option-name {
+    padding: 0 10px;
+    max-width: 250px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: #eceff4;
+    border-radius: 3px;
+  }
+
+  .dtable-ui-mb-link-editor-body .mb-link-option-item .dtable-font {
+    font-size: 12px;
+    color: #798d99;
+  }
+}
+
+.dtable-ui-date-editor .dtable-ui-date-editor-container {
+  display: flex;
+  width: 400px;
+}
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input {
+    display: flex;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input .date-input {
+    flex: 1;
+    background-color: #fff;
+  }
+  
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input .date-input .date-input-day {
+    background-color: #f5f5f5;
+    border: 1px solid #e9e9e9;
+    margin: 10px;
+    padding: 3px 5px;
+    border-radius: 3px;
+  }
+
+  .dtable-ui-mb-date-editor-body .dtable-ui.mb-date-editor-picker {
+    display: block;
+    position: relative;
+    margin-top: 20px;
+    line-height: 1.5;
+    box-sizing: border-box;
+  }
+
+  .dtable-ui-mb-date-editor-body .mb-date-editor-clear {
+    padding: 10px 0;
+    margin-top: 20px;
+    border-bottom: 1px solid #e9e9e9;
+    border-top: 1px solid #e9e9e9;
+    text-align: center;
+    color: #d27053;
+    background-color: #fff;
+  }
+
+  .dtable-ui .am-picker-popup-header .am-picker-popup-item {
+    color: #E5A252;
+  }
+}