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

Merge pull request #84 from CartoDB/new-buttons-size

Browse Source 
add new button size and fix size typography
This commit is contained in:
piensaenpixel 2016-03-23 11:37:00 +01:00
commit 600345d686
5 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/fonts/cartoIcon.eot
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.ttf
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.woff
View File

Binary file not shown.

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

@ -8,14 +8,24 @@ Layout Component:
[CDB-Button][CDB-Button--primary | CDB-Button--secondary] [CDB-Button][CDB-Button--primary | CDB-Button--secondary]
``` ```
<button class="CDB-Button CDB-Button--primary">
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-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 CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-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">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary is-disabled">
<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"> <button class="CDB-Button CDB-Button--primary CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button> </button>
@ -33,14 +43,23 @@ Layout Component:
<br/> <br/>
<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 CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-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 CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-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">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary is-disabled">
<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"> <button class="CDB-Button CDB-Button--primary CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button> </button>
@ -64,9 +83,11 @@ Layout Component:
.CDB-Button { .CDB-Button {
padding: $baseSize $baseSize + 12; padding: $baseSize + 1 $baseSize + 12;
border: 1px solid transparent;
border-radius: $baseSize / 2; border-radius: $baseSize / 2;
cursor: pointer; cursor: pointer;
box-sizing: border-box;
.CDB-Button-Text { .CDB-Button-Text {
display: block; display: block;
@ -80,6 +101,11 @@ Layout Component:
.CDB-Button--small { .CDB-Button--small {
padding: $baseSize - 3 $baseSize + 4; padding: $baseSize - 3 $baseSize + 4;
} }
.CDB-Button--big {
padding: $baseSize + 4 $baseSize + 12;
}
.CDB-Button--icon { .CDB-Button--icon {
padding: 7px 9px; padding: 7px 9px;
} }
@ -114,6 +140,14 @@ Layout Component:
# Buttons/Secondary # Buttons/Secondary
``` ```
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary"> <button class="CDB-Button CDB-Button--secondary">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button> </button>
@ -135,6 +169,14 @@ Layout Component:
<br/> <br/>
<div style="background: #2E3C43; padding: 20px;"> <div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary"> <button class="CDB-Button CDB-Button--secondary">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button> </button>

4
src/scss/cdb-components/shapes/dataset.scss
View File

@ -83,10 +83,8 @@ Description
.CDB-Shape-Dataset { .CDB-Shape-Dataset {
padding-top: 1px; padding-top: 1px;
padding-left: 10px;
&.is-small { &.is-small {
padding-top: 0; padding-top: 0;
padding-left: 7px;
} }
} }
@ -101,6 +99,7 @@ Description
&:first-child { &:first-child {
position: relative; position: relative;
margin-left: 0;
box-shadow: 3px 0 0 $cWhite; box-shadow: 3px 0 0 $cWhite;
z-index: 1; z-index: 1;
} }
@ -112,6 +111,7 @@ Description
height: 6px; height: 6px;
margin-left: -7px; margin-left: -7px;
&:first-child { &:first-child {
margin-left: 0;
box-shadow: 2px 0 0 $cWhite; box-shadow: 2px 0 0 $cWhite;
} }
} }