@import "../../../base/less/mixins"; .widget-function('import_google_font'); @button_width: ''; @button_color: #41a9d5; @border_color: darken(@button_color, 15%); @text_color: #FFFFFF; @button_font: default; @button_font_weight: default; @font_size: 1em; @rounding: 0.25em; @padding: 1em; @has_text: true; .ow-button-base { a { .box-sizing(border-box); & when( isnumber( @button_width ) ) { width: @button_width; max-width: 100%; } .font(@button_font, @button_font_weight); font-size: @font_size; padding: @padding @padding*2; .gradient(@button_color, darken(@button_color, 10%), @button_color); border: 1px solid; border-color: lighten(@border_color, 2%) @border_color darken(@border_color, 3%) @border_color; color: @text_color !important; .rounded(@rounding); .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065)"); text-shadow: 0 1px 0 rgba(0,0,0,0.05); & when not ( @has_text = true ) { .sow-icon-image, [class^="sow-icon-"] { margin: 0; } } &:visited, &:active, &:hover{ color: @text_color !important; } &.ow-button-hover:hover { .gradient(lighten(@button_color, 2%), lighten(darken(@button_color, 10%), 2%), lighten(@button_color, 2%)); border-color: lighten(lighten(@border_color, 2%), 2%) lighten(@border_color, 2%) darken(lighten(@border_color, 2%), 3%) lighten(@border_color, 2%); color: lighten(@text_color, 2%); } } }