diff --git a/src/App.vue b/src/App.vue index 58844e4..4f36d64 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,14 @@ @@ -18,10 +26,5 @@ export default { diff --git a/src/components/TwitterButton.vue b/src/components/TwitterButton.vue index 4c5fe25..ea4509c 100644 --- a/src/components/TwitterButton.vue +++ b/src/components/TwitterButton.vue @@ -1,33 +1,61 @@ + diff --git a/src/components/icon/Icon.vue b/src/components/icon/Icon.vue new file mode 100644 index 0000000..f45273d --- /dev/null +++ b/src/components/icon/Icon.vue @@ -0,0 +1,23 @@ + + + diff --git a/src/helpers/createWindow.js b/src/helpers/createWindow.js new file mode 100644 index 0000000..64c002b --- /dev/null +++ b/src/helpers/createWindow.js @@ -0,0 +1,13 @@ +/** + * Create a sharing window. + * + * @param {number} width - Window width. + * @param {number} height - Window height. + * @param {string} params - Other window options. + * @returns {string} - Configuration string. + */ +export const createWindow = (width = 500, height = 500, params = "") => { + const left = screen.width / 2 - width / 2; + const top = screen.height / 2 - height / 2; + return `width=${width},height=${height},left=${left},top=${top},${params}`; +}; diff --git a/src/helpers/documentData.js b/src/helpers/documentData.js new file mode 100644 index 0000000..0741d4b --- /dev/null +++ b/src/helpers/documentData.js @@ -0,0 +1,11 @@ +/** + * Get href for page. + * + * @returns {string} - Page href. + */ +export const getDocumentHref = () => document.location.href; + +/** + * Get title for page. + */ +export const getDocumentTitle = () => document.title; diff --git a/src/helpers/href.js b/src/helpers/href.js deleted file mode 100644 index 77f03cd..0000000 --- a/src/helpers/href.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Get href for page. - * - * @returns {string} - page href. - */ -export const getDocumentHref = () => document.location.href; diff --git a/src/helpers/index.js b/src/helpers/index.js index cff06a6..cc6f81d 100644 --- a/src/helpers/index.js +++ b/src/helpers/index.js @@ -1,2 +1,3 @@ -export { getDocumentHref } from "./href.js"; +export { getDocumentHref, getDocumentTitle } from "./documentData.js"; export { eventEmit } from "./event"; +export { createWindow } from "./createWindow"; diff --git a/src/icons/facebook.svg b/src/icons/facebook.svg new file mode 100644 index 0000000..5b54d8e --- /dev/null +++ b/src/icons/facebook.svg @@ -0,0 +1 @@ +Facebook icon \ No newline at end of file diff --git a/src/icons/twitter-color.svg b/src/icons/twitter-color.svg new file mode 100644 index 0000000..317fd94 --- /dev/null +++ b/src/icons/twitter-color.svg @@ -0,0 +1 @@ +Twitter icon \ No newline at end of file diff --git a/src/icons/twitter.svg b/src/icons/twitter.svg new file mode 100644 index 0000000..d04eaa2 --- /dev/null +++ b/src/icons/twitter.svg @@ -0,0 +1 @@ +Twitter icon \ No newline at end of file diff --git a/src/style/index.css b/src/style/index.css new file mode 100644 index 0000000..0924daf --- /dev/null +++ b/src/style/index.css @@ -0,0 +1,79 @@ +/* Base */ +.button-social * { + box-sizing: border-box; +} + +.share-button { + display: inline-block; + min-height: 42px; + padding: 10px 12px; + margin: 4px; + color: #fff; + background-color: #fff; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; + font-weight: 400; + vertical-align: top; + user-select: none; + border: none; + border-radius: 4px; + box-shadow: none; + text-rendering: auto; + text-indent: 0px; + text-align: center; + letter-spacing: normal; + word-spacing: normal; + text-shadow: none; + transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, + border-color 0.3s ease-in-out; +} + +.share-button:disabled { + opacity: 0.9; +} + +.share-button:focus { + outline: none; +} + +.share-button:not(:disabled):not(.disabled) { + cursor: pointer; +} + +.share-button:last-child { + margin-right: 0; +} + +.share-button__icon { + display: inline-block; + margin: 0 7px; + padding: 0; + font-size: 0; + vertical-align: middle; +} + +.share-button__icon:last-child { + margin: 0; +} + +.share-button__text { + display: inline-block; + margin: 0 7px; + font-size: 16px; + vertical-align: middle; +} + +/* Circle */ +.share-button--circle { + min-width: 42px; + min-height: 42px; + padding: 10px; + border-radius: 42px; +} + +/* Circle */ +.share-button--outline { + background-color: transparent; + border: 1px solid; +} diff --git a/src/style/twitterButton.css b/src/style/twitterButton.css new file mode 100644 index 0000000..ec929b9 --- /dev/null +++ b/src/style/twitterButton.css @@ -0,0 +1,43 @@ +/* Twitter */ +.share-button--twitter { + background-color: hsla(203, 88%, 53%, 1); +} + +.share-button--twitter:focus { + box-shadow: 0 0 0 3px hsla(203, 82%, 78%, 0.4); +} + +.share-button--twitter:hover { + background-color: hsla(203, 89%, 53%, 0.9); +} + +.share-button--twitter .share-button__icon path { + fill: #fff; +} + +/* Circle */ +.share-button--twitter.share-button--outline { + background-color: transparent; + border-color: hsla(203, 89%, 53%, 1); +} + +.share-button--twitter.share-button--outline:hover { + background-color: transparent; + border-color: hsla(203, 89%, 53%, 0.9); +} + +.share-button--twitter.share-button--outline .share-button__text { + color: hsla(203, 89%, 53%, 1); +} + +.share-button--twitter.share-button--outline:hover .share-button__text { + color: hsla(203, 89%, 53%, 0.9); +} + +.share-button--twitter.share-button--outline .share-button__icon path { + fill: hsla(203, 89%, 53%, 1); +} + +.share-button--twitter.share-button--outline:hover .share-button__icon path { + fill: hsla(203, 89%, 53%, 0.9); +}