152 lines
2.7 KiB
SCSS
152 lines
2.7 KiB
SCSS
|
|
//name: bg-color, font-color
|
|
$button-colors: (
|
|
is-cartoframes: ($cartoframes, $white)
|
|
);
|
|
|
|
.button {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 16px 24px;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
font: 600 16px/24px $title__font-family;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
|
|
&.is-outline {
|
|
padding: 14px 22px;
|
|
}
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: transparent;
|
|
transition: background-color 0.1s linear;
|
|
}
|
|
|
|
span {
|
|
position: relative;
|
|
display: inline-flex;
|
|
overflow: hidden;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
transition: transform .3s ease;
|
|
left: -1px;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: currentColor;
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
|
|
span {
|
|
&:before {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
> span {
|
|
position: relative;
|
|
}
|
|
|
|
@each $name, $color in $button-colors {
|
|
&.#{$name} {
|
|
background-color: nth($color, 1);
|
|
color: nth($color, 2);
|
|
&.is-outline {
|
|
background-color: transparent;
|
|
color: nth($color, 1);
|
|
border: 2px solid nth($color, 1);
|
|
}
|
|
&.is-disabled {
|
|
pointer-events: none;
|
|
|
|
span {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button--arrow {
|
|
span {
|
|
&:after{
|
|
content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAyMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBhdGggZD0iTS0yLTdoMjR2MjRILTJ6Ii8+CiAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTQuNzA3LjI5M2wtMS40MTQgMS40MTRMMTUuNTg2IDRIMHYyaDE1LjU4NmwtMi4yOTMgMi4yOTMgMS40MTQgMS40MTRMMTkuNDE0IDV6Ii8+CiAgPC9nPgo8L3N2Zz4=");
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.underlined-link {
|
|
position: relative;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
transition: transform .3s ease;
|
|
left: -1px;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: currentColor;
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
&.reversed {
|
|
&:before {
|
|
left: unset;
|
|
right: -1px;
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
&:hover:before {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.f12 {
|
|
&:before {
|
|
height: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button--small {
|
|
font: 600 12px/16px $title__font-family;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
|
|
&.is-outline {
|
|
padding: 6px 14px;
|
|
}
|
|
|
|
span {
|
|
&:before {
|
|
height: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button--large {
|
|
font: 600 16px/24px $title__font-family;
|
|
}
|