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  // Override for specific icons
70  .icon-add {
71    margin-right: 0;
72  }
73}
74
75/***
76Use for the primary use-case/s that is non-destructive.
77e.g. directing to a new page, a call to action
78***/
79.btn-primary {
80  background-color: $btn-primary__bg;
81  border-color: $btn-primary__bg;
82  color: $btn-primary__txt;
83  &:hover {
84    background-color: $btn-primary__bg--hover;
85    border-color: $btn-primary__bg--hover;
86  }
87  &[disabled],
88  &.disabled {
89    background: $btn-primary__bg--disabled;
90    border-color: $btn-primary__bg--disabled;
91    color: $btn-primary__txt--disabled;
92      .icon {
93        fill: $btn-primary__txt--disabled;
94      }
95  }
96  .icon {
97    fill: $btn-primary__txt;
98  }
99}
100
101/***
102Secondary buttons are actions that fall secondary or
103of less priority to primary buttons.
104These usually come coupled with a primary.
105***/
106.btn-secondary {
107  background-color: $btn-secondary__bg;
108  border-color: $btn-secondary__txt;
109  color: $btn-secondary__txt;
110  &:hover {
111    background-color: $btn-secondary__bg;
112    border-color: $btn-secondary__txt--hover;
113    color: $btn-secondary__txt--hover;
114    .icon {
115      fill: $btn-secondary__txt--hover;
116    }
117  }
118  &[disabled],
119  &.disabled {
120    background-color: $btn-secondary__bg;
121    border-color: $btn-secondary__txt--disabled;
122    color: $btn-secondary__txt--disabled;
123    .icon {
124      fill: $btn-secondary__txt--disabled;
125    }
126  }
127  .icon {
128    fill: $btn-secondary__txt;
129  }
130}
131
132/***
133Tertiary text buttons are used to identify less pressing or
134optional actions given on a page.
135***/
136.btn-tertiary {
137  background-color: $btn-tertiary__bg;
138  border-color: $btn-tertiary__bg;
139  color: $btn-tertiary__txt;
140  &:hover {
141    color: $btn-tertiary__txt--hover;
142    .icon {
143      fill: $btn-tertiary__txt--hover;
144    }
145  }
146  &[disabled],
147  &.disabled {
148    color: $btn-tertiary__txt--disabled;
149    .icon {
150      fill: $btn-tertiary__txt--disabled;
151    }
152  }
153  .icon {
154    fill: $btn-tertiary__txt;
155  }
156}
157
158.btn-password-toggle {
159  position: absolute;
160  right: 0;
161  margin-top: -34px;
162  height: 32px;
163  width: 52px;
164  padding-top: 6px;
165  padding-bottom: 6px;
166  padding-right: 0;
167  .icon {
168    margin-right: 0;
169  }
170  &.password-visible {
171    .icon {
172      fill: $btn-tertiary__txt--disabled;
173    }
174  }
175  &.password-hidden {
176    .icon {
177      // Adding tweaks to make sure the icons
178      // are in the same place when toggling show/hide
179      margin-right: 1px;
180      width: 20px;
181    }
182  }
183}