1@import '../lib/font-awesome/less/font-awesome'; 2 3 4 5@tablet: ~"only screen and (min-device-width : 768px) and (max-device-width : 1024px)"; 6@small-window: ~"only screen and (max-width: 1024px)"; 7@small-list: ~"only screen and (max-width: 341px)"; 8@highres: ~"(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; 9 10 11 12@dotted: 1px dotted @anthrazit; 13 14 15 16.bg-gradient(@color-start, @color-end, @color-default) { 17 .diagonal-gradient (@color-start, @color-end, @color-default); 18} 19 20.bg-gradient(@color, @lightenBy) { 21 .diagonal-gradient (lighten(@color, @lightenBy + 3%), lighten(@color, @lightenBy - 3%), lighten(@color, @lightenBy)); 22} 23 24.bg-gradient() { 25 .bg-gradient(@primary, 49%); 26} 27 28 29/** 30 * Gives lists a custom bullet point 31 */ 32.bullet-icon() { 33 .bullet-icon("\e080"); 34} 35.bullet-icon(@content) { 36 .bullet-icon(@content, before, auto, auto, auto, -1.5em); 37} 38.bullet-icon(@content, before, @topPos, @rightPos, @bottomPos, @leftPos) { 39 position: relative; 40 &:before { 41 .bullet-icon-content(@content, @topPos, @rightPos, @bottomPos, @leftPos); 42 } 43} 44.bullet-icon(@content, after, @topPos, @rightPos, @bottomPos, @leftPos) { 45 position: relative; 46 &:after { 47 .bullet-icon-content(@content, @topPos, @rightPos, @bottomPos, @leftPos); 48 } 49} 50.bullet-icon-content(@content, @topPos, @rightPos, @bottomPos, @leftPos) { 51 position: absolute; 52 top: @topPos; 53 left: @leftPos; 54 right: @rightPos; 55 bottom: @bottomPos; 56 font-family: 'Glyphicons Halflings'; 57 content: @content; 58 -webkit-font-smoothing: antialiased; 59 font-style: normal; 60 font-weight: normal; 61 display: block; 62 font-size: .8em; 63} 64 65 66/** 67 * used for less and more links (especially collapsed search result lists and code examples 68 */ 69.anim-link(@symbol) { 70 font-size: 1.5em; 71 line-height: .65em; 72 padding: 0 0 0.65em 0; 73 74 text-align: center; 75 .bullet-icon("@{symbol}", before, 1em, auto, auto, 5em); 76 .bullet-icon("@{symbol}", after, 1em, 5em, auto, auto); 77 &:before, &:after { 78 opacity: 0; 79 font-size: 0.3em; 80 .transition(opacity .5s); 81 } 82 83 &:hover { 84 text-decoration: none; 85 &:before, &:after { opacity: 1; .animation(animation2 .3s linear 0s infinite alternate); } 86 } 87} 88 89.more-link() { 90 .anim-link("\e114"); 91 &:before, &:after { margin-top: .8em; } 92} 93 94.less-link() { 95 .anim-link("\e113"); 96 &:before, &:after { margin-top: -.8em; } 97} 98 99 100 101.box { 102 border: 1px solid rgba(0,0,0,.2); 103 .bg-gradient(@anthrazit, 85%); 104 .border-radius(4px); 105 .box-shadow(inset 0 1px 2px rgba(0, 0, 0, .05)); 106} 107 108 109 110.glyphicon() { 111 .glyphicon("\e107"); 112} 113 114.glyphicon(@content) { 115 font-family: 'Glyphicons Halflings'; 116 font-style: normal; 117 font-weight: normal; 118 line-height: 1; 119 -webkit-font-smoothing: antialiased; 120 -moz-osx-font-smoothing: grayscale; 121 content: @content; 122} 123 124 125 126.fontAwesome() { 127 .fontAwesome("\f071"); 128} 129 130.fontAwesome(@content) { 131 font-family: FontAwesome; 132 font-style: normal; 133 font-weight: normal; 134 line-height: 1; 135 -webkit-font-smoothing: antialiased; 136 -moz-osx-font-smoothing: grayscale; 137 content: @content; 138}