diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 55b81b55d6..2385ab7d77 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -782,12 +782,20 @@ hr.divide { // ==================== // basic utility + +// UI - semantically hide text .sr { @extend %cont-text-sr; } +// UI - faking a link's behavior .fake-link { - cursor: pointer; + @extend %ui-fake-link; +} + +// UI - disabled +.is-disabled { + @extend %ui-disabled; } .non-list { diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index f96977be71..cf8c114e49 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -1,6 +1,21 @@ // studio - elements - UI controls // ==================== +// ==================== + +// general actions +%action { + @extend %ui-fake-link; + + &.is-disabled { + @extend %ui-disabled; + -webkit-filter: grayscale(65%); + opacity: 0.65; + } +} + +// ==================== + // gray primary button %btn-primary-gray { @extend %ui-btn-primary; diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 8d438abe23..9d19cfdee0 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -1038,6 +1038,7 @@ body.unit { padding: $baseline/2 $baseline; } + .unit-actions { border-bottom: none; padding-bottom: 0; @@ -1055,8 +1056,16 @@ body.unit { div { margin-top: 15px; } - } + // actions - publish/edit + .publish-draft { + @extend %action; + } + + .create-draft { + @extend %action; + } + } input[type="radio"] { diff --git a/common/static/js/spec/CSS3_workarounds_spec.js b/common/static/js/spec/CSS3_workarounds_spec.js new file mode 100644 index 0000000000..3207e0d783 --- /dev/null +++ b/common/static/js/spec/CSS3_workarounds_spec.js @@ -0,0 +1,40 @@ +describe("CSS3 workarounds", function() { + describe("pointer-events", function() { + beforeEach(function() { + var html = "What wondrous life in this I lead"; + setFixtures(html); + }); + + it("should not prevent default when pointerEvents is supported", function() { + // In case this test suite is being run in a browser where + // 'pointerEvents' is not supported, mock out document.body.style + // so that it includes 'pointerEvents' + var mockBodyStyle = document.body.style; + if (!("pointerEvents" in mockBodyStyle)) { + mockBodyStyle["pointerEvents"] = ""; + }; + + pointerEventsNone(".ui-disabled", mockBodyStyle); + spyOnEvent(".ui-disabled", "click"); + $(".ui-disabled").click(); + expect("click").not.toHaveBeenPreventedOn(".ui-disabled"); + }); + + it("should prevent default when pointerEvents is not Supported", function() { + // mock document.body.style so it does not include 'pointerEvents' + var mockBodyStyle = {}, + bodyStyleKeys = Object.keys(document.body.style); + for (var index = 0; index < bodyStyleKeys.length; index++) { + var key = bodyStyleKeys[index]; + if (key !== "pointerEvents") { + mockBodyStyle[key] = document.body.style[key]; + }; + }; + + pointerEventsNone(".ui-disabled", mockBodyStyle); + spyOnEvent(".ui-disabled", "click"); + $(".ui-disabled").click(); + expect("click").toHaveBeenPreventedOn(".ui-disabled"); + }); + }); +}); diff --git a/common/static/js/src/CSS3_workarounds.js b/common/static/js/src/CSS3_workarounds.js new file mode 100644 index 0000000000..d75d6ebc5a --- /dev/null +++ b/common/static/js/src/CSS3_workarounds.js @@ -0,0 +1,17 @@ +// A file for JS workarounds for CSS3 features that are not +// supported in older browsers + +var pointerEventsNone = function (selector, supportedStyles) { + // Check to see if the brower supports 'pointer-events' css rule. + // If it doesn't, use javascript to stop the link from working + // when clicked. + $(selector).click(function (event) { + if (!('pointerEvents' in supportedStyles)) { + event.preventDefault(); + }; + }); +}; + +$(function () { + pointerEventsNone('.ui-disabled', document.body.styles); +}); diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index da4a9c19d1..69e8cc200a 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -106,6 +106,7 @@ %ui-disabled { pointer-events: none; outline: none; + cursor: default; } // extends - UI - depth levels diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index 01d415e1ac..0655a9198d 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -222,10 +222,6 @@ mark { } } -.sr { - @extend %text-sr; -} - .help-tab { @include transform(rotate(-90deg)); @include transform-origin(0 0); @@ -286,7 +282,19 @@ mark { height: 150px; } -// ui - skipnav +// ==================== + +// UI - disabled state +.is-disabled { + @extend %ui-disabled; +} + +// UI - semantically hide text +.sr { + @extend %text-sr; +} + +// UI - skipnav .nav-skip { display: block; position: absolute; diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index 0205fe9875..f6cbd3ce5f 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -87,6 +87,7 @@ %ui-disabled { pointer-events: none; outline: none; + cursor: default; } // extends - UI - depth levels