Skip to content

Commit cc4e80d

Browse files
author
Chris Hart
committed
Component Reskin: Buttons
Fixes: CNVS-14538 Main changes: - Removed gradient-based Bootstrap 2 mixin for buttons and replaced with a better mixin to generate flat button styles. - Added new BEM button classes alongside the old Bootstrap classes. For now, either will work. - Fixed issues with jQuery UI .ui- button classes not playing nice. - As a result of the new-style buttons having more padding, I also had to change the height/padding of select boxes, text/email/etc. inputs, as well as a few headers in Canvas that had set heights. - The user-filter input-button combo in Conversations was a real pain to get looking right, so you'll see a number of changes in the CSS there. Test plan: - This change is not behind a feature flag. However, please make sure $use_new_styles is turned off for testing, so you can see the in-use button colors, not the future ones. - First, go to /styleguide, and check out the buttons in both regular and high-contrast UI. Spot check to make sure the contrast ratios are acceptable. - Click around Canvas to see the new buttons in action. Let me know if there are any issues you see. Change-Id: Ie357f5d43f9ba277d7b66e149f50b4dea54b1781 Reviewed-on: https://gerrit.instructure.com/42081 Tested-by: Jenkins <jenkins@instructure.com> Reviewed-by: Colleen Palmer <colleen@instructure.com> QA-Review: Matt Fairbourn <mfairbourn@instructure.com> Product-Review: Chris Hart <chart@instructure.com>
1 parent 7d75826 commit cc4e80d

22 files changed

Lines changed: 410 additions & 391 deletions

‎app/stylesheets/base/_custom_bootstrap.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,7 @@
2323
@import "vendor/bootstrap/component-animations";
2424
@import "vendor/bootstrap/close";
2525

26-
27-
// Components: Buttons & Alerts
28-
@import "vendor/bootstrap/buttons";
29-
//@import "vendor/bootstrap/button-groups"; //use jquerUI buttonsets
26+
// Components: Alerts
3027
@import "vendor/bootstrap/alerts";
3128

3229
// Components: Nav
@@ -64,7 +61,6 @@
6461
// ------------------
6562
@import "vendor/bootstrap/responsive-utilities";
6663

67-
6864
// MEDIA QUERIES
6965
// ------------------
7066

‎app/stylesheets/base/c-common.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@import "vendor/flexboxgrid";
1111

1212
// Canvas components and area-specific styles
13+
@import "components/buttons";
1314
@import "components/g_base";
1415
@import "components/g_instructure";
1516
@import "components/tables";

‎app/stylesheets/components/_admin_links.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,8 @@ Cogs, *AKA admin links*, are generally floated to the right, make sure it's the
113113
}
114114

115115
.al-trigger {
116-
padding: 4px;
116+
padding-left: 8px;
117+
padding-right: 8px;
117118
cursor: pointer;
118119
white-space: nowrap;
119120
text-decoration: none;

‎app/stylesheets/components/_autocomplete.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,13 @@ ul[class*=ac-] {
7575
cursor: text;
7676
min-height: 30px;
7777
overflow: hidden;
78-
padding: 4px 6px;
78+
padding: 8px;
7979
position: relative;
8080
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
8181
width: 100%;
8282

8383
&.focused {
84-
border-color: rgba(82, 168, 236, 0.8);
85-
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
84+
border-color: lighten($linkColor, 10%);
8685
}
8786

8887
&.disabled {

‎app/stylesheets/components/_buttons.scss‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
//
2+
// Buttons
3+
// --------------------------------------------------
4+
5+
6+
// Base styles
7+
// --------------------------------------------------
8+
9+
// Core
10+
11+
/*
12+
@styleguide Buttons
13+
14+
### Button Styles
15+
16+
```html
17+
<p>
18+
<button class="Button" type="button">.Button</button>
19+
&nbsp;
20+
<button class="Button" type="button" disabled>&[disabled]</button>
21+
&nbsp;
22+
<button class="Button Button--active" type="button" style="pointer-events: none">&.Button--active</button>
23+
</p>
24+
<p>
25+
<button class="Button Button--primary" type="button">.Button.Button--primary</button>
26+
&nbsp;
27+
<button class="Button Button--primary" type="button" disabled>&[disabled]</button>
28+
&nbsp;
29+
<button class="Button Button--primary Button--active" type="button" style="pointer-events: none">&.Button--active</button>
30+
</p>
31+
<p>
32+
<button class="Button Button--secondary" type="button">.Button.Button--secondary</button>
33+
&nbsp;
34+
<button class="Button Button--secondary" type="button" disabled>&[disabled]</button>
35+
&nbsp;
36+
<button class="Button Button--secondary Button--active" type="button" style="pointer-events: none">&.Button--active</button>
37+
</p>
38+
<p>
39+
<button class="Button Button--success" type="button">.Button.Button--success</button>
40+
&nbsp;
41+
<button class="Button Button--success" type="button" disabled>&[disabled]</button>
42+
&nbsp;
43+
<button class="Button Button--success Button--active" type="button" style="pointer-events: none">&.Button--active</button>
44+
</p>
45+
<p>
46+
<button class="Button Button--warning" type="button">.Button.Button--danger</button>
47+
&nbsp;
48+
<button class="Button Button--warning" type="button" disabled>&[disabled]</button>
49+
&nbsp;
50+
<button class="Button Button--warning Button--active" type="button" style="pointer-events: none">&.Button--active</button>
51+
</p>
52+
<p>
53+
<button class="Button Button--danger" type="button">.Button.Button--danger</button>
54+
&nbsp;
55+
<button class="Button Button--danger" type="button" disabled>&[disabled]</button>
56+
&nbsp;
57+
<button class="Button Button--danger Button--active" type="button" style="pointer-events: none">&.Button--active</button>
58+
</p>
59+
<p>
60+
<button class="Button Button--link" type="button">.Button.Button--link</button>
61+
&nbsp;
62+
<button class="Button Button--link" type="button" disabled>&[disabled]</button>
63+
&nbsp;
64+
<button class="Button Button--link Button--active" type="button" style="pointer-events: none">&.Button--active</button>
65+
</p>
66+
```
67+
68+
### Button Sizes
69+
70+
Add an additional class `.btn-large`, `.btn-small`, `.btn-mini` to change button sizes
71+
72+
```html
73+
<p>
74+
<button class="btn btn-large" type="button">Large button</button>
75+
</p>
76+
<p>
77+
<button class="btn" type="button">Default button</button>
78+
</p>
79+
<p>
80+
<button class="btn btn-small" type="button">Small button</button>
81+
</p>
82+
<p>
83+
<button class="btn btn-mini" type="button">Mini button</button>
84+
</p>
85+
```
86+
87+
### Artificial buttons
88+
89+
To create something that acts like a button when you can't use a button element,
90+
listen to the "click" and "keyclick" events and add tabindex="0" and role="button".
91+
92+
```html
93+
<div class="btn" tabindex="0" role="button">Activate me</div>
94+
```
95+
*/
96+
97+
.btn, // <-- deprecated- do not use
98+
.Button {
99+
@if $use_new_styles { @include canvas-button(darken($canvas-neutral, 1%), $textColor, true); }
100+
@else { @include canvas-button(darken($canvas-light, 3%), $textColor, true); }
101+
border-radius: $baseBorderRadius;
102+
transition: background-color 0.2s ease-in-out;
103+
display: inline-block;
104+
position: relative;
105+
padding: 8px 14px;
106+
margin-bottom: 0; // For input.btn
107+
font-size: $baseFontSize;
108+
line-height: $baseLineHeight;
109+
text-align: center;
110+
vertical-align: middle;
111+
cursor: pointer;
112+
text-decoration: none;
113+
overflow: hidden;
114+
text-shadow: none;
115+
116+
// Hover state
117+
&:hover { text-decoration: none; }
118+
119+
// Focus state for keyboard and accessibility ONLY IN HIGH CONTRAST MODE
120+
@if $use_high_contrast {
121+
&:focus { @include button-focus; }
122+
}
123+
// If not high-contrast, the "canvas-button" mixin has the :focus state share the same styles as :hover
124+
@else { &:focus { outline: none; } }
125+
126+
}
127+
128+
129+
// Button Sizes
130+
// --------------------------------------------------
131+
132+
// Large
133+
.btn-large, // <-- deprecated- do not use
134+
.Button--large {
135+
padding: $paddingLarge;
136+
font-size: $fontSizeLarge;
137+
border-radius: $borderRadiusLarge;
138+
139+
[class^="icon-"], [class*=" icon-"] { margin-top: 2px; }
140+
141+
}
142+
143+
144+
// Small
145+
.btn-small, // <-- deprecated- do not use
146+
.Button--small {
147+
padding: $paddingSmall;
148+
font-size: $fontSizeSmall;
149+
150+
[class^="icon-"], [class*=" icon-"] { margin-top: 0; }
151+
152+
}
153+
154+
155+
// Mini
156+
.btn-mini, // <-- deprecated- do not use
157+
.Button--mini {
158+
padding: $paddingMini;
159+
font-size: $fontSizeMini;
160+
border-radius: $borderRadiusSmall;
161+
}
162+
163+
164+
// Block button
165+
// -------------------------
166+
167+
.btn-block, // <-- deprecated- do not use
168+
.Button--block {
169+
display: block;
170+
width: 100%;
171+
padding-left: 0;
172+
padding-right: 0;
173+
@include box-sizing(border-box);
174+
}
175+
176+
// Vertically space out stacked block buttons
177+
.btn-block + .btn-block, .Button--block + .Button--block { margin-top: 6px; }
178+
179+
// Specificity overrides
180+
input[type="submit"],
181+
input[type="reset"],
182+
input[type="button"] {
183+
&.btn-block {
184+
width: 100%;
185+
}
186+
}
187+
188+
// Set the backgrounds
189+
// -------------------------
190+
191+
.btn-primary, // <-- deprecated- do not use
192+
.Button--primary {
193+
@include canvas-button($canvas-primary, $canvas-light, false);
194+
@if $use_high_contrast {
195+
&:focus { @include button-focus($canvas-action); }
196+
}
197+
}
198+
// Warning appears are orange
199+
.btn-warning, // <-- deprecated- do not use
200+
.Button--warning {
201+
@include canvas-button($canvas-alert, $canvas-light, false);
202+
}
203+
// Danger and error appear as red
204+
.btn-danger, // <-- deprecated- do not use
205+
.Button--danger {
206+
@if $use_high_contrast { @include canvas-button($canvas-danger, $canvas-light, false); }
207+
@else { @include canvas-button(lighten($canvas-danger, 4%), $canvas-light, false); }
208+
}
209+
// Success appears as green
210+
.btn-success, // <-- deprecated- do not use
211+
.Button--success {
212+
@if $use_high_contrast { @include canvas-button($canvas-success, $canvas-light, false); }
213+
@else { @include canvas-button(lighten($canvas-success, 5%), $canvas-light, false); }
214+
}
215+
// Info appears as a neutral blue
216+
.btn-info, // <-- deprecated- do not use
217+
.Button--secondary {
218+
@include canvas-button($canvas-secondary, $canvas-light, false);
219+
}
220+
221+
// Inverse appears as dark gray <-- deprecated- do not use
222+
.btn-inverse {
223+
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
224+
}
225+
226+
227+
// Link buttons
228+
// --------------------------------------------------
229+
230+
// Make a button look and behave like a link
231+
232+
.btn-link, .btn-link:active, .btn-link[disabled], // <-- deprecated - do not use
233+
.Button--link, .Button--link:active, .Button--link[disabled] {
234+
background: transparent;
235+
background-image: none;
236+
box-shadow: none;
237+
}
238+
239+
.btn-link, // <-- deprecated- do not use
240+
.Button--link {
241+
border-color: transparent;
242+
cursor: pointer;
243+
color: $linkColor;
244+
245+
&:hover {
246+
color: $linkColorHover;
247+
text-decoration: underline;
248+
background: transparent;
249+
}
250+
251+
&.active, &.Button--active, &:active {
252+
background: rgba($canvas-dark, 0.05);
253+
box-shadow: none;
254+
border-color: transparent;
255+
color: $linkColor;
256+
}
257+
258+
&.disabled, &[disabled] {
259+
color: $textColor;
260+
background: transparent;
261+
}
262+
}

‎app/stylesheets/components/_g_wiki.sass‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,11 @@ $revision-button-hover-color: #2590cf
7070

7171
.pages
7272
.header-bar-outer-container
73-
:height 64px
73+
:min-height 64px
7474
:clear right
7575
.header-bar-container
7676
:min-width $min_main_width - 2px
77-
:height 64px
77+
:min-height 64px
7878
.page-changed-alert
7979
:overflow hidden
8080
:height 0

‎app/stylesheets/components/_item-groups.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@ is for items that are not draggable.
181181
.ig-header {
182182
padding-top: 5px;
183183
padding-bottom: 5px;
184+
min-height: 30px;
184185

185186
.ig-header-title {
186187
text-decoration: none;

‎app/stylesheets/jst/assignments/DueDateOverride.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
}
1313

1414
.due-date-override-headers {
15-
min-width: 900px;
15+
min-width: 812px;
1616

1717
div {
18-
width: 210px;
18+
width: 183px;
1919
float: left;
2020
margin-right: 10px;
2121
}
@@ -27,18 +27,19 @@
2727
li.due-date-row {
2828
list-style-type: none;
2929
overflow: hidden;
30-
min-width: 900px;
30+
min-width: 812px;
31+
margin-bottom: 6px;
3132
select {
3233
float: left;
3334
margin: 0px 10px 0px 0px;
34-
width: 210px;
35+
width: 183px;
3536
}
3637
.date_field_container {
3738
float: left;
3839
position: relative;
3940
margin-right: 10px;
4041
input {
41-
width: 155px;
42+
width: 120px;
4243
}
4344
.datetime_suggest {
4445
height: 20px;

‎app/stylesheets/pages/agenda/agenda_view.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ body {
119119
bottom: 0;
120120
margin-left: 6px;
121121
.ui-button {
122-
padding: 4px 6px;
122+
padding: 8px;
123123
i:before {
124124
font-size: 10px;
125125
}

0 commit comments

Comments
 (0)