414 lines
9.3 KiB
SCSS
Executable file
414 lines
9.3 KiB
SCSS
Executable file
/// _utils.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
|
|
|
/*========== VARIABLES ==========*/
|
|
|
|
// Defining breakpoints
|
|
$medium: 620px !default;
|
|
$wide: 800px !default;
|
|
$huge: 1600px !default;
|
|
$mediumContainer: 688px !default;
|
|
$wideContainer: 864px !default;
|
|
|
|
// Defining grid sizes
|
|
$mediumColCount: 3 !default;
|
|
$mediumColWidth: 30.3% !default;
|
|
$mediumGutterWidth: 4.5% !default;
|
|
$wideColCount: 4 !default;
|
|
$wideColWidth: 22.2% !default;
|
|
$wideGutterWidth: 3.7% !default;
|
|
|
|
// Defining colors
|
|
$colorBlue: #3372df !default;
|
|
$colorBlueSecondary: lighten($colorBlue, 30%) !default;
|
|
$colorGreen: #0f9d58 !default;
|
|
$colorGreenSecondary: lighten($colorGreen, 30%) !default;
|
|
$colorRed: #cb4437 !default;
|
|
$colorRedSecondary: lighten($colorRed, 30%) !default;
|
|
$colorYellow: #f4b400 !default;
|
|
$colorYellowSecondary: lighten($colorYellow, 20%) !default;
|
|
|
|
$colorRemember: #09829a !default;
|
|
$colorLearning: #da2e75 !default;
|
|
|
|
$colorGrayBackground: #f0f0f0 !default;
|
|
$colorGrayKeyline: #e0e0e0 !default;
|
|
$colorGray: #737373 !default;
|
|
$colorGrayLight: #eeeeee !default;
|
|
$colorGrayDark: #404040 !default;
|
|
|
|
$colorText: $colorGrayDark !default;
|
|
$colorHighlight: $colorBlue !default;
|
|
$colorWarning: $colorYellowSecondary !default;
|
|
$colorMuted: $colorGray !default;
|
|
$colorDanger: $colorRed !default;
|
|
|
|
$colorLayouts: #297ea9 !default;
|
|
$colorLayoutsSecondary: lighten($colorLayouts, 30%) !default;
|
|
$colorUser: #2c8566 !default;
|
|
$colorUserSecondary: lighten($colorUser, 30%) !default;
|
|
$colorMedia: #cf423a !default;
|
|
$colorMediaSecondary: lighten($colorMedia, 30%) !default;
|
|
$colorPerformance: #7b5294 !default;
|
|
$colorPerformanceSecondary: lighten($colorPerformance, 30%) !default;
|
|
|
|
// Defining font family
|
|
$fontDefault: 'Ubuntu', Helvetica, Arial, sans-serif !default;
|
|
$fontHighlight: 'Ubuntu', Helvetica, sans-serif !default;
|
|
$fontIcon: 'icons' !default;
|
|
|
|
// Defining font sizes
|
|
$fontSmall: 13px !default;
|
|
$fontBase: 16px !default;
|
|
$fontMedium: 20px !default;
|
|
$fontLarge: 26px !default;
|
|
$fontXLarge: 42px !default;
|
|
$fontXXLarge: 68px !default;
|
|
$fontHuge: 110px !default;
|
|
|
|
// Defining baseline line height
|
|
$lineHeight: 26px !default;
|
|
|
|
// Defining animation easings
|
|
$animationEasing: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
|
|
|
|
// Defining sidebar stuff
|
|
$sidebarWidth: 280px !default;
|
|
|
|
|
|
/*========== FUNCTIONS ==========*/
|
|
|
|
@function leading($size, $context: $lineHeight) {
|
|
@return $context / $size + em;
|
|
}
|
|
|
|
|
|
/*========== MIXINS ==========*/
|
|
|
|
@mixin media-query($media-query) {
|
|
@if $media-query == small {
|
|
@media only screen and (max-width: $medium - 1) { @content; }
|
|
}
|
|
|
|
@if $media-query == medium {
|
|
@media only screen and (min-width: $medium) { @content; }
|
|
}
|
|
|
|
@if $media-query == medium-only {
|
|
@media only screen and (min-width: $medium) and (max-width: $wide - 1) { @content; }
|
|
}
|
|
|
|
@if $media-query == wide {
|
|
@media only screen and (min-width: $wide) { @content; }
|
|
}
|
|
|
|
@if $media-query == huge {
|
|
@media only screen and (min-width: $huge) { @content; }
|
|
}
|
|
}
|
|
|
|
// Just some helpers...
|
|
@mixin small-only { @include media-query(small) { @content }; }
|
|
@mixin medium { @include media-query(medium) { @content }; }
|
|
@mixin medium-only { @include media-query(medium-only) { @content }; }
|
|
@mixin wide { @include media-query(wide) { @content }; }
|
|
@mixin huge { @include media-query(huge) { @content }; }
|
|
|
|
// Mixin to constrain elements
|
|
@mixin container($isRelative: false) {
|
|
box-sizing: content-box;
|
|
|
|
@if $isRelative {
|
|
position: relative;
|
|
}
|
|
|
|
padding-left: 5%;
|
|
padding-right: 5%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
|
|
@include medium {
|
|
padding-left: 4.8%;
|
|
padding-right: 4.8%;
|
|
max-width: $mediumContainer;
|
|
}
|
|
|
|
@include wide {
|
|
padding-left: 4.4%;
|
|
padding-right: 4.4%;
|
|
max-width: $wideContainer;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Mixin to show a baseline grid
|
|
// only visible when body has 'debug' class
|
|
@mixin baseline-grid() {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
z-index: 9;
|
|
|
|
display: none;
|
|
background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 95%,rgba(0,0,0,0.15) 100%);
|
|
|
|
background-size: 100% 26px;
|
|
}
|
|
|
|
&.debug::after {
|
|
display: block;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
// Mixins simply to store CSS rules
|
|
@mixin rule--small {
|
|
font-size: $fontSmall;
|
|
line-height: 2.0000em; /* 26px */
|
|
padding-top: 2.0000em;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@mixin rule--base {
|
|
font-size: $fontBase;
|
|
line-height: 1.6250em; /* 26px */
|
|
padding-top: 1.6250em;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@mixin rule--medium {
|
|
font-size: $fontMedium;
|
|
font-weight: 300;
|
|
line-height: 1.3000em; /* 26px */
|
|
padding-top: 1.3000em;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@mixin rule--large {
|
|
font-family: $fontHighlight;
|
|
font-size: $fontLarge;
|
|
font-weight: 300;
|
|
line-height: 1.0000em; /* 26px */
|
|
padding-top: 1.0000em;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@mixin rule--xlarge {
|
|
font-family: $fontHighlight;
|
|
font-size: $fontXLarge;
|
|
font-weight: 300;
|
|
line-height: 1.2381em; /* 52px */
|
|
padding-top: 0.6190em;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@mixin rule--xxlarge {
|
|
font-family: $fontHighlight;
|
|
font-size: $fontXXLarge;
|
|
font-weight: 300;
|
|
line-height: 1.1471em; /* 78px */
|
|
padding-top: 0.3824em;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@mixin rule--huge {
|
|
font-family: $fontHighlight;
|
|
font-size: $fontHuge;
|
|
font-weight: 300;
|
|
line-height: 1.19em; /* 130px */
|
|
padding-top: 0.2364em;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
|
|
|
|
// Mixins to determine which rule to use at which breakpoint
|
|
@mixin type--small($isFromMixin: false) {
|
|
@include rule--small;
|
|
}
|
|
|
|
@mixin type--base($isFromMixin: false) {
|
|
@include rule--base;
|
|
}
|
|
|
|
@mixin type--medium($isFromMixin: false) {
|
|
@if $isFromMixin == false {
|
|
@include type--base(true);
|
|
@include wide {
|
|
@include rule--medium;
|
|
}
|
|
}
|
|
@else {
|
|
@include rule--medium;
|
|
}
|
|
}
|
|
|
|
@mixin type--large($isFromMixin: false) {
|
|
@if $isFromMixin == false {
|
|
@include type--medium(true);
|
|
@include wide {
|
|
@include rule--large;
|
|
}
|
|
}
|
|
@else {
|
|
@include rule--large;
|
|
}
|
|
}
|
|
|
|
@mixin type--xlarge($isFromMixin: false) {
|
|
@if $isFromMixin == false {
|
|
@include type--large(true);
|
|
@include wide {
|
|
@include rule--xlarge;
|
|
}
|
|
}
|
|
@else {
|
|
@include rule--xlarge;
|
|
}
|
|
}
|
|
|
|
@mixin type--xxlarge($isFromMixin: false) {
|
|
@if $isFromMixin == false {
|
|
@include type--xlarge(true);
|
|
@include wide {
|
|
@include rule--xxlarge;
|
|
}
|
|
}
|
|
@else {
|
|
@include rule--xxlarge;
|
|
}
|
|
}
|
|
|
|
@mixin type--huge($isFromMixin: false) {
|
|
@if $isFromMixin == false {
|
|
@include type--xxlarge(true);
|
|
@include wide {
|
|
@include rule--huge;
|
|
}
|
|
}
|
|
@else {
|
|
@include rule--huge;
|
|
}
|
|
}
|
|
|
|
|
|
// LISTS
|
|
@mixin bullet-type($bullet, $icon: false) {
|
|
&::before {
|
|
@if $icon {
|
|
font-family: $fontIcon;
|
|
@extend .#{$icon}::before;
|
|
font-size: $fontSmall;
|
|
}
|
|
@else {
|
|
content: $bullet;
|
|
font-family: $fontHighlight;
|
|
}
|
|
|
|
display: block;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
line-height: $lineHeight;
|
|
|
|
}
|
|
}
|
|
|
|
@mixin numbered-list() {
|
|
&::before {
|
|
counter-increment: list;
|
|
content: '0' counter(list);
|
|
color: inherit;
|
|
font-weight: 400;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
// Mixin to create links
|
|
@mixin style-cta($textColor, $linkIcon: false) {
|
|
font-family: $fontHighlight;
|
|
color: $textColor;
|
|
font-weight: 400;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
|
|
&:hover {
|
|
color: $colorGrayDark;
|
|
}
|
|
|
|
@if $linkIcon {
|
|
text-decoration: none;
|
|
&::before {
|
|
display: inline-block;
|
|
padding-right: 10px;
|
|
font-family: $fontIcon;
|
|
line-height: ($lineHeight) - 1; // remove 1px from line-height to fix baseline alignment
|
|
font-size: $fontSmall;
|
|
content: $linkIcon;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mixin to create highlight modules
|
|
@mixin highlight-symbol($verticalOffset: 0, $horizontalOffset: 45px, $fontSize: 130px) {
|
|
position: relative;
|
|
|
|
&::before {
|
|
display: none;
|
|
|
|
@include medium {
|
|
display: block;
|
|
position: absolute;
|
|
top: 106px;
|
|
right: $horizontalOffset;
|
|
|
|
font-family: $fontIcon;
|
|
font-size: $fontSize;
|
|
line-height: 1px;
|
|
text-align: center;
|
|
height: 100%;
|
|
width: $mediumColWidth;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.highlight-module--left & {
|
|
right: auto;
|
|
left: $horizontalOffset;
|
|
}
|
|
|
|
@include wide {
|
|
top: 134px;
|
|
width: $wideColWidth;
|
|
font-size: $fontSize + 50;
|
|
|
|
.highlight-module--large & {
|
|
font-size: $fontSize + 300;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Grid CSS rules
|
|
@mixin rule--col($mediaQuery) {
|
|
@if $mediaQuery == medium {
|
|
float: left;
|
|
margin-right: $mediumGutterWidth;
|
|
}
|
|
|
|
@if $mediaQuery == wide {
|
|
float: left;
|
|
margin-right: $wideGutterWidth;
|
|
}
|
|
}
|