x4js 2.0.20 → 2.0.22

package/lib/src/components/gridview/gridview.module.scss

@@ -1,324 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file gridview.module.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-
-:root {
-	--gridview-background: white;
-	--gridview-border: var( --border );
-	
-	--gridview-header-cell-background: white;
-	--gridview-header-cell-color: black;
-	--gridview-header-cell-vline: #f0f0f0;
-	--gridview-header-cell-border: #cccccc;
-
-	--grid-check-background: var( --accent-background );
-	--grid-check-color: white;
-	--grid-check-background-hover: white;
-	--grid-check-color-hover: var( --accent-background );
-
-	--grid-perc-background: var( --accent-background );
-	--grid-perc-color: white;
-	--grid-perc-background-hover: white;
-	--grid-perc-color-hover: var( --accent-background );
-
-
-	--gridview-cell-color: black;
-	--gridview-cell-color-sel: white;
-	--gridview-cell-vline: var( --border );
-
-	--gridview-row-background: white;
-	--gridview-row-odd-background: white;
-	--gridview-row-border: var( --border );
-
-	--gridview-row-background-hover: var( --background-secondary );
-	--gridview-row-background-hover-sel: var(--color-primary-a50);
-	--gridview-row-background-sel: var( --accent-background );
-	--gridview-row-color-sel: var( --accent-color );
-
-	--gridview-fix-border: var( --accent-background );
-}
-
-
-
-.x4gridview {
-
-	--left: 0px;
-	--top: 0px;
-	
-	--fixed-width: 0;
-	--fixed-height: 30px;
-	--footer-height: 24px;
-
-	--row-height: 30px;
-	
-	position: relative;
-	overflow: hidden;
-	margin: 5px;
-	outline: none;
-
-	background-color: var( --gridview-background );
-	border: 1px solid var( --gridview-border );
-		
-	.cell {
-		padding: 4px;
-		display: flex;
-		align-items: center;
-		transition: border-bottom-color 0.3s ease, background-color 0.3s ease;
-		min-width: 16px;
-
-		.cell-check {
-			width: 16px;
-			height: 16px;
-			background-color: var( --grid-check-background );
-			color: var( --grid-check-color );
-			padding: 4px;
-			border-radius: 8px;
-			margin: 0 auto;
-		}
-	}
-
-
-	.x4viewport {
-		position: absolute;
-		overflow: auto;
-		right: 0;
-		bottom: var( --footer-height );	
-		left: var( --fixed-width );
-		top: var( --fixed-height );	
-		width: unset;
-	}
-
-	.body {
-		position: absolute;
-		overflow: hidden;
-
-		right: var( --scrollbar-size );
-		bottom: var( --scrollbar-size );
-		left: 0;
-		top: 0;
-	}
-	.row {
-		position: absolute;
-		left: 0;
-		top: 0;
-		display: flex;
-
-		overflow: hidden;
-		height: var( --row-height );
-		border-bottom: 1px solid var( --gridview-row-border );
-
-		.cell {
-			height: 100%;
-			overflow: hidden;
-			white-space: nowrap;
-
-			border-right: 1px solid var( --gridview-cell-vline );
-
-			&> .x4icon:not(.cell-check) {
-				height: 100%;
-			}
-
-			&> .x4image {
-				width: 100%;
-				height: 100%;
-			}
-
-			.percent {
-				width: 100%;
-				border: 1px solid var( --border );
-				height: 8px;
-				background-color: white;
-				overflow: hidden;
-
-				div {
-					background-color: var(--grid-perc-background);
-					height: 100%;
-				}
-			}
-		}
-	}
-
-	.row.selected {
-		background-color: var( --gridview-row-background-sel );
-		color: var( --gridview-cell-color-sel );
-		
-		.cell {
-			
-			.cell-check {
-				background-color: var( --grid-check-background-hover );
-				color: var( --grid-check-color-hover );
-			}
-		}
-	}
-
-	.row:hover:not(.selected),
-	.row.hover:not(.selected) {
-		background-color: var( --gridview-row-background-hover );
-
-		.cell {
-			.cell-check {
-				background-color: var( --grid-check-background-hover );
-				color: var( --grid-check-color-hover );
-			}
-		}
-	}
-
-	.row:hover.selected,
-	.row.hover.selected {
-		background-color: var( --gridview-row-background-hover-sel );
-	//	color: var( --gridview-cell-color );
-	}
-
-	.col-header,
-	.col-footer {
-		position: absolute;
-		background-color: var( --gridview-header-cell-background );
-		touch-action: none;
-
-		
-		left: calc( var( --fixed-width ) + var( --left ) );
-		&.fixed {
-			left: 0;
-			z-index: 2;
-		}
-		
-		z-index: 1;
-
-		display: inline-flex;
-		align-items: center;
-
-		color: black;
-		font-weight: 500;
-		justify-content: center;
-
-		.cell {
-			position: relative;
-			height: 100%;
-			display: flex;
-
-			justify-content: center;
-			border-right: 1px solid var( --gridview-header-cell-vline );
-
-			&> .x4simpletext {
-				flex-grow: 1;
-				text-overflow: ellipsis;
-				overflow: hidden;
-			}
-
-			.sorter {
-				display: none;
-				flex-shrink: 0;
-				width: 1em;
-			}
-
-			&.sorted .sorter {
-				background-image: url("./arrow-down-light.svg");
-				display: block;
-				width: 20px;
-				height: 0.7em;
-				background-repeat: no-repeat;
-				background-position: 50% 50%;
-			}
-			
-			&.sorted.desc .sorter {
-				background-image: url("./arrow-up-light.svg");
-			}
-			
-			.x-c-sizer:hover {
-				width: 8px;
-			}
-		}
-
-		&.fixed .cell:last-child {
-			border-right-color: var( --gridview-fix-border );
-		}
-
-		&:hover .cell {
-			border-right-color: var( --border-hover );
-		}
-	}
-
-	.col-header {
-		top: 0;
-		height: var( --fixed-height );
-		
-		border-bottom: 1px solid var( --gridview-header-cell-border );
-		
-		.cell {
-			overflow: hidden;
-			border-bottom: 1px solid transparent;
-			
-			&:hover {
-				//background-color: var( --color-10 );
-				border-bottom-color: var( --gridview-row-background-hover );
-			}
-		}
-	}
-	
-	.col-footer {
-		border-top: 1px solid var( --gridview-header-cell-border );
-		height: var( --footer-height );
-		
-		bottom: 0;
-
-		.cell {
-			border-top: 1px solid transparent;
-			
-			&:hover {
-				//background-color: var( --color-10 );
-				//border-top-color: var( --gridview-row-background-hover );
-				background-color: var( --gridview-row-background-hover );
-			}
-		}
-	}
-
-	.row-header {
-		position: absolute;
-		left: 0;
-		top: calc( var( --fixed-height ) + var( --top ) );
-		width: var( --fixed-width );
-		bottom: 0;
-		
-		background-color: white;
-		z-index: 1;
-
-		.row {
-			position: absolute;
-			display: inline-flex;
-		}
-
-		.cell {
-			border-right: 1px solid var( --gridview-cell-vline );
-			border-bottom: 1px solid var(--gridview-row-border );
-			height: var( --row-height );
-
-			&> .x4simpletext {
-				margin: 0 auto;
-			}
-
-			&:last-child {
-				border-right: 1px solid var( --gridview-fix-border );
-			}
-		}
-
-		.cell-out {
-			position: absolute;
-			background-color: var( --color-gray-0 );
-			width: 100%;
-			height: var( --row-height );
-		}
-	}
-}