|
.round-button { |
|
@apply .flex-1 .rounded-full .bg-eagles-500 .text-white .antialiased .font-bold .px-4 .py-2 .mb-3 .ml-2; |
|
} |
|
.round-button:hover { |
|
@apply .bg-eagles-800; |
|
} |
|
|
|
.tw-button { |
|
@apply font-semibold py-2 px-4 border border-grey-200 rounded shadow cursor-pointer; |
|
} |
|
.tw-sm-button { |
|
@apply font-normal px-4 border border-grey-200 rounded shadow cursor-pointer; |
|
} |
|
|
|
.tw-button.is-primary, .tw-sm-button.is-primary { |
|
@apply bg-blue-500 text-white; |
|
} |
|
.tw-button.is-dark, .tw-sm-button.is-dark { |
|
@apply bg-eagles-500 text-white; |
|
} |
|
.tw-button.is-info, .tw-sm-button.is-info { |
|
@apply bg-grey-300 text-grey-800; |
|
} |
|
.tw-button.is-success, .tw-sm-button.is-success { |
|
@apply bg-nephritis-500 text-white; |
|
} |
|
.tw-button.is-warning, .tw-sm-button.is-warning { |
|
@apply bg-saints-500; |
|
} |
|
.tw-button.is-danger, .tw-sm-button.is-danger { |
|
@apply bg-alizarin-500 text-white; |
|
} |
|
|
|
.btn { |
|
line-height: 1.25; |
|
display: -webkit-inline-box; |
|
display: -ms-inline-flexbox; |
|
display: inline-flex; |
|
-webkit-box-align: center; |
|
-ms-flex-align: center; |
|
align-items: center; |
|
font-weight: 700; |
|
padding: 0.5rem 1rem; |
|
border-radius: 0.25rem; |
|
} |
|
.btn-sm { |
|
font-size: 0.875rem; |
|
padding: 0.25rem 1rem; |
|
} |
|
.btn > svg { |
|
height: 1rem; |
|
width: 1rem; |
|
fill: currentColor; |
|
margin-right: 0.5rem; |
|
} |
|
.btn-blue { |
|
background-color: #3490dc; |
|
color: #fff; |
|
} |
|
.btn-blue:hover { |
|
background-color: #2779bd; |
|
} |
|
.btn-blue:focus { |
|
outline: 0; |
|
-webkit-box-shadow: 0 0 0 3px rgba(52, 144, 220, 0.5); |
|
box-shadow: 0 0 0 3px rgba(52, 144, 220, 0.5); |
|
} |
|
.btn-indigo { |
|
background-color: #6574cd; |
|
color: #fff; |
|
} |
|
.btn-indigo:hover { |
|
background-color: #5661b3; |
|
} |
|
.btn-indigo:focus { |
|
outline: 0; |
|
-webkit-box-shadow: 0 0 0 3px rgba(101, 116, 205, 0.5); |
|
box-shadow: 0 0 0 3px rgba(101, 116, 205, 0.5); |
|
} |
|
.btn-grey { |
|
background-color: #f1f5f8; |
|
color: #3d4852; |
|
} |
|
.btn-grey:hover { |
|
background-color: #dae1e7; |
|
} |
|
.btn-grey:focus { |
|
outline: 0; |
|
-webkit-box-shadow: 0 0 0 3px rgba(52, 144, 220, 0.5); |
|
box-shadow: 0 0 0 3px rgba(52, 144, 220, 0.5); |
|
} |
|
.btn-red { |
|
background-color: #e3342f; |
|
color: #fff; |
|
} |
|
.btn-red:hover { |
|
background-color: #cc1f1a; |
|
} |
|
.btn-red:focus { |
|
outline: 0; |
|
-webkit-box-shadow: 0 0 0 3px rgba(227, 52, 47, 0.5); |
|
box-shadow: 0 0 0 3px rgba(227, 52, 47, 0.5); |
|
} |
|
.btn-indigo-outline { |
|
border-width: 1px; |
|
border-color: #6574cd; |
|
color: #6574cd; |
|
} |
|
.btn-indigo-outline:hover { |
|
background-color: #6574cd; |
|
color: #fff; |
|
} |
|
.btn-pill { |
|
line-height: 1.5; |
|
border-radius: 9999px; |
|
} |
