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"> <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>
<button class="CDB-Button CDB-Button--primary is-disabled"> <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>
<button class="CDB-Button CDB-Button--primary CDB-Button--small"> <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>
<button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled"> <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> </button>
<br/> <br/>
@ -30,19 +30,19 @@ Layout Component:
<div style="background: #2E3C43; padding: 20px;"> <div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--primary"> <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>
<button class="CDB-Button CDB-Button--primary is-disabled"> <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>
<button class="CDB-Button CDB-Button--primary CDB-Button--small"> <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>
<button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled"> <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> </button>
</div> </div>
@ -103,19 +103,19 @@ Layout Component:
``` ```
<button class="CDB-Button CDB-Button--secondary"> <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>
<button class="CDB-Button CDB-Button--secondary is-disabled"> <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>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small"> <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>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled"> <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> </button>
<br/> <br/>
@ -124,19 +124,19 @@ Layout Component:
<div style="background: #2E3C43; padding: 20px;"> <div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--secondary"> <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>
<button class="CDB-Button CDB-Button--secondary is-disabled"> <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>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small"> <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>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled"> <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> </button>
</div> </div>

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

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