diff --git a/package.json b/package.json
index 7206f96..6ad08ab 100644
--- a/package.json
+++ b/package.json
@@ -53,20 +53,18 @@
},
"devDependencies": {
"@size-limit/preset-small-lib": "^8.2.6",
- "autoprefixer": "^10.4.14",
"clean-publish": "^4.2.0",
"eslint": "^8.45.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-unicorn": "^48.0.0",
"postcss": "^8.4.26",
- "postcss-calc": "^9.0.1",
- "postcss-css-variables": "^0.19.0",
- "postcss-csso": "^6.0.1",
+ "postcss-lightningcss": "^0.9.0",
"postcss-url": "^10.1.3",
"prettier": "^3.0.0",
"size-limit": "^8.2.6",
"vite": "^4.4.4"
},
+ "browserslist": "> 0.3%, last 2 versions, Firefox ESR, not dead, not op_mini all",
"prettier": {
"embeddedLanguageFormatting": "off"
},
@@ -101,10 +99,9 @@
"url": "inline",
"optimizeSvgEncode": true
},
- "postcss-css-variables": {},
- "postcss-calc": {},
- "autoprefixer": {},
- "postcss-csso": {}
+ "postcss-lightningcss": {
+ "browsers": "> 0.3%, last 2 versions, Firefox ESR, not dead, not op_mini all"
+ }
}
},
"size-limit": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e9a5257..0838126 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,6 @@ devDependencies:
'@size-limit/preset-small-lib':
specifier: ^8.2.6
version: 8.2.6(size-limit@8.2.6)
- autoprefixer:
- specifier: ^10.4.14
- version: 10.4.14(postcss@8.4.26)
clean-publish:
specifier: ^4.2.0
version: 4.2.0
@@ -26,15 +23,9 @@ devDependencies:
postcss:
specifier: ^8.4.26
version: 8.4.26
- postcss-calc:
- specifier: ^9.0.1
- version: 9.0.1(postcss@8.4.26)
- postcss-css-variables:
- specifier: ^0.19.0
- version: 0.19.0(postcss@8.4.26)
- postcss-csso:
- specifier: ^6.0.1
- version: 6.0.1(postcss@8.4.26)
+ postcss-lightningcss:
+ specifier: ^0.9.0
+ version: 0.9.0(postcss@8.4.26)
postcss-url:
specifier: ^10.1.3
version: 10.1.3(postcss@8.4.26)
@@ -446,22 +437,6 @@ packages:
engines: {node: '>=8'}
dev: true
- /autoprefixer@10.4.14(postcss@8.4.26):
- resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==}
- engines: {node: ^10 || ^12 || >=14}
- hasBin: true
- peerDependencies:
- postcss: ^8.1.0
- dependencies:
- browserslist: 4.21.5
- caniuse-lite: 1.0.30001516
- fraction.js: 4.2.0
- normalize-range: 0.1.2
- picocolors: 1.0.0
- postcss: 8.4.26
- postcss-value-parser: 4.2.0
- dev: true
-
/balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
dev: true
@@ -603,27 +578,6 @@ packages:
which: 2.0.2
dev: true
- /css-tree@2.2.1:
- resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
- engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
- dependencies:
- mdn-data: 2.0.28
- source-map-js: 1.0.2
- dev: true
-
- /cssesc@3.0.0:
- resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
- engines: {node: '>=4'}
- hasBin: true
- dev: true
-
- /csso@5.0.5:
- resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
- engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
- dependencies:
- css-tree: 2.2.1
- dev: true
-
/cuint@0.2.2:
resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==}
dev: true
@@ -644,6 +598,12 @@ packages:
resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
dev: true
+ /detect-libc@1.0.3:
+ resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+ engines: {node: '>=0.10'}
+ hasBin: true
+ dev: true
+
/dir-glob@3.0.1:
resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
engines: {node: '>=8'}
@@ -838,10 +798,6 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
- /extend@3.0.2:
- resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
- dev: true
-
/fast-deep-equal@3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
dev: true
@@ -913,10 +869,6 @@ packages:
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
dev: true
- /fraction.js@4.2.0:
- resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
- dev: true
-
/fs.realpath@1.0.0:
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
dev: true
@@ -1128,6 +1080,94 @@ packages:
type-check: 0.4.0
dev: true
+ /lightningcss-darwin-arm64@1.21.5:
+ resolution: {integrity: sha512-z05hyLX85WY0UfhkFUOrWEFqD69lpVAmgl3aDzMKlIZJGygbhbegqb4PV8qfUrKKNBauut/qVNPKZglhTaDDxA==}
+ engines: {node: '>= 12.0.0'}
+ cpu: [arm64]
+ os: [darwin]
+ requiresBuild: true
+ dev: true
+ optional: true
+
+ /lightningcss-darwin-x64@1.21.5:
+ resolution: {integrity: sha512-MSJhmej/U9MrdPxDk7+FWhO8+UqVoZUHG4VvKT5RQ4RJtqtANTiWiI97LvoVNMtdMnHaKs1Pkji6wHUFxjJsHQ==}
+ engines: {node: '>= 12.0.0'}
+ cpu: [x64]
+ os: [darwin]
+ requiresBuild: true
+ dev: true
+ optional: true
+
+ /lightningcss-linux-arm-gnueabihf@1.21.5:
+ resolution: {integrity: sha512-xN6+5/JsMrbZHL1lPl+MiNJ3Xza12ueBKPepiyDCFQzlhFRTj7D0LG+cfNTzPBTO8KcYQynLpl1iBB8LGp3Xtw==}
+ engines: {node: '>= 12.0.0'}
+ cpu: [arm]
+ os: [linux]
+ requiresBuild: true
+ dev: true
+ optional: true
+
+ /lightningcss-linux-arm64-gnu@1.21.5:
+ resolution: {integrity: sha512-KfzFNhC4XTbmG3ma/xcTs/IhCwieW89XALIusKmnV0N618ZDXEB0XjWOYQRCXeK9mfqPdbTBpurEHV/XZtkniQ==}
+ engines: {node: '>= 12.0.0'}
+ cpu: [arm64]
+ os: [linux]
+ requiresBuild: true
+ dev: true
+ optional: true
+
+ /lightningcss-linux-arm64-musl@1.21.5:
+ resolution: {integrity: sha512-bc0GytQO5Mn9QM6szaZ+31fQHNdidgpM1sSCwzPItz8hg3wOvKl8039rU0veMJV3ZgC9z0ypNRceLrSHeRHmXw==}
+ engines: {node: '>= 12.0.0'}
+ cpu: [arm64]
+ os: [linux]
+ requiresBuild: true
+ dev: true
+ optional: true
+
+ /lightningcss-linux-x64-gnu@1.21.5:
+ resolution: {integrity: sha512-JwMbgypPQgc2kW2av3OwzZ8cbrEuIiDiXPJdXRE6aVxu67yHauJawQLqJKTGUhiAhy6iLDG8Wg0a3/ziL+m+Kw==}
+ engines: {node: '>= 12.0.0'}
+ cpu: [x64]
+ os: [linux]
+ requiresBuild: true
+ dev: true
+ optional: true
+
+ /lightningcss-linux-x64-musl@1.21.5:
+ resolution: {integrity: sha512-Ib8b6IQ/OR/VrPU6YBgy4T3QnuHY7DUa95O+nz+cwrTkMSN6fuHcTcIaz4t8TJ6HI5pl3uxUOZjmtls2pyQWow==}
+ engines: {node: '>= 12.0.0'}
+ cpu: [x64]
+ os: [linux]
+ requiresBuild: true
+ dev: true
+ optional: true
+
+ /lightningcss-win32-x64-msvc@1.21.5:
+ resolution: {integrity: sha512-A8cSi8lUpBeVmoF+DqqW7cd0FemDbCuKr490IXdjyeI+KL8adpSKUs8tcqO0OXPh1EoDqK7JNkD/dELmd4Iz5g==}
+ engines: {node: '>= 12.0.0'}
+ cpu: [x64]
+ os: [win32]
+ requiresBuild: true
+ dev: true
+ optional: true
+
+ /lightningcss@1.21.5:
+ resolution: {integrity: sha512-/pEUPeih2EwIx9n4T82aOG6CInN83tl/mWlw6B5gWLf36UplQi1L+5p3FUHsdt4fXVfOkkh9KIaM3owoq7ss8A==}
+ engines: {node: '>= 12.0.0'}
+ dependencies:
+ detect-libc: 1.0.3
+ optionalDependencies:
+ lightningcss-darwin-arm64: 1.21.5
+ lightningcss-darwin-x64: 1.21.5
+ lightningcss-linux-arm-gnueabihf: 1.21.5
+ lightningcss-linux-arm64-gnu: 1.21.5
+ lightningcss-linux-arm64-musl: 1.21.5
+ lightningcss-linux-x64-gnu: 1.21.5
+ lightningcss-linux-x64-musl: 1.21.5
+ lightningcss-win32-x64-msvc: 1.21.5
+ dev: true
+
/lilconfig@2.1.0:
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
engines: {node: '>=10'}
@@ -1173,10 +1213,6 @@ packages:
semver: 6.3.1
dev: true
- /mdn-data@2.0.28:
- resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
- dev: true
-
/merge2@1.4.1:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
engines: {node: '>= 8'}
@@ -1251,11 +1287,6 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
- /normalize-range@0.1.2:
- resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
- engines: {node: '>=0.10.0'}
- dev: true
-
/once@1.4.0:
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
dependencies:
@@ -1362,46 +1393,17 @@ packages:
engines: {node: '>=4'}
dev: true
- /postcss-calc@9.0.1(postcss@8.4.26):
- resolution: {integrity: sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==}
- engines: {node: ^14 || ^16 || >=18.0}
- peerDependencies:
- postcss: ^8.2.2
- dependencies:
- postcss: 8.4.26
- postcss-selector-parser: 6.0.13
- postcss-value-parser: 4.2.0
- dev: true
-
- /postcss-css-variables@0.19.0(postcss@8.4.26):
- resolution: {integrity: sha512-Hr0WEYKLK9VCrY15anHXOd4RCvJy/xRvCnWdplGBeLInwEj6Z14hgzTb2W/39dYTCnS8hnHUfU4/F1zxX0IZuQ==}
- peerDependencies:
- postcss: ^8.2.6
- dependencies:
- balanced-match: 1.0.2
- escape-string-regexp: 1.0.5
- extend: 3.0.2
- postcss: 8.4.26
- dev: true
-
- /postcss-csso@6.0.1(postcss@8.4.26):
- resolution: {integrity: sha512-ZV4yEziMrx6CEiqabGLrDva0pMD7Fbw7yP+LzJvaynM4OJgTssGN6dHiMsJMJdpmNaLJltXVLsrb/5sxbFa8sA==}
- engines: {node: ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+ /postcss-lightningcss@0.9.0(postcss@8.4.26):
+ resolution: {integrity: sha512-Qfmei+Pq31AJUkqcF53s08VWhMIbCYvgsuFyEk0urnm6O5kA4C1/utnSNEKPTAzXx4Fm/IwK/1zFDRUjDGn+KQ==}
+ engines: {node: ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
peerDependencies:
postcss: ^8.0.0
dependencies:
- csso: 5.0.5
+ browserslist: 4.21.5
+ lightningcss: 1.21.5
postcss: 8.4.26
dev: true
- /postcss-selector-parser@6.0.13:
- resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
- engines: {node: '>=4'}
- dependencies:
- cssesc: 3.0.0
- util-deprecate: 1.0.2
- dev: true
-
/postcss-url@10.1.3(postcss@8.4.26):
resolution: {integrity: sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==}
engines: {node: '>=10'}
@@ -1415,10 +1417,6 @@ packages:
xxhashjs: 0.2.2
dev: true
- /postcss-value-parser@4.2.0:
- resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
- dev: true
-
/postcss@8.4.26:
resolution: {integrity: sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==}
engines: {node: ^10 || ^12 || >=14}
@@ -1697,10 +1695,6 @@ packages:
punycode: 2.3.0
dev: true
- /util-deprecate@1.0.2:
- resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
- dev: true
-
/validate-npm-package-license@3.0.4:
resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
dependencies:
diff --git a/src/icons/copy-url-done.svg b/src/icons/copy-url-done.svg
index 1e80207..f3f2b10 100644
--- a/src/icons/copy-url-done.svg
+++ b/src/icons/copy-url-done.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/copy-url.svg b/src/icons/copy-url.svg
index fd53f99..7e358c1 100644
--- a/src/icons/copy-url.svg
+++ b/src/icons/copy-url.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/facebook.svg b/src/icons/facebook.svg
index 69502dc..025f8c7 100644
--- a/src/icons/facebook.svg
+++ b/src/icons/facebook.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/linkedin-in.svg b/src/icons/linkedin-in.svg
index 1cc6003..86737ac 100644
--- a/src/icons/linkedin-in.svg
+++ b/src/icons/linkedin-in.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/linkedin.svg b/src/icons/linkedin.svg
index ba6c36e..7e5a87e 100644
--- a/src/icons/linkedin.svg
+++ b/src/icons/linkedin.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/mastodon.svg b/src/icons/mastodon.svg
index cbd34f8..7936bed 100644
--- a/src/icons/mastodon.svg
+++ b/src/icons/mastodon.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/messenger.svg b/src/icons/messenger.svg
index 98e9e45..6ff9acf 100644
--- a/src/icons/messenger.svg
+++ b/src/icons/messenger.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/odnoklassniki.svg b/src/icons/odnoklassniki.svg
index be75989..c514aad 100644
--- a/src/icons/odnoklassniki.svg
+++ b/src/icons/odnoklassniki.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/pinterest.svg b/src/icons/pinterest.svg
index cf6aeca..1e8c6be 100644
--- a/src/icons/pinterest.svg
+++ b/src/icons/pinterest.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/pocket.svg b/src/icons/pocket.svg
index e653b34..e03ea50 100644
--- a/src/icons/pocket.svg
+++ b/src/icons/pocket.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/reddit.svg b/src/icons/reddit.svg
index 4af9483..65c5b6a 100644
--- a/src/icons/reddit.svg
+++ b/src/icons/reddit.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/teams.svg b/src/icons/teams.svg
index 91aea5a..fe4339a 100644
--- a/src/icons/teams.svg
+++ b/src/icons/teams.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/telegram.svg b/src/icons/telegram.svg
index c814858..567dbb8 100644
--- a/src/icons/telegram.svg
+++ b/src/icons/telegram.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/twitter.svg b/src/icons/twitter.svg
index 5006ce7..59ebbea 100644
--- a/src/icons/twitter.svg
+++ b/src/icons/twitter.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/viber.svg b/src/icons/viber.svg
index e9ee52e..06913c4 100644
--- a/src/icons/viber.svg
+++ b/src/icons/viber.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/vkontakte.svg b/src/icons/vkontakte.svg
index 87452a8..ef4466f 100644
--- a/src/icons/vkontakte.svg
+++ b/src/icons/vkontakte.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/web-share.svg b/src/icons/web-share.svg
index 081fdb7..df68f1f 100644
--- a/src/icons/web-share.svg
+++ b/src/icons/web-share.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/whatsapp.svg b/src/icons/whatsapp.svg
index 9c3917d..3643e4d 100644
--- a/src/icons/whatsapp.svg
+++ b/src/icons/whatsapp.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/shareon.css b/src/shareon.css
index bb6a646..3265830 100644
--- a/src/shareon.css
+++ b/src/shareon.css
@@ -1,37 +1,40 @@
:root {
- --button-size: 36px;
- --icon-size: 20px;
-
- --padding-ver: calc(0.3 * var(--icon-size));
- --padding-hor: calc(var(--icon-size) / 2);
- --padding-icon: calc((var(--button-size) - var(--icon-size)) / 2);
-
- --height: calc(var(--button-size) - 2 * var(--padding-ver));
- --width: calc(var(--button-size) - 2 * var(--padding-hor));
+ --shareon-size: 20px;
+ --shareon-padding: 8px;
+ --shareon-radius: 4px;
+ --shareon-fg: #fff;
+ --shareon-bg: unset;
}
.shareon {
- font-size: 0 !important;
+ display: flex;
+ flex-flow: row wrap;
+ gap: 4px;
}
.shareon > * {
- display: inline-block;
- position: relative;
+ --svg: unset;
+ --color: #333;
- height: var(--height);
- min-width: var(--width);
-
- margin: calc(var(--padding-ver) / 2);
- padding: var(--padding-ver) var(--padding-hor);
-
- background-color: #333;
- border-radius: calc(var(--icon-size) / 6);
- border: none;
box-sizing: content-box;
- color: white;
- line-height: 1.5;
+ height: var(--shareon-size);
+ min-width: var(--shareon-size);
+ padding: var(--shareon-padding);
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--shareon-padding);
+
+ border: none;
+ border-radius: var(--shareon-radius);
+ color: var(--shareon-fg, var(--color));
+ background-color: var(--shareon-bg, var(--color));
+
+ font-size: calc(var(--shareon-size) * 0.8);
+ text-decoration: none;
+
transition: opacity 300ms ease;
- vertical-align: middle;
}
.shareon > *:hover {
@@ -40,148 +43,96 @@
opacity: 0.7;
}
-.shareon > *:not(:empty) {
- font-size: calc(0.8 * var(--icon-size));
- text-decoration: none;
-}
-
-.shareon > *:not(:empty)::before {
- position: relative;
-
- height: 100%;
- width: calc(var(--icon-size) + var(--padding-icon));
-
- top: 0;
- left: 0;
-
- background-position: 0 50%;
-}
-
.shareon > *::before {
- display: inline-block;
- position: absolute;
+ height: var(--shareon-size);
+ width: var(--shareon-size);
- height: var(--icon-size);
- width: var(--icon-size);
-
- top: var(--padding-icon);
- left: var(--padding-icon);
-
- background-repeat: no-repeat;
- background-size: var(--icon-size) var(--icon-size);
+ background-color: currentColor;
+ mask: var(--svg) no-repeat center / 100%;
content: "";
- vertical-align: bottom;
}
-.shareon > .copy-url:before {
- background-image: url("icons/copy-url.svg");
+.shareon > .copy-url {
+ --svg: url("icons/copy-url.svg");
}
-.shareon > .copy-url.done:before {
- background-image: url("icons/copy-url-done.svg");
+.shareon > .copy-url.done {
+ --svg: url("icons/copy-url-done.svg");
}
.shareon > .facebook {
- background-color: #1877f2;
-}
-.shareon > .facebook:before {
- background-image: url("icons/facebook.svg");
+ --svg: url("icons/facebook.svg");
+ --color: #1877f2;
}
.shareon > .linkedin {
- background-color: #0a66c2;
+ --svg: url("icons/linkedin-in.svg");
+ --color: #0a66c2;
}
-.shareon > .linkedin:before {
- background-image: url("icons/linkedin-in.svg");
-}
-.shareon > .linkedin:not(:empty):before {
- background-image: url("icons/linkedin.svg");
+.shareon > .linkedin:not(:empty) {
+ --svg: url("icons/linkedin.svg");
}
.shareon > .mastodon {
- background-color: #6364ff;
-}
-.shareon > .mastodon:before {
- background-image: url("icons/mastodon.svg");
+ --svg: url("icons/mastodon.svg");
+ --color: #6364ff;
}
.shareon > .messenger {
- background-color: #00b2ff;
-}
-.shareon > .messenger:before {
- background-image: url("icons/messenger.svg");
+ --svg: url("icons/messenger.svg");
+ --color: #00b2ff;
}
.shareon > .odnoklassniki {
- background-color: #ee8208;
-}
-.shareon > .odnoklassniki:before {
- background-image: url("icons/odnoklassniki.svg");
+ --svg: url("icons/odnoklassniki.svg");
+ --color: #ee8208;
}
.shareon > .pinterest {
- background-color: #bd081c;
-}
-.shareon > .pinterest:before {
- background-image: url("icons/pinterest.svg");
+ --svg: url("icons/pinterest.svg");
+ --color: #bd081c;
}
.shareon > .pocket {
- background-color: #ef3f56;
-}
-.shareon > .pocket:before {
- background-image: url("icons/pocket.svg");
+ --svg: url("icons/pocket.svg");
+ --color: #ef3f56;
}
.shareon > .reddit {
- background-color: #ff4500;
-}
-.shareon > .reddit:before {
- background-image: url("icons/reddit.svg");
+ --svg: url("icons/reddit.svg");
+ --color: #ff4500;
}
.shareon > .telegram {
- background-color: #26a5e4;
-}
-.shareon > .telegram:before {
- background-image: url("icons/telegram.svg");
+ --svg: url("icons/telegram.svg");
+ --color: #26a5e4;
}
.shareon > .teams {
- background-color: #6264a7;
-}
-.shareon > .teams:before {
- background-image: url("icons/teams.svg");
+ --svg: url("icons/teams.svg");
+ --color: #6264a7;
}
.shareon > .twitter {
- background-color: #1d9bf0;
-}
-.shareon > .twitter:before {
- background-image: url("icons/twitter.svg");
+ --svg: url("icons/twitter.svg");
+ --color: #1d9bf0;
}
.shareon > .viber {
- background-color: #7360f2;
-}
-.shareon > .viber:before {
- background-image: url("icons/viber.svg");
+ --svg: url("icons/viber.svg");
+ --color: #7360f2;
}
.shareon > .vkontakte {
- background-color: #0077ff;
-}
-.shareon > .vkontakte:before {
- background-image: url("icons/vkontakte.svg");
+ --svg: url("icons/vkontakte.svg");
+ --color: #0077ff;
}
-.shareon > .web-share:before {
- background-image: url("icons/web-share.svg");
+.shareon > .web-share {
+ --svg: url("icons/web-share.svg");
}
.shareon > .whatsapp {
- background-color: #25d366;
-}
-.shareon > .whatsapp:before {
- background-image: url("icons/whatsapp.svg");
+ --svg: url("icons/whatsapp.svg");
+ --color: #25d366;
}
diff --git a/svgo.config.js b/svgo.config.js
index 1dcd46a..1d7fb61 100644
--- a/svgo.config.js
+++ b/svgo.config.js
@@ -65,7 +65,7 @@ export default {
// Sort the attributes on the