@import "./assets/hover/effects/2d-transitions/grow"; @import "./assets/hover/effects/2d-transitions/bob"; @import "./assets/hover/effects/background-transitions/fade"; @mixin onymGrow($scale: 1.1, $duration: $mediumDuration) { @include hacks(); @include prefixed(transition-duration, $duration); @include prefixed(transition-property, transform); &:hover, &:focus, &:active { @include prefixed(transform, scale(1.4)); } } @mixin onymFade() { @include hacks(); overflow: hidden; @include prefixed(transition-duration, $slowDuration); @include prefixed(transition-property, "color, background-color, border-color"); &:hover, &:focus, &:active { background-color: $activeColor; color: white; } } @mixin onymParallax() { background-repeat: no-repeat; // background-size: 115%; background-size: cover; background-position-x: 50%; background-position-y: 50%; overflow: hidden; box-sizing: border-box; position: static; text-align: center; -webkit-transition:background-position .5s ease-in; -moz-transition:background-position .5s ease-in; -o-transition:background-position .5s ease-in; transition:background-position .5s ease-in; @include mq($from: tablet) { // background-attachment: fixed; } } @mixin onymHeadlineSection() { height: $headerHeightMobile; max-height: $headerHeightMobile; position: relative; overflow: hidden; //@include mq($from: tablet, $until: desktop) { // max-height: $headerHeightTablet; // height: $headerHeightTablet; //} // //@include mq($from: desktop, $until: large) { // max-height: $headerHeightDesktop; // height: $headerHeightDesktop; //} // //@include mq($from: large, $until: xwide) { // max-height: $headerHeightLarge; // height: $headerHeightLarge; //} // //@include mq($from: xwide) { // max-height: $headerHeightXWide; // height: $headerHeightXWide; //} // @include onymParallax; } @mixin onymSectionTitle() { font-size: 22px; text-transform: uppercase; font-weight: 400; text-align: center; margin-top: 0; margin-bottom: 48px; &:only-child { margin-bottom: 0; } @include mq($from: tablet) { font-size: 26px; } } @mixin angle($pseudo, $flip: false, $angle: 1.5deg) { // Possible values for $pseudo are: before, after, both @if $pseudo == 'before' or $pseudo == 'after' or $pseudo == 'both' { position: relative; z-index: 1; $selector: if($pseudo == 'both', '&:before,&:after', '&:#{$pseudo}'); #{$selector} { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; // for Chrome Windows } @if $pseudo == 'before' { #{$selector} { top: 0; @if $flip { transform: skewY($angle * -1); transform-origin: 0 0; } @else { transform: skewY($angle); transform-origin: 100% 0; } } } @if $pseudo == 'after' { #{$selector} { bottom: 0; @if $flip { transform: skewY($angle); transform-origin: 0 100%; } @else { transform: skewY($angle * -1); transform-origin: 100%; } } } @if $pseudo == 'both' { &:before { top: 0; @if $flip { transform: skewY($angle * -1); transform-origin: 0 0; } @else { transform: skewY($angle); transform-origin: 100% 0; } } &:after { bottom: 0; @if $flip { transform: skewY($angle); transform-origin: 0 0; } @else { transform: skewY($angle * -1); transform-origin: 100%; } } } } } @mixin clearfix { &:after { content: ""; display: table; clear: both; } } @mixin highlighted-entry-title($color: $onymTextColor, $bgColor: $onymWhite, $size: 4px) { background: $bgColor; display: inline; box-shadow: $size $bgColor; box-shadow: $size 0 0 $bgColor, -$size 0 0 $bgColor; color: $color !important; }