Pginer has uploaded a new change for review.
https://gerrit.wikimedia.org/r/53558
Change subject: Button groups
......................................................................
Button groups
Addedclasses for button groups (buttons stacked together as a single component).
This involves to adjust border when buttons are inside a group.
An example has been added to compare the behavior with regular buttons.
Change-Id: Ia3c7d86d86574c4fd0ce9ae8e2fcd6575bcdb59a
---
M modules/css/ext.agora.css
M modules/scss/components/_buttons.scss
A tests/buttons.html
3 files changed, 91 insertions(+), 14 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Agora
refs/changes/58/53558/1
diff --git a/modules/css/ext.agora.css b/modules/css/ext.agora.css
index 704ce1b..4f34317 100644
--- a/modules/css/ext.agora.css
+++ b/modules/css/ext.agora.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
/* Agora styles */
/* _effects.scss */
/* Mixins for visual effects in CSS3 */
@@ -22,7 +23,7 @@
margin-right: auto;
}
-/* line 8, ../scss/components/_buttons.scss */
+/* line 10, ../scss/components/_buttons.scss */
button.mw-ui-button, input[type="submit"].mw-ui-button, a.mw-ui-button {
display: -moz-inline-stack;
display: inline-block;
@@ -83,11 +84,11 @@
opacity: 0.5;
text-shadow: none;
}
-/* line 37, ../scss/components/_buttons.scss */
+/* line 39, ../scss/components/_buttons.scss */
button.mw-ui-button:disabled, button.mw-ui-button.disabled,
input[type="submit"].mw-ui-button:disabled,
input[type="submit"].mw-ui-button.disabled, a.mw-ui-button:disabled,
a.mw-ui-button.disabled {
cursor: default;
}
-/* line 44, ../scss/components/_buttons.scss */
+/* line 46, ../scss/components/_buttons.scss */
button.mw-ui-button.blue, button.mw-ui-button.primary,
input[type="submit"].mw-ui-button.blue,
input[type="submit"].mw-ui-button.primary, a.mw-ui-button.blue,
a.mw-ui-button.primary {
background-color: #3366bb;
*background-color: #3366bb;
@@ -127,7 +128,7 @@
opacity: 0.5;
text-shadow: none;
}
-/* line 49, ../scss/components/_buttons.scss */
+/* line 51, ../scss/components/_buttons.scss */
button.mw-ui-button.green, button.mw-ui-button.constructive,
input[type="submit"].mw-ui-button.green,
input[type="submit"].mw-ui-button.constructive, a.mw-ui-button.green,
a.mw-ui-button.constructive {
background-color: #27aa65;
*background-color: #27aa65;
@@ -167,7 +168,7 @@
opacity: 0.5;
text-shadow: none;
}
-/* line 54, ../scss/components/_buttons.scss */
+/* line 56, ../scss/components/_buttons.scss */
button.mw-ui-button.red, button.mw-ui-button.destructive,
input[type="submit"].mw-ui-button.red,
input[type="submit"].mw-ui-button.destructive, a.mw-ui-button.red,
a.mw-ui-button.destructive {
background-color: #cc0000;
*background-color: #cc0000;
@@ -207,14 +208,42 @@
opacity: 0.5;
text-shadow: none;
}
-/* line 60, ../scss/components/_buttons.scss */
+/* line 62, ../scss/components/_buttons.scss */
button.mw-ui-button.big, input[type="submit"].mw-ui-button.big,
a.mw-ui-button.big {
font-size: 1.3em;
}
-/* line 65, ../scss/components/_buttons.scss */
+/* line 67, ../scss/components/_buttons.scss */
button.mw-ui-button.block, input[type="submit"].mw-ui-button.block,
a.mw-ui-button.block {
display: block;
width: 100%;
+}
+
+/* line 75, ../scss/components/_buttons.scss */
+.mw-ui-button-group button.mw-ui-button, input[type="submit"].mw-ui-button,
a.mw-ui-button {
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ -ms-border-radius: 0;
+ -o-border-radius: 0;
+ border-radius: 0;
+ float: left;
+}
+/* line 79, ../scss/components/_buttons.scss */
+.mw-ui-button-group button.mw-ui-button:first-child,
input[type="submit"].mw-ui-button:first-child, a.mw-ui-button:first-child {
+ -moz-border-radius-topleft: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-top-left-radius: 3px;
+ -moz-border-radius-bottomleft: 3px;
+ -webkit-border-bottom-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+}
+/* line 84, ../scss/components/_buttons.scss */
+.mw-ui-button-group button.mw-ui-button:last-child,
input[type="submit"].mw-ui-button:last-child, a.mw-ui-button:last-child {
+ -moz-border-radius-topright: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-top-right-radius: 3px;
+ -moz-border-radius-bottomright: 3px;
+ -webkit-border-bottom-right-radius: 3px;
+ border-bottom-right-radius: 3px;
}
/* line 7, ../scss/components/_forms.scss */
@@ -253,7 +282,7 @@
margin: 0 0 0.2em 0;
padding: 0;
}
-/* line 38, ../scss/components/_forms.scss */
+/* line 37, ../scss/components/_forms.scss */
ul.mw-ui-formlist li label.mw-ui-checkbox-label, ul.mw-ui-formlist li
label.mw-ui-radio-label {
cursor: pointer;
vertical-align: bottom;
@@ -272,7 +301,7 @@
border-color: #c9c9c9;
cursor: pointer;
}
-/* line 45, ../scss/components/_forms.scss */
+/* line 44, ../scss/components/_forms.scss */
ul.mw-ui-formlist li input[type="checkbox"],
ul.mw-ui-formlist li input[type="radio"] {
display: inline;
@@ -282,7 +311,7 @@
width: auto;
}
-/* line 60, ../scss/components/_forms.scss */
+/* line 59, ../scss/components/_forms.scss */
.mw-ui-input, .mw-ui-formlist li input {
outline: 0;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
@@ -303,7 +332,7 @@
border-color: #4091ed;
}
-/* line 65, ../scss/components/_forms.scss */
+/* line 64, ../scss/components/_forms.scss */
.mw-ui-block-label, .mw-ui-formlist li label {
font-weight: bold;
font-size: 0.9em;
@@ -314,7 +343,7 @@
font-weight: normal;
}
-/* line 74, ../scss/components/_forms.scss */
+/* line 73, ../scss/components/_forms.scss */
.mw-ui-checkbox-label, .mw-ui-radio-label {
cursor: pointer;
vertical-align: bottom;
diff --git a/modules/scss/components/_buttons.scss
b/modules/scss/components/_buttons.scss
index 6cca0ab..ff8e685 100644
--- a/modules/scss/components/_buttons.scss
+++ b/modules/scss/components/_buttons.scss
@@ -4,6 +4,8 @@
'.mw-ui-button' // Apply this class to above tags
);
+$buttonBorderRadius: 3px;
+
// Button styling
#{$buttonSelectors} {
// Container layout
@@ -13,7 +15,7 @@
// Container styling
@include buttonColors($agoraGray);
- @include border-radius(3px);
+ @include border-radius($buttonBorderRadius);
// Content styling
line-height: $baseLineHeight;
@@ -66,4 +68,21 @@
display: block;
width: 100%;
}
-}
\ No newline at end of file
+}
+
+
+// Button groups
+.mw-ui-button-group #{$buttonSelectors}{
+ @include border-radius(0);
+ float: left;
+
+ &:first-child{
+ @include border-top-left-radius($buttonBorderRadius);
+ @include border-bottom-left-radius($buttonBorderRadius);
+ }
+
+ &:last-child{
+ @include border-top-right-radius($buttonBorderRadius);
+ @include border-bottom-right-radius($buttonBorderRadius);
+ }
+}
diff --git a/tests/buttons.html b/tests/buttons.html
new file mode 100644
index 0000000..7786144
--- /dev/null
+++ b/tests/buttons.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="eng" lang="eng">
+ <head>
+ <meta http-equiv="content-type" content="text/html;
charset=utf-8" />
+ <title>Buttons</title>
+ <meta name="keywords" content="" />
+
+ <style type="text/css">
+ body {
+ margin: 100px 100px;
+ }
+ section {
+ margin: 40px 0;
+ }
+ </style>
+ <link rel="stylesheet" href="../modules/css/ext.agora.css">
+ </head>
+ <body>
+ <section> <!--Simple buttons -->
+ <button class="mw-ui-button primary">Ok</button>
<button class="mw-ui-button">Cancel</button>
+ </section>
+ <section> <!-- Button groups -->
+ <div class="mw-ui-button-group">
+ <button class="mw-ui-button">List</button>
<button class="mw-ui-button">Detail</button> <button
class="mw-ui-button">Preview</button>
+ </div>
+ </section>
+ </body>
+</html>
--
To view, visit https://gerrit.wikimedia.org/r/53558
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia3c7d86d86574c4fd0ce9ae8e2fcd6575bcdb59a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Agora
Gerrit-Branch: master
Gerrit-Owner: Pginer <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
