github.com/aspring/packer@v0.8.1-0.20150629211158-9db281ac0f89/website/source/assets/stylesheets/_helpers.scss (about) 1 /* variables */ 2 3 //color 4 $black: #000; 5 $white: #fff; 6 $red: #ff0000; 7 8 $green: #7bc6b1; 9 $orange: #f2826a; 10 $background: #f2eee5; 11 $dark-background: #333; 12 13 $gray-dark: #5c5c5c; 14 $gray-mid: #b2b2b2; 15 $gray-light: #e0e0e0; 16 17 $border-dark: #333; 18 19 // base measures 20 $baseline: 20px; 21 $base-font-size: 16px; 22 $base-line-height: 20px; 23 $button-height: 60px; 24 25 .center { 26 margin: 0 auto; 27 } 28 29 .padded-lg {padding: ($baseline * 2) 0;} 30 .padded {padding: ($baseline * 2) 0;} 31 .padded-sm {padding: ($baseline) 0;} 32 33 34 // components 35 $nav-height: 100px; 36 $hero-height: 460px; 37 $docs-top-margin: 40px; 38 $sidebar-background-color: $dark-background; 39 $sidebar-width: 250px; 40 41 42 //typography 43 $serif: 'myriad-pro', helvetica, Georgia, serif; 44 $sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif; 45 $mono: 'Inconsolata', 'courier new', courier, mono-space; 46 47 .serif { font-family: $serif; } 48 .sans { font-family: $sans; } 49 .mono { font-family: $mono; } 50 51 .text-center { text-align: center !important; } 52 .text-left { text-align: left !important; } 53 .text-right { text-align: right !important; } 54 55 .text-green { color: $green; } 56 57 .uppercase { text-transform: uppercase !important; } 58 59 @font-face { 60 font-family: 'HeimatStencil-SemiBold'; 61 src: font-url('2772B2_0_0.eot'); 62 src: font-url('2772B2_0_0.woff') format('woff'), 63 font-url('2772B2_0_0.ttf') format('truetype'); 64 font-weight: normal; 65 font-style: normal; 66 } 67 68 //color 69 .dark-background { 70 background-color: #000; 71 color: $white; 72 73 a { 74 color: inherit; 75 76 &:hover { 77 color: $green; 78 } 79 80 &:active { 81 color: darken($green, 30%); 82 } 83 } 84 } 85 86 .white-background { 87 background-color: $white; 88 } 89 90 //elements 91 .divider { 92 background: image-url('divider.png') no-repeat center bottom; 93 height: 70px; 94 width: 70px; 95 background-size: 70px 70px; 96 display: table-cell; 97 text-align: center; 98 vertical-align: middle; 99 } 100 101 .packer { 102 color: $orange; 103 font-size: 20px; 104 105 a:hover, a:active, a:visited { 106 color: inherit; 107 } 108 } 109 110 // media queries 111 $break-sm: 480px; 112 $break-med: 768px; 113 $break-max: 1200px; 114 $break-lg: 980px; 115 116 @mixin respond-to($media) { 117 @if $media == mobile { 118 @media only screen and (max-width: $break-sm) { @content; } 119 } 120 @else if $media == tablet { 121 @media only screen and (max-width: $break-med - 1) { @content; } 122 } 123 @else if $media == desktop { 124 @media only screen and (min-width: $break-med) and (max-width: $break-lg - 1) { @content; } 125 } 126 @else if $media == desktop-lg { 127 @media only screen and (min-width: $break-max) { @content; } 128 } 129 } 130 131 /* 132 * example * 133 .profile-pic { 134 @include respond-to(mobile) { width: 100% ;} 135 @include respond-to(tablet) { width: 125px; } 136 } 137 */ 138 ////// 139 140 /* utlities */ 141 .d { 142 border-bottom: 1px solid $red; 143 border-top: 1px solid $red; 144 background-color: transparentize($red, .9); 145 } 146 147 .hyphenate { 148 -webkit-hyphens: auto; 149 -moz-hyphens: auto; 150 hyphens: auto; 151 } 152 153 .full-width { 154 margin-right: -20px; 155 margin-left: -20px; 156 } 157 158 .add-transition { 159 -webkit-transition: all .1s ease-in-out; 160 -moz-transition: all .1s ease-in-out; 161 -o-transition: all .1s ease-in-out; 162 transition: all .1s ease-in-out; 163 } 164 165 @mixin opacity($opacity) { 166 -khtml-opacity: $opacity; 167 -moz-opacity: $opacity; 168 opacity: $opacity; 169 } 170 171 @mixin transform-scale($value) { 172 -webkit-transform: scale($value); 173 -moz-transform: scale($value); 174 transform: scale($value); 175 } 176 177 @mixin transition($type, $speed, $easing) { 178 -webkit-transition: $type $speed $easing; 179 -moz-transition: $type $speed $easing; 180 -o-transition: $type $speed $easing; 181 transition: $type $speed $easing; 182 } 183 184 @mixin rounded($radius) { 185 -webkit-border-radius: $radius; 186 -moz-border-radius: $radius; 187 -khtml-border-radius: $radius; 188 border-radius: $radius; 189 }