github.com/kardianos/nomad@v0.1.3-0.20151022182107-b13df73ee850/website/source/assets/stylesheets/_utilities.scss (about) 1 // 2 // Utility classes 3 // -------------------------------------------------- 4 5 6 // 7 // ------------------------- 8 @mixin anti-alias() { 9 text-rendering: optimizeLegibility; 10 -webkit-font-smoothing: antialiased; 11 } 12 13 @mixin open-light() { 14 font-family: $font-family-open-sans; 15 font-weight: 300; 16 } 17 18 @mixin open() { 19 font-family: $font-family-open-sans; 20 font-weight: 400; 21 } 22 23 @mixin open-sb() { 24 font-family: $font-family-open-sans; 25 font-weight: 600; 26 } 27 28 @mixin open-bold() { 29 font-family: $font-family-open-sans; 30 font-weight: 700; 31 } 32 33 @mixin skewY($skew) { 34 -webkit-transform: skewY($skew); 35 -moz-transform: skewY($skew); 36 -ms-transform: skewY($skew); 37 -o-transform: skewY($skew); 38 transform: skewY($skew); 39 } 40 41 @mixin v-nav-style-core{ 42 color: $gray-darker; 43 font-family: $font-family-blanc-reg; 44 font-size: 13px; 45 text-transform: uppercase; 46 letter-spacing: 0.0625em; 47 } 48 49 @mixin v-nav-style{ 50 margin: 0 15px; 51 padding: 0; 52 line-height: 22px; 53 @include v-nav-style-core(); 54 @include transition( color 0.3s ease ); 55 56 &:hover{ 57 color: $green-dark; 58 @include transition( color 0.3s ease ); 59 background-color: transparent; 60 } 61 } 62 63 @mixin bez-1-transition{ 64 @include transition( all 300ms ease-in-out ); 65 } 66 67 68 @keyframes press { 69 0% { 70 opacity: 1; 71 } 72 50% { 73 opacity: .55 74 } 75 100% { 76 opacity: 1; 77 } 78 } 79 80 @-webkit-keyframes press { 81 0% { 82 opacity: 1; 83 } 84 50% { 85 opacity: .55 86 } 87 100% { 88 opacity: 1; 89 } 90 } 91 92 #demo-app .loading-bar{ 93 display: block; 94 -webkit-animation: shift-rightwards 2s ease-in-out infinite; 95 -moz-animation: shift-rightwards 2s ease-in-out infinite; 96 -ms-animation: shift-rightwards 2s ease-in-out infinite; 97 -o-animation: shift-rightwards 2s ease-in-out infinite; 98 animation: shift-rightwards 2s ease-in-out infinite; 99 -webkit-animation-delay: .4s; 100 -moz-animation-delay: .4s; 101 -o-animation-delay: .4s; 102 animation-delay: .4s; 103 } 104 105 .loading-bar{ 106 position: fixed; 107 display: none; 108 bottom: 0; 109 left: 0; 110 right: 0; 111 height: 2px; 112 z-index: 800; 113 background: $blue; 114 -webkit-transform: translateX(100%); 115 -moz-transform: translateX(100%); 116 -o-transform: translateX(100%); 117 transform: translateX(100%); 118 } 119 120 @-webkit-keyframes shift-rightwards 121 { 122 0% 123 { 124 @include translate(-100%, 0); 125 } 126 127 40% 128 { 129 @include translate(0%, 0); 130 } 131 132 60% 133 { 134 @include translate(0%, 0); 135 } 136 137 100% 138 { 139 @include translate(100%, 0); 140 } 141 142 } 143 @-moz-keyframes shift-rightwards 144 { 145 0% 146 { 147 @include translate(-100%, 0); 148 } 149 150 40% 151 { 152 @include translate(0%, 0); 153 } 154 155 60% 156 { 157 @include translate(0%, 0); 158 } 159 160 100% 161 { 162 @include translate(100%, 0); 163 } 164 165 } 166 @-o-keyframes shift-rightwards 167 { 168 0% 169 { 170 @include translate(-100%, 0); 171 } 172 173 40% 174 { 175 @include translate(0%, 0); 176 } 177 178 60% 179 { 180 @include translate(0%, 0); 181 } 182 183 100% 184 { 185 @include translate(100%, 0); 186 } 187 188 } 189 @keyframes shift-rightwards 190 { 191 0% 192 { 193 @include translate(-100%, 0); 194 } 195 196 40% 197 { 198 @include translate(0%, 0); 199 } 200 201 60% 202 { 203 @include translate(0%, 0); 204 } 205 206 100% 207 { 208 @include translate(100%, 0); 209 } 210 }