HTMLForm: Rename file to `ooui.styles.less` and use LESS notation

Turning ooui.styles into a LESS files and take advantage of LESS
notation. This is in preparation for mangling whitespace of
OOUI Special:Pages forms.

Bug: T177668
Change-Id: Icd955358dbbf50712d8a66a0325aa14c8e7963d2

diff --git a/resources/Resources.php b/resources/Resources.php
index b31926b..6d59d5c 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1110,7 +1110,7 @@ return [
                'targets' => [ 'desktop', 'mobile' ],
        ],
        'mediawiki.htmlform.ooui.styles' => [
-               'styles' => 'resources/src/mediawiki/htmlform/ooui.styles.css',
+               'styles' => 'resources/src/mediawiki/htmlform/ooui.styles.less',
                'targets' => [ 'desktop', 'mobile' ],
        ],
        'mediawiki.icon' => [

diff --git a/resources/src/mediawiki/htmlform/ooui.styles.css b/resources/src/mediawiki/htmlform/ooui.styles.css
deleted file mode 100644 (file)
index dbf2b6b..0000000
--- a/resources/src/mediawiki/htmlform/ooui.styles.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/* OOUIHTMLForm styles */
-
-.mw-htmlform-ooui .mw-htmlform-field-HTMLCheckMatrix {
-       width: 100%;
-}
-
-.mw-htmlform-ooui .mw-htmlform-matrix {
-       border-spacing: 0;
-}
-
-.mw-htmlform-ooui .mw-htmlform-matrix td {
-       padding: 0.35em 0.7em;
-       -webkit-transition: background-color 250ms;
-       -moz-transition: background-color 250ms;
-       transition: background-color 250ms;
-}
-
-.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child( even ) td {
-       background-color: #f8f9fa;
-}
-
-.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:not( :first-child ):hover td {
-       background-color: #eaecf0;
-}
-
-.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:first-child td {
-       background-color: #fff;
-}
-
-.mw-htmlform-ooui .mw-htmlform-matrix td.first {
-       margin-right: 5%;
-       width: 39%;
-}
-
-/* Flatlist styling for PHP widgets... */
-.mw-htmlform-flatlist .oo-ui-fieldLayout-align-inline,
-/* ...and for JS widgets */
-.mw-htmlform-flatlist .oo-ui-radioOptionWidget,
-.mw-htmlform-flatlist .oo-ui-checkboxMultioptionWidget {
-       display: inline-block;
-       margin-right: 1em;
-}
-
-.mw-htmlform-ooui .htmlform-tip,
-.mw-htmlform-ooui .mw-htmlform-submit-buttons {
-       margin-top: 1em;
-}

diff --git a/resources/src/mediawiki/htmlform/ooui.styles.less b/resources/src/mediawiki/htmlform/ooui.styles.less
new file mode 100644 (file)
index 0000000..43acb3a
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/ooui.styles.less
@@ -0,0 +1,49 @@
+/* OOUIHTMLForm styles */
+
+.mw-htmlform-ooui {
+       .mw-htmlform-field-HTMLCheckMatrix {
+               width: 100%;
+       }
+
+       .mw-htmlform-matrix {
+               border-spacing: 0;
+
+               td {
+                       padding: 0.35em 0.7em;
+                       -webkit-transition: background-color 250ms;
+                       -moz-transition: background-color 250ms;
+                       transition: background-color 250ms;
+               }
+
+               tbody tr:nth-child( even ) td {
+                       background-color: #f8f9fa;
+               }
+
+               tbody tr:not( :first-child ):hover td {
+                       background-color: #eaecf0;
+               }
+
+               tbody tr:first-child td {
+                       background-color: #fff;
+               }
+
+               td.first {
+                       margin-right: 5%;
+                       width: 39%;
+               }
+       }
+}
+
+/* Flatlist styling for PHP widgets... */
+.mw-htmlform-flatlist .oo-ui-fieldLayout-align-inline,
+/* ...and for JS widgets */
+.mw-htmlform-flatlist .oo-ui-radioOptionWidget,
+.mw-htmlform-flatlist .oo-ui-checkboxMultioptionWidget {
+       display: inline-block;
+       margin-right: 1em;
+}
+
+.mw-htmlform-ooui .htmlform-tip,
+.mw-htmlform-ooui .mw-htmlform-submit-buttons {
+       margin-top: 1em;
+}