1258 lines
24 KiB
SCSS
1258 lines
24 KiB
SCSS
//
|
|
// Button styles //
|
|
//
|
|
// a {
|
|
// color: get-color("dark", 0.9);
|
|
// text-decoration: none;
|
|
// @include transition(linear 0.1s);
|
|
// &:hover {
|
|
// color: get-color("dark");
|
|
// text-decoration: none;
|
|
// }
|
|
// }
|
|
button {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
a, button {
|
|
&:focus, &:active {
|
|
box-shadow: none;
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
position: relative;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
background: $button-gray;
|
|
border: 1px solid $button-gray;
|
|
padding: 5px 10px;
|
|
color: get-color("dark");
|
|
font: 500 0.875em $font-family-poppins;
|
|
letter-spacing: 0.8px;
|
|
text-transform: uppercase;
|
|
@include transition(ease-out 0.12s);
|
|
i {
|
|
margin-right: 8px;
|
|
font-size: 15px;
|
|
}
|
|
&:hover {
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
.theme-font-nunito {
|
|
.button {
|
|
font: 600 0.875em $font-family-nunito;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Button - Sizes //
|
|
//
|
|
.button-sm { padding: 12px 26px; }
|
|
.button-md { padding: 14px 34px; }
|
|
.button-lg { padding: 16px 42px; }
|
|
.button-xl { padding: 18px 50px; }
|
|
.button-fullwidth { width: 100%; text-align: center; }
|
|
|
|
.button-gray {
|
|
background: $button-gray;
|
|
border: 0;
|
|
&:hover, &:focus {
|
|
background: $button-gray-darker;
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
.button-dark {
|
|
background: $button-dark-lighter;
|
|
border: 0;
|
|
color: white;
|
|
&:hover, &:focus {
|
|
background: $button-dark;
|
|
color: white;
|
|
}
|
|
}
|
|
.button-white {
|
|
background: white;
|
|
border: 0;
|
|
color: get-color("dark");
|
|
&:hover, &:focus {
|
|
background: get-color("white", 0.9);
|
|
border: 0;
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
.button-white-2 {
|
|
background: get-color("white", 0.1);
|
|
border: 0;
|
|
color: white;
|
|
&:hover, &:focus {
|
|
background: get-color("white", 0.15);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Social Buttons //
|
|
//
|
|
[class*='button-social'] {
|
|
border: 0;
|
|
@include box-shadow(0 6px 30px 0 rgba(21,25,29,0.13));
|
|
&:hover, &:focus {
|
|
@include transform(translateY(-3px));
|
|
@include box-shadow(0 6px 36px 0 rgba(21,25,29,0.19));
|
|
opacity: 0.9;
|
|
}
|
|
&:not([class*='button-social-snapchat']) {
|
|
color: white;
|
|
&:hover, &:focus {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
.button-social-facebook {
|
|
background: $color-facebook;
|
|
}
|
|
.button-social-twitter {
|
|
background: $color-twitter;
|
|
}
|
|
.button-social-instagram {
|
|
background: $color-instagram;
|
|
}
|
|
.button-social-linkedin {
|
|
background: $color-linkedin;
|
|
}
|
|
.button-social-youtube {
|
|
background: $color-youtube;
|
|
}
|
|
.button-social-pinterest {
|
|
background: $color-pinterest;
|
|
}
|
|
.button-social-skype {
|
|
background: $color-skype;
|
|
}
|
|
.button-social-dribbble {
|
|
background: $color-dribbble;
|
|
}
|
|
.button-social-whatsapp {
|
|
background: $color-whatsapp;
|
|
}
|
|
.button-social-snapchat {
|
|
background: $color-snapchat;
|
|
color: get-color("dark");
|
|
&:hover {
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
|
|
//
|
|
// Gradient Styles //
|
|
//
|
|
.button-gradient-1 {
|
|
background-image: $gradient-1;
|
|
}
|
|
.button-gradient-2 {
|
|
background-image: $gradient-2;
|
|
}
|
|
.button-gradient-3 {
|
|
background-image: $gradient-3;
|
|
}
|
|
.button-gradient-4 {
|
|
background-image: $gradient-4;
|
|
}
|
|
.button-gradient-5 {
|
|
background-image: $gradient-5;
|
|
}
|
|
.button-gradient-6 {
|
|
background-image: $gradient-6;
|
|
}
|
|
.button-gradient-7 {
|
|
background-image: $gradient-7;
|
|
}
|
|
[class*='button-gradient'] {
|
|
border: 0;
|
|
@include box-shadow(0 6px 30px 0 rgba(21,25,29,0.13));
|
|
color: white;
|
|
&:hover, &:focus {
|
|
@include transform(translateY(-3px));
|
|
@include box-shadow(0 6px 36px 0 rgba(21,25,29,0.19));
|
|
opacity: 0.9;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Colorful Styles //
|
|
//
|
|
.button-theme,
|
|
.button-blue,
|
|
.button-purple,
|
|
.button-pink-edge,
|
|
.button-golden-yellow,
|
|
.button-very-peri,
|
|
.button-turquoise,
|
|
.button-spring-red,
|
|
.button-tan,
|
|
.button-aqua {
|
|
border: 0;
|
|
@include box-shadow(0 6px 30px 0 rgba(21,25,29,0.13));
|
|
color: white;
|
|
&:hover, &:focus {
|
|
@include transform(translateY(-3px));
|
|
@include box-shadow(0 6px 36px 0 rgba(21,25,29,0.19));
|
|
opacity: 0.9;
|
|
color: white;
|
|
}
|
|
}
|
|
.button-blue {
|
|
background: $bg-color-blue;
|
|
}
|
|
.button-purple {
|
|
background: $bg-color-purple;
|
|
}
|
|
.button-pink-edge {
|
|
background: $bg-color-pink-edge;
|
|
}
|
|
.button-golden-yellow {
|
|
background: $bg-color-golden-yellow;
|
|
}
|
|
.button-very-peri {
|
|
background: $bg-color-very-peri;
|
|
}
|
|
.button-turquoise {
|
|
background: $bg-color-turquoise;
|
|
}
|
|
.button-spring-red {
|
|
background: $bg-color-spring-red;
|
|
}
|
|
.button-tan {
|
|
background: $bg-color-tan;
|
|
}
|
|
.button-aqua {
|
|
background: $bg-color-aqua;
|
|
}
|
|
|
|
//
|
|
// Colorful Outline //
|
|
//
|
|
[class*='button-outline'] {
|
|
background: transparent;
|
|
}
|
|
.button-outline-theme,
|
|
.button-outline-blue,
|
|
.button-outline-purple,
|
|
.button-outline-pink-edge,
|
|
.button-outline-golden-yellow,
|
|
.button-outline-very-peri,
|
|
.button-outline-turquoise,
|
|
.button-outline-spring-red,
|
|
.button-outline-tan,
|
|
.button-outline-aqua {
|
|
&:hover, &:focus {
|
|
color: white;
|
|
}
|
|
}
|
|
.button-outline-blue {
|
|
border-color: get-color("blue");
|
|
color: get-color("blue");
|
|
&:hover, &:focus {
|
|
background: get-color("blue");
|
|
}
|
|
}
|
|
.button-outline-purple {
|
|
border-color: get-color("purple");
|
|
color: get-color("purple");
|
|
&:hover, &:focus {
|
|
background: get-color("purple");
|
|
}
|
|
}
|
|
.button-outline-pink-edge {
|
|
border-color: get-color("pink-edge");
|
|
color: get-color("pink-edge");
|
|
&:hover, &:focus {
|
|
background: get-color("pink-edge");
|
|
}
|
|
}
|
|
.button-outline-golden-yellow {
|
|
border-color: get-color("golden-yellow");
|
|
color: get-color("golden-yellow");
|
|
&:hover, &:focus {
|
|
background: get-color("golden-yellow");
|
|
}
|
|
}
|
|
.button-outline-very-peri {
|
|
border-color: get-color("very-peri");
|
|
color: get-color("very-peri");
|
|
&:hover, &:focus {
|
|
background: get-color("very-peri");
|
|
}
|
|
}
|
|
.button-outline-turquoise {
|
|
border-color: get-color("turquoise");
|
|
color: get-color("turquoise");
|
|
&:hover, &:focus {
|
|
background: get-color("turquoise");
|
|
}
|
|
}
|
|
.button-outline-spring-red {
|
|
border-color: get-color("spring-red");
|
|
color: get-color("spring-red");
|
|
&:hover, &:focus {
|
|
background: get-color("spring-red");
|
|
}
|
|
}
|
|
.button-outline-tan {
|
|
border-color: get-color("tan");
|
|
color: get-color("tan");
|
|
&:hover, &:focus {
|
|
background: get-color("tan");
|
|
}
|
|
}
|
|
.button-outline-aqua {
|
|
border-color: get-color("aqua");
|
|
color: get-color("aqua");
|
|
&:hover, &:focus {
|
|
background: get-color("aqua");
|
|
}
|
|
}
|
|
|
|
//
|
|
// Button - Outline //
|
|
//
|
|
.button-outline-gray {
|
|
border-color: get-color("dark", 0.15);
|
|
&:hover, &:focus {
|
|
border-color: $button-dark;
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
.button-outline-dark {
|
|
border-color: $button-dark;
|
|
&:hover, &:focus {
|
|
background: $button-dark;
|
|
border-color: transparent;
|
|
color: white;
|
|
}
|
|
}
|
|
.button-outline-white {
|
|
border-color: get-color("white", 0.3);
|
|
color: white;
|
|
&:hover, &:focus {
|
|
border-color: white;
|
|
color: white;
|
|
}
|
|
}
|
|
.button-outline-white-2 {
|
|
border-color: white;
|
|
color: white;
|
|
&:hover, &:focus {
|
|
background: white;
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
|
|
//
|
|
// Button - Reveal Icon //
|
|
//
|
|
[class*='button-reveal'] {
|
|
span, i {
|
|
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
}
|
|
span {
|
|
position: relative;
|
|
}
|
|
i {
|
|
position: absolute;
|
|
top: 50%;
|
|
@include transform(translateY(-50%));
|
|
opacity: 0;
|
|
margin: 0;
|
|
}
|
|
&:hover, &:focus {
|
|
i {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
[class*='button-reveal-left'] {
|
|
span { left: 0; }
|
|
&:hover, &:focus {
|
|
span { left: 12px; }
|
|
}
|
|
}
|
|
[class*='button-reveal-right'] {
|
|
span { right: 0; }
|
|
&:hover, &:focus {
|
|
span { right: 12px; }
|
|
}
|
|
}
|
|
|
|
.button-reveal-left-dark, .button-reveal-right-dark {
|
|
background: $button-dark-lighter;
|
|
border: 0;
|
|
color: white;
|
|
&:hover, &:focus {
|
|
background: $button-dark;
|
|
color: white;
|
|
}
|
|
}
|
|
.button-reveal-left-white, .button-reveal-right-white {
|
|
background: white;
|
|
border: 0;
|
|
color: get-color("dark");
|
|
&:hover, &:focus {
|
|
background: white;
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
|
|
//
|
|
// Button - Reveal Icon Outline //
|
|
//
|
|
.button-reveal-left-outline-dark,
|
|
.button-reveal-right-outline-dark {
|
|
background: transparent;
|
|
border-color: $button-dark;
|
|
&:hover, &:focus {
|
|
border-color: get-color("dark", 0.15);
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
.button-reveal-left-outline-white,
|
|
.button-reveal-right-outline-white {
|
|
background: transparent;
|
|
border-color: get-color("white", 0.3);
|
|
color: white;
|
|
&:hover, &:focus {
|
|
border-color: white;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.button-sm {
|
|
&[class*='button-reveal-left'] {
|
|
i { left: 20px; }
|
|
&:hover, &:focus {
|
|
i { left: 10px; }
|
|
}
|
|
}
|
|
&[class*='button-reveal-right'] {
|
|
i { right: 20px; }
|
|
&:hover, &:focus {
|
|
i { right: 10px; }
|
|
}
|
|
}
|
|
}
|
|
.button-md {
|
|
&[class*='button-reveal-left'] {
|
|
i { left: 30px; }
|
|
&:hover, &:focus {
|
|
i { left: 18px; }
|
|
}
|
|
}
|
|
&[class*='button-reveal-right'] {
|
|
i { right: 30px; }
|
|
&:hover, &:focus {
|
|
i { right: 18px; }
|
|
}
|
|
}
|
|
}
|
|
.button-lg {
|
|
&[class*='button-reveal-left'] {
|
|
i { left: 40px; }
|
|
&:hover, &:focus {
|
|
i { left: 28px; }
|
|
}
|
|
}
|
|
&[class*='button-reveal-right'] {
|
|
i { right: 40px; }
|
|
&:hover, &:focus {
|
|
i { right: 28px; }
|
|
}
|
|
}
|
|
}
|
|
.button-xl {
|
|
&[class*='button-reveal-left'] {
|
|
i { left: 50px; }
|
|
&:hover, &:focus {
|
|
i { left: 38px; }
|
|
}
|
|
}
|
|
&[class*='button-reveal-right'] {
|
|
i { right: 50px; }
|
|
&:hover, &:focus {
|
|
i { right: 38px; }
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Button Backdrop //
|
|
//
|
|
.button-backdrop-dark {
|
|
background: white;
|
|
border-radius: 0.5em;
|
|
border: 2px solid get-color("dark");
|
|
@include box-shadow(4px 4px 0 0 get-color("dark"));
|
|
&:hover, &:focus {
|
|
@include box-shadow(2px 2px 0 0 get-color("dark"));
|
|
}
|
|
}
|
|
.button-backdrop-white {
|
|
background: black;
|
|
border-radius: 0.5em;
|
|
border: 2px solid white;
|
|
@include box-shadow(4px 4px 0 0 white);
|
|
color: white;
|
|
&:hover, &:focus {
|
|
@include box-shadow(2px 2px 0 0 white);
|
|
color: white;
|
|
}
|
|
}
|
|
[class*='button-backdrop-color'] {
|
|
border-radius: 0.5em;
|
|
border: 2px solid get-color("dark");
|
|
@include box-shadow(4px 4px 0 0 get-color("dark"));
|
|
color: white;
|
|
&:hover, &:focus {
|
|
@include box-shadow(2px 2px 0 0 get-color("dark"));
|
|
color: white;
|
|
}
|
|
}
|
|
.button-backdrop-color-aqua {
|
|
background: get-color("aqua");
|
|
}
|
|
.button-backdrop-color-blue {
|
|
background: get-color("blue");
|
|
}
|
|
.button-backdrop-color-golden-yellow {
|
|
background: get-color("golden-yellow");
|
|
}
|
|
.button-backdrop-color-pink-edge {
|
|
background: get-color("pink-edge");
|
|
}
|
|
.button-backdrop-color-purple {
|
|
background: get-color("purple");
|
|
}
|
|
.button-backdrop-color-spring-red {
|
|
background: get-color("spring-red");
|
|
}
|
|
.button-backdrop-color-tan {
|
|
background: get-color("tan");
|
|
}
|
|
.button-backdrop-color-turquoise {
|
|
background: get-color("turquoise");
|
|
}
|
|
.button-backdrop-color-very-peri {
|
|
background: get-color("very-peri");
|
|
}
|
|
|
|
//
|
|
// Text Buttons //
|
|
//
|
|
.button-text-1,
|
|
.button-text-2,
|
|
.button-text-3 {
|
|
position: relative;
|
|
display: inline-block;
|
|
color: black;
|
|
font-family: $font-family-poppins;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
.theme-font-nunito {
|
|
.button-text-1,
|
|
.button-text-2,
|
|
.button-text-3 {
|
|
font-family: $font-family-nunito;
|
|
}
|
|
}
|
|
.button-text-1 {
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
background: get-color("dark", 0.2);
|
|
width: 100%;
|
|
height: 1px;
|
|
}
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -1px;
|
|
left: 0;
|
|
background: black;
|
|
height: 1px;
|
|
@include animation(button-line-out 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
|
}
|
|
&:hover {
|
|
&:after {
|
|
width: 100%;
|
|
@include animation(button-line-in 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
|
}
|
|
}
|
|
}
|
|
.button-text-2 {
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 40%;
|
|
right: 0;
|
|
left: 0;
|
|
background: get-color("dark", 0.15);
|
|
height: 40%;
|
|
@include animation(button-line-out 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
|
}
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
right: 0;
|
|
left: 0;
|
|
background: black;
|
|
height: 1px;
|
|
@include animation(button-line-in 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
|
}
|
|
&:hover {
|
|
&:before { @include animation(button-line-in 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both); }
|
|
&:after { @include animation(button-line-out 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both); }
|
|
}
|
|
}
|
|
.button-text-3 {
|
|
padding-left: 30px;
|
|
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
@include transform(translateY(-50%));
|
|
background: black;
|
|
width: 20px;
|
|
height: 1px;
|
|
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
}
|
|
&:hover {
|
|
padding-left: 40px;
|
|
&:before {
|
|
width: 30px;
|
|
}
|
|
}
|
|
}
|
|
@-webkit-keyframes button-line-out {
|
|
0% {
|
|
@include transform(scaleX(1));
|
|
@include transform-origin(100% 50%);
|
|
}
|
|
100% {
|
|
@include transform(scaleX(0));
|
|
@include transform-origin(100% 50%);
|
|
}
|
|
}
|
|
@keyframes button-line-out {
|
|
0% {
|
|
@include transform(scaleX(1));
|
|
@include transform-origin(100% 50%);
|
|
}
|
|
100% {
|
|
@include transform(scaleX(0));
|
|
@include transform-origin(100% 50%);
|
|
}
|
|
}
|
|
@-webkit-keyframes button-line-in {
|
|
0% {
|
|
@include transform(scaleX(0));
|
|
@include transform-origin(0 50%);
|
|
}
|
|
100% {
|
|
@include transform(scale(1));
|
|
@include transform-origin(0 50%);
|
|
}
|
|
}
|
|
@keyframes button-line-in {
|
|
0% {
|
|
@include transform(scaleX(0));
|
|
@include transform-origin(0 50%);
|
|
}
|
|
100% {
|
|
@include transform(scale(1));
|
|
@include transform-origin(0 50%);
|
|
}
|
|
}
|
|
|
|
.bg-black,
|
|
[class*='bg-dark'],
|
|
[class*='bg-gradient-'],
|
|
[class*='bg-color-'] {
|
|
.button-text-1,
|
|
.button-text-2,
|
|
.button-text-3 {
|
|
color: get-color("white", 0.8);
|
|
&:hover {
|
|
color: white;
|
|
}
|
|
}
|
|
.button-text-1 {
|
|
&:before { background: get-color("white", 0.3); }
|
|
&:after { background: white; }
|
|
}
|
|
.button-text-2 {
|
|
&:before { background: get-color("white", 0.4); }
|
|
&:after { background: white; }
|
|
}
|
|
.button-text-3 {
|
|
&:before { background: get-color("white", 0.8); }
|
|
&:hover {
|
|
&:before { background: white; }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Template Circle Button //
|
|
//
|
|
.button-circle {
|
|
background: $button-gray;
|
|
display: inline-block;
|
|
border: 1px solid $button-gray;
|
|
border-radius: 50%;
|
|
color: get-color("dark");
|
|
text-align: center;
|
|
@include transition(ease-out 0.12s);
|
|
&:hover {
|
|
color: $color-primary;
|
|
}
|
|
//
|
|
// Template Circle Button //
|
|
//
|
|
&.button-circle-gray {
|
|
background: $button-gray;
|
|
border: 0;
|
|
&:hover, &:focus {
|
|
background: $button-gray-darker;
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
&.button-circle-dark {
|
|
background: $button-dark-lighter;
|
|
border: 0;
|
|
color: white;
|
|
&:hover, &:focus {
|
|
background: $button-dark;
|
|
color: white;
|
|
}
|
|
}
|
|
&.button-circle-white {
|
|
background: white;
|
|
border: 0;
|
|
color: get-color("dark");
|
|
&:hover, &:focus {
|
|
background: get-color("white", 0.9);
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
&.button-circle-white-2 {
|
|
background: get-color("white", 0.1);
|
|
border: 0;
|
|
color: white;
|
|
&:hover, &:focus {
|
|
background: get-color("white", 0.15);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Template Circle Button - Outline //
|
|
//
|
|
&[class*='button-circle-outline'] {
|
|
background: transparent;
|
|
}
|
|
&.button-circle-outline-gray {
|
|
border-color: get-color("dark", 0.15);
|
|
&:hover, &:focus {
|
|
border-color: $button-dark;
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
&.button-circle-outline-dark {
|
|
border-color: $button-dark;
|
|
&:hover, &:focus {
|
|
background: $button-dark;
|
|
border-color: transparent;
|
|
color: white;
|
|
}
|
|
}
|
|
&.button-circle-outline-white {
|
|
border-color: get-color("white", 0.3);
|
|
color: white;
|
|
&:hover, &:focus {
|
|
border-color: white;
|
|
color: white;
|
|
}
|
|
}
|
|
&.button-circle-outline-white-2 {
|
|
border-color: white;
|
|
color: white;
|
|
&:hover, &:focus {
|
|
background: white;
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
&.button-circle-outline-aqua {
|
|
border-color: get-color("aqua");
|
|
color: get-color("aqua");
|
|
&:hover, &:focus {
|
|
background: get-color("aqua");
|
|
color: white;
|
|
}
|
|
}
|
|
&.button-circle-outline-theme,
|
|
&.button-circle-outline-aqua,
|
|
&.button-circle-outline-blue,
|
|
&.button-circle-outline-golden-yellow,
|
|
&.button-circle-outline-pink-edge,
|
|
&.button-circle-outline-purple,
|
|
&.button-circle-outline-spring-red,
|
|
&.button-circle-outline-tan,
|
|
&.button-circle-outline-turquoise,
|
|
&.button-circle-outline-very-peri {
|
|
&:hover, &:focus {
|
|
color: white;
|
|
}
|
|
}
|
|
&.button-circle-outline-blue {
|
|
border-color: get-color("blue");
|
|
color: get-color("blue");
|
|
&:hover, &:focus {
|
|
background: get-color("blue");
|
|
}
|
|
}
|
|
&.button-circle-outline-golden-yellow {
|
|
border-color: get-color("golden-yellow");
|
|
color: get-color("golden-yellow");
|
|
&:hover, &:focus {
|
|
background: get-color("golden-yellow");
|
|
}
|
|
}
|
|
&.button-circle-outline-pink-edge {
|
|
border-color: get-color("pink-edge");
|
|
color: get-color("pink-edge");
|
|
&:hover, &:focus {
|
|
background: get-color("pink-edge");
|
|
}
|
|
}
|
|
&.button-circle-outline-purple {
|
|
border-color: get-color("purple");
|
|
color: get-color("purple");
|
|
&:hover, &:focus {
|
|
background: get-color("purple");
|
|
}
|
|
}
|
|
&.button-circle-outline-spring-red {
|
|
border-color: get-color("spring-red");
|
|
color: get-color("spring-red");
|
|
&:hover, &:focus {
|
|
background: get-color("spring-red");
|
|
}
|
|
}
|
|
&.button-circle-outline-tan {
|
|
border-color: get-color("tan");
|
|
color: get-color("tan");
|
|
&:hover, &:focus {
|
|
background: get-color("tan");
|
|
}
|
|
}
|
|
&.button-circle-outline-turquoise {
|
|
border-color: get-color("turquoise");
|
|
color: get-color("turquoise");
|
|
&:hover, &:focus {
|
|
background: get-color("turquoise");
|
|
}
|
|
}
|
|
&.button-circle-outline-very-peri {
|
|
border-color: get-color("very-peri");
|
|
color: get-color("very-peri");
|
|
&:hover, &:focus {
|
|
background: get-color("very-peri");
|
|
}
|
|
}
|
|
//
|
|
// Circle Button - Gradient //
|
|
//
|
|
&.button-circle-gradient-1 {
|
|
background-image: $gradient-1;
|
|
&:hover, &:focus {
|
|
background-image: $gradient-1;
|
|
}
|
|
}
|
|
&.button-circle-gradient-2 {
|
|
background-image: $gradient-2;
|
|
&:hover, &:focus {
|
|
background-image: $gradient-2;
|
|
}
|
|
}
|
|
&.button-circle-gradient-3 {
|
|
background-image: $gradient-3;
|
|
&:hover, &:focus {
|
|
background-image: $gradient-3;
|
|
}
|
|
}
|
|
&.button-circle-gradient-4 {
|
|
background-image: $gradient-4;
|
|
&:hover, &:focus {
|
|
background-image: $gradient-4;
|
|
}
|
|
}
|
|
&.button-circle-gradient-5 {
|
|
background-image: $gradient-5;
|
|
&:hover, &:focus {
|
|
background-image: $gradient-5;
|
|
}
|
|
}
|
|
&.button-circle-gradient-6 {
|
|
background-image: $gradient-6;
|
|
&:hover, &:focus {
|
|
background-image: $gradient-6;
|
|
}
|
|
}
|
|
&.button-circle-gradient-7 {
|
|
background-image: $gradient-7;
|
|
&:hover, &:focus {
|
|
background-image: $gradient-7;
|
|
}
|
|
}
|
|
&.button-circle-theme,
|
|
&.button-circle-blue,
|
|
&.button-circle-purple,
|
|
&.button-circle-pink-edge,
|
|
&.button-circle-golden-yellow,
|
|
&.button-circle-very-peri,
|
|
&.button-circle-turquoise,
|
|
&.button-circle-spring-red,
|
|
&.button-circle-tan,
|
|
&.button-circle-aqua {
|
|
border: 0;
|
|
@include box-shadow(0 6px 30px 0 rgba(21,25,29,0.13));
|
|
color: white;
|
|
&:hover, &:focus {
|
|
@include transform(translateY(-3px));
|
|
@include box-shadow(0 6px 36px 0 rgba(21,25,29,0.19));
|
|
opacity: 0.9;
|
|
color: white;
|
|
}
|
|
}
|
|
&.button-circle-blue {
|
|
background: $bg-color-blue;
|
|
}
|
|
&.button-circle-purple {
|
|
background: $bg-color-purple;
|
|
}
|
|
&.button-circle-pink-edge {
|
|
background: $bg-color-pink-edge;
|
|
}
|
|
&.button-circle-golden-yellow {
|
|
background: $bg-color-golden-yellow;
|
|
}
|
|
&.button-circle-very-peri {
|
|
background: $bg-color-very-peri;
|
|
}
|
|
&.button-circle-turquoise {
|
|
background: $bg-color-turquoise;
|
|
}
|
|
&.button-circle-spring-red {
|
|
background: $bg-color-spring-red;
|
|
}
|
|
&.button-circle-tan {
|
|
background: $bg-color-tan;
|
|
}
|
|
&.button-circle-aqua {
|
|
background: $bg-color-aqua;
|
|
}
|
|
//
|
|
// Button Circle - Social //
|
|
//
|
|
&[class*='button-circle-social'] {
|
|
color: white;
|
|
&:hover {
|
|
color: white;
|
|
}
|
|
}
|
|
&.button-circle-social-facebook {
|
|
background: $color-facebook;
|
|
}
|
|
&.button-circle-social-twitter {
|
|
background: $color-twitter;
|
|
}
|
|
&.button-circle-social-instagram {
|
|
background: $color-instagram;
|
|
}
|
|
&.button-circle-social-linkedin {
|
|
background: $color-linkedin;
|
|
}
|
|
&.button-circle-social-youtube {
|
|
background: $color-youtube;
|
|
}
|
|
&.button-circle-social-pinterest {
|
|
background: $color-pinterest;
|
|
}
|
|
&.button-circle-social-skype {
|
|
background: $color-skype;
|
|
}
|
|
&.button-circle-social-dribbble {
|
|
background: $color-dribbble;
|
|
}
|
|
&.button-circle-social-snapchat {
|
|
background: $color-snapchat;
|
|
color: get-color("dark");
|
|
&:hover {
|
|
color: get-color("dark");
|
|
}
|
|
}
|
|
&.button-circle-social-whatsapp {
|
|
background: $color-whatsapp;
|
|
}
|
|
}
|
|
[class*='button-circle-gradient'] {
|
|
border: 0;
|
|
@include box-shadow(0 6px 30px 0 rgba(21,25,29,0.13));
|
|
color: white;
|
|
&:hover, &:focus {
|
|
@include transform(translateY(-3px));
|
|
@include box-shadow(0 6px 36px 0 rgba(21,25,29,0.19));
|
|
opacity: 0.9;
|
|
color: white;
|
|
}
|
|
}
|
|
[class*='button-circle-social'] {
|
|
border: 0;
|
|
@include box-shadow(0 6px 30px 0 rgba(21,25,29,0.13));
|
|
&:hover, &:focus {
|
|
@include transform(translateY(-3px));
|
|
@include box-shadow(0 6px 36px 0 rgba(21,25,29,0.19));
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Template Circle Button - Sizes //
|
|
//
|
|
.button-circle-sm {
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
i { line-height: 40px; }
|
|
}
|
|
.button-circle-md {
|
|
width: 50px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
i { line-height: 50px; }
|
|
}
|
|
.button-circle-lg {
|
|
width: 60px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
i { line-height: 60px; }
|
|
}
|
|
.button-circle-xl {
|
|
width: 70px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
i { line-height: 70px; }
|
|
}
|
|
|
|
|
|
//
|
|
// Template Circle Button - Hover Slide //
|
|
//
|
|
.button-circle-hover-slide {
|
|
position: relative;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
i {
|
|
position: absolute;
|
|
left: 50%;
|
|
@include transition(ease-out 0.22s);
|
|
&:first-child {
|
|
top: 50%;
|
|
@include transform(translateX(-50%) translateY(-50%));
|
|
opacity: 1;
|
|
}
|
|
&:last-child {
|
|
top: 100%;
|
|
@include transform(translateX(-50%));
|
|
opacity: 0;
|
|
}
|
|
}
|
|
&:hover {
|
|
i {
|
|
&:first-child {
|
|
top: -100%;
|
|
@include transform(translateX(-50%) translateY(0));
|
|
opacity: 0;
|
|
}
|
|
&:last-child {
|
|
top: 50%;
|
|
@include transform(translateX(-50%) translateY(-50%));
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Button Animation - Ripple //
|
|
//
|
|
.button-circle-ripple {
|
|
position: relative;
|
|
z-index: 1;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
@include transform(translate(-50%, -50%));
|
|
z-index: -1;
|
|
opacity: 1;
|
|
background: get-color("dark", 0.15);
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
@include animation(button-ripple 1.8s ease-out infinite);
|
|
}
|
|
&.button-circle-dark {
|
|
&:before {
|
|
background: get-color("dark", 0.15);
|
|
}
|
|
}
|
|
&.button-circle-white, &.button-circle-white-2 {
|
|
&:before {
|
|
background: get-color("white", 0.2);
|
|
}
|
|
}
|
|
&.button-circle-outline-white, &.button-circle-outline-white-2 {
|
|
&:before {
|
|
background: get-color("white", 0.15);
|
|
}
|
|
}
|
|
}
|
|
@-webkit-keyframes button-ripple {
|
|
0% {
|
|
opacity: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
60% {
|
|
opacity: 0;
|
|
width: 160%;
|
|
height: 160%;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
@keyframes button-ripple {
|
|
0% {
|
|
opacity: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
60% {
|
|
opacity: 0;
|
|
width: 160%;
|
|
height: 160%;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Buttons Font Styles //
|
|
//
|
|
.button-font-2 {
|
|
font-size: 0.938em;
|
|
letter-spacing: -0.2px;
|
|
text-transform: none;
|
|
}
|
|
.theme-font-nunito {
|
|
.button-font-2 {
|
|
font-size: 1em;
|
|
letter-spacing: 0;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Button - Radius //
|
|
//
|
|
.button-radius {
|
|
border-radius: 0.5em;
|
|
}
|
|
.button-rounded {
|
|
border-radius: 50px;
|
|
}
|
|
|
|
//
|
|
// Button - Border //
|
|
//
|
|
.button-border-2,
|
|
.button-border-2.button-circle {
|
|
border-width: 2px;
|
|
}
|
|
|
|
//
|
|
// Button Hover - Float //
|
|
//
|
|
.button-hover-float {
|
|
&:hover, &:focus {
|
|
@include transform(translateY(-3px));
|
|
}
|
|
}
|
|
//
|
|
// Button Hover - Scale //
|
|
//
|
|
.button-hover-scale {
|
|
&:hover, &:focus {
|
|
@include transform(scale(1.03));
|
|
}
|
|
&.button-circle {
|
|
&:hover, &:focus {
|
|
@include transform(scale(1.04));
|
|
}
|
|
}
|
|
}
|
|
//
|
|
// Button Hover - Shrink //
|
|
//
|
|
.button-hover-shrink {
|
|
&:hover, &:focus {
|
|
@include transform(scale(0.97));
|
|
}
|
|
&.button-circle {
|
|
&:hover, &:focus {
|
|
@include transform(scale(0.96));
|
|
}
|
|
}
|
|
}
|
|
//
|
|
// Button - Shadow //
|
|
//
|
|
.button-shadow {
|
|
@include box-shadow(0 6px 30px 0 rgba(22,24,26,0.1));
|
|
&:hover, &:focus {
|
|
@include box-shadow(0 6px 36px 0 rgba(22,24,26,0.15));
|
|
}
|
|
} |