com.phloxui
Version:
PhloxUI Ng2+ Framework
97 lines (87 loc) • 2.29 kB
text/less
/** signals **/
.phx-signals-indicator{
.signals-indicator.four-bars {
svg {
path {
fill: #000000 ;
}
}
}
.signals-indicator.three-bars {
svg {
path:not(:last-child) {
fill: #000000 ;
}
}
}
.signals-indicator.two-bars {
svg {
path:nth-child(-n+3) {
fill: #000000 ;
}
}
}
.signals-indicator.one-bar {
svg {
path:nth-child(-n+2) {
fill: #000000 ;
}
}
}
// .signals-indicator.four-bars:before {
// font-family: "PhloxGlyphicons";
// content: "Z";
// }
// .signals-indicator.three-bars:before {
// font-family: "PhloxGlyphicons";
// content: "Y";
// }
// .signals-indicator.two-bars:before {
// font-family: "PhloxGlyphicons";
// content: "X";
// }
// .signals-indicator.one-bar:before {
// font-family: "PhloxGlyphicons";
// content: "W";
// }
// >.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 **/