Skip to content

Commit 7debb14

Browse files
marijohannessenmarijohannessen
authored
Merge pull request #27 from tw15egan/watson-buttons
Watson buttons
2 parents db0f1df + e94c564 commit 7debb14

File tree

4 files changed

+46
-177
lines changed

4 files changed

+46
-177
lines changed

‎src/components/button/_button.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393

9494
.bx--btn--sm {
9595
height: 2rem;
96-
padding: 0 .5rem;
96+
padding: $button-padding-sm;
9797
letter-spacing: 0;
9898
}
9999

‎src/components/button/_mixins.scss

Lines changed: 8 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@
33
@include helvetica;
44
@include font-smoothing;
55
@include letter-spacing;
6-
@include font-size('14');
76
cursor: pointer;
87
display: inline-flex;
98
align-items: center;
109
justify-content: center;
1110
flex-shrink: 0;
12-
font-weight: 700;
13-
height: rem(40px);
14-
padding: 0 1rem;
11+
font-size: $button-font-size;
12+
font-weight: $button-font-weight;
13+
height: rem($button-height);
14+
padding: $button-padding;
15+
border-radius: $button-border-radius;
1516
text-align: center;
1617
text-decoration: none;
1718
transition-duration: $transition--base;
@@ -31,13 +32,14 @@
3132
width: rem(16px);
3233
height: rem(16px);
3334
margin-left: .5rem;
34-
transition-duration: $transition--base;
3535
}
3636
}
3737

3838
@mixin button-theme($bg-color, $border-color, $font-color, $hover-bg-color, $icon-color) {
3939
background-color: $bg-color;
40-
border: 2px solid $border-color;
40+
border-width: $button-border-width;
41+
border-style: solid;
42+
border-color: $border-color;
4143
color: $font-color;
4244

4345
&:hover,
@@ -58,146 +60,3 @@
5860
fill: $icon-color;
5961
}
6062
}
61-
62-
/* ☠️️ Deprecated - after updating the following components, can be deleted in 7.x
63-
- footer
64-
- form
65-
- modal
66-
*/
67-
68-
@mixin btn--browser-fixes {
69-
$class: &;
70-
71-
@at-root button#{$class} {
72-
// CSS selector becomes: button.& {}, where & === is whatever class the ampersand equals
73-
// <button> elements cannot be used as flex containers
74-
display: inline-block;
75-
76-
svg {
77-
// Vertically centering icon inside <button>
78-
position: relative;
79-
vertical-align: middle;
80-
top: -1px;
81-
}
82-
83-
// Targets IE10+ browsers
84-
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
85-
// Reset <svg> position for vertical centering
86-
svg { top: 0; }
87-
}
88-
}
89-
90-
&::-moz-focus-inner {
91-
// Reset intrisic padding in Firefox (see #731)
92-
padding: 0;
93-
border: 0;
94-
}
95-
}
96-
97-
@mixin btn--base {
98-
@include reset;
99-
@include btn--browser-fixes;
100-
@include helvetica;
101-
@include font-smoothing;
102-
@include letter-spacing;
103-
@include font-size('14');
104-
cursor: pointer;
105-
display: inline-flex;
106-
align-items: center;
107-
justify-content: center;
108-
flex-shrink: 0;
109-
font-weight: 700;
110-
height: rem(40px);
111-
padding: 0 1rem;
112-
text-align: center;
113-
text-decoration: none;
114-
transition-duration: $transition--base;
115-
transition-timing-function: ease-in;
116-
white-space: nowrap;
117-
118-
&:disabled {
119-
cursor: not-allowed;
120-
opacity: .5;
121-
}
122-
123-
&:focus {
124-
@include focus-outline;
125-
}
126-
127-
svg {
128-
width: rem(16px);
129-
height: rem(16px);
130-
margin-left: .5rem;
131-
}
132-
}
133-
134-
135-
@mixin btn--primary(
136-
$bg: $brand-01,
137-
$hover-bg: $brand-02,
138-
$text: $inverse-01
139-
) {
140-
@include btn--base;
141-
color: $text;
142-
background-color: $bg;
143-
border: 2px solid transparent;
144-
145-
&:hover,
146-
&:focus {
147-
background-color: $hover-bg;
148-
149-
&:disabled {
150-
background-color: $bg;
151-
}
152-
}
153-
154-
&:active {
155-
background-color: darken($bg, 20%);
156-
}
157-
}
158-
159-
@mixin btn--secondary(
160-
$hover-bg: $brand-01,
161-
$text: $hover-bg,
162-
$hover-text: $inverse-01
163-
) {
164-
@include btn--base;
165-
color: $text;
166-
background-color: transparent;
167-
border: 2px solid $hover-bg;
168-
169-
&:hover,
170-
&:focus {
171-
color: $hover-text;
172-
background-color: $hover-bg;
173-
174-
&:disabled {
175-
color: $text;
176-
background-color: transparent;
177-
}
178-
}
179-
180-
&:active {
181-
background-color: darken($hover-bg, 20%);
182-
}
183-
}
184-
185-
@mixin btn--danger {
186-
@include btn--base;
187-
color: $ui-05;
188-
background-color: transparent;
189-
border: 2px solid currentColor;
190-
191-
&:hover,
192-
&:focus {
193-
color: $inverse-01;
194-
border: 2px solid transparent;
195-
background-color: $support-01;
196-
197-
&:disabled {
198-
color: $inverse-01;
199-
background-color: transparent;
200-
border: 2px solid currentColor;
201-
}
202-
}
203-
}

‎src/globals/scss/_colors.scss

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -54,30 +54,3 @@ $color__purple-20: #d7aaff !default;
5454
$color__purple-30: #ba8ff7 !default;
5555
$color__purple-40: #af6ee8 !default;
5656
$color__purple-60: #734098 !default;
57-
58-
// 7.x -- Light UI Colors
59-
$brand-01: $color__blue-51 !default;
60-
$brand-02: $color__blue-40 !default;
61-
$brand-03: $color__teal-20 !default;
62-
$inverse-01: $color__white !default;
63-
$ui-01: $color__white !default;
64-
$ui-02: $color__gray-3 !default;
65-
$ui-03: $color__gray-2 !default;
66-
$ui-04: $color__gray-1 !default;
67-
$ui-05: $color__navy-gray-7 !default;
68-
$text-01: $color__blue-90 !default;
69-
$text-02: $color__navy-gray-6 !default;
70-
$text-03: $color__navy-gray-6 !default;
71-
$field-01: rgba($color__blue-51, .1) !default;
72-
$support-01: $color__red-50 !default;
73-
$support-02: $color__green-40 !default;
74-
$support-03: $color__yellow-30 !default;
75-
$support-04: $color__blue-30 !default;
76-
$nav-01: $color__navy-gray-1 !default;
77-
$nav-02: $color__blue-90 !default;
78-
$nav-03: $color__purple-30 !default;
79-
$nav-04: $color__purple-60 !default;
80-
$nav-05: $color__teal-40 !default;
81-
$nav-06: $color__teal-50 !default;
82-
$nav-07: $color__blue-30 !default;
83-
$nav-08: $color__blue-51 !default;

‎src/globals/scss/_vars.scss

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,40 @@ $bx--ease-in: cubic-bezier(.25, 0, 1, 1); // Used primarily for removing element
22
$bx--ease-out: cubic-bezier(0, 0, .25, 1); // Used for adding elements to the screen or changing on-screen states at a users's input.
33
$bx--standard-easing: cubic-bezier(.5, 0, .1, 1); // Used for the majority of animations.
44
$transition--base: 250ms;
5+
6+
7+
// Color Theme Variables
8+
$brand-01: $color__blue-51 !default;
9+
$brand-02: $color__blue-40 !default;
10+
$brand-03: $color__teal-20 !default;
11+
$inverse-01: $color__white !default;
12+
$ui-01: $color__white !default;
13+
$ui-02: $color__gray-3 !default;
14+
$ui-03: $color__gray-2 !default;
15+
$ui-04: $color__gray-1 !default;
16+
$ui-05: $color__navy-gray-7 !default;
17+
$text-01: $color__blue-90 !default;
18+
$text-02: $color__navy-gray-6 !default;
19+
$text-03: $color__navy-gray-6 !default;
20+
$field-01: rgba($color__blue-51, .1) !default;
21+
$support-01: $color__red-50 !default;
22+
$support-02: $color__green-40 !default;
23+
$support-03: $color__yellow-30 !default;
24+
$support-04: $color__blue-30 !default;
25+
$nav-01: $color__navy-gray-1 !default;
26+
$nav-02: $color__blue-90 !default;
27+
$nav-03: $color__purple-30 !default;
28+
$nav-04: $color__purple-60 !default;
29+
$nav-05: $color__teal-40 !default;
30+
$nav-06: $color__teal-50 !default;
31+
$nav-07: $color__blue-30 !default;
32+
$nav-08: $color__blue-51 !default;
33+
34+
// Button Theme Variables
35+
$button-font-weight: 700 !default;
36+
$button-font-size: .875rem !default;
37+
$button-border-radius: 0 !default;
38+
$button-height: 40px !default;
39+
$button-padding: 0 1rem !default;
40+
$button-padding-sm: 0 .5rem !default;
41+
$button-border-width: 2px !default;

0 commit comments

Comments
 (0)