1 @import "../../settings/typography";
2 @import "../../mixins/effects";
8 @buttonBorderRadius: 3px;
12 // Basic button styling to be used on desktop skins. Can be any element.
13 // Due to a lack of a CSS reset, the exact styling of the button depends on what type of element is used.
16 // <div class="mw-ui-button">button.mw-ui-button</div>
21 display: inline-block;
22 padding: 0.4em 1em 0.4em 1em;
26 // http://stackoverflow.com/a/5838575/365238
32 border-radius: @buttonBorderRadius;
34 // Ensure that buttons and inputs are nicely aligned when they have differing heights
35 vertical-align: middle;
39 text-decoration: none;
43 // Interaction styling
51 // Button sizes and displays
52 // -----------------------------------------
54 font-size: @baseFontSize * 1.3;
62 // This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the
63 // class alone isn't specific enough to do
65 text-decoration: none;
70 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
73 // <div class="mw-ui-button-group">
74 // <div class="mw-ui-button">A</div>
75 // <div class="mw-ui-button">B</div>
76 // <div class="mw-ui-button">C</div>
77 // <div class="mw-ui-button">D</div>
78 // </div><div style="clear:both"></div>
81 .mw-ui-button-group > * {
86 border-top-left-radius: @buttonBorderRadius;
87 border-bottom-left-radius: @buttonBorderRadius;
91 border-top-right-radius: @buttonBorderRadius;
92 border-bottom-right-radius: @buttonBorderRadius;