Stud.IP - DirectionButtons test

dabblet.css

/**
 * Stud.IP - DirectionButtons test
 **/

.button.left:before, .button.right:after {
    content: " ";
    width: 16px;
    height: 16px;
}

.button.left:before {
    float: left;
    margin: -1px 8px 0 -4px;
    background: url(http://develop.studip.de/studip/assets/images/icons/16/blue/arr_1left.png) no-repeat;
}

.button.right:after {
    float: right;
    margin: -1px -4px 0 8px;
    background: url(http://develop.studip.de/studip/assets/images/icons/16/blue/arr_1right.png) no-repeat;
}

.button.left, .button.right {
    white-space: normal;
}

.button.left.double:before {
    background: url(http://develop.studip.de/studip/assets/images/icons/16/blue/arr_2left.png) no-repeat;
}

.button.right.double:after {
    background: url(http://develop.studip.de/studip/assets/images/icons/16/blue/arr_2right.png) no-repeat;
}

.button.left.black:before { background: url(http://develop.studip.de/studip/assets/images/icons/16/black/arr_1left.png) no-repeat; }
.button.right.black:after { background: url(http://develop.studip.de/studip/assets/images/icons/16/black/arr_1right.png) no-repeat; }
.button.left.double.black:before { background: url(http://develop.studip.de/studip/assets/images/icons/16/black/arr_2left.png) no-repeat; }
.button.right.double.black:after { background: url(http://develop.studip.de/studip/assets/images/icons/16/black/arr_2right.png) no-repeat; }

.button.left.grey:before { background: url(http://develop.studip.de/studip/assets/images/icons/16/grey/arr_1left.png) no-repeat; }
.button.right.grey:after { background: url(http://develop.studip.de/studip/assets/images/icons/16/grey/arr_1right.png) no-repeat; }
.button.left.double.grey:before { background: url(http://develop.studip.de/studip/assets/images/icons/16/grey/arr_2left.png) no-repeat; }
.button.right.double.grey:after { background: url(http://develop.studip.de/studip/assets/images/icons/16/grey/arr_2right.png) no-repeat; }

/* this is just for this demo */
.button-group, label { clear: both; display: block !important; } 

/* Button styles from Stud.IP trunk as of 2012-02-03 */
a.button, button.button {
    display: inline-block;
    position: relative;
    margin: 0.7em 0.5em 0.7em 0;
    padding: 5px 15px 5px 15px;
    border-style: solid;
    border-width: 1px;
    border-top-color: #cdd;
    border-left-color: #ccf;
    border-right-color: #bbF;
    border-bottom-color: #99b;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    background-color: #cddae4;
    font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
    font-size: 11px;
    line-height: 130%;
    text-decoration: none;
    color: #181818;
    cursor: pointer;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f4f7), to(#97abb7));
    background-image: -webkit-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
    background-image: -moz-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
    background-image: -ms-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
    background-image: -o-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
    background-image: linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f4f7', endColorstr='#97abb7');
    min-width: 93px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

a.button:hover, button.button:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#b5c3cc));
    background-image: -webkit-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
    background-image: -moz-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
    background-image: -ms-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
    background-image: -o-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
    background-image: linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#b5c3cc');
}

a.button:active, button.button:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#cfdce5), to(#7993a2));
    background-image: -webkit-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
    background-image: -moz-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
    background-image: -ms-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
    background-image: -o-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
    background-image: linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfdce5', endColorstr='#7993a2');
}

a.button::-moz-focus-inner, button.button::-moz-focus-inner {
    border: 0;
}

a.button:focus, button.button:focus {
    outline: dotted 1px black;
}

button.button {
    width: auto;
    overflow: visible;
}

.button.accept:after, .button.cancel:after {
    float: right;
    margin: 0 -4px 0 8px;
    content: " ";
    width: 16px;
    height: 16px;
}

.button.accept:after {
    margin-top: -4px;
    background: url(http://develop.studip.de/studip/assets/images/icons/16/green/accept.png) no-repeat;
}

.button.cancel:after {
    margin-top: -2px;
    background: url(http://develop.studip.de/studip/assets/images/icons/16/red/decline.png) no-repeat;
}

.button.accept, .button.cancel {
    white-space: normal;
}

/****************************************************************************/
/* Grouped Buttons                                                          */
/****************************************************************************/

.button-group {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.button-group .button,
.button-group button {
    float: left;
    margin-left: -1px;
    margin-right: 0px;
    border-left: 1px solid #aaa;
}

.button-group > .button:not(:first-child):not(:last-child),
.button-group > button:not(:first-child):not(:last-child) {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.button-group > .button:first-child,
.button-group > button:first-child {
    margin-left: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-left: 1px solid #ccf;
}

.button-group > .button:last-child,
.button-group > button:last-child {
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

dabblet.html

<h1>.button</h1>
<div>
	<button class="button left double">Anfang</button>
	<button class="button left">Zurück</button>
	<button class="button right">Weiter</button>
	<button class="button double right">Ende</button>
</div>

<div>
	<button class="black button double left">Vorne</button>
	<button class="black button left">Links</button>
	<button class="black button right">Rechts</button>
	<button class="black button double right">Hinten</button>
</div>

<div>
	<button class="grey button double left">Vorne</button>
	<button class="grey button left">Links</button>
	<button class="grey button right">Rechts</button>
	<button class="grey button double right">Hinten</button>
</div>

<h1>.button-group .button</h1>
<div class="button-group">
	<button class="button left double">Vorne</button>
	<button class="button left">Links</button>
	<button class="button right">Rechts</button>
	<button class="button double right">Hinten</button>
</div>

<div class="button-group">
	<button class="black button double left">Vorne</button>
	<button class="black button left">Links</button>
	<button class="black button right">Rechts</button>
	<button class="black button double right">Hinten</button>
</div>

<div class="button-group">
	<button class="grey button double left">Vorne</button>
	<button class="grey button left">Links</button>
	<button class="grey button right">Rechts</button>
	<button class="grey button double right">Hinten</button>
</div>

settings.json

{"view":"split","prefixfree":"","page":"html"}