From 96c58d108ebb41a5875a8f2192be437f3245f4c3 Mon Sep 17 00:00:00 2001 From: brandonkelly Date: Sat, 2 Jul 2022 05:26:09 -0700 Subject: [PATCH] Fix focus styling issues with the Edit Route modal --- CHANGELOG.md | 5 +++++ src/web/assets/routes/dist/css/routes.css | 2 +- src/web/assets/routes/dist/css/routes.css.map | 2 +- src/web/assets/routes/src/routes.scss | 8 ++++++++ 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 28d8a32ae0..61256efff5 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/web/assets/routes/dist/css/routes.css b/src/web/assets/routes/dist/css/routes.css index 53efa74566..332ef2b11b 100644 --- a/src/web/assets/routes/dist/css/routes.css +++ b/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*/ \ No newline at end of file diff --git a/src/web/assets/routes/dist/css/routes.css.map b/src/web/assets/routes/dist/css/routes.css.map index bfbf37461f..e0a107fb9d 100644 --- a/src/web/assets/routes/dist/css/routes.css.map +++ b/src/web/assets/routes/dist/css/routes.css.map @@ -1 +1 @@ -{"version":3,"file":"css/routes.css","mappings":"AAGA,QACE,kBAGF,OCuOE,eA9OM,CA+ON,6DDtOA,kBACA,cACA,UACA,iBCwHkB,CDvHlB,wBCVQ,CDWR,eCmOA,aACE,6BDlOF,mBACE,kBACA,QCsJF,oBACA,WACA,4CAGA,wCACA,uCACA,oCACA,kCACA,mBACA,oBACA,oBACA,cACA,cACA,mCACA,kCAEA,qBACA,kBACA,kBACA,sBACA,4BACA,0CAEA,WD3KE,eACA,aCGM,CAuPR,4BACE,SD9Pe,CCgQjB,4BACE,QDjQe,CAMjB,uCAEE,iBACA,iBACA,gBAGF,sBACE,kBAKA,aCbM,CDcN,eCvCI,CAgaN,+BACE,iBD/XA,CCiYF,+BACE,gBDlYA,CCyZF,+BACE,kBDzZA,CC2ZF,+BACE,iBD5ZA,CC4SF,+BACE,0BAEF,+BACE,0BAyCF,+BACE,WAEF,+BACE,YDvVA,4BACE,cACA,WACA,kBACA,gBACA,kBACA,MAEA,WACA,YACA,4BC6NJ,qCACE,WDjOiB,CCmOnB,qCACE,UDpOiB,CAIf,qCACE,yDAEF,qCACE,yDAIJ,4BACE,qBAEA,iBCmEc,CDlEd,gBACA,kBC9DI,CD+DJ,6CACA,aCzDI,CAoYR,qCACE,uBAEF,qCACE,uBD5UA,kCACE,kBAIJ,iBACE,aClEM,CDoEN,wBC0FF,oBACA,WACA,4CAGA,wCACA,uCACA,oCACA,kCACA,mBACA,oBACA,oBACA,cACA,cACA,mCACA,kCAEA,qBACA,kBACA,kBACA,sBACA,4BACA,0CAEA,WD/GI,mBC6TJ,iCACE,iBAEF,iCACE,iBD5TJ,gBACE,YACA,oDACA,gDAEA,sBACE,0BACA,cAEA,2BACE,WACA,YAEA,kCACE,eAKN,4BACE,gBACA,iBCyBgB,CDxBhB,kBACA,wCAEA,+BACE,kBACA,kBAGF,mCAEE,eCwRJ,4CACE,mBAEF,4CACE,mBDxRF,wBACE,cAEA,eACA,aCtEK,CAoUP,iCACE,WAEF,iCACE,YD9PJ,yPAKE,4BACE,uDACA,qCACE,yDAEF,qCACE,wB","sources":["webpack:///./routes.scss","webpack:///../../../../../packages/craftcms-sass/_mixins.scss"],"sourcesContent":["@charset \"UTF-8\";\n@import '@craftcms/sass/mixins';\n\n#routes {\n margin: 0 1px 25px;\n}\n\n.route {\n @include pane;\n position: relative;\n margin: 14px 0;\n padding: 0;\n border-radius: $largeBorderRadius;\n background-color: $grey050;\n cursor: pointer;\n\n &:hover:after {\n position: absolute;\n top: 9px;\n @include right(5px);\n @include icon;\n content: 'edit';\n color: $linkColor;\n }\n\n .uri-container,\n .template {\n padding: 7px 14px;\n line-height: 18px;\n min-height: 18px;\n }\n\n .uri-container {\n position: relative;\n @include margin-right(20px);\n @include padding-right(10px);\n @include border-radius($largeBorderRadius, 0, 0, $largeBorderRadius);\n @include floatleft;\n color: $linkColor;\n background: $white;\n\n &:after {\n display: block;\n content: '';\n text-indent: -100%;\n overflow: hidden;\n position: absolute;\n top: 0;\n @include right(-15px);\n width: 15px;\n height: 32px;\n background-repeat: no-repeat;\n body.ltr & {\n background-image: url(images/route-bg.png);\n }\n body.rtl & {\n background-image: url(images/route-bg_rtl.png);\n }\n }\n\n .site {\n display: inline-block;\n @include margin(-1px, 8px, -1px, 0);\n border-radius: $smallBorderRadius;\n padding: 1px 5px;\n background: $grey050;\n box-shadow: inset 0 0 0 1px $hairlineColor;\n color: $mediumTextColor;\n }\n\n .uri .token {\n margin: 0 3px -1px;\n }\n }\n\n .template {\n color: $mediumTextColor;\n\n &:before {\n @include icon;\n @include margin(0, 5px, 0, 0);\n content: 'template';\n }\n }\n}\n\n.route-settings {\n width: 500px;\n flex-direction: column;\n align-items: stretch;\n\n .body {\n height: calc(100% - 131px);\n overflow: auto;\n\n .uri {\n width: auto;\n cursor: text;\n\n .token {\n cursor: default;\n }\n }\n }\n\n .uri-tokens {\n margin-top: 10px;\n border-radius: $largeBorderRadius;\n padding: 15px 25px;\n box-shadow: inset 0 1px 3px -1px darken($grey100, 10%);\n\n h4 {\n margin-bottom: 5px;\n text-align: center;\n }\n\n .token {\n @include margin(5px, 5px, 0, 0);\n cursor: pointer;\n }\n }\n\n .delete {\n display: block;\n @include floatleft;\n margin-top: 7px;\n color: $red600;\n }\n}\n\n@media only screen and (-webkit-min-device-pixel-ratio: 1.5),\n only screen and (-moz-min-device-pixel-ratio: 1.5),\n only screen and (-o-min-device-pixel-ratio: 3/2),\n only screen and (min-device-pixel-ratio: 1.5),\n only screen and (min-resolution: 1.5dppx) {\n .route .uri-container:after {\n background-size: 15px 32px;\n body.ltr & {\n background-image: url(images/route-bg_2x.png);\n }\n body.rtl & {\n background-image: url(images/route-bg_rtl_2x.png);\n }\n }\n}\n","$white: #fff;\n$black: #000;\n\n$grey050: hsl(212, 60%, 97%);\n$grey100: hsl(212, 50%, 93%);\n$grey200: hsl(212, 30%, 85%);\n$grey300: hsl(211, 13%, 65%);\n$grey350: hsl(211, 11%, 59%);\n$grey400: hsl(210, 10%, 53%);\n$grey500: hsl(211, 12%, 43%);\n$grey550: hsl(210, 13%, 40%);\n$grey600: hsl(209, 14%, 37%);\n$grey700: hsl(209, 18%, 30%);\n$grey800: hsl(209, 20%, 25%);\n$grey900: hsl(210, 24%, 16%);\n$grey1000: hsl(210, 24%, 10%);\n\n$blue050: #e3f8ff;\n$blue100: #b3ecff;\n$blue200: #81defd;\n$blue300: #5ed0fa;\n$blue400: #40c3f7;\n$blue500: #2bb0ed;\n$blue600: #1992d4;\n$blue700: #127fbf;\n$blue800: #0b69a3;\n$blue900: #035388;\n\n$cyan050: #e0fcff;\n$cyan100: #bef8fd;\n$cyan200: #87eaf2;\n$cyan300: #54d1db;\n$cyan400: #38bec9;\n$cyan500: #2cb1bc;\n$cyan600: #14919b;\n$cyan700: #0e7c86;\n$cyan800: #0a6c74;\n$cyan900: #044e54;\n\n$pink050: #ffe3ec;\n$pink100: #ffb8d2;\n$pink200: #ff8cba;\n$pink300: #f364a2;\n$pink400: #e8368f;\n$pink500: #da127d;\n$pink600: #bc0a6f;\n$pink700: #a30664;\n$pink800: #870557;\n$pink900: #620042;\n\n$red050: #ffe3e3;\n$red100: #ffbdbd;\n$red200: #ff9b9b;\n$red300: #f86a6a;\n$red400: #ef4e4e;\n$red500: #e12d39;\n$red600: #cf1124;\n$red700: #ab091e;\n$red800: #8a041a;\n$red900: #610316;\n\n$yellow050: #fffbea;\n$yellow100: #fff3c4;\n$yellow200: #fce588;\n$yellow300: #fadb5f;\n$yellow400: #f7c948;\n$yellow500: #f0b429;\n$yellow600: #de911d;\n$yellow700: #cb6e17;\n$yellow800: #b44d12;\n$yellow900: #8d2b0b;\n\n$teal050: #effcf6;\n$teal100: #c6f7e2;\n$teal200: #8eedc7;\n$teal300: #65d6ad;\n$teal400: #3ebd93;\n$teal500: #27ab83;\n$teal600: #199473;\n$teal700: #147d64;\n$teal800: #0c6b58;\n$teal900: #014d40;\n\n// submit button colors\n$primaryColor: $red500;\n$secondaryColor: $grey500;\n\n$inputColor: hsl(212, 25%, 50%);\n\n// text colors\n$textColor: $grey700;\n$mediumDarkTextColor: $grey550;\n$mediumTextColor: $grey550;\n$lightTextColor: $grey500;\n$linkColor: $blue800;\n\n// menu colors\n$menuOptionColor: $textColor;\n$menuOptionActiveColor: $white;\n$menuOptionActiveBackgroundColor: $grey350;\n\n// hairline colors\n$hairlineColor: transparentize($grey800, 0.9);\n$mediumHairlineColor: transparentize($grey600, 0.75);\n$darkHairlineColor: transparentize($grey400, 0.5);\n\n// focus colors\n$lightFocusColor: $blue300;\n$mediumFocusColor: $blue500;\n$darkFocusColor: #0f74b1;\n\n// focus rings\n$lightFocusRing: 0 0 0 1px $lightFocusColor,\n 0 0 0 3px transparentize($lightFocusColor, 0.3);\n$mediumFocusRing: 0 0 0 1px $mediumFocusColor,\n 0 0 0 3px transparentize($mediumFocusColor, 0.3);\n$darkFocusRing: 0 0 0 1px $darkFocusColor,\n 0 0 0 3px transparentize($darkFocusColor, 0.3);\n\n// selection colors\n$lightSelColor: $grey200;\n$darkSelColor: $grey600;\n\n// alert/notice colors\n$errorColor: $red600;\n$warningColor: $yellow800;\n$successColor: $teal500;\n$noticeColor: $blue800;\n\n// UI element styles\n$smallBorderRadius: 3px;\n$mediumBorderRadius: 4px;\n$largeBorderRadius: 5px;\n\n$menuBorderRadius: $mediumBorderRadius;\n$checkboxSize: 16px;\n$radioSize: 16px;\n\n@mixin sans-serif-font {\n font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI',\n 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\n 'Helvetica Neue', sans-serif;\n}\n\n@mixin fixed-width-font {\n font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n monospace;\n font-size: 0.9em !important;\n}\n\n// Other\n\n@mixin svg-mask($color) {\n rect,\n circle,\n ellipse,\n line,\n polyline,\n polygon,\n path,\n text {\n fill: $color;\n stroke-width: 0;\n transition: fill linear 100ms;\n }\n}\n\n@mixin icon {\n font-family: 'Craft';\n speak: none;\n -webkit-font-feature-settings: 'liga', 'dlig';\n -moz-font-feature-settings: 'liga=1, dlig=1';\n -moz-font-feature-settings: 'liga', 'dlig';\n -ms-font-feature-settings: 'liga', 'dlig';\n -o-font-feature-settings: 'liga', 'dlig';\n font-feature-settings: 'liga', 'dlig';\n text-rendering: optimizeLegibility;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n direction: ltr; // Fixes a rendering issue in Chrome/Win\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n display: inline-block;\n text-align: center;\n font-style: normal;\n vertical-align: middle;\n word-wrap: normal !important;\n user-select: none;\n\n opacity: 0.8;\n}\n\n@mixin angle($dir: down, $color: var(--ui-control-color)) {\n display: block;\n content: '';\n font-size: 0;\n width: 5px;\n height: 5px;\n border: solid $color;\n border-width: 0 2px 2px 0;\n\n @if $dir == up {\n transform: rotate(225deg);\n } @else if $dir == down {\n transform: rotate(45deg);\n } @else if $dir == left {\n body.ltr & {\n transform: rotate(135deg);\n }\n body.rtl & {\n transform: rotate(-45deg);\n }\n } @else if $dir == right {\n body.ltr & {\n transform: rotate(-45deg);\n }\n body.rtl & {\n transform: rotate(135deg);\n }\n }\n}\n\n@mixin clearafter {\n content: '';\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n@mixin shadow {\n box-shadow: 0 1px 5px -1px transparentize($grey900, 0.8);\n}\n\n@mixin pane {\n background: $white;\n box-shadow: 0 0 0 1px $grey200, 0 2px 12px transparentize($grey200, 0.5);\n\n &:focus {\n box-shadow: var(--focus-ring);\n }\n}\n\n@mixin modal {\n border-radius: $largeBorderRadius;\n background-color: $white;\n box-shadow: 0 25px 100px transparentize($grey900, 0.5);\n}\n\n@mixin light-on-dark-text() {\n // Make light on dark text sharp on Macs\n // (sub-pixel antialiasing looks too bold/blurry with light text on dark background)\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-weight: 500;\n}\n\n// RTL stuff\n\n@mixin left($left) {\n body.ltr & {\n left: $left;\n }\n body.rtl & {\n right: $left;\n }\n}\n\n@mixin right($right) {\n body.ltr & {\n right: $right;\n }\n body.rtl & {\n left: $right;\n }\n}\n\n@mixin alignleft {\n body.ltr & {\n text-align: left;\n }\n body.rtl & {\n text-align: right;\n }\n}\n\n@mixin alignright {\n body.ltr & {\n text-align: right;\n }\n body.rtl & {\n text-align: left;\n }\n}\n\n@mixin border-left($params...) {\n body.ltr & {\n border-left: $params;\n }\n body.rtl & {\n border-right: $params;\n }\n}\n\n@mixin border-right($params...) {\n body.ltr & {\n border-right: $params;\n }\n body.rtl & {\n border-left: $params;\n }\n}\n\n@mixin border-left-width($param) {\n body.ltr & {\n border-left-width: $param;\n }\n body.rtl & {\n border-right-width: $param;\n }\n}\n\n@mixin border-right-width($param) {\n body.ltr & {\n border-right-width: $param;\n }\n body.rtl & {\n border-left-width: $param;\n }\n}\n\n@mixin border-radius($tl, $tr, $br, $bl) {\n body.ltr & {\n border-radius: $tl $tr $br $bl;\n }\n body.rtl & {\n border-radius: $tr $tl $bl $br;\n }\n}\n\n@mixin border-top-left-radius($params...) {\n body.ltr & {\n border-top-left-radius: $params;\n }\n body.rtl & {\n border-top-right-radius: $params;\n }\n}\n\n@mixin border-top-right-radius($params...) {\n body.ltr & {\n border-top-right-radius: $params;\n }\n body.rtl & {\n border-top-left-radius: $params;\n }\n}\n\n@mixin border-bottom-left-radius($params...) {\n body.ltr & {\n border-bottom-left-radius: $params;\n }\n body.rtl & {\n border-bottom-right-radius: $params;\n }\n}\n\n@mixin border-bottom-right-radius($params...) {\n body.ltr & {\n border-bottom-right-radius: $params;\n }\n body.rtl & {\n border-bottom-left-radius: $params;\n }\n}\n\n@mixin floatleft {\n body.ltr & {\n float: left;\n }\n body.rtl & {\n float: right;\n }\n}\n\n@mixin floatright {\n body.ltr & {\n float: right;\n }\n body.rtl & {\n float: left;\n }\n}\n\n@mixin margin($t, $r, $b, $l, $important: '') {\n body.ltr & {\n margin: $t $r $b $l unquote($important);\n }\n body.rtl & {\n margin: $t $l $b $r unquote($important);\n }\n}\n\n@mixin margin-left($margin...) {\n body.ltr & {\n margin-left: $margin;\n }\n body.rtl & {\n margin-right: $margin;\n }\n}\n\n@mixin margin-right($margin...) {\n body.ltr & {\n margin-right: $margin;\n }\n body.rtl & {\n margin-left: $margin;\n }\n}\n\n@mixin padding($t, $r, $b, $l, $important: '') {\n body.ltr & {\n padding: $t $r $b $l unquote($important);\n }\n body.rtl & {\n padding: $t $l $b $r unquote($important);\n }\n}\n\n@mixin padding-left($padding...) {\n body.ltr & {\n padding-left: $padding;\n }\n body.rtl & {\n padding-right: $padding;\n }\n}\n\n@mixin padding-right($padding...) {\n body.ltr & {\n padding-right: $padding;\n }\n body.rtl & {\n padding-left: $padding;\n }\n}\n\n// Misc\n\n@mixin dark-inputs {\n @include placeholder-styles($grey400);\n\n .btn,\n .select:not(.selectize) select {\n background-color: $grey200;\n\n &:focus,\n &:hover {\n background-color: darken($grey200, 5%);\n }\n\n &:active,\n &.active {\n background-color: darken($grey200, 10%);\n }\n }\n\n .text {\n background-color: $grey200;\n\n &:focus {\n background-color: darken($grey200, 5%);\n }\n }\n}\n\n@mixin header-btn {\n width: 34px;\n height: 30px;\n padding-left: 0;\n padding-right: 0;\n\n &:not(:hover):not(:active):not(.active) {\n background-color: transparent;\n }\n &:not(:active):not(.active):hover {\n background-color: transparentize($grey300, 0.85);\n }\n}\n\n@mixin h6-styles {\n margin: 14px 0 3px;\n font-size: 10px;\n line-height: 1.2;\n color: $lightTextColor;\n text-transform: uppercase;\n font-weight: bold;\n}\n\n@mixin token-styles {\n display: inline-block;\n border-radius: 10px;\n padding: 2px 7px;\n font-size: 12px;\n line-height: 14px;\n color: $textColor;\n background-color: transparentize($white, 0.5);\n box-shadow: 0 0 0 1px $darkHairlineColor;\n}\n\n@mixin menu-styles {\n z-index: 100;\n border-radius: $menuBorderRadius;\n padding: 0 14px;\n overflow: auto;\n background: $white;\n user-select: none;\n box-shadow: 0 0 0 1px transparentize($grey900, 0.9),\n 0 5px 20px transparentize($grey900, 0.75);\n}\n\n@mixin menu-option-styles {\n margin: 0 -14px;\n padding: 10px 14px;\n color: $menuOptionColor;\n text-decoration: none;\n white-space: nowrap;\n}\n\n@mixin menu-option-active-styles {\n color: $menuOptionActiveColor;\n background-color: $menuOptionActiveBackgroundColor;\n}\n\n@mixin disclosure-link-hover-styles {\n color: $menuOptionColor;\n background-color: $grey050;\n}\n\n@mixin input-styles {\n border-radius: $smallBorderRadius;\n border: 1px solid transparentize($inputColor, 0.75);\n background-color: hsl(212, 50%, 99%);\n background-clip: padding-box;\n}\n\n@mixin input-focused-styles {\n border-color: hsl(var(--dark-focus-hsl));\n box-shadow: 0 0 0 2px hsla(var(--dark-focus-hsl), 0.7);\n}\n\n@mixin placeholder-styles($color) {\n ::-webkit-input-placeholder {\n color: $color;\n }\n\n input:-ms-input-placeholder {\n color: $color;\n }\n\n ::-ms-input-placeholder {\n color: $color;\n }\n\n :-moz-placeholder {\n color: $color;\n }\n\n ::-moz-placeholder {\n color: $color;\n }\n\n ::placeholder {\n color: $color;\n }\n}\n\n@mixin select-styles {\n position: relative;\n border-radius: $largeBorderRadius;\n white-space: nowrap;\n}\n\n@mixin select-container-styles {\n max-width: 100%;\n position: relative;\n :not(.flex) > & {\n display: inline-block;\n }\n}\n\n@mixin select-arrow-styles {\n @include angle;\n position: absolute;\n z-index: 1;\n top: calc(50% - 5px);\n @include right(9px);\n user-select: none;\n pointer-events: none;\n}\n\n@mixin select-input-styles {\n display: block;\n position: relative;\n max-width: 100%;\n border: none;\n @include padding(7px, 22px, 7px, 10px);\n font-size: 14px;\n line-height: 20px;\n color: $textColor;\n background-color: hsl(212, 25%, 90%);\n appearance: none;\n // from https://stackoverflow.com/a/15933790/1688568\n &::-ms-expand {\n display: none;\n }\n}\n\n@mixin select-input-fullwidth-styles {\n min-width: 100%;\n}\n\n@mixin select-input-focused-styles {\n outline-color: transparent;\n background-color: hsl(212, 25%, 85%);\n box-shadow: var(--focus-ring);\n}\n\n@mixin readable {\n font-size: 16px;\n line-height: 22px;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 24px 0 16px;\n font-weight: 600;\n }\n\n h1 {\n font-size: 32px;\n line-height: 40px;\n color: #000;\n }\n\n h2 {\n font-size: 24px;\n line-height: 30px;\n }\n\n h3 {\n font-size: 20px;\n line-height: 24px;\n }\n\n h4 {\n font-size: 16px;\n line-height: 20px;\n }\n\n h5 {\n font-size: 14px;\n line-height: 18px;\n }\n\n h6 {\n font-size: 13.6px;\n line-height: 17px;\n color: $mediumTextColor;\n }\n\n ul,\n ol {\n margin: 1em 0;\n @include padding-left(2em);\n }\n\n ul li {\n list-style-type: disc;\n }\n\n li + li {\n margin-top: 0.25em;\n }\n\n blockquote {\n margin: 16px 0;\n\n &:not(.note) {\n padding: 0 16px;\n color: $mediumTextColor;\n @include border-left(4px solid $hairlineColor);\n }\n\n &.note {\n position: relative;\n border-radius: 4px;\n padding: 1em;\n @include padding-left(56px);\n border: 1px solid;\n\n &:not(.tip):not(.warning) {\n border-color: $errorColor;\n color: #bf503f;\n\n &:before {\n content: 'alert';\n color: $errorColor;\n }\n }\n\n &.tip {\n border-color: $linkColor;\n color: $mediumTextColor;\n\n &:before {\n content: 'lightbulb';\n color: $linkColor;\n }\n }\n\n &.warning {\n border-color: $warningColor;\n color: #cf783a;\n\n &:before {\n content: 'alert';\n color: $warningColor;\n }\n }\n\n &:before {\n @include icon;\n position: absolute;\n top: 12px;\n @include left(16px);\n font-size: 30px;\n width: 24px;\n }\n }\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"css/routes.css","mappings":"AAGA,QACE,kBAGF,OCuOE,eA9OM,CA+ON,6DDtOA,kBACA,cACA,UACA,iBCwHkB,CDvHlB,wBCVQ,CDWR,eCmOA,aACE,6BDlOF,mBACE,kBACA,QCsJF,oBACA,WACA,4CAGA,wCACA,uCACA,oCACA,kCACA,mBACA,oBACA,oBACA,cACA,cACA,mCACA,kCAEA,qBACA,kBACA,kBACA,sBACA,4BACA,0CAEA,WD3KE,eACA,aCGM,CAuPR,4BACE,SD9Pe,CCgQjB,4BACE,QDjQe,CAMjB,uCAEE,iBACA,iBACA,gBAGF,sBACE,kBAKA,aCbM,CDcN,eCvCI,CAgaN,+BACE,iBD/XA,CCiYF,+BACE,gBDlYA,CCyZF,+BACE,kBDzZA,CC2ZF,+BACE,iBD5ZA,CC4SF,+BACE,0BAEF,+BACE,0BAyCF,+BACE,WAEF,+BACE,YDvVA,4BACE,cACA,WACA,kBACA,gBACA,kBACA,MAEA,WACA,YACA,4BC6NJ,qCACE,WDjOiB,CCmOnB,qCACE,UDpOiB,CAIf,qCACE,yDAEF,qCACE,yDAIJ,4BACE,qBAEA,iBCmEc,CDlEd,gBACA,kBC9DI,CD+DJ,6CACA,aCzDI,CAoYR,qCACE,uBAEF,qCACE,uBD5UA,kCACE,kBAIJ,iBACE,aClEM,CDoEN,wBC0FF,oBACA,WACA,4CAGA,wCACA,uCACA,oCACA,kCACA,mBACA,oBACA,oBACA,cACA,cACA,mCACA,kCAEA,qBACA,kBACA,kBACA,sBACA,4BACA,0CAEA,WD/GI,mBC6TJ,iCACE,iBAEF,iCACE,iBD5TJ,gBACE,YACA,oDACA,gDAEA,sBACE,0BACA,cAEA,2BACE,WACA,YAEA,4CACE,gBAGF,kCACE,eAEA,wCACE,6BAMR,4BACE,gBACA,iBCiBgB,CDhBhB,kBACA,wCAEA,+BACE,kBACA,kBAGF,mCAEE,eCgRJ,4CACE,mBAEF,4CACE,mBDhRF,wBACE,cAEA,eACA,aC9EK,CAoUP,iCACE,WAEF,iCACE,YDtPJ,yPAKE,4BACE,uDACA,qCACE,yDAEF,qCACE,wB","sources":["webpack:///./routes.scss","webpack:///../../../../../packages/craftcms-sass/_mixins.scss"],"sourcesContent":["@charset \"UTF-8\";\n@import '@craftcms/sass/mixins';\n\n#routes {\n margin: 0 1px 25px;\n}\n\n.route {\n @include pane;\n position: relative;\n margin: 14px 0;\n padding: 0;\n border-radius: $largeBorderRadius;\n background-color: $grey050;\n cursor: pointer;\n\n &:hover:after {\n position: absolute;\n top: 9px;\n @include right(5px);\n @include icon;\n content: 'edit';\n color: $linkColor;\n }\n\n .uri-container,\n .template {\n padding: 7px 14px;\n line-height: 18px;\n min-height: 18px;\n }\n\n .uri-container {\n position: relative;\n @include margin-right(20px);\n @include padding-right(10px);\n @include border-radius($largeBorderRadius, 0, 0, $largeBorderRadius);\n @include floatleft;\n color: $linkColor;\n background: $white;\n\n &:after {\n display: block;\n content: '';\n text-indent: -100%;\n overflow: hidden;\n position: absolute;\n top: 0;\n @include right(-15px);\n width: 15px;\n height: 32px;\n background-repeat: no-repeat;\n body.ltr & {\n background-image: url(images/route-bg.png);\n }\n body.rtl & {\n background-image: url(images/route-bg_rtl.png);\n }\n }\n\n .site {\n display: inline-block;\n @include margin(-1px, 8px, -1px, 0);\n border-radius: $smallBorderRadius;\n padding: 1px 5px;\n background: $grey050;\n box-shadow: inset 0 0 0 1px $hairlineColor;\n color: $mediumTextColor;\n }\n\n .uri .token {\n margin: 0 3px -1px;\n }\n }\n\n .template {\n color: $mediumTextColor;\n\n &:before {\n @include icon;\n @include margin(0, 5px, 0, 0);\n content: 'template';\n }\n }\n}\n\n.route-settings {\n width: 500px;\n flex-direction: column;\n align-items: stretch;\n\n .body {\n height: calc(100% - 131px);\n overflow: auto;\n\n .uri {\n width: auto;\n cursor: text;\n\n input[type='text'] {\n box-shadow: none;\n }\n\n .token {\n cursor: default;\n\n &:focus {\n box-shadow: var(--focus-ring);\n }\n }\n }\n }\n\n .uri-tokens {\n margin-top: 10px;\n border-radius: $largeBorderRadius;\n padding: 15px 25px;\n box-shadow: inset 0 1px 3px -1px darken($grey100, 10%);\n\n h4 {\n margin-bottom: 5px;\n text-align: center;\n }\n\n .token {\n @include margin(5px, 5px, 0, 0);\n cursor: pointer;\n }\n }\n\n .delete {\n display: block;\n @include floatleft;\n margin-top: 7px;\n color: $red600;\n }\n}\n\n@media only screen and (-webkit-min-device-pixel-ratio: 1.5),\n only screen and (-moz-min-device-pixel-ratio: 1.5),\n only screen and (-o-min-device-pixel-ratio: 3/2),\n only screen and (min-device-pixel-ratio: 1.5),\n only screen and (min-resolution: 1.5dppx) {\n .route .uri-container:after {\n background-size: 15px 32px;\n body.ltr & {\n background-image: url(images/route-bg_2x.png);\n }\n body.rtl & {\n background-image: url(images/route-bg_rtl_2x.png);\n }\n }\n}\n","$white: #fff;\n$black: #000;\n\n$grey050: hsl(212, 60%, 97%);\n$grey100: hsl(212, 50%, 93%);\n$grey200: hsl(212, 30%, 85%);\n$grey300: hsl(211, 13%, 65%);\n$grey350: hsl(211, 11%, 59%);\n$grey400: hsl(210, 10%, 53%);\n$grey500: hsl(211, 12%, 43%);\n$grey550: hsl(210, 13%, 40%);\n$grey600: hsl(209, 14%, 37%);\n$grey700: hsl(209, 18%, 30%);\n$grey800: hsl(209, 20%, 25%);\n$grey900: hsl(210, 24%, 16%);\n$grey1000: hsl(210, 24%, 10%);\n\n$blue050: #e3f8ff;\n$blue100: #b3ecff;\n$blue200: #81defd;\n$blue300: #5ed0fa;\n$blue400: #40c3f7;\n$blue500: #2bb0ed;\n$blue600: #1992d4;\n$blue700: #127fbf;\n$blue800: #0b69a3;\n$blue900: #035388;\n\n$cyan050: #e0fcff;\n$cyan100: #bef8fd;\n$cyan200: #87eaf2;\n$cyan300: #54d1db;\n$cyan400: #38bec9;\n$cyan500: #2cb1bc;\n$cyan600: #14919b;\n$cyan700: #0e7c86;\n$cyan800: #0a6c74;\n$cyan900: #044e54;\n\n$pink050: #ffe3ec;\n$pink100: #ffb8d2;\n$pink200: #ff8cba;\n$pink300: #f364a2;\n$pink400: #e8368f;\n$pink500: #da127d;\n$pink600: #bc0a6f;\n$pink700: #a30664;\n$pink800: #870557;\n$pink900: #620042;\n\n$red050: #ffe3e3;\n$red100: #ffbdbd;\n$red200: #ff9b9b;\n$red300: #f86a6a;\n$red400: #ef4e4e;\n$red500: #e12d39;\n$red600: #cf1124;\n$red700: #ab091e;\n$red800: #8a041a;\n$red900: #610316;\n\n$yellow050: #fffbea;\n$yellow100: #fff3c4;\n$yellow200: #fce588;\n$yellow300: #fadb5f;\n$yellow400: #f7c948;\n$yellow500: #f0b429;\n$yellow600: #de911d;\n$yellow700: #cb6e17;\n$yellow800: #b44d12;\n$yellow900: #8d2b0b;\n\n$teal050: #effcf6;\n$teal100: #c6f7e2;\n$teal200: #8eedc7;\n$teal300: #65d6ad;\n$teal400: #3ebd93;\n$teal500: #27ab83;\n$teal600: #199473;\n$teal700: #147d64;\n$teal800: #0c6b58;\n$teal900: #014d40;\n\n// submit button colors\n$primaryColor: $red500;\n$secondaryColor: $grey500;\n\n$inputColor: hsl(212, 25%, 50%);\n\n// text colors\n$textColor: $grey700;\n$mediumDarkTextColor: $grey550;\n$mediumTextColor: $grey550;\n$lightTextColor: $grey500;\n$linkColor: $blue800;\n\n// menu colors\n$menuOptionColor: $textColor;\n$menuOptionActiveColor: $white;\n$menuOptionActiveBackgroundColor: $grey350;\n\n// hairline colors\n$hairlineColor: transparentize($grey800, 0.9);\n$mediumHairlineColor: transparentize($grey600, 0.75);\n$darkHairlineColor: transparentize($grey400, 0.5);\n\n// focus colors\n$lightFocusColor: $blue300;\n$mediumFocusColor: $blue500;\n$darkFocusColor: #0f74b1;\n\n// focus rings\n$lightFocusRing: 0 0 0 1px $lightFocusColor,\n 0 0 0 3px transparentize($lightFocusColor, 0.3);\n$mediumFocusRing: 0 0 0 1px $mediumFocusColor,\n 0 0 0 3px transparentize($mediumFocusColor, 0.3);\n$darkFocusRing: 0 0 0 1px $darkFocusColor,\n 0 0 0 3px transparentize($darkFocusColor, 0.3);\n\n// selection colors\n$lightSelColor: $grey200;\n$darkSelColor: $grey600;\n\n// alert/notice colors\n$errorColor: $red600;\n$warningColor: $yellow800;\n$successColor: $teal500;\n$noticeColor: $blue800;\n\n// UI element styles\n$smallBorderRadius: 3px;\n$mediumBorderRadius: 4px;\n$largeBorderRadius: 5px;\n\n$menuBorderRadius: $mediumBorderRadius;\n$checkboxSize: 16px;\n$radioSize: 16px;\n\n@mixin sans-serif-font {\n font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI',\n 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\n 'Helvetica Neue', sans-serif;\n}\n\n@mixin fixed-width-font {\n font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n monospace;\n font-size: 0.9em !important;\n}\n\n// Other\n\n@mixin svg-mask($color) {\n rect,\n circle,\n ellipse,\n line,\n polyline,\n polygon,\n path,\n text {\n fill: $color;\n stroke-width: 0;\n transition: fill linear 100ms;\n }\n}\n\n@mixin icon {\n font-family: 'Craft';\n speak: none;\n -webkit-font-feature-settings: 'liga', 'dlig';\n -moz-font-feature-settings: 'liga=1, dlig=1';\n -moz-font-feature-settings: 'liga', 'dlig';\n -ms-font-feature-settings: 'liga', 'dlig';\n -o-font-feature-settings: 'liga', 'dlig';\n font-feature-settings: 'liga', 'dlig';\n text-rendering: optimizeLegibility;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n direction: ltr; // Fixes a rendering issue in Chrome/Win\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n display: inline-block;\n text-align: center;\n font-style: normal;\n vertical-align: middle;\n word-wrap: normal !important;\n user-select: none;\n\n opacity: 0.8;\n}\n\n@mixin angle($dir: down, $color: var(--ui-control-color)) {\n display: block;\n content: '';\n font-size: 0;\n width: 5px;\n height: 5px;\n border: solid $color;\n border-width: 0 2px 2px 0;\n\n @if $dir == up {\n transform: rotate(225deg);\n } @else if $dir == down {\n transform: rotate(45deg);\n } @else if $dir == left {\n body.ltr & {\n transform: rotate(135deg);\n }\n body.rtl & {\n transform: rotate(-45deg);\n }\n } @else if $dir == right {\n body.ltr & {\n transform: rotate(-45deg);\n }\n body.rtl & {\n transform: rotate(135deg);\n }\n }\n}\n\n@mixin clearafter {\n content: '';\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n@mixin shadow {\n box-shadow: 0 1px 5px -1px transparentize($grey900, 0.8);\n}\n\n@mixin pane {\n background: $white;\n box-shadow: 0 0 0 1px $grey200, 0 2px 12px transparentize($grey200, 0.5);\n\n &:focus {\n box-shadow: var(--focus-ring);\n }\n}\n\n@mixin modal {\n border-radius: $largeBorderRadius;\n background-color: $white;\n box-shadow: 0 25px 100px transparentize($grey900, 0.5);\n}\n\n@mixin light-on-dark-text() {\n // Make light on dark text sharp on Macs\n // (sub-pixel antialiasing looks too bold/blurry with light text on dark background)\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-weight: 500;\n}\n\n// RTL stuff\n\n@mixin left($left) {\n body.ltr & {\n left: $left;\n }\n body.rtl & {\n right: $left;\n }\n}\n\n@mixin right($right) {\n body.ltr & {\n right: $right;\n }\n body.rtl & {\n left: $right;\n }\n}\n\n@mixin alignleft {\n body.ltr & {\n text-align: left;\n }\n body.rtl & {\n text-align: right;\n }\n}\n\n@mixin alignright {\n body.ltr & {\n text-align: right;\n }\n body.rtl & {\n text-align: left;\n }\n}\n\n@mixin border-left($params...) {\n body.ltr & {\n border-left: $params;\n }\n body.rtl & {\n border-right: $params;\n }\n}\n\n@mixin border-right($params...) {\n body.ltr & {\n border-right: $params;\n }\n body.rtl & {\n border-left: $params;\n }\n}\n\n@mixin border-left-width($param) {\n body.ltr & {\n border-left-width: $param;\n }\n body.rtl & {\n border-right-width: $param;\n }\n}\n\n@mixin border-right-width($param) {\n body.ltr & {\n border-right-width: $param;\n }\n body.rtl & {\n border-left-width: $param;\n }\n}\n\n@mixin border-radius($tl, $tr, $br, $bl) {\n body.ltr & {\n border-radius: $tl $tr $br $bl;\n }\n body.rtl & {\n border-radius: $tr $tl $bl $br;\n }\n}\n\n@mixin border-top-left-radius($params...) {\n body.ltr & {\n border-top-left-radius: $params;\n }\n body.rtl & {\n border-top-right-radius: $params;\n }\n}\n\n@mixin border-top-right-radius($params...) {\n body.ltr & {\n border-top-right-radius: $params;\n }\n body.rtl & {\n border-top-left-radius: $params;\n }\n}\n\n@mixin border-bottom-left-radius($params...) {\n body.ltr & {\n border-bottom-left-radius: $params;\n }\n body.rtl & {\n border-bottom-right-radius: $params;\n }\n}\n\n@mixin border-bottom-right-radius($params...) {\n body.ltr & {\n border-bottom-right-radius: $params;\n }\n body.rtl & {\n border-bottom-left-radius: $params;\n }\n}\n\n@mixin floatleft {\n body.ltr & {\n float: left;\n }\n body.rtl & {\n float: right;\n }\n}\n\n@mixin floatright {\n body.ltr & {\n float: right;\n }\n body.rtl & {\n float: left;\n }\n}\n\n@mixin margin($t, $r, $b, $l, $important: '') {\n body.ltr & {\n margin: $t $r $b $l unquote($important);\n }\n body.rtl & {\n margin: $t $l $b $r unquote($important);\n }\n}\n\n@mixin margin-left($margin...) {\n body.ltr & {\n margin-left: $margin;\n }\n body.rtl & {\n margin-right: $margin;\n }\n}\n\n@mixin margin-right($margin...) {\n body.ltr & {\n margin-right: $margin;\n }\n body.rtl & {\n margin-left: $margin;\n }\n}\n\n@mixin padding($t, $r, $b, $l, $important: '') {\n body.ltr & {\n padding: $t $r $b $l unquote($important);\n }\n body.rtl & {\n padding: $t $l $b $r unquote($important);\n }\n}\n\n@mixin padding-left($padding...) {\n body.ltr & {\n padding-left: $padding;\n }\n body.rtl & {\n padding-right: $padding;\n }\n}\n\n@mixin padding-right($padding...) {\n body.ltr & {\n padding-right: $padding;\n }\n body.rtl & {\n padding-left: $padding;\n }\n}\n\n// Misc\n\n@mixin dark-inputs {\n @include placeholder-styles($grey400);\n\n .btn,\n .select:not(.selectize) select {\n background-color: $grey200;\n\n &:focus,\n &:hover {\n background-color: darken($grey200, 5%);\n }\n\n &:active,\n &.active {\n background-color: darken($grey200, 10%);\n }\n }\n\n .text {\n background-color: $grey200;\n\n &:focus {\n background-color: darken($grey200, 5%);\n }\n }\n}\n\n@mixin header-btn {\n width: 34px;\n height: 30px;\n padding-left: 0;\n padding-right: 0;\n\n &:not(:hover):not(:active):not(.active) {\n background-color: transparent;\n }\n &:not(:active):not(.active):hover {\n background-color: transparentize($grey300, 0.85);\n }\n}\n\n@mixin h6-styles {\n margin: 14px 0 3px;\n font-size: 10px;\n line-height: 1.2;\n color: $lightTextColor;\n text-transform: uppercase;\n font-weight: bold;\n}\n\n@mixin token-styles {\n display: inline-block;\n border-radius: 10px;\n padding: 2px 7px;\n font-size: 12px;\n line-height: 14px;\n color: $textColor;\n background-color: transparentize($white, 0.5);\n box-shadow: 0 0 0 1px $darkHairlineColor;\n}\n\n@mixin menu-styles {\n z-index: 100;\n border-radius: $menuBorderRadius;\n padding: 0 14px;\n overflow: auto;\n background: $white;\n user-select: none;\n box-shadow: 0 0 0 1px transparentize($grey900, 0.9),\n 0 5px 20px transparentize($grey900, 0.75);\n}\n\n@mixin menu-option-styles {\n margin: 0 -14px;\n padding: 10px 14px;\n color: $menuOptionColor;\n text-decoration: none;\n white-space: nowrap;\n}\n\n@mixin menu-option-active-styles {\n color: $menuOptionActiveColor;\n background-color: $menuOptionActiveBackgroundColor;\n}\n\n@mixin disclosure-link-hover-styles {\n color: $menuOptionColor;\n background-color: $grey050;\n}\n\n@mixin input-styles {\n border-radius: $smallBorderRadius;\n border: 1px solid transparentize($inputColor, 0.75);\n background-color: hsl(212, 50%, 99%);\n background-clip: padding-box;\n}\n\n@mixin input-focused-styles {\n border-color: hsl(var(--dark-focus-hsl));\n box-shadow: 0 0 0 2px hsla(var(--dark-focus-hsl), 0.7);\n}\n\n@mixin placeholder-styles($color) {\n ::-webkit-input-placeholder {\n color: $color;\n }\n\n input:-ms-input-placeholder {\n color: $color;\n }\n\n ::-ms-input-placeholder {\n color: $color;\n }\n\n :-moz-placeholder {\n color: $color;\n }\n\n ::-moz-placeholder {\n color: $color;\n }\n\n ::placeholder {\n color: $color;\n }\n}\n\n@mixin select-styles {\n position: relative;\n border-radius: $largeBorderRadius;\n white-space: nowrap;\n}\n\n@mixin select-container-styles {\n max-width: 100%;\n position: relative;\n :not(.flex) > & {\n display: inline-block;\n }\n}\n\n@mixin select-arrow-styles {\n @include angle;\n position: absolute;\n z-index: 1;\n top: calc(50% - 5px);\n @include right(9px);\n user-select: none;\n pointer-events: none;\n}\n\n@mixin select-input-styles {\n display: block;\n position: relative;\n max-width: 100%;\n border: none;\n @include padding(7px, 22px, 7px, 10px);\n font-size: 14px;\n line-height: 20px;\n color: $textColor;\n background-color: hsl(212, 25%, 90%);\n appearance: none;\n // from https://stackoverflow.com/a/15933790/1688568\n &::-ms-expand {\n display: none;\n }\n}\n\n@mixin select-input-fullwidth-styles {\n min-width: 100%;\n}\n\n@mixin select-input-focused-styles {\n outline-color: transparent;\n background-color: hsl(212, 25%, 85%);\n box-shadow: var(--focus-ring);\n}\n\n@mixin readable {\n font-size: 16px;\n line-height: 22px;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 24px 0 16px;\n font-weight: 600;\n }\n\n h1 {\n font-size: 32px;\n line-height: 40px;\n color: #000;\n }\n\n h2 {\n font-size: 24px;\n line-height: 30px;\n }\n\n h3 {\n font-size: 20px;\n line-height: 24px;\n }\n\n h4 {\n font-size: 16px;\n line-height: 20px;\n }\n\n h5 {\n font-size: 14px;\n line-height: 18px;\n }\n\n h6 {\n font-size: 13.6px;\n line-height: 17px;\n color: $mediumTextColor;\n }\n\n ul,\n ol {\n margin: 1em 0;\n @include padding-left(2em);\n }\n\n ul li {\n list-style-type: disc;\n }\n\n li + li {\n margin-top: 0.25em;\n }\n\n blockquote {\n margin: 16px 0;\n\n &:not(.note) {\n padding: 0 16px;\n color: $mediumTextColor;\n @include border-left(4px solid $hairlineColor);\n }\n\n &.note {\n position: relative;\n border-radius: 4px;\n padding: 1em;\n @include padding-left(56px);\n border: 1px solid;\n\n &:not(.tip):not(.warning) {\n border-color: $errorColor;\n color: #bf503f;\n\n &:before {\n content: 'alert';\n color: $errorColor;\n }\n }\n\n &.tip {\n border-color: $linkColor;\n color: $mediumTextColor;\n\n &:before {\n content: 'lightbulb';\n color: $linkColor;\n }\n }\n\n &.warning {\n border-color: $warningColor;\n color: #cf783a;\n\n &:before {\n content: 'alert';\n color: $warningColor;\n }\n }\n\n &:before {\n @include icon;\n position: absolute;\n top: 12px;\n @include left(16px);\n font-size: 30px;\n width: 24px;\n }\n }\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/src/web/assets/routes/src/routes.scss b/src/web/assets/routes/src/routes.scss index 21c7ef9264..fb39fc7b87 100644 --- a/src/web/assets/routes/src/routes.scss +++ b/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); + } } } }