@transferwise/neptune-css 14.2.4 → 14.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- .close{color:#0097c7;color:var(--color-content-accent);float:right;text-decoration:none}[dir=rtl] .close{float:left}.close:focus,.close:hover{color:#0084b3;color:var(--color-content-accent-hover);cursor:pointer;text-decoration:none}.close:focus{outline:thin dotted rgba(0,0,0,.5)}.close:active{color:#0077a5;color:var(--color-content-accent-active)}button.close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;padding:0}.np-theme-personal button.close:hover{background:initial}.popover{word-wrap:normal;background-clip:padding-box;background-color:#fff;background-color:var(--color-background-screen);border-radius:3px;box-shadow:0 20px 66px 0 rgba(34,48,73,.2);font-family:Inter,Helvetica,Arial,sans-serif;font-family:var(--font-family-regular);font-size:1rem;font-size:var(--font-size-16);font-style:normal;font-weight:400;font-weight:var(--font-weight-regular);left:0;letter-spacing:normal;line-break:auto;line-height:24px;line-height:var(--size-24);line-height:1.5;line-height:var(--line-height-body);padding:18px 24px;position:absolute;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;top:0;white-space:normal;width:276px;word-break:normal;word-spacing:normal;z-index:1060}[dir=rtl] .popover{left:auto;right:0;text-align:right}.np-theme-personal .popover{font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);letter-spacing:.01em;letter-spacing:var(--letter-spacing-xs);line-height:1.375rem;line-height:var(--line-height-22)}.np-theme-personal .np-theme-personal .popover a{font-size:.875rem;font-size:var(--font-size-14);font-weight:600;font-weight:var(--font-weight-semi-bold);text-decoration:underline}.np-theme-personal--dark .popover,.np-theme-personal--forest-green .popover{box-shadow:none}.popover.animate{transition:transform .25s}.popover.scale-down{transform:scale(0)}.popover.top{margin-top:-14px;transform-origin:50% 100%}.popover.top-left{margin-top:-14px;transform-origin:calc(100% - 29px) 100%}.popover.top-right{margin-top:-14px;transform-origin:29px 100%}.popover.right{margin-left:14px;transform-origin:0 50%}[dir=rtl] .popover.right{margin-left:0;margin-right:14px}.popover.right-top{margin-left:14px;transform-origin:0 29px}[dir=rtl] .popover.right-top{margin-left:0;margin-right:14px}.popover.right-bottom{margin-left:14px;transform-origin:0 calc(100% - 29px)}[dir=rtl] .popover.right-bottom{margin-left:0;margin-right:14px}.popover.bottom{margin-top:14px;transform-origin:50% 0}.popover.bottom-left{margin-top:14px;transform-origin:calc(100% - 29px) 0}.popover.bottom-right{margin-top:14px;transform-origin:29px 0}.popover.left{margin-left:-14px;transform-origin:100% 50%}[dir=rtl] .popover.left{margin-left:0;margin-right:-14px}.popover.left-top{margin-left:-14px;transform-origin:100% 29px}[dir=rtl] .popover.left-top{margin-left:0;margin-right:-14px}.popover.left-bottom{margin-left:-14px;transform-origin:100% calc(100% - 29px)}[dir=rtl] .popover.left-bottom{margin-left:0;margin-right:-14px}.popover:before{background-color:inherit;content:" ";display:block;height:14px;left:28px;position:absolute;top:-7px;transform:rotate(45deg);width:14px}[dir=rtl] .popover:before{left:auto;right:28px}.popover.top:before{bottom:-7px;left:50%;margin-left:-7px;top:auto}[dir=rtl] .popover.top:before{left:auto;margin-left:0;margin-right:-7px;right:50%}.popover.top-left:before{bottom:-7px;left:auto;margin-left:-7px;right:29px;top:auto}[dir=rtl] .popover.top-left:before{left:29px;left:auto;margin-left:0;margin-right:-7px;right:auto}.popover.top-right:before{bottom:-7px;left:29px;margin-left:-7px;right:auto;top:auto}[dir=rtl] .popover.top-right:before{left:auto;margin-left:0;margin-right:-7px;right:29px;right:auto}.popover.right:before{left:-7px;margin-top:-7px;top:50%}[dir=rtl] .popover.right:before{left:auto;right:-7px}.popover.right-top:before{left:-7px;margin-top:-7px;top:29px}[dir=rtl] .popover.right-top:before{left:auto;right:-7px}.popover.right-bottom:before{left:-7px;margin-top:-7px;top:calc(100% - 29px)}[dir=rtl] .popover.right-bottom:before{left:auto;right:-7px}.popover.bottom:before{bottom:auto;left:50%;margin-left:-7px;top:-7px}[dir=rtl] .popover.bottom:before{left:auto;margin-left:0;margin-right:-7px;right:50%}.popover.bottom-left:before{bottom:auto;left:auto;margin-left:-7px;right:29px;top:-7px}[dir=rtl] .popover.bottom-left:before{left:29px;left:auto;margin-left:0;margin-right:-7px;right:auto}.popover.bottom-right:before{bottom:auto;left:auto;margin-left:-7px;right:29px;top:-7px}[dir=rtl] .popover.bottom-right:before{left:29px;left:auto;margin-left:0;margin-right:-7px;right:auto}.popover.left:before{left:auto;margin-top:-7px;right:-7px;top:50%}[dir=rtl] .popover.left:before{left:auto;left:-7px;right:auto}.popover.left-top:before{left:auto;margin-top:-7px;right:-7px;top:29px}[dir=rtl] .popover.left-top:before{left:auto;left:-7px;right:auto}.popover.left-bottom:before{left:auto;margin-top:-7px;right:-7px;top:calc(100% - 29px)}[dir=rtl] .popover.left-bottom:before{left:auto;left:-7px;right:auto}.popover .popover-image,.popover img{margin:8px 0;width:65%}.popover-title{background-color:#fff;background-color:var(--color-background-screen);border-bottom:0;border-radius:2px 2px 0 0;color:#37517e;color:var(--color-content-primary);color:#37517e!important;color:var(--color-content-primary)!important;font-size:1rem;font-size:var(--font-size-16);font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;line-height:1.2;line-height:var(--line-height-title);margin:0;padding:0}.np-theme-personal .popover-title+p{margin-top:8px;margin-top:var(--size-8)}.np-theme-personal .popover-title{font-size:1.125rem;font-size:var(--font-size-18);letter-spacing:-.01em;letter-spacing:var(--letter-spacing-negative-xs);line-height:1.5rem;line-height:var(--line-height-24)}.popover-content{color:#5d7079;color:var(--color-content-secondary);font-size:1rem;font-size:var(--font-size-16);line-height:1.5;line-height:var(--line-height-body);padding:0}.np-theme-personal .popover-content,.popover-content{font-weight:400;font-weight:var(--font-weight-regular)}.np-theme-personal .popover-content{font-size:.875rem;font-size:var(--font-size-14);letter-spacing:.01em;letter-spacing:var(--letter-spacing-xs);line-height:1.375rem;line-height:var(--line-height-22)}.np-theme-personal .np-theme-personal .popover-content a{font-size:.875rem;font-size:var(--font-size-14);font-weight:600;font-weight:var(--font-weight-semi-bold);text-decoration:underline}.popover-content>:last-child{margin-bottom:0}.popover-close{color:#0097c7;color:var(--color-content-accent);float:right;text-decoration:none}[dir=rtl] .popover-close{float:left}.popover-close:focus,.popover-close:hover{color:#0084b3;color:var(--color-content-accent-hover);cursor:pointer;text-decoration:none}.popover-close:focus{outline:thin dotted rgba(0,0,0,.5)}.popover-close:active{color:#0077a5;color:var(--color-content-accent-active)}button.popover-close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;padding:0}.np-theme-personal button.popover-close:hover{background:initial}[data-toggle=popover]:not(.btn){border-bottom:1px dotted #0097c7!important;border-bottom:1px dotted var(--color-content-accent)!important;color:inherit!important;cursor:pointer;font-weight:inherit!important;text-decoration:none!important}[data-toggle=popover]:not(.btn):focus,[data-toggle=popover]:not(.btn):hover,[data-toggle=popover]:not(.btn)[aria-describedby]{color:#0084b3!important;color:var(--color-content-accent-hover)!important;outline:0}.nav>li>a [data-toggle=popover]{border-bottom:0}@media (max-width:991px){.popover-modal{left:0!important;margin:32px auto!important;margin:var(--size-32) auto!important;position:fixed;right:0!important;top:0!important;width:272px}.popover-modal:before{display:none}}@media (min-width:992px){.popover-modal.left{margin-right:-var(--size-24)!important}[dir=rtl] .popover-modal.left{margin-right:0!important}.popover-modal.right,[dir=rtl] .popover-modal.left{margin-left:-var(--size-24)!important}[dir=rtl] .popover-modal.right{margin-left:0!important;margin-right:-var(--size-24)!important}.popover-modal.top{margin-bottom:-8px!important}.popover-modal.bottom{margin-top:-8px!important}}@keyframes cover-fade-in{0%{opacity:0}to{opacity:.7}}.popover-modal-cover{animation:cover-fade-in .35s linear 0s forwards;background-color:#fff;background-color:var(--color-background-screen);cursor:pointer;display:none;height:100vh;left:0;opacity:.7;position:fixed;top:0;width:100vw;z-index:1060}[dir=rtl] .popover-modal-cover{left:auto;right:0}@media (max-width:991px){.popover-modal-cover{display:block}}.popover-promotion{padding:24px;padding:var(--size-24);text-align:center}@media (max-width:576px){.popover-promotion{margin:16px!important;margin:var(--size-16)!important;padding:24px!important;padding:var(--size-24)!important;width:auto!important}}@media (min-width:566px) and (max-width:992px){.popover-promotion{margin:32px auto!important;margin:var(--size-32) auto!important;padding:28px 32px!important;padding:28px var(--size-32)!important;width:540px!important}}.popover-promotion .popover-title{font-size:1rem;font-size:var(--font-size-16);line-height:1.2;line-height:var(--line-height-title)}@media (min-width:768px){.popover-promotion .popover-title{font-size:1.25rem;font-size:var(--font-size-20);line-height:1.2;line-height:var(--line-height-title)}}@media (max-width:480px){.popover-promotion .popover-image{width:80%}}@media (min-width:480px) and (max-width:992px){.popover-promotion .popover-image{width:60%}}@media (min-width:992px){.popover-promotion .popover-image{width:80%}}@media (max-width:992px){.popover-promotion{position:absolute!important}}
1
+ .close{color:#0097c7;color:var(--color-content-accent);float:right;text-decoration:none}[dir=rtl] .close{float:left}.close:focus,.close:hover{color:#0084b3;color:var(--color-content-accent-hover);cursor:pointer;text-decoration:none}.close:focus{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.close:active{color:#0077a5;color:var(--color-content-accent-active)}button.close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;padding:0}.np-theme-personal button.close:hover{background:initial}.popover{word-wrap:normal;background-clip:padding-box;background-color:#fff;background-color:var(--color-background-screen);border-radius:3px;box-shadow:0 20px 66px 0 rgba(34,48,73,.2);font-family:Inter,Helvetica,Arial,sans-serif;font-family:var(--font-family-regular);font-size:1rem;font-size:var(--font-size-16);font-style:normal;font-weight:400;font-weight:var(--font-weight-regular);left:0;letter-spacing:normal;line-break:auto;line-height:24px;line-height:var(--size-24);line-height:1.5;line-height:var(--line-height-body);padding:18px 24px;position:absolute;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;top:0;white-space:normal;width:276px;word-break:normal;word-spacing:normal;z-index:1060}[dir=rtl] .popover{left:auto;right:0;text-align:right}.np-theme-personal .popover{font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);letter-spacing:.01em;letter-spacing:var(--letter-spacing-xs);line-height:1.375rem;line-height:var(--line-height-22)}.np-theme-personal .np-theme-personal .popover a{font-size:.875rem;font-size:var(--font-size-14);font-weight:600;font-weight:var(--font-weight-semi-bold);text-decoration:underline}.np-theme-personal--dark .popover,.np-theme-personal--forest-green .popover{box-shadow:none}.popover.animate{transition:transform .25s}.popover.scale-down{transform:scale(0)}.popover.top{margin-top:-14px;transform-origin:50% 100%}.popover.top-left{margin-top:-14px;transform-origin:calc(100% - 29px) 100%}.popover.top-right{margin-top:-14px;transform-origin:29px 100%}.popover.right{margin-left:14px;transform-origin:0 50%}[dir=rtl] .popover.right{margin-left:0;margin-right:14px}.popover.right-top{margin-left:14px;transform-origin:0 29px}[dir=rtl] .popover.right-top{margin-left:0;margin-right:14px}.popover.right-bottom{margin-left:14px;transform-origin:0 calc(100% - 29px)}[dir=rtl] .popover.right-bottom{margin-left:0;margin-right:14px}.popover.bottom{margin-top:14px;transform-origin:50% 0}.popover.bottom-left{margin-top:14px;transform-origin:calc(100% - 29px) 0}.popover.bottom-right{margin-top:14px;transform-origin:29px 0}.popover.left{margin-left:-14px;transform-origin:100% 50%}[dir=rtl] .popover.left{margin-left:0;margin-right:-14px}.popover.left-top{margin-left:-14px;transform-origin:100% 29px}[dir=rtl] .popover.left-top{margin-left:0;margin-right:-14px}.popover.left-bottom{margin-left:-14px;transform-origin:100% calc(100% - 29px)}[dir=rtl] .popover.left-bottom{margin-left:0;margin-right:-14px}.popover:before{background-color:inherit;content:" ";display:block;height:14px;left:28px;position:absolute;top:-7px;transform:rotate(45deg);width:14px}[dir=rtl] .popover:before{left:auto;right:28px}.popover.top:before{bottom:-7px;left:50%;margin-left:-7px;top:auto}[dir=rtl] .popover.top:before{left:auto;margin-left:0;margin-right:-7px;right:50%}.popover.top-left:before{bottom:-7px;left:auto;margin-left:-7px;right:29px;top:auto}[dir=rtl] .popover.top-left:before{left:29px;left:auto;margin-left:0;margin-right:-7px;right:auto}.popover.top-right:before{bottom:-7px;left:29px;margin-left:-7px;right:auto;top:auto}[dir=rtl] .popover.top-right:before{left:auto;margin-left:0;margin-right:-7px;right:29px;right:auto}.popover.right:before{left:-7px;margin-top:-7px;top:50%}[dir=rtl] .popover.right:before{left:auto;right:-7px}.popover.right-top:before{left:-7px;margin-top:-7px;top:29px}[dir=rtl] .popover.right-top:before{left:auto;right:-7px}.popover.right-bottom:before{left:-7px;margin-top:-7px;top:calc(100% - 29px)}[dir=rtl] .popover.right-bottom:before{left:auto;right:-7px}.popover.bottom:before{bottom:auto;left:50%;margin-left:-7px;top:-7px}[dir=rtl] .popover.bottom:before{left:auto;margin-left:0;margin-right:-7px;right:50%}.popover.bottom-left:before{bottom:auto;left:auto;margin-left:-7px;right:29px;top:-7px}[dir=rtl] .popover.bottom-left:before{left:29px;left:auto;margin-left:0;margin-right:-7px;right:auto}.popover.bottom-right:before{bottom:auto;left:auto;margin-left:-7px;right:29px;top:-7px}[dir=rtl] .popover.bottom-right:before{left:29px;left:auto;margin-left:0;margin-right:-7px;right:auto}.popover.left:before{left:auto;margin-top:-7px;right:-7px;top:50%}[dir=rtl] .popover.left:before{left:auto;left:-7px;right:auto}.popover.left-top:before{left:auto;margin-top:-7px;right:-7px;top:29px}[dir=rtl] .popover.left-top:before{left:auto;left:-7px;right:auto}.popover.left-bottom:before{left:auto;margin-top:-7px;right:-7px;top:calc(100% - 29px)}[dir=rtl] .popover.left-bottom:before{left:auto;left:-7px;right:auto}.popover .popover-image,.popover img{margin:8px 0;width:65%}.popover-title{background-color:#fff;background-color:var(--color-background-screen);border-bottom:0;border-radius:2px 2px 0 0;color:#37517e;color:var(--color-content-primary);color:#37517e!important;color:var(--color-content-primary)!important;font-size:1rem;font-size:var(--font-size-16);font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;line-height:1.2;line-height:var(--line-height-title);margin:0;padding:0}.np-theme-personal .popover-title+p{margin-top:8px;margin-top:var(--size-8)}.np-theme-personal .popover-title{font-size:1.125rem;font-size:var(--font-size-18);letter-spacing:-.01em;letter-spacing:var(--letter-spacing-negative-xs);line-height:1.5rem;line-height:var(--line-height-24)}.popover-content{color:#5d7079;color:var(--color-content-secondary);font-size:1rem;font-size:var(--font-size-16);line-height:1.5;line-height:var(--line-height-body);padding:0}.np-theme-personal .popover-content,.popover-content{font-weight:400;font-weight:var(--font-weight-regular)}.np-theme-personal .popover-content{font-size:.875rem;font-size:var(--font-size-14);letter-spacing:.01em;letter-spacing:var(--letter-spacing-xs);line-height:1.375rem;line-height:var(--line-height-22)}.np-theme-personal .np-theme-personal .popover-content a{font-size:.875rem;font-size:var(--font-size-14);font-weight:600;font-weight:var(--font-weight-semi-bold);text-decoration:underline}.popover-content>:last-child{margin-bottom:0}.popover-close{color:#0097c7;color:var(--color-content-accent);float:right;text-decoration:none}[dir=rtl] .popover-close{float:left}.popover-close:focus,.popover-close:hover{color:#0084b3;color:var(--color-content-accent-hover);cursor:pointer;text-decoration:none}.popover-close:focus{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.popover-close:active{color:#0077a5;color:var(--color-content-accent-active)}button.popover-close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;padding:0}.np-theme-personal button.popover-close:hover{background:initial}[data-toggle=popover]:not(.btn){border-bottom:1px dotted #0097c7!important;border-bottom:1px dotted var(--color-content-accent)!important;color:inherit!important;cursor:pointer;font-weight:inherit!important;text-decoration:none!important}[data-toggle=popover]:not(.btn):focus,[data-toggle=popover]:not(.btn):hover,[data-toggle=popover]:not(.btn)[aria-describedby]{color:#0084b3!important;color:var(--color-content-accent-hover)!important;outline:0}.nav>li>a [data-toggle=popover]{border-bottom:0}@media (max-width:991px){.popover-modal{left:0!important;margin:32px auto!important;margin:var(--size-32) auto!important;position:fixed;right:0!important;top:0!important;width:272px}.popover-modal:before{display:none}}@media (min-width:992px){.popover-modal.left{margin-right:-var(--size-24)!important}[dir=rtl] .popover-modal.left{margin-right:0!important}.popover-modal.right,[dir=rtl] .popover-modal.left{margin-left:-var(--size-24)!important}[dir=rtl] .popover-modal.right{margin-left:0!important;margin-right:-var(--size-24)!important}.popover-modal.top{margin-bottom:-8px!important}.popover-modal.bottom{margin-top:-8px!important}}@keyframes cover-fade-in{0%{opacity:0}to{opacity:.7}}.popover-modal-cover{animation:cover-fade-in .35s linear 0s forwards;background-color:#fff;background-color:var(--color-background-screen);cursor:pointer;display:none;height:100vh;left:0;opacity:.7;position:fixed;top:0;width:100vw;z-index:1060}[dir=rtl] .popover-modal-cover{left:auto;right:0}@media (max-width:991px){.popover-modal-cover{display:block}}.popover-promotion{padding:24px;padding:var(--size-24);text-align:center}@media (max-width:576px){.popover-promotion{margin:16px!important;margin:var(--size-16)!important;padding:24px!important;padding:var(--size-24)!important;width:auto!important}}@media (min-width:566px) and (max-width:992px){.popover-promotion{margin:32px auto!important;margin:var(--size-32) auto!important;padding:28px 32px!important;padding:28px var(--size-32)!important;width:540px!important}}.popover-promotion .popover-title{font-size:1rem;font-size:var(--font-size-16);line-height:1.2;line-height:var(--line-height-title)}@media (min-width:768px){.popover-promotion .popover-title{font-size:1.25rem;font-size:var(--font-size-20);line-height:1.2;line-height:var(--line-height-title)}}@media (max-width:480px){.popover-promotion .popover-image{width:80%}}@media (min-width:480px) and (max-width:992px){.popover-promotion .popover-image{width:60%}}@media (min-width:992px){.popover-promotion .popover-image{width:80%}}@media (max-width:992px){.popover-promotion{position:absolute!important}}
package/dist/css/ring.css CHANGED
@@ -1 +1 @@
1
- :root{--ring-outline-width:2px;--ring-outline-offset:2px;--ring-outline-color:var(--color-content-primary)}:root .np-theme-personal,:root.np-theme-personal{--ring-outline-color:var(--color-interactive-primary)}.focus-ring:focus{outline:none}.focus-ring:focus-visible{outline:2px solid #37517e;outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:2px;outline-offset:var(--ring-outline-offset)}.ring-offset-0{--ring-outline-offset:0}.ring-inset{--ring-outline-width:3px;--ring-outline-offset:calc(var(--ring-outline-width)*-1)}.ring-negative{--ring-outline-color:var(--color-sentiment-negative)}
1
+ :root{--ring-outline-width:2px;--ring-outline-offset:2px;--ring-outline-color:var(--color-content-primary)}:root .np-theme-personal,:root.np-theme-personal{--ring-outline-color:var(--color-interactive-primary)}.focus-ring:focus{outline:none}.focus-ring:focus-visible{outline:2px solid #37517e;outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:2px;outline-offset:var(--ring-outline-offset)}a:focus,button:focus,details:focus,dialog:focus,input:focus,option:focus,select:focus,summary:focus,textarea:focus{outline:none}a:focus-visible,button:focus-visible,details:focus-visible,dialog:focus-visible,input:focus-visible,option:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid #37517e;outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:2px;outline-offset:var(--ring-outline-offset)}.ring-offset-0{--ring-outline-offset:0}.ring-inset{--ring-outline-width:3px;--ring-outline-offset:calc(var(--ring-outline-width)*-1)}.ring-negative{--ring-outline-color:var(--color-sentiment-negative)}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-css",
3
3
  "description": "Neptune CSS library",
4
- "version": "14.2.4",
4
+ "version": "14.2.5",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -53,5 +53,5 @@
53
53
  "bin": {
54
54
  "neptune-css-upgrade-util": "scripts/neptune-css-upgrader.js"
55
55
  },
56
- "gitHead": "bfe7bb6607518b08c0d833e5676933beaf726b88"
56
+ "gitHead": "27e6f8502f2b24cc4522541eda2b18bb5d370e6c"
57
57
  }
@@ -41,27 +41,8 @@
41
41
 
42
42
  user-select: none;
43
43
 
44
- &:not(.disabled, :disabled, .np-dropdown-toggle):active,
45
- &:not(.disabled, :disabled, .np-dropdown-toggle).active {
46
- .tab-focus();
47
-
48
- outline-offset: -2px;
49
-
50
- .np-theme-personal & {
51
- outline: none;
52
- }
53
- }
54
-
55
44
  &:not(.disabled, :disabled, .np-dropdown-toggle):focus-visible,
56
45
  &:not(.disabled, :disabled, .np-dropdown-toggle).focus {
57
- .tab-focus();
58
-
59
- outline-offset: -2px;
60
-
61
- .np-theme-personal & {
62
- .ring();
63
- }
64
-
65
46
  &.btn-negative {
66
47
  .np-theme-personal & {
67
48
  outline-color: var(--color-sentiment-negative);
@@ -207,6 +188,7 @@
207
188
  color: var(--color-content-accent-hover);
208
189
  text-decoration: @link-decoration;
209
190
  border-color: transparent;
191
+ background-color: transparent;
210
192
  }
211
193
 
212
194
  &:not(.disabled, :disabled):active {
@@ -15,7 +15,7 @@
15
15
  --radius-medium: 10px;
16
16
  // page default font size should be set in absolute units (pixels)
17
17
  --base-font-size: 16px;
18
- --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif !important;
18
+ --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
19
19
  --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal calc(@padding-large-vertical - 2px);
20
20
  --btn-padding: @btn-padding-vertical @btn-padding-horizontal calc(@btn-padding-vertical - 2px);
21
21
  --btn-xs-padding: @btn-xs-padding-vertical @btn-xs-padding-horizontal calc(@btn-xs-padding-vertical - 2px);
@@ -32,14 +32,16 @@
32
32
  .np-theme-light,
33
33
  .np-theme-dark,
34
34
  .np-theme-navy {
35
- --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif !important;
35
+ --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
36
+
36
37
  line-height: var(--line-height-body);
38
+
37
39
  --radius-small: 3px !important;
38
40
  --radius-medium: 10px !important;
39
41
  }
40
42
 
41
43
  .np-theme-personal {
42
- --font-family-regular: "Inter",sans-serif,Helvetica,Arial,sans-serif !important;
44
+ --font-family-regular: "Inter", sans-serif, helvetica, arial, sans-serif !important;
43
45
  --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal;
44
46
  --btn-padding: calc(@btn-padding-vertical - @btn-border-width) @btn-padding-horizontal;
45
47
  --btn-xs-padding: calc(@btn-xs-padding-vertical - @btn-border-width) @btn-xs-padding-horizontal;
@@ -51,6 +53,7 @@
51
53
  --input-group-addon-sm-padding: @padding-small-vertical @padding-small-horizontal;
52
54
  --input-group-addon-lg-padding: @padding-large-vertical @padding-large-horizontal;
53
55
  --dropdown-link-padding: @padding-large-vertical @padding-large-horizontal;
56
+
54
57
  color: var(--color-content-secondary);
55
58
  background-color: var(--color-background-screen);
56
59
  }
@@ -59,7 +62,7 @@ html {
59
62
  font-size: var(--base-font-size);
60
63
  font-family: var(--font-family-regular);
61
64
  color: var(--color-content-secondary);
62
- letter-spacing: .016em;
65
+ letter-spacing: 0.016em;
63
66
  background-color: var(--color-background-screen);
64
67
  -webkit-font-smoothing: antialiased;
65
68
  -moz-osx-font-smoothing: grayscale;
@@ -195,13 +198,6 @@ input {
195
198
  overflow: visible; // Normalize 8.0.1
196
199
  }
197
200
 
198
- button {
199
- &:focus {
200
- outline: 1px dotted;
201
- outline: 5px auto -webkit-focus-ring-color;
202
- }
203
- }
204
-
205
201
  button,
206
202
  select {
207
203
  text-transform: none; // Normalize 8.0.1
@@ -7,7 +7,6 @@
7
7
  @import (reference) '../mixins/_logical-properties.less';
8
8
  @import (reference) '../core/_typography.less';
9
9
 
10
-
11
10
  //
12
11
  // Forms
13
12
  // --------------------------------------------------
@@ -798,13 +797,6 @@ input[type="password"] {
798
797
  }
799
798
  }
800
799
 
801
- .btn,
802
- .form-control {
803
- &:focus {
804
- outline: none;
805
- }
806
- }
807
-
808
800
  .form-group {
809
801
  position: relative;
810
802
  font-size: var(--font-size-14);
@@ -1040,12 +1032,17 @@ input[type="password"] {
1040
1032
  box-shadow: none !important;
1041
1033
  }
1042
1034
 
1043
- .btn-input:not(.disabled, :disabled):hover,
1044
- .input-group:not(.disabled, :disabled):hover,
1045
- .form-control:not(.disabled, :disabled):hover,
1046
- .radio > label:not(.disabled, :disabled):hover,
1047
- .checkbox > label:not(.disabled, :disabled):hover {
1048
- box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
1035
+ .btn-input:not(.disabled, :disabled),
1036
+ .input-group:not(.disabled, :disabled),
1037
+ .form-control:not(.disabled, :disabled),
1038
+ .radio > label:not(.disabled, :disabled),
1039
+ .checkbox > label:not(.disabled, :disabled) {
1040
+ &:hover {
1041
+ box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
1042
+ &:has([checked], .checked) {
1043
+ box-shadow: inset 0 0 0 2px var(--color-interactive-primary-hover);
1044
+ }
1045
+ }
1049
1046
  }
1050
1047
 
1051
1048
  .btn-input:not(.disabled, :disabled):focus-visible,
@@ -1078,17 +1075,17 @@ input[type="password"] {
1078
1075
  }
1079
1076
 
1080
1077
  .input-group:not(.disabled, :disabled):active,
1081
- .input-group:not(.disabled, :disabled):focus,
1082
- .input-group:not(.disabled, :disabled):focus-within,
1078
+ .input-group:not(.disabled, :disabled):focus-visible,
1079
+ .input-group:not(.disabled, :disabled):has(:focus-visible),
1083
1080
  .form-control:not(.disabled, :disabled):active,
1084
- .form-control:not(.disabled, :disabled):focus,
1085
- .form-control:not(.disabled, :disabled):focus-within,
1081
+ .form-control:not(.disabled, :disabled):focus-visible,
1082
+ .form-control:not(.disabled, :disabled):has(:focus-visible),
1086
1083
  .radio > label:not(.disabled, :disabled):active,
1087
- .radio > label:not(.disabled, :disabled):focus,
1088
- .radio > label:not(.disabled, :disabled):focus-within,
1084
+ .radio > label:not(.disabled, :disabled):focus-visible,
1085
+ .radio > label:not(.disabled, :disabled):has(:focus-visible),
1089
1086
  .checkbox > label:not(.disabled, :disabled):active,
1090
- .checkbox > label:not(.disabled, :disabled):focus,
1091
- .checkbox > label:not(.disabled, :disabled):focus-within {
1087
+ .checkbox > label:not(.disabled, :disabled):focus-visible,
1088
+ .checkbox > label:not(.disabled, :disabled):has(:focus-visible) {
1092
1089
  box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
1093
1090
  }
1094
1091
 
@@ -1119,9 +1116,9 @@ input[type="password"] {
1119
1116
  }
1120
1117
 
1121
1118
  .checkbox>label:not(.disabled,:disabled):active input[type=checkbox]+.tw-checkbox-button,
1122
- .checkbox>label:not(.disabled,:disabled):focus input[type=checkbox]+.tw-checkbox-button,
1123
- .checkbox>label:not(.disabled,:disabled):focus-within input[type=checkbox]+.tw-checkbox-button {
1124
- box-shadow: inset 0 0 0 3px var(--color-sentiment-negative-active);
1119
+ .checkbox>label:not(.disabled,:disabled):focus-visible input[type=checkbox]+.tw-checkbox-button,
1120
+ .checkbox>label:not(.disabled,:disabled):has(:focus-visible) input[type=checkbox]+.tw-checkbox-button {
1121
+ box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-active);
1125
1122
  }
1126
1123
  }
1127
1124
 
@@ -1,3 +1,5 @@
1
+ @import (reference) "../ring.less";
2
+
1
3
  .tab-focus() {
2
- outline: thin dotted rgba(0, 0, 0, 0.5);
4
+ .ring();
3
5
  }
@@ -24,6 +24,19 @@
24
24
  }
25
25
  }
26
26
 
27
+ details,
28
+ summary,
29
+ a,
30
+ button,
31
+ input,
32
+ option,
33
+ dialog,
34
+ input,
35
+ select,
36
+ textarea {
37
+ .focus-ring();
38
+ }
39
+
27
40
  .ring-offset-0 {
28
41
  --ring-outline-offset: 0;
29
42
  }