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>
This commit is contained in:
Chris Hart
parent
a48441ee99
commit
f4a4aa6737
|
|
@ -45,8 +45,9 @@ define([
|
|||
<h4>Modal Title Goes Here</h4>
|
||||
</div>
|
||||
<div className="ReactModal__Header-Actions">
|
||||
<button className="Button Button--link Button--small" type="button" onClick={this.closeModal}>
|
||||
<button className="Button Button--icon-action" type="button" onClick={this.closeModal}>
|
||||
<i className="icon-x"></i>
|
||||
<span className="screenreader-only">Close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -262,6 +262,24 @@ input[type="button"] {
|
|||
}
|
||||
}
|
||||
|
||||
// Icon "action" buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Like link buttons, but containing only an icon, which appears in dark gray
|
||||
// Usually used to perform user actions like closing, editing, etc.
|
||||
|
||||
.Button--icon-action {
|
||||
transition: color 0.2s;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 2px 4px;
|
||||
border-radius: 0;
|
||||
color: $ic-icon-link-color;
|
||||
&:hover, &:focus {
|
||||
background: transparent;
|
||||
color: $ic-icon-link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle jQueryUI-generated button classes
|
||||
.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"] {
|
|||
&:hover { @extend .Button--active; }
|
||||
}
|
||||
&.ui-state-disabled { @extend .Button.disabled; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,9 +95,8 @@ controls on the bottom required this.
|
|||
.form-controls {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
background-color: #EFEFEF;
|
||||
border-top: 1px solid #DDD;
|
||||
box-shadow: inset 0 1px 0 white;
|
||||
background-color: lighten($canvas-neutral, 5%);
|
||||
border-top: 1px solid $can-border-light;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
|
|
|||
|
|
@ -63,8 +63,7 @@ See `app/jsx/examples/ReactModalExample.jsx` for complete example usage.
|
|||
|
||||
|
||||
@mixin ReactModalPadding {
|
||||
padding: 6px;
|
||||
@include breakpoint(tablet) { padding: 12px; }
|
||||
padding: 12px;
|
||||
@include breakpoint(desktop) { padding: 16px; }
|
||||
}
|
||||
|
||||
|
|
@ -139,7 +138,7 @@ See `app/jsx/examples/ReactModalExample.jsx` for complete example usage.
|
|||
.ReactModal__Header-Actions { text-align: right; }
|
||||
|
||||
.ReactModal__Body {
|
||||
padding: 6px;
|
||||
padding: 12px;
|
||||
background: $canvas-light;
|
||||
@include breakpoint(tablet) { padding: 16px; }
|
||||
@include breakpoint(desktop) { padding: 24px; }
|
||||
|
|
|
|||
|
|
@ -549,18 +549,17 @@
|
|||
color: $text-color;
|
||||
border: 1px solid darken($button-color, 15%);
|
||||
|
||||
@if $use_high_contrast {
|
||||
&:hover {
|
||||
&:hover, &:focus {
|
||||
background: darken($button-color, 6%);
|
||||
color: $text-color;
|
||||
|
||||
// handle jquery UI ui-button conflicts
|
||||
&.ui-state-hover, &.ui-state-focus {
|
||||
background: darken($button-color, 6%);
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
&:hover, &:focus {
|
||||
background: darken($button-color, 6%);
|
||||
color: $text-color;
|
||||
}
|
||||
border-color: darken($button-color, 15%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if lightness($button-color) > lightness($text-color) {
|
||||
|
|
|
|||
|
|
@ -9,8 +9,12 @@
|
|||
* http://docs.jquery.com/UI/Dialog#theming
|
||||
*/
|
||||
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
|
||||
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
|
||||
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
|
||||
|
||||
.ui-dialog .ui-dialog-title {
|
||||
float: left; margin: 0 16px 0 0;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
|
||||
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
|
||||
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
|
||||
|
|
@ -21,46 +25,60 @@
|
|||
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
|
||||
.ui-draggable .ui-dialog-titlebar { cursor: move; }
|
||||
|
||||
/*
|
||||
@styleguide Modal Dialog
|
||||
|
||||
We don't use Bootstraps modal dialog, please use jQuery UI `ui-dialog` with our normal bootstrap style buttons
|
||||
|
||||
```html
|
||||
<button class="btn element_toggler" aria-controls="testdialog">Show Dialog</button>
|
||||
|
||||
<form id="testdialog" data-turn-into-dialog='{"width":600,"modal":true}' style="display:none" title="Title Goes Here">
|
||||
<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>
|
||||
<div class="button-container">
|
||||
<button type="submit" class="btn btn-primary">submit</button>
|
||||
<a class="btn dialog_closer">cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
*/
|
||||
|
||||
//our overrides
|
||||
|
||||
.ui-dialog {
|
||||
padding: 0;
|
||||
|
||||
.ui-dialog-titlebar-close {
|
||||
span { background: url(/images/modal_close.svg) 0 0 no-repeat; background-size: 16px 16px; }
|
||||
&:hover, &:focus {
|
||||
right: 12px;
|
||||
width: 20px; height: 20px;
|
||||
span {
|
||||
transition: opacity 0.2s;
|
||||
background: url(/images/icon-x-black.svg) 50% 50% no-repeat;
|
||||
background-size: 10px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
&.ui-state-hover, &.ui-state-focus {
|
||||
border-color: transparent;
|
||||
span {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
padding: .4em 1em; position: relative;
|
||||
&.ui-widget-header {
|
||||
background: $canvas-light;
|
||||
padding: 16px 12px;
|
||||
border-bottom: 1px solid $can-border-light;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog.ui-widget-content {
|
||||
border: none;
|
||||
box-shadow: 0 1px 4px 1px rgba($canvas-secondary, 0.95);
|
||||
}
|
||||
|
||||
// note that these styles are shared in both .ui-dialog and .ui-datepicker
|
||||
|
||||
.ui-datepicker .ui-datepicker-time,
|
||||
.ui-dialog .ui-dialog-buttonpane {
|
||||
background-color: $formActionsBackground;
|
||||
box-shadow: inset 0 1px 0 white;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
background-color: lighten($canvas-neutral, 5%);
|
||||
border-top: 1px solid $can-border-light;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-buttonpane {
|
||||
padding: 6px;
|
||||
@include breakpoint(tablet) { padding: 12px; }
|
||||
.ui-dialog-buttonset button {
|
||||
margin-top: 0; margin-bottom: 0;
|
||||
&:last-of-type { margin-right: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker .ui-datepicker-header,
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
border-top: 0; border-left: 0; border-right: 0;
|
||||
|
|
|
|||
|
|
@ -32,9 +32,7 @@
|
|||
//.ui-widget-content .ui-state-default,
|
||||
.ui-widget-header .ui-state-default { border: 1px solid $borderColorDefault; color: $fcDefault; font-weight: normal;
|
||||
@include vertical-gradient(white, #e6e6e6);
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
border-bottom-color: #bbb;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.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 @@
|
|||
----------------------------------*/
|
||||
|
||||
/* Corner radius */
|
||||
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: $cornerRadius; }
|
||||
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: $cornerRadius; }
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: $cornerRadius; }
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: $cornerRadius; }
|
||||
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: $baseBorderRadius; }
|
||||
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: $baseBorderRadius; }
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: $baseBorderRadius; }
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: $baseBorderRadius; }
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay { background: $bgColorOverlay;
|
||||
opacity: $opacityOverlay;
|
||||
.ui-widget-overlay {
|
||||
background: rgba($canvas-secondary, 0.75);
|
||||
}
|
||||
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: $bgColorShadow; opacity: $opacityShadow; border-radius: $cornerRadiusShadow; }
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" width="512" height="512" enable-background="new 0 0 512 512" xml:space="preserve">
|
||||
<g id="X">
|
||||
<polygon points="509.5,73.2 435.2,4 254.8,184.2 74.3,4 2.5,75.8 182.9,256 2.5,436.2 76.9,505.5 254.8,327.7 435.2,508 507,436.2
|
||||
326.6,256 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 394 B |
Loading…
Reference in New Issue