Merge pull request #116 from open-craft/jill/fix-ie11-outline

Makes draggable items more visible in IE 11

.travis.yml

@@ -12,7 +12,7 @@ install:
     - "pip install selenium==2.53.0"
     - "pip uninstall -y xblock-drag-and-drop-v2"
     - "python setup.py sdist"
-    - "pip install dist/xblock-drag-and-drop-v2-2.0.14.tar.gz"
+    - "pip install dist/xblock-drag-and-drop-v2-2.0.15.tar.gz"
 script:
     - pep8 drag_and_drop_v2 tests --max-line-length=120
     - pylint drag_and_drop_v2

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -183,8 +183,10 @@
 .xblock--drag-and-drop .drag-container .option[draggable='true']:hover,
 .xblock--drag-and-drop .drag-container .option[draggable='true'][aria-grabbed='true'] {
     outline-width: 2px;
-    outline-style: solid;
+    outline-style: dotted;
     outline-offset: -4px;
+    /* IE 11 doesn't support outline-offset, so we use a box-shadow instead. */
+    box-shadow: inset 0 0 0 2px;
 }
 
 .xblock--drag-and-drop .drag-container .option.grabbed-with-mouse {
@@ -266,7 +268,7 @@
 /* Focused zone */
 .xblock--drag-and-drop .item-bank:focus,
 .xblock--drag-and-drop .zone:focus {
-    outline: 2px solid #a5a5a5;
+    outline: 2px dotted #a5a5a5;
 }
 
 .xblock--drag-and-drop .drag-container .target .zone p {
@@ -423,7 +425,7 @@
 }
 
 .xblock--drag-and-drop .popup .close-feedback-popup-button:focus {
-    outline: 2px solid white;
+    outline: 2px dotted white;
 }
 
 /*** edX pattern library components ***/

setup.py

@@ -23,7 +23,7 @@ def package_data(pkg, root_list):
 
 setup(
     name='xblock-drag-and-drop-v2',
-    version='2.0.14',
+    version='2.0.15',
     description='XBlock - Drag-and-Drop v2',
     packages=['drag_and_drop_v2'],
     install_requires=[