You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.2 KiB
120 lines
2.2 KiB
//
|
|
// Social Branding
|
|
// @todo - expand to other social brands
|
|
// -------------------------------------------
|
|
.social-media-branding {
|
|
a.social-link {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
@include transition(all 0.2s ease-in);
|
|
}
|
|
.fa {
|
|
font-size: 36px;
|
|
}
|
|
|
|
&.social-media-branding-sm {
|
|
a.social-link {
|
|
margin-right: 2px;
|
|
}
|
|
.fa {
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
&.social-media-branding-xs {
|
|
a.social-link {
|
|
margin-right: 0;
|
|
}
|
|
.fa {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
.branding-twitter {
|
|
color: #464646; //$branding_twitter_colour;
|
|
|
|
&:hover {
|
|
color: $branding_twitter_colour;
|
|
}
|
|
}
|
|
.branding-facebook {
|
|
color: #464646; //$branding_facebook_colour;
|
|
|
|
&:hover {
|
|
color: $branding_facebook_colour;
|
|
}
|
|
}
|
|
.branding-linkedin {
|
|
color: #464646; //$branding_linkedin_colour;
|
|
|
|
&:hover {
|
|
color: $branding_linkedin_colour;
|
|
}
|
|
}
|
|
.branding-google-plus {
|
|
color: #464646; //$branding_google_colour;
|
|
|
|
&:hover {
|
|
color: $branding_google_colour;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
&.branding-twitter {
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: $branding_twitter_colour;
|
|
}
|
|
}
|
|
&.branding-facebook {
|
|
color: white; //$branding_facebook_colour;
|
|
|
|
&:hover {
|
|
background-color: $branding_facebook_colour;
|
|
}
|
|
}
|
|
&.branding-linkedin {
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: $branding_linkedin_colour;
|
|
}
|
|
}
|
|
&.branding-google-plus {
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: $branding_google_colour;
|
|
}
|
|
}
|
|
}
|
|
|
|
// social colours
|
|
@each $name, $value in $as-theme-colours-brand-colours {
|
|
// bgs
|
|
.bg-brand-#{$name} {
|
|
background-color: $value !important;
|
|
}
|
|
.bg-hover-brand-#{$name}:hover,
|
|
a.bg-hover-brand-#{$name}:hover,
|
|
a.bg-hover-brand-#{$name}:focus {
|
|
background-color: $value !important;
|
|
}
|
|
|
|
// text
|
|
.text-brand-#{$name} {
|
|
color: $value !important;
|
|
}
|
|
.text-hover-brand-#{$name}:hover,
|
|
a.text-hover-brand-#{$name}:hover,
|
|
a.text-hover-brand-#{$name}:focus {
|
|
color: $value !important;
|
|
}
|
|
|
|
a:hover {
|
|
&.bg-brand-#{$name},
|
|
&.text-brand-#{$name} {
|
|
@include opacity(0.9);
|
|
}
|
|
}
|
|
} |