Wiki source code of Css Buttons Round
Last modified by Vincent Massol on 2024/11/19 16:15
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{velocity filter="none"}} | ||
| 2 | {{html clean="false" wiki="true"}} | ||
| 3 | #template('colorThemeInit.vm') | ||
| 4 | <style> .rounded-button-container { display: inline-block; position: relative; } | ||
| 5 | |||
| 6 | .rounded-button { border: 0 none; color: $theme.buttonPrimaryTextColor; cursor: default; font-size: 70%; margin: 0; padding: 1px; vertical-align: middle; } | ||
| 7 | |||
| 8 | .rounded-button-outer-box { border-width: 1px 0; margin: 0; } | ||
| 9 | |||
| 10 | .rounded-button-inner-box { background-color: $theme.buttonPrimaryBackgroundColor; border-width: 0 5px; cursor: pointer; margin: 0 -1px; } | ||
| 11 | |||
| 12 | .rounded-button-outer-box, .rounded-button-inner-box { border-color: $theme.buttonPrimaryBackgroundColor; border-style: solid; padding: 0; } | ||
| 13 | |||
| 14 | .rounded-button-pos { height: 100%; position: relative; } | ||
| 15 | |||
| 16 | .rounded-button-content { color: $theme.buttonPrimaryTextColor; font-size: 1.1em; font-weight: bold; line-height: 1.4em; padding: 0.2em 0.4em 0; position: relative; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: nowrap; } | ||
| 17 | |||
| 18 | .rounded-button-content.selected, .rounded-button-content:hover { background-color: $theme.buttonSecondaryBackgroundColor; color: $theme.buttonSecondaryTextColor; } | ||
| 19 | |||
| 20 | </style> | ||
| 21 | #macro(button $text $selected) | ||
| 22 | <div class="rounded-button rounded-button-container"> <div class="rounded-button-outer-box"> <div class="rounded-button-inner-box"> <div class="rounded-button-pos"> <div class="rounded-button-content #if($selected == true) selected#end">$text </div> </div> </div> </div> </div> | ||
| 23 | #end | ||
| 24 | #button("Profile" true) #button("Preferences" false) #button("Watchlist" false) | ||
| 25 | {{/html}} | ||
| 26 | {{/velocity}} |
