styles/sass/mixins.scss
// Mixins.scss
// Snippets of reusable CSS to develop faster and keep code readable
// -----------------------------------------------------------------
// UTILITY MIXINS
// --------------------------------------------------
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
@mixin clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
// Webkit-style focus
// ------------------
@mixin tab-focus() {
outline: thin dotted var(--color-text-light);
outline-offset: -2px;
}
// Center-align a block level element
// ----------------------------------
@mixin center-block() {
display: block;
margin-inline-start: auto;
margin-inline-end: auto;
}
// Sizing shortcuts
// -------------------------
@mixin size($height: 5px, $width: 5px) {
width: $width;
height: $height;
}
@mixin square($size: 5px) {
@include size($size, $size);
}
// Placeholder text
// -------------------------
@mixin placeholder($color: $placeholderText) {
:-moz-placeholder {
color: $color;
}
::-webkit-input-placeholder {
color: $color;
}
}
// Text overflow
// -------------------------
// Requires inline-block or block for proper styling
@mixin text-overflow() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
// FONTS
// --------------------------------------------------
@mixin text-light() {
font-weight: 300;
}
@mixin text-normal() {
font-weight: 400;
}
@mixin text-semibold() {
font-weight: 500;
}
@mixin text-bold() {
font-weight: 700;
}
@mixin text-extrabold() {
font-weight: 800;
}
// Box sizing
@mixin box-sizing($boxmodel) {
box-sizing: $boxmodel;
}
@mixin border-box() {
@include box-sizing(border-box);
}
// FORMS
// --------------------------------------------------
// Block level inputs
@mixin input-block-level {
display: block;
width: 100%;
min-height: 28px; /* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
@include box-sizing(border-box);
}
// Mixin for form field states
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
// Set the text color
> label {
color: $textColor;
}
// Style inputs accordingly
input,
select,
textarea {
color: $textColor;
border-color: $borderColor;
&:focus {
border-color: darken($borderColor, 10%);
@include box-shadow(0 0 6px lighten($borderColor, 20%));
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on,
.input-append .add-on {
color: $textColor;
background-color: $backgroundColor;
border-color: $textColor;
}
}
// CSS3 PROPERTIES
// --------------------------------------------------
// Border Radius
@mixin border-radius($radius: 5px) {
border-radius: $radius;
}
// Drop shadows
@mixin box-shadow($shadow: 0 1px 3px 0 rgba(0,0,0,.25)) {
box-shadow: $shadow;
}
@mixin box-shadow-both($shadow1 , $shadow2) {
box-shadow: $shadow1, $shadow2;
}
// Animate
@mixin animate($animation) {
animation: $animation;
}
// Transitions
@mixin transition($transition) {
-webkit-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
// Transformations
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin scale($ratio) {
-webkit-transform: scale($ratio);
transform: scale($ratio);
}
@mixin scaleY($ratio) {
-webkit-transform: scaleY($ratio);
transform: scaleY($ratio);
}
@mixin scaleX($ratio) {
-webkit-transform: scaleX($ratio);
transform: scaleX($ratio);
}
@mixin translate($x: 0, $y: 0) {
-webkit-transform: translate($x, $y);
transform: translate($x, $y);
}
@mixin skew($x: 0, $y: 0) {
-webkit-transform: skew($x, $y);
transform: skew($x, $y);
}
@mixin translate3d($x: 0, $y: 0, $z: 0) {
-webkit-transform: translate($x, $y, $z);
transform: translate($x, $y, $z);
}
// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
@mixin background-clip($clip) {
-webkit-background-clip: $clip;
-moz-background-clip: $clip;
background-clip: $clip;
}
// User select
// For selecting text on the page
@mixin user-select($select) {
-webkit-user-select: $select;
-moz-user-select: $select;
-o-user-select: $select;
user-select: $select;
-webkit-touch-callout: $select;
-khtml-user-select: $select;
-ms-user-select: $select;
}
// Resize anything
@mixin resizable($direction: both) {
resize: $direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
// CSS3 Content Columns
@mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
-webkit-column-count: $columnCount;
-moz-column-count: $columnCount;
column-count: $columnCount;
-webkit-column-gap: $columnGap;
-moz-column-gap: $columnGap;
column-gap: $columnGap;
}
// Opacity
@mixin opacity($opacity: 100) {
opacity: $opacity / 100;
filter: "alpha(opacity=#{$opacity})";
}
// BACKGROUNDS
// --------------------------------------------------
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
// Reset filters for IE
@mixin reset-filter() {
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
// COMPONENT MIXINS
// --------------------------------------------------
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider() {
height: 1px;
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
overflow: hidden;
background-color: var(--sd-colour-line--medium);
//border-block-end: 1px solid $white;
}
// Reset bootstrap
// ------------------
@mixin reset-bootstrap-effects {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
// Reset button styling
// ------------------
@mixin reset-button {
border: 0;
background: 0;
color: var(--color-text);
}
//--------------------- SHADOW BOXES ---------------------------------
@mixin shadow-box {
background-color: var(--sd-item__main-Bg--alternate);
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}
// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
@mixin navbarVerticalAlign($elementHeight) {
margin-block-start: ($navbarHeight - $elementHeight) / 2;
}
// Popover arrows
// -------------------------
// For tipsies and popovers
#popoverArrow {
@mixin top($arrowWidth: 5px, $color: $black) {
inset-block-end: 0;
inset-inline-start: 50%;
margin-inline-start: -$arrowWidth;
border-inline-start: $arrowWidth solid transparent;
border-inline-end: $arrowWidth solid transparent;
border-block-start: $arrowWidth solid $color;
}
@mixin left($arrowWidth: 5px, $color: $black) {
inset-block-start: 50%;
inset-inline-end: 0;
margin-block-start: -$arrowWidth;
border-block-start: $arrowWidth solid transparent;
border-block-end: $arrowWidth solid transparent;
border-inline-start: $arrowWidth solid $color;
}
@mixin bottom($arrowWidth: 5px, $color: $black) {
inset-block-start: 0;
inset-inline-start: 50%;
margin-inline-start: -$arrowWidth;
border-inline-start: $arrowWidth solid transparent;
border-inline-end: $arrowWidth solid transparent;
border-block-end: $arrowWidth solid $color;
}
@mixin right($arrowWidth: 5px, $color: $black) {
inset-block-start: 50%;
inset-inline-start: 0;
margin-block-start: -$arrowWidth;
border-block-start: $arrowWidth solid transparent;
border-block-end: $arrowWidth solid transparent;
border-inline-end: $arrowWidth solid $color;
}
}
// SPINNER
// ----------------------------------------------
@mixin spinner-big {
background-image: url("~images/loading-large.gif");
background-repeat: no-repeat;
background-position: center;
display: inline-block;
width: 100%;
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
}
@mixin spinner-alt {
background-image: url("~images/loading-small.gif");
background-repeat: no-repeat;
background-position: center;
display: inline-block;
width: 100%;
height: 32px;
line-height: 32px;
vertical-align: middle;
text-align: center;
}
// Generates the flex order based on the custom 'order' attribute added for the fields in the authoring header and authoring content
@mixin generate-orders($length) {
@for $i from 1 through $length {
[order="#{$i}"] {
order: $i
}
}
}
@include generate-orders(40);
// Defines the width of the items in the authoring header based on the custom 'sd-width' attribute
[sd-width="full"] {flex-basis: 100%}
[sd-width="half"] {flex-basis: 50%}
[sd-width="third"] {flex-basis: 33%}
[sd-width="quarter"] {flex-basis: 25%}
// Transitions
$enable-transitions: true !default;
@mixin transition($transition...) {
@if $enable-transitions {
transition: $transition;
}
}
@mixin actioning($big: true) {
background-color: fade(#f7f7f7, 20%);
border-color: fade(#cfcfcf, 20%);
&:before {
content: '';
zoom: .7;
inset-block-start: 50%;
transform: translateY(-50%);
position: absolute;
z-index: 1;
@if $big {
@include spinner-big();
}
@else {
@include spinner-alt();
}
}
}
@mixin two-col-list {
padding: 0.4rem 0 0.2rem 0;
// background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.12) 2%,rgba(0,0,0,0.6) 100%);
color: inherit;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 1.3rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
grid-gap: 0 1.6rem;
z-index: 2;
transition: 0.2s linear opacity;
text-align: start;
span {
display: block;
padding: 0.6rem 0;
border-block-end: 1px dotted rgba(123, 123, 123, 0.5);
em {
font-style: normal;
color: inherit;
opacity: 0.9;
font-weight: 300;
padding-inline-end: 0.4rem;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
&:nth-child(1), &:nth-child(2) {
border-block-start: 1px dotted rgba(123, 123, 123, 0.5);
}
}
&--top-overlay {
padding: 0.2rem 0 0.6rem 0;
margin-block-start: 0;
background: none;
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
span {
padding-block-end: 0.4rem;
border: none !important;
}
}
&--bottom-overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.12) 2%,rgba(0,0,0,0.6) 100%);
}
&--side-marg0 {
margin-inline-start: 0;
margin-inline-end: 0;
}
}
@mixin image-overlay {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
inset-inline-start: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: rgba(0, 0, 0, 0.5);
transition: 0.2s linear opacity;
z-index: 1;
opacity: 0;
color: $white;
}
@mixin image-overlay_actions-block {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-grow: 1;
}
@mixin image-overlay_action-button {
flex-grow: 0;
flex-shrink: 0;
color: $white;
width: 5.6rem;
height: 5.6rem;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: 0.2s linear all;
cursor: pointer;
text-decoration: none;
background-color: rgba(0, 0, 0, 0);
i {
color: $white;
height: 2.4rem;
width: 2.4rem;
font-size: 2.4rem;
line-height: 1;
opacity: 0.5;
transition: 0.2s linear all;
}
&:hover {
border-color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 0.4);
text-decoration: none;
i {
opacity: 1;
}
}
&:active {
border-color: $sd-blue;
background-color: rgba(0, 0, 0, 0.6);
i {
color: $sd-blue;
}
}
}
@mixin basic-input {
border: 1px solid var(--sd-colour-line--light);
border-radius: 3px;
padding-inline-end: 5px;
padding-inline-start: 5px;
transition: all 0.2s ease;
color: var(--color-text);
background-color: var(--sd-colour-bg__searchbar);
&:hover {
border: 1px solid var(--sd-colour-line--strong);
}
&:focus {
border: 1px solid var(--sd-colour-interactive--alpha-70);
box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
}
&[disabled] {
border-color: var(--sd-colour-line--x-light);
background-color: var(--sd-colour-bg__searchbar);
}
}
@mixin header-toggle {
position: absolute;
width: var(--toggleWidth);
height: var(--toggleHeight);
border: 0;
padding: 0 0 4px;
inset-inline-start: 50%;
margin-inline-start: calc(-1 * (var(--toggleWidth) / 2)) ;
inset-block-end: calc(-1 * var(--toggleHeight));
background-color: var(--toggleBG);
z-index: 3;
line-height: 0;
border-radius: 0 0 var(--b-radius--full) var(--b-radius--full);
box-shadow: 0 -2px 0 0 var(--toggleBG), 0 1px 3px 0 rgba(0,0,0,0.3);
border: 1px solid var(--toggleBorderColor);
border-block-start: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.12s ease-in;
i {
height: 15px;
color: $sd-text;
opacity: 0.75;
transition: all 0.5s;
}
&:hover {
height: var(--toggleHeigh--Hover);
inset-block-end: calc(-1 * var(--toggleHeigh--Hover));
padding-block-start: 2px;
i {
opacity: 1;
}
}
&.active {
i {
@include rotate(180deg);
}
}
}