diff --git a/CHANGELOG.md b/CHANGELOG.md index abf5476..de7f6dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +### 1.6.6 +**2017-10-30** +* Added black button to core colors. + ### 1.6.5 **2017-10-13** * Updated select menu items to Vimeo blue. diff --git a/VERSION b/VERSION index 9f05f9f..ec70f75 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.6.5 +1.6.6 diff --git a/app/public/app.js b/app/public/app.js index e90d7a0..fb4afc4 100644 --- a/app/public/app.js +++ b/app/public/app.js @@ -206,7 +206,8 @@ Q.components.guide.styleguide.ui.buttons.container = { m('button.btn-gray.margin-right-small.margin-bottom-small', 'Gray'), m('button.btn-teal.margin-right-small.margin-bottom-small', 'Teal'), m('button.btn-white.margin-right-small.margin-bottom-small', 'White'), - m('button.btn-red.margin-right-small.margin-bottom-small', 'Red') + m('button.btn-red.margin-right-small.margin-bottom-small', 'Red'), + m('button.btn-vimeo-alt.margin-right-small.margin-bottom-small', 'Alt'), ]); } } @@ -3360,4 +3361,4 @@ m.route.mode = 'pathname'; m.route(document.getElementById('quartz'), '/', { '/:type/:guide': Q.layouts.standard.ui.container -}); \ No newline at end of file +}); diff --git a/app/public/quartz.css b/app/public/quartz.css index 335ce08..cb8c3b1 100644 --- a/app/public/quartz.css +++ b/app/public/quartz.css @@ -581,7 +581,7 @@ select { /* base ......................................*/ -.btn, .btn-gray, .btn-dropdown-gray, .btn-slate, .btn-teal, .btn-dropdown-teal, .btn-red, .btn-purple, .btn-green, .btn-black, .btn-white, .btn-dropdown-white, .btn-yellow, .btn-facebook, .btn-twitter, .btn-transparent, .btn-tumblr, .btn-paypal, .btn-roku, .btn-search, .btn-vimeo-blue, .btn-dropdown-vimeo-blue, .btn-vimeo-secondary, .btn-dropdown-vimeo-secondary, .btn-vimeo-secondary-outline, .btn-dropdown-vimeo-secondary-outline, .btn-vimeo-black, .btn-vimeo-red, .btn-dropdown { +.btn, .btn-gray, .btn-dropdown-gray, .btn-slate, .btn-teal, .btn-dropdown-teal, .btn-red, .btn-purple, .btn-green, .btn-black, .btn-white, .btn-dropdown-white, .btn-yellow, .btn-facebook, .btn-twitter, .btn-transparent, .btn-tumblr, .btn-paypal, .btn-roku, .btn-search, .btn-vimeo-blue, .btn-dropdown-vimeo-blue, .btn-vimeo-secondary, .btn-dropdown-vimeo-secondary, .btn-vimeo-secondary-outline, .btn-dropdown-vimeo-secondary-outline, .btn-vimeo-alt, .btn-vimeo-black, .btn-vimeo-red, .btn-dropdown { transition: border 300ms cubic-bezier(0.19, 1, 0.22, 1), color 300ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms cubic-bezier(0.19, 1, 0.22, 1), background-color 300ms cubic-bezier(0.19, 1, 0.22, 1); background-color: transparent; border: 1px solid transparent; @@ -598,29 +598,29 @@ select { padding: 0 20px; outline: none; border-radius: 5px; } - .btn:link, .btn-gray:link, .btn-dropdown-gray:link, .btn-slate:link, .btn-teal:link, .btn-dropdown-teal:link, .btn-red:link, .btn-purple:link, .btn-green:link, .btn-black:link, .btn-white:link, .btn-dropdown-white:link, .btn-yellow:link, .btn-facebook:link, .btn-twitter:link, .btn-transparent:link, .btn-tumblr:link, .btn-paypal:link, .btn-roku:link, .btn-search:link, .btn-vimeo-blue:link, .btn-dropdown-vimeo-blue:link, .btn-vimeo-secondary:link, .btn-dropdown-vimeo-secondary:link, .btn-vimeo-secondary-outline:link, .btn-dropdown-vimeo-secondary-outline:link, .btn-vimeo-black:link, .btn-vimeo-red:link, .btn-dropdown:link, .btn:visited, .btn-gray:visited, .btn-dropdown-gray:visited, .btn-slate:visited, .btn-teal:visited, .btn-dropdown-teal:visited, .btn-red:visited, .btn-purple:visited, .btn-green:visited, .btn-black:visited, .btn-white:visited, .btn-dropdown-white:visited, .btn-yellow:visited, .btn-facebook:visited, .btn-twitter:visited, .btn-transparent:visited, .btn-tumblr:visited, .btn-paypal:visited, .btn-roku:visited, .btn-search:visited, .btn-vimeo-blue:visited, .btn-dropdown-vimeo-blue:visited, .btn-vimeo-secondary:visited, .btn-dropdown-vimeo-secondary:visited, .btn-vimeo-secondary-outline:visited, .btn-dropdown-vimeo-secondary-outline:visited, .btn-vimeo-black:visited, .btn-vimeo-red:visited, .btn-dropdown:visited { + .btn:link, .btn-gray:link, .btn-dropdown-gray:link, .btn-slate:link, .btn-teal:link, .btn-dropdown-teal:link, .btn-red:link, .btn-purple:link, .btn-green:link, .btn-black:link, .btn-white:link, .btn-dropdown-white:link, .btn-yellow:link, .btn-facebook:link, .btn-twitter:link, .btn-transparent:link, .btn-tumblr:link, .btn-paypal:link, .btn-roku:link, .btn-search:link, .btn-vimeo-blue:link, .btn-dropdown-vimeo-blue:link, .btn-vimeo-secondary:link, .btn-dropdown-vimeo-secondary:link, .btn-vimeo-secondary-outline:link, .btn-dropdown-vimeo-secondary-outline:link, .btn-vimeo-alt:link, .btn-vimeo-black:link, .btn-vimeo-red:link, .btn-dropdown:link, .btn:visited, .btn-gray:visited, .btn-dropdown-gray:visited, .btn-slate:visited, .btn-teal:visited, .btn-dropdown-teal:visited, .btn-red:visited, .btn-purple:visited, .btn-green:visited, .btn-black:visited, .btn-white:visited, .btn-dropdown-white:visited, .btn-yellow:visited, .btn-facebook:visited, .btn-twitter:visited, .btn-transparent:visited, .btn-tumblr:visited, .btn-paypal:visited, .btn-roku:visited, .btn-search:visited, .btn-vimeo-blue:visited, .btn-dropdown-vimeo-blue:visited, .btn-vimeo-secondary:visited, .btn-dropdown-vimeo-secondary:visited, .btn-vimeo-secondary-outline:visited, .btn-dropdown-vimeo-secondary-outline:visited, .btn-vimeo-alt:visited, .btn-vimeo-black:visited, .btn-vimeo-red:visited, .btn-dropdown:visited { text-decoration: none; border: 1px solid transparent; } - .btn.icon--left, .icon--left.btn-gray, .icon--left.btn-dropdown-gray, .icon--left.btn-slate, .icon--left.btn-teal, .icon--left.btn-dropdown-teal, .icon--left.btn-red, .icon--left.btn-purple, .icon--left.btn-green, .icon--left.btn-black, .icon--left.btn-white, .icon--left.btn-dropdown-white, .icon--left.btn-yellow, .icon--left.btn-facebook, .icon--left.btn-twitter, .icon--left.btn-transparent, .icon--left.btn-tumblr, .icon--left.btn-paypal, .icon--left.btn-roku, .icon--left.btn-search, .icon--left.btn-vimeo-blue, .icon--left.btn-dropdown-vimeo-blue, .icon--left.btn-vimeo-secondary, .icon--left.btn-dropdown-vimeo-secondary, .icon--left.btn-vimeo-secondary-outline, .icon--left.btn-dropdown-vimeo-secondary-outline, .icon--left.btn-vimeo-black, .icon--left.btn-vimeo-red, .icon--left.btn-dropdown { + .btn.icon--left, .icon--left.btn-gray, .icon--left.btn-dropdown-gray, .icon--left.btn-slate, .icon--left.btn-teal, .icon--left.btn-dropdown-teal, .icon--left.btn-red, .icon--left.btn-purple, .icon--left.btn-green, .icon--left.btn-black, .icon--left.btn-white, .icon--left.btn-dropdown-white, .icon--left.btn-yellow, .icon--left.btn-facebook, .icon--left.btn-twitter, .icon--left.btn-transparent, .icon--left.btn-tumblr, .icon--left.btn-paypal, .icon--left.btn-roku, .icon--left.btn-search, .icon--left.btn-vimeo-blue, .icon--left.btn-dropdown-vimeo-blue, .icon--left.btn-vimeo-secondary, .icon--left.btn-dropdown-vimeo-secondary, .icon--left.btn-vimeo-secondary-outline, .icon--left.btn-dropdown-vimeo-secondary-outline, .icon--left.btn-vimeo-alt, .icon--left.btn-vimeo-black, .icon--left.btn-vimeo-red, .icon--left.btn-dropdown { background-position: left 21px center; padding-left: 43px; } - .btn.icon--left.icon--xsmall, .icon--left.icon--xsmall.btn-gray, .icon--left.icon--xsmall.btn-dropdown-gray, .icon--left.icon--xsmall.btn-slate, .icon--left.icon--xsmall.btn-teal, .icon--left.icon--xsmall.btn-dropdown-teal, .icon--left.icon--xsmall.btn-red, .icon--left.icon--xsmall.btn-purple, .icon--left.icon--xsmall.btn-green, .icon--left.icon--xsmall.btn-black, .icon--left.icon--xsmall.btn-white, .icon--left.icon--xsmall.btn-dropdown-white, .icon--left.icon--xsmall.btn-yellow, .icon--left.icon--xsmall.btn-facebook, .icon--left.icon--xsmall.btn-twitter, .icon--left.icon--xsmall.btn-transparent, .icon--left.icon--xsmall.btn-tumblr, .icon--left.icon--xsmall.btn-paypal, .icon--left.icon--xsmall.btn-roku, .icon--left.icon--xsmall.btn-search, .icon--left.icon--xsmall.btn-vimeo-blue, .icon--left.icon--xsmall.btn-dropdown-vimeo-blue, .icon--left.icon--xsmall.btn-vimeo-secondary, .icon--left.icon--xsmall.btn-dropdown-vimeo-secondary, .icon--left.icon--xsmall.btn-vimeo-secondary-outline, .icon--left.icon--xsmall.btn-dropdown-vimeo-secondary-outline, .icon--left.icon--xsmall.btn-vimeo-black, .icon--left.icon--xsmall.btn-vimeo-red, .icon--left.icon--xsmall.btn-dropdown { + .btn.icon--left.icon--xsmall, .icon--left.icon--xsmall.btn-gray, .icon--left.icon--xsmall.btn-dropdown-gray, .icon--left.icon--xsmall.btn-slate, .icon--left.icon--xsmall.btn-teal, .icon--left.icon--xsmall.btn-dropdown-teal, .icon--left.icon--xsmall.btn-red, .icon--left.icon--xsmall.btn-purple, .icon--left.icon--xsmall.btn-green, .icon--left.icon--xsmall.btn-black, .icon--left.icon--xsmall.btn-white, .icon--left.icon--xsmall.btn-dropdown-white, .icon--left.icon--xsmall.btn-yellow, .icon--left.icon--xsmall.btn-facebook, .icon--left.icon--xsmall.btn-twitter, .icon--left.icon--xsmall.btn-transparent, .icon--left.icon--xsmall.btn-tumblr, .icon--left.icon--xsmall.btn-paypal, .icon--left.icon--xsmall.btn-roku, .icon--left.icon--xsmall.btn-search, .icon--left.icon--xsmall.btn-vimeo-blue, .icon--left.icon--xsmall.btn-dropdown-vimeo-blue, .icon--left.icon--xsmall.btn-vimeo-secondary, .icon--left.icon--xsmall.btn-dropdown-vimeo-secondary, .icon--left.icon--xsmall.btn-vimeo-secondary-outline, .icon--left.icon--xsmall.btn-dropdown-vimeo-secondary-outline, .icon--left.icon--xsmall.btn-vimeo-alt, .icon--left.icon--xsmall.btn-vimeo-black, .icon--left.icon--xsmall.btn-vimeo-red, .icon--left.icon--xsmall.btn-dropdown { background-position: left 16px center; padding-left: 40px; } - .btn.icon--left.icon--xxsmall, .icon--left.icon--xxsmall.btn-gray, .icon--left.icon--xxsmall.btn-dropdown-gray, .icon--left.icon--xxsmall.btn-slate, .icon--left.icon--xxsmall.btn-teal, .icon--left.icon--xxsmall.btn-dropdown-teal, .icon--left.icon--xxsmall.btn-red, .icon--left.icon--xxsmall.btn-purple, .icon--left.icon--xxsmall.btn-green, .icon--left.icon--xxsmall.btn-black, .icon--left.icon--xxsmall.btn-white, .icon--left.icon--xxsmall.btn-dropdown-white, .icon--left.icon--xxsmall.btn-yellow, .icon--left.icon--xxsmall.btn-facebook, .icon--left.icon--xxsmall.btn-twitter, .icon--left.icon--xxsmall.btn-transparent, .icon--left.icon--xxsmall.btn-tumblr, .icon--left.icon--xxsmall.btn-paypal, .icon--left.icon--xxsmall.btn-roku, .icon--left.icon--xxsmall.btn-search, .icon--left.icon--xxsmall.btn-vimeo-blue, .icon--left.icon--xxsmall.btn-dropdown-vimeo-blue, .icon--left.icon--xxsmall.btn-vimeo-secondary, .icon--left.icon--xxsmall.btn-dropdown-vimeo-secondary, .icon--left.icon--xxsmall.btn-vimeo-secondary-outline, .icon--left.icon--xxsmall.btn-dropdown-vimeo-secondary-outline, .icon--left.icon--xxsmall.btn-vimeo-black, .icon--left.icon--xxsmall.btn-vimeo-red, .icon--left.icon--xxsmall.btn-dropdown { + .btn.icon--left.icon--xxsmall, .icon--left.icon--xxsmall.btn-gray, .icon--left.icon--xxsmall.btn-dropdown-gray, .icon--left.icon--xxsmall.btn-slate, .icon--left.icon--xxsmall.btn-teal, .icon--left.icon--xxsmall.btn-dropdown-teal, .icon--left.icon--xxsmall.btn-red, .icon--left.icon--xxsmall.btn-purple, .icon--left.icon--xxsmall.btn-green, .icon--left.icon--xxsmall.btn-black, .icon--left.icon--xxsmall.btn-white, .icon--left.icon--xxsmall.btn-dropdown-white, .icon--left.icon--xxsmall.btn-yellow, .icon--left.icon--xxsmall.btn-facebook, .icon--left.icon--xxsmall.btn-twitter, .icon--left.icon--xxsmall.btn-transparent, .icon--left.icon--xxsmall.btn-tumblr, .icon--left.icon--xxsmall.btn-paypal, .icon--left.icon--xxsmall.btn-roku, .icon--left.icon--xxsmall.btn-search, .icon--left.icon--xxsmall.btn-vimeo-blue, .icon--left.icon--xxsmall.btn-dropdown-vimeo-blue, .icon--left.icon--xxsmall.btn-vimeo-secondary, .icon--left.icon--xxsmall.btn-dropdown-vimeo-secondary, .icon--left.icon--xxsmall.btn-vimeo-secondary-outline, .icon--left.icon--xxsmall.btn-dropdown-vimeo-secondary-outline, .icon--left.icon--xxsmall.btn-vimeo-alt, .icon--left.icon--xxsmall.btn-vimeo-black, .icon--left.icon--xxsmall.btn-vimeo-red, .icon--left.icon--xxsmall.btn-dropdown { background-position: left 18px center; padding-left: 37px; } - .btn.icon--left .icon--right, .icon--left.btn-gray .icon--right, .icon--left.btn-dropdown-gray .icon--right, .icon--left.btn-slate .icon--right, .icon--left.btn-teal .icon--right, .icon--left.btn-dropdown-teal .icon--right, .icon--left.btn-red .icon--right, .icon--left.btn-purple .icon--right, .icon--left.btn-green .icon--right, .icon--left.btn-black .icon--right, .icon--left.btn-white .icon--right, .icon--left.btn-dropdown-white .icon--right, .icon--left.btn-yellow .icon--right, .icon--left.btn-facebook .icon--right, .icon--left.btn-twitter .icon--right, .icon--left.btn-transparent .icon--right, .icon--left.btn-tumblr .icon--right, .icon--left.btn-paypal .icon--right, .icon--left.btn-roku .icon--right, .icon--left.btn-search .icon--right, .icon--left.btn-vimeo-blue .icon--right, .icon--left.btn-dropdown-vimeo-blue .icon--right, .icon--left.btn-vimeo-secondary .icon--right, .icon--left.btn-dropdown-vimeo-secondary .icon--right, .icon--left.btn-vimeo-secondary-outline .icon--right, .icon--left.btn-dropdown-vimeo-secondary-outline .icon--right, .icon--left.btn-vimeo-black .icon--right, .icon--left.btn-vimeo-red .icon--right, .icon--left.btn-dropdown .icon--right { + .btn.icon--left .icon--right, .icon--left.btn-gray .icon--right, .icon--left.btn-dropdown-gray .icon--right, .icon--left.btn-slate .icon--right, .icon--left.btn-teal .icon--right, .icon--left.btn-dropdown-teal .icon--right, .icon--left.btn-red .icon--right, .icon--left.btn-purple .icon--right, .icon--left.btn-green .icon--right, .icon--left.btn-black .icon--right, .icon--left.btn-white .icon--right, .icon--left.btn-dropdown-white .icon--right, .icon--left.btn-yellow .icon--right, .icon--left.btn-facebook .icon--right, .icon--left.btn-twitter .icon--right, .icon--left.btn-transparent .icon--right, .icon--left.btn-tumblr .icon--right, .icon--left.btn-paypal .icon--right, .icon--left.btn-roku .icon--right, .icon--left.btn-search .icon--right, .icon--left.btn-vimeo-blue .icon--right, .icon--left.btn-dropdown-vimeo-blue .icon--right, .icon--left.btn-vimeo-secondary .icon--right, .icon--left.btn-dropdown-vimeo-secondary .icon--right, .icon--left.btn-vimeo-secondary-outline .icon--right, .icon--left.btn-dropdown-vimeo-secondary-outline .icon--right, .icon--left.btn-vimeo-alt .icon--right, .icon--left.btn-vimeo-black .icon--right, .icon--left.btn-vimeo-red .icon--right, .icon--left.btn-dropdown .icon--right { background-position: right 0px center; padding-right: 21px; background-size: 15px 15px; } - .btn.icon--right, .icon--right.btn-gray, .icon--right.btn-dropdown-gray, .icon--right.btn-slate, .icon--right.btn-teal, .icon--right.btn-dropdown-teal, .icon--right.btn-red, .icon--right.btn-purple, .icon--right.btn-green, .icon--right.btn-black, .icon--right.btn-white, .icon--right.btn-dropdown-white, .icon--right.btn-yellow, .icon--right.btn-facebook, .icon--right.btn-twitter, .icon--right.btn-transparent, .icon--right.btn-tumblr, .icon--right.btn-paypal, .icon--right.btn-roku, .icon--right.btn-search, .icon--right.btn-vimeo-blue, .icon--right.btn-dropdown-vimeo-blue, .icon--right.btn-vimeo-secondary, .icon--right.btn-dropdown-vimeo-secondary, .icon--right.btn-vimeo-secondary-outline, .icon--right.btn-dropdown-vimeo-secondary-outline, .icon--right.btn-vimeo-black, .icon--right.btn-vimeo-red, .icon--right.btn-dropdown { + .btn.icon--right, .icon--right.btn-gray, .icon--right.btn-dropdown-gray, .icon--right.btn-slate, .icon--right.btn-teal, .icon--right.btn-dropdown-teal, .icon--right.btn-red, .icon--right.btn-purple, .icon--right.btn-green, .icon--right.btn-black, .icon--right.btn-white, .icon--right.btn-dropdown-white, .icon--right.btn-yellow, .icon--right.btn-facebook, .icon--right.btn-twitter, .icon--right.btn-transparent, .icon--right.btn-tumblr, .icon--right.btn-paypal, .icon--right.btn-roku, .icon--right.btn-search, .icon--right.btn-vimeo-blue, .icon--right.btn-dropdown-vimeo-blue, .icon--right.btn-vimeo-secondary, .icon--right.btn-dropdown-vimeo-secondary, .icon--right.btn-vimeo-secondary-outline, .icon--right.btn-dropdown-vimeo-secondary-outline, .icon--right.btn-vimeo-alt, .icon--right.btn-vimeo-black, .icon--right.btn-vimeo-red, .icon--right.btn-dropdown { background-position: right 21px center; padding-right: 43px; } - .btn.icon--right.icon--xsmall, .icon--right.icon--xsmall.btn-gray, .icon--right.icon--xsmall.btn-dropdown-gray, .icon--right.icon--xsmall.btn-slate, .icon--right.icon--xsmall.btn-teal, .icon--right.icon--xsmall.btn-dropdown-teal, .icon--right.icon--xsmall.btn-red, .icon--right.icon--xsmall.btn-purple, .icon--right.icon--xsmall.btn-green, .icon--right.icon--xsmall.btn-black, .icon--right.icon--xsmall.btn-white, .icon--right.icon--xsmall.btn-dropdown-white, .icon--right.icon--xsmall.btn-yellow, .icon--right.icon--xsmall.btn-facebook, .icon--right.icon--xsmall.btn-twitter, .icon--right.icon--xsmall.btn-transparent, .icon--right.icon--xsmall.btn-tumblr, .icon--right.icon--xsmall.btn-paypal, .icon--right.icon--xsmall.btn-roku, .icon--right.icon--xsmall.btn-search, .icon--right.icon--xsmall.btn-vimeo-blue, .icon--right.icon--xsmall.btn-dropdown-vimeo-blue, .icon--right.icon--xsmall.btn-vimeo-secondary, .icon--right.icon--xsmall.btn-dropdown-vimeo-secondary, .icon--right.icon--xsmall.btn-vimeo-secondary-outline, .icon--right.icon--xsmall.btn-dropdown-vimeo-secondary-outline, .icon--right.icon--xsmall.btn-vimeo-black, .icon--right.icon--xsmall.btn-vimeo-red, .icon--right.icon--xsmall.btn-dropdown { + .btn.icon--right.icon--xsmall, .icon--right.icon--xsmall.btn-gray, .icon--right.icon--xsmall.btn-dropdown-gray, .icon--right.icon--xsmall.btn-slate, .icon--right.icon--xsmall.btn-teal, .icon--right.icon--xsmall.btn-dropdown-teal, .icon--right.icon--xsmall.btn-red, .icon--right.icon--xsmall.btn-purple, .icon--right.icon--xsmall.btn-green, .icon--right.icon--xsmall.btn-black, .icon--right.icon--xsmall.btn-white, .icon--right.icon--xsmall.btn-dropdown-white, .icon--right.icon--xsmall.btn-yellow, .icon--right.icon--xsmall.btn-facebook, .icon--right.icon--xsmall.btn-twitter, .icon--right.icon--xsmall.btn-transparent, .icon--right.icon--xsmall.btn-tumblr, .icon--right.icon--xsmall.btn-paypal, .icon--right.icon--xsmall.btn-roku, .icon--right.icon--xsmall.btn-search, .icon--right.icon--xsmall.btn-vimeo-blue, .icon--right.icon--xsmall.btn-dropdown-vimeo-blue, .icon--right.icon--xsmall.btn-vimeo-secondary, .icon--right.icon--xsmall.btn-dropdown-vimeo-secondary, .icon--right.icon--xsmall.btn-vimeo-secondary-outline, .icon--right.icon--xsmall.btn-dropdown-vimeo-secondary-outline, .icon--right.icon--xsmall.btn-vimeo-alt, .icon--right.icon--xsmall.btn-vimeo-black, .icon--right.icon--xsmall.btn-vimeo-red, .icon--right.icon--xsmall.btn-dropdown { background-position: right 16px center; padding-left: 40px; } - .btn.icon--right.icon--xxsmall, .icon--right.icon--xxsmall.btn-gray, .icon--right.icon--xxsmall.btn-dropdown-gray, .icon--right.icon--xxsmall.btn-slate, .icon--right.icon--xxsmall.btn-teal, .icon--right.icon--xxsmall.btn-dropdown-teal, .icon--right.icon--xxsmall.btn-red, .icon--right.icon--xxsmall.btn-purple, .icon--right.icon--xxsmall.btn-green, .icon--right.icon--xxsmall.btn-black, .icon--right.icon--xxsmall.btn-white, .icon--right.icon--xxsmall.btn-dropdown-white, .icon--right.icon--xxsmall.btn-yellow, .icon--right.icon--xxsmall.btn-facebook, .icon--right.icon--xxsmall.btn-twitter, .icon--right.icon--xxsmall.btn-transparent, .icon--right.icon--xxsmall.btn-tumblr, .icon--right.icon--xxsmall.btn-paypal, .icon--right.icon--xxsmall.btn-roku, .icon--right.icon--xxsmall.btn-search, .icon--right.icon--xxsmall.btn-vimeo-blue, .icon--right.icon--xxsmall.btn-dropdown-vimeo-blue, .icon--right.icon--xxsmall.btn-vimeo-secondary, .icon--right.icon--xxsmall.btn-dropdown-vimeo-secondary, .icon--right.icon--xxsmall.btn-vimeo-secondary-outline, .icon--right.icon--xxsmall.btn-dropdown-vimeo-secondary-outline, .icon--right.icon--xxsmall.btn-vimeo-black, .icon--right.icon--xxsmall.btn-vimeo-red, .icon--right.icon--xxsmall.btn-dropdown { + .btn.icon--right.icon--xxsmall, .icon--right.icon--xxsmall.btn-gray, .icon--right.icon--xxsmall.btn-dropdown-gray, .icon--right.icon--xxsmall.btn-slate, .icon--right.icon--xxsmall.btn-teal, .icon--right.icon--xxsmall.btn-dropdown-teal, .icon--right.icon--xxsmall.btn-red, .icon--right.icon--xxsmall.btn-purple, .icon--right.icon--xxsmall.btn-green, .icon--right.icon--xxsmall.btn-black, .icon--right.icon--xxsmall.btn-white, .icon--right.icon--xxsmall.btn-dropdown-white, .icon--right.icon--xxsmall.btn-yellow, .icon--right.icon--xxsmall.btn-facebook, .icon--right.icon--xxsmall.btn-twitter, .icon--right.icon--xxsmall.btn-transparent, .icon--right.icon--xxsmall.btn-tumblr, .icon--right.icon--xxsmall.btn-paypal, .icon--right.icon--xxsmall.btn-roku, .icon--right.icon--xxsmall.btn-search, .icon--right.icon--xxsmall.btn-vimeo-blue, .icon--right.icon--xxsmall.btn-dropdown-vimeo-blue, .icon--right.icon--xxsmall.btn-vimeo-secondary, .icon--right.icon--xxsmall.btn-dropdown-vimeo-secondary, .icon--right.icon--xxsmall.btn-vimeo-secondary-outline, .icon--right.icon--xxsmall.btn-dropdown-vimeo-secondary-outline, .icon--right.icon--xxsmall.btn-vimeo-alt, .icon--right.icon--xxsmall.btn-vimeo-black, .icon--right.icon--xxsmall.btn-vimeo-red, .icon--right.icon--xxsmall.btn-dropdown { background-position: right 18px center; padding-left: 37px; } @@ -1450,6 +1450,50 @@ select { .btn-vimeo-secondary-outline.is-processing.btn--large, .is-processing.btn--large.btn-dropdown-vimeo-secondary-outline, .btn-vimeo-secondary-outline.processing.btn--large, .processing.btn--large.btn-dropdown-vimeo-secondary-outline, .btn-vimeo-secondary-outline.is-loading.btn--large, .is-loading.btn--large.btn-dropdown-vimeo-secondary-outline, .btn-vimeo-secondary-outline.loading.btn--large, .loading.btn--large.btn-dropdown-vimeo-secondary-outline { background-size: 45px 45px; } +.btn-vimeo-alt { + background-color: #3A5161; + color: #fff; + border: 1px solid #3A5161; + background-size: 15px 15px; } + .btn-vimeo-alt:link, .btn-vimeo-alt:visited { + color: #fff; + border: 1px solid #3A5161; } + .btn-vimeo-alt:hover, .btn-vimeo-alt.is-hover, .btn-vimeo-alt:focus:hover, .btn-vimeo-alt:focus.is-hover { + color: #fff; + cursor: pointer; + background-color: #1a2e3b; + border: 1px solid #1a2e3b; } + .btn-vimeo-alt:active, .btn-vimeo-alt.is-active, .btn-vimeo-alt:focus, .btn-vimeo-alt.is-focus { + color: #fff; + background-color: #3A5161; + border: 1px solid #3A5161; } + .btn-vimeo-alt.is-selected { + color: #fff; + cursor: pointer; + background-color: #1a2e3b; + border: 1px solid #1a2e3b; } + .btn-vimeo-alt[disabled], .btn-vimeo-alt.is-disabled { + opacity: .5; + background-color: #3A5161; + color: #fff; + border: 1px solid #3A5161; } + .btn-vimeo-alt[disabled]:visited, .btn-vimeo-alt[disabled]:hover, .btn-vimeo-alt[disabled].is-hover, .btn-vimeo-alt[disabled]:active, .btn-vimeo-alt[disabled].is-active, .btn-vimeo-alt.is-disabled:visited, .btn-vimeo-alt.is-disabled:hover, .btn-vimeo-alt.is-disabled.is-hover, .btn-vimeo-alt.is-disabled:active, .btn-vimeo-alt.is-disabled.is-active { + background-color: #3A5161; + color: #fff; + border: 1px solid #3A5161; } + .btn-vimeo-alt.is-processing, .btn-vimeo-alt.processing, .btn-vimeo-alt.is-loading, .btn-vimeo-alt.loading { + background-position: center center !important; + color: transparent !important; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%20%20viewBox%3D%220%200%2040%2040%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20opacity%3D%220.2%22%20fill%3D%22%23FFFFFF%22%20d%3D%22M20.201%2C5.169c-8.254%2C0-14.946%2C6.692-14.946%2C14.946c0%2C8.255%2C6.692%2C14.946%2C14.946%2C14.946%0D%0A%20%20s14.946-6.691%2C14.946-14.946C35.146%2C11.861%2C28.455%2C5.169%2C20.201%2C5.169z%20M20.201%2C31.749c-6.425%2C0-11.634-5.208-11.634-11.634%0D%0A%20%20c0-6.425%2C5.209-11.634%2C11.634-11.634c6.425%2C0%2C11.633%2C5.209%2C11.633%2C11.634C31.834%2C26.541%2C26.626%2C31.749%2C20.201%2C31.749z%22%2F%3E%0D%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M26.013%2C10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0%0D%0A%20%20C22.32%2C8.481%2C24.301%2C9.057%2C26.013%2C10.047z%22%3E%0D%0A%20%20%3CanimateTransform%20attributeType%3D%22xml%22%0D%0A%20%20%20%20attributeName%3D%22transform%22%0D%0A%20%20%20%20type%3D%22rotate%22%0D%0A%20%20%20%20from%3D%220%2020%2020%22%0D%0A%20%20%20%20to%3D%22360%2020%2020%22%0D%0A%20%20%20%20dur%3D%220.5s%22%0D%0A%20%20%20%20repeatCount%3D%22indefinite%22%2F%3E%0D%0A%20%20%3C%2Fpath%3E%0D%0A%3C%2Fsvg%3E"); + background-repeat: no-repeat; + background-size: 23px 23px; } + .btn-vimeo-alt.is-processing.btn--small, .btn-vimeo-alt.is-processing.btn-search, .btn-vimeo-alt.processing.btn--small, .btn-vimeo-alt.processing.btn-search, .btn-vimeo-alt.is-loading.btn--small, .btn-vimeo-alt.is-loading.btn-search, .btn-vimeo-alt.loading.btn--small, .btn-vimeo-alt.loading.btn-search { + background-size: 20px 20px; } + .btn-vimeo-alt.is-processing.btn--medium, .btn-vimeo-alt.processing.btn--medium, .btn-vimeo-alt.is-loading.btn--medium, .btn-vimeo-alt.loading.btn--medium { + background-size: 23px 23px; } + .btn-vimeo-alt.is-processing.btn--large, .btn-vimeo-alt.processing.btn--large, .btn-vimeo-alt.is-loading.btn--large, .btn-vimeo-alt.loading.btn--large { + background-size: 45px 45px; } + .btn-vimeo-black { background-color: rgba(26, 46, 59, 0.5); color: rgba(255, 255, 255, 0.8); @@ -3567,6 +3611,7 @@ hr.column { .form .inner-button .btn-dropdown-vimeo-secondary, .form .inner-button .btn-vimeo-secondary-outline, .form .inner-button .btn-dropdown-vimeo-secondary-outline, + .form .inner-button .btn-vimeo-alt, .form .inner-button .btn-vimeo-black, .form .inner-button .btn-vimeo-red, .form .inner-button .btn-dropdown { diff --git a/package.json b/package.json index 5906887..cc005ad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vhx/quartz", - "version": "1.6.5", + "version": "1.6.6", "description": "VHX Style Guide and JS Components.", "homepage": "https://github.com/vhx/quartz", "author": "VHX", diff --git a/quartz-css/buttons/styles/default.scss b/quartz-css/buttons/styles/default.scss index f200647..54799bd 100644 --- a/quartz-css/buttons/styles/default.scss +++ b/quartz-css/buttons/styles/default.scss @@ -354,6 +354,19 @@ select { ); } +.btn-vimeo-alt { + @extend .btn; + @include button-colors( + $vimeo-lt-black, // background + $astro-granite, // background hover + $white, // color + $white, // color hover + $vimeo-lt-black, // border color + $astro-granite, // border color hover + FFFFFF // loader + ); +} + .btn-vimeo-black { @extend .btn; @include button-colors( diff --git a/quartz-css/colors/config/_variables.scss b/quartz-css/colors/config/_variables.scss index d8e6116..fba4597 100644 --- a/quartz-css/colors/config/_variables.scss +++ b/quartz-css/colors/config/_variables.scss @@ -77,6 +77,9 @@ $vimeo-blue-darkened: #0088cc; $pistachio-darkened: #5a9e02; $sunset-orange-darkened: #d93636; +//specific colors +$vimeo-lt-black: #3A5161; + /* ..................................... Colors - External Palette ..................................... */