428 lines
10 KiB
SCSS
428 lines
10 KiB
SCSS
/* Social media icon */
|
|
@each $social-classname,$color-code in $social-colors {
|
|
.elements-social {
|
|
.#{$social-classname} {
|
|
&:hover {
|
|
color: $color-code;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.elements-social {
|
|
ul {
|
|
margin-bottom: 0;
|
|
list-style: none;
|
|
padding: 0;
|
|
li {
|
|
display: inline-block;
|
|
&:first-child {
|
|
margin-left: 0 !important;
|
|
}
|
|
&:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
a {
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
@include prefix(transition, 0.3s cubic-bezier(0.12, 0, 0.39, 0), webkit);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.extra-small-icon {
|
|
li {
|
|
margin: 0 2px;
|
|
}
|
|
a {
|
|
font-size: 14px;
|
|
width:30px;
|
|
height:30px;
|
|
}
|
|
}
|
|
.small-icon {
|
|
li {
|
|
margin: 0 5px;
|
|
}
|
|
a {
|
|
font-size: 18px;
|
|
width: 40px;
|
|
height:40px;
|
|
}
|
|
}
|
|
.medium-icon {
|
|
li {
|
|
margin: 0 8px;
|
|
}
|
|
a {
|
|
font-size: 20px;
|
|
width: 50px;
|
|
height:50px;
|
|
}
|
|
}
|
|
.large-icon {
|
|
li {
|
|
margin: 0 10px;
|
|
}
|
|
a {
|
|
font-size: 24px;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
.extra-large-icon {
|
|
li {
|
|
margin: 0 12px;
|
|
}
|
|
a {
|
|
font-size: 30px;
|
|
width: 70px;
|
|
height: 70px;
|
|
}
|
|
}
|
|
.social-icon {
|
|
a {
|
|
margin: 0 15px;
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
[class^="social-icon-"] ul, [class*=" social-icon-"] ul { list-style: none; }
|
|
|
|
/* Social icon dark and light */
|
|
.elements-social {
|
|
.light {
|
|
li {
|
|
a {
|
|
color: var(--white);
|
|
}
|
|
}
|
|
}
|
|
.dark {
|
|
li {
|
|
a {
|
|
color: var(--dark-gray);
|
|
}
|
|
}
|
|
}
|
|
|
|
// icon with animation style
|
|
.icon-with-animation {
|
|
a {
|
|
&:hover {
|
|
@include prefix(transform, translateY(-8px), webkit);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Social icon style 01 */
|
|
.social-icon-style-01 {
|
|
ul {
|
|
li {
|
|
a {
|
|
&:hover {
|
|
color: var(--base-color) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Social icon style 03 */
|
|
.social-icon-style-03 {
|
|
ul {
|
|
li {
|
|
a {
|
|
color: var(--white);
|
|
border-radius: 100%;
|
|
@include prefix(transition, 0.4s cubic-bezier(0.12, 0, 0.39, 0), webkit);
|
|
&:hover {
|
|
background-color: var(--white) !important;
|
|
box-shadow: 0 0 30px rgba(23,23,23,.25);
|
|
transform: translate3d(0, -3px, 0);
|
|
}
|
|
@each $social-classname,$color-code in $social-colors {
|
|
&.#{$social-classname} {
|
|
background-color: $color-code;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Social icon style 04 */
|
|
.social-icon-style-04 {
|
|
ul {
|
|
li {
|
|
a {
|
|
z-index:9;
|
|
position: relative;
|
|
&:hover {
|
|
color: var(--white) !important;
|
|
span {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
span {
|
|
border-radius: 0;
|
|
display: block;
|
|
height: 0;
|
|
width: 0;
|
|
left: 50%;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
@include prefix(transition, 0.4s cubic-bezier(0.12, 0, 0.39, 0), webkit);
|
|
z-index: -1;
|
|
background-color: var(--dark-gray);
|
|
}
|
|
|
|
@each $social-classname,$color-code in $social-colors {
|
|
&.#{$social-classname} {
|
|
span {
|
|
background-color: $color-code;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Social icon style 05 */
|
|
.social-icon-style-05 {
|
|
ul {
|
|
li {
|
|
a {
|
|
&:hover {
|
|
color: var(--white) !important;
|
|
}
|
|
@each $social-classname,$color-code in $social-colors {
|
|
&.#{$social-classname} {
|
|
color: $color-code;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.dark {
|
|
li {
|
|
a {
|
|
&:hover {
|
|
color: var(--dark-gray) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Social icon style 06 */
|
|
.social-icon-style-06 {
|
|
ul {
|
|
li {
|
|
a {
|
|
display: inline-block;
|
|
height: auto;
|
|
width: auto;
|
|
padding: 0 24px;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
overflow: hidden;
|
|
.brand-icon {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 100%;
|
|
transition-duration: 0.3s;
|
|
}
|
|
> span {
|
|
line-height: inherit;
|
|
top: 0px;
|
|
position: relative;
|
|
transition: 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
|
|
}
|
|
&:hover {
|
|
.brand-label {
|
|
top: -50px;
|
|
transition: 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
|
|
}
|
|
.brand-icon {
|
|
top: 0;
|
|
transition-duration: 0.3s;
|
|
}
|
|
}
|
|
@each $social-classname,$color-code in $social-colors {
|
|
&.#{$social-classname} {
|
|
color: $color-code;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Social icon style 07 */
|
|
.social-icon-style-07 {
|
|
ul {
|
|
li {
|
|
a {
|
|
position: relative;
|
|
z-index: 3;
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
&:hover {
|
|
color: var(--white) !important;
|
|
> span {
|
|
top: 0;
|
|
}
|
|
}
|
|
> span {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: -1;
|
|
@include prefix(transition, 0.3s cubic-bezier(0.12, 0, 0.39, 0), webkit);
|
|
}
|
|
@each $social-classname,$color-code in $social-colors {
|
|
&.#{$social-classname} {
|
|
color: $color-code;
|
|
span {
|
|
background-color: $color-code;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Social icon style 08 */
|
|
.social-icon-style-08 {
|
|
ul {
|
|
li {
|
|
a {
|
|
&:hover {
|
|
opacity: 0.5;
|
|
color: var(--dark-gray) !important;
|
|
}
|
|
}
|
|
}
|
|
&.light {
|
|
li {
|
|
a {
|
|
&:hover {
|
|
opacity: 0.5;
|
|
color: var(--white) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Social icon style 09 */
|
|
.social-icon-style-09 {
|
|
ul {
|
|
li {
|
|
a {
|
|
z-index:9;
|
|
border: 1px solid rgba(35, 35, 35, 0.15);
|
|
border-radius: 100%;
|
|
position: relative;
|
|
&:hover {
|
|
color: var(--white) !important;
|
|
span {
|
|
@include prefix(transform, scale(1), webkit);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
span {
|
|
display: block;
|
|
border-radius: 100%;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: -1px;
|
|
left: -1px;
|
|
padding: 1px;
|
|
box-sizing: content-box;
|
|
margin: 0;
|
|
position: absolute;
|
|
@include prefix(transform, scale(1.2), webkit);
|
|
opacity: 0;
|
|
@include prefix(transition, 0.5s cubic-bezier(0.12, 0, 0.39, 0), webkit);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
background-color: var(--dark-gray);
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
&.light {
|
|
li {
|
|
a {
|
|
border-color: rgba(255,255,255,0.3);
|
|
&:hover {
|
|
color: var(--dark-gray) !important;
|
|
}
|
|
span {
|
|
background-color: var(--white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Social icon style 10 */
|
|
.social-icon-style-10 {
|
|
ul {
|
|
li {
|
|
a {
|
|
color: var(--dark-gray);
|
|
&:hover {
|
|
color: var(--base-color) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.default-color {
|
|
a {
|
|
@each $social-classname,$color-code in $social-colors {
|
|
&.#{$social-classname} {
|
|
color: $color-code;
|
|
}
|
|
}
|
|
&:hover {
|
|
color: var(--dark-gray) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Social text style 01 */
|
|
.social-text-style-01 {
|
|
ul {
|
|
li {
|
|
a {
|
|
width: auto;
|
|
height: auto;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
}
|
|
} |