Marcelo Puebla / autoservicio-axion

Download as
Browse Code ยป

Commit 73c786064bcb9c1051c3032a97891f7bf1b89fe1

Authored by Marcelo Puebla
1 parent c21bb9f859
Exists in develop

Fix 

Warning en hoja de estilos
Showing 1 changed file with 1 additions and 0 deletions   Show diff stats
src/scss/typography.scss
Diff comments   View file @ 73c7860
1 @import "node_modules/bootstrap/scss/functions"; 1 @import "node_modules/bootstrap/scss/functions";
2 @import "node_modules/bootstrap/scss/variables"; 2 @import "node_modules/bootstrap/scss/variables";
3 @import "node_modules/bootstrap/scss/mixins"; 3 @import "node_modules/bootstrap/scss/mixins";
4 4
5 $font-size-base: 1rem; 5 $font-size-base: 1rem;
6 $font-size-display-base: null;
6 $type-scales: ( 7 $type-scales: (
7 minor-second: 1.067, 8 minor-second: 1.067,
8 major-second: 1.125, 9 major-second: 1.125,
9 minor-third: 1.2, 10 minor-third: 1.2,
10 major-third: 1.25, 11 major-third: 1.25,
11 perfect-fourth: 1.333, 12 perfect-fourth: 1.333,
12 augmented-fourth: 1.414, 13 augmented-fourth: 1.414,
13 perfect-fifth: 1.5, 14 perfect-fifth: 1.5,
14 golden-ratio: 1.618 15 golden-ratio: 1.618
15 ); 16 );
16 17
17 $heading-type-scale-base: minor-third; 18 $heading-type-scale-base: minor-third;
18 $display-type-scale-base: minor-third; 19 $display-type-scale-base: minor-third;
19 @function check-type-scale-value($scale) { 20 @function check-type-scale-value($scale) {
20 @if map-has-key($type-scales, $scale) { 21 @if map-has-key($type-scales, $scale) {
21 @return map-get($type-scales, $scale); 22 @return map-get($type-scales, $scale);
22 } @else if type-of($scale) == number and unitless($scale) { 23 } @else if type-of($scale) == number and unitless($scale) {
23 @return $scale; 24 @return $scale;
24 } @else { 25 } @else {
25 @error "Sorry, `#{$scale}` is not a unitless number value or a pre-defined key in the $type-scales map."; 26 @error "Sorry, `#{$scale}` is not a unitless number value or a pre-defined key in the $type-scales map.";
26 } 27 }
27 } 28 }
28 @mixin create-heading-type-scale($scale) { 29 @mixin create-heading-type-scale($scale) {
29 $the-heading-type-scale: check-type-scale-value($scale); 30 $the-heading-type-scale: check-type-scale-value($scale);
30 $font-size-h6: $font-size-base; 31 $font-size-h6: $font-size-base;
31 $font-size-h5: $font-size-h6 * $the-heading-type-scale; 32 $font-size-h5: $font-size-h6 * $the-heading-type-scale;
32 $font-size-h4: $font-size-h5 * $the-heading-type-scale; 33 $font-size-h4: $font-size-h5 * $the-heading-type-scale;
33 $font-size-h3: $font-size-h4 * $the-heading-type-scale; 34 $font-size-h3: $font-size-h4 * $the-heading-type-scale;
34 $font-size-h2: $font-size-h3 * $the-heading-type-scale; 35 $font-size-h2: $font-size-h3 * $the-heading-type-scale;
35 $font-size-h1: $font-size-h2 * $the-heading-type-scale; 36 $font-size-h1: $font-size-h2 * $the-heading-type-scale;
36 $font-size-display-base: $font-size-h1 !global; 37 $font-size-display-base: $font-size-h1 !global;
37 38
38 h1, 39 h1,
39 .h1 { 40 .h1 {
40 font-size: $font-size-h1; 41 font-size: $font-size-h1;
41 } 42 }
42 h2, 43 h2,
43 .h2 { 44 .h2 {
44 font-size: $font-size-h2; 45 font-size: $font-size-h2;
45 } 46 }
46 h3, 47 h3,
47 .h3 { 48 .h3 {
48 font-size: $font-size-h3; 49 font-size: $font-size-h3;
49 } 50 }
50 h4, 51 h4,
51 .h4 { 52 .h4 {
52 font-size: $font-size-h4; 53 font-size: $font-size-h4;
53 } 54 }
54 h5, 55 h5,
55 .h5 { 56 .h5 {
56 font-size: $font-size-h5; 57 font-size: $font-size-h5;
57 } 58 }
58 h6, 59 h6,
59 .h6 { 60 .h6 {
60 font-size: $font-size-h6; 61 font-size: $font-size-h6;
61 } 62 }
62 } 63 }
63 64
64 @mixin create-display-type-scale($scale) { 65 @mixin create-display-type-scale($scale) {
65 $the-display-type-scale: check-type-scale-value($scale); 66 $the-display-type-scale: check-type-scale-value($scale);
66 $font-size-display-4: $font-size-display-base + $font-size-base; 67 $font-size-display-4: $font-size-display-base + $font-size-base;
67 $font-size-display-3: $font-size-display-4 * $the-display-type-scale; 68 $font-size-display-3: $font-size-display-4 * $the-display-type-scale;
68 $font-size-display-2: $font-size-display-3 * $the-display-type-scale; 69 $font-size-display-2: $font-size-display-3 * $the-display-type-scale;
69 $font-size-display-1: $font-size-display-2 * $the-display-type-scale; 70 $font-size-display-1: $font-size-display-2 * $the-display-type-scale;
70 71
71 .display-4 { 72 .display-4 {
72 font-size: $font-size-display-4; 73 font-size: $font-size-display-4;
73 } 74 }
74 .display-3 { 75 .display-3 {
75 font-size: $font-size-display-3; 76 font-size: $font-size-display-3;
76 } 77 }
77 .display-2 { 78 .display-2 {
78 font-size: $font-size-display-2; 79 font-size: $font-size-display-2;
79 } 80 }
80 .display-1 { 81 .display-1 {
81 font-size: $font-size-display-1; 82 font-size: $font-size-display-1;
82 } 83 }
83 } 84 }
84 85
85 html { 86 html {
86 font-size: 14px; 87 font-size: 14px;
87 @media (min-width: 768px) { 88 @media (min-width: 768px) {
88 font-size: 16px; 89 font-size: 16px;
89 } 90 }
90 @media (min-width: 992px) { 91 @media (min-width: 992px) {
91 font-size: 18px; 92 font-size: 18px;
92 } 93 }
93 } 94 }
94 95
95 @include create-heading-type-scale($heading-type-scale-base); 96 @include create-heading-type-scale($heading-type-scale-base);
96 @include create-display-type-scale($display-type-scale-base); 97 @include create-display-type-scale($display-type-scale-base);
97 @media (min-width: 768px) { 98 @media (min-width: 768px) {
98 @include create-heading-type-scale(minor-third); 99 @include create-heading-type-scale(minor-third);
99 } 100 }
100 101
101 @import "node_modules/bootstrap/scss/bootstrap"; 102 @import "node_modules/bootstrap/scss/bootstrap";
102 103