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