earnestma
/
shareon
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Rename main variables

css
Nikita Karamov 2023-07-18 11:28:19 +02:00
parent 5a1b94b221
commit cd27311715
No known key found for this signature in database
GPG Key ID: 41D6F71EE78E77CD
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/shareon.css
View File

@ -1,13 +1,13 @@
:root { :root {
--button-size: 36px; --shareon-size: 36px;
--icon-size: 20px; --shareon-icon-size: 20px;
--padding-ver: calc(0.3 * var(--icon-size)); --padding-ver: calc(0.3 * var(--shareon-icon-size));
--padding-hor: calc(var(--icon-size) / 2); --padding-hor: calc(var(--shareon-icon-size) / 2);
--padding-icon: calc((var(--button-size) - var(--icon-size)) / 2); --padding-icon: calc((var(--shareon-size) - var(--shareon-icon-size)) / 2);
--height: calc(var(--button-size) - 2 * var(--padding-ver)); --height: calc(var(--shareon-size) - 2 * var(--padding-ver));
--width: calc(var(--button-size) - 2 * var(--padding-hor)); --width: calc(var(--shareon-size) - 2 * var(--padding-hor));
} }
.shareon { .shareon {
@ -25,7 +25,7 @@
padding: var(--padding-ver) var(--padding-hor); padding: var(--padding-ver) var(--padding-hor);
background-color: #333; background-color: #333;
border-radius: calc(var(--icon-size) / 6); border-radius: calc(var(--shareon-icon-size) / 6);
border: none; border: none;
box-sizing: content-box; box-sizing: content-box;
color: white; color: white;
@ -41,7 +41,7 @@
} }
.shareon > *:not(:empty) { .shareon > *:not(:empty) {
font-size: calc(0.8 * var(--icon-size)); font-size: calc(0.8 * var(--shareon-icon-size));
text-decoration: none; text-decoration: none;
} }
@ -49,7 +49,7 @@
position: relative; position: relative;
height: 100%; height: 100%;
width: calc(var(--icon-size) + var(--padding-icon)); width: calc(var(--shareon-icon-size) + var(--padding-icon));
top: 0; top: 0;
left: 0; left: 0;
@ -61,14 +61,14 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
height: var(--icon-size); height: var(--shareon-icon-size);
width: var(--icon-size); width: var(--shareon-icon-size);
top: var(--padding-icon); top: var(--padding-icon);
left: var(--padding-icon); left: var(--padding-icon);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: var(--icon-size) var(--icon-size); background-size: var(--shareon-icon-size) var(--shareon-icon-size);
content: ""; content: "";
vertical-align: bottom; vertical-align: bottom;
} }