From 1d91723968625b8ad1682264ae58dc7271250a7a Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Wed, 23 Nov 2016 18:15:14 +0000 Subject: [PATCH 01/14] =?UTF-8?q?=F0=9F=92=84=20Make=20`$red`=20value=20WC?= =?UTF-8?q?AG2AA-compliant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/_init.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_init.scss b/scss/_init.scss index 4cf74b2b7..6380982f7 100644 --- a/scss/_init.scss +++ b/scss/_init.scss @@ -37,7 +37,7 @@ $grey-contrast: #ededed; $black: #000000; $white: #ffffff; -$red: #ff5252; +$red: desaturate(darken(#e6494a, 5%), 15%); $orange: #ffc759; $yellow: #fcdc5d; $green: #00a878; From 6127560ff526a18894c3737d2cf6372648d8fe13 Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Wed, 23 Nov 2016 19:29:09 +0000 Subject: [PATCH 02/14] =?UTF-8?q?=E2=9C=A8=20Add=20new=20icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close #128 --- icons/ui/src/expand-less.colors-light-dark.svg | 1 + icons/ui/src/expand-more.colors-light-dark.svg | 1 + icons/ui/src/news.colors-light-dark.svg | 1 + icons/ui/src/office.colors-light-dark.svg | 1 + scss/icons/_icons-dark.scss | 18 +++++++++++++++++- scss/icons/_icons-light.scss | 18 +++++++++++++++++- scss/icons/_icons-primary.scss | 18 +++++++++++++++++- 7 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 icons/ui/src/expand-less.colors-light-dark.svg create mode 100644 icons/ui/src/expand-more.colors-light-dark.svg create mode 100644 icons/ui/src/news.colors-light-dark.svg create mode 100644 icons/ui/src/office.colors-light-dark.svg diff --git a/icons/ui/src/expand-less.colors-light-dark.svg b/icons/ui/src/expand-less.colors-light-dark.svg new file mode 100644 index 000000000..1b5a3267c --- /dev/null +++ b/icons/ui/src/expand-less.colors-light-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/ui/src/expand-more.colors-light-dark.svg b/icons/ui/src/expand-more.colors-light-dark.svg new file mode 100644 index 000000000..e3e13c528 --- /dev/null +++ b/icons/ui/src/expand-more.colors-light-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/ui/src/news.colors-light-dark.svg b/icons/ui/src/news.colors-light-dark.svg new file mode 100644 index 000000000..f6bfbe947 --- /dev/null +++ b/icons/ui/src/news.colors-light-dark.svg @@ -0,0 +1 @@ +Artboard diff --git a/icons/ui/src/office.colors-light-dark.svg b/icons/ui/src/office.colors-light-dark.svg new file mode 100644 index 000000000..bfaefa11d --- /dev/null +++ b/icons/ui/src/office.colors-light-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scss/icons/_icons-dark.scss b/scss/icons/_icons-dark.scss index 7c4874712..a4c7aaf1e 100644 --- a/scss/icons/_icons-dark.scss +++ b/scss/icons/_icons-dark.scss @@ -82,6 +82,14 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzIzMjMyMyIgZD0iTTExLjk5NSAyYy01LjUyNSAwLTkuOTk1IDQuNDc1LTkuOTk1IDEwczQuNDcgMTAgOS45OTUgMTBjNS41MjUgMCAxMC4wMDUtNC40NzUgMTAuMDA1LTEwcy00LjQ4LTEwLTEwLjAwNS0xMHpNMTIgMjBjLTQuNDIgMC04LTMuNTgtOC04czMuNTgtOCA4LTggOCAzLjU4IDggOC0zLjU4IDgtOCA4ek0xNS41IDExYzAuODMgMCAxLjUtMC42NyAxLjUtMS41cy0wLjY3LTEuNS0xLjUtMS41LTEuNSAwLjY3LTEuNSAxLjUgMC42NyAxLjUgMS41IDEuNXpNOC41IDExYzAuODMgMCAxLjUtMC42NyAxLjUtMS41cy0wLjY3LTEuNS0xLjUtMS41LTEuNSAwLjY3LTEuNSAxLjUgMC42NyAxLjUgMS41IDEuNXpNMTIgMTcuNWMyLjMzIDAgNC4zMDUtMS40NTUgNS4xMDUtMy41aC0xMC4yMWMwLjggMi4wNDUgMi43NzUgMy41IDUuMTA1IDMuNXoiLz4KPC9zdmc+Cg=="); } +%icon-dark-expand-less { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgOGwtNiA2IDEuNDEgMS40MUwxMiAxMC44M2w0LjU5IDQuNThMMTggMTR6IiBmaWxsPSIjMjMyMzIzIi8+PC9zdmc+"); +} + +%icon-dark-expand-more { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIgZmlsbD0iIzIzMjMyMyIvPjwvc3ZnPg=="); +} + %icon-dark-external-link { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTlINVY1aDdWM0g1Yy0xLjExIDAtMiAuOS0yIDJ2MTRjMCAxLjEuODkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJ2LTdoLTJ2N3pNMTQgM3YyaDMuNTlsLTkuODMgOS44MyAxLjQxIDEuNDFMMTkgNi40MVYxMGgyVjNoLTd6IiBmaWxsPSIjMjMyMzIzIi8+PC9zdmc+"); } @@ -146,6 +154,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTExLjggMTAuOWMtMi4yNy0wLjU5LTMtMS4xOTUtMy0yLjE0NSAwLTEuMDkwIDEuMDA1LTEuODU1IDIuNy0xLjg1NSAxLjc4IDAgMi40NCAwLjg1IDIuNSAyLjFoMi4yMWMtMC4wNjUtMS43MjUtMS4xMi0zLjI5NS0zLjIxLTMuODF2LTIuMTloLTN2Mi4xNmMtMS45NCAwLjQyNS0zLjUgMS42NzUtMy41IDMuNjEgMCAyLjMxIDEuOTE1IDMuNDYgNC43IDQuMTMgMi41MDUgMC42IDMgMS40NzUgMyAyLjQxNSAwIDAuNjg1LTAuNDg1IDEuNzg1LTIuNyAxLjc4NS0yLjA2MCAwLTIuODc1LTAuOTI1LTIuOTgtMi4xaC0yLjIwNWMwLjEyNSAyLjE5IDEuNzYgMy40MTUgMy42ODUgMy44M3YyLjE3aDN2LTIuMTVjMS45NDUtMC4zNzUgMy41LTEuNSAzLjUtMy41NTUgMC0yLjgzLTIuNDMtMy44LTQuNy00LjM5NXoiIGZpbGw9IiMyMzIzMjMiLz4KPC9zdmc+Cg=="); } +%icon-dark-news { + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+QXJ0Ym9hcmQ8L3RpdGxlPjxwYXRoIGQ9Ik0yMSA2VjNIMHYxNi41YzAgLjgyOC42NzIgMS41IDEuNSAxLjVoMjAuMjVjMS4yNDMgMCAyLjI1LTEuMDA3IDIuMjUtMi4yNVY2aC0zem0tMS41IDEzLjVoLTE4di0xNWgxOHYxNXpNMyA3LjVoMTVWOUgzVjcuNXptOSAzaDZWMTJoLTZ2LTEuNXptMCAzaDZWMTVoLTZ2LTEuNXptMCAzaDQuNVYxOEgxMnYtMS41em0tOS02aDcuNVYxOEgzdi03LjV6IiBmaWxsPSIjMjMyMzIzIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K"); +} + %icon-dark-noentry { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTEyIDJjLTUuNTI1IDAtMTAgNC40NzUtMTAgMTBzNC40NzUgMTAgMTAgMTAgMTAtNC40NzUgMTAtMTAtNC40NzUtMTAtMTAtMTB6TTQgMTJjMC00LjQyIDMuNTgtOCA4LTggMS44NSAwIDMuNTQ1IDAuNjM1IDQuOSAxLjY4NWwtMTEuMjE1IDExLjIxNWMtMS4wNTAtMS4zNTUtMS42ODUtMy4wNTAtMS42ODUtNC45ek0xMiAyMGMtMS44NSAwLTMuNTQ1LTAuNjM1LTQuOS0xLjY4NWwxMS4yMTUtMTEuMjE1YzEuMDUwIDEuMzU1IDEuNjg1IDMuMDUwIDEuNjg1IDQuOSAwIDQuNDItMy41OCA4LTggOHoiIGZpbGw9IiMyMzIzMjMiLz4KPC9zdmc+Cg=="); } @@ -158,6 +170,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzIzMjMyMyIgZD0iTTExLjUgMjJjMS4xMDUgMCAyLTAuODk1IDItMmgtNGMwIDEuMTA1IDAuODk1IDIgMiAyek0xOCAxNnYtNS41YzAtMy4wNzUtMi4xMzUtNS42NC01LTYuMzJ2LTAuNjhjMC0wLjgzLTAuNjctMS41LTEuNS0xLjVzLTEuNSAwLjY3LTEuNSAxLjV2MC42OGMtMi44NjUgMC42OC01IDMuMjQ1LTUgNi4zMnY1LjVsLTIgMnYxaDE3di0xbC0yLTJ6Ii8+Cjwvc3ZnPgo="); } +%icon-dark-office { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgN1YzSDJ2MThoMjBWN0gxMnpNNiAxOUg0di0yaDJ2MnptMC00SDR2LTJoMnYyem0wLTRINFY5aDJ2MnptMC00SDRWNWgydjJ6bTQgMTJIOHYtMmgydjJ6bTAtNEg4di0yaDJ2MnptMC00SDhWOWgydjJ6bTAtNEg4VjVoMnYyem0xMCAxMmgtOHYtMmgydi0yaC0ydi0yaDJ2LTJoLTJWOWg4djEwem0tMi04aC0ydjJoMnYtMnptMCA0aC0ydjJoMnYtMnoiIGZpbGw9IiMyMzIzMjMiLz48L3N2Zz4="); +} + %icon-dark-people { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzIzMjMyMyIgZD0iTTE2IDExYzEuNjU1IDAgMi45OS0xLjM0NSAyLjk5LTNzLTEuMzM1LTMtMi45OS0zYy0xLjY1NSAwLTMgMS4zNDUtMyAzczEuMzQ1IDMgMyAzek04IDExYzEuNjU1IDAgMi45OS0xLjM0NSAyLjk5LTNzLTEuMzM1LTMtMi45OS0zYy0xLjY1NSAwLTMgMS4zNDUtMyAzczEuMzQ1IDMgMyAzek04IDEzYy0yLjMzNSAwLTcgMS4xNy03IDMuNXYyLjVoMTR2LTIuNWMwLTIuMzMtNC42NjUtMy41LTctMy41ek0xNiAxM2MtMC4yOSAwLTAuNjE1IDAuMDIwLTAuOTY1IDAuMDU1IDEuMTYgMC44MzUgMS45NjUgMS45NiAxLjk2NSAzLjQ0NXYyLjVoNnYtMi41YzAtMi4zMy00LjY2NS0zLjUtNy0zLjV6Ii8+Cjwvc3ZnPgo="); } @@ -232,4 +248,4 @@ %icon-dark-visibility { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzIzMjMyMyIgZD0iTTEyIDQuNWMtNSAwLTkuMjcgMy4xMS0xMSA3LjUgMS43MyA0LjM5IDYgNy41IDExIDcuNSA1LjAwNSAwIDkuMjctMy4xMSAxMS03LjUtMS43My00LjM5LTUuOTk1LTcuNS0xMS03LjV6TTEyIDE3Yy0yLjc2IDAtNS0yLjI0LTUtNXMyLjI0LTUgNS01IDUgMi4yNCA1IDUtMi4yNCA1LTUgNXpNMTIgOWMtMS42NTUgMC0zIDEuMzQ1LTMgM3MxLjM0NSAzIDMgMyAzLTEuMzQ1IDMtMy0xLjM0NS0zLTMtM3oiLz4KPC9zdmc+Cg=="); -} +} \ No newline at end of file diff --git a/scss/icons/_icons-light.scss b/scss/icons/_icons-light.scss index 8fc05b274..675269e06 100644 --- a/scss/icons/_icons-light.scss +++ b/scss/icons/_icons-light.scss @@ -82,6 +82,14 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTExLjk5NSAyYy01LjUyNSAwLTkuOTk1IDQuNDc1LTkuOTk1IDEwczQuNDcgMTAgOS45OTUgMTBjNS41MjUgMCAxMC4wMDUtNC40NzUgMTAuMDA1LTEwcy00LjQ4LTEwLTEwLjAwNS0xMHpNMTIgMjBjLTQuNDIgMC04LTMuNTgtOC04czMuNTgtOCA4LTggOCAzLjU4IDggOC0zLjU4IDgtOCA4ek0xNS41IDExYzAuODMgMCAxLjUtMC42NyAxLjUtMS41cy0wLjY3LTEuNS0xLjUtMS41LTEuNSAwLjY3LTEuNSAxLjUgMC42NyAxLjUgMS41IDEuNXpNOC41IDExYzAuODMgMCAxLjUtMC42NyAxLjUtMS41cy0wLjY3LTEuNS0xLjUtMS41LTEuNSAwLjY3LTEuNSAxLjUgMC42NyAxLjUgMS41IDEuNXpNMTIgMTcuNWMyLjMzIDAgNC4zMDUtMS40NTUgNS4xMDUtMy41aC0xMC4yMWMwLjggMi4wNDUgMi43NzUgMy41IDUuMTA1IDMuNXoiLz4KPC9zdmc+Cg=="); } +%icon-light-expand-less { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgOGwtNiA2IDEuNDEgMS40MUwxMiAxMC44M2w0LjU5IDQuNThMMTggMTR6IiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+"); +} + +%icon-light-expand-more { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg=="); +} + %icon-light-external-link { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTlINVY1aDdWM0g1Yy0xLjExIDAtMiAuOS0yIDJ2MTRjMCAxLjEuODkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJ2LTdoLTJ2N3pNMTQgM3YyaDMuNTlsLTkuODMgOS44MyAxLjQxIDEuNDFMMTkgNi40MVYxMGgyVjNoLTd6IiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+"); } @@ -146,6 +154,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTExLjggMTAuOWMtMi4yNy0wLjU5LTMtMS4xOTUtMy0yLjE0NSAwLTEuMDkwIDEuMDA1LTEuODU1IDIuNy0xLjg1NSAxLjc4IDAgMi40NCAwLjg1IDIuNSAyLjFoMi4yMWMtMC4wNjUtMS43MjUtMS4xMi0zLjI5NS0zLjIxLTMuODF2LTIuMTloLTN2Mi4xNmMtMS45NCAwLjQyNS0zLjUgMS42NzUtMy41IDMuNjEgMCAyLjMxIDEuOTE1IDMuNDYgNC43IDQuMTMgMi41MDUgMC42IDMgMS40NzUgMyAyLjQxNSAwIDAuNjg1LTAuNDg1IDEuNzg1LTIuNyAxLjc4NS0yLjA2MCAwLTIuODc1LTAuOTI1LTIuOTgtMi4xaC0yLjIwNWMwLjEyNSAyLjE5IDEuNzYgMy40MTUgMy42ODUgMy44M3YyLjE3aDN2LTIuMTVjMS45NDUtMC4zNzUgMy41LTEuNSAzLjUtMy41NTUgMC0yLjgzLTIuNDMtMy44LTQuNy00LjM5NXoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg=="); } +%icon-light-news { + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+QXJ0Ym9hcmQ8L3RpdGxlPjxwYXRoIGQ9Ik0yMSA2VjNIMHYxNi41YzAgLjgyOC42NzIgMS41IDEuNSAxLjVoMjAuMjVjMS4yNDMgMCAyLjI1LTEuMDA3IDIuMjUtMi4yNVY2aC0zem0tMS41IDEzLjVoLTE4di0xNWgxOHYxNXpNMyA3LjVoMTVWOUgzVjcuNXptOSAzaDZWMTJoLTZ2LTEuNXptMCAzaDZWMTVoLTZ2LTEuNXptMCAzaDQuNVYxOEgxMnYtMS41em0tOS02aDcuNVYxOEgzdi03LjV6IiBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K"); +} + %icon-light-noentry { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTEyIDJjLTUuNTI1IDAtMTAgNC40NzUtMTAgMTBzNC40NzUgMTAgMTAgMTAgMTAtNC40NzUgMTAtMTAtNC40NzUtMTAtMTAtMTB6TTQgMTJjMC00LjQyIDMuNTgtOCA4LTggMS44NSAwIDMuNTQ1IDAuNjM1IDQuOSAxLjY4NWwtMTEuMjE1IDExLjIxNWMtMS4wNTAtMS4zNTUtMS42ODUtMy4wNTAtMS42ODUtNC45ek0xMiAyMGMtMS44NSAwLTMuNTQ1LTAuNjM1LTQuOS0xLjY4NWwxMS4yMTUtMTEuMjE1YzEuMDUwIDEuMzU1IDEuNjg1IDMuMDUwIDEuNjg1IDQuOSAwIDQuNDItMy41OCA4LTggOHoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg=="); } @@ -158,6 +170,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTExLjUgMjJjMS4xMDUgMCAyLTAuODk1IDItMmgtNGMwIDEuMTA1IDAuODk1IDIgMiAyek0xOCAxNnYtNS41YzAtMy4wNzUtMi4xMzUtNS42NC01LTYuMzJ2LTAuNjhjMC0wLjgzLTAuNjctMS41LTEuNS0xLjVzLTEuNSAwLjY3LTEuNSAxLjV2MC42OGMtMi44NjUgMC42OC01IDMuMjQ1LTUgNi4zMnY1LjVsLTIgMnYxaDE3di0xbC0yLTJ6Ii8+Cjwvc3ZnPgo="); } +%icon-light-office { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgN1YzSDJ2MThoMjBWN0gxMnpNNiAxOUg0di0yaDJ2MnptMC00SDR2LTJoMnYyem0wLTRINFY5aDJ2MnptMC00SDRWNWgydjJ6bTQgMTJIOHYtMmgydjJ6bTAtNEg4di0yaDJ2MnptMC00SDhWOWgydjJ6bTAtNEg4VjVoMnYyem0xMCAxMmgtOHYtMmgydi0yaC0ydi0yaDJ2LTJoLTJWOWg4djEwem0tMi04aC0ydjJoMnYtMnptMCA0aC0ydjJoMnYtMnoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4="); +} + %icon-light-people { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTE2IDExYzEuNjU1IDAgMi45OS0xLjM0NSAyLjk5LTNzLTEuMzM1LTMtMi45OS0zYy0xLjY1NSAwLTMgMS4zNDUtMyAzczEuMzQ1IDMgMyAzek04IDExYzEuNjU1IDAgMi45OS0xLjM0NSAyLjk5LTNzLTEuMzM1LTMtMi45OS0zYy0xLjY1NSAwLTMgMS4zNDUtMyAzczEuMzQ1IDMgMyAzek04IDEzYy0yLjMzNSAwLTcgMS4xNy03IDMuNXYyLjVoMTR2LTIuNWMwLTIuMzMtNC42NjUtMy41LTctMy41ek0xNiAxM2MtMC4yOSAwLTAuNjE1IDAuMDIwLTAuOTY1IDAuMDU1IDEuMTYgMC44MzUgMS45NjUgMS45NiAxLjk2NSAzLjQ0NXYyLjVoNnYtMi41YzAtMi4zMy00LjY2NS0zLjUtNy0zLjV6Ii8+Cjwvc3ZnPgo="); } @@ -232,4 +248,4 @@ %icon-light-visibility { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEyIDQuNWMtNSAwLTkuMjcgMy4xMS0xMSA3LjUgMS43MyA0LjM5IDYgNy41IDExIDcuNSA1LjAwNSAwIDkuMjctMy4xMSAxMS03LjUtMS43My00LjM5LTUuOTk1LTcuNS0xMS03LjV6TTEyIDE3Yy0yLjc2IDAtNS0yLjI0LTUtNXMyLjI0LTUgNS01IDUgMi4yNCA1IDUtMi4yNCA1LTUgNXpNMTIgOWMtMS42NTUgMC0zIDEuMzQ1LTMgM3MxLjM0NSAzIDMgMyAzLTEuMzQ1IDMtMy0xLjM0NS0zLTMtM3oiLz4KPC9zdmc+Cg=="); -} +} \ No newline at end of file diff --git a/scss/icons/_icons-primary.scss b/scss/icons/_icons-primary.scss index 486bd9bc7..273fea0d7 100644 --- a/scss/icons/_icons-primary.scss +++ b/scss/icons/_icons-primary.scss @@ -82,6 +82,14 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzAzNzRlNiIgZD0iTTExLjk5NSAyYy01LjUyNSAwLTkuOTk1IDQuNDc1LTkuOTk1IDEwczQuNDcgMTAgOS45OTUgMTBjNS41MjUgMCAxMC4wMDUtNC40NzUgMTAuMDA1LTEwcy00LjQ4LTEwLTEwLjAwNS0xMHpNMTIgMjBjLTQuNDIgMC04LTMuNTgtOC04czMuNTgtOCA4LTggOCAzLjU4IDggOC0zLjU4IDgtOCA4ek0xNS41IDExYzAuODMgMCAxLjUtMC42NyAxLjUtMS41cy0wLjY3LTEuNS0xLjUtMS41LTEuNSAwLjY3LTEuNSAxLjUgMC42NyAxLjUgMS41IDEuNXpNOC41IDExYzAuODMgMCAxLjUtMC42NyAxLjUtMS41cy0wLjY3LTEuNS0xLjUtMS41LTEuNSAwLjY3LTEuNSAxLjUgMC42NyAxLjUgMS41IDEuNXpNMTIgMTcuNWMyLjMzIDAgNC4zMDUtMS40NTUgNS4xMDUtMy41aC0xMC4yMWMwLjggMi4wNDUgMi43NzUgMy41IDUuMTA1IDMuNXoiLz4KPC9zdmc+Cg=="); } +%icon-primary-expand-less { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgOGwtNiA2IDEuNDEgMS40MUwxMiAxMC44M2w0LjU5IDQuNThMMTggMTR6IiBmaWxsPSIjMDM3NGU2Ii8+PC9zdmc+"); +} + +%icon-primary-expand-more { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIgZmlsbD0iIzAzNzRlNiIvPjwvc3ZnPg=="); +} + %icon-primary-external-link { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTlINVY1aDdWM0g1Yy0xLjExIDAtMiAuOS0yIDJ2MTRjMCAxLjEuODkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJ2LTdoLTJ2N3pNMTQgM3YyaDMuNTlsLTkuODMgOS44MyAxLjQxIDEuNDFMMTkgNi40MVYxMGgyVjNoLTd6IiBmaWxsPSIjMDM3NGU2Ii8+PC9zdmc+"); } @@ -146,6 +154,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTExLjggMTAuOWMtMi4yNy0wLjU5LTMtMS4xOTUtMy0yLjE0NSAwLTEuMDkwIDEuMDA1LTEuODU1IDIuNy0xLjg1NSAxLjc4IDAgMi40NCAwLjg1IDIuNSAyLjFoMi4yMWMtMC4wNjUtMS43MjUtMS4xMi0zLjI5NS0zLjIxLTMuODF2LTIuMTloLTN2Mi4xNmMtMS45NCAwLjQyNS0zLjUgMS42NzUtMy41IDMuNjEgMCAyLjMxIDEuOTE1IDMuNDYgNC43IDQuMTMgMi41MDUgMC42IDMgMS40NzUgMyAyLjQxNSAwIDAuNjg1LTAuNDg1IDEuNzg1LTIuNyAxLjc4NS0yLjA2MCAwLTIuODc1LTAuOTI1LTIuOTgtMi4xaC0yLjIwNWMwLjEyNSAyLjE5IDEuNzYgMy40MTUgMy42ODUgMy44M3YyLjE3aDN2LTIuMTVjMS45NDUtMC4zNzUgMy41LTEuNSAzLjUtMy41NTUgMC0yLjgzLTIuNDMtMy44LTQuNy00LjM5NXoiIGZpbGw9IiMwMzc0ZTYiLz4KPC9zdmc+Cg=="); } +%icon-primary-news { + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+QXJ0Ym9hcmQ8L3RpdGxlPjxwYXRoIGQ9Ik0yMSA2VjNIMHYxNi41YzAgLjgyOC42NzIgMS41IDEuNSAxLjVoMjAuMjVjMS4yNDMgMCAyLjI1LTEuMDA3IDIuMjUtMi4yNVY2aC0zem0tMS41IDEzLjVoLTE4di0xNWgxOHYxNXpNMyA3LjVoMTVWOUgzVjcuNXptOSAzaDZWMTJoLTZ2LTEuNXptMCAzaDZWMTVoLTZ2LTEuNXptMCAzaDQuNVYxOEgxMnYtMS41em0tOS02aDcuNVYxOEgzdi03LjV6IiBmaWxsPSIjMDM3NGU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K"); +} + %icon-primary-noentry { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTEyIDJjLTUuNTI1IDAtMTAgNC40NzUtMTAgMTBzNC40NzUgMTAgMTAgMTAgMTAtNC40NzUgMTAtMTAtNC40NzUtMTAtMTAtMTB6TTQgMTJjMC00LjQyIDMuNTgtOCA4LTggMS44NSAwIDMuNTQ1IDAuNjM1IDQuOSAxLjY4NWwtMTEuMjE1IDExLjIxNWMtMS4wNTAtMS4zNTUtMS42ODUtMy4wNTAtMS42ODUtNC45ek0xMiAyMGMtMS44NSAwLTMuNTQ1LTAuNjM1LTQuOS0xLjY4NWwxMS4yMTUtMTEuMjE1YzEuMDUwIDEuMzU1IDEuNjg1IDMuMDUwIDEuNjg1IDQuOSAwIDQuNDItMy41OCA4LTggOHoiIGZpbGw9IiMwMzc0ZTYiLz4KPC9zdmc+Cg=="); } @@ -158,6 +170,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzAzNzRlNiIgZD0iTTExLjUgMjJjMS4xMDUgMCAyLTAuODk1IDItMmgtNGMwIDEuMTA1IDAuODk1IDIgMiAyek0xOCAxNnYtNS41YzAtMy4wNzUtMi4xMzUtNS42NC01LTYuMzJ2LTAuNjhjMC0wLjgzLTAuNjctMS41LTEuNS0xLjVzLTEuNSAwLjY3LTEuNSAxLjV2MC42OGMtMi44NjUgMC42OC01IDMuMjQ1LTUgNi4zMnY1LjVsLTIgMnYxaDE3di0xbC0yLTJ6Ii8+Cjwvc3ZnPgo="); } +%icon-primary-office { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgN1YzSDJ2MThoMjBWN0gxMnpNNiAxOUg0di0yaDJ2MnptMC00SDR2LTJoMnYyem0wLTRINFY5aDJ2MnptMC00SDRWNWgydjJ6bTQgMTJIOHYtMmgydjJ6bTAtNEg4di0yaDJ2MnptMC00SDhWOWgydjJ6bTAtNEg4VjVoMnYyem0xMCAxMmgtOHYtMmgydi0yaC0ydi0yaDJ2LTJoLTJWOWg4djEwem0tMi04aC0ydjJoMnYtMnptMCA0aC0ydjJoMnYtMnoiIGZpbGw9IiMwMzc0ZTYiLz48L3N2Zz4="); +} + %icon-primary-people { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzAzNzRlNiIgZD0iTTE2IDExYzEuNjU1IDAgMi45OS0xLjM0NSAyLjk5LTNzLTEuMzM1LTMtMi45OS0zYy0xLjY1NSAwLTMgMS4zNDUtMyAzczEuMzQ1IDMgMyAzek04IDExYzEuNjU1IDAgMi45OS0xLjM0NSAyLjk5LTNzLTEuMzM1LTMtMi45OS0zYy0xLjY1NSAwLTMgMS4zNDUtMyAzczEuMzQ1IDMgMyAzek04IDEzYy0yLjMzNSAwLTcgMS4xNy03IDMuNXYyLjVoMTR2LTIuNWMwLTIuMzMtNC42NjUtMy41LTctMy41ek0xNiAxM2MtMC4yOSAwLTAuNjE1IDAuMDIwLTAuOTY1IDAuMDU1IDEuMTYgMC44MzUgMS45NjUgMS45NiAxLjk2NSAzLjQ0NXYyLjVoNnYtMi41YzAtMi4zMy00LjY2NS0zLjUtNy0zLjV6Ii8+Cjwvc3ZnPgo="); } @@ -232,4 +248,4 @@ %icon-primary-visibility { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzAzNzRlNiIgZD0iTTEyIDQuNWMtNSAwLTkuMjcgMy4xMS0xMSA3LjUgMS43MyA0LjM5IDYgNy41IDExIDcuNSA1LjAwNSAwIDkuMjctMy4xMSAxMS03LjUtMS43My00LjM5LTUuOTk1LTcuNS0xMS03LjV6TTEyIDE3Yy0yLjc2IDAtNS0yLjI0LTUtNXMyLjI0LTUgNS01IDUgMi4yNCA1IDUtMi4yNCA1LTUgNXpNMTIgOWMtMS42NTUgMC0zIDEuMzQ1LTMgM3MxLjM0NSAzIDMgMyAzLTEuMzQ1IDMtMy0xLjM0NS0zLTMtM3oiLz4KPC9zdmc+Cg=="); -} +} \ No newline at end of file From a64839d398ee7d15ff969014b362e09dd8fff66c Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Wed, 23 Nov 2016 19:32:56 +0000 Subject: [PATCH 03/14] =?UTF-8?q?=E2=9C=A8=20Add=20new=20icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `add` - `remove` Close #128 --- icons/ui/src/add.colors-light-dark.svg | 1 + icons/ui/src/remove.colors-light-dark.svg | 1 + scss/icons/_icons-dark.scss | 8 ++++++++ scss/icons/_icons-light.scss | 8 ++++++++ scss/icons/_icons-primary.scss | 8 ++++++++ 5 files changed, 26 insertions(+) create mode 100644 icons/ui/src/add.colors-light-dark.svg create mode 100644 icons/ui/src/remove.colors-light-dark.svg diff --git a/icons/ui/src/add.colors-light-dark.svg b/icons/ui/src/add.colors-light-dark.svg new file mode 100644 index 000000000..58f73e962 --- /dev/null +++ b/icons/ui/src/add.colors-light-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/ui/src/remove.colors-light-dark.svg b/icons/ui/src/remove.colors-light-dark.svg new file mode 100644 index 000000000..9128833ae --- /dev/null +++ b/icons/ui/src/remove.colors-light-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scss/icons/_icons-dark.scss b/scss/icons/_icons-dark.scss index a4c7aaf1e..c90390b14 100644 --- a/scss/icons/_icons-dark.scss +++ b/scss/icons/_icons-dark.scss @@ -10,6 +10,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTEyIDJjLTUuNTI1IDAtMTAgNC40NzUtMTAgMTBzNC40NzUgMTAgMTAgMTAgMTAtNC40NzUgMTAtMTAtNC40NzUtMTAtMTAtMTB6TTE3IDEzaC00djRoLTJ2LTRoLTR2LTJoNHYtNGgydjRoNHYyeiIgZmlsbD0iIzIzMjMyMyIvPgo8L3N2Zz4K"); } +%icon-dark-add { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTNoLTZ2NmgtMnYtNkg1di0yaDZWNWgydjZoNnYyeiIgZmlsbD0iIzIzMjMyMyIvPjwvc3ZnPg=="); +} + %icon-dark-announcement { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTIwIDJoLTE2Yy0xLjEwNSAwLTEuOTkgMC44OTUtMS45OSAybC0wLjAxMCAxOCA0LTRoMTRjMS4xMDUgMCAyLTAuODk1IDItMnYtMTJjMC0xLjEwNS0wLjg5NS0yLTItMnpNMTMgMTFoLTJ2LTZoMnY2ek0xMyAxNWgtMnYtMmgydjJ6IiBmaWxsPSIjMjMyMzIzIi8+Cjwvc3ZnPgo="); } @@ -202,6 +206,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTE5IDhsLTQgNGgzYzAgMy4zMTUtMi42ODUgNi02IDYtMS4wMTUgMC0xLjk2NS0wLjI1NS0yLjgwNS0wLjY5NWwtMS40NiAxLjQ2YzEuMjQgMC43NzUgMi42OTUgMS4yMzUgNC4yNjUgMS4yMzUgNC40MiAwIDgtMy41OCA4LThoM2wtNC00ek02IDEyYzAtMy4zMTUgMi42ODUtNiA2LTYgMS4wMTUgMCAxLjk2NSAwLjI1NSAyLjgwNSAwLjY5NWwxLjQ2LTEuNDZjLTEuMjQtMC43NzUtMi42OTUtMS4yMzUtNC4yNjUtMS4yMzUtNC40MiAwLTggMy41OC04IDhoLTNsNCA0IDQtNGgtM3oiIGZpbGw9IiMyMzIzMjMiLz4KPC9zdmc+Cg=="); } +%icon-dark-remove { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTNINXYtMmgxNHYyeiIgZmlsbD0iIzIzMjMyMyIvPjwvc3ZnPg=="); +} + %icon-dark-search { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzIzMjMyMyIgZD0iTTE1LjUgMTRoLTAuNzk1bC0wLjI3NS0wLjI3NWMwLjk4LTEuMTM1IDEuNTctMi42MSAxLjU3LTQuMjI1IDAtMy41OS0yLjkxLTYuNS02LjUtNi41cy02LjUgMi45MS02LjUgNi41IDIuOTEgNi41IDYuNSA2LjVjMS42MTUgMCAzLjA5MC0wLjU5IDQuMjI1LTEuNTY1bDAuMjc1IDAuMjc1djAuNzlsNSA0Ljk5IDEuNDktMS40OS00Ljk5LTV6TTkuNSAxNGMtMi40ODUgMC00LjUtMi4wMTUtNC41LTQuNXMyLjAxNS00LjUgNC41LTQuNSA0LjUgMi4wMTUgNC41IDQuNS0yLjAxNSA0LjUtNC41IDQuNXoiLz4KPC9zdmc+Cg=="); } diff --git a/scss/icons/_icons-light.scss b/scss/icons/_icons-light.scss index 675269e06..229cc2cbd 100644 --- a/scss/icons/_icons-light.scss +++ b/scss/icons/_icons-light.scss @@ -10,6 +10,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTEyIDJjLTUuNTI1IDAtMTAgNC40NzUtMTAgMTBzNC40NzUgMTAgMTAgMTAgMTAtNC40NzUgMTAtMTAtNC40NzUtMTAtMTAtMTB6TTE3IDEzaC00djRoLTJ2LTRoLTR2LTJoNHYtNGgydjRoNHYyeiIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4K"); } +%icon-light-add { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTNoLTZ2NmgtMnYtNkg1di0yaDZWNWgydjZoNnYyeiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg=="); +} + %icon-light-announcement { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTIwIDJoLTE2Yy0xLjEwNSAwLTEuOTkgMC44OTUtMS45OSAybC0wLjAxMCAxOCA0LTRoMTRjMS4xMDUgMCAyLTAuODk1IDItMnYtMTJjMC0xLjEwNS0wLjg5NS0yLTItMnpNMTMgMTFoLTJ2LTZoMnY2ek0xMyAxNWgtMnYtMmgydjJ6IiBmaWxsPSIjZmZmZmZmIi8+Cjwvc3ZnPgo="); } @@ -202,6 +206,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTE5IDhsLTQgNGgzYzAgMy4zMTUtMi42ODUgNi02IDYtMS4wMTUgMC0xLjk2NS0wLjI1NS0yLjgwNS0wLjY5NWwtMS40NiAxLjQ2YzEuMjQgMC43NzUgMi42OTUgMS4yMzUgNC4yNjUgMS4yMzUgNC40MiAwIDgtMy41OCA4LThoM2wtNC00ek02IDEyYzAtMy4zMTUgMi42ODUtNiA2LTYgMS4wMTUgMCAxLjk2NSAwLjI1NSAyLjgwNSAwLjY5NWwxLjQ2LTEuNDZjLTEuMjQtMC43NzUtMi42OTUtMS4yMzUtNC4yNjUtMS4yMzUtNC40MiAwLTggMy41OC04IDhoLTNsNCA0IDQtNGgtM3oiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg=="); } +%icon-light-remove { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTNINXYtMmgxNHYyeiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg=="); +} + %icon-light-search { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTE1LjUgMTRoLTAuNzk1bC0wLjI3NS0wLjI3NWMwLjk4LTEuMTM1IDEuNTctMi42MSAxLjU3LTQuMjI1IDAtMy41OS0yLjkxLTYuNS02LjUtNi41cy02LjUgMi45MS02LjUgNi41IDIuOTEgNi41IDYuNSA2LjVjMS42MTUgMCAzLjA5MC0wLjU5IDQuMjI1LTEuNTY1bDAuMjc1IDAuMjc1djAuNzlsNSA0Ljk5IDEuNDktMS40OS00Ljk5LTV6TTkuNSAxNGMtMi40ODUgMC00LjUtMi4wMTUtNC41LTQuNXMyLjAxNS00LjUgNC41LTQuNSA0LjUgMi4wMTUgNC41IDQuNS0yLjAxNSA0LjUtNC41IDQuNXoiLz4KPC9zdmc+Cg=="); } diff --git a/scss/icons/_icons-primary.scss b/scss/icons/_icons-primary.scss index 273fea0d7..14b8cb5ea 100644 --- a/scss/icons/_icons-primary.scss +++ b/scss/icons/_icons-primary.scss @@ -10,6 +10,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTEyIDJjLTUuNTI1IDAtMTAgNC40NzUtMTAgMTBzNC40NzUgMTAgMTAgMTAgMTAtNC40NzUgMTAtMTAtNC40NzUtMTAtMTAtMTB6TTE3IDEzaC00djRoLTJ2LTRoLTR2LTJoNHYtNGgydjRoNHYyeiIgZmlsbD0iIzAzNzRlNiIvPgo8L3N2Zz4K"); } +%icon-primary-add { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTNoLTZ2NmgtMnYtNkg1di0yaDZWNWgydjZoNnYyeiIgZmlsbD0iIzAzNzRlNiIvPjwvc3ZnPg=="); +} + %icon-primary-announcement { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTIwIDJoLTE2Yy0xLjEwNSAwLTEuOTkgMC44OTUtMS45OSAybC0wLjAxMCAxOCA0LTRoMTRjMS4xMDUgMCAyLTAuODk1IDItMnYtMTJjMC0xLjEwNS0wLjg5NS0yLTItMnpNMTMgMTFoLTJ2LTZoMnY2ek0xMyAxNWgtMnYtMmgydjJ6IiBmaWxsPSIjMDM3NGU2Ii8+Cjwvc3ZnPgo="); } @@ -202,6 +206,10 @@ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTE5IDhsLTQgNGgzYzAgMy4zMTUtMi42ODUgNi02IDYtMS4wMTUgMC0xLjk2NS0wLjI1NS0yLjgwNS0wLjY5NWwtMS40NiAxLjQ2YzEuMjQgMC43NzUgMi42OTUgMS4yMzUgNC4yNjUgMS4yMzUgNC40MiAwIDgtMy41OCA4LThoM2wtNC00ek02IDEyYzAtMy4zMTUgMi42ODUtNiA2LTYgMS4wMTUgMCAxLjk2NSAwLjI1NSAyLjgwNSAwLjY5NWwxLjQ2LTEuNDZjLTEuMjQtMC43NzUtMi42OTUtMS4yMzUtNC4yNjUtMS4yMzUtNC40MiAwLTggMy41OC04IDhoLTNsNCA0IDQtNGgtM3oiIGZpbGw9IiMwMzc0ZTYiLz4KPC9zdmc+Cg=="); } +%icon-primary-remove { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTNINXYtMmgxNHYyeiIgZmlsbD0iIzAzNzRlNiIvPjwvc3ZnPg=="); +} + %icon-primary-search { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzAzNzRlNiIgZD0iTTE1LjUgMTRoLTAuNzk1bC0wLjI3NS0wLjI3NWMwLjk4LTEuMTM1IDEuNTctMi42MSAxLjU3LTQuMjI1IDAtMy41OS0yLjkxLTYuNS02LjUtNi41cy02LjUgMi45MS02LjUgNi41IDIuOTEgNi41IDYuNSA2LjVjMS42MTUgMCAzLjA5MC0wLjU5IDQuMjI1LTEuNTY1bDAuMjc1IDAuMjc1djAuNzlsNSA0Ljk5IDEuNDktMS40OS00Ljk5LTV6TTkuNSAxNGMtMi40ODUgMC00LjUtMi4wMTUtNC41LTQuNXMyLjAxNS00LjUgNC41LTQuNSA0LjUgMi4wMTUgNC41IDQuNS0yLjAxNSA0LjUtNC41IDQuNXoiLz4KPC9zdmc+Cg=="); } From 43ebf545c9d08a82479afe6b3a6f0d19c2682d8f Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Wed, 23 Nov 2016 19:39:11 +0000 Subject: [PATCH 04/14] =?UTF-8?q?=F0=9F=94=A7=20Update=20Bower=20manifest?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bower.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/bower.json b/bower.json index 168d1d08e..432369de3 100644 --- a/bower.json +++ b/bower.json @@ -5,10 +5,7 @@ "James Home (http://jrah.github.io)" ], "description": "WFP UI", - "main": [ - "scss/wfpui.scss", - "scss/wfpui+grid.scss" - ], + "main": "scss/core.scss", "keywords": [ "ui", "interface", From 4e6feaa1afd27c9ffe53c42dbd3b96c8fe825ad1 Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Wed, 23 Nov 2016 19:49:03 +0000 Subject: [PATCH 05/14] =?UTF-8?q?=F0=9F=90=9B=20Fix=20broken=20`transition?= =?UTF-8?q?`=20implementation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/components/_buttons.scss | 4 +++- scss/components/navigation/_flyout.scss | 4 ++-- scss/layouts/_header.scss | 16 ++++++++-------- scss/modules/_mixins.scss | 21 --------------------- 4 files changed, 13 insertions(+), 32 deletions(-) diff --git a/scss/components/_buttons.scss b/scss/components/_buttons.scss index d3823ee56..87c939b0d 100644 --- a/scss/components/_buttons.scss +++ b/scss/components/_buttons.scss @@ -7,7 +7,9 @@ $color-facebook: #3b5998; $color-gplus: #dc4e41; @mixin button($type: default, $color: $grey-dark) { - @include transition(0.1s border ease-in-out, 0.1s background ease-in-out, 0.1s color ease-in-out); + transition: 0.1s border ease-in-out, + 0.1s background ease-in-out, + 0.1s color ease-in-out; display: inline-block; padding: 0.5rem 1rem; font-family: inherit; diff --git a/scss/components/navigation/_flyout.scss b/scss/components/navigation/_flyout.scss index dbe03a3e7..1bcdba019 100644 --- a/scss/components/navigation/_flyout.scss +++ b/scss/components/navigation/_flyout.scss @@ -68,12 +68,12 @@ } &.closed { - @include transition(transform, 0.25s, 0s, cubic-bezier(0.4, 0, 1, 1)); + transition: transform 0.25s 0s cubic-bezier(0.4, 0, 1, 1); transform: translate3d(320px, 0, 0); } &.opened { - @include transition(transform, 0.25s, 0s, cubic-bezier(0.15, 1.23, 0.84, 1.04)); + transition: transform 0.25s 0s cubic-bezier(0.15, 1.23, 0.84, 1.04); transform: translate3d(0, 0, 0); } } diff --git a/scss/layouts/_header.scss b/scss/layouts/_header.scss index a2a6df38d..0c9f986ae 100644 --- a/scss/layouts/_header.scss +++ b/scss/layouts/_header.scss @@ -199,10 +199,10 @@ line-height: 1; &.closed { - @include transition-property(transform, opacity, visibility, z-index); - @include transition-duration(0.2s, 0.2s, 0s, 0s); - @include transition-delay(0s, 0s, 0.2s, 0.2s); - @include transition-timing-function(cubic-bezier(0.4, 0, 1, 1)); + transition: transform 0.25s 0s cubic-bezier(0.4, 0, 1, 1), + opacity 0.25s 0s cubic-bezier(0.4, 0, 1, 1), + visibility 0 0.2s cubic-bezier(0.4, 0, 1, 1), + z-index 0 0.2s cubic-bezier(0.4, 0, 1, 1); z-index: 0; visibility: hidden; opacity: 0; @@ -219,10 +219,10 @@ } &.opened { - @include transition-property(transform, opacity, visibility, z-index); - @include transition-duration(0.25s, 0.25s, 0s, 0s); - @include transition-delay(0s, 0s, 0s, 0.25s); - @include transition-timing-function(cubic-bezier(0.15, 1.23, 0.84, 1.04)); + transition: transform 0.25s 0s cubic-bezier(0.15, 1.23, 0.84, 1.04), + opacity 0.25s 0s cubic-bezier(0.15, 1.23, 0.84, 1.04), + visibility 0 0s cubic-bezier(0.15, 1.23, 0.84, 1.04), + z-index 0 0.25s cubic-bezier(0.15, 1.23, 0.84, 1.04); z-index: 5; visibility: visible; opacity: 1; diff --git a/scss/modules/_mixins.scss b/scss/modules/_mixins.scss index 99fa7027e..7127c852a 100644 --- a/scss/modules/_mixins.scss +++ b/scss/modules/_mixins.scss @@ -6,24 +6,3 @@ @content; } } - -// Transition Mixins -@mixin transition-property($property...) { - transition-property: $property; -} - -@mixin transition-duration($duration...) { - transition-duration: $duration; -} - -@mixin transition-delay($delay...) { - transition-delay: $delay; -} - -@mixin transition-timing-function($timing...) { - transition-timing-function: $timing; -} - -@mixin transition($properties...) { - transition: $properties; -} From 2a135b2d31ff0d50fd4ce5c8c39cf4c591f37cf3 Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Mon, 12 Dec 2016 18:05:58 +0000 Subject: [PATCH 06/14] =?UTF-8?q?=F0=9F=92=84=20Improve=20display=20of=20b?= =?UTF-8?q?uttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/components/_buttons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/components/_buttons.scss b/scss/components/_buttons.scss index 87c939b0d..8a6b7ba2f 100644 --- a/scss/components/_buttons.scss +++ b/scss/components/_buttons.scss @@ -135,11 +135,11 @@ $color-gplus: #dc4e41; } @else if $type == negative { color: $white; - background-color: desaturate(darken($red, 15%), 40%); + background-color: darken($red, 5%); &:hover, &:active { - background-color: desaturate(darken($red, 20%), 40%); + background-color: darken($red, 10%); } } @else if $type == warning { color: darken($orange, 50%); From 6b281b655ca4ecc0328e42aa801526f3c1f89571 Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Mon, 12 Dec 2016 18:06:38 +0000 Subject: [PATCH 07/14] =?UTF-8?q?=F0=9F=92=84=20Improve=20display=20of=20h?= =?UTF-8?q?eader=20and=20header=20menus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ref: #130 --- scss/components/navigation/_menu.scss | 3 +- scss/layouts/_header.scss | 43 ++++++++++++++++++++++----- 2 files changed, 36 insertions(+), 10 deletions(-) diff --git a/scss/components/navigation/_menu.scss b/scss/components/navigation/_menu.scss index 793697961..0d860fd6f 100644 --- a/scss/components/navigation/_menu.scss +++ b/scss/components/navigation/_menu.scss @@ -29,9 +29,8 @@ } @mixin menu--link { - @include lh-body; @include padding(0 0.75rem); - // @include height(1.5rem); + line-height: 1.450; display: block; color: darken($primary, 12%); border-bottom-color: transparent; diff --git a/scss/layouts/_header.scss b/scss/layouts/_header.scss index 0c9f986ae..a7a71fd5f 100644 --- a/scss/layouts/_header.scss +++ b/scss/layouts/_header.scss @@ -14,7 +14,8 @@ overflow: auto; } -// DEV: OBSOLETE +// NOTE: OBSOLETE DECLARATION +// FIXME: Remove once ready for v1.0.0 .wfp-header-spacer--narrow { overflow: auto; padding-top: 3.875rem; @@ -197,6 +198,7 @@ width: 100%; margin: 0; line-height: 1; + box-shadow: rgba($black, 0.2) 0 1px 8px; &.closed { transition: transform 0.25s 0s cubic-bezier(0.4, 0, 1, 1), @@ -236,14 +238,14 @@ .menu--group { @include nolist; text-align: initial; - background-color: $grey-darker; + background-color: $white; } .menu--item { display: block; padding: 0; margin: 0; - border-bottom: 1px solid lighten($grey-darker, 5%); + // border-bottom: 1px solid $grey-lighter; &:last-child { border-bottom: 0; @@ -252,17 +254,40 @@ .menu--link { display: block; - border-bottom-color: transparent; - color: $grey-light; - padding: 0.5rem 1rem; + background-color: darken($primary, 12%); + border-bottom-color: darken($primary, 12%); + color: $white; + font-weight: bold; + padding: 1rem; line-height: 1.2; + + &:not(:only-child)::after { + @extend %icon-light-arrow-drop-down; + display: inline-block; + height: 1.5rem; + width: 1.5rem; + content: ""; + vertical-align: bottom; + margin-top: -0.125rem; + float: right; + + @include media-query($lg-screen) { + content: none; + display: none; + } + } + + @include media-query($lg-screen) { + background-color: transparent; + border-bottom-color: transparent; + } } @include media-query($lg-screen) { @include menu-flat; - // @include mh(0); @include margin(0.33rem 0); background-color: transparent; + box-shadow: none; position: static; width: auto; @@ -282,6 +307,8 @@ .menu--link { padding: 0; + margin: 0 0.25rem; + font-weight: normal; &:active, &.active { @@ -405,7 +432,7 @@ // } @include media-query($lg-screen) { - margin: 1.33rem 1rem; + margin: 1.25rem 1rem; top: auto; // &.closed { From 3e3cf9764b5c92f124f36f331b9bd43b9be0942b Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Sat, 17 Dec 2016 16:30:49 +0000 Subject: [PATCH 08/14] =?UTF-8?q?=F0=9F=92=84=20Add=20new=20predefined=20t?= =?UTF-8?q?ext=20colour:=20`$red`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/css/_theme.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/css/_theme.scss b/scss/css/_theme.scss index 57d945235..459f8ab25 100644 --- a/scss/css/_theme.scss +++ b/scss/css/_theme.scss @@ -8,6 +8,7 @@ .c-light { @include color--light; } .c-dark { @include color--dark; } .c-primary { @include color--primary; } +.c-alert { color: $red; } // ---------------------------------------------------------------------------- // Background Colours From 212e6126cbb72af2d2f8ca9f22a8df8c2857bc2d Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Sat, 17 Dec 2016 16:33:06 +0000 Subject: [PATCH 09/14] =?UTF-8?q?=F0=9F=92=84=20Improve=20`header`=20visua?= =?UTF-8?q?ls?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add `submenu` component (#130); - Update `example.html` with a new header (#130); --- docs/example.html | 197 +++++++++++++++++++---- scss/components/navigation/_submenu.scss | 85 ++++++++++ scss/layouts/_header.scss | 2 +- scss/wfpui+grid.scss | 1 + scss/wfpui.scss | 1 + 5 files changed, 254 insertions(+), 32 deletions(-) create mode 100644 scss/components/navigation/_submenu.scss diff --git a/docs/example.html b/docs/example.html index 97b1efdbb..571447c7b 100644 --- a/docs/example.html +++ b/docs/example.html @@ -24,40 +24,140 @@ } - - -
-
-
-

+ + +
+
+
@@ -574,7 +674,7 @@

Via Cesare Giulio Viola 68-70, 00148 Rome, Italy

- --> + + diff --git a/scss/components/navigation/_submenu.scss b/scss/components/navigation/_submenu.scss new file mode 100644 index 000000000..535ecbee2 --- /dev/null +++ b/scss/components/navigation/_submenu.scss @@ -0,0 +1,85 @@ +.menu--submenu { + max-height: 60vh; + overflow-y: auto; + color: $text-color; + background-color: $white; + -webkit-overflow-scrolling: touch; + + @include media-query($lg-screen) { + max-height: 75vh; + position: absolute; + + top: 4rem; + box-shadow: rgba($black, 0.3) 0 1px 8px; + padding: 1.5rem 0.5rem; + } + + .submenu--wrap { + &:not(:first-child) { + border-top: 2px solid $blue-light; + } + + @include media-query($lg-screen) { + border-right: 2px solid $primary; + + &:nth-child(n) { + border-top: 0; + } + + &:last-child { + border-right: 0; + } + } + } + + .submenu--group { + margin: 0; + } + + .submenu--title { + padding: 1rem; + text-transform: uppercase; + background-color: $grey-lighter; + + @include media-query($lg-screen) { + padding: 0.25rem 1rem; + background-color: transparent; + } + } + + .group--item { + margin: 0.25rem 1rem; + + &:last-child { + .group--link { + border-bottom: 0; + } + } + } + + .group--link { + padding: 0.5rem 0; + display: block; + border-bottom: 1px solid $grey-lighter; + line-height: 1.33; + color: $grey-darker; + font-size: 0.875rem; + + &:hover { + color: darken($primary, 12%); + } + + @include media-query($lg-screen) { + border-bottom: 0; + padding: 0.25rem 0; + } + } +} + +.wfp-header-ext { + .menu--submenu { + @include media-query($lg-screen) { + top: 6rem; + } + } +} diff --git a/scss/layouts/_header.scss b/scss/layouts/_header.scss index a7a71fd5f..c142d78a5 100644 --- a/scss/layouts/_header.scss +++ b/scss/layouts/_header.scss @@ -232,6 +232,7 @@ @include media-query($lg-screen) { transition: unset; + transform: none; } } @@ -432,7 +433,6 @@ // } @include media-query($lg-screen) { - margin: 1.25rem 1rem; top: auto; // &.closed { diff --git a/scss/wfpui+grid.scss b/scss/wfpui+grid.scss index d09496caf..a5c51be0b 100644 --- a/scss/wfpui+grid.scss +++ b/scss/wfpui+grid.scss @@ -14,6 +14,7 @@ @import "components/forms"; @import "components/tables"; @import "components/navigation/menu"; +@import "components/navigation/submenu"; @import "components/navigation/flyout"; @import "components/navigation/segmented-control"; @import "components/navigation/breadcrumbs"; diff --git a/scss/wfpui.scss b/scss/wfpui.scss index 08dd517a3..efdde5b09 100644 --- a/scss/wfpui.scss +++ b/scss/wfpui.scss @@ -12,6 +12,7 @@ @import "components/forms"; @import "components/tables"; @import "components/navigation/menu"; +@import "components/navigation/submenu"; @import "components/navigation/flyout"; @import "components/navigation/segmented-control"; @import "components/navigation/breadcrumbs"; From 8335e85334c1d52c3089fb9a22d6ae2c29a5b7f4 Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Sat, 17 Dec 2016 20:03:21 +0000 Subject: [PATCH 10/14] =?UTF-8?q?=F0=9F=8E=89=20Add=20`Subnav`=20class?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/subnav.js | 178 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 js/subnav.js diff --git a/js/subnav.js b/js/subnav.js new file mode 100644 index 000000000..6e330429c --- /dev/null +++ b/js/subnav.js @@ -0,0 +1,178 @@ +/*! + * WFP.org Subnavigation Handler + * Copyright 2016 WFP/MADBIT Co. + */ + +/* global forEach */ + +/** + * Subnavigation Object + * @constructor + * @public + * @class + * @param {Element} element - element to attach this Object into + * @param {Object} nav - initialised responsiveNav Object + * @requires wfp-ui/js/lib/responsive-nav.js + * @requires wfp-ui/js/tools.js + */ +var Subnav = function (element, nav) { + 'use strict'; + var owner = this; + // $md-screen + owner.lgScreen = window.matchMedia('(min-width: 1024px)'); + // Submenu containers + owner.containers = element.querySelectorAll('.menu--item'); + // Group all event handlers + owner._eventHandlers = {}; + // Standard global timer + owner._timer = 0; + // Reference responsiveNav Object + owner._nav = nav; + + if (typeof element === 'string') { + owner.element = document.querySelector(element); + } + else { + owner.element = ((typeof element.length !== 'undefined') && element.length > 0) ? element[0] : element; + } + + if (!owner.element) { + throw new Error('[subnav.js] Please check if the element is correct'); + } + + owner.init(); +}; + +Subnav.prototype = { + + /** + * @constructs Subnav + */ + init: function () { + 'use strict'; + var owner = this; + + // Rebuild bindings when going through intended breakpoint + owner.lgScreen.addListener(function (MQListEvent) { + owner._nav.close(); + owner.processEventBindings(); + }); + + // Initialise bindings + owner.processEventBindings(); + }, + + /** + * Adds a new eventHandler and keeps track of its origin. + * @param {Element} node - node reference + * @param {String} event - event type + * @param {Function} handler - your event callback/handler + * @param {Boolean} capture - capture the event + */ + addNewListener: function (node, event, handler, capture) { + 'use strict'; + var owner = this; + if (!(node in owner._eventHandlers)) { + // _eventHandlers stores references to nodes + owner._eventHandlers[node] = {}; + } + if (!(event in owner._eventHandlers[node])) { + // each entry contains another entry for each event type + owner._eventHandlers[node][event] = []; + } + // capture reference + owner._eventHandlers[node][event].push([handler, capture]); + node.addEventListener(event, handler, capture); + }, + + /** + * Removes all eventHandlers for a particular node and event in a collection. + * @param {Element} node - node reference + * @param {String} event - event type + */ + removeAllListeners: function (node, event) { + 'use strict'; + var owner = this; + if (node in owner._eventHandlers) { + var handlers = owner._eventHandlers[node]; + if (event in handlers) { + var eventHandlers = handlers[event]; + for (var i = eventHandlers.length; i--;) { + var handler = eventHandlers[i]; + node.removeEventListener(event, handler[0], handler[1]); + } + } + } + }, + + /** + * Loops through and hides all found submenus + * @param {Element} currentItem - a single submenu to ignore + */ + hideSubmenu: function (currentItem) { + 'use strict'; + var owner = this; + + forEach(owner.containers, function (key, el) { + var submenu = el.querySelector('.menu--submenu'); + if (currentItem) { + if (submenu && submenu !== currentItem && !submenu.classList.contains('dn')) { + submenu.classList.add('dn'); + } + } + else if (submenu) { + submenu.classList.add('dn'); + } + }); + }, + + /** + * Process all required event bindings + */ + processEventBindings: function () { + 'use strict'; + var owner = this; + forEach(owner.containers, function (key, el) { + var activator = el.querySelector('.menu--link'); + var submenu = el.querySelector('.menu--submenu'); + + if (submenu) { + if (owner.lgScreen.matches) { + owner.removeAllListeners(activator, 'click'); + owner.addNewListener(activator, 'mouseenter', function (event) { + clearTimeout(owner._timer); + owner.hideSubmenu(submenu); + submenu.classList.remove('dn'); + }); + + owner.addNewListener(activator, 'mouseleave', function (event) { + owner._timer = setTimeout(function () { + owner.hideSubmenu(); + }, 750); + }); + + owner.addNewListener(submenu, 'mouseenter', function (event) { + clearTimeout(owner._timer); + }); + + owner.addNewListener(submenu, 'mouseleave', function (event) { + owner._timer = setTimeout(function () { + owner.hideSubmenu(); + }, 750); + }); + } + else { + owner.removeAllListeners(activator, 'mouseenter'); + owner.removeAllListeners(activator, 'mouseleave'); + owner.removeAllListeners(submenu, 'mouseenter'); + owner.removeAllListeners(submenu, 'mouseleave'); + owner.addNewListener(activator, 'click', function (event) { + owner.hideSubmenu(submenu); + submenu.classList.toggle('dn'); + event.preventDefault(); + }); + } + } + }); + } +}; From c17feb10d3720766d7c6e8b97b157f0c6a1fde49 Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Sat, 17 Dec 2016 20:03:37 +0000 Subject: [PATCH 11/14] =?UTF-8?q?=F0=9F=8E=89=20Add=20JS=20tools?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/tools.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 js/tools.js diff --git a/js/tools.js b/js/tools.js new file mode 100644 index 000000000..c76cf1b77 --- /dev/null +++ b/js/tools.js @@ -0,0 +1,33 @@ +/*! + * WFP.org Tools + * Copyright 2016 WFP/MADBIT Co. + */ + +/** + * forEach polyfil + * @param {Array} array - an array of elements to process + * @param {Function} callback - evaluation callback + * @param {thisArg} scope - callback scope + */ +var forEach = function (array, callback, scope) { + 'use strict'; + for (var i = 0; i < array.length; i++) { + callback.call(scope, i, array[i]); + } +}; + +/** + * Utility method for binding events programmatically + * @param {Element} element - and element to bind event to + * @param {String} type - event type + * @param {Function} handler - callback function for the event + */ +var bindEvent = function (element, type, handler) { + 'use strict'; + if (element.addEventListener) { + element.addEventListener(type, handler, false); + } + else { + element.attachEvent('on' + type, handler); + } +}; From c499655a8eae81e2e320bd08962fb39427634f90 Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Sat, 17 Dec 2016 21:42:17 +0000 Subject: [PATCH 12/14] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20`header--ext`?= =?UTF-8?q?=20navigation=20system?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The main navigation is now improved and can handle submenus, as indicated in the `example.html` source code. Fixes #130 --- docs/_layouts/default.html | 2 +- docs/component-0-header.md | 46 +- docs/example.html | 266 +++++++---- docs/js/responsive-nav.js | 591 ++++++++++++++++++++++++ docs/js/{lib => }/responsive-nav.min.js | 0 docs/js/subnav.js | 158 +++++++ docs/js/tools.js | 31 ++ gruntfile.js | 32 +- 8 files changed, 993 insertions(+), 133 deletions(-) create mode 100644 docs/js/responsive-nav.js rename docs/js/{lib => }/responsive-nav.min.js (100%) create mode 100644 docs/js/subnav.js create mode 100644 docs/js/tools.js diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index eff1ceba2..0e30eff52 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -18,7 +18,7 @@ {% include footer.html %} - + diff --git a/docs/component-0-header.md b/docs/component-0-header.md index 500f8539e..673be7d33 100644 --- a/docs/component-0-header.md +++ b/docs/component-0-header.md @@ -25,23 +25,20 @@ If the vertical space is limited (i.e.: on smaller viewports), you can substitut ###### Preview
-