From f4a4aa6737fbce18367a75ade386b6bc6f100944 Mon Sep 17 00:00:00 2001 From: Chris Hart Date: Wed, 10 Dec 2014 16:01:57 -0500 Subject: [PATCH] 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 Reviewed-by: Colleen Palmer Product-Review: Colleen Palmer QA-Review: Matt Fairbourn --- app/jsx/styleguide/ReactModalExample.jsx | 3 +- app/stylesheets/components/_buttons.scss | 20 +++++- app/stylesheets/components/_forms.scss | 5 +- app/stylesheets/components/_react_modal.scss | 5 +- app/stylesheets/vendor/bootstrap/_mixins.scss | 19 +++-- .../vendor/jqueryui/_jquery.ui.dialog.scss | 70 ++++++++++++------- .../vendor/jqueryui/_jquery.ui.theme.scss | 14 ++-- public/images/icon-x-black.svg | 7 ++ 8 files changed, 91 insertions(+), 52 deletions(-) create mode 100644 public/images/icon-x-black.svg diff --git a/app/jsx/styleguide/ReactModalExample.jsx b/app/jsx/styleguide/ReactModalExample.jsx index 670a6c53e74..091e3168758 100644 --- a/app/jsx/styleguide/ReactModalExample.jsx +++ b/app/jsx/styleguide/ReactModalExample.jsx @@ -45,8 +45,9 @@ define([

Modal Title Goes Here

-
diff --git a/app/stylesheets/components/_buttons.scss b/app/stylesheets/components/_buttons.scss index 232453f0bf5..34e249f4cea 100644 --- a/app/stylesheets/components/_buttons.scss +++ b/app/stylesheets/components/_buttons.scss @@ -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; } -} \ No newline at end of file +} diff --git a/app/stylesheets/components/_forms.scss b/app/stylesheets/components/_forms.scss index f71184965f6..7acbba62132 100644 --- a/app/stylesheets/components/_forms.scss +++ b/app/stylesheets/components/_forms.scss @@ -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; diff --git a/app/stylesheets/components/_react_modal.scss b/app/stylesheets/components/_react_modal.scss index a42e5c71881..a79d27eeb4b 100644 --- a/app/stylesheets/components/_react_modal.scss +++ b/app/stylesheets/components/_react_modal.scss @@ -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; } diff --git a/app/stylesheets/vendor/bootstrap/_mixins.scss b/app/stylesheets/vendor/bootstrap/_mixins.scss index de03f774de3..6cca885c707 100644 --- a/app/stylesheets/vendor/bootstrap/_mixins.scss +++ b/app/stylesheets/vendor/bootstrap/_mixins.scss @@ -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) { diff --git a/app/stylesheets/vendor/jqueryui/_jquery.ui.dialog.scss b/app/stylesheets/vendor/jqueryui/_jquery.ui.dialog.scss index b1810abd174..c49340f2970 100755 --- a/app/stylesheets/vendor/jqueryui/_jquery.ui.dialog.scss +++ b/app/stylesheets/vendor/jqueryui/_jquery.ui.dialog.scss @@ -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 - - - -``` - -*/ - //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; diff --git a/app/stylesheets/vendor/jqueryui/_jquery.ui.theme.scss b/app/stylesheets/vendor/jqueryui/_jquery.ui.theme.scss index 0db2609cce0..5ca7558f911 100755 --- a/app/stylesheets/vendor/jqueryui/_jquery.ui.theme.scss +++ b/app/stylesheets/vendor/jqueryui/_jquery.ui.theme.scss @@ -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; } diff --git a/public/images/icon-x-black.svg b/public/images/icon-x-black.svg new file mode 100644 index 00000000000..147abbab3c0 --- /dev/null +++ b/public/images/icon-x-black.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file