@voplus/morpho-document 6.0.32 → 6.0.33

package/es/components/DocumentSortableTree/themes/FileExplorerTheme/node-content-renderer.less

@@ -1,350 +1,350 @@
-@import "~@voplus/morpho-theme/styles/index.less";
-
-:global {
-	.explorer-theme-node {
-		&:hover {
-			background: @item-frame-bg-color;
-		}
-
-		&.active {
-			background: @item-frame-bg-color;
-
-			svg,
-			.file-name {
-				color: rgba(0, 0, 0, 0.85);
-			}
-		}
-
-		:global {
-			.doc-spin {
-				z-index: 2;
-				position: absolute;
-				top: 50%;
-				width: 30px;
-				height: 30px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				transform: translate3d(-50%, -50%, 0);
-			}
-
-			.collapseButton,
-			.expandButton {
-				appearance: none;
-				border: none;
-				background: transparent;
-				padding: 0;
-				z-index: 2;
-				position: absolute;
-				top: 45%;
-				width: 30px;
-				height: 30px;
-				transform: translate3d(-50%, -50%, 0);
-				cursor: pointer;
-
-				.arrows {
-					display: inline-block;
-					font-size: 10px;
-					transform: translate3d(50%, 0, 0) rotateZ(90deg);
-				}
-
-				&:focus {
-					outline: none;
-				}
-			}
-
-			.expandButton .arrows {
-				display: inline-block;
-				font-size: 10px;
-				transform: translate3d(50%, 0, 0);
-			}
-
-			.rowWrapper {
-				height: 100%;
-				box-sizing: border-box;
-			}
-
-			.rowWrapperDragDisabled {
-				cursor: default;
-			}
-
-			.row {
-				height: 100%;
-				white-space: nowrap;
-				display: flex;
-				position: relative;
-
-				& > * {
-					box-sizing: border-box;
-				}
-			}
-
-			/**
-		 * The outline of where the element will go if dropped, displayed while dragging
-		 */
-			.rowLandingPad {
-				border: none;
-				box-shadow: none;
-				outline: none;
-
-				* {
-					opacity: 0 !important;
-				}
-
-				&::before {
-					background-color: lightblue;
-					border: 2px dotted black;
-					content: "";
-					position: absolute;
-					top: 0;
-					right: 0;
-					bottom: 0;
-					left: 0;
-					z-index: -1;
-				}
-			}
-
-			/**
-		 * Alternate appearance of the landing pad when the dragged location is invalid
-		 */
-			.rowCancelPad {
-				// @extend .rowLandingPad;
-
-				&::before {
-					background-color: #e6a8ad;
-				}
-			}
-
-			/**
-		 * Nodes matching the search conditions are highlighted
-		 */
-			.rowSearchMatch {
-				box-shadow: inset 0 -7px 7px -3px #0080ff;
-			}
-
-			/**
-		 * The node that matches the search conditions and is currently focused
-		 */
-			.rowSearchFocus {
-				box-shadow: inset 0 -7px 7px -3px #fc6421;
-			}
-
-			// %rowItem {
-			//   display: inline-block;
-			//   vertical-align: middle;
-			// }
-
-			.rowContents {
-				// @extend %rowItem;
-				position: relative;
-				width: 100%;
-				height: 100%;
-				flex: 1 0 auto;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-			}
-
-			.rowLabel {
-				// @extend %rowItem;
-				display: flex;
-				flex: 0 1 auto;
-				padding-right: 20px;
-			}
-
-			.file-document-name {
-				display: flex;
-				align-items: center;
-
-				.file-type {
-					display: flex;
-					align-items: center;
-					width: 22px;
-				}
-
-				.file-name {
-					display: inline-block;
-					color: #000;
-					font-size: 15px;
-					font-weight: 500;
-					z-index: 100;
-					cursor: pointer;
-				}
-			}
-
-			.file-tree-item {
-				padding: 0;
-				margin: 0;
-
-				.document-header-default {
-					padding: 0;
-
-					&::after {
-						border-bottom: none;
-					}
-
-					.document-name-content .document-pre {
-						min-width: 22px;
-						margin-right: 0;
-						// color: rgba(0, 0, 0, 0.85);
-					}
-				}
-			}
-
-			// .rowToolbar {
-			//   // @extend %rowItem;
-			//   flex: 0 1 auto;
-			//   display: flex;
-			// }
-
-			.toolbarButton {
-				// @extend %rowItem;
-			}
-
-			/**
- * Line for under a node with children
- */
-			.lineChildren {
-				height: 100%;
-				display: inline-block;
-			}
-
-			/* ==========================================================================
-   Scaffold
-
-    Line-overlaid blocks used for showing the tree structure
-   ========================================================================== */
-			.lineBlock {
-				height: 100%;
-				position: relative;
-				display: inline-block;
-				flex: 0 0 auto;
-			}
-
-			.absoluteLineBlock {
-				// @extend .lineBlock;
-				position: absolute;
-				top: 0;
-			}
-
-			/* Highlight line for pointing to dragged row destination
-   ========================================================================== */
-			// $highlight-color: #36c2f6;
-			// $highlight-line-size: 6px; // Make it an even number for clean rendering
-
-			/**
- * +--+--+
- * |  |  |
- * |  |  |
- * |  |  |
- * +--+--+
- */
-			.highlightLineVertical {
-				z-index: 3;
-
-				&::before {
-					position: absolute;
-					content: "";
-					// background-color: $highlight-color;
-					// width: $highlight-line-size;
-					// margin-left: $highlight-line-size / -2;
-					left: 50%;
-					top: 0;
-					height: 100%;
-				}
-
-				// @keyframes arrow-pulse {
-				//   $base-multiplier: 10;
-				//   0% {
-				//     transform: translate(0, 0);
-				//     opacity: 0;
-				//   }
-				//   30% {
-				//     transform: translate(0, 30% * $base-multiplier);
-				//     opacity: 1;
-				//   }
-				//   70% {
-				//     transform: translate(0, 70% * $base-multiplier);
-				//     opacity: 1;
-				//   }
-				//   100% {
-				//     transform: translate(0, 100% * $base-multiplier);
-				//     opacity: 0;
-				//   }
-				// }
-
-				&::after {
-					content: "";
-					position: absolute;
-					height: 0;
-					// margin-left: -1 * $highlight-line-size / 2;
-					left: 50%;
-					top: 0;
-					// border-left: $highlight-line-size / 2 solid transparent;
-					// border-right: $highlight-line-size / 2 solid transparent;
-					// border-top: $highlight-line-size / 2 solid white;
-					animation: arrow-pulse 1s infinite linear both;
-				}
-			}
-
-			/**
- * +-----+
- * |     |
- * |  +--+
- * |  |  |
- * +--+--+
- */
-			.highlightTopLeftCorner {
-				&::before {
-					z-index: 3;
-					content: "";
-					position: absolute;
-					// border-top: solid $highlight-line-size $highlight-color;
-					// border-left: solid $highlight-line-size $highlight-color;
-					box-sizing: border-box;
-					// height: calc(50% + #{$highlight-line-size / 2});
-					// top: 50%;
-					// margin-top: $highlight-line-size / -2;
-					// right: 0;
-					// width: calc(50% + #{$highlight-line-size / 2});
-				}
-			}
-
-			/**
- * +--+--+
- * |  |  |
- * |  |  |
- * |  +->|
- * +-----+
- */
-			.highlightBottomLeftCorner {
-				// $arrow-size: 7px;
-				z-index: 3;
-
-				&::before {
-					content: "";
-					position: absolute;
-					// border-bottom: solid $highlight-line-size $highlight-color;
-					// border-left: solid $highlight-line-size $highlight-color;
-					box-sizing: border-box;
-					// height: calc(100% + #{$highlight-line-size / 2});
-					// top: 0;
-					// right: $arrow-size;
-					// width: calc(50% - #{$arrow-size - ($highlight-line-size / 2)});
-				}
-
-				&::after {
-					content: "";
-					position: absolute;
-					height: 0;
-					right: 0;
-					top: 100%;
-					// margin-top: -1 * $arrow-size;
-					// border-top: $arrow-size solid transparent;
-					// border-bottom: $arrow-size solid transparent;
-					// border-left: $arrow-size solid $highlight-color;
-				}
-			}
-		}
-	}
-}
+@import "~@voplus/morpho-theme/styles/index.less";
+
+:global {
+	.explorer-theme-node {
+		&:hover {
+			background: @item-frame-bg-color;
+		}
+
+		&.active {
+			background: @item-frame-bg-color;
+
+			svg,
+			.file-name {
+				color: rgba(0, 0, 0, 0.85);
+			}
+		}
+
+		:global {
+			.doc-spin {
+				z-index: 2;
+				position: absolute;
+				top: 50%;
+				width: 30px;
+				height: 30px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transform: translate3d(-50%, -50%, 0);
+			}
+
+			.collapseButton,
+			.expandButton {
+				appearance: none;
+				border: none;
+				background: transparent;
+				padding: 0;
+				z-index: 2;
+				position: absolute;
+				top: 45%;
+				width: 30px;
+				height: 30px;
+				transform: translate3d(-50%, -50%, 0);
+				cursor: pointer;
+
+				.arrows {
+					display: inline-block;
+					font-size: 10px;
+					transform: translate3d(50%, 0, 0) rotateZ(90deg);
+				}
+
+				&:focus {
+					outline: none;
+				}
+			}
+
+			.expandButton .arrows {
+				display: inline-block;
+				font-size: 10px;
+				transform: translate3d(50%, 0, 0);
+			}
+
+			.rowWrapper {
+				height: 100%;
+				box-sizing: border-box;
+			}
+
+			.rowWrapperDragDisabled {
+				cursor: default;
+			}
+
+			.row {
+				height: 100%;
+				white-space: nowrap;
+				display: flex;
+				position: relative;
+
+				& > * {
+					box-sizing: border-box;
+				}
+			}
+
+			/**
+		 * The outline of where the element will go if dropped, displayed while dragging
+		 */
+			.rowLandingPad {
+				border: none;
+				box-shadow: none;
+				outline: none;
+
+				* {
+					opacity: 0 !important;
+				}
+
+				&::before {
+					background-color: lightblue;
+					border: 2px dotted black;
+					content: "";
+					position: absolute;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+					z-index: -1;
+				}
+			}
+
+			/**
+		 * Alternate appearance of the landing pad when the dragged location is invalid
+		 */
+			.rowCancelPad {
+				// @extend .rowLandingPad;
+
+				&::before {
+					background-color: #e6a8ad;
+				}
+			}
+
+			/**
+		 * Nodes matching the search conditions are highlighted
+		 */
+			.rowSearchMatch {
+				box-shadow: inset 0 -7px 7px -3px #0080ff;
+			}
+
+			/**
+		 * The node that matches the search conditions and is currently focused
+		 */
+			.rowSearchFocus {
+				box-shadow: inset 0 -7px 7px -3px #fc6421;
+			}
+
+			// %rowItem {
+			//   display: inline-block;
+			//   vertical-align: middle;
+			// }
+
+			.rowContents {
+				// @extend %rowItem;
+				position: relative;
+				width: 100%;
+				height: 100%;
+				flex: 1 0 auto;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			.rowLabel {
+				// @extend %rowItem;
+				display: flex;
+				flex: 0 1 auto;
+				padding-right: 20px;
+			}
+
+			.file-document-name {
+				display: flex;
+				align-items: center;
+
+				.file-type {
+					display: flex;
+					align-items: center;
+					width: 22px;
+				}
+
+				.file-name {
+					display: inline-block;
+					color: #000;
+					font-size: 15px;
+					font-weight: 500;
+					z-index: 100;
+					cursor: pointer;
+				}
+			}
+
+			.file-tree-item {
+				padding: 0;
+				margin: 0;
+
+				.document-header-default {
+					padding: 0;
+
+					&::after {
+						border-bottom: none;
+					}
+
+					.document-name-content .document-pre {
+						min-width: 22px;
+						margin-right: 0;
+						// color: rgba(0, 0, 0, 0.85);
+					}
+				}
+			}
+
+			// .rowToolbar {
+			//   // @extend %rowItem;
+			//   flex: 0 1 auto;
+			//   display: flex;
+			// }
+
+			.toolbarButton {
+				// @extend %rowItem;
+			}
+
+			/**
+ * Line for under a node with children
+ */
+			.lineChildren {
+				height: 100%;
+				display: inline-block;
+			}
+
+			/* ==========================================================================
+   Scaffold
+
+    Line-overlaid blocks used for showing the tree structure
+   ========================================================================== */
+			.lineBlock {
+				height: 100%;
+				position: relative;
+				display: inline-block;
+				flex: 0 0 auto;
+			}
+
+			.absoluteLineBlock {
+				// @extend .lineBlock;
+				position: absolute;
+				top: 0;
+			}
+
+			/* Highlight line for pointing to dragged row destination
+   ========================================================================== */
+			// $highlight-color: #36c2f6;
+			// $highlight-line-size: 6px; // Make it an even number for clean rendering
+
+			/**
+ * +--+--+
+ * |  |  |
+ * |  |  |
+ * |  |  |
+ * +--+--+
+ */
+			.highlightLineVertical {
+				z-index: 3;
+
+				&::before {
+					position: absolute;
+					content: "";
+					// background-color: $highlight-color;
+					// width: $highlight-line-size;
+					// margin-left: $highlight-line-size / -2;
+					left: 50%;
+					top: 0;
+					height: 100%;
+				}
+
+				// @keyframes arrow-pulse {
+				//   $base-multiplier: 10;
+				//   0% {
+				//     transform: translate(0, 0);
+				//     opacity: 0;
+				//   }
+				//   30% {
+				//     transform: translate(0, 30% * $base-multiplier);
+				//     opacity: 1;
+				//   }
+				//   70% {
+				//     transform: translate(0, 70% * $base-multiplier);
+				//     opacity: 1;
+				//   }
+				//   100% {
+				//     transform: translate(0, 100% * $base-multiplier);
+				//     opacity: 0;
+				//   }
+				// }
+
+				&::after {
+					content: "";
+					position: absolute;
+					height: 0;
+					// margin-left: -1 * $highlight-line-size / 2;
+					left: 50%;
+					top: 0;
+					// border-left: $highlight-line-size / 2 solid transparent;
+					// border-right: $highlight-line-size / 2 solid transparent;
+					// border-top: $highlight-line-size / 2 solid white;
+					animation: arrow-pulse 1s infinite linear both;
+				}
+			}
+
+			/**
+ * +-----+
+ * |     |
+ * |  +--+
+ * |  |  |
+ * +--+--+
+ */
+			.highlightTopLeftCorner {
+				&::before {
+					z-index: 3;
+					content: "";
+					position: absolute;
+					// border-top: solid $highlight-line-size $highlight-color;
+					// border-left: solid $highlight-line-size $highlight-color;
+					box-sizing: border-box;
+					// height: calc(50% + #{$highlight-line-size / 2});
+					// top: 50%;
+					// margin-top: $highlight-line-size / -2;
+					// right: 0;
+					// width: calc(50% + #{$highlight-line-size / 2});
+				}
+			}
+
+			/**
+ * +--+--+
+ * |  |  |
+ * |  |  |
+ * |  +->|
+ * +-----+
+ */
+			.highlightBottomLeftCorner {
+				// $arrow-size: 7px;
+				z-index: 3;
+
+				&::before {
+					content: "";
+					position: absolute;
+					// border-bottom: solid $highlight-line-size $highlight-color;
+					// border-left: solid $highlight-line-size $highlight-color;
+					box-sizing: border-box;
+					// height: calc(100% + #{$highlight-line-size / 2});
+					// top: 0;
+					// right: $arrow-size;
+					// width: calc(50% - #{$arrow-size - ($highlight-line-size / 2)});
+				}
+
+				&::after {
+					content: "";
+					position: absolute;
+					height: 0;
+					right: 0;
+					top: 100%;
+					// margin-top: -1 * $arrow-size;
+					// border-top: $arrow-size solid transparent;
+					// border-bottom: $arrow-size solid transparent;
+					// border-left: $arrow-size solid $highlight-color;
+				}
+			}
+		}
+	}
+}