mediawiki.ui: Add @borderRadius variable to be used for inputs and buttons

Bug: 70916
Change-Id: I2102033ae5faa16367ddd4cbb879fdc62b4ca0b0

diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index 17bf683..e91302b 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -57,3 +57,6 @@
 @colorGrayLight: #ccc;
 @colorGrayLighter: #ddd;
 @colorGrayLightest: #eee;
+
+// Global border radius to be used to buttons and inputs
+@borderRadius: 2px;

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 8533c40..bcb4532 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -12,7 +12,6 @@
 //
 // Styleguide 2.
 
-@buttonBorderRadius: 3px;
 @transitionDuration: .1s;
 @transitionFunction: ease-in-out;
 
@@ -43,7 +42,7 @@
 
        // Container styling
        .button-colors(#FFF);
-       border-radius: @buttonBorderRadius;
+       border-radius: @borderRadius;
        min-width: 80px;
 
        // Ensure that buttons and inputs are nicely aligned when they have differing heights
@@ -216,8 +215,8 @@ a.mw-ui-button {
        float: left;
 
        &:first-child {
-               border-top-left-radius: @buttonBorderRadius;
-               border-bottom-left-radius: @buttonBorderRadius;
+               border-top-left-radius: @borderRadius;
+               border-bottom-left-radius: @borderRadius;
        }
 
        &:not(:first-child) {
@@ -225,7 +224,7 @@ a.mw-ui-button {
        }
 
        &:last-child{
-               border-top-right-radius: @buttonBorderRadius;
-               border-bottom-right-radius: @buttonBorderRadius;
+               border-top-right-radius: @borderRadius;
+               border-bottom-right-radius: @borderRadius;
        }
 }

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 4969bfe..62ef39a 100644 (file)
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -35,6 +35,7 @@
        padding: .3em .3em .3em .6em;
        display: block;
        vertical-align: middle;
+       border-radius: @borderRadius;
        // Override user agent stylesheet properties. Instead use parent element.
        color: inherit;
        font-family: inherit;