vendorのCSSを上書きする部分をlessにする

tearaikazuki · Oct 12, 2018 · dad5268 · dad5268
1 parent b590f6d
commit dad5268
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 43 deletions.
diff --git a/app/styles/index.less b/app/styles/index.less
@@ -5,4 +5,4 @@
 @import "./inputs";
 @import "./mixins";
 @import "./tooltips";
-
+@import "./twitchalertsCustom";
diff --git a/vendor/twitchalertsCustom.css → app/styles/twitchalertsCustom.less b/vendor/twitchalertsCustom.css → app/styles/twitchalertsCustom.less
@@ -1,41 +1,41 @@
-@charset "UTF-8";
-/*
-vendor分離前暫定対応
-ニコニコ生放送最適化設定用style
-*/
-
-/*checkbox disabled styleの変更*/
-.section .input-container.disabled .input-wrapper .checkbox label:before {
-    background-color: #91979A;
-    border: #91979A;
-    cursor: default;
-}
-.section .input-container.disabled .input-wrapper .checkbox label:after {
-    background-color: #91979A;
-    border: #91979A;
-    color: #2F3340;
-    cursor: default;
-}
-.section .input-container.disabled .input-wrapper .checkbox label > span {
-    color: #91979A;
-}
-
-/*checkbox styleの変更*/
-.checkbox label:before {
-    border: 2px solid #91979A;
-}
-.checkbox input:checked~label:before {
-    background-color: rgba(252,80,53,.2);
-}
-
-/* fontアイコンの追加に伴うunicode指定の上書き
-※vendorからcssスタイル参照していることで設定パネルの調整が複雑なので、twitchalerts.cssの参照を辞める予定 */
-
-/*checkboxのアイコンのunicode指定変更*/
-.checkbox input:checked~label:after {
-    content: '\e905';
-}
-/*select menu の下向き↓のunicode指定変更*/
-.custom-select-trigger:after {
-    content: '\e910';
-}
+@charset "UTF-8";
+/*
+vendor分離前暫定対応
+ニコニコ生放送最適化設定用style
+*/
+
+/*checkbox disabled styleの変更*/
+.section .input-container.disabled .input-wrapper .checkbox label:before {
+    background-color: #91979A;
+    border: #91979A;
+    cursor: default;
+}
+.section .input-container.disabled .input-wrapper .checkbox label:after {
+    background-color: #91979A;
+    border: #91979A;
+    color: #2F3340;
+    cursor: default;
+}
+.section .input-container.disabled .input-wrapper .checkbox label > span {
+    color: #91979A;
+}
+
+/*checkbox styleの変更*/
+.checkbox label:before {
+    border: 2px solid #91979A;
+}
+.checkbox input:checked~label:before {
+    background-color: rgba(252,80,53,.2);
+}
+
+/* fontアイコンの追加に伴うunicode指定の上書き
+※vendorからcssスタイル参照していることで設定パネルの調整が複雑なので、twitchalerts.cssの参照を辞める予定 */
+
+/*checkboxのアイコンのunicode指定変更*/
+.checkbox input:checked~label:after {
+    content: @n-air--codepoint--check;
+}
+/*select menu の下向き↓のunicode指定変更*/
+.custom-select-trigger:after {
+    content: @n-air--codepoint--down-arrow;
+}
diff --git a/index.html b/index.html
@@ -6,7 +6,6 @@
     <link rel="stylesheet" type="text/css" href="vendor/foundation.min.css" />
     <link href="vendor/roboto.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="vendor/twitchalerts.css" />
-    <link rel="stylesheet" type="text/css" href="vendor/twitchalertsCustom.css" />
     <script src="bundles/renderer.js"></script>
   </head>
   <body>