com.phloxui/styles/component/editor/ActionButton.less

PhloxUI Ng2+ Framework

.phx-action-button {
	.phlox-transition();
  .FC1L();
	width: @EDITOR_PAGE_ACTION_BUTTON_WIDTH;
	height: @EDITOR_PAGE_ACTION_BUTTON_HEIGHT;
	padding-top: 3pt;
	text-align: center;
	color: @CLR_FIXED_FONT;
	opacity: 0.9;
	cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
	overflow: hidden;
	position: relative;

	// overide button style
	button {
		background-color: transparent;
		border: @ACTION_BUTTON_FOCUS_BORDER_THICKNESS solid transparent;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		height: 100%;
		position: relative;

		&:focus {
			border: @ACTION_BUTTON_FOCUS_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		}
	}

	.group{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;

		& img{
			padding-right: 3pt;
			opacity: 0.9;
      padding-bottom: 2.1pt;
		}
    .FC1L();

		&.more {
			padding-right: @ACTION_BUTTON_MORE_PADDING;
		}
	}

	.more-menu{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;

		>button {
			.wrapper {
				position: relative;
				width: 100%;
				height: 100%;

				>div {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}

				>div:first-child {
					display: flex;
					align-items: center;
					justify-content: center;
					padding-right: @ACTION_BUTTON_MORE_PADDING;
				}

				>div:last-child {
					display: flex;
					align-items: center;
					flex-direction: row-reverse;
					padding-right: @ACTION_BUTTON_MORE_PADDING;
				}
			}
		}
	}

	&.active {
		opacity: 1;
		& img{
			opacity: 1;
		}
	}
}