FirefoxColor/src/web/lib/_common.scss at c240cbb530bfdda5db0e6ba621bcd9c8a4d6f56b · mozilla/FirefoxColor · GitHub

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
70
71
72
73
74
75
76
$grid: 4px;

@mixin button($height: 34px, $font: 18px, $border: 2px, $minWidth: 10 * $font) {
  align-items: center;
  border-radius: $border;
  border: none;
  cursor: pointer;
  display: flex;
  font-size: $font;
  height: $height;
  justify-content: center;
  text-decoration: none;
  transition: background 50ms;
  min-width: $minWidth;
  padding: 0 $font;
  text-align: center;
}

@mixin buttonSecondary {
  color: var(--grey-90);
  background-color: rgba(12, 12, 13, .1);

  &:hover:not(:disabled),
  &:focus:not(:disabled) {
    background-color: rgba(12, 12, 13, .2);
  }

  &:active:not(:disabled) {
    background-color: rgba(12, 12, 13, .3);
  }

  &:disabled {
    color: var(--grey-40);
    cursor: default;
  }
}

@mixin buttonPrimary {
  color: var(--white);
  background-color: var(--green-70);
  box-shadow: 0 -3px 0 var(--grey-90-a10) inset;

  &:hover,
  &:focus {
    background-color: var(--green-70);
  }

  &:active {
    background-color: var(--green-80);
  }
}

@mixin buttonDefault {
  color: var(--white);
  background: var(--blue-50);

  &:hover:not(:disabled),
  &:focus:not(:disabled) {
    background-color: var(--blue-60);
  }

  &:active:not(:disabled) {
    background-color: var(--blue-70);
  }

  &:disabled {
    opacity: .5;
    cursor: disabled;
  }
}

@mixin unit($size: 'large') {
  border-radius: var(--#{$size}-unit-border-radius);
  box-shadow: var(--#{$size}-unit-box-shadow);
  background-color: var(--white-a96);
}