blob: 9aeb725c670b3e4d1bd49c87af771738ea23d6bf [file] [log] [blame]
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -05001$btn-primary__bg: $color--blue-40;
2$btn-primary__bg--hover: $color--blue-30;
3$btn-primary__bg--disabled: $color--grey-40;
4$btn-primary__txt: $color--grey-0;
5$btn-primary__txt--disabled: $color--grey-60;
6
7$btn-secondary__bg: $color--grey-0;
8$btn-secondary__txt: $color--blue-40;
9$btn-secondary__txt--hover: $color--blue-30;
10$btn-secondary__txt--disabled: $color--grey-60;
11
12$btn-tertiary__bg: transparent;
13$btn-tertiary__txt: $color--blue-40;
14$btn-tertiary__txt--hover: $color--blue-30;
15$btn-tertiary__txt--disabled: $color--grey-60;
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'] {
Michael Davis51946552017-05-01 10:30:38 -050027 @include fontFamilyBold;
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050028 @include fastTransition-all;
29 border-style: solid;
30 border-width: 2px;
31 border-color: transparent;
32 font-size: 1em;
Michael Davis19475752017-02-23 18:30:23 -060033 text-transform: none;
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -050034 border-radius: 0;
35 padding: .5em 1em;
36 line-height: 1;
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050037 display: inline-block;
38 cursor: pointer;
39 &[disabled],
Iftekharul Islam8947e702017-07-27 10:28:07 -050040 &.disabled {
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050041 opacity: 1;
42 cursor: default;
Michael Davis19475752017-02-23 18:30:23 -060043 }
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050044 &.full-width {
45 width: 100%;
Michael Davis0f03ad12017-02-27 16:54:18 -060046 }
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050047 .icon,
beccabroek44da4712019-03-20 13:24:23 -050048 i {
49 //button symbol
Michael Davisc5626182017-03-10 15:48:05 -060050 font-style: normal;
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050051 font-weight: normal;
Michael Davisc5626182017-03-10 15:48:05 -060052 text-transform: none;
Michael Davisc5626182017-03-10 15:48:05 -060053 display: inline-block;
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050054 margin-right: 0.3em;
55 vertical-align: bottom;
Michael Davisc5626182017-03-10 15:48:05 -060056 }
beccabroek44da4712019-03-20 13:24:23 -050057 img {
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -050058 width: 1.5em;
59 height: 1.5em;
Michael Davisc5626182017-03-10 15:48:05 -060060 display: inline-block;
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050061 margin-right: 0.5em;
Michael Davisc5626182017-03-10 15:48:05 -060062 }
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050063 svg {
64 height: 1.2em;
65 width: auto;
Michael Davisc5626182017-03-10 15:48:05 -060066 }
Michael Davis19475752017-02-23 18:30:23 -060067}
Michael Davis51946552017-05-01 10:30:38 -050068
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050069/***
70Use for the primary use-case/s that is non-destructive.
71e.g. directing to a new page, a call to action
72***/
73.btn-primary {
74 background-color: $btn-primary__bg;
75 border-color: $btn-primary__bg;
76 color: $btn-primary__txt;
Michael Davis51946552017-05-01 10:30:38 -050077 &:hover {
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050078 background-color: $btn-primary__bg--hover;
79 border-color: $btn-primary__bg--hover;
Michael Davis51946552017-05-01 10:30:38 -050080 }
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050081 &[disabled],
82 &.disabled {
83 background: $btn-primary__bg--disabled;
84 border-color: $btn-primary__bg--disabled;
85 color: $btn-primary__txt--disabled;
86 .icon {
87 fill: $btn-primary__txt--disabled;
88 }
Michael Davis51946552017-05-01 10:30:38 -050089 }
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050090 .icon {
91 fill: $btn-primary__txt;
Michael Davis51946552017-05-01 10:30:38 -050092 }
beccabroek44da4712019-03-20 13:24:23 -050093}
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -050094
95/***
96Secondary buttons are actions that fall secondary or
97of less priority to primary buttons.
98These usually come coupled with a primary.
99***/
100.btn-secondary {
101 background-color: $btn-secondary__bg;
102 border-color: $btn-secondary__txt;
103 color: $btn-secondary__txt;
104 &:hover {
105 background-color: $btn-secondary__bg;
106 border-color: $btn-secondary__txt--hover;
107 color: $btn-secondary__txt--hover;
108 .icon {
109 fill: $btn-secondary__txt--hover;
110 }
111 }
112 &[disabled],
113 &.disabled {
114 background-color: $btn-secondary__bg;
115 border-color: $btn-secondary__txt--disabled;
116 color: $btn-secondary__txt--disabled;
117 .icon {
118 fill: $btn-secondary__txt--disabled;
119 }
120 }
121 .icon {
122 fill: $btn-secondary__txt;
123 }
124}
125
126/***
127Tertiary text buttons are used to identify less pressing or
128optional actions given on a page.
129***/
130.btn-tertiary {
131 background-color: $btn-tertiary__bg;
132 border-color: $btn-tertiary__bg;
133 color: $btn-tertiary__txt;
134 &:hover {
135 color: $btn-tertiary__txt--hover;
136 .icon {
137 fill: $btn-tertiary__txt--hover;
138 }
139 }
140 &[disabled],
141 &.disabled {
142 color: $btn-tertiary__txt--disabled;
143 .icon {
144 fill: $btn-tertiary__txt--disabled;
145 }
146 }
147 .icon {
148 fill: $btn-tertiary__txt;
149 }
150}