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

Merge pull request #136 from CartoDB/change-buttons

Browse Source 
change buttons and electric blue
This commit is contained in:
piensaenpixel 2016-06-22 10:31:01 +02:00 committed by GitHub
commit 1a202793bc
2 changed files with 112 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,6 +42,73 @@ Layout Component:
<br/>
<br/>
<button class="CDB-Button CDB-Button--alert CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--alert 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--alert">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--alert is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--alert CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--alert CDB-Button--small is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--alert CDB-Button--icon">
<i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button>
<br/>
<br/>
<br/>
<button class="CDB-Button CDB-Button--error CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--error 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--error">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--error is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--error CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--error CDB-Button--small is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--error CDB-Button--icon">
<i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button>
<br/>
<br/>
<br/>
<div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
@ -83,6 +150,7 @@ Layout Component:
.CDB-Button {
@include transition(background, 300ms);
padding: $baseSize + 1 $baseSize + 12;
border: 1px solid transparent;
border-radius: $baseSize / 2;
@ -131,6 +199,49 @@ Layout Component:
}
}
.CDB-Button--alert {
background: $cAlert;
color: $cWhite;
&:hover {
background: darken($cAlert, 8%);
}
&:active {
background: darken($cAlert, 16%);
}
&.is-disabled {
&:hover {
background: $cAlert;
}
&:active {
background: $cAlert;
}
}
}
.CDB-Button--error {
background: $cError;
color: $cWhite;
&:hover {
background: darken($cError, 8%);
}
&:active {
background: darken($cError, 16%);
}
&.is-disabled {
&:hover {
background: $cError;
}
&:active {
background: $cError;
}
}
}
// Buttons styles

2
src/scss/cdb-variables/_colors.scss
View File

@ -2,7 +2,7 @@
// ----------------------------------------------
// General
$cBlue: #3AA9E3;
$cBlue: #1181FB;
$cBlack: #000;
$cWhite: #FFF;
$cMainBg: #2E3C43;