consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract stylesheet for social share button styles

Browse Source 
This way we can ignore the selector-class-pattern stylelint rule error
due to the `.ssb-whatsapp_app` selector.
This commit is contained in:
Javi Martín
2024-05-17 02:46:50 +02:00
parent b2be64848c
commit 6f9de94013
3 changed files with 78 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.stylelintrc.yml
View File

@@ -94,3 +94,6 @@ overrides:
rules:
max-nesting-depth: 8
selector-max-compound-selectors: 8
- files: app/assets/stylesheets/shared/social_share.scss
rules:
selector-class-pattern: "^([a-z][a-z0-9]*)((-|_)[a-z0-9]+)*$"

75
app/assets/stylesheets/layout.scss
View File

@@ -1284,35 +1284,6 @@ table {
}
}
.social-share-button .ssb-icon {
background-image: none;
color: #fff;
height: $icon-width;
line-height: $icon-width;
text-align: center;
width: $icon-width;
&::before {
font-size: calc(#{$icon-width} / 2);
margin-right: 0;
}
&:hover,
&:focus {
background: #fff;
}
}
.ssb-twitter {
@include has-fa-icon(twitter, brands);
background: #45b0e3;
&:hover,
&:focus {
color: #40a2d1;
}
}
.button.button-facebook {
@include has-fa-icon(facebook-f, brands);
background: #ebeef4;
@@ -1323,16 +1294,6 @@ table {
}
}
.ssb-facebook {
@include has-fa-icon(facebook-f, brands);
background: #3b5998;
&:hover,
&:focus {
color: #354f88;
}
}
.button.button-google {
@include has-fa-icon(google, brands);
background: #fcedea;
@@ -1353,42 +1314,6 @@ table {
}
}
.ssb-telegram {
@include has-fa-icon(telegram-plane, brands);
background: #08c;
&:hover,
&:focus {
color: #40a2d1;
}
}
.ssb-whatsapp_app {
@include has-fa-icon(whatsapp, brands);
background: #43d854;
&:hover,
&:focus {
color: #43d854;
}
}
@include breakpoint(medium) {
.ssb-telegram,
.ssb-whatsapp_app {
display: none !important;
}
}
.share-supported {
text-align: center;
.social-share-button {
display: inline-block;
}
}
// 14. Verification
// ----------------

75
app/assets/stylesheets/shared/social_share.scss Normal file
View File

@@ -0,0 +1,75 @@
.social-share-button .ssb-icon {
background-image: none;
color: #fff;
height: $icon-width;
line-height: $icon-width;
text-align: center;
width: $icon-width;
&::before {
font-size: calc(#{$icon-width} / 2);
margin-right: 0;
}
&:hover,
&:focus {
background: #fff;
}
}
.ssb-twitter {
@include has-fa-icon(twitter, brands);
background: #45b0e3;
&:hover,
&:focus {
color: #40a2d1;
}
}
.ssb-facebook {
@include has-fa-icon(facebook-f, brands);
background: #3b5998;
&:hover,
&:focus {
color: #354f88;
}
}
.ssb-telegram {
@include has-fa-icon(telegram-plane, brands);
background: #08c;
&:hover,
&:focus {
color: #40a2d1;
}
}
.ssb-whatsapp_app {
@include has-fa-icon(whatsapp, brands);
background: #43d854;
&:hover,
&:focus {
color: #43d854;
}
}
@include breakpoint(medium) {
.ssb-telegram,
.ssb-whatsapp_app {
display: none !important;
}
}
.share-supported {
text-align: center;
.social-share-button {
display: inline-block;
}
}