GUAC-587: Use ::before for button images - it's friendlier to overriding CSS.

This commit is contained in:
Michael Jumper
2015-05-04 15:10:54 -07:00
parent 0ed3b9a992
commit 3128b69db6
2 changed files with 63 additions and 38 deletions

View File

@@ -79,35 +79,62 @@ input[type="submit"]:disabled, button:disabled, button.danger:disabled {
opacity: 0.75; opacity: 0.75;
} }
.button.logout, .button.manage, .button.back, .button.home, .button.change-password, .button.logout,
button.logout, button.manage, button.back, button.home, button.change-password { button.logout,
background-repeat: no-repeat; .button.manage,
background-size: 1em; button.manage,
background-position: 0.5em 0.45em; .button.back,
button.back,
.button.home,
button.home,
.button.change-password,
button.change-password {
position: relative;
padding-left: 1.8em; padding-left: 1.8em;
} }
.button.logout, .button.logout::before,
button.logout { button.logout::before,
.button.manage::before,
button.manage::before,
.button.back::before,
button.back::before,
.button.home::before,
button.home::before,
.button.change-password::before,
button.change-password::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1.8em;
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
}
.button.logout::before,
button.logout::before {
background-image: url('images/action-icons/guac-logout.png'); background-image: url('images/action-icons/guac-logout.png');
} }
.button.manage, .button.manage::before,
button.manage { button.manage::before {
background-image: url('images/action-icons/guac-config.png'); background-image: url('images/action-icons/guac-config.png');
} }
.button.back, .button.back::before,
button.back { button.back::before {
background-image: url('images/action-icons/guac-back.png'); background-image: url('images/action-icons/guac-back.png');
} }
.button.home, .button.home::before,
button.home { button.home::before {
background-image: url('images/action-icons/guac-home.png'); background-image: url('images/action-icons/guac-home.png');
} }
.button.change-password, .button.change-password::before,
button.change-password { button.change-password::before {
background-image: url('images/action-icons/guac-key.png'); background-image: url('images/action-icons/guac-key.png');
} }

View File

@@ -24,37 +24,35 @@ button.add-user,
a.button.add-connection, a.button.add-connection,
a.button.add-connection-group { a.button.add-connection-group {
font-size: 0.8em; font-size: 0.8em;
padding-left: 1.8em;
position: relative;
} }
button.add-user { button.add-user::before,
a.button.add-connection::before,
a.button.add-connection-group::before {
content: ' ';
position: absolute;
width: 1.8em;
top: 0;
bottom: 0;
left: 0;
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
}
button.add-user::before {
background-image: url('images/action-icons/guac-user-add.png'); background-image: url('images/action-icons/guac-user-add.png');
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
padding-left: 1.8em;
} }
a.button.add-connection { a.button.add-connection::before {
background-image: url('images/action-icons/guac-monitor-add.png'); background-image: url('images/action-icons/guac-monitor-add.png');
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
padding-left: 1.8em;
} }
a.button.add-connection-group { a.button.add-connection-group::before {
background-image: url('images/action-icons/guac-group-add.png'); background-image: url('images/action-icons/guac-group-add.png');
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
padding-left: 1.8em;
} }