com.phloxui/styles/component/SignalsIndicator.less

PhloxUI Ng2+ Framework

/** signals **/
.phx-signals-indicator{
	>.sizing-box {
	  height: @SIGNAL_INDICATOR_HEIGHT;
	  width: @SIGNAL_INDICATOR_WIDTH;
	}

	>.signal-bars {
	  display: inline-block;
	}

	>.signal-bars .bar {
	  width: @SIGNAL_INDICATOR_BAR_WIDTH;
	  display: inline-flex;
	  border-radius: @SIGNAL_INDICATOR_BAR_RADIAN;

	  background-color: extract(@CLR_1, 8);
	}

	>.signal-bars .bar.first-bar  { height: @SIGNAL_INDICATOR_FIRST_BAR_HEIGHT; }
	>.signal-bars .bar.second-bar { height: @SIGNAL_INDICATOR_SECOND_BAR_HEIGHT; margin-left: @SIGNAL_INDICATOR_BAR_SPACE; }
	>.signal-bars .bar.third-bar  { height: @SIGNAL_INDICATOR_THIRD_BAR_HEIGHT; margin-left: @SIGNAL_INDICATOR_BAR_SPACE; }
	>.signal-bars .bar.fourth-bar { height: @SIGNAL_INDICATOR_FOURTH_BAR_HEIGHT; margin-left: @SIGNAL_INDICATOR_BAR_SPACE; }

	>.good .bar {
	  background-color: @CLR_BRAND;
	  border: thin solid darken(@CLR_BRAND, 7%);
	}
	>.bad .bar {
	  background-color: #e74c3c;
	  border: thin solid darken(#e74c3c, 20%);
	}
	>.ok .bar {
	  background-color: #f1c40f;
	  border: thin solid darken(#f1c40f, 7%);
	}

	>.four-bars .bar:not(.fifth-bar),
	>.three-bars .bar:not(.fourth-bar),
	>.one-bar .bar:not(.fourth-bar):not(.third-bar):not(.second-bar),
	>.two-bars .bar:not(.fourth-bar):not(.third-bar) {
		background-color: extract(@CLR_1, 1);
	}
}

/** end signals **/