com.phloxui/styles/lib/component/dataview/TabPane.less

PhloxUI Ng2+ Framework

.phx-tab-pane {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;

	> .header{
		height: @TAB_HEADER_HEIGHT;
		position: relative;
    z-index: 1;

		> div {
			display: inline-block;
			height: 100%;
		}

		.adding-group{
			float: left;
			width: @PAGE_PANE_HEIGHT;
			position: absolute;
			left: 0;
		}

		.tab-group-wrapper{
			display: inherit;
			padding-left: @PAGE_PANE_HEIGHT;
			// padding-right: @PAGE_PANE_HEIGHT  * 3;
			position: absolute;
			width: 100%;
			background: none;
		}

		.tab-group{
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
			width: 100%;
			height: 100%;
			background-color: extract(@CLR_1, 9);
			scrollbar-width: thin;
			  
			&::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
				background-color: extract(@CLR_1, 9);
			}
	  
			&::-webkit-scrollbar {
				height: @SCROLL_WIDTH_HEIGHT;
				background-color: extract(@CLR_1, 9);
			}
	  
			&::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background-color: extract(@CLR_1, 5);
			}  

			> div {
				display: inline-block;
				height: 100%;
			}
		}

		.button-group-wrapper{
			background-color: #FF00FE;
			display: inherit;
			margin-left: @PAGE_PANE_HEIGHT;
			margin-right: @PAGE_PANE_HEIGHT  * 3;
		}

		.button-group{
			position: absolute;
			right: 0;
			width: @PAGE_PANE_HEIGHT  * 3;
      		background-color: extract(@CLR_1, 9);
		}
	}

	> .body{
		border-top: @TAB_BAR_BORDER_TOP_THICKNESS solid @CLR_BORDER_COLOR;
		width: 100%;
		height: calc(100% - @TAB_HEADER_HEIGHT); 

		.form-body{
			float: left;
			height: 100%;
		}

		> .left{
			background-color: extract(@CLR_1, 8);
			width: 30%;

			// has left right to be 70%
			& + .right{
				width: 70%;
			}
		}
		> .right{
			width: 100%;
		}

		>.body-wrapper {
			overflow: auto;
			width: 100%;
			height: 100%;

			&.no-overflow {
				overflow: hidden;
			}

			> phx-component-wrapper + *{
				display: none;
			}

			> phx-component-wrapper.active + *{
				display: block;
			}
		}
	}

	.tab-label{
		border-right: @TAB_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		display: inline-block;
		color: extract(@CLR_0, 6);
		// cursor:default;
		cursor:pointer;

		&.active{
			// background-color: extract(@CLR_BRAND_HUE, 4);
			// color: @CLR_BRAND_FONT;
			background-color: hsv(0, 0%, 99%);
			color: extract(@CLR_BRAND_HUE, 5);
		}

		&.insert-right{
			border-right: @TAB_INSERT_BORDER_THICKNESS solid extract(@CLR_0, 6);
		}

		&.insert-left{
			border-left: @TAB_INSERT_BORDER_THICKNESS solid extract(@CLR_0, 6);
		}
	}
}

.no-tab-page{
	width: 100%;
	height: 100%;

	> div{
		text-align: center;
	}

	> div:first-child{
		margin-top: 15%;
	}
}

phx-tab{
	display: block;
	height: 100%;

}

.phx-tab{
	padding-left: @PHLOX_TAB_PADDING_LEFT;
	padding-right: @PHLOX_TAB_PADDING_RIGHT;

	.tab-name{
		display: table-cell;
		vertical-align: middle;
		padding-right: 22pt;
	}

	.tab-vertical-ellipsis{
		display: table-cell;
	}

	&.dirty > .tab-name:before{
		content: '*';
	}

	button {
    &.fake{
      opacity: 0;
      width: 0;
      height: 0;
    }
  }
}