setup

src/components/Common/Energy/EnergyCostChart/index.module.css

@@ -0,0 +1,85 @@
+.energyCostChart {
+	height: 1px;
+	flex: 1;
+	padding-top: 8px;
+}
+.energyCostChart .titleBar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: white;
+}
+.energyCostChart .titleBar h2 {
+	margin: 0;
+	font-size: 18px;
+	line-height: 32px;
+	letter-spacing: 1.2px;
+	color: #52fff8;
+}
+
+.energyCostChart .titleBar .legend {
+	display: flex;
+	align-items: center;
+}
+.energyCostChart .titleBar .legend * {
+	font-size: 14px;
+	line-height: 14px;
+	color: #dff1fe;
+}
+
+.energyCostChart .titleBar .legend ul {
+	display: flex;
+	margin: 0;
+	margin-left: 8px;
+	padding: 0;
+	list-style: none;
+	align-items: center;
+}
+.energyCostChart .titleBar .legend ul li {
+	position: relative;
+	margin: 4px;
+	padding-left: 16px;
+}
+.energyCostChart .titleBar .legend ul li::before {
+	content: '';
+	position: absolute;
+	left: 2px;
+	top: 2px;
+	display: inline-block;
+	width: 12px;
+	height: 12px;
+	border-radius: 2px;
+}
+
+.energyCostChart .titleBar .legend ul li:first-child::before {
+	background-color: #ffd160;
+}
+
+.energyCostChart .titleBar .legend ul li:nth-child(2)::before {
+	background-color: #12fff5;
+}
+
+.energyCostChart .titleBar .legend ul li:nth-child(3)::before {
+	background-color: #2760ff;
+}
+
+.radioGroup * {
+	border: none !important;
+	border-radius: 0 !important;
+}
+.radioGroup *:focus-within {
+	box-shadow: none !important;
+}
+
+.radioGroup *::before {
+	width: 0 !important;
+}
+
+.radioGroup_button_wrapper {
+	color: #fff !important;
+	background: #03233c !important;
+}
+
+.radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
+	background: #02457e !important;
+}