WMDE-Fisch has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/399830 )
Change subject: Use LESS for CSS
......................................................................
Use LESS for CSS
Change-Id: I1904335d9d23ed24e8633a3768dd89a995b2c6c1
---
M Gruntfile.js
M extension.json
D modules/ext.advancedSearch.css
A modules/ext.advancedSearch.less
4 files changed, 158 insertions(+), 157 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/AdvancedSearch
refs/changes/30/399830/1
diff --git a/Gruntfile.js b/Gruntfile.js
index 046670d..11f4eb0 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -15,6 +15,7 @@
stylelint: {
all: [
'**/*.css',
+ '**/*.less',
'!node_modules/**',
'!vendor/**'
]
diff --git a/extension.json b/extension.json
index ddd3003..f2b9455 100644
--- a/extension.json
+++ b/extension.json
@@ -46,7 +46,7 @@
"modules/ext.advancedSearch.init.js"
],
"styles": [
- "modules/ext.advancedSearch.css"
+ "modules/ext.advancedSearch.less"
],
"skinStyles": {
"timeless": [
diff --git a/modules/ext.advancedSearch.css b/modules/ext.advancedSearch.css
deleted file mode 100644
index 933af11..0000000
--- a/modules/ext.advancedSearch.css
+++ /dev/null
@@ -1,156 +0,0 @@
-.mw-advancedSearch-container textarea,
-.mw-advancedSearch-container input {
- /* This will flip with CSSJanus */
- direction: ltr;
-}
-
-.mw-advancedSearch-searchPreview-label {
- font-weight: bold;
- margin-right: 0.3125em;
-}
-
-.mw-advancedSearch-searchPreview-previewPill > .oo-ui-labelElement-label >
.mw-advancedSearch-searchPreview-content {
- display: inline-block;
- text-overflow: ellipsis;
- overflow: hidden;
- max-width: 5em;
- padding-left: 0.3em;
- vertical-align: bottom;
-}
-
-.mw-advancedSearch-fieldContainer {
- background: linear-gradient( rgba( 0, 0, 0, 0.1 ), #fff 0.5em );
- border: solid 1px #c8ccd1;
- border-top: 0;
- box-sizing: border-box;
- margin: 0;
- margin-top: -1px;
- max-width: 50em;
- padding: 1em;
-}
-
-.mw-advancedSearch-fieldContainer .oo-ui-fieldLayout {
- margin-top: 0.3em;
-}
-
-.mw-advancedSearch-fieldContainer fieldset {
- border: 0;
- border-top: solid 1px #c8ccd1;
- margin-top: 1em;
-}
-
-/* FIXME: Why does this try to mimic a <fieldset><legend> element instead of
being an actual one? */
-/* See https://phabricator.wikimedia.org/T151061 and
https://gerrit.wikimedia.org/r/#/c/325243/ */
-.mw-advancedSearch-fieldContainer .oo-ui-labelElement >
.oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
- background: #fff;
- color: #666;
- font-weight: normal;
- font-size: 1em;
- left: 1em;
- line-height: 1;
- padding: 0 0.2em;
- position: relative;
- top: -0.8em;
-}
-
-.mw-advancedSearch-fieldContainer
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right >
.oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
- margin-right: 1%;
-}
-
-.mw-advancedSearch-fieldContainer
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right >
.oo-ui-fieldLayout-body > .oo-ui-fieldLayout-help {
- float: right;
-}
-
-.mw-advancedSearch-expandablePane {
- clear: both;
- display: block;
- margin: 0;
- max-width: 50em;
- padding-top: 0.3em;
-}
-
-.mw-advancedSearch-expandablePane-button,
-.mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button {
- width: 100%;
-}
-
-.mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button {
- text-align: left;
- font-weight: normal;
- white-space: normal;
-}
-
-.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget.oo-ui-buttonElement-pressed
> .oo-ui-buttonElement-button {
- background-color: #f8f9fa;
-}
-
-.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget
> .oo-ui-buttonElement-button:hover {
- background-color: #f8f9fa;
- color: #222;
-}
-
-.mw-advancedSearch-expandablePane-pane {
- display: none;
-}
-
-.mw-advancedSearch-filetype-presets .oo-ui-multioptionWidget {
- display: inline-block;
- margin-right: 1em; /* TODO margin-left for LTR? */
-}
-
-.mw-advancedSearch-filesize .operator-container,
-.mw-advancedSearch-filesize .value-container {
- width: 50%;
- float: left;
- box-sizing: border-box;
-}
-
-.mw-advancedSearch-filesize .operator-container {
- padding-right: 1em;
-}
-
-.mw-advancedSearch-namespacePresets {
- float: right;
-}
-
-.mw-advancedSearch-namespacePresets div {
- display: inline;
-}
-
-.mw-advancedSearch-namespace-selection label {
- display: inline-block;
-}
-
-.mw-advancedSearch-namespace-selection {
- border-radius: 2px;
- border: solid 1px #a2a9b1;
- background: rgb( 248, 249, 250 );
- box-sizing: border-box;
- margin-top: 0.3em;
- max-width: 50em;
- padding: 0.4em 0.9375em;
- position: relative;
- border-bottom: 0;
-}
-
-.mw-advancedSearch-namespace-selection label.oo-ui-checkboxMultioptionWidget {
- padding: 0;
-}
-
-.mw-advancedSearch-namespaceFilter {
- top: -2px;
-}
-
-.mw-advancedSearch-namespaceFilter .oo-ui-tagMultiselectWidget-handle {
- border-top: 0;
-}
-
-/* FIXME: Might be removed when indicator alignment is unified in OOjs UI */
-.mw-advancedSearch-namespaceFilter.oo-ui-indicatorElement
.oo-ui-tagMultiselectWidget-handle .oo-ui-indicatorElement-indicator {
- margin: 0 0.9375em;
-}
-
-.oo-ui-popupWidget-popup .mw-advancedSearch-tooltip-head {
- font-size: 110%;
- color: #999;
-}
diff --git a/modules/ext.advancedSearch.less b/modules/ext.advancedSearch.less
new file mode 100644
index 0000000..7689204
--- /dev/null
+++ b/modules/ext.advancedSearch.less
@@ -0,0 +1,156 @@
+.mw-advancedSearch-container textarea,
+.mw-advancedSearch-container input {
+ /* This will flip with CSSJanus */
+ direction: ltr;
+}
+
+.mw-advancedSearch-searchPreview-label {
+ font-weight: bold;
+ margin-right: 0.3125em;
+}
+
+.mw-advancedSearch-searchPreview-previewPill > .oo-ui-labelElement-label >
.mw-advancedSearch-searchPreview-content {
+ display: inline-block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 5em;
+ padding-left: 0.3em;
+ vertical-align: bottom;
+}
+
+.mw-advancedSearch-fieldContainer {
+ background: linear-gradient( rgba( 0, 0, 0, 0.1 ), #fff 0.5em );
+ border: solid 1px #c8ccd1;
+ border-top: 0;
+ box-sizing: border-box;
+ margin: 0;
+ margin-top: -1px;
+ max-width: 50em;
+ padding: 1em;
+
+ .oo-ui-fieldLayout {
+ margin-top: 0.3em;
+ }
+
+ fieldset {
+ border: 0;
+ border-top: solid 1px #c8ccd1;
+ margin-top: 1em;
+ }
+
+ /* FIXME: Why does this try to mimic a <fieldset><legend> element
instead of being an actual one? */
+ /* See https://phabricator.wikimedia.org/T151061 and
https://gerrit.wikimedia.org/r/#/c/325243/ */
+ .oo-ui-labelElement > .oo-ui-fieldsetLayout-header >
.oo-ui-labelElement-label {
+ background: #fff;
+ color: #666;
+ font-weight: normal;
+ font-size: 1em;
+ left: 1em;
+ line-height: 1;
+ padding: 0 0.2em;
+ position: relative;
+ top: -0.8em;
+ }
+
+ .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right >
.oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+ margin-right: 1%;
+ }
+
+ .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right >
.oo-ui-fieldLayout-body > .oo-ui-fieldLayout-help {
+ float: right;
+ }
+}
+
+.mw-advancedSearch-expandablePane {
+ clear: both;
+ display: block;
+ margin: 0;
+ max-width: 50em;
+ padding-top: 0.3em;
+}
+
+.mw-advancedSearch-expandablePane-pane {
+ display: none;
+}
+
+.mw-advancedSearch-expandablePane-button {
+ width: 100%;
+ .oo-ui-buttonElement-button {
+ width: 100%;
+ text-align: left;
+ font-weight: normal;
+ white-space: normal;
+ }
+
+ &.oo-ui-widget-enabled.oo-ui-buttonWidget {
+ .oo-ui-buttonElement-button:hover {
+ background-color: #f8f9fa;
+ color: #222;
+ }
+
+ &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
+ background-color: #f8f9fa;
+ }
+ }
+}
+
+.mw-advancedSearch-filetype-presets .oo-ui-multioptionWidget {
+ display: inline-block;
+ margin-right: 1em; /* TODO margin-left for LTR? */
+}
+
+.mw-advancedSearch-filesize {
+ .operator-container,
+ .value-container {
+ width: 50%;
+ float: left;
+ box-sizing: border-box;
+ }
+
+ .operator-container {
+ padding-right: 1em;
+ }
+}
+
+.mw-advancedSearch-namespacePresets {
+ float: right;
+ div {
+ display: inline;
+ }
+}
+
+.mw-advancedSearch-namespace-selection {
+ border-radius: 2px;
+ border: solid 1px #a2a9b1;
+ background: rgb( 248, 249, 250 );
+ box-sizing: border-box;
+ margin-top: 0.3em;
+ max-width: 50em;
+ padding: 0.4em 0.9375em;
+ position: relative;
+ border-bottom: 0;
+
+ label {
+ display: inline-block;
+ &.oo-ui-checkboxMultioptionWidget {
+ padding: 0;
+ }
+ }
+}
+
+.mw-advancedSearch-namespaceFilter {
+ top: -2px;
+ .oo-ui-tagMultiselectWidget-handle {
+ border-top: 0;
+ }
+
+ /* FIXME: Might be removed when indicator alignment is unified in OOjs
UI */
+ &.oo-ui-indicatorElement .oo-ui-tagMultiselectWidget-handle
.oo-ui-indicatorElement-indicator {
+ margin: 0 0.9375em;
+ }
+}
+
+.oo-ui-popupWidget-popup .mw-advancedSearch-tooltip-head {
+ font-size: 110%;
+ color: #999;
+}
--
To view, visit https://gerrit.wikimedia.org/r/399830
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1904335d9d23ed24e8633a3768dd89a995b2c6c1
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/AdvancedSearch
Gerrit-Branch: master
Gerrit-Owner: WMDE-Fisch <christoph.jau...@wikimedia.de>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
