test Drupal site working on Koality Theme Builder
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.
 
 
 
 
 
 

96 lines
2.0 KiB

//=======================================================
// Mixins
//=======================================================
// Clearfix
@mixin clearfix {
&::after {
content: '';
display: table;
clear: both;
}
}
// Makes an element visually hidden, but accessible.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
// Turns off the element-invisible effect.
@mixin element-invisible-off {
position: static !important;
clip: auto;
height: auto;
width: auto;
overflow: auto;
}
// Makes an element visually hidden by default, but visible when focused.
@mixin element-focusable {
@include element-invisible;
&:active,
&:focus {
@include element-invisible-off;
}
}
// Helper function for working with Sass maps.
// Example: @include print($configuration);
@mixin print($declarations) {
@each $property, $value in $declarations {
#{$property}: $value;
}
}
@mixin ghost-button-mono($inverted: false) {
width: auto;
padding: $button-padding;
text-decoration: none;
transition: all 150ms ease;
cursor: pointer;
@if ($inverted == true) {
border: 2px solid $color-white;
border-radius: 0;
background-color: $color-black;
color: $color-white;
&:hover {
background-color: $color-white;
color: $color-black;
text-decoration: none;
transition: all 150ms ease;
}
} @else {
border: 2px solid $color-black;
border-radius: 0;
background-color: $color-white;
color: $color-black;
&:hover {
background-color: $color-black;
color: $color-white;
text-decoration: none;
transition: all 150ms ease;
}
}
}
%bust-out {
margin: {
left: calc(50% - 50vw);
right: calc(50% - 50vw);
}
transform: translateX(calc(50vw - 50%));
}
@mixin bust-out($margin-right: null, $margin-left: $margin-right, $aspect-ratio: null) {
@extend %bust-out !optional;
}