Skip to content

Commit f4a4aa6

Browse files
author
Chris Hart
committed
Canvas UI Component Style Update - Modals
Fixes: CNVS-15547 This changeset updates the old jQueryUI-powered modal boxes to match the look and feel of the new React- powered modals. This is just a style/visual change. Nothing has been improved in the current modals in terms of functionality or accessibility. Test plan: - Here is what the jQueryUI modal boxes look like currently in master/production: http://cl.ly/image/0z3O133q3b44/modal-current.png - Here is what they look like after this changeset: http://cl.ly/image/3O0N051S2w22/modal-new.png - Click on a few modals around Canvas to make sure the new styles are being applied across the board - NOTE TO QA: Many modals don't have the gray box footer, like this one: http://cl.ly/image/3S2J2x2y450D/mini-modal.png This is not a result of this commit. Change-Id: I6e12a649e155ef0462661e8101bcc8b2d5772a54 Reviewed-on: https://gerrit.instructure.com/45635 Tested-by: Jenkins <jenkins@instructure.com> Reviewed-by: Colleen Palmer <colleen@instructure.com> Product-Review: Colleen Palmer <colleen@instructure.com> QA-Review: Matt Fairbourn <mfairbourn@instructure.com>
1 parent a48441e commit f4a4aa6

8 files changed

Lines changed: 91 additions & 52 deletions

File tree

‎app/jsx/styleguide/ReactModalExample.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@ define([
4545
<h4>Modal Title Goes Here</h4>
4646
</div>
4747
<div className="ReactModal__Header-Actions">
48-
<button className="Button Button--link Button--small" type="button" onClick={this.closeModal}>
48+
<button className="Button Button--icon-action" type="button" onClick={this.closeModal}>
4949
<i className="icon-x"></i>
50+
<span className="screenreader-only">Close</span>
5051
</button>
5152
</div>
5253
</div>

‎app/stylesheets/components/_buttons.scss‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,24 @@ input[type="button"] {
262262
}
263263
}
264264

265+
// Icon "action" buttons
266+
// --------------------------------------------------
267+
268+
// Like link buttons, but containing only an icon, which appears in dark gray
269+
// Usually used to perform user actions like closing, editing, etc.
270+
271+
.Button--icon-action {
272+
transition: color 0.2s;
273+
background: transparent;
274+
border: none;
275+
padding: 2px 4px;
276+
border-radius: 0;
277+
color: $ic-icon-link-color;
278+
&:hover, &:focus {
279+
background: transparent;
280+
color: $ic-icon-link-color-hover;
281+
}
282+
}
265283

266284
// Handle jQueryUI-generated button classes
267285
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { @extend .ui-helper-hidden-accessible; }
@@ -276,4 +294,4 @@ input[type="button"] {
276294
&:hover { @extend .Button--active; }
277295
}
278296
&.ui-state-disabled { @extend .Button.disabled; }
279-
}
297+
}

‎app/stylesheets/components/_forms.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,8 @@ controls on the bottom required this.
9595
.form-controls {
9696
padding: 10px;
9797
margin: 0;
98-
background-color: #EFEFEF;
99-
border-top: 1px solid #DDD;
100-
box-shadow: inset 0 1px 0 white;
98+
background-color: lighten($canvas-neutral, 5%);
99+
border-top: 1px solid $can-border-light;
101100
text-align: right;
102101
position: absolute;
103102
left: 0px;

‎app/stylesheets/components/_react_modal.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,7 @@ See `app/jsx/examples/ReactModalExample.jsx` for complete example usage.
6363

6464

6565
@mixin ReactModalPadding {
66-
padding: 6px;
67-
@include breakpoint(tablet) { padding: 12px; }
66+
padding: 12px;
6867
@include breakpoint(desktop) { padding: 16px; }
6968
}
7069

@@ -139,7 +138,7 @@ See `app/jsx/examples/ReactModalExample.jsx` for complete example usage.
139138
.ReactModal__Header-Actions { text-align: right; }
140139

141140
.ReactModal__Body {
142-
padding: 6px;
141+
padding: 12px;
143142
background: $canvas-light;
144143
@include breakpoint(tablet) { padding: 16px; }
145144
@include breakpoint(desktop) { padding: 24px; }

‎app/stylesheets/vendor/bootstrap/_mixins.scss‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -549,18 +549,17 @@
549549
color: $text-color;
550550
border: 1px solid darken($button-color, 15%);
551551

552-
@if $use_high_contrast {
553-
&:hover {
552+
&:hover, &:focus {
553+
background: darken($button-color, 6%);
554+
color: $text-color;
555+
556+
// handle jquery UI ui-button conflicts
557+
&.ui-state-hover, &.ui-state-focus {
554558
background: darken($button-color, 6%);
555559
color: $text-color;
556-
}
557-
}
558-
559-
@else {
560-
&:hover, &:focus {
561-
background: darken($button-color, 6%);
562-
color: $text-color;
563-
}
560+
border-color: darken($button-color, 15%);
561+
}
562+
564563
}
565564

566565
@if lightness($button-color) > lightness($text-color) {

‎app/stylesheets/vendor/jqueryui/_jquery.ui.dialog.scss‎

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,12 @@
99
* http://docs.jquery.com/UI/Dialog#theming
1010
*/
1111
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
12-
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
13-
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
12+
13+
.ui-dialog .ui-dialog-title {
14+
float: left; margin: 0 16px 0 0;
15+
font-size: 18px;
16+
font-weight: normal;
17+
}
1418
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
1519
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
1620
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
@@ -21,46 +25,60 @@
2125
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
2226
.ui-draggable .ui-dialog-titlebar { cursor: move; }
2327

24-
/*
25-
@styleguide Modal Dialog
26-
27-
We don't use Bootstraps modal dialog, please use jQuery UI `ui-dialog` with our normal bootstrap style buttons
28-
29-
```html
30-
<button class="btn element_toggler" aria-controls="testdialog">Show Dialog</button>
31-
32-
<form id="testdialog" data-turn-into-dialog='{"width":600,"modal":true}' style="display:none" title="Title Goes Here">
33-
<p> Leggings etsy aesthetic hella viral blog literally, squid you probably haven't heard of them synth raw denim 90's mlkshk odd future try-hard. Lo-fi next level kale chips narwhal tattooed, tonx YOLO mixtape. Locavore vice disrupt yr ethnic. Biodiesel messenger bag cardigan american apparel. DIY four loko tumblr pickled yr scenester.</p>
34-
<div class="button-container">
35-
<button type="submit" class="btn btn-primary">submit</button>
36-
<a class="btn dialog_closer">cancel</a>
37-
</div>
38-
</form>
39-
```
40-
41-
*/
42-
4328
//our overrides
4429

4530
.ui-dialog {
4631
padding: 0;
4732

4833
.ui-dialog-titlebar-close {
49-
span { background: url(/images/modal_close.svg) 0 0 no-repeat; background-size: 16px 16px; }
50-
&:hover, &:focus {
34+
right: 12px;
35+
width: 20px; height: 20px;
36+
span {
37+
transition: opacity 0.2s;
38+
background: url(/images/icon-x-black.svg) 50% 50% no-repeat;
39+
background-size: 10px;
40+
opacity: 0.6;
41+
}
42+
&.ui-state-hover, &.ui-state-focus {
5143
border-color: transparent;
44+
span {
45+
opacity: 0.8;
46+
}
5247
}
5348
}
5449
}
5550

51+
.ui-dialog .ui-dialog-titlebar {
52+
padding: .4em 1em; position: relative;
53+
&.ui-widget-header {
54+
background: $canvas-light;
55+
padding: 16px 12px;
56+
border-bottom: 1px solid $can-border-light;
57+
}
58+
}
59+
60+
.ui-dialog.ui-widget-content {
61+
border: none;
62+
box-shadow: 0 1px 4px 1px rgba($canvas-secondary, 0.95);
63+
}
64+
5665
// note that these styles are shared in both .ui-dialog and .ui-datepicker
5766

5867
.ui-datepicker .ui-datepicker-time,
5968
.ui-dialog .ui-dialog-buttonpane {
60-
background-color: $formActionsBackground;
61-
box-shadow: inset 0 1px 0 white;
62-
border-top: 1px solid #e5e5e5;
69+
background-color: lighten($canvas-neutral, 5%);
70+
border-top: 1px solid $can-border-light;
71+
}
72+
73+
.ui-dialog .ui-dialog-buttonpane {
74+
padding: 6px;
75+
@include breakpoint(tablet) { padding: 12px; }
76+
.ui-dialog-buttonset button {
77+
margin-top: 0; margin-bottom: 0;
78+
&:last-of-type { margin-right: 0; }
79+
}
6380
}
81+
6482
.ui-datepicker .ui-datepicker-header,
6583
.ui-dialog .ui-dialog-titlebar {
6684
border-top: 0; border-left: 0; border-right: 0;

‎app/stylesheets/vendor/jqueryui/_jquery.ui.theme.scss‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,7 @@
3232
//.ui-widget-content .ui-state-default,
3333
.ui-widget-header .ui-state-default { border: 1px solid $borderColorDefault; color: $fcDefault; font-weight: normal;
3434
@include vertical-gradient(white, #e6e6e6);
35-
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
3635
border-bottom-color: #bbb;
37-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
3836
}
3937

4038
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid $borderColorHighlight; background: $bgColorHighlight; color: $fcHighlight;
@@ -303,14 +301,14 @@
303301
----------------------------------*/
304302

305303
/* Corner radius */
306-
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: $cornerRadius; }
307-
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: $cornerRadius; }
308-
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: $cornerRadius; }
309-
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: $cornerRadius; }
304+
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: $baseBorderRadius; }
305+
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: $baseBorderRadius; }
306+
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: $baseBorderRadius; }
307+
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: $baseBorderRadius; }
310308

311309
/* Overlays */
312-
.ui-widget-overlay { background: $bgColorOverlay;
313-
opacity: $opacityOverlay;
310+
.ui-widget-overlay {
311+
background: rgba($canvas-secondary, 0.75);
314312
}
315313
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: $bgColorShadow; opacity: $opacityShadow; border-radius: $cornerRadiusShadow; }
316314

‎public/images/icon-x-black.svg‎

Lines changed: 7 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)