115 lines
2.9 KiB
SCSS
115 lines
2.9 KiB
SCSS
// Breakpoints.
|
|
$breakpoints: (
|
|
xs: 512px,
|
|
sm: 768px,
|
|
md: 896px,
|
|
lg: 1152px,
|
|
xl: 1280px
|
|
);
|
|
|
|
// Colors.
|
|
$dark: #393E4B;
|
|
$accent: #006cff;
|
|
$gray: #adb5bd;
|
|
$outline:#e3e4e6;
|
|
$border: #f0f1f2;
|
|
$light: #f6f7f8;
|
|
$white: #ffffff;
|
|
|
|
// Typography.
|
|
$font-heading: 'Playfair Display', Helvetica, Arial, sans-serif;
|
|
$font-body: 'Roboto', Helvetica, Arial, sans-serif;
|
|
$normal: 300;
|
|
$bolder: 400;
|
|
$bold: 500;
|
|
|
|
// Site.
|
|
$site-radius: 5px;
|
|
$site-border: 1px solid $border;
|
|
|
|
// Columns.
|
|
$margin: 2.564102564102564%;
|
|
$one-half: 48.71794871794871%;
|
|
$one-third: 31.62393162393162%;
|
|
$one-fifth: 17.94871794871794%;
|
|
$one-fourth: 23.07692307692307%;
|
|
$one-sixth: 14.52991452991453%;
|
|
$one-seventh: 12.08791208791208%;
|
|
$one-eighth: 10.25641025641025%;
|
|
$one-ninth: 8.831908831908832%;
|
|
$two-thirds: 65.81196581196582%;
|
|
$two-fourths: 48.71794871794871%;
|
|
$two-fifths: 38.46153846153846%;
|
|
$two-sixths: 31.62393162393162%;
|
|
$three-fourths: 74.35897435897436%;
|
|
$three-fifths: 58.97435897435897%;
|
|
$three-sixths: 48.71794871794871%;
|
|
$four-fifths: 79.48717948717948%;
|
|
$four-sixths: 65.81196581196582%;
|
|
$five-sixths: 82.90598290598291%;
|
|
|
|
// Media Queries.
|
|
@mixin breakpoint( $breakpoint ) {
|
|
|
|
@if map-has-key( $breakpoints, $breakpoint ) {
|
|
|
|
@media ( min-width: #{ map-get( $breakpoints, $breakpoint ) } ) {
|
|
@content;
|
|
}
|
|
|
|
} @else if type_of( $breakpoint ) == number and unit( $breakpoint ) == px or unit( $breakpoint ) == em or unit( $breakpoint ) == rem {
|
|
|
|
@media (min-width: $breakpoint ) {
|
|
@content;
|
|
}
|
|
|
|
} @else {
|
|
|
|
@warn "No value could be retrieved from `#{$breakpoint}`. "
|
|
+ "Please make sure it is defined in `$breakpoints` map, or it is a valid number with supported unit of px, em or rem.";
|
|
}
|
|
}
|
|
|
|
// Clearfix.
|
|
@mixin clearfix {
|
|
clear: both;
|
|
|
|
&:before,
|
|
&:after {
|
|
clear: both;
|
|
display: block;
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
// Transitions.
|
|
@mixin transition {
|
|
-webkit-transition: all .3s ease;
|
|
-moz-transition: all .3s ease;
|
|
-o-transition: all .3s ease;
|
|
transition: all .3s ease;
|
|
}
|
|
|
|
|
|
@mixin gradient {
|
|
background: rgba(0,108,255,1);
|
|
background: radial-gradient(left top,circle cover,rgba(100,66,255,0.9) 15%,rgba(0,108,255,0.9) 50%,rgba(12,180,206,0.9) 85%);
|
|
background: -o-radial-gradient(left top,circle cover,rgba(100,66,255,0.9) 15%,rgba(0,108,255,0.9) 50%,rgba(12,180,206,0.9) 85%);
|
|
background: -ms-radial-gradient(left top,circle cover,rgba(100,66,255,0.9) 15%,rgba(0,108,255,0.9) 50%,rgba(12,180,206,0.9) 85%);
|
|
background: -moz-radial-gradient(left top,circle cover,rgba(100,66,255,0.9) 15%,rgba(0,108,255,0.9) 50%,rgba(12,180,206,0.9) 85%);
|
|
background: -webkit-radial-gradient(left top,circle cover,rgba(100,66,255,0.9) 15%,rgba(0,108,255,0.9) 50%,rgba(12,180,206,0.9) 85%);
|
|
}
|
|
|
|
@mixin overlay {
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
@include gradient;
|
|
}
|
|
} |