File: D:/HostingSpaces/stafa/stafa.nl/resources/sass/site/2-Tools/_tools.toolbox.scss
/** =====================================================================================
* Toolbox functions
===================================================================================== */
/**
* Maths helpers.
* Halve and double numbers, returning rounded integers.
USAGE:
.foo {
padding: halve(30px);
}
*/
@function quarter($number) {
@return round($number / 4);
}
@function halve($number) {
@return round($number / 2);
}
@function double($number) {
@return round($number * 2);
}
@function triple($number) {
@return round($number * 3);
}
@function quadruple($number) {
@return round($number * 4);
}
/**
* Remove the unit of a length
* @param {Number} $number - Number to remove unit from
* @return {Number} - Unitless number
*/
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
/* Check if value is number */
@function is-number($value) {
@return type-of($value) == 'number';
}
/* Value to Em */
@function valueToRem($value) {
$noUnits: strip-unit($value);
@return #{$noUnits / 16 * 1rem};
}
/* Value to Rem */
@function valueToEm($value) {
$noUnits: strip-unit($value);
@return #{$noUnits / 16 * 1em};
}
/**
* A simple function for accessing the colors from our mapping
* To access colors in our palette, we use a very simple custom Sass function
USAGE:
a {
color: palette(primary);
&:hover {
color: palette(primary, 400);
}
}
*/
@function palette($palette, $level: null) {
@if map-has-key($palettes, $palette) {
@if map-has-key(map-get($palettes, $palette), $level) {
@return map-get(map-get($palettes, $palette), $level);
} @else {
// If level doesn't exist in map, give the first value of the palette
@return nth(nth(map-get($palettes, $palette), 1), 2);
}
}
@warn "Unknown color: `#{$palette}` in $palette. ";
@return hotpink;
}
// Set a fixed space based on the 8pt grid
// Just pass the function a number equal to the number of (8)points you need
@function space($size: '1') {
@return 8px * $size;
}
/*
* Set vertical spacing only for mobile viewport
USAGE:
.example {
@include vspacing-s(
'margin-top' 1
);
}
*/
@mixin vspacing-s($values...) {
@include mq($max: m) {
@each $i in $values {
// By setting gutter size as a halve column width we can make 'squares' on mobile
#{nth($i, 1)}: #{($site-gutter-width * 2) * nth($i, 2)};
}
}
}
@mixin vspacing-m($values...) {
@include mq(m, l) {
@each $i in $values {
#{nth($i, 1)}: #{(1 / ($site-columns-m + 2) * 100) * nth($i, 2)}vw;
}
}
}
@mixin vspacing-l($values...) {
@include mq(l, $bp-max) {
@each $i in $values {
#{nth($i, 1)}: #{(1 / ($site-columns-l + 2) * 100) * nth($i, 2)}vw;
}
}
}
@mixin vspacing-max($values...) {
@include mq($bp-max) {
@each $i in $values {
#{nth($i, 1)}: #{($site-max-width / $site-columns-l) * nth($i, 2)}px;
}
}
}
/*
* From values given return the correct v-spacing for each breakpoint
*/
@mixin vspacing($values...) {
@include vspacing-s($values...);
@include vspacing-m($values...);
@include vspacing-l($values...);
@include vspacing-max($values...);
}
@mixin vspacing-m-up($values...) {
@include vspacing-m($values...);
@include vspacing-l($values...);
@include vspacing-max($values...);
}
@mixin vspacing-m-down($values...) {
@include vspacing-s($values...);
@include vspacing-m($values...);
}
@mixin vspacing-l-up($values...) {
@include vspacing-l($values...);
@include vspacing-max($values...);
}
@mixin vspacing-l-down($values...) {
@include vspacing-s($values...);
@include vspacing-m($values...);
@include vspacing-l($values...);
}
/**
* A simple function for setting a consistent box-shadow
USAGE:
.card {
@include box-shadow;
}
.card--alt {
@include box-shadow(low);
}
*/
@mixin box-shadow($type: high) {
@if ($type == 'high') {
box-shadow: 0 20px 30px -10px palette(box-shadow);
}
@if ($type == 'low') {
box-shadow: 0 1px 6px 0 palette(box-shadow);
}
}
/**
* A simple function for setting a consistent border-radius
USAGE:
.card {
@include border-radius;
}
.card--alt {
@include border-radius(l);
}
*/
@mixin border-radius($type: s) {
@if ($type == 's') {
border-radius: map-get($border-radius, s);
}
@if ($type == 'm') {
border-radius: map-get($border-radius, m);
}
@if ($type == 'l') {
border-radius: map-get($border-radius, l);
}
}
/**
* Lobotomized Owl Selector mixin:
* - Set spacing for consecutive items with margin-top on all but the first item
USAGE:
.box {
@include owl-children;
}
.card__item {
@include owl;
}
*/
// Gives the children of the element spacing
@mixin owl-children($margin: #{$line-height-ratio}rem) {
& > * + * {
margin-top: $margin;
}
}
// Gives the element itself spacing
@mixin owl($margin: #{$line-height-ratio}rem) {
& + & {
margin-top: $margin;
}
}
/**
* Show hyphens for every browser supporting it
* and will break lines in every other browser
*/
@mixin hyphenate {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/*
* Restrict an element to a max-width for creating gutters on the side
*/
@mixin contain($onMedium: true) {
width: calc(100% - #{double($site-gutter-width)}); // Making sure it doesn’t get to small with little content
margin-left: auto;
margin-right: auto;
@include mq(m) {
@if($onMedium == true) {
width: calc((100% / #{$site-columns-m + 2}) * #{$site-columns-m});
} @else {
width: 100%;
}
}
@include mq(l) {
width: calc((100% / #{$site-columns-l + 2}) * #{$site-columns-l});
max-width: #{$site-max-width}px;
}
}
@mixin breakout() {
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}
// A mixin to set elements to its own named grid-area
@mixin template($elements...) {
@each $element in $elements {
&__#{$element} {
grid-area: $element;
display: block; // In IE grid items can't be inline
}
}
}
// Basic heading styling
@mixin text-style($type: 4){
@if($type == 1){
@include font-size(l);
@include font-family(primary);
@include font-weight(bold);
@include mq(m){
@include font-size(xl);
}
}
@if($type == 2){
@include font-size(m);
@include font-family(primary);
@include font-weight(regular);
@include mq(m){
@include font-size(l);
}
}
@if($type == 3){
@include font-size(m);
@include font-family(primary);
@include font-weight(bold);
}
@if($type == 4){
@include font-weight(bold);
}
@if($type == 5){
@include font-family(primary);
@include font-weight(bold);
@include font-size(xs);
text-transform: uppercase;
letter-spacing: 2px;
}
}
// A colored background with a gradient and a triangle shaped shadow/shade
@mixin bg-triangle-shade($shade: primary, $origin: null){
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
overflow: hidden;
&::before {
pointer-events: none;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 2000%;
height: 2000%;
background-color: rgba(palette(primary, 900), .1);
transform-origin: left top;
transform: matrix(0.9, 0.52, -0.9, 0.52, 0, -2);
}
@if ($shade == primary) {
background: linear-gradient(palette(primary, 500), palette(primary, 700));
}
@if ($shade == neutral) {
&::before {
top: space(16);
background-color: palette(neutral, 100);
}
}
}
// Decorative element in the shape of a hexagon
// Options for size and position
@mixin ornament-hex-stroked($type: null, $position: 'bottomleft') {
position: absolute;
@if ($type == null) {
$width: 48px;
$aspectRatio: 1.144329897;
width: #{$width};
height: #{$width * $aspectRatio};
background-image: url(/img/ornament-hexagon--stroked.svg);
@include mq(800) {
$width: 96px;
width: #{$width};
height: #{$width * $aspectRatio};
}
}
@if ($type == 'halve') {
$width: 24px;
$aspectRatio: 2.285526316;
width: #{$width};
height: #{$width * $aspectRatio};
background-image: url(/img/ornament-hexagon-halve--stroked.svg);
@include mq(480, m) {
$width: 48px;
width: #{$width};
height: #{$width * $aspectRatio};
}
@include mq(m) {
$width: 76px;
width: #{$width};
height: #{$width * $aspectRatio};
}
}
@if ($position == 'bottomleft') {
bottom: 0;
left: 0;
transform: translateY(50%) rotate(180deg);
}
@if ($position == 'topright') {
top: 0;
right: 0;
transform: translateY(-50%);
}
}