com.phloxui/styles/component/ComponentPopover.less

PhloxUI Ng2+ Framework

/* component popover */
phx-component-popover {
	display: block;
}

.phx-component-popover {
	display: none;
	width: @COMPONENT_POPOVER_WIDTH;
	height: @COMPONENT_POPOVER_HEIGHT;
  position: absolute;

	>.container-wrapper{
		  width: 100%;
	    height: 100%;
	    position: relative;
	}
	/* end container wrapper */

	.container {
	    width: 100%;
	    height: 100%;
	    background: extract(@CLR_1, 9);
	    border: @COMPONENT_POPOVER_BORDER;
	    position: relative;
	    padding-left: 0;
	    padding-right: 0;
	    box-shadow: @COMPONENT_POPOVER_BOX_SHADOW;
	}

	.container-after,
	.container-before {
	    content: '';
	    display: block;
	    position: absolute;
	    left: 100%;
	    width: 0;
	    height: 0;
	    border-style: solid;
	}

	.container-after {
	    top: 10pt;
	    border-color: transparent transparent transparent extract(@CLR_1, 9);
	    border-width: 8pt;
	    left: -13pt;
	}

	.container-before {
	    top: 9pt;
	    border-color: transparent transparent transparent @CLR_BORDER_COLOR;
	    border-width: 9pt;
	    left: -16pt;
	}

	&.left {
		.container {
			>.wrapper {

		    }
		}
		.container-after,
		.container-before {
		    right: 100%;
		}

		.container-after {
		    border-color:  transparent extract(@CLR_1, 9) transparent transparent;
		}

		.container-before {
		    border-color:  transparent @CLR_BORDER_COLOR transparent transparent;
		}
	}

	&.right {
		.container {
			>.wrapper {
		    	.content-wrapper{
			    	padding-left: @COMPONENT_POPOVER_PADDING_BG;
			    	padding-right: 0;
			    }
		    }
		}
		.container-after,
		.container-before {

		}
		.container-after {
			left: auto;
		    right: -14pt;
		}

		.container-before {
			left: auto;
		    right: -17pt;
		}

		>.container-wrapper{

		}
	}

  &.top {
		.container {
			>.wrapper {

		    }
		}
		.container-after,
		.container-before {
		    right: 100%;
        left: 5pt;
        top: -15pt;
		}

		.container-after {
		    border-color: transparent transparent extract(@CLR_1, 9) transparent;
		}

		.container-before {
		    border-color: transparent transparent @CLR_BORDER_COLOR transparent;
        border-width: 0;
		}
	}

  &.bottom {
		.container {
			>.wrapper {

		    }
		}
		.container-after,
		.container-before {
		    right: 100%;
        left: 5pt;
        top: @COMPONENT_POPOVER_BELOW_ARROW_TOP;
		}

		.container-after {
		    border-color: extract(@CLR_1, 9) transparent transparent transparent;
		}

		.container-before {
		    border-color: @CLR_BORDER_COLOR transparent transparent transparent;
		}
	}

	&.show{
		display: block;
	}

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