mirror of https://github.com/twbs/ratchet.git
connors
11 years ago
1 changed files with 73 additions and 0 deletions
@ -0,0 +1,73 @@
|
||||
// |
||||
// Badges |
||||
// -------------------------------------------------- |
||||
|
||||
[class*="badge"] { |
||||
display: inline-block; |
||||
color: $default-color; |
||||
|
||||
&.badge-filled { |
||||
padding: 2px 9px; |
||||
color: #fff; |
||||
font-size: 13px; |
||||
line-height: 1; |
||||
background-color: $default-color; |
||||
border-radius: 100px; |
||||
} |
||||
} |
||||
|
||||
|
||||
// Badge modifiers |
||||
// -------------------------------------------------- |
||||
|
||||
// Main badge |
||||
.badge-primary { |
||||
color: $primary-color; |
||||
|
||||
&.badge-filled { |
||||
background-color: $primary-color; |
||||
} |
||||
} |
||||
|
||||
// Positive badge |
||||
.badge-positive { |
||||
color: $positive-color; |
||||
|
||||
&.badge-filled { |
||||
background-color: $positive-color; |
||||
} |
||||
} |
||||
|
||||
// Negative badge |
||||
.badge-negative { |
||||
color: $negative-color; |
||||
|
||||
&.badge-filled { |
||||
background-color: $negative-color; |
||||
} |
||||
} |
||||
|
||||
|
||||
// Counts in buttons |
||||
// -------------------------------------------------- |
||||
|
||||
// Generic styles for all counts within default buttons |
||||
[class*="button"] [class*="badge"] { |
||||
font-size: 12px; |
||||
padding-top: 2px; |
||||
padding-bottom: 2px; |
||||
margin: -2px -4px -2px 4px; |
||||
} |
||||
// Styles for filled counts within filled buttons |
||||
.button-filled .badge-filled, |
||||
[class*="button"]:active .badge-filled { |
||||
background-color: rgba(0,0,0,.2); |
||||
} |
||||
// Position counts within block level buttons |
||||
// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always |
||||
// stays at true center of button |
||||
.button-block [class*="badge"] { |
||||
position: absolute; |
||||
right: 0; |
||||
margin-right: 10px; |
||||
} |
Loading…
Reference in new issue