1$btn-primary__bg: $base-01--03;
2$btn-primary__bg--hover: $base-01--04;
3$btn-primary__bg--disabled: $base-02--04;
4$btn-primary__txt: $base-02--08;
5$btn-primary__txt--disabled: $base-02--03;
6
7$btn-secondary__bg: $base-02--08;
8$btn-secondary__txt: $base-01--03;
9$btn-secondary__txt--hover: $base-01--04;
10$btn-secondary__txt--disabled: $base-02--03;
11
12$btn-tertiary__bg: transparent;
13$btn-tertiary__txt: $base-01--03;
14$btn-tertiary__txt--hover: $base-01--04;
15$btn-tertiary__txt--disabled: $base-02--03;
16
17/***
18Include .btn class in addition to the button type.
19These styles provide structural and base properties
20shared across all buttons. The additional button
21type (.btn-primary, .btn-secondary) will provide color
22properties
23***/
24button,
25.btn,
26[type='button'] {
27  @include fontFamilyBold;
28  @include fastTransition-all;
29  border-style: solid;
30  border-width: 2px;
31  border-color: transparent;
32  font-size: 1em;
33  text-transform: none;
34  border-radius: 0;
35  padding: .5em 1em;
36  line-height: 1;
37  display: inline-block;
38  cursor: pointer;
39  &[disabled],
40  &.disabled {
41    opacity: 1;
42    cursor: default;
43  }
44  &.full-width {
45    width: 100%;
46  }
47  .icon,
48  i {
49    //button symbol
50    font-style: normal;
51    font-weight: normal;
52    text-transform: none;
53    display: inline-block;
54    margin-right: 0.3em;
55    vertical-align: bottom;
56  }
57  img {
58    width: 1.5em;
59    height: 1.5em;
60    display: inline-block;
61    margin-right: 0.5em;
62  }
63  svg {
64    height: 1.2em;
65    width: auto;
66    max-width: 100%;
67  }
68}
69
70/***
71Use for the primary use-case/s that is non-destructive.
72e.g. directing to a new page, a call to action
73***/
74.btn-primary {
75  background-color: $btn-primary__bg;
76  border-color: $btn-primary__bg;
77  color: $btn-primary__txt;
78  &:hover {
79    background-color: $btn-primary__bg--hover;
80    border-color: $btn-primary__bg--hover;
81  }
82  &[disabled],
83  &.disabled {
84    background: $btn-primary__bg--disabled;
85    border-color: $btn-primary__bg--disabled;
86    color: $btn-primary__txt--disabled;
87      .icon {
88        fill: $btn-primary__txt--disabled;
89      }
90  }
91  .icon {
92    fill: $btn-primary__txt;
93  }
94}
95
96/***
97Secondary buttons are actions that fall secondary or
98of less priority to primary buttons.
99These usually come coupled with a primary.
100***/
101.btn-secondary {
102  background-color: $btn-secondary__bg;
103  border-color: $btn-secondary__txt;
104  color: $btn-secondary__txt;
105  &:hover {
106    background-color: $btn-secondary__bg;
107    border-color: $btn-secondary__txt--hover;
108    color: $btn-secondary__txt--hover;
109    .icon {
110      fill: $btn-secondary__txt--hover;
111    }
112  }
113  &[disabled],
114  &.disabled {
115    background-color: $btn-secondary__bg;
116    border-color: $btn-secondary__txt--disabled;
117    color: $btn-secondary__txt--disabled;
118    .icon {
119      fill: $btn-secondary__txt--disabled;
120    }
121  }
122  .icon {
123    fill: $btn-secondary__txt;
124  }
125}
126
127/***
128Tertiary text buttons are used to identify less pressing or
129optional actions given on a page.
130***/
131.btn-tertiary {
132  background-color: $btn-tertiary__bg;
133  border-color: $btn-tertiary__bg;
134  color: $btn-tertiary__txt;
135  &:hover {
136    color: $btn-tertiary__txt--hover;
137    .icon {
138      fill: $btn-tertiary__txt--hover;
139    }
140  }
141  &[disabled],
142  &.disabled {
143    color: $btn-tertiary__txt--disabled;
144    .icon {
145      fill: $btn-tertiary__txt--disabled;
146    }
147  }
148  .icon {
149    fill: $btn-tertiary__txt;
150  }
151}