cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3 from CartoDB/first-approach-typography

Browse Source 
add typography
This commit is contained in:
piensaenpixel 2016-01-15 14:42:43 +01:00
commit eab88d5904
3 changed files with 61 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/scss/components/colors.scss
View File

@ -1,4 +1,4 @@
// Shapes styles
// Colors styles
// ----------------------------------------------
/* SG

50
src/scss/components/typography.scss Normal file
View File

@ -0,0 +1,50 @@
// Typography styles
// ----------------------------------------------
/* SG
# Typography/
```
<p class="Text Size-huge">Open Sans 26/34 Regular</p>
<p class="Text Size-large">Open Sans 16/22 Regular</p>
<p class="Text is-semibold Size-medium">Open Sans 12/16 Semibold</p>
<p class="Text Size-medium">Open Sans 12/16 Semibold</p>
<p class="Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
<p class="Text Size-small">Open Sans 10/14 Regular</p>
```
*/
@import '../variables/sizes';
.Text {
font-family: 'Open Sans';
$sFontWeight-normal: 400;
&.is-semibold {
font-weight: $sFontWeight-semibold;
}
&.is-light {
font-weight: $sFontWeight-lighter;
}
}
.Size-huge {
font-size: $sFontSize-huge;
line-height: $sLineHeight-huge;
}
.Size-large {
font-size: $sFontSize-large;
line-height: $sLineHeight-large;
}
.Size-medium {
font-size: $sFontSize-medium;
line-height: $sLineHeight-medium;
}
.Size-small {
font-size: $sFontSize-small;
line-height: $sLineHeight-small;
}

26
src/scss/variables/_sizes.scss
View File

@ -13,24 +13,18 @@ $sMargin-section: 24px; // To separate main section
$sMargin-element: 14px; // To separate elements inside a group
// Font sizes
$sFontSize-smaller: 10px;
$sFontSize-small: 12px;
$sFontSize-normal: 14px;
$sFontSize-larger: 16px;
$sFontSize-huge: 26px;
$sFontSize-small: 10px;
$sFontSize-medium: 14px;
$sFontSize-large: 16px;
$sFontSize-huge: 26px;
// Font weights
$sFontWeight-lighter: 300;
$sFontWeight-normal: 400;
$sFontWeight-lighter: 300;
$sFontWeight-normal: 400;
$sFontWeight-semibold: 600;
$sFontWeight-bold: 700;
// Line heights
$sLineHeight-smaller: 15px;
$sLineHeight-small: 16px;
$sLineHeight-normal: 20px;
$sLineHeight-large: 22px;
$sLineHeight-larger: 24px;
$sLineHeight-largest: 27px;
$sLineHeight-huge: 34px;
$sLineHeight-button: 15px;
$sLineHeight-small: 14px;
$sLineHeight-medium: 16px;
$sLineHeight-large: 22px;
$sLineHeight-huge: 34px;