mirror of
https://github.com/10h30/ycb.vn.git
synced 2026-06-05 15:10:02 +09:00
Thuan Bui
143 lines
2.8 KiB
SCSS
143 lines
2.8 KiB
SCSS
/* # Variables
|
|
-----------------------------------------------------------------------*/
|
|
|
|
/**
|
|
* ### Breakpoints
|
|
*
|
|
* Based on the most common 16:9 screen resolutions.
|
|
* @link https://pacoup.com/2011/06/12/list-of-true-169-resolutions/
|
|
*/
|
|
|
|
$breakpoints: (
|
|
xs: 512px,
|
|
sm: 768px,
|
|
md: 896px,
|
|
lg: 1152px,
|
|
xl: 1280px
|
|
);
|
|
|
|
/* ### Colors */
|
|
|
|
$accent: #fb2056;
|
|
$black: #000000;
|
|
$dark: #141e28;
|
|
$gray: #556677;
|
|
$medium: #a4a8ac;
|
|
$border: #f0f1f2;
|
|
$light: #f6f7f8;
|
|
$white: #ffffff;
|
|
$overlay: rgba(20,30,40,0.82);
|
|
|
|
/* ### Typography */
|
|
|
|
$font-heading: 'Montserrat', Helvetica, Arial, sans-serif;
|
|
$font-body: 'Hind', Helvetica, Arial, sans-serif;
|
|
$normal: 400;
|
|
$bolder: 600;
|
|
$bold: 700;
|
|
|
|
/* ### Other */
|
|
|
|
$site-radius: 0.4rem;
|
|
$site-border: 0.2rem solid $border;
|
|
$site-transition: 0.75s cubic-bezier(0, 1, 0.5, 1);
|
|
|
|
/* ### Column widths */
|
|
|
|
$margin-left: 2.564102564102564%;
|
|
$one-half : 48.717948717948715%;
|
|
$one-third: 31.623931623931625%;
|
|
$one-fourth: 23.076923076923077%;
|
|
$one-fifth: 17.9487179487179488%;
|
|
$one-sixth: 14.52991452991453%;
|
|
$two-thirds: 65.81196581196582%;
|
|
$two-fifths: 38.4615384615384616%;
|
|
$three-fourths: 74.35897435897436%;
|
|
$three-fifths: 58.9743589743589744%;
|
|
$four-fifths: 79.4871794871794872%;
|
|
$five-sixths: 82.90598290598291%;
|
|
|
|
|
|
/* # Mixins
|
|
-----------------------------------------------------------------------*/
|
|
|
|
/* ### 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: '';
|
|
}
|
|
}
|
|
|
|
/* ### Flexfix */
|
|
|
|
@mixin flexfix {
|
|
&:before,
|
|
&:after {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
/* ### Transitions */
|
|
|
|
@mixin transition {
|
|
-webkit-transition: all $site-transition;
|
|
-moz-transition: all $site-transition;
|
|
-o-transition: all $site-transition;
|
|
transition: all $site-transition;
|
|
}
|
|
|
|
/* ### Overlay */
|
|
|
|
@mixin overlay {
|
|
position: relative;
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: $overlay;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
/* ### Overlay */
|
|
|
|
@mixin center {
|
|
margin: auto;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
} |