Skip to content

Commit

Permalink
auto vertical and horizontal centering on icon buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@max-mapper
max-mapper committed Nov 2, 2012
1 parent b09b373 commit 0eb495f
Show file tree
Hide file tree
Showing 15 changed files with 133 additions and 71 deletions.
57 changes: 29 additions & 28 deletions build/sprite.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* glue: 0.2.8 hash: 6bd2df9f9d */
.sprite-toggle-on,
.sprite-toggle-off,
.sprite-map-on,
Expand All @@ -23,33 +24,33 @@
.sprite-icon-check,
.sprite-icon-question,
.sprite-triangle-orange,
.sprite-triangle-grey{background-image:url(sprite.png);background-repeat:no-repeat}
.sprite-toggle-on{background-position:0px 0px;width:50px;height:23px;}
.sprite-toggle-off{background-position:0px -23px;width:50px;height:23px;}
.sprite-map-on{background-position:0px -46px;width:44px;height:40px;}
.sprite-map-off{background-position:0px -86px;width:44px;height:40px;}
.sprite-map:active{background-position:0px -126px;width:44px;height:40px;}
.sprite-list-on{background-position:0px -166px;width:44px;height:40px;}
.sprite-list-off{background-position:0px -206px;width:44px;height:40px;}
.sprite-list:active{background-position:0px -246px;width:44px;height:40px;}
.sprite-icon-where-on{background-position:0px -286px;width:40px;height:40px;}
.sprite-icon-where-off{background-position:0px -326px;width:40px;height:40px;}
.sprite-icon-when-on{background-position:0px -366px;width:40px;height:40px;}
.sprite-icon-when-off{background-position:0px -406px;width:40px;height:40px;}
.sprite-button-secondary-rightcap{background-position:0px -446px;width:4px;height:40px;}
.sprite-button-secondary-repeatx{background-position:0px -486px;width:10px;height:40px;}
.sprite-button-secondary-nipple{background-position:0px -526px;width:10px;height:40px;}
.sprite-button-secondary-leftcap{background-position:0px -566px;width:4px;height:40px;}
.sprite-button-primary-rightcap{background-position:0px -606px;width:4px;height:40px;}
.sprite-button-primary-leftcap{background-position:0px -646px;width:4px;height:40px;}
.sprite-button-main-repeatx{background-position:0px -686px;width:10px;height:40px;}
.sprite-icon-refresh{background-position:0px -726px;width:21px;height:25px;}
.sprite-icon-refresh-white{background-position:0px -751px;width:24px;height:23px;}
.sprite-icon-edit{background-position:0px -772px;width:21px;height:20px;}
.sprite-icon-check{background-position:0px -792px;width:19px;height:16px;}
.sprite-icon-question{background-position:0px -808px;width:16px;height:16px;}
.sprite-triangle-orange{background-position:0px -824px;width:10px;height:11px;}
.sprite-triangle-grey{background-position:0px -835px;width:10px;height:11px;}
.sprite-triangle-grey{background-image:url('sprite.png');background-repeat:no-repeat}
.sprite-toggle-on{background-position:-2px -2px;width:50px;height:23px;}
.sprite-toggle-off{background-position:-2px -29px;width:50px;height:23px;}
.sprite-map-on{background-position:-2px -56px;width:44px;height:40px;}
.sprite-map-off{background-position:-2px -100px;width:44px;height:40px;}
.sprite-map:active{background-position:-2px -144px;width:44px;height:40px;}
.sprite-list-on{background-position:-2px -188px;width:44px;height:40px;}
.sprite-list-off{background-position:-2px -232px;width:44px;height:40px;}
.sprite-list:active{background-position:-2px -276px;width:44px;height:40px;}
.sprite-icon-where-on{background-position:-2px -320px;width:40px;height:40px;}
.sprite-icon-where-off{background-position:-2px -364px;width:40px;height:40px;}
.sprite-icon-when-on{background-position:-2px -408px;width:40px;height:40px;}
.sprite-icon-when-off{background-position:-2px -452px;width:40px;height:40px;}
.sprite-button-secondary-rightcap{background-position:-2px -496px;width:4px;height:40px;}
.sprite-button-secondary-repeatx{background-position:-2px -540px;width:10px;height:40px;}
.sprite-button-secondary-nipple{background-position:-2px -584px;width:10px;height:40px;}
.sprite-button-secondary-leftcap{background-position:-2px -628px;width:4px;height:40px;}
.sprite-button-primary-rightcap{background-position:-2px -672px;width:4px;height:40px;}
.sprite-button-primary-leftcap{background-position:-2px -716px;width:4px;height:40px;}
.sprite-button-main-repeatx{background-position:-2px -760px;width:10px;height:40px;}
.sprite-icon-refresh{background-position:-2px -804px;width:21px;height:25px;}
.sprite-icon-refresh-white{background-position:-2px -833px;width:24px;height:23px;}
.sprite-icon-edit{background-position:-2px -860px;width:21px;height:20px;}
.sprite-icon-check{background-position:-2px -884px;width:19px;height:16px;}
.sprite-icon-question{background-position:-2px -904px;width:16px;height:16px;}
.sprite-triangle-orange{background-position:-2px -924px;width:10px;height:11px;}
.sprite-triangle-grey{background-position:-2px -939px;width:10px;height:11px;}
@media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min--moz-device-pixel-ratio: 2.0), only screen and (-o-min-device-pixel-ratio: 200/100), only screen and (min-device-pixel-ratio: 2.0) {.sprite-toggle-on,
.sprite-toggle-off,
.sprite-map-on,
Expand All @@ -75,4 +76,4 @@
.sprite-icon-check,
.sprite-icon-question,
.sprite-triangle-orange,
.sprite-triangle-grey{background-image:url(sprite@2x.png);-webkit-background-size: 50px 847px;-moz-background-size: 50px 847px;background-size: 50px 847px;}}
.sprite-triangle-grey{background-image:url('sprite@2x.png');-webkit-background-size: 54px 951px;-moz-background-size: 54px 951px;background-size: 54px 951px;}}
Binary file modified build/sprite.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified build/sprite@2x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 34 additions & 5 deletions build/vk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,36 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-

}

.centerBoth {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-pack: center;
box-align: center;
}

.centerVertical {
display: -webkit-box;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-pack: center;
display: box;
box-pack: center;
}

.centerHorizontal {
display: -webkit-box;
-webkit-box-align: center;
display: -moz-box;
-moz-box-align: center;
display: box;
box-align: center;
}

.vk-container input[type="checkbox"] {
-webkit-appearance:none;
/* ios6 specific: */
Expand Down Expand Up @@ -49,10 +79,9 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
display: -o-box;
display: box;
}
.bottomNav .active { color: #111111; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F;}
.bottomNav .refreshButton { width: 38px; height: 38px; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F; display: -webkit-box; }
.bottomNav .refreshButton:active { background-color: #C7DECC; }
.bottomNav .refreshButton .sprite { margin: 7px auto 7px auto; -webkit-box-align: center; }
.bottomNav .active.bottomButton { color: #111111; border-radius: 3px; background-color: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F;}
.bottomNav .iconButton { width: 38px; height: 38px; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F; }
.bottomNav .iconButton:active { background-color: #C7DECC; }
.bottomNav .refreshButton .sprite.spinning { background: url('images/transparent-loader.gif') no-repeat 4px 4px; background-size: initial; }
.nav-button.following { font-size: 13.5px; font-weight: bold; border-bottom-left-radius: 5px; }
.nav-button.settings { border-bottom-right-radius: 5px; }
Expand Down Expand Up @@ -99,7 +128,7 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
.right.buttons .actionButton { float: right; margin-right: 3px; }
.right.buttons { margin-right: 2px; }
.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
.bottomNav a { display: block; text-align: center; }
.navButton { display: block; text-align: center; }
.bottomButton { line-height: 38px; height: 38px; border-radius: 5px; padding: 0px; color: #c4c4c4; font-size: 13.58px; }
.bottomButton:active { color: white; }
/* browser compat notes: */
Expand Down
5 changes: 3 additions & 2 deletions build/vk.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2813,6 +2813,7 @@ exports.actionButton = function(options) {
function ActionButton(options) {
var defaults = {target: '.right.buttons', className: 'nav-button round action'}
this.options = _.extend({}, defaults, options)
if (this.options.className.match(/sprite/)) this.options.linkClass += " centerBoth"
vk.Button.call(this, this.options)
// grab from current scope if available
if (typeof template !== "undefined") this.template = template
Expand All @@ -2823,7 +2824,7 @@ function ActionButton(options) {
*/

util.inherits(ActionButton, vk.Button)
})(vk, "<a href=\"{{href}}\" class=\"actionButton {{linkClass}}\">\n <div data-view=\"{{data-view}}\" id=\"{{id}}\" class=\"{{className}}\">\n {{#labelSprite}}<div class=\"labelSprite {{labelSprite}}\"></div>{{/labelSprite}}\n {{#text}}<div class=\"buttonLabel\">{{text}}</div>{{/text}}\n </div>\n</a>\n");
})(vk, "<a href=\"{{href}}\" class=\"actionButton {{linkClass}}\">\n <div {{#data-view}}data-view=\"{{data-view}}\"{{/data-view}} {{#page}}data-page=\"{{page}}\"{{/page}} id=\"{{id}}\" class=\"{{className}}\">\n {{#labelSprite}}<div class=\"labelSprite {{labelSprite}}\"></div>{{/labelSprite}}\n {{#text}}<div class=\"buttonLabel\">{{text}}</div>{{/text}}\n </div>\n</a>\n");
;(function(exports, template){
/**
* Expose `NavButton`.
Expand Down Expand Up @@ -2855,7 +2856,7 @@ function NavButton(options) {
*/

util.inherits(NavButton, vk.Button)
})(vk, "<a href=\"{{href}}\">\n <div {{#page}}data-page=\"{{page}}\"{{/page}} id=\"{{id}}\" class=\"bottomButton {{className}}\">\n {{text}}\n </div>\n</a>\n");
})(vk, "<a href=\"{{href}}\" class=\"navButton\">\n <div {{#page}}data-page=\"{{page}}\"{{/page}} id=\"{{id}}\" class=\"bottomButton {{className}}\">\n {{text}}\n </div>\n</a>\n");
;(function(exports, template){
/**
* Expose `List`.
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
var unreadButton = vk.navButton({href: "#/unread", id: "unread-button", text: "Unread"})
footer.add(unreadButton, 'left')

var refreshButton = vk.actionButton({href: "#/refresh!", linkClass: "refreshButton", text: "", className: "sprite-icon-refresh-white sprite"})
var refreshButton = vk.actionButton({href: "#/refresh!", linkClass: "refreshButton iconButton", text: "", className: "sprite-icon-refresh-white sprite"})
footer.add(refreshButton, 'right')

</script>
Expand Down
2 changes: 1 addition & 1 deletion lib/components/actionbutton/actionbutton.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<a href="{{href}}" class="actionButton {{linkClass}}">
<div data-view="{{data-view}}" id="{{id}}" class="{{className}}">
<div {{#data-view}}data-view="{{data-view}}"{{/data-view}} {{#page}}data-page="{{page}}"{{/page}} id="{{id}}" class="{{className}}">
{{#labelSprite}}<div class="labelSprite {{labelSprite}}"></div>{{/labelSprite}}
{{#text}}<div class="buttonLabel">{{text}}</div>{{/text}}
</div>
Expand Down
1 change: 1 addition & 0 deletions lib/components/actionbutton/actionbutton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ exports.actionButton = function(options) {
function ActionButton(options) {
var defaults = {target: '.right.buttons', className: 'nav-button round action'}
this.options = _.extend({}, defaults, options)
if (this.options.className.match(/sprite/)) this.options.linkClass += " centerBoth"
vk.Button.call(this, this.options)
// grab from current scope if available
if (typeof template !== "undefined") this.template = template
Expand Down
7 changes: 3 additions & 4 deletions lib/components/bottomnav/bottomnav.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@
display: -o-box;
display: box;
}
.bottomNav .active { color: #111111; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F;}
.bottomNav .refreshButton { width: 38px; height: 38px; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F; display: -webkit-box; }
.bottomNav .refreshButton:active { background-color: #C7DECC; }
.bottomNav .refreshButton .sprite { margin: 7px auto 7px auto; -webkit-box-align: center; }
.bottomNav .active.bottomButton { color: #111111; border-radius: 3px; background-color: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F;}
.bottomNav .iconButton { width: 38px; height: 38px; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F; }
.bottomNav .iconButton:active { background-color: #C7DECC; }
.bottomNav .refreshButton .sprite.spinning { background: url('images/transparent-loader.gif') no-repeat 4px 4px; background-size: initial; }
.nav-button.following { font-size: 13.5px; font-weight: bold; border-bottom-left-radius: 5px; }
.nav-button.settings { border-bottom-right-radius: 5px; }
Expand Down
30 changes: 30 additions & 0 deletions lib/components/container/container.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,36 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-

}

.centerBoth {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-pack: center;
box-align: center;
}

.centerVertical {
display: -webkit-box;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-pack: center;
display: box;
box-pack: center;
}

.centerHorizontal {
display: -webkit-box;
-webkit-box-align: center;
display: -moz-box;
-moz-box-align: center;
display: box;
box-align: center;
}

.vk-container input[type="checkbox"] {
-webkit-appearance:none;
/* ios6 specific: */
Expand Down
2 changes: 1 addition & 1 deletion lib/components/navbutton/navbutton.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.bottomNav a { display: block; text-align: center; }
.navButton { display: block; text-align: center; }
.bottomButton { line-height: 38px; height: 38px; border-radius: 5px; padding: 0px; color: #c4c4c4; font-size: 13.58px; }
.bottomButton:active { color: white; }
2 changes: 1 addition & 1 deletion lib/components/navbutton/navbutton.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<a href="{{href}}">
<a href="{{href}}" class="navButton">
<div {{#page}}data-page="{{page}}"{{/page}} id="{{id}}" class="bottomButton {{className}}">
{{text}}
</div>
Expand Down
57 changes: 29 additions & 28 deletions lib/sprite-dist/sprite.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* glue: 0.2.8 hash: 6bd2df9f9d */
.sprite-toggle-on,
.sprite-toggle-off,
.sprite-map-on,
Expand All @@ -23,33 +24,33 @@
.sprite-icon-check,
.sprite-icon-question,
.sprite-triangle-orange,
.sprite-triangle-grey{background-image:url(sprite.png);background-repeat:no-repeat}
.sprite-toggle-on{background-position:0px 0px;width:50px;height:23px;}
.sprite-toggle-off{background-position:0px -23px;width:50px;height:23px;}
.sprite-map-on{background-position:0px -46px;width:44px;height:40px;}
.sprite-map-off{background-position:0px -86px;width:44px;height:40px;}
.sprite-map:active{background-position:0px -126px;width:44px;height:40px;}
.sprite-list-on{background-position:0px -166px;width:44px;height:40px;}
.sprite-list-off{background-position:0px -206px;width:44px;height:40px;}
.sprite-list:active{background-position:0px -246px;width:44px;height:40px;}
.sprite-icon-where-on{background-position:0px -286px;width:40px;height:40px;}
.sprite-icon-where-off{background-position:0px -326px;width:40px;height:40px;}
.sprite-icon-when-on{background-position:0px -366px;width:40px;height:40px;}
.sprite-icon-when-off{background-position:0px -406px;width:40px;height:40px;}
.sprite-button-secondary-rightcap{background-position:0px -446px;width:4px;height:40px;}
.sprite-button-secondary-repeatx{background-position:0px -486px;width:10px;height:40px;}
.sprite-button-secondary-nipple{background-position:0px -526px;width:10px;height:40px;}
.sprite-button-secondary-leftcap{background-position:0px -566px;width:4px;height:40px;}
.sprite-button-primary-rightcap{background-position:0px -606px;width:4px;height:40px;}
.sprite-button-primary-leftcap{background-position:0px -646px;width:4px;height:40px;}
.sprite-button-main-repeatx{background-position:0px -686px;width:10px;height:40px;}
.sprite-icon-refresh{background-position:0px -726px;width:21px;height:25px;}
.sprite-icon-refresh-white{background-position:0px -751px;width:24px;height:23px;}
.sprite-icon-edit{background-position:0px -772px;width:21px;height:20px;}
.sprite-icon-check{background-position:0px -792px;width:19px;height:16px;}
.sprite-icon-question{background-position:0px -808px;width:16px;height:16px;}
.sprite-triangle-orange{background-position:0px -824px;width:10px;height:11px;}
.sprite-triangle-grey{background-position:0px -835px;width:10px;height:11px;}
.sprite-triangle-grey{background-image:url('sprite.png');background-repeat:no-repeat}
.sprite-toggle-on{background-position:-2px -2px;width:50px;height:23px;}
.sprite-toggle-off{background-position:-2px -29px;width:50px;height:23px;}
.sprite-map-on{background-position:-2px -56px;width:44px;height:40px;}
.sprite-map-off{background-position:-2px -100px;width:44px;height:40px;}
.sprite-map:active{background-position:-2px -144px;width:44px;height:40px;}
.sprite-list-on{background-position:-2px -188px;width:44px;height:40px;}
.sprite-list-off{background-position:-2px -232px;width:44px;height:40px;}
.sprite-list:active{background-position:-2px -276px;width:44px;height:40px;}
.sprite-icon-where-on{background-position:-2px -320px;width:40px;height:40px;}
.sprite-icon-where-off{background-position:-2px -364px;width:40px;height:40px;}
.sprite-icon-when-on{background-position:-2px -408px;width:40px;height:40px;}
.sprite-icon-when-off{background-position:-2px -452px;width:40px;height:40px;}
.sprite-button-secondary-rightcap{background-position:-2px -496px;width:4px;height:40px;}
.sprite-button-secondary-repeatx{background-position:-2px -540px;width:10px;height:40px;}
.sprite-button-secondary-nipple{background-position:-2px -584px;width:10px;height:40px;}
.sprite-button-secondary-leftcap{background-position:-2px -628px;width:4px;height:40px;}
.sprite-button-primary-rightcap{background-position:-2px -672px;width:4px;height:40px;}
.sprite-button-primary-leftcap{background-position:-2px -716px;width:4px;height:40px;}
.sprite-button-main-repeatx{background-position:-2px -760px;width:10px;height:40px;}
.sprite-icon-refresh{background-position:-2px -804px;width:21px;height:25px;}
.sprite-icon-refresh-white{background-position:-2px -833px;width:24px;height:23px;}
.sprite-icon-edit{background-position:-2px -860px;width:21px;height:20px;}
.sprite-icon-check{background-position:-2px -884px;width:19px;height:16px;}
.sprite-icon-question{background-position:-2px -904px;width:16px;height:16px;}
.sprite-triangle-orange{background-position:-2px -924px;width:10px;height:11px;}
.sprite-triangle-grey{background-position:-2px -939px;width:10px;height:11px;}
@media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min--moz-device-pixel-ratio: 2.0), only screen and (-o-min-device-pixel-ratio: 200/100), only screen and (min-device-pixel-ratio: 2.0) {.sprite-toggle-on,
.sprite-toggle-off,
.sprite-map-on,
Expand All @@ -75,4 +76,4 @@
.sprite-icon-check,
.sprite-icon-question,
.sprite-triangle-orange,
.sprite-triangle-grey{background-image:url(sprite@2x.png);-webkit-background-size: 50px 847px;-moz-background-size: 50px 847px;background-size: 50px 847px;}}
.sprite-triangle-grey{background-image:url('sprite@2x.png');-webkit-background-size: 54px 951px;-moz-background-size: 54px 951px;background-size: 54px 951px;}}
Binary file modified lib/sprite-dist/sprite.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified lib/sprite-dist/sprite@2x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0eb495f

Please sign in to comment.