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

PhloxUI Ng2+ Framework

.phx-tab-pane {
	height: 100%;
	width: 100%;
	overflow: hidden;
	padding-bottom: @RECORD_VIEW_HEADER_HEIGHT;

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

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

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

		.tab-group-wrapper{
			display: inherit;
			padding-left: @MENU_TOP_BTN_WIDTH;
			// padding-right: @MENU_TOP_BTN_WIDTH  * 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);

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

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

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

	> .body{
		// border-top: @MENU_TOP_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		border-top: @TAB_BAR_BORDER_TOP_THICKNESS solid @CLR_BORDER_COLOR;

		.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%;
		}

		> 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%;
	}
}