<%@ required ('Uize.Widgets.CssUtil'); %>
<%
var
_cssUtil = Uize.Widgets.CssUtil,
_boxBorderWidth = _cssUtil.box.border.width
;
function _buttonBgGradient (_topColor,_bottomColor,_fallbackColor) {
%>
background: <%= _fallbackColor %>; /* Old browsers */
background: -moz-linear-gradient(top, <%= _topColor %> 0%, <%= _bottomColor %> 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,<%= _topColor %>), color-stop(100%,<%= _bottomColor %>)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, <%= _topColor %> 0%,<%= _bottomColor %> 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, <%= _topColor %> 0%,<%= _bottomColor %> 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, <%= _topColor %> 0%,<%= _bottomColor %> 100%); /* IE10+ */
background: linear-gradient(to bottom, <%= _topColor %> 0%,<%= _bottomColor %> 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='<%= _topColor %>', endColorstr='<%= _bottomColor %>',GradientType=0 ); /* IE6-9 */
<%
}
%>
/*** base styling ***/
.``, .``:link, .``:visited, .``:hover, .``:active {
font-family: <%= _cssUtil.font.family %>;
font-weight: bold;
display: inline-block;
border-width: <%= _boxBorderWidth %>px;
border-style: solid;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
}
/*** styling for different display states ***/
/*** normal flavor ***/
.`normal`,
.`normal`:link,
.`normal`:visited,
.`normal`:hover,
.`normal`:active {
border-color: #ccc #999 #999 #ccc;
color: #444;
text-shadow: 1px -1px 0 #fff, 1px 0px 0 #fff, 1px 1px 0 #fff;
<% _buttonBgGradient ('#ffffff','#e0e0e0','#eeeeee') %>
}
.`normal-over`,
.`normal-over`:link,
.`normal-over`:visited,
.`normal-over`:hover,
.`normal-over`:active {
border-color: #aaa #777 #777 #aaa;
color: #222;
text-shadow: 1px -1px 0 #fff, 1px 0px 0 #fff, 1px 1px 0 #fff;
background: #efefef;
filter: none;
}
.`normal-active`,
.`normal-active`:link,
.`normal-active`:visited,
.`normal-active`:hover,
.`normal-active`:active {
border-color: #666;
color: #000;
text-shadow: 1px -1px 0 #fff, 1px 0px 0 #fff, 1px 1px 0 #fff;
box-shadow: inset 0 2px 4px rgba(0,0,0,.1);
background: #fff;
filter: none;
}
.`normal-disabled`,
.`normal-disabled`:link,
.`normal-disabled`:visited,
.`normal-disabled`:hover,
.`normal-disabled`:active {
border-color: #d3d3d3;
background: #e6e6e6;
filter: none;
color: #bbb;
text-shadow: none;
cursor: default;
}
/*** subdued flavor ***/
.`subdued`,
.`subdued`:link,
.`subdued`:visited,
.`subdued`:hover,
.`subdued`:active {
border-color: transparent;
color: #444;
text-shadow: none;
background; none;
}
.`subdued-over`,
.`subdued-over`:link,
.`subdued-over`:visited,
.`subdued-over`:hover,
.`subdued-over`:active {
border-color: #aaa #777 #777 #aaa;
color: #222;
text-shadow: 1px -1px 0 #fff, 1px 0px 0 #fff, 1px 1px 0 #fff;
background: #efefef;
filter: none;
}
.`subdued-active`,
.`subdued-active`:link,
.`subdued-active`:visited,
.`subdued-active`:hover,
.`subdued-active`:active {
border-color: #666;
color: #000;
text-shadow: 1px -1px 0 #fff, 1px 0px 0 #fff, 1px 1px 0 #fff;
box-shadow: inset 0 2px 4px rgba(0,0,0,.1);
background: #fff;
filter: none;
}
.`subdued-disabled`,
.`subdued-disabled`:link,
.`subdued-disabled`:visited,
.`subdued-disabled`:hover,
.`subdued-disabled`:active {
border-color: transparent;
background: none;
filter: none;
color: #bbb;
text-shadow: none;
cursor: default;
}
/*** positive flavor ***/
.`positive`,
.`positive`:link,
.`positive`:visited,
.`positive`:hover,
.`positive`:active {
border-color: #9c9 #696 #585 #9c9;
color: #fff;
<% _buttonBgGradient ('#88dd44','#559922','#55aa22') %>
}
.`positive-over`,
.`positive-over`:link,
.`positive-over`:visited,
.`positive-over`:hover,
.`positive-over`:active {
border-color: #7a7 #474 #474 #7a7;
color: #fff;
text-shadow: 1px -1px 1px rgba(0,0,0,.1), 1px 0px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,.1);
background: #6b3;
filter: none;
}
.`positive-active`,
.`positive-active`:link,
.`positive-active`:visited,
.`positive-active`:hover,
.`positive-active`:active {
border-color: #584;
color: #fff;
text-shadow: 1px -1px 1px rgba(0,0,0,.1), 1px 0px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 4px 6px rgba(0,0,0,.1);
background: #7c4;
filter: none;
}
.`positive-disabled`,
.`positive-disabled`:link,
.`positive-disabled`:visited,
.`positive-disabled`:hover,
.`positive-disabled`:active {
border-color: #bc9;
background: #bd8;
filter: none;
color: rgba(255,255,255,.5);
text-shadow: none;
cursor: default;
}
/*** negative flavor ***/
.`negative`,
.`negative`:link,
.`negative`:visited,
.`negative`:hover,
.`negative`:active {
border-color: #cc9999 #996666 #875454 #cc9999;
color: #fff;
<% _buttonBgGradient ('#dd4646','#9b2222','##aa2222') %>
}
.`negative-over`,
.`negative-over`:link,
.`negative-over`:visited,
.`negative-over`:hover,
.`negative-over`:active {
border-color: #ab7878 #784545 #784545 #ab7878;
color: #fff;
text-shadow: 1px -1px 1px rgba(0,0,0,.1), 1px 0px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,.1);
background: #bc3434;
filter: none;
}
.`negative-active`,
.`negative-active`:link,
.`negative-active`:visited,
.`negative-active`:hover,
.`negative-active`:active {
border-color: #884444;
color: #fff;
text-shadow: 1px -1px 1px rgba(0,0,0,.1), 1px 0px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 4px 6px rgba(0,0,0,.1);
background: #cb4343;
filter: none;
}
.`negative-disabled`,
.`negative-disabled`:link,
.`negative-disabled`:visited,
.`negative-disabled`:hover,
.`negative-disabled`:active {
border-color: #cc9999;
background: #dd8888;
filter: none;
color: rgba(255,255,255,.5);
text-shadow: none;
cursor: default;
}
/*** primary flavor ***/
.`primary`,
.`primary`:link,
.`primary`:visited,
.`primary`:hover,
.`primary`:active {
border-color: #99bbcc #668899 #547687 #99bbcc;
color: #fff;
<% _buttonBgGradient ('#46abdd','#22729b','#227daa') %>
}
.`primary-over`,
.`primary-over`:link,
.`primary-over`:visited,
.`primary-over`:hover,
.`primary-over`:active {
border-color: #789aab #456778 #456778 #789aab;
color: #fff;
text-shadow: 1px -1px 1px rgba(0,0,0,.1), 1px 0px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,.1);
background: #348fbc;
filter: none;
}
.`primary-active`,
.`primary-active`:link,
.`primary-active`:visited,
.`primary-active`:hover,
.`primary-active`:active {
border-color: #447188;
color: #fff;
text-shadow: 1px -1px 1px rgba(0,0,0,.1), 1px 0px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 4px 6px rgba(0,0,0,.1);
background: #439ecb;
filter: none;
}
.`primary-disabled`,
.`primary-disabled`:link,
.`primary-disabled`:visited,
.`primary-disabled`:hover,
.`primary-disabled`:active {
border-color: #99bbcc;
background: #88c1dd;
filter: none;
color: rgba(255,255,255,.5);
text-shadow: none;
cursor: default;
}
/*** styling for busy state ***/
.`busy`, .`busy`:link, .`busy`:visited, .`busy`:hover, .`busy`:active {
cursor: wait;
}
/*** styling for different sizes ***/
<%
var _sizes = _cssUtil.sizes;
function _sizeStyleProperties (_sizeName,_horizontalPadding) {
var
_size = _sizes [_sizeName],
_sizeFont = _size.font,
_sizeOuter = _size.outer,
_padding = _sizeOuter - _boxBorderWidth * 2 - _sizeFont,
_topPadding = Math.floor (_padding / 2)
;
%>font-size: <%= _sizeFont %>px;
line-height: <%= _sizeFont %>px;
padding: <%= _topPadding %>px <%= _horizontalPadding %>px <%= _padding - _topPadding %>px <%= _horizontalPadding %>px;<%
}
%>
.`tiny` {
<% _sizeStyleProperties ('tiny',8) %>
}
.`small` {
<% _sizeStyleProperties ('small',9) %>
}
.`medium` {
<% _sizeStyleProperties ('medium',14) %>
}
.`large` {
<% _sizeStyleProperties ('large',17) %>
}