Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/116650
Change subject: Convert remaining browser-prefixed rules to LESS mixins
......................................................................
Convert remaining browser-prefixed rules to LESS mixins
Change-Id: I60d0552e5f18558f8c881e2b0ea693259ec909a1
---
M src/styles/OO.ui.Element.less
M src/styles/OO.ui.Layout.less
M src/styles/OO.ui.ToolGroup.less
M src/styles/OO.ui.Toolbar.less
M src/styles/OO.ui.Widget.less
M src/styles/OO.ui.Window.less
M src/styles/mixins.less
7 files changed, 35 insertions(+), 77 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/50/116650/1
diff --git a/src/styles/OO.ui.Element.less b/src/styles/OO.ui.Element.less
index d9ba41c..a21614e 100644
--- a/src/styles/OO.ui.Element.less
+++ b/src/styles/OO.ui.Element.less
@@ -8,11 +8,7 @@
cursor: pointer;
display: inline-block;
vertical-align: middle;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ .oo-ui-unselectable();
> .oo-ui-iconedElement-icon,
> .oo-ui-indicatedElement-indicator {
@@ -47,10 +43,7 @@
.oo-ui-buttonedElement-frameless {
display: inline-block;
position: relative;
- -webkit-transition: opacity 200ms;
- -moz-transition: opacity 200ms;
- -o-transition: opacity 200ms;
- transition: opacity 200ms;
+ .oo-ui-transition(opacity 200ms);
.oo-ui-buttonedElement-button {
&:hover,
@@ -204,7 +197,5 @@
/* OO.ui.ClippableElement */
.oo-ui-clippableElement-clippable {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ .oo-ui-box-sizing(border-box);
}
diff --git a/src/styles/OO.ui.Layout.less b/src/styles/OO.ui.Layout.less
index 73e0901..ac5fd4a 100644
--- a/src/styles/OO.ui.Layout.less
+++ b/src/styles/OO.ui.Layout.less
@@ -136,9 +136,8 @@
.oo-ui-panelLayout {
padding: 1.5em;
width: 100%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+
+ .oo-ui-box-sizing(border-box);
&-scrollable {
overflow-y: auto;
diff --git a/src/styles/OO.ui.ToolGroup.less b/src/styles/OO.ui.ToolGroup.less
index d28f050..d9610f6 100644
--- a/src/styles/OO.ui.ToolGroup.less
+++ b/src/styles/OO.ui.ToolGroup.less
@@ -222,12 +222,10 @@
.oo-ui-tool {
display: inline-block;
width: 100%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
border: solid 1px transparent;
margin: -1px 0;
+ .oo-ui-box-sizing(border-box);
&-link {
display: block;
diff --git a/src/styles/OO.ui.Toolbar.less b/src/styles/OO.ui.Toolbar.less
index e1f6c10..58a7af0 100644
--- a/src/styles/OO.ui.Toolbar.less
+++ b/src/styles/OO.ui.Toolbar.less
@@ -31,19 +31,11 @@
&-tools,
&-actions,
&-shadow {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
- user-select: none;
+ .oo-ui-unselectable();
}
&-actions .oo-ui-popupWidget {
- -webkit-touch-callout: default;
- -webkit-user-select: all;
- -moz-user-select: all;
- -ms-user-select: all;
- user-select: all;
+ .oo-ui-selectable();
}
&-shadow {
@@ -55,10 +47,7 @@
height: 9px;
width: 100%;
pointer-events: none;
- -webkit-transition: opacity 500ms ease-in-out;
- -moz-transition: opacity 500ms ease-in-out;
- -o-transition: opacity 500ms ease-in-out;
- transition: opacity 500ms ease-in-out;
opacity: 0.125;
+ .oo-ui-transition(opacity 500ms ease-in-out);
}
}
diff --git a/src/styles/OO.ui.Widget.less b/src/styles/OO.ui.Widget.less
index 734fdb4..325f7e9 100644
--- a/src/styles/OO.ui.Widget.less
+++ b/src/styles/OO.ui.Widget.less
@@ -109,12 +109,9 @@
.oo-ui-outlineItemWidget {
position: relative;
padding: 0.75em;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
cursor: pointer;
font-size: 1.1em;
+ .oo-ui-unselectable();
&.oo-ui-optionWidget-selected {
background-color: #a7dcff;
@@ -174,12 +171,10 @@
&-adders,
&-movers {
float: left;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
height: 2em;
margin: 0.5em;
padding: 0;
+ .oo-ui-box-sizing(border-box);
}
> .oo-ui-iconedElement-icon {
@@ -218,11 +213,9 @@
/* OO.ui.TextInputWidget */
.oo-ui-textInputWidget {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
width: 20em;
position: relative;
+ .oo-ui-box-sizing(border-box);
input,
textarea {
@@ -234,11 +227,9 @@
box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
padding: 0.5em;
border-radius: 0.25em;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
width: 100%;
resize: none;
+ .oo-ui-box-sizing(border-box);
/* Animation */
.oo-ui-transition(border-color 200ms, box-shadow 200ms);
@@ -329,12 +320,8 @@
height: 2.5em;
border: solid 1px rgba(0,0,0,0.1);
border-radius: 0.25em;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
cursor: pointer;
+ .oo-ui-unselectable();
.oo-ui-box-sizing(border-box);
@@ -494,23 +481,12 @@
}
&-transitioning .oo-ui-popupWidget-popup {
- -webkit-transition: width 100ms, height 100ms, left 100ms;
- -moz-transition: width 100ms, height 100ms, left 100ms;
- -o-transition: width 100ms, height 100ms, left 100ms;
- transition: width 100ms, height 100ms, left 100ms;
- -webkit-transition-timing-function: ease-in-out;
- -moz-transition-timing-function: ease-in-out;
- -o-transition-timing-function: ease-in-out;
- transition-timing-function: ease-in-out;
+ .oo-ui-transition(width 100ms ease-in-out, height 100ms
ease-in-out, left 100ms ease-in-out);
}
&-head {
height: 2.5em;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ .oo-ui-unselectable();
.oo-ui-buttonWidget {
float: right;
@@ -594,9 +570,7 @@
height: 1.5em;
border-radius: 1em;
box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ .oo-ui-box-sizing(border-box);
/* Gray */
border: 1px #c9c9c9 solid;
@@ -620,11 +594,7 @@
left: 0;
border-radius: 1em;
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ .oo-ui-unselectable();
.oo-ui-transition(opacity 200ms ease-in-out);
diff --git a/src/styles/OO.ui.Window.less b/src/styles/OO.ui.Window.less
index bf042c9..793f917 100644
--- a/src/styles/OO.ui.Window.less
+++ b/src/styles/OO.ui.Window.less
@@ -2,11 +2,7 @@
.oo-ui-window {
&-head {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ .oo-ui-unselectable();
}
&-body {
diff --git a/src/styles/mixins.less b/src/styles/mixins.less
index 41b3370..f7b72ef 100644
--- a/src/styles/mixins.less
+++ b/src/styles/mixins.less
@@ -17,7 +17,6 @@
-ms-transform: @string;
-o-transform: @string;
transform: @string;
-
}
.oo-ui-box-sizing (@type: border-box) {
@@ -36,3 +35,19 @@
background-image: -o-linear-gradient(top, @start 0%, @stop 100%);
background-image: linear-gradient(top, @start 0%, @stop 100%);
}
+
+.oo-ui-unselectable () {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.oo-ui-selectable () {
+ -webkit-touch-callout: default;
+ -webkit-user-select: all;
+ -moz-user-select: all;
+ -ms-user-select: all;
+ user-select: all;
+}
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/116650
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I60d0552e5f18558f8c881e2b0ea693259ec909a1
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <tpars...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
