diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index cfe543c40..53e7ed673 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -664,7 +664,7 @@ nav#layout-mainmenu a {text-decoration:none} nav#layout-mainmenu a:focus {background:transparent} nav#layout-mainmenu ul {margin:0;padding:0;list-style:none;float:left;white-space:nowrap;overflow:hidden} nav#layout-mainmenu ul li {color:rgba(255,255,255,0.6);display:inline-block;vertical-align:top;position:relative;margin-right:30px} -nav#layout-mainmenu ul li a {display:inline-block;font-size:14px;color:inherit;outline:none;padding:14px 0 10px} +nav#layout-mainmenu ul li a {display:inline-block;font-size:14px;color:inherit;padding:14px 0 10px} nav#layout-mainmenu ul li a:hover {background-color:transparent} nav#layout-mainmenu ul li a:active, nav#layout-mainmenu ul li a:focus {text-decoration:none;color:rgba(255,255,255,0.6)} @@ -771,7 +771,7 @@ nav#layout-mainmenu.navbar-mode-collapse .menu-toggle {display:inline-block;colo .mainmenu-collapsed >div ul.mainmenu-nav li:first-child {margin-left:0} .mainmenu-collapsed >div ul {margin:0;padding:5px 0 15px 15px;overflow:hidden} .mainmenu-collapsed >div ul li {color:rgba(255,255,255,0.6);display:inline-block;vertical-align:top;position:relative;margin-right:30px} -.mainmenu-collapsed >div ul li a {display:inline-block;font-size:14px;color:inherit;outline:none} +.mainmenu-collapsed >div ul li a {display:inline-block;font-size:14px;color:inherit} .mainmenu-collapsed >div ul li a:hover {background-color:transparent} .mainmenu-collapsed >div ul li a:active, .mainmenu-collapsed >div ul li a:focus {text-decoration:none;color:rgba(255,255,255,0.6)} diff --git a/modules/backend/assets/less/layout/mainmenu.less b/modules/backend/assets/less/layout/mainmenu.less index 4e399cf44..5d3492c26 100644 --- a/modules/backend/assets/less/layout/mainmenu.less +++ b/modules/backend/assets/less/layout/mainmenu.less @@ -20,7 +20,6 @@ body.mainmenu-open { display: inline-block; font-size: @font-size-base; color: inherit; - outline: none; &:hover { background-color: transparent; diff --git a/modules/system/assets/css/styles.css b/modules/system/assets/css/styles.css index f65f3bc8f..11318749e 100644 --- a/modules/system/assets/css/styles.css +++ b/modules/system/assets/css/styles.css @@ -89,7 +89,7 @@ textarea {background-image:none} a {color:#0181b9;text-decoration:none} a:hover, a:focus {color:#001721;text-decoration:underline} -a:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} +a:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color} img {vertical-align:middle} .img-responsive {display:block;max-width:100%;height:auto} .img-rounded {-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px} diff --git a/modules/system/assets/ui/less/global.mixins.utility.css b/modules/system/assets/ui/less/global.mixins.utility.css new file mode 100644 index 000000000..e69de29bb diff --git a/modules/system/assets/ui/less/global.mixins.utility.less b/modules/system/assets/ui/less/global.mixins.utility.less index e767d5113..4da6c82f1 100644 --- a/modules/system/assets/ui/less/global.mixins.utility.less +++ b/modules/system/assets/ui/less/global.mixins.utility.less @@ -26,9 +26,12 @@ .tab-focus() { // Default outline: thin dotted; + outline-offset: 0px; + + // Firefox + outline: 4px auto Highlight; // WebKit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; + outline: 4px auto -webkit-focus-ring-color; } // Center-align a block level element @@ -128,4 +131,4 @@ .responsive-invisibility() { display: none !important; -} \ No newline at end of file +} diff --git a/modules/system/assets/ui/less/site.normalize.less b/modules/system/assets/ui/less/site.normalize.less index 5cda25032..d40b1a822 100644 --- a/modules/system/assets/ui/less/site.normalize.less +++ b/modules/system/assets/ui/less/site.normalize.less @@ -1,13 +1,3 @@ -/*! Make focus ring standard on every browser */ - -// See github issue https://github.com/octobercms/october/issues/4892 - -&:focus { - outline: none; - -webkit-box-shadow: inset 0 1px 2px rgba(27,31,35,.075), 0 0 0 0.2em rgba(3,102,214,.3); - box-shadow: inset 0 1px 2px rgba(27,31,35,.075), 0 0 0 0.2em rgba(3,102,214,.3); -} - /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ // diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index c52bc7218..50a4f7c2e 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -1,4 +1,3 @@ -:focus {outline:none;-webkit-box-shadow:inset 0 1px 2px rgba(27,31,35,.075),0 0 0 .2em rgba(3,102,214,.3);box-shadow:inset 0 1px 2px rgba(27,31,35,.075),0 0 0 .2em rgba(3,102,214,.3)} html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} body {margin:0} article, @@ -90,7 +89,7 @@ textarea {background-image:none} a {color:#0181b9;text-decoration:none} a:hover, a:focus {color:#001721;text-decoration:underline} -a:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} +a:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color} img {vertical-align:middle} .img-responsive {display:block;max-width:100%;height:auto} .img-rounded {-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px} @@ -467,7 +466,7 @@ address {margin-bottom:20px;font-style:normal;line-height:1.42857143} .btn {display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:8px 19.5px;font-size:14px;line-height:1.42857143;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .btn:focus, .btn:active:focus, -.btn.active:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} +.btn.active:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color} .btn:hover, .btn:focus {color:#fff;text-decoration:none} .btn:active, @@ -3690,7 +3689,7 @@ select[multiple], select[size] {height:auto} input[type="file"]:focus, input[type="radio"]:focus, -input[type="checkbox"]:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} +input[type="checkbox"]:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color} output {display:block;padding-top:9px;font-size:14px;line-height:1.42857143;color:#385487} .form-control {display:block;width:100%;height:38px;padding:8px 13px 9px;font-size:14px;line-height:1.42857143;color:#385487;background-color:#fff;background-image:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s} .form-control:focus {border-color:#d1d6d9;outline:0}