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

Merge pull request #31 from CartoDB/typography-asset

Browse Source 
Typography asset
This commit is contained in:
piensaenpixel 2016-01-26 18:07:13 +01:00
commit d17e5386ce
2 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/scss/cdb-components/buttons.scss
View File

@ -9,19 +9,19 @@ Layout Component:
```
<button class="CDB-Button CDB-Button--primary">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary CDB-Button--small">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<br/>
@ -30,19 +30,19 @@ Layout Component:
<div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--primary">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary CDB-Button--small">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
</div>
@ -103,19 +103,19 @@ Layout Component:
```
<button class="CDB-Button CDB-Button--secondary">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<br/>
@ -124,19 +124,19 @@ Layout Component:
<div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--secondary">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
</div>

22
src/scss/cdb-components/typography.scss
View File

@ -5,18 +5,18 @@
# 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>
<p class="CDB-Text CDB-Size-huge">Open Sans 26/34 Regular</p>
<p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p>
<p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p>
<p class="CDB-Text CDB-Size-medium">Open Sans 12/16 Regular</p>
<p class="CDB-Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
<p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>
```
*/
@import '../cdb-variables/sizes';
.Text {
.CDB-Text {
font-family: 'Open Sans';
$sFontWeight-normal: 400;
@ -28,22 +28,22 @@
}
}
.Size-huge {
.CDB-Size-huge {
font-size: $sFontSize-huge;
line-height: $sLineHeight-huge;
}
.Size-large {
.CDB-Size-large {
font-size: $sFontSize-large;
line-height: $sLineHeight-large;
}
.Size-medium {
.CDB-Size-medium {
font-size: $sFontSize-medium;
line-height: $sLineHeight-medium;
}
.Size-small {
.CDB-Size-small {
font-size: $sFontSize-small;
line-height: $sLineHeight-small;
}