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

add buttons components

Browse Source
This commit is contained in:
Emilio García
2016-01-25 23:37:58 +01:00
parent b3fe794f42
commit a89f32b569
1 changed files with 164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/scss/cdb-components/buttons.scss Normal file
View File

@@ -0,0 +1,164 @@
// Buttons styles
// ----------------------------------------------
/* SG
# Buttons/Primary
```
<button class="CDB-Button CDB-Button--primary is-medium">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary is-mini">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary is-mini is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
<br/>
<br/>
<br/>
<div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--primary is-medium">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary is-mini">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary is-mini is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
</div>
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Button {
padding: 8px 20px;
border-radius: 4px;
cursor: pointer;
&.is-mini {
padding: 5px 12px;
}
.CDB-Button-Text {
display: block;
}
&.is-disabled {
cursor: default;
opacity: 0.24;
}
}
.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 is-medium">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary is-mini">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary is-mini is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
<br/>
<br/>
<br/>
<div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--secondary is-medium">
<span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary is-disabled">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary is-mini">
<span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary is-mini is-disabled">
<span class="CDB-Button-Text Text is-semibold 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;
}
}
}