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

merge with master

Browse Source
This commit is contained in:
piensaenpixel
2016-01-27 14:34:23 +01:00
parent 0e3e65387f d17e5386ce
commit 632e6b40a0
16 changed files with 538 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/cdb-components/buttons.scss
+168
View File
@@ -0,0 +1,168 @@
// Buttons styles
// ----------------------------------------------
/* SG
# Buttons/Primary
Layout Component:
[CDB-Button][CDB-Button--primary | CDB-Button--secondary]
```
<button class="CDB-Button CDB-Button--primary">
<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 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 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 CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<br/>
<br/>
<br/>
<div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--primary">
<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 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 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 CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
</div>
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Button {
padding: $baseSize $baseSize + 12;
border-radius: $baseSize / 2;
cursor: pointer;
.CDB-Button-Text {
display: block;
}
&.is-disabled {
cursor: default;
opacity: 0.24;
}
}
.CDB-Button--small {
padding: $baseSize - 3 $baseSize + 4;
}
.CDB-Button--primary {
background: $cBlue;
color: $cWhite;
&:hover {
background: darken($cBlue, 8%);
}
&:active {
background: darken($cBlue, 16%);
}
&.is-disabled {
&:hover {
background: $cBlue;
}
&:active {
background: $cBlue;
}
}
}
// Buttons styles
// ----------------------------------------------
/* SG
# Buttons/Secondary
```
<button class="CDB-Button CDB-Button--secondary">
<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 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 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 CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<br/>
<br/>
<br/>
<div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--secondary">
<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 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 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 CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
</div>
```
*/
.CDB-Button--secondary {
border: 1px solid $cBlue;
background: $cWhite;
color: $cBlue;
&:hover {
background: rgba($cBlue, 0.08);
}
&:active {
background: $cBlue;
color: $cWhite;
}
&.is-disabled {
&:hover {
background: $cWhite;
}
&:active {
background: $cWhite;
}
}
}
src/scss/cdb-components/typography.scss
+11 -11
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 Regular</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;
}