summaryrefslogtreecommitdiff
path: root/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss
blob: d67810f739dc9d1e21b766b0cd951077ea699992 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
$buttonBorderRadius: 3px;

// Button styling
.mw-ui-button {
    // Container layout
    @include inline-block;
    padding: 0.4em 1em 0.4em 1em;
    margin: 0;

    // Container styling
    @include buttonColors($agoraGray);
    @include border-radius($buttonBorderRadius);

    // Content styling
    vertical-align: middle;

    text: {
        align: center;
        decoration: none;
    }

    font: {
        weight: bold;
    }

    // Interaction styling
    cursor: pointer;

    &:disabled,
    &.mw-ui-disabled {
        cursor: default;
    }

    // Button sizes and displays
    // -----------------------------------------
    &.mw-ui-big {
        font: {
            size: $baseFontSize * 1.3;
        }
    }
    &.mw-ui-block {
        display: block;
        width: 100%;
    }
}

// This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the
// class alone isn't specific enough to do
a.mw-ui-button {
    text: {
        decoration: none;
    }
}

// Button groups
.mw-ui-button-group > * {
  @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);
  }
}