diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 330571a5b..5eda49bdd 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -6836,18 +6836,19 @@ button, -webkit-box-shadow: inset 0 0 0 2px #b1040e; box-shadow: inset 0 0 0 2px #b1040e; color: #b1040e; } + .su-button--secondary:hover, .su-button--secondary:focus, + .su-button--secondary.su-link:hover, + .su-button--secondary.su-link:focus { + background-color: #ffffff; + color: #2e2d29; } .su-button--secondary:hover, .su-button--secondary.su-link:hover { - background-color: #ffffff; -webkit-box-shadow: inset 0 0 0 2px #2e2d29; - box-shadow: inset 0 0 0 2px #2e2d29; - color: #2e2d29; } + box-shadow: inset 0 0 0 2px #2e2d29; } .su-button--secondary:focus, .su-button--secondary.su-link:focus { - background-color: #ffffff; -webkit-box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; - box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; - color: #2e2d29; } + box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; } .su-card--horizontal { display: -ms-grid; @@ -7263,20 +7264,21 @@ a { .su-link--action:hover::after { left: 4px; } -.su-link--external::after { - margin-bottom: -1px; - margin-left: 4px; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzhCQTY3OUI4NDYxMUU3OTZCQ0I4MDIwNzA5Q0Q0NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzhCQTY3QUI4NDYxMUU3OTZCQ0I4MDIwNzA5Q0Q0NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3OEJBNjc3Qjg0NjExRTc5NkJDQjgwMjA3MDlDRDQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3OEJBNjc4Qjg0NjExRTc5NkJDQjgwMjA3MDlDRDQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+4ZWx9AAAAy9JREFUeNq0mMlrFEEYxbt6ahI3Io6jFxFyEEFQEGIUL16MC66ooBfNxYviyYMXBf8FL/Egggt4EATBDaOeBEERxINLNAOKSxJBiQyIZpnp9hW+ki9Fz/Sahp9d3V2pefVtVaW6pbu8WbpKvIcx/ZT5R3uzdzWTdNozXf+nxrGIEmS5AmGB3WArmJYzF1fId+Z+Uwrx+TIswBrLwTCYk7D/uBYiAraXkpJQ3e6SM6uBP2AU3AMHwGRMCJi/q2ghohecBavAMlBOISRk/6PgEuPjCFgAtvG51G4MTRGHOUA5p0vm8V6mZfaCO2BLjBhlYmQ1Gs/AfDACBsA7ClQJY0ax/xPwU6SvzZzHYFM7McYipyhiHOwHz3NaRTku7QHdLb7NENLD9g2K6BBpqDLUjpDjNsA68BAs4jclrOe7QlayPSwGa+awiBQx6IjwhXtmiPGFz4IC6ocrYjGfQ/7WELPzLp8bNmt8EYyqQBH3hQj7zVh8J3gJDtFl5v2U+W2/AAFRIqp8VvxmsrAPfASd4DdTe5Ax+UM7halIdyi6/S3ryCj7TvL9BNgHjhsr6YIs0UsRFeEO82NvKGJM9LUJYbwxgdX3XN5tQJSIpvg2JESUxSosV2p1u7ywZEt8XhEPRIraGvKeW4AxxkDDWVj/hwMs0shqEd+xhCuiRhFfaYmppIOmFWFmtZ7LfCVChHHHZ+GOXeAy7y3LhE65hgQ09VWwRGSAFPHJCcxjrB9VFjIvajFNYxG79hhTn+e7ThETfREiPG4HPKZrYa6x1wBn6rFObKY7tKghnuMKFRf9XgarmPsF8IHWGImwhJdm6dAZ1ppQWPORKF6NvJXRz1jiA7HBbiYQruJi5DvbXWJ2KiFyAxWFHLfeKmOskNdsb+d9SuzMsxKQNWADx621SxDz8jrbG1kfulmM7KbJT4HtP5fjXaFFfokaErSKkYusAQdBP9gBvuTYFoSsLyvESe80eOXs7CPTt5/7hROsgNWCDuLfwBmemdoezG3WmFJ9ElwDazmbjgxWsXvTOuvLUxY6L+6MpMVByvCCFP3/JM24SWnn/FoSaZn3kGXHSXQ0+SvAANG5/kb0Py6MAAAAAElFTkSuQmCC) no-repeat 0 0; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1MTEuNjI1cHgiIGhlaWdodD0iNTExLjYyN3B4IiB2aWV3Qm94PSIwIDAgNTExLjYyNSA1MTEuNjI3IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTEuNjI1IDUxMS42MjciCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZmlsbD0iI0IxMDQwRSIgZD0iTTM5Mi44NTcsMjkyLjM1NGgtMTguMjc0Yy0yLjY3LDAtNC44NTksMC44NTQtNi41NjIsMi41NzJjLTEuNzE4LDEuNzA4LTIuNTcyLDMuODk3LTIuNTcyLDYuNTYzdjkxLjM1OQoJCWMwLDEyLjU2NC00LjQ3MSwyMy4zMTYtMTMuNDE2LDMyLjI2NGMtOC45NDUsOC45NDQtMTkuNjk5LDEzLjQxNC0zMi4yNjQsMTMuNDE0SDgyLjIyNGMtMTIuNTYyLDAtMjMuMzE3LTQuNDcxLTMyLjI2NC0xMy40MTQKCQljLTguOTQ1LTguOTQ2LTEzLjQxNy0xOS42OTgtMTMuNDE3LTMyLjI2M1YxNTUuMzFjMC0xMi41NjIsNC40Ny0yMy4zMTMsMTMuNDE3LTMyLjI2YzguOTQ3LTguOTQ2LDE5LjcwMi0xMy40MTcsMzIuMjY0LTEzLjQxNwoJCWgyMDAuOTkzYzIuNjcxLDAsNC44NjEtMC44Niw2LjU3LTIuNTdjMS43MTEtMS43MTMsMi41NjYtMy45LDIuNTY2LTYuNTY3VjgyLjIyYzAtMi42Ni0wLjg1NS00Ljg1Mi0yLjU2Ni02LjU2MgoJCWMtMS43MDktMS43MTMtMy44OTktMi41NjgtNi41Ny0yLjU2OEg4Mi4yMjRjLTIyLjY0OCwwLTQyLjAxNiw4LjA0Mi01OC4xMDIsMjQuMTI1QzguMDQyLDExMy4yOTcsMCwxMzIuNjY1LDAsMTU1LjMxM3YyMzcuNTQyCgkJYzAsMjIuNjQ2LDguMDQyLDQyLjAxOCwyNC4xMjMsNTguMDk1YzE2LjA4NiwxNi4wODQsMzUuNDU0LDI0LjEzLDU4LjEwMiwyNC4xM2gyMzcuNTQzYzIyLjY0NiwwLDQyLjAxOC04LjA0Niw1OC4xLTI0LjEzCgkJYzE2LjA4Ni0xNi4wNzcsMjQuMTI5LTM1LjQ0NywyNC4xMjktNTguMDk1di05MS4zNThjMC0yLjY3LTAuODU3LTQuODU5LTIuNTc0LTYuNTcKCQlDMzk3LjcwOSwyOTMuMjA5LDM5NS41MTksMjkyLjM1NCwzOTIuODU3LDI5Mi4zNTR6Ii8+Cgk8cGF0aCBmaWxsPSIjQjEwNDBFIiBkPSJNNTA2LjIsNDEuOTdjLTMuNjE3LTMuNjE2LTcuOTA2LTUuNDIzLTEyLjg1LTUuNDIzSDM0Ny4xN2MtNC45NDcsMC05LjIzMiwxLjgwNy0xMi44NDYsNS40MjQKCQljLTMuNjE3LDMuNjE2LTUuNDI5LDcuOS01LjQyOSwxMi44NDhjMCw0Ljk0OCwxLjgxLDkuMjMzLDUuNDI5LDEyLjg1bDUwLjI0Niw1MC4yNDhsLTE4Ni4xNDYsMTg2LjE1CgkJYy0xLjkwNiwxLjkwNC0yLjg1Niw0LjA5NC0yLjg1Niw2LjU2M2MwLDIuNDgsMC45NTMsNC42NjgsMi44NTYsNi41N2wzMi41NDgsMzIuNTQ1YzEuOTAzLDEuOTAzLDQuMDkzLDIuODUyLDYuNTY3LDIuODUyCgkJczQuNjY0LTAuOTQ3LDYuNTY2LTIuODUybDE4Ni4xNDgtMTg2LjE0OGw1MC4yNSw1MC4yNDhjMy42MTUsMy42MTcsNy45LDUuNDI2LDEyLjg0OCw1LjQyNnM5LjIzMi0xLjgwOCwxMi44NS01LjQyNQoJCWMzLjYxOS0zLjYxNiw1LjQyNi03Ljg5OCw1LjQyNi0xMi44NDdWNTQuODE4YzAtNC45NTItMS44MTQtOS4yMzItNS40MjgtMTIuODQ3VjQxLjk3eiIvPgo8L2c+Cjwvc3ZnPgo=) no-repeat 0 0; - background-size: 100%; - content: ''; - display: inline-block; - height: 0.65em; - width: 0.65em; } - -.su-link--external:hover::after { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzhCQTY3REI4NDYxMUU3OTZCQ0I4MDIwNzA5Q0Q0NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzhCQTY3RUI4NDYxMUU3OTZCQ0I4MDIwNzA5Q0Q0NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3OEJBNjdCQjg0NjExRTc5NkJDQjgwMjA3MDlDRDQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3OEJBNjdDQjg0NjExRTc5NkJDQjgwMjA3MDlDRDQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FRajzAAAAzRJREFUeNq0mMlrFEEUxrt6ehI3BMfRiwg5iKCYKMQoXrwYF1wQFfSi8eBF8ZSDFwX/BS8RFMEFPIiCFxWjngRBEETcEnVAcUkiKEJANDOZ6fF78JW8ND3Taxp+qV5qqr9+W1XF9HSvcmbpKLBtRvQz8sdzZu9oxOn08tWIEybEKNIcvrLAHrANTOsvV4f0M2t7Vkt7Wwtx+dDPwRrLwU0wJ2b/o54SYQUsJQWrOmIQ20faCvgLxsE9cABUI0JAflfylIg+cBZI9C4DxQRCmux/DFxmfBwBC8B2XhfajeFRxGEOUMzoknlsi7TMXnAHbI0QY0TIGnCBPx4DQ+AdBZoY6WcDUfo/4fU0X1plwD4Gm9uJESGnwHzwC+wHzzJaxQRc2gu6WjybIaSX57cookOloUlRO5octw7Wg4dgEZ8ZZT03KGQlzz+owRoZLKJFDAdEuMo9M8S4ymd51I+giMW8bvJdo8zOu7yu26xxVTCaHEXcVyLsM7H4LvACHKLL5H5N3u3mICBMRJnXhs8kC/vBJ9AJ/jC1hxmTP71AYcrTHYZuH2EdGWffKu9PgX3ghFjJy8kSfRRRUu6Ql72liAnV1yaEeGMKs++5rMuAMBEN9WxUiSiqWVjP1DL7FmyJzyrigUpRW0Pes6JOMAbqgYn1fzjAIvW0FnEDlgiKqFDEN1qiFnfQpCLkqzZwmi+FiBB3fFHu2A2usG1ZJryEc4hPU18DS1QGaBGfA4F5nPWjzELmhE2mSSxi5x4x9Xne61Qx0R8iwuFywGG65uYaewzxSx3WiS10h6dqiBNwhYmKfieFVaS9CD7SGmMhlnCSTB1eirmmqaz5SBWvetbK6KYs8b5aYDdiCDdRMfKD5wvV15mY6AVUGHrcyVYZY4W84fkOtjW1Mk+LT7rBRo5baZcgcvMGzzexPnSxGNlFk5sA238ux7tKi/xWNcRvFSOXWAMOggGwE3zNsCxosr6sUDu90+A1hTbape8A1wsnWQHLOW3Ev4Mz3DO13ZjbrJFSPQiug3X8mo4UVrFr00nWl6csdE7UHslTGynhOcn7/ySNqI/yAvvXgkrLrJssO06srck/AQYAm0z8JAxi7+EAAAAASUVORK5CYII=); - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1MTEuNjI1cHgiIGhlaWdodD0iNTExLjYyN3B4IiB2aWV3Qm94PSIwIDAgNTExLjYyNSA1MTEuNjI3IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTEuNjI1IDUxMS42MjciCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZmlsbD0iIzJFMkQyOSIgZD0iTTM5Mi44NTcsMjkyLjM1NGgtMTguMjc0Yy0yLjY3LDAtNC44NTksMC44NTQtNi41NjIsMi41NzJjLTEuNzE4LDEuNzA4LTIuNTcyLDMuODk3LTIuNTcyLDYuNTYzdjkxLjM1OQoJCWMwLDEyLjU2NC00LjQ3MSwyMy4zMTYtMTMuNDE2LDMyLjI2NGMtOC45NDUsOC45NDQtMTkuNjk5LDEzLjQxNC0zMi4yNjQsMTMuNDE0SDgyLjIyNGMtMTIuNTYyLDAtMjMuMzE3LTQuNDcxLTMyLjI2NC0xMy40MTQKCQljLTguOTQ1LTguOTQ2LTEzLjQxNy0xOS42OTgtMTMuNDE3LTMyLjI2M1YxNTUuMzFjMC0xMi41NjIsNC40Ny0yMy4zMTMsMTMuNDE3LTMyLjI2YzguOTQ3LTguOTQ2LDE5LjcwMi0xMy40MTcsMzIuMjY0LTEzLjQxNwoJCWgyMDAuOTkzYzIuNjcxLDAsNC44NjEtMC44Niw2LjU3LTIuNTdjMS43MTEtMS43MTMsMi41NjYtMy45LDIuNTY2LTYuNTY3VjgyLjIyYzAtMi42Ni0wLjg1NS00Ljg1Mi0yLjU2Ni02LjU2MgoJCWMtMS43MDktMS43MTMtMy44OTktMi41NjgtNi41Ny0yLjU2OEg4Mi4yMjRjLTIyLjY0OCwwLTQyLjAxNiw4LjA0Mi01OC4xMDIsMjQuMTI1QzguMDQyLDExMy4yOTcsMCwxMzIuNjY1LDAsMTU1LjMxM3YyMzcuNTQyCgkJYzAsMjIuNjQ2LDguMDQyLDQyLjAxOCwyNC4xMjMsNTguMDk1YzE2LjA4NiwxNi4wODQsMzUuNDU0LDI0LjEzLDU4LjEwMiwyNC4xM2gyMzcuNTQzYzIyLjY0NiwwLDQyLjAxOC04LjA0Niw1OC4xLTI0LjEzCgkJYzE2LjA4Ni0xNi4wNzcsMjQuMTI5LTM1LjQ0NywyNC4xMjktNTguMDk1di05MS4zNThjMC0yLjY3LTAuODU3LTQuODU5LTIuNTc0LTYuNTcKCQlDMzk3LjcwOSwyOTMuMjA5LDM5NS41MTksMjkyLjM1NCwzOTIuODU3LDI5Mi4zNTR6Ii8+Cgk8cGF0aCBmaWxsPSIjMkUyRDI5IiBkPSJNNTA2LjIsNDEuOTdjLTMuNjE3LTMuNjE2LTcuOTA2LTUuNDIzLTEyLjg1LTUuNDIzSDM0Ny4xN2MtNC45NDcsMC05LjIzMiwxLjgwNy0xMi44NDYsNS40MjQKCQljLTMuNjE3LDMuNjE2LTUuNDI5LDcuOS01LjQyOSwxMi44NDhjMCw0Ljk0OCwxLjgxLDkuMjMzLDUuNDI5LDEyLjg1bDUwLjI0Niw1MC4yNDhsLTE4Ni4xNDYsMTg2LjE1CgkJYy0xLjkwNiwxLjkwNC0yLjg1Niw0LjA5NC0yLjg1Niw2LjU2M2MwLDIuNDgsMC45NTMsNC42NjgsMi44NTYsNi41N2wzMi41NDgsMzIuNTQ1YzEuOTAzLDEuOTAzLDQuMDkzLDIuODUyLDYuNTY3LDIuODUyCgkJczQuNjY0LTAuOTQ3LDYuNTY2LTIuODUybDE4Ni4xNDgtMTg2LjE0OGw1MC4yNSw1MC4yNDhjMy42MTUsMy42MTcsNy45LDUuNDI2LDEyLjg0OCw1LjQyNnM5LjIzMi0xLjgwOCwxMi44NS01LjQyNQoJCWMzLjYxOS0zLjYxNiw1LjQyNi03Ljg5OCw1LjQyNi0xMi44NDdWNTQuODE4YzAtNC45NTItMS44MTQtOS4yMzItNS40MjgtMTIuODQ3VjQxLjk3eiIvPgo8L2c+Cjwvc3ZnPgo=); } +@supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { + .su-link--external::after { + margin-bottom: -1px; + margin-left: 4px; + height: 0.65em; + width: 0.65em; + display: inline-block; + content: ''; + -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1MTEuNjI1cHgiIGhlaWdodD0iNTExLjYyN3B4IiB2aWV3Qm94PSIwIDAgNTExLjYyNSA1MTEuNjI3IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTEuNjI1IDUxMS42MjciCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZmlsbD0iI0IxMDQwRSIgZD0iTTM5Mi44NTcsMjkyLjM1NGgtMTguMjc0Yy0yLjY3LDAtNC44NTksMC44NTQtNi41NjIsMi41NzJjLTEuNzE4LDEuNzA4LTIuNTcyLDMuODk3LTIuNTcyLDYuNTYzdjkxLjM1OQoJCWMwLDEyLjU2NC00LjQ3MSwyMy4zMTYtMTMuNDE2LDMyLjI2NGMtOC45NDUsOC45NDQtMTkuNjk5LDEzLjQxNC0zMi4yNjQsMTMuNDE0SDgyLjIyNGMtMTIuNTYyLDAtMjMuMzE3LTQuNDcxLTMyLjI2NC0xMy40MTQKCQljLTguOTQ1LTguOTQ2LTEzLjQxNy0xOS42OTgtMTMuNDE3LTMyLjI2M1YxNTUuMzFjMC0xMi41NjIsNC40Ny0yMy4zMTMsMTMuNDE3LTMyLjI2YzguOTQ3LTguOTQ2LDE5LjcwMi0xMy40MTcsMzIuMjY0LTEzLjQxNwoJCWgyMDAuOTkzYzIuNjcxLDAsNC44NjEtMC44Niw2LjU3LTIuNTdjMS43MTEtMS43MTMsMi41NjYtMy45LDIuNTY2LTYuNTY3VjgyLjIyYzAtMi42Ni0wLjg1NS00Ljg1Mi0yLjU2Ni02LjU2MgoJCWMtMS43MDktMS43MTMtMy44OTktMi41NjgtNi41Ny0yLjU2OEg4Mi4yMjRjLTIyLjY0OCwwLTQyLjAxNiw4LjA0Mi01OC4xMDIsMjQuMTI1QzguMDQyLDExMy4yOTcsMCwxMzIuNjY1LDAsMTU1LjMxM3YyMzcuNTQyCgkJYzAsMjIuNjQ2LDguMDQyLDQyLjAxOCwyNC4xMjMsNTguMDk1YzE2LjA4NiwxNi4wODQsMzUuNDU0LDI0LjEzLDU4LjEwMiwyNC4xM2gyMzcuNTQzYzIyLjY0NiwwLDQyLjAxOC04LjA0Niw1OC4xLTI0LjEzCgkJYzE2LjA4Ni0xNi4wNzcsMjQuMTI5LTM1LjQ0NywyNC4xMjktNTguMDk1di05MS4zNThjMC0yLjY3LTAuODU3LTQuODU5LTIuNTc0LTYuNTcKCQlDMzk3LjcwOSwyOTMuMjA5LDM5NS41MTksMjkyLjM1NCwzOTIuODU3LDI5Mi4zNTR6Ii8+Cgk8cGF0aCBmaWxsPSIjQjEwNDBFIiBkPSJNNTA2LjIsNDEuOTdjLTMuNjE3LTMuNjE2LTcuOTA2LTUuNDIzLTEyLjg1LTUuNDIzSDM0Ny4xN2MtNC45NDcsMC05LjIzMiwxLjgwNy0xMi44NDYsNS40MjQKCQljLTMuNjE3LDMuNjE2LTUuNDI5LDcuOS01LjQyOSwxMi44NDhjMCw0Ljk0OCwxLjgxLDkuMjMzLDUuNDI5LDEyLjg1bDUwLjI0Niw1MC4yNDhsLTE4Ni4xNDYsMTg2LjE1CgkJYy0xLjkwNiwxLjkwNC0yLjg1Niw0LjA5NC0yLjg1Niw2LjU2M2MwLDIuNDgsMC45NTMsNC42NjgsMi44NTYsNi41N2wzMi41NDgsMzIuNTQ1YzEuOTAzLDEuOTAzLDQuMDkzLDIuODUyLDYuNTY3LDIuODUyCgkJczQuNjY0LTAuOTQ3LDYuNTY2LTIuODUybDE4Ni4xNDgtMTg2LjE0OGw1MC4yNSw1MC4yNDhjMy42MTUsMy42MTcsNy45LDUuNDI2LDEyLjg0OCw1LjQyNnM5LjIzMi0xLjgwOCwxMi44NS01LjQyNQoJCWMzLjYxOS0zLjYxNiw1LjQyNi03Ljg5OCw1LjQyNi0xMi44NDdWNTQuODE4YzAtNC45NTItMS44MTQtOS4yMzItNS40MjgtMTIuODQ3VjQxLjk3eiIvPgo8L2c+Cjwvc3ZnPgo=) no-repeat 0 0; + mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1MTEuNjI1cHgiIGhlaWdodD0iNTExLjYyN3B4IiB2aWV3Qm94PSIwIDAgNTExLjYyNSA1MTEuNjI3IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTEuNjI1IDUxMS42MjciCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZmlsbD0iI0IxMDQwRSIgZD0iTTM5Mi44NTcsMjkyLjM1NGgtMTguMjc0Yy0yLjY3LDAtNC44NTksMC44NTQtNi41NjIsMi41NzJjLTEuNzE4LDEuNzA4LTIuNTcyLDMuODk3LTIuNTcyLDYuNTYzdjkxLjM1OQoJCWMwLDEyLjU2NC00LjQ3MSwyMy4zMTYtMTMuNDE2LDMyLjI2NGMtOC45NDUsOC45NDQtMTkuNjk5LDEzLjQxNC0zMi4yNjQsMTMuNDE0SDgyLjIyNGMtMTIuNTYyLDAtMjMuMzE3LTQuNDcxLTMyLjI2NC0xMy40MTQKCQljLTguOTQ1LTguOTQ2LTEzLjQxNy0xOS42OTgtMTMuNDE3LTMyLjI2M1YxNTUuMzFjMC0xMi41NjIsNC40Ny0yMy4zMTMsMTMuNDE3LTMyLjI2YzguOTQ3LTguOTQ2LDE5LjcwMi0xMy40MTcsMzIuMjY0LTEzLjQxNwoJCWgyMDAuOTkzYzIuNjcxLDAsNC44NjEtMC44Niw2LjU3LTIuNTdjMS43MTEtMS43MTMsMi41NjYtMy45LDIuNTY2LTYuNTY3VjgyLjIyYzAtMi42Ni0wLjg1NS00Ljg1Mi0yLjU2Ni02LjU2MgoJCWMtMS43MDktMS43MTMtMy44OTktMi41NjgtNi41Ny0yLjU2OEg4Mi4yMjRjLTIyLjY0OCwwLTQyLjAxNiw4LjA0Mi01OC4xMDIsMjQuMTI1QzguMDQyLDExMy4yOTcsMCwxMzIuNjY1LDAsMTU1LjMxM3YyMzcuNTQyCgkJYzAsMjIuNjQ2LDguMDQyLDQyLjAxOCwyNC4xMjMsNTguMDk1YzE2LjA4NiwxNi4wODQsMzUuNDU0LDI0LjEzLDU4LjEwMiwyNC4xM2gyMzcuNTQzYzIyLjY0NiwwLDQyLjAxOC04LjA0Niw1OC4xLTI0LjEzCgkJYzE2LjA4Ni0xNi4wNzcsMjQuMTI5LTM1LjQ0NywyNC4xMjktNTguMDk1di05MS4zNThjMC0yLjY3LTAuODU3LTQuODU5LTIuNTc0LTYuNTcKCQlDMzk3LjcwOSwyOTMuMjA5LDM5NS41MTksMjkyLjM1NCwzOTIuODU3LDI5Mi4zNTR6Ii8+Cgk8cGF0aCBmaWxsPSIjQjEwNDBFIiBkPSJNNTA2LjIsNDEuOTdjLTMuNjE3LTMuNjE2LTcuOTA2LTUuNDIzLTEyLjg1LTUuNDIzSDM0Ny4xN2MtNC45NDcsMC05LjIzMiwxLjgwNy0xMi44NDYsNS40MjQKCQljLTMuNjE3LDMuNjE2LTUuNDI5LDcuOS01LjQyOSwxMi44NDhjMCw0Ljk0OCwxLjgxLDkuMjMzLDUuNDI5LDEyLjg1bDUwLjI0Niw1MC4yNDhsLTE4Ni4xNDYsMTg2LjE1CgkJYy0xLjkwNiwxLjkwNC0yLjg1Niw0LjA5NC0yLjg1Niw2LjU2M2MwLDIuNDgsMC45NTMsNC42NjgsMi44NTYsNi41N2wzMi41NDgsMzIuNTQ1YzEuOTAzLDEuOTAzLDQuMDkzLDIuODUyLDYuNTY3LDIuODUyCgkJczQuNjY0LTAuOTQ3LDYuNTY2LTIuODUybDE4Ni4xNDgtMTg2LjE0OGw1MC4yNSw1MC4yNDhjMy42MTUsMy42MTcsNy45LDUuNDI2LDEyLjg0OCw1LjQyNnM5LjIzMi0xLjgwOCwxMi44NS01LjQyNQoJCWMzLjYxOS0zLjYxNiw1LjQyNi03Ljg5OCw1LjQyNi0xMi44NDdWNTQuODE4YzAtNC45NTItMS44MTQtOS4yMzItNS40MjgtMTIuODQ3VjQxLjk3eiIvPgo8L2c+Cjwvc3ZnPgo=) no-repeat 0 0; + -webkit-mask-size: cover; + mask-size: cover; + background-color: #006cb8; } + .su-link--external:hover::after, .su-link--external:focus::after { + background-color: #2e2d29; } } .su-link--more::after { content: '\00BB'; diff --git a/core/src/scss/utilities/functions/_color.scss b/core/src/scss/utilities/functions/_color.scss index 5a20a5270..ac8170b8e 100644 --- a/core/src/scss/utilities/functions/_color.scss +++ b/core/src/scss/utilities/functions/_color.scss @@ -7,8 +7,8 @@ // returns a color from $core-colors. If a color and a color map are specified, // then it returns a color from the particular color map. // -// $color - String - Color variable name from a color map, e.g., brand, -// link-inline--hover $colormap - Color palette in the form of a SASS map, +// $color - String - Color variable name from a color map, e.g., brand, link +// $colormap - Color palette in the form of a SASS map, // e.g., $alert-colors, $main-nav-dark-colors. // Default is $core-colors. // diff --git a/core/src/scss/utilities/mixins/button/_button-secondary.scss b/core/src/scss/utilities/mixins/button/_button-secondary.scss index c2884ae4d..646b98c79 100644 --- a/core/src/scss/utilities/mixins/button/_button-secondary.scss +++ b/core/src/scss/utilities/mixins/button/_button-secondary.scss @@ -13,17 +13,19 @@ background-color: color(bg); box-shadow: $button-stroke color(brand--bright); - color: color(brand--bright); + color: color(link--alt); - &:hover { + &:hover, + &:focus { background-color: color(bg); + color: color(link--alt-hover); + } + + &:hover { box-shadow: $button-stroke $color-black; - color: color(link-inline--hover); } &:focus { - background-color: color(bg); box-shadow: $button-stroke $color-black, $focus-shadow; - color: color(link-inline--hover); } } diff --git a/core/src/scss/utilities/mixins/ie-only/_ie-only.scss b/core/src/scss/utilities/mixins/ie-only/_ie-only.scss new file mode 100644 index 000000000..539c8e784 --- /dev/null +++ b/core/src/scss/utilities/mixins/ie-only/_ie-only.scss @@ -0,0 +1,14 @@ +@charset "UTF-8"; + +// +// @ie-only +// +// A helper to write a query for IE-only styles +// +// Style guide: Mixins.IE-only +// +@mixin ie-only { + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + @content; + } +} diff --git a/core/src/scss/utilities/mixins/ie-only/index.scss b/core/src/scss/utilities/mixins/ie-only/index.scss new file mode 100644 index 000000000..9132622bd --- /dev/null +++ b/core/src/scss/utilities/mixins/ie-only/index.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +// +// @ie-only +// +// A helper mixin to write a query for IE-only styles +// +// Style guide: Mixins.IE-only +// + +@import +'ie-only'; diff --git a/core/src/scss/utilities/mixins/index.scss b/core/src/scss/utilities/mixins/index.scss index 3fb5e385b..0ced658bc 100644 --- a/core/src/scss/utilities/mixins/index.scss +++ b/core/src/scss/utilities/mixins/index.scss @@ -6,6 +6,7 @@ @import // Utilities +'ie-only/index', 'accessibility/index', 'animation/index', 'breakpoint/index', diff --git a/core/src/scss/utilities/mixins/link/_action-link.scss b/core/src/scss/utilities/mixins/link/_action-link.scss index 119eb5d2a..c62006eb9 100644 --- a/core/src/scss/utilities/mixins/link/_action-link.scss +++ b/core/src/scss/utilities/mixins/link/_action-link.scss @@ -10,7 +10,7 @@ // // Style guide: Mixins.Link.action-link // -@mixin action-link($color: color(link--alt), $hover: color(link--alt-hover)) { +@mixin action-link($color: color(link), $hover: color(link--hover)) { font-weight: $font-semi-bold; text-decoration: none; color: $color; diff --git a/core/src/scss/utilities/mixins/link/_external-link.scss b/core/src/scss/utilities/mixins/link/_external-link.scss index 8f3cf3fdf..56fe33237 100644 --- a/core/src/scss/utilities/mixins/link/_external-link.scss +++ b/core/src/scss/utilities/mixins/link/_external-link.scss @@ -11,19 +11,22 @@ // Style guide: Mixins.Link.external-link // @mixin external-link($external-link: external-link, $external-link-hover: external-link-hover) { - &::after { - @include margin(null null -1px 4px); - background: url("#{$image-path}/#{$external-link}.png") no-repeat 0 0; - background: url("#{$image-path}/#{$external-link}.svg") no-repeat 0 0; - background-size: 100%; - content: ''; - display: inline-block; - height: 0.65em; - width: 0.65em; - } + @supports (mask-repeat: no-repeat) { + &::after { + @include margin(null null -1px 4px); + @include size(0.65em); + display: inline-block; + content: ''; + mask: url("#{$image-path}/#{$external-link}.svg") no-repeat 0 0; + mask-size: cover; + background-color: color(link); + } - &:hover::after { - background-image: url("#{$image-path}/#{$external-link-hover}.png"); - background-image: url("#{$image-path}/#{$external-link-hover}.svg"); + &:hover, + &:focus { + &::after { + background-color: color(link--hover); + } + } } } diff --git a/core/src/scss/utilities/mixins/link/_link.scss b/core/src/scss/utilities/mixins/link/_link.scss index 76b2677b6..31fca8dc1 100644 --- a/core/src/scss/utilities/mixins/link/_link.scss +++ b/core/src/scss/utilities/mixins/link/_link.scss @@ -10,7 +10,7 @@ // // Style guide: Mixins.Link.link // -@mixin link($color: color(link-inline), $hover: color(link-inline--hover)) { +@mixin link($color: color(link), $hover: color(link--hover)) { color: $color; text-decoration: underline; font-weight: $font-semi-bold; diff --git a/core/src/scss/utilities/variables/core/_core-color-maps.scss b/core/src/scss/utilities/variables/core/_core-color-maps.scss index ea141c6c6..bf504d103 100644 --- a/core/src/scss/utilities/variables/core/_core-color-maps.scss +++ b/core/src/scss/utilities/variables/core/_core-color-maps.scss @@ -15,9 +15,9 @@ // text: $color-black, // text--high-contrast: #000, // text--reverse: $color-white, -// link: $color-bright-red, -// link-inline--hover: $color-black, -// link--alt: $color-bright-blue, +// link: $color-bright-blue, +// link--hover: $color-black, +// link--alt: $color-bright-red, // link--alt-hover: $color-black, // link--reverse: $color-white, // link--reverse-hover: $color-vivid-red, @@ -37,9 +37,9 @@ $core-colors: ( text--high-contrast: #000, text--reverse: $color-white, - link-inline: $color-bright-blue, - link-inline--hover: $color-black, - link--alt: $color-bright-blue, + link: $color-bright-blue, + link--hover: $color-black, + link--alt: $color-bright-red, link--alt-hover: $color-black, link--reverse: $color-white, link--reverse-hover: $color-vivid-red,