includes

mixins   

Mixin definitions

Copy
Edit
<!-- components/includes/mixins.php -->
Copy
Copy
Edit
@mixin multiTransition($duration: 0.4s, $type: ease-out) { -webkit-transition: all $duration $type; -ms-transition: all $duration $type; -moz-transition: all $duration $type; -o-transition: all $duration $type; transition: all $duration $type; } @mixin verticalCenter($position: absolute) { position: $position; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @mixin horizontalCenter($position: absolute) { position: $position; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } @mixin absoluteCenter($position: absolute) { position: $position; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @mixin verticalThirdCenter($position: absolute) { position: $position; top: 35%; left: 50%; -webkit-transform: translate(-50%, -65%); -ms-transform: translate(-50%, -65%); -moz-transform: translate(-50%, -65%); -o-transform: translate(-50%, -65%); transform: translate(-50%, -65%); } @mixin videoBackground { position: absolute; height: 100%; width: 177.77777778vh; /* 100 * 16 / 9 */ min-width: 100%; min-height: 56.25vw; /* 100 * 9 / 16 */ z-index: 0; left: 50%; /* % of surrounding element */ top: 50%; transform: translate(-50%, -50%); /* % of current element */ } @mixin absoluteBlock { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; overflow: hidden; }

variables   

Variable definitions

Copy
Edit
<!-- components/includes/variables.php -->
Copy
Copy
Edit
$fontThin: Arial, helvetica, sans-serif !default; $fontLight: Arial, helvetica, sans-serif !default; $fontRegular: Arial, helvetica, sans-serif !default; $fontBold: Arial, helvetica, sans-serif !default; $fontIcon: "Otis" !default; $imagePath: "../images/"; $fontPath: "../fonts/"; $videoPath: "../videos/"; //VIEWPORTS $extra-large-desktop: "min-width: 1600px"; $large-desktop: "min-width: 1200px"; $small-desktop: "min-width: 992px"; $tablet-viewport: "min-width: 768px"; $device-max: "max-width: 992px"; $mobile-max: "max-width:767px";

typography   

Typography styling

Copy
Edit
<!-- components/includes/typography.php -->
Copy
Copy
Edit
$baseFontSize: 16px; $baseLineHeight: $baseFontSize * 1.5; h1, h2, h3, h4, h5, h6 { font-weight: normal; }

helpers   

The helper classes

Copy
Edit
<!-- components/includes/helpers.php -->
Copy
Copy
Edit
.noPad { padding: 0 !important; } .noMargin { margin: 0 !important; } .text-center { text-align: center; } span[class^="otis-icon-"]:before, span[class*=" otis-icon-"]:before { font-size: $baseFontSize * 1.4; font-weight: normal; border-radius: 50%; border-width: 2px; border-style: solid; padding: 10px; margin: 0 auto; display: inline-block; text-align: center; @media only screen and ($small-desktop) { padding: 20px; font-size: $baseFontSize * 2; } } //BOOTSTRAP HELPERS /* columns of same height styles */ .row-full-height { height: 100%; } .col-full-height { height: auto; vertical-align: middle; } .row-same-height { display: table; width: 100%; /* fix overflow */ table-layout: fixed; } .col-xs-height { display: table-cell; float: none !important; } @media (min-width: 768px) { .col-sm-height { display: table-cell; float: none !important; } } @media (min-width: 992px) { .col-md-height { display: table-cell; float: none !important; } .col-full-height { height: 100%; vertical-align: middle; &.v-top { vertical-align: top; } } } @media (min-width: 1200px) { .col-lg-height { display: table-cell; float: none !important; } } .otis-icon { width: 22px; height: 22px; // font-size: $baseFontSize * 1.4; // font-weight: normal; border-radius: 50%; border-width: 2px; border-style: solid; padding: 10px; margin: 0 auto; display: inline-block; text-align: center; img { max-width: 100%; max-height: 100%; } @media only screen and ($small-desktop) { padding: 20px; // font-size: $baseFontSize * 2; width: 75px; height: 75px; } } /* vertical alignment styles */ .col-top { vertical-align: top; } .col-middle { vertical-align: middle; } .col-bottom { vertical-align: bottom; } /* bg imgs position */ .bg-top { background-position: top center !important; &-left { background-position: top left !important; } &-right { background-position: top right !important; } } .bg-center { background-position: center center !important; &-left { background-position: center left !important; } &-right { background-position: center right !important; } } .bg-bottom { background-position: bottom center !important; &-left { background-position: bottom left !important; } &-right { background-position: bottom right !important; } } .background-wrapper { background-position: center; background-size: cover; background-repeat: no-repeat; @media only screen and ($device-max) { background-image: none !important; } &.otis-black { background-color: $otisBlack; h2, h3, p { color: $tertiaryColor; } } }