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.
119 lines
2.1 KiB
119 lines
2.1 KiB
// -------------------------------------------
|
|
// Misc. utilities & helper class
|
|
// -------------------------------------------
|
|
|
|
.row-hover {
|
|
&:hover {
|
|
background-color: rgba($brand-faded, 60%/100.0%);
|
|
}
|
|
}
|
|
|
|
.clickable-element {
|
|
cursor: pointer;
|
|
@include transition(all 0.3s ease-in);
|
|
|
|
&:hover {
|
|
@include opacity(0.9);
|
|
}
|
|
}
|
|
|
|
[data-scroll="scroll-state"] {
|
|
// Starts hidden, shows on scroll state active
|
|
&.scroll-state-hidden {
|
|
@include transition(all 0.3s ease-in);
|
|
@include opacity(0);
|
|
z-index: -1;
|
|
|
|
&.scroll-state-active {
|
|
@include opacity(1);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
// Starts shown, hides on scroll state active
|
|
&.scroll-state-shown {
|
|
@include transition(all 0.3s ease-in);
|
|
@include opacity(1);
|
|
|
|
&.scroll-state-active {
|
|
@include opacity(0);
|
|
z-index: -1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hover styles
|
|
.link-effect-underline {
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 3px;
|
|
bottom: 0;
|
|
left: 0;
|
|
-webkit-transform: scaleX(0);
|
|
transform: scaleX(0);
|
|
-webkit-transition: all .3s ease-in-out 0s;
|
|
transition: all .3s ease-in-out 0s;
|
|
}
|
|
|
|
&.nav-link:after {
|
|
height: 3px;
|
|
}
|
|
|
|
&:hover,
|
|
&.active {
|
|
text-decoration: none;
|
|
|
|
&:after {
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.link-effect-slideup {
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.nav-link-inner {
|
|
display: inline-block;
|
|
position: relative;
|
|
@include transition(all 0.2s ease-in);
|
|
|
|
&:after {
|
|
position: absolute;
|
|
top: 200%;
|
|
content: attr(data-title);
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-moz-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
color: $primary_colour;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
.nav-link-inner {
|
|
-webkit-transform: translateY(-200%);
|
|
-moz-transform: translateY(-200%);
|
|
transform: translateY(-200%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.hover-grow {
|
|
@include transition(all 0.2s ease);
|
|
&:hover {
|
|
@include scale(1.1);
|
|
}
|
|
|
|
&.hover-grow-sm:hover {
|
|
@include scale(1.05);
|
|
}
|
|
}
|