Skip to content

Fix design issues on social buttons #2073

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 17 commits into
base: main
Choose a base branch
from
Draft

Fix design issues on social buttons #2073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
080410a
Add TikTok icon in social buttons
hannahiss Jan 12, 2023
1db5b3b
migration guide
hannahiss Jan 12, 2023
ac3b973
adjust formatting
hannahiss Jan 12, 2023
b70bc6e
Merge branch 'main' into main-his-tiktok-social
hannahiss Jan 12, 2023
2eef7d3
add TikTok to cspell
hannahiss Jan 12, 2023
b92fe0c
change hover color only when NOT active (Snapchat)
hannahiss Jan 16, 2023
8e85134
rollback newline at end of file
hannahiss Jan 16, 2023
914b65c
rollback newline at end of file
hannahiss Jan 16, 2023
2171194
Merge branch 'main' into main-his-tiktok-social
hannahiss Mar 6, 2023
6439b43
Merge branch 'main' into main-his-tiktok-social
hannahiss Jun 7, 2023
691cfa2
Social icons adaptations to design (without new icon TikTok)
hannahiss Jun 8, 2023
1898f18
Social icons adaptations to design (without new icon TikTok)
hannahiss Jun 8, 2023
e34c666
remove newline at end of .cspell.json
hannahiss Jun 8, 2023
6330cbd
Update .cspell.json
hannahiss Jun 8, 2023
786c870
Social icons adaptations to design (without new icon TikTok)
hannahiss Jun 8, 2023
5611391
Merge branch 'main' into main-his-social-icons
hannahiss Aug 24, 2023
43784d6
Merge branch 'main' into main-his-social-icons
louismaximepiton Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,10 +283,11 @@

&::before {
mask-size: if(map-has-key($network, "size"), map-get($network, "size"), null);
transform: if(map-has-key($network, "transform"), map-get($network, "transform"), null);
}

@if "linkedin" == $name {
transform: translateY(-1px);
}
&:hover:not(:active) {
color: if(map-has-key($network, "hover-color"), map-get($network, "hover-color"), null);
}
}
}
Expand Down
23 changes: 12 additions & 11 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1039,41 +1039,42 @@ $btn-icon-padding-x-lg: add($spacer * .5, calc(var(--#{$prefix}border-widt
$btn-social-networks: (
"facebook": (
"color": #3b5998,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M19 6h5V0h-5c-4 0-7 3-7 7v3H8v6h4v16h6V16h5l1-6h-6V7l1-1z'></path></svg>"
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M19.044 32V17.424h5.033l.753-5.706h-5.786V8.084c0-1.648.469-2.77 2.889-2.77L25 5.311V.224C24.466.154 22.635 0 20.505 0c-4.447 0-7.492 2.651-7.492 7.52v4.198H8v5.706h5.013V32h6.031'/></svg>"
),
"twitter": (
"color": #1da1f2,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M32 7a13 13 0 01-3.8 1.1 6.6 6.6 0 003-3.6c-1.4.7-2.8 1.3-4.3 1.6a6.6 6.6 0 00-11.1 6A18.6 18.6 0 012.2 5a6.6 6.6 0 002 8.9c-1 0-2-.4-3-.9v.1c0 3.2 2.4 5.9 5.4 6.5a6.6 6.6 0 01-3 0 6.6 6.6 0 006.1 4.6A13.2 13.2 0 010 27.1a18.6 18.6 0 0028.7-16.6C30 9.5 31.1 8.4 32 7z'/></svg>"
),
"instagram": (
"color": #e1306c,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 2.9h6.5c1.5.1 2.4.4 3 .6a5 5 0 011.8 1.2c.5.6.9 1.1 1.2 1.9.2.5.4 1.4.5 3a112.7 112.7 0 01-.5 15.8 5 5 0 01-1.2 1.9c-.6.5-1.1.9-1.9 1.2-.5.2-1.4.4-3 .5a112.7 112.7 0 01-15.8-.5 5 5 0 01-1.9-1.2 5 5 0 01-1.2-1.9c-.2-.5-.4-1.4-.5-3a112.7 112.7 0 01.5-15.8 5 5 0 011.2-1.9c.6-.5 1.1-.9 1.9-1.2C7 3.3 8 3 9.6 3l6.4-.1zM16 0H9.4C7.7.3 6.5.5 5.5.9s-2 1-2.8 1.9c-1 .9-1.5 1.8-1.9 2.8-.4 1-.6 2.2-.7 3.9a117.6 117.6 0 00.7 17c.5 1.1 1 2 1.9 3 .9.8 1.8 1.4 2.8 1.8 1 .4 2.2.6 3.9.7a117.2 117.2 0 0017-.7c1.1-.4 2-1 2.9-1.9s1.4-1.8 1.8-2.8c.4-1 .7-2.2.8-3.9a117.2 117.2 0 00-.8-17A7.8 7.8 0 0026.4.8c-1-.5-2.1-.7-3.8-.8L16 0z'/><path d='M16 7.8a8.2 8.2 0 100 16.4 8.2 8.2 0 000-16.4zm0 13.5a5.3 5.3 0 110-10.6 5.3 5.3 0 010 10.6zM26.5 7.5a2 2 0 11-3.9 0 2 2 0 013.9 0z'/></svg>"
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 0c-4.345 0-4.89.018-6.597.096C7.7.174 6.537.445 5.52.84a7.842 7.842 0 0 0-2.834 1.846A7.844 7.844 0 0 0 .84 5.52C.444 6.538.174 7.701.096 9.404.018 11.111 0 11.656 0 16.002s.018 4.89.096 6.597c.078 1.704.348 2.867.744 3.885a7.844 7.844 0 0 0 1.845 2.834 7.843 7.843 0 0 0 2.834 1.846c1.018.395 2.181.666 3.884.744 1.707.077 2.252.096 6.597.096 4.345 0 4.89-.019 6.597-.096 1.703-.078 2.866-.349 3.884-.744a7.843 7.843 0 0 0 2.834-1.846 7.845 7.845 0 0 0 1.845-2.834c.396-1.018.666-2.181.744-3.885.078-1.706.096-2.251.096-6.597s-.018-4.89-.096-6.598c-.078-1.703-.348-2.866-.744-3.884a7.845 7.845 0 0 0-1.845-2.834A7.842 7.842 0 0 0 26.48.84C25.463.445 24.3.174 22.597.096 20.89.018 20.345 0 16 0Zm0 2.883c4.272 0 4.778.017 6.465.094 1.56.07 2.408.331 2.971.55.747.29 1.28.638 1.84 1.198.56.56.907 1.093 1.197 1.84.219.563.48 1.41.55 2.97.078 1.688.094 2.194.094 6.467s-.016 4.779-.093 6.466c-.071 1.56-.332 2.408-.551 2.971a4.957 4.957 0 0 1-1.197 1.84c-.56.56-1.093.907-1.84 1.197-.563.22-1.41.48-2.97.551-1.688.077-2.194.094-6.466.094s-4.778-.017-6.465-.094c-1.56-.07-2.408-.332-2.971-.55a4.957 4.957 0 0 1-1.84-1.198 4.958 4.958 0 0 1-1.197-1.84c-.219-.563-.48-1.41-.55-2.971-.078-1.687-.094-2.193-.094-6.466s.016-4.779.093-6.466c.071-1.56.332-2.408.551-2.972.29-.746.637-1.28 1.197-1.84a4.957 4.957 0 0 1 1.84-1.196c.563-.22 1.41-.48 2.97-.551 1.688-.077 2.194-.094 6.466-.094Z'/><path d='M16 21.336a5.334 5.334 0 1 1 0-10.667 5.334 5.334 0 0 1 0 10.667Zm-8.216-5.334a8.217 8.217 0 1 0 16.432 0 8.217 8.217 0 1 0-16.432 0ZM26.46 7.46a1.92 1.92 0 1 1-3.84 0 1.92 1.92 0 0 1 3.84 0'/></svg>"
),
"youtube": (
"color": #f00,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M31.7 9.6s-.3-2.2-1.3-3.2c-1.2-1.3-2.6-1.3-3.2-1.3-4.5-.4-11.2-.4-11.2-.4s-6.7 0-11.2.4c-.6 0-2 0-3.2 1.3C.6 7.4.3 9.6.3 9.6S0 12.2 0 14.8v2.4c0 2.6.3 5.2.3 5.2s.3 2.2 1.3 3.2c1.2 1.2 2.8 1.2 3.5 1.3 2.6.3 11 .4 11 .4s6.6 0 11.1-.4c.6 0 2 0 3.2-1.3 1-1 1.3-3.2 1.3-3.2s.3-2.6.3-5.2v-2.4c0-2.6-.3-5.2-.3-5.2zm-19 10.5v-9l8.6 4.6-8.6 4.4z'/></svg>"
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.8 20.714v-9.429L21.114 16 12.8 20.714ZM31.331 8.435a3.973 3.973 0 0 0-2.829-2.778C26.007 5 16 5 16 5S5.993 5 3.498 5.657a3.973 3.973 0 0 0-2.83 2.778C0 10.886 0 16 0 16s0 5.114.669 7.565a3.972 3.972 0 0 0 2.829 2.778C5.993 27 16 27 16 27s10.007 0 12.502-.657a3.972 3.972 0 0 0 2.83-2.778C32 21.114 32 16 32 16s0-5.114-.669-7.565Z'/></svg>"
),
"linkedin": (
"color": #0077b5,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12 12h5.5v2.8h.1a6.1 6.1 0 015.5-2.8c5.8 0 6.9 3.6 6.9 8.4V30h-5.8v-8.5c0-2 0-4.7-3-4.7s-3.4 2.2-3.4 4.5V30H12V12zM2 12h6v18H2V12zm6-5a3 3 0 11-6 0 3 3 0 016 0z'/></svg>",
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M32 32h-6.63V21.606c0-2.48-.043-5.668-3.446-5.668-3.45 0-3.976 2.702-3.976 5.49V32h-6.623V10.625h6.356v2.923h.09c.885-1.681 3.048-3.453 6.275-3.453 6.713 0 7.954 4.426 7.954 10.182V32ZM3.847 7.705A3.847 3.847 0 0 1 0 3.852 3.847 3.847 0 0 1 3.847 0a3.85 3.85 0 0 1 3.844 3.852 3.85 3.85 0 0 1-3.844 3.853ZM.527 32h6.638V10.625H.527V32Z'/></svg>",
"transform": translateY(-1px),
"size": 1.125rem
),
"whatsapp": (
"color": #25d366,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M27.3 4.7a15.9 15.9 0 00-25 19.1L.1 32l8.4-2.2A15.9 15.9 0 0027.3 4.7zM16 29c-2.4 0-4.7-.6-6.7-1.8l-.5-.3-5 1.3 1.3-4.8-.3-.5A13.2 13.2 0 1116.1 29zm7.2-9.8l-2.7-1.3c-.3-.1-.6-.2-1 .2l-1.2 1.5c-.2.3-.4.3-.8.1s-1.7-.6-3.2-2c-1.2-1-2-2.3-2.2-2.7s0-.6.2-.8l.6-.7.4-.6v-.7l-1.3-3c-.3-.7-.6-.6-.9-.7h-.7c-.2 0-.7.1-1.1.5C9 9.4 8 10.4 8 12.3s1.4 3.9 1.6 4.1c.2.3 2.8 4.3 6.8 6l2.3.9c.9.3 1.8.2 2.4.1.8-.1 2.4-1 2.7-1.9s.4-1.7.3-1.9l-.8-.4z'/></svg>"
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M23.33 19.176c-.397-.198-2.354-1.157-2.72-1.289-.364-.132-.63-.198-.895.198-.266.397-1.028 1.29-1.26 1.554-.233.264-.465.298-.863.1-.398-.2-1.681-.618-3.202-1.967-1.183-1.051-1.982-2.348-2.215-2.745-.232-.397-.024-.611.175-.809.18-.177.398-.463.597-.694.2-.231.266-.397.398-.66.133-.265.067-.497-.033-.695-.1-.198-.896-2.149-1.227-2.942-.323-.772-.652-.668-.896-.68a16.044 16.044 0 0 0-.763-.014c-.265 0-.697.1-1.062.496-.365.396-1.393 1.355-1.393 3.305 0 1.95 1.427 3.834 1.626 4.099.199.264 2.807 4.266 6.8 5.982.95.409 1.692.652 2.27.835.954.302 1.822.26 2.508.157.764-.114 2.355-.958 2.687-1.884.331-.926.331-1.719.232-1.884-.1-.165-.365-.264-.763-.463m-7.264 9.871h-.005c-2.377 0-4.707-.636-6.74-1.837l-.484-.286-5.012 1.309 1.337-4.864-.315-.498a13.102 13.102 0 0 1-2.024-7.014C2.827 8.59 8.767 2.678 16.072 2.678a13.185 13.185 0 0 1 9.363 3.865 13.069 13.069 0 0 1 3.875 9.324c-.003 7.268-5.944 13.18-13.243 13.18M27.337 4.65A15.868 15.868 0 0 0 16.068 0C7.285 0 .137 7.113.134 15.856a15.77 15.77 0 0 0 2.126 7.927L0 32l8.446-2.205a15.98 15.98 0 0 0 7.614 1.93h.007c8.781 0 15.93-7.114 15.933-15.857A15.723 15.723 0 0 0 27.338 4.65'/></svg>"
),
"mail": (
"color": $supporting-orange,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M3.2 14.3c0 9.5 0 9 .2 9.5.3.8 1 1.4 1.7 1.7l12.2.1h11.5v-8.8c0-9.3 0-8.9-.2-9.3-.2-.7-.7-1.2-1.3-1.6l-.8-.3H3.2v8.7zm22.9-2.4a246.2 246.2 0 01-4.9 4.7l-.8.7-.5.6-.7.6c-.6.6-1 .9-1.3 1a4 4 0 01-1.8.5 4 4 0 01-2.4-.6 13 13 0 01-1.9-1.7l-2.4-2.4-.6-.6-1.4-1.3L6.1 12l-.5-.5V8.9l.6.5L7.9 11l1.4 1.4 1.3 1.2 1.3 1.3a195 195 0 012.6 2.4c.4.3 1 .5 1.6.4.5 0 1-.1 1.4-.4L19 16l1-1 1-1a214.7 214.7 0 012.2-2l1-1 2-2 .2-.2v2.8l-.3.3z'/></svg>",
"size": 1.5rem
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M29 11.506 19.55 20.6h-.008c-.926.92-2.181 1.398-3.565 1.398-1.383 0-2.638-.478-3.566-1.398h-.025L3 11.512V8.05C6.759 11.766 13.6 18.4 13.6 18.4h.002c.612.64 1.445.912 2.364.912.974 0 1.85-.392 2.47-1.072h.005L29 8.002v3.504ZM28.46 4H0v21.48A3.522 3.522 0 0 0 3.535 29H32V7.452C32 5.5 30.413 4 28.46 4Z'/></svg>"
),
"snapchat": (
"color": #fffc00,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'><path d='M13 2c3 0 5 2 7 4v6h2l1 1-3 2v1l4 4h1l1 1-4 1-1 2h-2-1c-1 0-2 2-5 2s-4-2-5-2H5l-1-2-4-1 1-1h1l4-4v-1l-3-2 1-1h2V9 6c2-3 4-4 7-4z'/></svg>"
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.198 29.67c-.08 0-.16-.003-.24-.007-.05.004-.103.006-.156.006-1.856 0-3.048-.84-4.2-1.653-.796-.56-1.547-1.09-2.431-1.237a7.865 7.865 0 0 0-1.277-.107c-.748 0-1.338.115-1.769.2-.261.05-.487.094-.659.094-.18 0-.374-.039-.458-.326a10.29 10.29 0 0 1-.177-.725c-.132-.601-.226-.97-.478-1.01-2.945-.453-3.787-1.072-3.975-1.51a.566.566 0 0 1-.046-.189.33.33 0 0 1 .278-.344c4.526-.744 6.556-5.358 6.64-5.554a.636.636 0 0 1 .007-.016c.277-.56.331-1.046.162-1.444-.31-.73-1.324-1.052-1.994-1.264-.164-.051-.32-.1-.443-.149-1.338-.527-1.449-1.07-1.397-1.345.09-.47.72-.798 1.23-.798.14 0 .263.024.366.073.602.281 1.145.423 1.613.423.647 0 .929-.27.963-.306-.016-.306-.036-.625-.057-.954-.135-2.135-.302-4.787.375-6.3C10.104.688 14.407.336 15.677.336l.557-.006h.076c1.273 0 5.585.353 7.615 4.893.678 1.515.51 4.17.375 6.302l-.006.093c-.018.297-.036.586-.051.862.032.033.292.283.878.305.446-.017.958-.159 1.52-.421.165-.077.348-.093.472-.093.19 0 .384.036.544.103l.01.004c.454.16.752.479.758.81.006.313-.233.784-1.407 1.246-.122.048-.278.097-.442.15-.672.212-1.684.532-1.995 1.262-.17.399-.115.884.162 1.445l.007.016c.084.196 2.112 4.809 6.64 5.553a.331.331 0 0 1 .278.345.552.552 0 0 1-.046.19c-.187.435-1.03 1.053-3.975 1.507-.24.036-.333.35-.477 1.005-.052.239-.105.473-.178.72-.063.214-.196.314-.421.314h-.037c-.156 0-.378-.028-.659-.083a8.811 8.811 0 0 0-1.769-.187c-.415 0-.845.036-1.277.107-.884.147-1.634.676-2.428 1.236-1.155.814-2.346 1.654-4.203 1.654'/></svg>",
"hover-color": $black
),
"pinterest": (
"color": red,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 2a14 14 0 00-5 27v-4l2-7-1-2c0-2 1-3 3-3l1 2-1 4c0 2 1 3 2 3 3 0 5-3 5-7 0-3-3-5-6-5-4 0-6 3-6 6l1 3a302 302 0 01-1 2c-2-1-3-3-3-5 0-5 3-9 9-9 5 0 9 4 9 8 0 5-3 9-7 9l-4-2v4l-2 3a14 14 0 0018-13c0-8-6-14-14-14z'/></svg>",
"size": 1.375rem
"color": #e60023,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 0C7.163 0 0 7.163 0 16c0 6.778 4.217 12.573 10.17 14.904-.14-1.266-.267-3.212.055-4.594.29-1.25 1.876-7.954 1.876-7.954s-.479-.958-.479-2.375c0-2.225 1.29-3.886 2.895-3.886 1.365 0 2.025 1.025 2.025 2.254 0 1.373-.874 3.425-1.325 5.327-.377 1.593.798 2.892 2.369 2.892 2.844 0 5.03-2.999 5.03-7.327 0-3.831-2.753-6.51-6.684-6.51-4.552 0-7.224 3.415-7.224 6.944 0 1.375.53 2.85 1.19 3.651.131.159.15.298.111.46-.121.505-.391 1.591-.444 1.814-.07.293-.232.355-.535.214-1.998-.93-3.248-3.852-3.248-6.199 0-5.047 3.667-9.682 10.572-9.682 5.55 0 9.864 3.955 9.864 9.24 0 5.515-3.477 9.953-8.303 9.953-1.621 0-3.145-.843-3.667-1.837 0 0-.802 3.054-.997 3.803-.361 1.39-1.336 3.132-1.988 4.195C12.76 31.75 14.35 32 16 32c8.837 0 16-7.163 16-16S24.837 0 16 0'/></svg>"
),
"tiktok": (
"color": #ff2c55,
Expand Down