.hyphens() { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .border-box() { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .vertical-gradient(@stop1, @stop2) { .gradient(0deg, @stop1, @stop2); } .horizontal-gradient(@stop1, @stop2) { .gradient(-90deg, @stop1, @stop2); } .gradient(@winkel, @stop1, @stop2) { @winkelOld: @winkel + 90deg; @groundColor: @stop2; background: @groundColor -moz-linear-gradient(@winkelOld, @stop2, @stop1); background: @groundColor -webkit-linear-gradient(@winkelOld, @stop2, @stop1); background: @groundColor -o-linear-gradient(@winkelOld, @stop2, @stop1); background: @groundColor -ms-linear-gradient(@winkelOld, @stop2, @stop1); background: @groundColor linear-gradient(@winkel, @stop2, @stop1); background-repeat: no-repeat; } .box-shadow(...) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } .border-radius(...) { -webkit-border-radius: @arguments; -moz-border-radius: @arguments; border-radius: @arguments; } .nowrap() { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hamburgerMenu() { color: white; width: 3rem; height: 2rem; top: 0.25rem; left: 0.25rem; .border-radius(4px); border: none; .vertical-gradient(@mainColorDark; @mainColor); > ul { height: auto; width: auto; position: absolute; left: 0; top: 100%; background: fade(@mainColorDark,80%); .border-radius(5px); display: none; > li { display: block; text-align: left; line-height: normal; border: none; &:not(:first-child) { border-top: 1px #888 solid; } a { .nowrap(); display: block; height: auto; width: auto; padding: 0.5rem 1rem; color: white; &:hover, &:focus { color: white; .vertical-gradient(@mainColorLight; @mainColor); } } &:first-child { a { .border-radius( 5px 5px 0 0 ); } } &:last-child { a { .border-radius( 0 0 5px 5px ); } } } } &:hover, &:focus, &:active, &:checked { ul { display: block; } } &:before { content: "\2261"; font-size: 2rem; text-align: center; line-height: 0.8em; display: block; cursor: pointer; } } .flexEltern() { display:-ms-flexbox; display: flexbox; display: -webkit-flex; display: flex; } .flexEltern(column) { display:-ms-flexbox; display: flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flexKinder(flow, @rest...) { -webkit-flex-flow: @rest; -ms-flex-flow: @rest; flex-flow: @rest; } .flexKinder(glow, @num) { -webkit-flex-grow: @num; -ms-flex: @num; flex: @num; flex-grow: @num; }