Un fork del popular contrato open source para diseñadores y desarrolladores creado por Stuff & Nonsense
- Publicado: 05/02/2014
- Entrada original
Entre nosotros [nombre de la compañía]
| $unit: 6; | |
| $directionsmap: ( | |
| top: top, | |
| right: right, | |
| bottom: bottom, | |
| left: left | |
| ); | |
| @each $key, $value in $directionsmap { |
| @each $header, $margin-bot, $font-size, | |
| $line-height | |
| in (h1, 0.5rem, 3, 1.1) | |
| (h2, 0.5rem, 2, 1.5) | |
| (h3, 1.5em, 1.4, 1.5) | |
| (h4, 1.5em, 1.3, 1.5) | |
| (h5, 0.5rem, 1.2, 1.5) | |
| (h6, 0.5rem, 0.9, 1.3) | |
| { | |
| #{$header}, |
| @each $header, $margin-bot, $font-size, | |
| $line-height | |
| in (h1, 0.5rem, 3, 1.1) | |
| (h2, 0.5rem, 2, 1.5) | |
| (h3, 1.5em, 1.4, 1.5) | |
| (h4, 1.5em, 1.3, 1.5) | |
| (h5, 0.5rem, 1.2, 1.5) | |
| (h6, 0.5rem, 0.9, 1.3) | |
| { | |
| #{$header}, |
| $size-vars: ( | |
| "xx-small" : .50, | |
| "x-small" : .70, // 11px | |
| "small" : .75, // 12px | |
| "medium" : .875, // 14px | |
| "normal" : 1, // 16px | |
| "x-normal" : 1.12, // 18px | |
| "big" : 1.3, // 21px | |
| "x-big" : 1.8, // 29px | |
| "xx-big" : 2.5, // 32px |
| $size-vars: ( | |
| "xx-small" : .50, | |
| "x-small" : .70, // 11px | |
| "small" : .75, // 12px | |
| "medium" : .875, // 14px | |
| "normal" : 1, // 16px | |
| "x-normal" : 1.12, // 18px | |
| "big" : 1.3, // 21px | |
| "x-big" : 1.8, // 29px | |
| "xx-big" : 2.5, // 32px |
| $bp-small: 600px; | |
| $bp-medium: 720px; | |
| $bp-large: 1440px; | |
| @mixin mq($bp: $bp-medium, $bp-direction: min-width) { | |
| @media all and ($bp-direction: $bp) { | |
| @content; | |
| } | |
| } |
| $breakpoints: ( | |
| 'small' : 48em, | |
| 'medium' : 56.25em, | |
| 'large' : 1600px, | |
| 'qweqwe' : 1em, | |
| ); | |
| @mixin respond-to($width) { | |
| @if map-has-key($breakpoints, $width) { | |
| @media (min-width: map-get($breakpoints, $width)) { |
| $small : 48em; | |
| $medium : 56.25em; | |
| $large : 1600px; | |
| @mixin respond-to($breakpoint: $medium) { | |
| @media (min-width: $breakpoint) { | |
| @content; | |
| } |
| /** | |
| * Brand color | |
| */ | |
| $color-brand : #8bc84c; // CC Brand Color | |
| $color-brand-dark : darken($color-brand, 15); // Dark green | |
| $brand-colors: ( | |
| 'brand': $color-brand, |
Entre nosotros [nombre de la compañía]