Created
May 29, 2015 10:58
-
-
Save Phunky/8f7cd43061dc99a00c6a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a class="ui-btn" href="#">Button</a> | |
| <br/><br/> | |
| <div class="ui-btn-group"> | |
| <a data-trigger="uiBtnGroupToggle" class="ui-btn"><i class="icon-align-left"></i> Left</a> | |
| <a data-trigger="uiBtnGroupToggle" class="ui-btn"><i class="icon-align-center"></i> Center</a> | |
| <a data-trigger="uiBtnGroupToggle" class="ui-btn"><i class="icon-align-right"></i> Right</a> | |
| </div> | |
| <br/><br/> | |
| <div class="ui-btn-tabs"> | |
| <a href="#tab-1" data-tab="1" class="ui-btn "><span class="ui-btn-label">One</span></a> | |
| <a href="#tab-2" data-tab="2" class="ui-btn ui-btn--tab-current"><span class="ui-btn-label">Two</span></a> | |
| <a href="#tab-3" data-tab="3" class="ui-btn "><span class="ui-btn-label">Three</span></a> | |
| <a href="#tab-4" data-tab="4" class="ui-btn "><span class="ui-btn-label">Four</span></a> | |
| <a href="#tab-5" data-tab="5" class="ui-btn "><span class="ui-btn-label">Five</span></a> | |
| </div> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.13) | |
| // Compass (v1.0.3) | |
| // ---- | |
| @import "compass"; | |
| $primary : #F95108; | |
| $primary-alt : #75675e; | |
| $secondary : #d6d1cf; | |
| $secondary-alt : #f5f5f5; | |
| $warning : #FDA623; | |
| $error : #B94A48; | |
| $info : #3A87AD; | |
| $success : #468847; | |
| @mixin btn-colors($color){ | |
| border-color: $color; color: tint($color, 90%); text-shadow: 0 1px 0 shade($color, 90%); | |
| background-color: tint($color, 30%); | |
| @include background-image(linear-gradient(top, tint($color, 30%), shade($color, 20%) )); | |
| .ui-btn-label {color: tint($color, 90%);} | |
| &:hover, &.hover, &:focus { | |
| border-color: $color; color: tint($color, 90%); text-shadow: 0 1px 0 shade($color, 70%); | |
| background-color: tint($color, 20%); | |
| @include background-image(linear-gradient(top, tint($color, 20%), shade($color, 20%) )); | |
| } | |
| &:active, &.active { | |
| color: shade($color, 20%); background: shade(#f6f8f7, 5%); | |
| border-bottom-color: $color; text-shadow: 0 1px 0 tint($color, 60%); | |
| background-color: tint($color, 30%); | |
| @include background-image(linear-gradient(top, tint($color, 30%), tint($color, 30%) )); | |
| } | |
| &.disabled { | |
| &, &.hover, &:hover, &:focus { | |
| text-shadow: 0 1px 0 shade($color, 90%); | |
| @include opacity(.7); | |
| @include background-image(linear-gradient(top, shade($color, 20%), shade($color, 20%) )); | |
| } | |
| } | |
| } | |
| // Basic button styling | |
| .ui-btn { | |
| display: inline-block; | |
| margin: 0; padding: 4px 12px; | |
| border: 1px solid #cecece; color: $primary-alt; | |
| text-align: center; vertical-align: middle; | |
| text-decoration: none; font-size: 16px; line-height: 20px; | |
| cursor: pointer; background-color: #EBEBEB; | |
| @include background-image(linear-gradient(top, #FCFCFC, #EBEBEB)); | |
| @include border-radius(3px); | |
| @include user-select(none); | |
| &:hover, &.hover, &:focus { | |
| color: $primary; background: shade(#f6f8f7, 5%); | |
| border-bottom-color: tint($primary,50%); background-color: tint($primary, 95%); | |
| @include background-image(linear-gradient(bottom, tint($primary, 70%), tint($primary, 95%))); | |
| } | |
| &:active, &.active { | |
| color: $primary-alt; background-color: tint(#EBEBEB,5%); | |
| @include background-image(linear-gradient(top, shade(#FCFCFC,10%), tint(#EBEBEB,5%) )); | |
| } | |
| &.warning {@include btn-colors($warning)} | |
| &.error {@include btn-colors($error)} | |
| &.success {@include btn-colors($success)} | |
| &.info {@include btn-colors($info)} | |
| &.primary {@include btn-colors($primary)} | |
| &.caption {@include btn-colors(#ffffff)} | |
| &.plain { | |
| background: none; | |
| border: 0; | |
| color: $primary; | |
| &:hover {color: darken($primary, 15%)} | |
| } | |
| i {line-height:20px} | |
| &.ui-btn--large { | |
| font-size: 20px; | |
| line-height: 30px; | |
| } | |
| &.ui-btn--block { | |
| display: block; | |
| } | |
| } | |
| // Fixes for IE7 | |
| .lt-ie8 button.ui-btn { | |
| line-height: 16px; overflow: visible; | |
| } | |
| // Button groups | |
| .ui-btn-group { | |
| position: relative; display: inline-block; | |
| .ui-btn { | |
| @include border-radius(0); | |
| & + .ui-btn {margin-left: -5px;} | |
| &:first-of-type {margin-left: 0; @include border-radius(3px 0 0 3px)} | |
| &:last-of-type {@include border-radius(0 3px 3px 0)} | |
| } | |
| &.open .ui-btn-dropdown-menu {display:block} | |
| .ui-btn-dropdown-menu { | |
| display: none; position: absolute; | |
| left: 0; top: 110%; z-index: 1000; | |
| min-width: 160px; padding: 0 5px; background: #fff; | |
| border: 1px solid #cecece; | |
| @include border-radius(3px); | |
| @include box-shadow(#555 0 10px 15px -5px); | |
| a { | |
| display: block; padding: 5px; | |
| border-bottom: 1px solid #cecece; | |
| text-decoration: none; font-size: 14px; | |
| color: $primary-alt; | |
| &:hover {color: $primary} | |
| } | |
| li:last-of-type a {border-bottom: 0} | |
| } | |
| } | |
| // Button tabs | |
| .ui-btn-tabs { | |
| padding-left: 10px; | |
| border-bottom: 1px solid #cecece; | |
| margin-bottom: 8px; | |
| .ui-btn { | |
| color: $primary; background: none; | |
| border-bottom: 0; border-color: #fff; | |
| font-size: 14px; | |
| @include border-radius(3px 3px 0 0); | |
| &:hover { | |
| background: #eee; border-color: #eee; | |
| } | |
| &--tab-current { | |
| &, &:hover { | |
| margin-bottom: -1px; padding-bottom: 5px; | |
| color: $primary-alt; background: #fff; | |
| border-color: #cecece; | |
| cursor: default; | |
| } | |
| } | |
| &:first-of-type {margin-left: 0;} | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .ui-btn { display: inline-block; margin: 0; padding: 4px 12px; border: 1px solid #cecece; color: #75675e; text-align: center; vertical-align: middle; text-decoration: none; font-size: 16px; line-height: 20px; cursor: pointer; background-color: #EBEBEB; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmNmYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcfcfc), color-stop(100%, #ebebeb)); background-image: -moz-linear-gradient(top, #fcfcfc, #ebebeb); background-image: -webkit-linear-gradient(top, #fcfcfc, #ebebeb); background-image: linear-gradient(to bottom, #fcfcfc, #ebebeb); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } | |
| .ui-btn:hover, .ui-btn.hover, .ui-btn:focus { color: #F95108; background: #e9ebea; border-bottom-color: #fca883; background-color: #fef6f2; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkY2FiNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZlZjZmMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #fdcab4), color-stop(100%, #fef6f2)); background-image: -moz-linear-gradient(bottom, #fdcab4, #fef6f2); background-image: -webkit-linear-gradient(bottom, #fdcab4, #fef6f2); background-image: linear-gradient(to top, #fdcab4, #fef6f2); } | |
| .ui-btn:active, .ui-btn.active { color: #75675e; background-color: #ececec; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyZTJlMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VjZWNlYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e2e2e2), color-stop(100%, #ececec)); background-image: -moz-linear-gradient(top, #e2e2e2, #ececec); background-image: -webkit-linear-gradient(top, #e2e2e2, #ececec); background-image: linear-gradient(to bottom, #e2e2e2, #ececec); } | |
| .ui-btn.warning { border-color: #FDA623; color: #fef6e9; text-shadow: 0 1px 0 #191003; background-color: #fdc065; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkYzA2NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NhODQxYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdc065), color-stop(100%, #ca841c)); background-image: -moz-linear-gradient(top, #fdc065, #ca841c); background-image: -webkit-linear-gradient(top, #fdc065, #ca841c); background-image: linear-gradient(to bottom, #fdc065, #ca841c); } | |
| .ui-btn.warning .ui-btn-label { color: #fef6e9; } | |
| .ui-btn.warning:hover, .ui-btn.warning.hover, .ui-btn.warning:focus { border-color: #FDA623; color: #fef6e9; text-shadow: 0 1px 0 #4b310a; background-color: #fdb74f; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkYjc0ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NhODQxYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdb74f), color-stop(100%, #ca841c)); background-image: -moz-linear-gradient(top, #fdb74f, #ca841c); background-image: -webkit-linear-gradient(top, #fdb74f, #ca841c); background-image: linear-gradient(to bottom, #fdb74f, #ca841c); } | |
| .ui-btn.warning:active, .ui-btn.warning.active { color: #ca841c; background: #e9ebea; border-bottom-color: #FDA623; text-shadow: 0 1px 0 #fedba7; background-color: #fdc065; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkYzA2NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZkYzA2NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdc065), color-stop(100%, #fdc065)); background-image: -moz-linear-gradient(top, #fdc065, #fdc065); background-image: -webkit-linear-gradient(top, #fdc065, #fdc065); background-image: linear-gradient(to bottom, #fdc065, #fdc065); } | |
| .ui-btn.warning.disabled, .ui-btn.warning.disabled.hover, .ui-btn.warning.disabled:hover, .ui-btn.warning.disabled:focus { text-shadow: 0 1px 0 #191003; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NhODQxYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NhODQxYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ca841c), color-stop(100%, #ca841c)); background-image: -moz-linear-gradient(top, #ca841c, #ca841c); background-image: -webkit-linear-gradient(top, #ca841c, #ca841c); background-image: linear-gradient(to bottom, #ca841c, #ca841c); } | |
| .ui-btn.error { border-color: #B94A48; color: #f8ecec; text-shadow: 0 1px 0 #120707; background-color: #ce807e; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlODA3ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk0M2IzOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ce807e), color-stop(100%, #943b39)); background-image: -moz-linear-gradient(top, #ce807e, #943b39); background-image: -webkit-linear-gradient(top, #ce807e, #943b39); background-image: linear-gradient(to bottom, #ce807e, #943b39); } | |
| .ui-btn.error .ui-btn-label { color: #f8ecec; } | |
| .ui-btn.error:hover, .ui-btn.error.hover, .ui-btn.error:focus { border-color: #B94A48; color: #f8ecec; text-shadow: 0 1px 0 #371615; background-color: #c76e6c; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M3NmU2YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk0M2IzOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c76e6c), color-stop(100%, #943b39)); background-image: -moz-linear-gradient(top, #c76e6c, #943b39); background-image: -webkit-linear-gradient(top, #c76e6c, #943b39); background-image: linear-gradient(to bottom, #c76e6c, #943b39); } | |
| .ui-btn.error:active, .ui-btn.error.active { color: #943b39; background: #e9ebea; border-bottom-color: #B94A48; text-shadow: 0 1px 0 #e3b6b5; background-color: #ce807e; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlODA3ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NlODA3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ce807e), color-stop(100%, #ce807e)); background-image: -moz-linear-gradient(top, #ce807e, #ce807e); background-image: -webkit-linear-gradient(top, #ce807e, #ce807e); background-image: linear-gradient(to bottom, #ce807e, #ce807e); } | |
| .ui-btn.error.disabled, .ui-btn.error.disabled.hover, .ui-btn.error.disabled:hover, .ui-btn.error.disabled:focus { text-shadow: 0 1px 0 #120707; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk0M2IzOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk0M2IzOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #943b39), color-stop(100%, #943b39)); background-image: -moz-linear-gradient(top, #943b39, #943b39); background-image: -webkit-linear-gradient(top, #943b39, #943b39); background-image: linear-gradient(to bottom, #943b39, #943b39); } | |
| .ui-btn.success { border-color: #468847; color: #ecf3ec; text-shadow: 0 1px 0 #060d07; background-color: #7dab7e; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYWI3ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4NmMzOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7dab7e), color-stop(100%, #386c38)); background-image: -moz-linear-gradient(top, #7dab7e, #386c38); background-image: -webkit-linear-gradient(top, #7dab7e, #386c38); background-image: linear-gradient(to bottom, #7dab7e, #386c38); } | |
| .ui-btn.success .ui-btn-label { color: #ecf3ec; } | |
| .ui-btn.success:hover, .ui-btn.success.hover, .ui-btn.success:focus { border-color: #468847; color: #ecf3ec; text-shadow: 0 1px 0 #152815; background-color: #6b9f6b; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZiOWY2YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4NmMzOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6b9f6b), color-stop(100%, #386c38)); background-image: -moz-linear-gradient(top, #6b9f6b, #386c38); background-image: -webkit-linear-gradient(top, #6b9f6b, #386c38); background-image: linear-gradient(to bottom, #6b9f6b, #386c38); } | |
| .ui-btn.success:active, .ui-btn.success.active { color: #386c38; background: #e9ebea; border-bottom-color: #468847; text-shadow: 0 1px 0 #b5cfb5; background-color: #7dab7e; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYWI3ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYWI3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7dab7e), color-stop(100%, #7dab7e)); background-image: -moz-linear-gradient(top, #7dab7e, #7dab7e); background-image: -webkit-linear-gradient(top, #7dab7e, #7dab7e); background-image: linear-gradient(to bottom, #7dab7e, #7dab7e); } | |
| .ui-btn.success.disabled, .ui-btn.success.disabled.hover, .ui-btn.success.disabled:hover, .ui-btn.success.disabled:focus { text-shadow: 0 1px 0 #060d07; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM4NmMzOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4NmMzOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #386c38), color-stop(100%, #386c38)); background-image: -moz-linear-gradient(top, #386c38, #386c38); background-image: -webkit-linear-gradient(top, #386c38, #386c38); background-image: linear-gradient(to bottom, #386c38, #386c38); } | |
| .ui-btn.info { border-color: #3A87AD; color: #ebf3f6; text-shadow: 0 1px 0 #050d11; background-color: #75abc5; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc1YWJjNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJlNmM4YSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #75abc5), color-stop(100%, #2e6c8a)); background-image: -moz-linear-gradient(top, #75abc5, #2e6c8a); background-image: -webkit-linear-gradient(top, #75abc5, #2e6c8a); background-image: linear-gradient(to bottom, #75abc5, #2e6c8a); } | |
| .ui-btn.info .ui-btn-label { color: #ebf3f6; } | |
| .ui-btn.info:hover, .ui-btn.info.hover, .ui-btn.info:focus { border-color: #3A87AD; color: #ebf3f6; text-shadow: 0 1px 0 #112833; background-color: #619fbd; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYxOWZiZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJlNmM4YSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #619fbd), color-stop(100%, #2e6c8a)); background-image: -moz-linear-gradient(top, #619fbd, #2e6c8a); background-image: -webkit-linear-gradient(top, #619fbd, #2e6c8a); background-image: linear-gradient(to bottom, #619fbd, #2e6c8a); } | |
| .ui-btn.info:active, .ui-btn.info.active { color: #2e6c8a; background: #e9ebea; border-bottom-color: #3A87AD; text-shadow: 0 1px 0 #b0cfde; background-color: #75abc5; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc1YWJjNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc1YWJjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #75abc5), color-stop(100%, #75abc5)); background-image: -moz-linear-gradient(top, #75abc5, #75abc5); background-image: -webkit-linear-gradient(top, #75abc5, #75abc5); background-image: linear-gradient(to bottom, #75abc5, #75abc5); } | |
| .ui-btn.info.disabled, .ui-btn.info.disabled.hover, .ui-btn.info.disabled:hover, .ui-btn.info.disabled:focus { text-shadow: 0 1px 0 #050d11; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlNmM4YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJlNmM4YSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2e6c8a), color-stop(100%, #2e6c8a)); background-image: -moz-linear-gradient(top, #2e6c8a, #2e6c8a); background-image: -webkit-linear-gradient(top, #2e6c8a, #2e6c8a); background-image: linear-gradient(to bottom, #2e6c8a, #2e6c8a); } | |
| .ui-btn.primary { border-color: #F95108; color: #feede6; text-shadow: 0 1px 0 #180800; background-color: #fa8552; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhODU1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M3NDAwNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa8552), color-stop(100%, #c74006)); background-image: -moz-linear-gradient(top, #fa8552, #c74006); background-image: -webkit-linear-gradient(top, #fa8552, #c74006); background-image: linear-gradient(to bottom, #fa8552, #c74006); } | |
| .ui-btn.primary .ui-btn-label { color: #feede6; } | |
| .ui-btn.primary:hover, .ui-btn.primary.hover, .ui-btn.primary:focus { border-color: #F95108; color: #feede6; text-shadow: 0 1px 0 #4a1802; background-color: #fa7339; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhNzMzOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M3NDAwNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa7339), color-stop(100%, #c74006)); background-image: -moz-linear-gradient(top, #fa7339, #c74006); background-image: -webkit-linear-gradient(top, #fa7339, #c74006); background-image: linear-gradient(to bottom, #fa7339, #c74006); } | |
| .ui-btn.primary:active, .ui-btn.primary.active { color: #c74006; background: #e9ebea; border-bottom-color: #F95108; text-shadow: 0 1px 0 #fcb99c; background-color: #fa8552; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhODU1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZhODU1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa8552), color-stop(100%, #fa8552)); background-image: -moz-linear-gradient(top, #fa8552, #fa8552); background-image: -webkit-linear-gradient(top, #fa8552, #fa8552); background-image: linear-gradient(to bottom, #fa8552, #fa8552); } | |
| .ui-btn.primary.disabled, .ui-btn.primary.disabled.hover, .ui-btn.primary.disabled:hover, .ui-btn.primary.disabled:focus { text-shadow: 0 1px 0 #180800; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M3NDAwNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M3NDAwNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c74006), color-stop(100%, #c74006)); background-image: -moz-linear-gradient(top, #c74006, #c74006); background-image: -webkit-linear-gradient(top, #c74006, #c74006); background-image: linear-gradient(to bottom, #c74006, #c74006); } | |
| .ui-btn.caption { border-color: #ffffff; color: white; text-shadow: 0 1px 0 #191919; background-color: white; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background-image: -moz-linear-gradient(top, #ffffff, #cccccc); background-image: -webkit-linear-gradient(top, #ffffff, #cccccc); background-image: linear-gradient(to bottom, #ffffff, #cccccc); } | |
| .ui-btn.caption .ui-btn-label { color: white; } | |
| .ui-btn.caption:hover, .ui-btn.caption.hover, .ui-btn.caption:focus { border-color: #ffffff; color: white; text-shadow: 0 1px 0 #4c4c4c; background-color: white; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background-image: -moz-linear-gradient(top, #ffffff, #cccccc); background-image: -webkit-linear-gradient(top, #ffffff, #cccccc); background-image: linear-gradient(to bottom, #ffffff, #cccccc); } | |
| .ui-btn.caption:active, .ui-btn.caption.active { color: #cccccc; background: #e9ebea; border-bottom-color: #ffffff; text-shadow: 0 1px 0 white; background-color: white; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ffffff)); background-image: -moz-linear-gradient(top, #ffffff, #ffffff); background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); background-image: linear-gradient(to bottom, #ffffff, #ffffff); } | |
| .ui-btn.caption.disabled, .ui-btn.caption.disabled.hover, .ui-btn.caption.disabled:hover, .ui-btn.caption.disabled:focus { text-shadow: 0 1px 0 #191919; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #cccccc)); background-image: -moz-linear-gradient(top, #cccccc, #cccccc); background-image: -webkit-linear-gradient(top, #cccccc, #cccccc); background-image: linear-gradient(to bottom, #cccccc, #cccccc); } | |
| .ui-btn.plain { background: none; border: 0; color: #F95108; } | |
| .ui-btn.plain:hover { color: #b03804; } | |
| .ui-btn i { line-height: 20px; } | |
| .ui-btn.ui-btn--large { font-size: 20px; line-height: 30px; } | |
| .ui-btn.ui-btn--block { display: block; } | |
| .lt-ie8 button.ui-btn { line-height: 16px; overflow: visible; } | |
| .ui-btn-group { position: relative; display: inline-block; } | |
| .ui-btn-group .ui-btn { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } | |
| .ui-btn-group .ui-btn + .ui-btn { margin-left: -5px; } | |
| .ui-btn-group .ui-btn:first-of-type { margin-left: 0; -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px; border-radius: 3px 0 0 3px; } | |
| .ui-btn-group .ui-btn:last-of-type { -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0; border-radius: 0 3px 3px 0; } | |
| .ui-btn-group.open .ui-btn-dropdown-menu { display: block; } | |
| .ui-btn-group .ui-btn-dropdown-menu { display: none; position: absolute; left: 0; top: 110%; z-index: 1000; min-width: 160px; padding: 0 5px; background: #fff; border: 1px solid #cecece; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: #555 0 10px 15px -5px; -webkit-box-shadow: #555 0 10px 15px -5px; box-shadow: #555 0 10px 15px -5px; } | |
| .ui-btn-group .ui-btn-dropdown-menu a { display: block; padding: 5px; border-bottom: 1px solid #cecece; text-decoration: none; font-size: 14px; color: #75675e; } | |
| .ui-btn-group .ui-btn-dropdown-menu a:hover { color: #F95108; } | |
| .ui-btn-group .ui-btn-dropdown-menu li:last-of-type a { border-bottom: 0; } | |
| .ui-btn-tabs { padding-left: 10px; border-bottom: 1px solid #cecece; margin-bottom: 8px; } | |
| .ui-btn-tabs .ui-btn { color: #F95108; background: none; border-bottom: 0; border-color: #fff; font-size: 14px; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px; border-radius: 3px 3px 0 0; } | |
| .ui-btn-tabs .ui-btn:hover { background: #eee; border-color: #eee; } | |
| .ui-btn-tabs .ui-btn--tab-current, .ui-btn-tabs .ui-btn--tab-current:hover { margin-bottom: -1px; padding-bottom: 5px; color: #75675e; background: #fff; border-color: #cecece; cursor: default; } | |
| .ui-btn-tabs .ui-btn:first-of-type { margin-left: 0; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a class="ui-btn" href="#">Button</a> | |
| <br/><br/> | |
| <div class="ui-btn-group"> | |
| <a data-trigger="uiBtnGroupToggle" class="ui-btn"><i class="icon-align-left"></i> Left</a> | |
| <a data-trigger="uiBtnGroupToggle" class="ui-btn"><i class="icon-align-center"></i> Center</a> | |
| <a data-trigger="uiBtnGroupToggle" class="ui-btn"><i class="icon-align-right"></i> Right</a> | |
| </div> | |
| <br/><br/> | |
| <div class="ui-btn-tabs"> | |
| <a href="#tab-1" data-tab="1" class="ui-btn "><span class="ui-btn-label">One</span></a> | |
| <a href="#tab-2" data-tab="2" class="ui-btn ui-btn--tab-current"><span class="ui-btn-label">Two</span></a> | |
| <a href="#tab-3" data-tab="3" class="ui-btn "><span class="ui-btn-label">Three</span></a> | |
| <a href="#tab-4" data-tab="4" class="ui-btn "><span class="ui-btn-label">Four</span></a> | |
| <a href="#tab-5" data-tab="5" class="ui-btn "><span class="ui-btn-label">Five</span></a> | |
| </div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment