add possibility links to buttons

This commit is contained in:
piensaenpixel 2016-05-04 17:14:27 +02:00
parent b0ac3dfc85
commit 319acb105d

View File

@ -8,32 +8,59 @@ Layout Component:
[CDB-Button][CDB-Button--primary | CDB-Button--secondary] [CDB-Button][CDB-Button--primary | CDB-Button--secondary]
``` ```
<a href="#" class="CDB-Button CDB-Button--primary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</a>
<button class="CDB-Button CDB-Button--primary CDB-Button--big"> <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>
<a href="#" 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>
</a>
<button class="CDB-Button CDB-Button--primary CDB-Button--big 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>
<a href="#" class="CDB-Button CDB-Button--primary">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</a>
<button class="CDB-Button CDB-Button--primary"> <button class="CDB-Button CDB-Button--primary">
<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>
<a href="#" class="CDB-Button CDB-Button--primary is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</a>
<button class="CDB-Button CDB-Button--primary is-disabled"> <button class="CDB-Button CDB-Button--primary is-disabled">
<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>
<a href="#" class="CDB-Button CDB-Button--primary CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</a>
<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>
<a href="#" 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>
</a>
<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 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>
<a href="#" class="CDB-Button CDB-Button--primary CDB-Button--icon">
<i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</a>
<button class="CDB-Button CDB-Button--primary CDB-Button--icon"> <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
<i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i> <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button> </button>
@ -83,6 +110,7 @@ Layout Component:
.CDB-Button { .CDB-Button {
display: inline-block;
padding: $baseSize + 1 $baseSize + 12; padding: $baseSize + 1 $baseSize + 12;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $baseSize / 2; border-radius: $baseSize / 2;
@ -131,6 +159,14 @@ Layout Component:
} }
} }
.CDB-Button--primary:link {
color: $cWhite;
}
.CDB-Button--primary:hover {
text-decoration: none;
}
// Buttons styles // Buttons styles