first commit
This commit is contained in:
375
layout/style-scss/_mixins.scss
Normal file
375
layout/style-scss/_mixins.scss
Normal file
@@ -0,0 +1,375 @@
|
||||
$breakpoints: (
|
||||
xs: 576px,
|
||||
sm: 768px,
|
||||
md: 992px,
|
||||
lg: 1200px,
|
||||
xl: 1360px,
|
||||
xxl: 1620px,
|
||||
);
|
||||
|
||||
@mixin respond-above($breakpoint) {
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
$breakpoint-value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
@media (min-width: $breakpoint-value) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
||||
}
|
||||
}
|
||||
|
||||
@mixin respond-below($breakpoint) {
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
$breakpoint-value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
@media (max-width: ($breakpoint-value - 1)) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
||||
}
|
||||
}
|
||||
|
||||
@mixin respond-between($lower, $upper) {
|
||||
@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
|
||||
$lower-breakpoint: map-get($breakpoints, $lower);
|
||||
$upper-breakpoint: map-get($breakpoints, $upper);
|
||||
|
||||
@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@if (map-has-key($breakpoints, $lower) ==false) {
|
||||
@warn 'Your lower breakpoint was invalid: #{$lower}.';
|
||||
}
|
||||
|
||||
@if (map-has-key($breakpoints, $upper) ==false) {
|
||||
@warn 'Your upper breakpoint was invalid: #{$upper}.';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-radius($px: 0) {
|
||||
-webkit-border-radius: $px;
|
||||
-moz-border-radius: $px;
|
||||
border-radius: $px;
|
||||
}
|
||||
|
||||
@mixin box-shadow($value) {
|
||||
-webkit-box-shadow: $value;
|
||||
-moz-box-shadow: $value;
|
||||
box-shadow: $value;
|
||||
}
|
||||
|
||||
@mixin transition($element: all, $time: 0.5s, $option: ease) {
|
||||
-webkit-transition: $element $time $option;
|
||||
transition: $element $time $option;
|
||||
}
|
||||
|
||||
@mixin opacity($value) {
|
||||
$IEValue: $value * 100;
|
||||
opacity: $value;
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + $IEValue +
|
||||
')';
|
||||
filter: alpha(opacity=$IEValue);
|
||||
}
|
||||
|
||||
@mixin flexbox() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin flex($values) {
|
||||
-webkit-box-flex: $values;
|
||||
-moz-box-flex: $values;
|
||||
-webkit-flex: $values;
|
||||
-ms-flex: $values;
|
||||
flex: $values;
|
||||
}
|
||||
|
||||
@mixin flex-direction($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-moz-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin flex-wrap($wrap) {
|
||||
-webkit-flex-wrap: $wrap;
|
||||
-moz-flex-wrap: $wrap;
|
||||
-ms-flex-wrap: $wrap;
|
||||
flex-wrap: $wrap;
|
||||
}
|
||||
|
||||
@mixin flex-flow($flow) {
|
||||
-webkit-flex-flow: $flow;
|
||||
-moz-flex-flow: $flow;
|
||||
-ms-flex-flow: $flow;
|
||||
flex-flow: $flow;
|
||||
}
|
||||
|
||||
@mixin order($val) {
|
||||
-webkit-box-ordinal-group: $val;
|
||||
-moz-box-ordinal-group: $val;
|
||||
-ms-flex-order: $val;
|
||||
-webkit-order: $val;
|
||||
order: $val;
|
||||
}
|
||||
|
||||
@mixin flex-grow($grow) {
|
||||
-webkit-flex-grow: $grow;
|
||||
-moz-flex-grow: $grow;
|
||||
-ms-flex-grow: $grow;
|
||||
flex-grow: $grow;
|
||||
}
|
||||
|
||||
@mixin flex-shrink($shrink) {
|
||||
-webkit-flex-shrink: $shrink;
|
||||
-moz-flex-shrink: $shrink;
|
||||
-ms-flex-shrink: $shrink;
|
||||
flex-shrink: $shrink;
|
||||
}
|
||||
|
||||
@mixin flex-basis($width) {
|
||||
-webkit-flex-basis: $width;
|
||||
-moz-flex-basis: $width;
|
||||
-ms-flex-basis: $width;
|
||||
flex-basis: $width;
|
||||
}
|
||||
|
||||
@mixin justify-content($justify) {
|
||||
-webkit-justify-content: $justify;
|
||||
-moz-justify-content: $justify;
|
||||
-ms-justify-content: $justify;
|
||||
justify-content: $justify;
|
||||
-ms-flex-pack: $justify;
|
||||
}
|
||||
|
||||
@mixin align-content($align) {
|
||||
-webkit-align-content: $align;
|
||||
-moz-align-content: $align;
|
||||
-ms-align-content: $align;
|
||||
align-content: $align;
|
||||
}
|
||||
|
||||
@mixin align-items($align) {
|
||||
-webkit-align-items: $align;
|
||||
-moz-align-items: $align;
|
||||
-ms-align-items: $align;
|
||||
align-items: $align;
|
||||
}
|
||||
|
||||
@mixin align-self($align) {
|
||||
-webkit-align-self: $align;
|
||||
-moz-align-self: $align;
|
||||
-ms-align-self: $align;
|
||||
align-self: $align;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-LightItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-LightItalic.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-ExtraLightItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-ExtraLightItalic.woff') format('woff');
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Medium.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-MediumItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-MediumItalic.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form Demi';
|
||||
src: url('/layout/URWForm-Demi.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Demi.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Italic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Italic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Light.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-ThinItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-ThinItalic.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Bold.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-BoldItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-BoldItalic.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Thin.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Thin.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Regular.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form Extra';
|
||||
src: url('/layout/URWForm-ExtraBoldItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-ExtraBoldItalic.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form Extra';
|
||||
src: url('/layout/URWForm-ExtraBold.woff2') format('woff2'),
|
||||
url('/layout/URWForm-ExtraBold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
//* ~~~~ Colors ~~~~ *//
|
||||
$cWhite: #fff;
|
||||
$cMilk: #fafafa;
|
||||
$cSand: #e7dcd0;
|
||||
$cSandLight: #e6dccf;
|
||||
$cGray: #d8d8d8;
|
||||
$cYellow: #ffe604;
|
||||
$cIron: #b2b3b7;
|
||||
$cLightBlue: #4ca8e6;
|
||||
$cDarkNight: #343431;
|
||||
$cDeepDark: #1d1d1b;
|
||||
$cBlack: #000;
|
||||
|
||||
$cTxtWhite: #fff;
|
||||
$cTxtCloud: #d8d8d8;
|
||||
$cTxtLightBlue: #4ca8e6;
|
||||
$cTxtDark: #2c2d2f;
|
||||
$cTxtBlack: #000;
|
||||
//* ~~~~ Mixins ~~~~ *//
|
||||
|
||||
@mixin btn_classic($f_size, $color, $h_color, $bg, $h_bg) {
|
||||
text-align: center;
|
||||
font-size: $f_size;
|
||||
font-weight: 700;
|
||||
font-family: $font2;
|
||||
color: $color;
|
||||
background: $bg;
|
||||
text-transform: uppercase;
|
||||
line-height: 22px;
|
||||
padding: 12px 15px;
|
||||
display: inline-block;
|
||||
min-width: 210px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: $h_bg;
|
||||
color: $h_color !important;
|
||||
}
|
||||
}
|
||||
|
||||
//* ~~~~ Global ~~~~ *//
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding-top: 125px;
|
||||
padding-bottom: 125px;
|
||||
|
||||
@include respond-below(sm) {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.box_title {
|
||||
font-family: 'URW Form', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 35px;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 28px;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.box_subtitle {
|
||||
font-family: 'URW Form';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
color: #000000;
|
||||
}
|
||||
Reference in New Issue
Block a user