SOURCE CODE: Uize.Widgets.Calculator.Css

<%@
  required ('Uize.Widgets.CssUtil');
%><%
  var
    _cssUtil = Uize.Widgets.CssUtil,
    _cellPadding = 2,
    _buttonShellPadding = 1,
    _buttonShellBorderWidth = 1,
    _entryPaddingRight = 5
  ;
%>
.`` {
  display: inline-block;
  padding: 4px;
  background: #eee;
  border-collapse: collapse;
  border: none;
}

.`` td {
  padding: <%= _cellPadding %>px;
  margin: 0;
}

.`entryShell` {
  position: relative;
  background: #000;
  height: 30px;
}

.`entryBevel` {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #ccc;
  border-color: #ccc #fff #fff #ccc;
}

/*** buttons ***/
  .`buttonShell` {
    border-radius: 3px;
    border: <%= _buttonShellBorderWidth %>px solid rgba(0,0,0,.1);
    padding: <%= _buttonShellPadding %>px;
  }

  /*** digit buttons ***/
    .`digitButton` {
      border-color: rgba(0,128,255,.5);
    }

  /*** memory buttons ***/
    .`memoryButton` {
      border-color: rgba(255,128,0,.5);
    }

  /*** basic arithmetic buttons ***/
    .`operatorButtonBasic` {
      border-color: rgba(80,180,80,.5);
    }

/*** styling for different sizes ***/
<%
  Uize.forEach (
    _cssUtil.sizes,
    function (_size,_sizeName) {
      var _bevelWidth = _size.sizeNo + 1;
      %>
  /*** <%= _sizeName %> ***/
    .`<%= _sizeName %>` .`entryShell` {
      height: <%= _size.outer + _bevelWidth * 2 %>px;
    }
    .`<%= _sizeName %>` .`entryBevel` {
      border-width: <%= _bevelWidth %>px;
    }
<%    }
  );
%>