mirror of https://github.com/thangisme/notes.git
65 lines
1002 B
SCSS
65 lines
1002 B
SCSS
// Font size
|
|
|
|
@mixin fs-1 {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
@mixin fs-2 {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
@mixin fs-3 {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
@mixin fs-4 {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
@mixin fs-5 {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
@mixin fs-6 {
|
|
font-size: 24px !important;
|
|
}
|
|
|
|
@mixin fs-7 {
|
|
font-size: 32px !important;
|
|
}
|
|
|
|
@mixin fs-8 {
|
|
font-size: 36px !important;
|
|
}
|
|
|
|
@mixin fs-9 {
|
|
font-size: 42px !important;
|
|
}
|
|
|
|
@mixin fs-10 {
|
|
font-size: 48px !important;
|
|
}
|
|
|
|
// Media query
|
|
|
|
// Media query mixin
|
|
// Usage:
|
|
// @include mq(md) {
|
|
// ..medium and up styles
|
|
// }
|
|
@mixin mq($name) {
|
|
// Retrieves the value from the key
|
|
$value: map-get($media-queries, $name);
|
|
|
|
// If the key exists in the map
|
|
@if $value != null {
|
|
// Prints a media query based on the value
|
|
@media (min-width: rem($value)) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@warn "No value could be retrieved from `#{$media-query}`. "
|
|
+ "Please make sure it is defined in `$media-queries` map.";
|
|
}
|
|
}
|