polestar-icons
Version:
Polestar UI Icons
174 lines (152 loc) • 5.47 kB
CSS
/* 모든 svg 공통 클래스 */
.ps-svg-icon {
}
.ps-svg-icon[class~="disabled"] path,
.ps-svg-icon[class~="disabled"] circle,
.ps-svg-icon[class~="disabled"] rect,
.ps-svg-icon[class~="disabled"] polygon,
.ps-svg-icon[class~="disabled"] ellipse {
fill: #aaa;
}
.ps-svg-icon[class~="success"] path,
.ps-svg-icon[class~="success"] circle,
.ps-svg-icon[class~="success"] rect,
.ps-svg-icon[class~="success"] polygon,
.ps-svg-icon[class~="success"] ellipse {
fill: #009603;
}
.ps-svg-icon[class~="warning"] path,
.ps-svg-icon[class~="warning"] circle,
.ps-svg-icon[class~="warning"] rect,
.ps-svg-icon[class~="warning"] polygon,
.ps-svg-icon[class~="warning"] ellipse {
fill: #f3ac00;
}
.ps-svg-icon[class~="critical"] path,
.ps-svg-icon[class~="critical"] circle,
.ps-svg-icon[class~="critical"] rect,
.ps-svg-icon[class~="critical"] polygon,
.ps-svg-icon[class~="critical"] ellipse {
fill: #f40000;
}
/* aix */
.ps-svg-icon[class~="disabled"].ps-svg-icon-aix path:nth-of-type(1),
.ps-svg-icon[class~="success"].ps-svg-icon-aix path:nth-of-type(1),
.ps-svg-icon[class~="warning"].ps-svg-icon-aix path:nth-of-type(1),
.ps-svg-icon[class~="critical"].ps-svg-icon-aix path:nth-of-type(1) {
opacity: 0.8;
}
.ps-svg-icon[class~="disabled"].ps-svg-icon-aix path:nth-of-type(2),
.ps-svg-icon[class~="success"].ps-svg-icon-aix path:nth-of-type(2),
.ps-svg-icon[class~="warning"].ps-svg-icon-aix path:nth-of-type(2),
.ps-svg-icon[class~="critical"].ps-svg-icon-aix path:nth-of-type(2) {
opacity: 1;
}
.ps-svg-icon[class~="disabled"].ps-svg-icon-aix .aix_svg__st2,
.ps-svg-icon[class~="success"].ps-svg-icon-aix .aix_svg__st2,
.ps-svg-icon[class~="warning"].ps-svg-icon-aix .aix_svg__st2,
.ps-svg-icon[class~="critical"].ps-svg-icon-aix .aix_svg__st2 {
fill: #fff;
}
/* hpux */
.ps-svg-icon[class~="disabled"].ps-svg-icon-hpux path:nth-of-type(1),
.ps-svg-icon[class~="success"].ps-svg-icon-hpux path:nth-of-type(1),
.ps-svg-icon[class~="warning"].ps-svg-icon-hpux path:nth-of-type(1),
.ps-svg-icon[class~="critical"].ps-svg-icon-hpux path:nth-of-type(1) {
opacity: 0.7;
}
.ps-svg-icon[class~="disabled"].ps-svg-icon-hpux .hpux_svg__st1
.ps-svg-icon[class~="success"].ps-svg-icon-hpux .hpux_svg__st1,
.ps-svg-icon[class~="warning"].ps-svg-icon-hpux .hpux_svg__st1,
.ps-svg-icon[class~="critical"].ps-svg-icon-hpux .hpux_svg__st1 {
opacity: 1;
}
/* linux */
.ps-svg-icon[class~="disabled"].ps-svg-icon-linux .linux_svg__st0,
.ps-svg-icon[class~="success"].ps-svg-icon-linux .linux_svg__st0,
.ps-svg-icon[class~="warning"].ps-svg-icon-linux .linux_svg__st0,
.ps-svg-icon[class~="critical"].ps-svg-icon-linux .linux_svg__st0 {
opacity: 1;
}
.ps-svg-icon[class~="disabled"].ps-svg-icon-linux .linux_svg__st1,
.ps-svg-icon[class~="success"].ps-svg-icon-linux .linux_svg__st1,
.ps-svg-icon[class~="warning"].ps-svg-icon-linux .linux_svg__st1,
.ps-svg-icon[class~="critical"].ps-svg-icon-linux .linux_svg__st1 {
opacity: 0.6;
fill: #fff;
}
.ps-svg-icon[class~="disabled"].ps-svg-icon-linux .linux_svg__st2,
.ps-svg-icon[class~="success"].ps-svg-icon-linux .linux_svg__st2,
.ps-svg-icon[class~="warning"].ps-svg-icon-linux .linux_svg__st2,
.ps-svg-icon[class~="critical"].ps-svg-icon-linux .linux_svg__st2 {
fill: #fff;
}
/* windows */
.ps-svg-icon[class~="disabled"].ps-svg-icon-windows path:nth-of-type(1),
.ps-svg-icon[class~="success"].ps-svg-icon-windows path:nth-of-type(1),
.ps-svg-icon[class~="warning"].ps-svg-icon-windows path:nth-of-type(1),
.ps-svg-icon[class~="critical"].ps-svg-icon-windows path:nth-of-type(1) {
opacity: 0.6;
}
.ps-svg-icon[class~="disabled"].ps-svg-icon-windows path:nth-of-type(2),
.ps-svg-icon[class~="success"].ps-svg-icon-windows path:nth-of-type(2),
.ps-svg-icon[class~="warning"].ps-svg-icon-windows path:nth-of-type(2),
.ps-svg-icon[class~="critical"].ps-svg-icon-windows path:nth-of-type(2) {
opacity: 0.4;
}
.ps-svg-icon[class~="disabled"].ps-svg-icon-windows path:nth-of-type(3),
.ps-svg-icon[class~="success"].ps-svg-icon-windows path:nth-of-type(3),
.ps-svg-icon[class~="warning"].ps-svg-icon-windows path:nth-of-type(3),
.ps-svg-icon[class~="critical"].ps-svg-icon-windows path:nth-of-type(3) {
opacity: 1;
}
.ps-svg-icon[class~="disabled"].ps-svg-icon-windows path:nth-of-type(4),
.ps-svg-icon[class~="success"].ps-svg-icon-windows path:nth-of-type(4),
.ps-svg-icon[class~="warning"].ps-svg-icon-windows path:nth-of-type(4),
.ps-svg-icon[class~="critical"].ps-svg-icon-windows path:nth-of-type(4) {
opacity: 0.8;
}
/* size 속성 사용하는 경우 .ps-svg-size 추가됨 */
.ps-svg-size {
/* width: 0.875em; width/height 값 지정시 width: 1em; 없어야 함*/
width: 1em;
}
.ps-svg-size-2x {
font-size: 2em;
}
.ps-svg-size-3x {
font-size: 3em;
}
.ps-svg-size-4x {
font-size: 4em;
}
.ps-svg-size-5x {
font-size: 5em;
}
.ps-svg-size-6x {
font-size: 6em;
}
.ps-svg-size-7x {
font-size: 7em;
}
.ps-svg-size-8x {
font-size: 8em;
}
.ps-svg-size-9x {
font-size: 9em;
}
.svg-test-linux path {
fill: #e4ae19;
}
/* .svg-test-server path {
fill: #e4ae19;
} */
.svg-test-server-device path:nth-of-type(5) {
fill: #6123c5;
}
/* .svg-test-network-switch {
font-size: 9em;
} */
.svg-test-window-service-monitor {
fill: #4abe6d;
}