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