Fix focus styling issues with the Edit Route modal

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Release Notes for Craft CMS 3.x
 
+## Unreleased
+
+### Fixed
+- Fixed focus styling issues with the Edit Route modal.
+
 ## 3.7.46 - 2022-06-28
 
 ### Added

src/web/assets/routes/dist/css/routes.css

@@ -1,3 +1,3 @@
-#routes{margin:0 1px 25px}.route{background:#fff;box-shadow:0 0 0 1px #cdd8e4,0 2px 12px rgba(205,216,228,.5);position:relative;margin:14px 0;padding:0;border-radius:5px;background-color:#f3f7fc;cursor:pointer}.route:focus{box-shadow:var(--focus-ring)}.route:hover:after{position:absolute;top:9px;font-family:"Craft";speak:none;-webkit-font-feature-settings:"liga","dlig";-ms-font-feature-settings:"liga","dlig";-o-font-feature-settings:"liga","dlig";font-feature-settings:"liga","dlig";text-rendering:optimizeLegibility;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;text-align:center;font-style:normal;vertical-align:middle;word-wrap:normal !important;-webkit-user-select:none;user-select:none;opacity:.8;content:"edit";color:#0b69a3}body.ltr .route:hover:after{right:5px}body.rtl .route:hover:after{left:5px}.route .uri-container,.route .template{padding:7px 14px;line-height:18px;min-height:18px}.route .uri-container{position:relative;color:#0b69a3;background:#fff}body.ltr .route .uri-container{margin-right:20px}body.rtl .route .uri-container{margin-left:20px}body.ltr .route .uri-container{padding-right:10px}body.rtl .route .uri-container{padding-left:10px}body.ltr .route .uri-container{border-radius:5px 0 0 5px}body.rtl .route .uri-container{border-radius:0 5px 5px 0}body.ltr .route .uri-container{float:left}body.rtl .route .uri-container{float:right}.route .uri-container:after{display:block;content:"";text-indent:-100%;overflow:hidden;position:absolute;top:0;width:15px;height:32px;background-repeat:no-repeat}body.ltr .route .uri-container:after{right:-15px}body.rtl .route .uri-container:after{left:-15px}body.ltr .route .uri-container:after{background-image:url(../images/route-bg.png)}body.rtl .route .uri-container:after{background-image:url(../images/route-bg_rtl.png)}.route .uri-container .site{display:inline-block;border-radius:3px;padding:1px 5px;background:#f3f7fc;box-shadow:inset 0 0 0 1px rgba(51,64,77,.1);color:#596673}body.ltr .route .uri-container .site{margin:-1px 8px -1px 0}body.rtl .route .uri-container .site{margin:-1px 0 -1px 8px}.route .uri-container .uri .token{margin:0 3px -1px}.route .template{color:#596673}.route .template:before{font-family:"Craft";speak:none;-webkit-font-feature-settings:"liga","dlig";-ms-font-feature-settings:"liga","dlig";-o-font-feature-settings:"liga","dlig";font-feature-settings:"liga","dlig";text-rendering:optimizeLegibility;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;text-align:center;font-style:normal;vertical-align:middle;word-wrap:normal !important;-webkit-user-select:none;user-select:none;opacity:.8;content:"template"}body.ltr .route .template:before{margin:0 5px 0 0}body.rtl .route .template:before{margin:0 0 0 5px}.route-settings{width:500px;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:stretch;align-items:stretch}.route-settings .body{height:calc(100% - 131px);overflow:auto}.route-settings .body .uri{width:auto;cursor:text}.route-settings .body .uri .token{cursor:default}.route-settings .uri-tokens{margin-top:10px;border-radius:5px;padding:15px 25px;box-shadow:inset 0 1px 3px -1px #bed2e9}.route-settings .uri-tokens h4{margin-bottom:5px;text-align:center}.route-settings .uri-tokens .token{cursor:pointer}body.ltr .route-settings .uri-tokens .token{margin:5px 5px 0 0}body.rtl .route-settings .uri-tokens .token{margin:5px 0 0 5px}.route-settings .delete{display:block;margin-top:7px;color:#cf1124}body.ltr .route-settings .delete{float:left}body.rtl .route-settings .delete{float:right}@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-moz-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min-device-pixel-ratio: 1.5),only screen and (min-resolution: 1.5dppx){.route .uri-container:after{-o-background-size:15px 32px;background-size:15px 32px}body.ltr .route .uri-container:after{background-image:url(../images/route-bg_2x.png)}body.rtl .route .uri-container:after{background-image:url(../images/route-bg_rtl_2x.png)}}
+#routes{margin:0 1px 25px}.route{background:#fff;box-shadow:0 0 0 1px #cdd8e4,0 2px 12px rgba(205,216,228,.5);position:relative;margin:14px 0;padding:0;border-radius:5px;background-color:#f3f7fc;cursor:pointer}.route:focus{box-shadow:var(--focus-ring)}.route:hover:after{position:absolute;top:9px;font-family:"Craft";speak:none;-webkit-font-feature-settings:"liga","dlig";-ms-font-feature-settings:"liga","dlig";-o-font-feature-settings:"liga","dlig";font-feature-settings:"liga","dlig";text-rendering:optimizeLegibility;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;text-align:center;font-style:normal;vertical-align:middle;word-wrap:normal !important;-webkit-user-select:none;user-select:none;opacity:.8;content:"edit";color:#0b69a3}body.ltr .route:hover:after{right:5px}body.rtl .route:hover:after{left:5px}.route .uri-container,.route .template{padding:7px 14px;line-height:18px;min-height:18px}.route .uri-container{position:relative;color:#0b69a3;background:#fff}body.ltr .route .uri-container{margin-right:20px}body.rtl .route .uri-container{margin-left:20px}body.ltr .route .uri-container{padding-right:10px}body.rtl .route .uri-container{padding-left:10px}body.ltr .route .uri-container{border-radius:5px 0 0 5px}body.rtl .route .uri-container{border-radius:0 5px 5px 0}body.ltr .route .uri-container{float:left}body.rtl .route .uri-container{float:right}.route .uri-container:after{display:block;content:"";text-indent:-100%;overflow:hidden;position:absolute;top:0;width:15px;height:32px;background-repeat:no-repeat}body.ltr .route .uri-container:after{right:-15px}body.rtl .route .uri-container:after{left:-15px}body.ltr .route .uri-container:after{background-image:url(../images/route-bg.png)}body.rtl .route .uri-container:after{background-image:url(../images/route-bg_rtl.png)}.route .uri-container .site{display:inline-block;border-radius:3px;padding:1px 5px;background:#f3f7fc;box-shadow:inset 0 0 0 1px rgba(51,64,77,.1);color:#596673}body.ltr .route .uri-container .site{margin:-1px 8px -1px 0}body.rtl .route .uri-container .site{margin:-1px 0 -1px 8px}.route .uri-container .uri .token{margin:0 3px -1px}.route .template{color:#596673}.route .template:before{font-family:"Craft";speak:none;-webkit-font-feature-settings:"liga","dlig";-ms-font-feature-settings:"liga","dlig";-o-font-feature-settings:"liga","dlig";font-feature-settings:"liga","dlig";text-rendering:optimizeLegibility;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;text-align:center;font-style:normal;vertical-align:middle;word-wrap:normal !important;-webkit-user-select:none;user-select:none;opacity:.8;content:"template"}body.ltr .route .template:before{margin:0 5px 0 0}body.rtl .route .template:before{margin:0 0 0 5px}.route-settings{width:500px;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:stretch;align-items:stretch}.route-settings .body{height:calc(100% - 131px);overflow:auto}.route-settings .body .uri{width:auto;cursor:text}.route-settings .body .uri input[type=text]{box-shadow:none}.route-settings .body .uri .token{cursor:default}.route-settings .body .uri .token:focus{box-shadow:var(--focus-ring)}.route-settings .uri-tokens{margin-top:10px;border-radius:5px;padding:15px 25px;box-shadow:inset 0 1px 3px -1px #bed2e9}.route-settings .uri-tokens h4{margin-bottom:5px;text-align:center}.route-settings .uri-tokens .token{cursor:pointer}body.ltr .route-settings .uri-tokens .token{margin:5px 5px 0 0}body.rtl .route-settings .uri-tokens .token{margin:5px 0 0 5px}.route-settings .delete{display:block;margin-top:7px;color:#cf1124}body.ltr .route-settings .delete{float:left}body.rtl .route-settings .delete{float:right}@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-moz-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min-device-pixel-ratio: 1.5),only screen and (min-resolution: 1.5dppx){.route .uri-container:after{-o-background-size:15px 32px;background-size:15px 32px}body.ltr .route .uri-container:after{background-image:url(../images/route-bg_2x.png)}body.rtl .route .uri-container:after{background-image:url(../images/route-bg_rtl_2x.png)}}
 
 /*# sourceMappingURL=routes.css.map*/

src/web/assets/routes/src/routes.scss

@@ -97,8 +97,16 @@
       width: auto;
       cursor: text;
 
+      input[type='text'] {
+        box-shadow: none;
+      }
+
       .token {
         cursor: default;
+
+        &:focus {
+          box-shadow: var(--focus-ring);
+        }
       }
     }
   }