tests/fixtures/scss/buttons.scss


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

// Your standard form button.
//
// :hover    - Highlights when hovering.
// :disabled - Dims the button when disabled.
// .primary  - Indicates button is the primary action.
// .smaller  - A little bit smaller now.
//
// Styleguide 2.1.1.
button{
  padding:5px 15px;

  &.primary, &.primary:hover{
    color:#fff;
  }

  &.smaller{
    font-size:11px;
  }

  &:hover{
    color:#337797;
  }

  &:disabled{
    opacity:0.5;
  }
}

// A button suitable for giving stars to someone.
//
// .star-given - A highlight indicating you've already given a star.
// .disabled   - Dims the button to indicate it cannot be used.
//
// Styleguide 2.2.1.
a.button.star{
  display:inline-block;

  .star{ font-size:10px; }

  &.star-given{
    color:#ae7e00;
  }

  &.disabled{
    opacity:0.5;
  }
}