├── .gitignore ├── LICENSE.md ├── README.md ├── bower.json ├── build ├── css │ ├── style.css │ └── style.css.map ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ └── fontawesome-webfont.woff └── js │ └── main.min.js ├── dist └── _juice.scss ├── favicon.png ├── gulpfile.js ├── img └── .gitkeep ├── index.html ├── js ├── 00-jquery.min.js ├── 10-bootstrap.js ├── 20-highlight.pack.js ├── 30-flowtype.js └── xx-main.js ├── package.json ├── sache.json └── sass ├── _colors.scss ├── _csshake.scss ├── _fonts.scss ├── _variables.scss ├── code_styles ├── _custom.scss ├── _default.scss ├── _github.scss ├── _monokai.scss ├── _monokai_sublime.scss └── _obsidian-mod.scss ├── fonts ├── FontAwesome.otf ├── fontawesome-webfont.eot ├── fontawesome-webfont.svg ├── fontawesome-webfont.ttf └── fontawesome-webfont.woff └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log 3 | node_modules 4 | .sass-cache 5 | bower_components -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Kyle Brumm 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Bower Version](http://img.shields.io/badge/bower-1.0.1-56d7c6.svg?style=flat-square) 2 | 3 | # Juice - Mixins for Life 4 | 5 | Simplify your life. Juice is a collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements. Juice is not just a collection to help with cross browser support, so it is best paired with autoprefixer, for the best possible browser compatibility. 6 | 7 | ## Documentation 8 | 9 | http://kylebrumm.com/juice 10 | 11 | ## Requirements: 12 | 13 | + Sass Version 3.3 14 | 15 | ## Features: 16 | 17 | #### Mixins 18 | 19 | + Breakpoints 20 | + Show/Hide Element 21 | + Single Side Border Radius 22 | + Single Transform 23 | + Box Emboss 24 | + Letterpress 25 | + Placeholder Color 26 | + Sizing 27 | + Hoverer 28 | + Responsive 29 | + Triangle 30 | + Circle 31 | + Square 32 | + Position 33 | + TRBL 34 | + Image Preload 35 | + Juice Prefixer 36 | 37 | #### Helpers 38 | 39 | + Clearfix 40 | + Hide Text 41 | + Centerer 42 | + Vertical Centerer 43 | + Coverer 44 | + Center Block 45 | + Clean 46 | 47 | #### Functions 48 | 49 | + Tint 50 | + Shade 51 | + Strip Units 52 | + Rem Calc 53 | + Em Calc 54 | + Random Color 55 | + Reverse String 56 | 57 | ## Installation 58 | 59 | You can use either bower or just clone the github repo directly. 60 | 61 | #### Bower 62 | 63 | ```bash 64 | $ bower install juice 65 | ``` 66 | 67 | #### Clone/Fork 68 | 69 | ```bash 70 | $ git clone git@github.com:kjbrum/juice.git 71 | ``` 72 | 73 | ## Using the file 74 | 75 | Just import the "_juice.scss" file into your main scss file: 76 | ```bash 77 | @import "juice"; 78 | ``` 79 | 80 | ## Compatibility Issues / Conflicts: 81 | 82 | ##### Bourbon 83 | 84 | + Position (mixin) 85 | + Single Side Border Radius (mixin) 86 | + Triangle (mixin) 87 | + Strip Units (function) 88 | 89 | ##### Compass 90 | 91 | + Single Side Border Radius (mixin) 92 | + Transforms (mixin) 93 | 94 | ## Changelog: 95 | 96 | ##### 1.0.1: 97 | 98 | + Fix box-emboss with prefixes issue 99 | 100 | ##### 1.0.0: 101 | 102 | + __Placeholders have been turned into argument-less mixins (helpers)__ 103 | + New mixins - Image Preload, show/hide, juice prefixer, clean 104 | + Global option (variable) to add cross browser prefixes 105 | + Added a few extra breakpoint presets (mostly -only options) 106 | + Fixed the breakpoint mixin so that the more complex queries actually work now 107 | 108 | ## To-Do 109 | 110 | + Change the way mixins that take multiple values (trbl, size, etc..) are structured. (Make it so they don't require commas) 111 | 112 | ## License 113 | 114 | Copyright © [Kyle Brumm](http://kylebrumm.com). Juice is free to use on whatever and may be redistributed under the terms specified in the [license](LICENSE.md). 115 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "juice", 3 | "description": "SASS Mixins for Life", 4 | "version": "1.0.1", 5 | "homepage": "http://juicynex.us/juice", 6 | "keywords": [ 7 | "CSS", 8 | "SASS", 9 | "SCSS", 10 | "mixins", 11 | "styling", 12 | "helper" 13 | ], 14 | "main": [ 15 | "dist/_juice.scss" 16 | ], 17 | "authors": [ 18 | "Kyle Brumm " 19 | ], 20 | "license": "MIT", 21 | "ignore": [ 22 | "*.*", 23 | "bower_components", 24 | "build", 25 | "img", 26 | "js", 27 | "sass" 28 | ], 29 | "dependencies": { 30 | "fontawesome": "~4.3.0", 31 | "bootstrap-sass-official": "~3.3.3" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /build/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kjbrum/juice/25e6d529b1c00d6a3523ad62cd59b035c3f16929/build/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /build/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kjbrum/juice/25e6d529b1c00d6a3523ad62cd59b035c3f16929/build/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /build/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kjbrum/juice/25e6d529b1c00d6a3523ad62cd59b035c3f16929/build/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /build/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kjbrum/juice/25e6d529b1c00d6a3523ad62cd59b035c3f16929/build/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /dist/_juice.scss: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------------------------- 2 | // Juice v1.0.0 3 | // -------------------------------------------------------------------- 4 | @charset "UTF-8"; 5 | 6 | 7 | 8 | // -------------------------------------------------------------------- 9 | // Variable settings 10 | // -------------------------------------------------------------------- 11 | 12 | // CSS cubic-bezier timing functions. 13 | // Credit: http://github.com/jaukia/easie 14 | // EASE IN 15 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 16 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 17 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 18 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 19 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 20 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 21 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 22 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 23 | // EASE OUT 24 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 25 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 26 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 27 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 28 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 29 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 30 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 31 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 32 | // EASE IN OUT 33 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 34 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 35 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 36 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 37 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 38 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 39 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 40 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 41 | 42 | // Base px 43 | $base-px-default: 16px !default; 44 | $browser-prefixes: false !default; 45 | 46 | // Prefix mixin if needed 47 | // Credit: http://bourbon.io/docs/#prefixer 48 | @mixin juice-prefixer($property, $value, $prefixes) { 49 | @each $prefix in $prefixes { 50 | @if $prefix == webkit { 51 | -webkit-#{$property}: #{$value}; 52 | } 53 | @else if $prefix == moz { 54 | -moz-#{$property}: #{$value}; 55 | } 56 | @else if $prefix == ms { 57 | -ms-#{$property}: #{$value}; 58 | } 59 | @else if $prefix == o { 60 | -o-#{$property}: #{$value}; 61 | } 62 | @else if $prefix == spec { 63 | #{$property}: #{$value}; 64 | } 65 | @else { 66 | @warn "Unrecognized prefix: #{$prefix}"; 67 | } 68 | } 69 | } 70 | 71 | // Strip the units from a value 72 | // ---------------------------- 73 | @function strip-units($value) { 74 | @return $value / ($value * 0 + 1); 75 | } 76 | 77 | // Calculate rems from a px value 78 | // ------------------------------ 79 | @function rem-calc($px, $base-val: $base-px-default) { 80 | @if not unitless($px) { 81 | $px: strip-units($px); 82 | } 83 | @if not unitless($base-val) { 84 | $base-val: strip-units($base-val); 85 | } 86 | @return ($px / $base-val) * 1rem; 87 | } 88 | 89 | // Calculate ems from a px value 90 | // ------------------------------ 91 | @function em-calc($px, $base-val: $base-px-default) { 92 | @if not unitless($px) { 93 | $px: strip-units($px); 94 | } 95 | @if not unitless($base-val) { 96 | $base-val: strip-units($base-val); 97 | } 98 | @return ($px / $base-val) * 1em; 99 | } 100 | 101 | // Breakpoints 102 | $onepx: em-calc(1) !default; 103 | $hdpi-ratio-default: 1.3 !default; 104 | $breakpoint-xlarge-default: em-calc(1920) !default; 105 | $breakpoint-large-default: em-calc(1440) !default; 106 | $breakpoint-medium-default: em-calc(1024) !default; 107 | $breakpoint-small-default: em-calc(640) !default; 108 | $breakpoint-xsmall-default: em-calc(480) !default; 109 | $breakpoint-xxsmall-default: em-calc(320) !default; 110 | // Show/Hide 111 | $show-display-default: block !default; 112 | // Border Radius 113 | $border-radius-default: 5px !default; 114 | // Placeholder Color 115 | $placeholder-color-default: #555555 !default; 116 | // Triangle 117 | $triangle-direction-default: right !default; 118 | $triangle-size-default: $base-px-default !default; 119 | $triangle-color-default: #222222 !default; 120 | $triangle-element-default: after !default; 121 | // Circle 122 | $circle-size-default: $base-px-default !default; 123 | $circle-color-default: inherit !default; 124 | $circle-border-width-default: null !default; 125 | $circle-border-color-default: #222222 !default; 126 | $circle-display-default: inline-block !default; 127 | // Square 128 | $square-size-default: $base-px-default !default; 129 | $square-color-default: black !default; 130 | $square-border-width-default: null !default; 131 | $square-border-color-default: grey !default; 132 | $square-element-default: before !default; 133 | // Position 134 | $position-default: null !default; 135 | // Tint/Shade 136 | $mix-percent-default: 15% !default; 137 | 138 | 139 | 140 | 141 | // -------------------------------------------------------------------- 142 | // Mixins 143 | // -------------------------------------------------------------------- 144 | 145 | // Breakpoints 146 | // Inspiration: http://www.sitepoint.com/managing-responsive-breakpoints-sass/ 147 | // --------------------------------------------------------------------------- 148 | $breakpoints: ( 149 | "xxlarge": "(min-width: #{$breakpoint-xlarge-default + $onepx})", 150 | "xlarge-only": "(min-width: #{$breakpoint-large-default + $onepx}) and (max-width: #{$breakpoint-xlarge-default})", 151 | "xlarge-up": "(min-width: #{$breakpoint-large-default + $onepx})", 152 | "xlarge": "(max-width: #{$breakpoint-xlarge-default})", 153 | "large-only": "(min-width: #{$breakpoint-medium-default + $onepx}) and (max-width: #{$breakpoint-large-default})", 154 | "large-up": "(min-width: #{$breakpoint-medium-default + $onepx})", 155 | "large": "(max-width: #{$breakpoint-large-default})", 156 | "medium-only": "(min-width: #{$breakpoint-small-default + $onepx}) and (max-width: #{$breakpoint-medium-default})", 157 | "medium-up": "(min-width: #{$breakpoint-small-default + $onepx})", 158 | "medium": "(max-width: #{$breakpoint-medium-default})", 159 | "small-only": "(min-width: #{$breakpoint-xsmall-default + $onepx}) and (max-width: #{$breakpoint-small-default})", 160 | "small-up": "(min-width: #{$breakpoint-xsmall-default + $onepx})", 161 | "small": "(max-width: #{$breakpoint-small-default})", 162 | "xsmall-only": "(min-width: #{$breakpoint-xxsmall-default + $onepx}) and (max-width: #{$breakpoint-xsmall-default})", 163 | "xsmall-up": "(min-width: #{$breakpoint-xxsmall-default + $onepx})", 164 | "xsmall": "(max-width: #{$breakpoint-xsmall-default})", 165 | "xxsmall": "(max-width: #{$breakpoint-xxsmall-default})", 166 | "iphone3": "(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1)", 167 | "iphone3-landscape": "(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (orientation: landscape)", 168 | "iphone3-portrait": "(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (orientation: portrait)", 169 | "iphone4": "(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3)", 170 | "iphone4-landscape": "(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation: landscape)", 171 | "iphone4-portrait": "(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation: portrait)", 172 | "iphone5": "(min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)", 173 | "iphone5-landscape": "(min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation: landscape)", 174 | "iphone5-portrait": "(min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation: portrait)", 175 | "iphone6": "(min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2)", 176 | "iphone6-landscape": "(min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)", 177 | "iphone6-portrait": "(min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)", 178 | "iphone6-plus": "(min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3)", 179 | "iphone6-plus-landscape": "(min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)", 180 | "iphone6-plus-portrait": "(min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)", 181 | "ipad": "(min-device-width: 768px) and (max-device-width: 1024px)", 182 | "ipad-landscape": "(min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)", 183 | "ipad-portrait": "(min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)", 184 | "ipad-retina": "(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2)", 185 | "ipad-retina-landscape": "(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)", 186 | "ipad-retina-portrait": "(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)", 187 | "hdpi": "(-webkit-min-device-pixel-ratio: $hdpi-ratio-default), only screen and (min--moz-device-pixel-ratio: $hdpi-ratio-default), only screen and (-moz-min-device-pixel-ratio: $hdpi-ratio-default), only screen and (-o-min-device-pixel-ratio: #{$hdpi-ratio-default}/1), only screen and (min-resolution: #{round($hdpi-ratio-default*96)}dpi), only screen and (min-resolution: #{$hdpi-ratio-default}dppx)" 188 | ); 189 | @mixin bp($break, $viewport1: null) { 190 | // preset breakpoint 191 | @if not $viewport1 { 192 | @if map-has-key($breakpoints, $break) { 193 | @media only screen and #{map-get($breakpoints, $break)} { @content; } 194 | } 195 | @else { 196 | @warn "Couldn't find a breakpoint named #{$break}."; 197 | } 198 | } 199 | @else { 200 | // min breakpoint 201 | @if $break == min { 202 | @media screen and (min-width: $viewport1) { @content; } 203 | } 204 | // max breakpoint 205 | @else if $break == max { 206 | @media screen and (max-width: $viewport1) { @content; } 207 | } 208 | // min & max breakpoint 209 | @else { 210 | @media screen and (min-width: $break) and (max-width: $viewport1) { @content; } 211 | } 212 | } 213 | } 214 | 215 | // Show/Hide Element 216 | // ----------------- 217 | @mixin show($breakpoint: null, $display: $show-display-default) { 218 | @if $breakpoint { 219 | display: none; 220 | @include bp($breakpoint) { 221 | display: $display; 222 | } 223 | } @else { 224 | display: $display; 225 | } 226 | } 227 | @mixin hide($breakpoint: null) { 228 | @if $breakpoint { 229 | @include bp($breakpoint) { 230 | display: none !important; 231 | } 232 | } @else { 233 | display: none !important; 234 | } 235 | } 236 | 237 | 238 | // Single side border radius 239 | // ------------------------- 240 | @mixin border-top-radius($radius: $border-radius-default) { 241 | border-top-right-radius: $radius; 242 | border-top-left-radius: $radius; 243 | } 244 | @mixin border-right-radius($radius: $border-radius-default) { 245 | border-top-right-radius: $radius; 246 | border-bottom-right-radius: $radius; 247 | } 248 | @mixin border-bottom-radius($radius: $border-radius-default) { 249 | border-bottom-right-radius: $radius; 250 | border-bottom-left-radius: $radius; 251 | } 252 | @mixin border-left-radius($radius: $border-radius-default) { 253 | border-top-left-radius: $radius; 254 | border-bottom-left-radius: $radius; 255 | } 256 | 257 | // Transforms 258 | // ---------- 259 | @mixin transform-single($property, $value) { 260 | @if $browser-prefixes { 261 | @include juice-prefixer(transform, #{$property}unquote("(")#{$value}unquote(")"), webkit moz ms o spec); 262 | } 263 | @else { 264 | transform: #{$property}unquote("(")#{$value}unquote(")"); 265 | } 266 | } 267 | @mixin rotate($deg) { 268 | @include transform-single(rotate, $deg); 269 | } 270 | @mixin rotateX($deg) { 271 | @include transform-single(rotateX, $deg); 272 | } 273 | @mixin rotateY($deg) { 274 | @include transform-single(rotateY, $deg); 275 | } 276 | @mixin rotateZ($deg) { 277 | @include transform-single(rotateZ, $deg); 278 | } 279 | @mixin rotate3d($x, $y, $z, $deg) { 280 | $multi-var: $x, $y, $z, $deg; 281 | @include transform-single(rotate3d, $multi-var); 282 | } 283 | @mixin scale($ratio) { 284 | @include transform-single(scale, $ratio); 285 | } 286 | @mixin scaleX($ratio) { 287 | @include transform-single(scaleX, $ratio); 288 | } 289 | @mixin scaleY($ratio) { 290 | @include transform-single(scaleY, $ratio); 291 | } 292 | @mixin scaleZ($ratio) { 293 | @include transform-single(scaleZ, $ratio); 294 | } 295 | @mixin scale3d($x, $y, $z) { 296 | $multi-var: $x, $y, $z; 297 | @include transform-single(scale3d, $multi-var); 298 | } 299 | @mixin skew($x, $y) { 300 | $multi-var: $x, $y; 301 | @include transform-single(skew, $multi-var); 302 | backface-visibility: hidden; 303 | } 304 | @mixin skewX($deg) { 305 | @include transform-single(skewX, $deg); 306 | backface-visibility: hidden; 307 | } 308 | @mixin skewY($deg) { 309 | @include transform-single(skewY, $deg); 310 | backface-visibility: hidden; 311 | } 312 | @mixin translate($x, $y) { 313 | $multi-var: $x, $y; 314 | @include transform-single(translate, $multi-var); 315 | } 316 | @mixin translateX($x) { 317 | @include transform-single(translateX, $x); 318 | } 319 | @mixin translateY($y) { 320 | @include transform-single(translateY, $y); 321 | } 322 | @mixin translateZ($z) { 323 | @include transform-single(translateZ, $z); 324 | } 325 | @mixin translate3d($x, $y, $z) { 326 | $multi-var: $x, $y, $z; 327 | @include transform-single(translate3d, $multi-var); 328 | } 329 | 330 | // Emboss effect 331 | // ------------- 332 | @mixin box-emboss($opacity: 0.5, $opacity2: 0.5){ 333 | @if $browser-prefixes { 334 | @include juice-prefixer(box-shadow, "rgba(white,#{$opacity}) 0 1px 0, inset rgba(black,#{$opacity2}) 0 1px 0", webkit spec); 335 | } 336 | @else { 337 | box-shadow: rgba(white,$opacity) 0 1px 0, inset rgba(black,$opacity2) 0 1px 0; 338 | } 339 | } 340 | 341 | // Letterpress effect 342 | // ------------------ 343 | @mixin letterpress($opacity: 0.5){ 344 | text-shadow: rgba(white,$opacity) 0 1px 0; 345 | } 346 | 347 | // Placeholder text 348 | // ---------------- 349 | @mixin placeholder-color($color: $placeholder-color-default) { 350 | @if $browser-prefixes { 351 | &::-webkit-input-placeholder { 352 | color: $color; 353 | } 354 | &::-moz-placeholder { 355 | color: $color; 356 | } 357 | &::-ms-input-placeholder { 358 | color: $color; 359 | } 360 | &::placeholder { 361 | color: $color; 362 | } 363 | } 364 | @else { 365 | &::placeholder { 366 | color: $color; 367 | } 368 | } 369 | } 370 | 371 | // Sizing 372 | // ------ 373 | @mixin size($width, $height: $width) { 374 | width: $width; 375 | height: $height; 376 | } 377 | 378 | // Normal & hover state 379 | // -------------------- 380 | @mixin hoverer($property, $normal, $hovered) { 381 | #{$property}: $normal; 382 | &:hover { 383 | #{$property}: $hovered; 384 | } 385 | } 386 | 387 | // Add responsive styling for multiple breakpoints 388 | // ----------------------------------------------- 389 | @mixin responsive($property, $base, $medium:false, $small:false) { 390 | #{$property}: $base; 391 | @if $medium { 392 | @include bp(medium) { 393 | #{$property}: $medium; 394 | } 395 | } 396 | @if $small { 397 | @include bp(small) { 398 | #{$property}: $small; 399 | } 400 | } 401 | } 402 | 403 | // Create a triangle using borders 404 | // ------------------------------- 405 | @mixin triangle($direction: $triangle-direction-default, 406 | $size: $triangle-size-default, 407 | $color: $triangle-color-default, 408 | $center: false, 409 | $element: $triangle-element-default) { 410 | &:#{$element} { 411 | @if not $center { 412 | position: absolute; 413 | } 414 | content:''; 415 | @include size(0); 416 | -webkit-transform: rotate(360deg); 417 | border-style: solid; 418 | @if $direction == up { 419 | border-width: 0 $size ($size*1.625) $size; 420 | border-color: transparent transparent $color transparent; 421 | @if $center { 422 | @include absolute(null,null,100%,50%); 423 | @if $browser-prefixes { 424 | @include juice-prefixer(transform, translateX(-$size), webkit moz ms o spec); 425 | } 426 | @else { 427 | transform: translateX(-$size); 428 | } 429 | } 430 | } 431 | @else if $direction == up-right { 432 | border-width: 0 $size $size 0; 433 | border-color: transparent $color transparent transparent; 434 | @if $center { 435 | @include absolute(0,0); 436 | } 437 | } 438 | @else if $direction == right { 439 | border-width: $size 0 $size ($size*1.625); 440 | border-color: transparent transparent transparent $color; 441 | @if $center { 442 | @include absolute(50%,null,null,100%); 443 | @if $browser-prefixes { 444 | @include juice-prefixer(transform, translateY(-$size), webkit moz ms o spec); 445 | } 446 | @else { 447 | transform: translateY(-$size); 448 | } 449 | } 450 | } 451 | @else if $direction == down-right { 452 | border-width: 0 0 $size $size; 453 | border-color: transparent transparent $color transparent; 454 | @if $center { 455 | @include absolute(null,0,0); 456 | } 457 | } 458 | @else if $direction == down { 459 | border-width: ($size*1.625) $size 0 $size; 460 | border-color: $color transparent transparent transparent; 461 | @if $center { 462 | @include absolute(100%,null,null,50%); 463 | @if $browser-prefixes { 464 | @include juice-prefixer(transform, translateX(-$size), webkit moz ms o spec); 465 | } 466 | @else { 467 | transform: translateX(-$size); 468 | } 469 | } 470 | } 471 | @else if $direction == down-left { 472 | border-width: $size 0 0 $size; 473 | border-color: transparent transparent transparent $color; 474 | @if $center { 475 | @include absolute(null,null,0,0); 476 | } 477 | } 478 | @else if $direction == left { 479 | border-width: $size ($size*1.625) $size 0; 480 | border-color: transparent $color transparent transparent; 481 | @if $center { 482 | @include absolute(50%,100%); 483 | @if $browser-prefixes { 484 | @include juice-prefixer(transform, translateY(-$size), webkit moz ms o spec); 485 | } 486 | @else { 487 | transform: translateY(-$size); 488 | } 489 | } 490 | } 491 | @else if $direction == up-left { 492 | border-width: $size $size 0 0; 493 | border-color: $color transparent transparent transparent; 494 | @if $center { 495 | @include absolute(0,null,null,0); 496 | } 497 | } 498 | @else { 499 | @warn "Available directions: up, up-right, right, down-right, down, down-left, left, up-left."; 500 | } 501 | @content; 502 | } 503 | } 504 | 505 | // Create a circle, with an optional border 506 | // ---------------------------------------- 507 | @mixin circle($size: $circle-size-default, 508 | $color: $circle-color-default, 509 | $border-width: $circle-border-width-default, 510 | $border-color: $circle-border-color-default, 511 | $display: $circle-display-default) { 512 | display: $display; 513 | border-radius: 50%; 514 | @if $border-width { 515 | @include size($size); 516 | background-color: $color; 517 | border: $border-width solid $border-color; 518 | } 519 | @else{ 520 | @if $color == inherit { 521 | @include size(0); 522 | border-width: $size/2; 523 | border-style: solid; 524 | } 525 | @else { 526 | @include size($size); 527 | background-color: $color; 528 | } 529 | } 530 | } 531 | 532 | // Create a psuedo element square, with an optional border 533 | // ------------------------------------------------------- 534 | @mixin square($size: $square-size-default, 535 | $color: $square-color-default, 536 | $border-width: $square-border-width-default, 537 | $border-color: $square-border-color-default, 538 | $element: $square-element-default) { 539 | &:#{$element} { 540 | content: ''; 541 | position: absolute; 542 | @include size($size); 543 | background: $color; 544 | @if $border-width { 545 | border: $border-width solid $border-color; 546 | } 547 | } 548 | } 549 | 550 | // Advanced positioning 551 | // -------------------- 552 | @mixin position($type, 553 | $top: $position-default, 554 | $right: $position-default, 555 | $bottom: $position-default, 556 | $left: $position-default) { 557 | position: $type; 558 | $allowed_types: absolute relative fixed; 559 | @if not index($allowed_types, $type) { 560 | @warn "Unknown position: #{$type}."; 561 | } 562 | @each $data in top $top, right $right, bottom $bottom, left $left { 563 | #{nth($data, 1)}: nth($data, 2); 564 | } 565 | } 566 | @mixin absolute($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) { 567 | @include position(absolute, $top, $right, $bottom, $left); 568 | } 569 | @mixin relative($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) { 570 | @include position(relative, $top, $right, $bottom, $left); 571 | } 572 | @mixin fixed($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) { 573 | @include position(fixed, $top, $right, $bottom, $left); 574 | } 575 | 576 | // Easily set an element's "trbl" values 577 | // ------------------------------------- 578 | @mixin trbl($top: $position-default, 579 | $right: $position-default, 580 | $bottom: $position-default, 581 | $left: $position-default) { 582 | @each $data in top $top, right $right, bottom $bottom, left $left { 583 | #{nth($data, 1)}: nth($data, 2); 584 | } 585 | } 586 | @mixin top-left { 587 | @include trbl(0,null,null,0); 588 | } 589 | @mixin top-right { 590 | @include trbl(0,0); 591 | } 592 | @mixin bottom-left { 593 | @include trbl(null,null,0,0); 594 | } 595 | @mixin bottom-right { 596 | @include trbl(null,0,0,null); 597 | } 598 | 599 | // Preload Images 600 | // Credit: http://codepen.io/pixelass/details/vEKZRq 601 | // ------------------------------------------------- 602 | @mixin image-preload($preload: run) { 603 | @if not variable-exists(_preload-image-list) { 604 | $_preload-image-list: ()!global; 605 | } 606 | @if not variable-exists(_preload-image-urls) { 607 | $_preload-image-urls: ()!global; 608 | } 609 | @if not variable-exists(_preload-images-loaded) { 610 | $_preload-images-loaded: false!global; 611 | } 612 | @if $preload == run and not $_preload-images-loaded { 613 | $_preload-images-loaded: true!global; 614 | html:after { 615 | content: ''; 616 | display: none; 617 | background-image: $_preload-image-urls; 618 | } 619 | } @else { 620 | $_preload-image-list: join($preload, $_preload-image-list)!global; 621 | $image-urls: (); 622 | @if length($_preload-image-list) > 0 { 623 | @for $i from 1 through length($_preload-image-list) { 624 | $image-urls: join(url(#{nth($_preload-image-list,$i)}), $image-urls); 625 | } 626 | $result: (); 627 | @each $item in $image-urls { 628 | @if not index($result, $item) { 629 | $result: append($result, $item, comma); 630 | } 631 | } 632 | $_preload-image-urls: $result!global; 633 | } 634 | } 635 | } 636 | 637 | // -------------------------------------------------------------------- 638 | // Helper Mixins 639 | // -------------------------------------------------------------------- 640 | 641 | // Clearfix 642 | // -------- 643 | @mixin clearfix { 644 | *zoom: 1; 645 | &:before, 646 | &:after { 647 | display: table; 648 | content:''; 649 | line-height: 0; 650 | } 651 | &:after { 652 | clear: both; 653 | } 654 | } 655 | 656 | // Hide text 657 | // --------- 658 | @mixin hide-text { 659 | font: 0/0 a; 660 | color: transparent; 661 | text-shadow: none; 662 | } 663 | 664 | // Center an element vertically and horizontally 665 | // --------------------------------------------- 666 | @mixin centerer { 667 | @include absolute(50%,null,null,50%); 668 | @if $browser-prefixes { 669 | @include juice-prefixer(transform, translate(-50%,-50%), webkit moz ms o spec); 670 | } 671 | @else { 672 | transform: translate(-50%,-50%); 673 | } 674 | } 675 | 676 | // Center an element vertically 677 | // ---------------------------- 678 | @mixin vert-centerer { 679 | @include relative(50%); 680 | @if $browser-prefixes { 681 | @include juice-prefixer(transform, translateY(-50%), webkit moz ms o spec); 682 | } 683 | @else { 684 | transform: translateY(-50%); 685 | } 686 | } 687 | 688 | // Cover everything 689 | // ---------------- 690 | @mixin coverer { 691 | @include absolute(0, null, null, 0); 692 | @include size(100%); 693 | } 694 | 695 | // Center a block level element 696 | // ---------------------------- 697 | @mixin center-block { 698 | display: block; 699 | margin-left: auto; 700 | margin-right: auto; 701 | } 702 | 703 | // Clean an element 704 | // ---------------- 705 | @mixin clean { 706 | margin: 0; 707 | padding: 0; 708 | } 709 | 710 | // ---------------------------------- 711 | // Functions 712 | // ---------------------------------- 713 | 714 | // Mix white with another color 715 | // ---------------------------- 716 | @function tint($color, $percent: $mix-percent-default){ 717 | @return mix(white, $color, $percent); 718 | } 719 | 720 | // Mix black with another color 721 | // ---------------------------- 722 | @function shade($color, $percent: $mix-percent-default){ 723 | @return mix(black, $color, $percent); 724 | } 725 | 726 | // Create a random color 727 | // --------------------- 728 | @function random-color($min: 0, $max: 255, $alpha: 1) { 729 | @if $min < 0 { 730 | $min: -1; 731 | } @else { 732 | $min: $min - 1; 733 | } 734 | @if $max > 255 { 735 | $max: 256; 736 | } @else { 737 | $max: $max + 1; 738 | } 739 | $red: random($max) + $min; 740 | $green: random($max) + $min; 741 | $blue: random($max) + $min; 742 | @return rgba($red, $green, $blue, $alpha); 743 | } 744 | 745 | // Reverse a string 746 | // Credit: https://coderwall.com/p/rhu_uw/sass-str-reverse-function 747 | // ---------------- 748 | @function reverse($string) { 749 | $reversed-string: ''; 750 | @for $i from 1 through str-length($string) { 751 | $char: str-slice($string, $i, $i); 752 | $reversed-string: "#{$char}#{$reversed-string}"; 753 | } 754 | @return #{$reversed-string}; 755 | } 756 | -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kjbrum/juice/25e6d529b1c00d6a3523ad62cd59b035c3f16929/favicon.png -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Gulp 2 | var gulp = require('gulp'); 3 | 4 | // Plugins 5 | var autoprefixer = require('gulp-autoprefixer'); 6 | var browserSync = require('browser-sync'); 7 | var cache = require('gulp-cache'); 8 | var concat = require('gulp-concat'); 9 | var del = require('del'); 10 | var imagemin = require('gulp-imagemin'); 11 | var jshint = require('gulp-jshint'); 12 | var minifyCSS = require('gulp-minify-css'); 13 | var notify = require('gulp-notify'); // Requires Growl on Windows 14 | var plumber = require('gulp-plumber'); 15 | var rename = require('gulp-rename'); 16 | var runSequence = require('run-sequence'); 17 | var sass = require('gulp-ruby-sass'); // Requires Ruby 18 | var uglify = require('gulp-uglify'); 19 | 20 | // Define our Paths 21 | var paths = { 22 | scripts: 'js/**/*.js', 23 | styles: 'sass/**/*.scss', 24 | fonts: 'sass/fonts/*', 25 | images: 'img/**/*.{png,jpg,jpeg,gif}', 26 | bowerDir: './bower_components' 27 | }; 28 | 29 | var destPaths = { 30 | scripts: 'build/js', 31 | styles: 'build/css', 32 | fonts: 'build/fonts', 33 | images: 'build/img/' 34 | }; 35 | 36 | // Error Handling 37 | // Send error to notification center with gulp-notify 38 | var handleErrors = function() { 39 | notify.onError({ 40 | title: "Compile Error", 41 | message: "<%= error.message %>" 42 | }).apply(this, arguments); 43 | this.emit('end'); 44 | }; 45 | 46 | // Compile our SASS 47 | gulp.task('styles', function() { 48 | return gulp.src(paths.styles) 49 | .pipe(plumber()) 50 | .pipe(sass({ 51 | sourcemap: true, 52 | sourcemapPath: paths.styles, 53 | loadPath: [ 54 | paths.bowerDir + '/bootstrap-sass-official/assets/stylesheets', 55 | paths.bowerDir + '/fontawesome/scss', 56 | ] 57 | })) 58 | .pipe(autoprefixer()) 59 | .pipe(gulp.dest(destPaths.styles)) 60 | .pipe(notify('Styles task complete!')); 61 | }); 62 | 63 | // Compile and Minify our SASS for Build 64 | gulp.task('build-styles', function() { 65 | return gulp.src(paths.styles) 66 | .pipe(plumber()) 67 | .pipe(sass({ 68 | loadPath: [ 69 | paths.bowerDir + '/bootstrap-sass-official/assets/stylesheets', 70 | paths.bowerDir + '/fontawesome/scss', 71 | ] 72 | })) 73 | .pipe(autoprefixer({ 74 | cascade: false 75 | })) 76 | .pipe(minifyCSS()) 77 | .pipe(gulp.dest(destPaths.styles)) 78 | .pipe(notify('Build styles task complete!')); 79 | }); 80 | 81 | 82 | // Lint, Minify, and Concat our JS 83 | gulp.task('scripts', function() { 84 | return gulp.src(paths.scripts) 85 | .pipe(plumber()) 86 | .pipe(jshint()) 87 | .pipe(jshint.reporter('default')) 88 | .pipe(uglify()) 89 | .pipe(concat('main.min.js')) 90 | .pipe(gulp.dest(destPaths.scripts)) 91 | .pipe(notify('Scripts tasks complete!')); 92 | }); 93 | 94 | // Clean Images Folder 95 | gulp.task('clean-images', function(cb) { 96 | del([destPaths.images], cb); 97 | }); 98 | 99 | // Move Images to Build Folder 100 | gulp.task('images', ['clean-images'], function() { 101 | return gulp.src(paths.images) 102 | .pipe(plumber()) 103 | .pipe(gulp.dest(destPaths.images)) 104 | .pipe(notify('Image optimized!')); 105 | }); 106 | 107 | // Compress Images for Build 108 | gulp.task('build-images', function() { 109 | return gulp.src(paths.images) 110 | .pipe(plumber()) 111 | .pipe(imagemin({ 112 | progressive: true, 113 | interlaced: true 114 | })) 115 | .pipe(gulp.dest(destPaths.images)) 116 | .pipe(notify('Image optimized!')); 117 | }); 118 | 119 | // Watch for changes made to files 120 | gulp.task('watch', function() { 121 | gulp.watch(paths.scripts, ['scripts']); 122 | gulp.watch(paths.styles, ['styles']); 123 | gulp.watch('dist/_juice.scss', ['styles']); 124 | gulp.watch(paths.images, ['images']); 125 | }); 126 | 127 | // Browser Sync - autoreload the browser 128 | // Additional Settings: http://www.browsersync.io/docs/options/ 129 | gulp.task('browser-sync', function () { 130 | var files = [ 131 | '**/*.html', 132 | '**/*.php', 133 | 'build/css/style.css', 134 | 'build/js/main.min.js', 135 | 'build/img/**/*.{png,jpg,jpeg,gif}' 136 | ]; 137 | browserSync.init(files, { 138 | server: { 139 | baseDir: './' 140 | }, 141 | // proxy: 'juice.github.dev', // Proxy for local dev sites 142 | port: 5555, // Sets the port in which to serve the site 143 | open: false, // Stops BS from opening a new browser window 144 | // ghostMode: { // Disable ghosting features (Useful when sharing a link for people to troubleshoot) 145 | // clicks: false, 146 | // location: false, 147 | // forms: false, 148 | // scroll: false 149 | // }, 150 | logPrefix: "Juice" // Display a different prefix in the command line 151 | }); 152 | }); 153 | 154 | // Clean Build Folder 155 | gulp.task('clean', function(cb) { 156 | del(['build'], cb); 157 | }); 158 | 159 | // Clear the cache for everything 160 | gulp.task('clear-cache', function() { 161 | cache.clearAll(); 162 | }); 163 | 164 | // Move Fonts to Build Folder 165 | gulp.task('move-fonts', function() { 166 | gulp.src(paths.fonts) 167 | .pipe(gulp.dest(destPaths.fonts)); 168 | }); 169 | 170 | // Default Task 171 | gulp.task('default', function(cb) { 172 | runSequence('clean', 'clear-cache', 'images', 'scripts', 'styles', 'move-fonts', 'browser-sync', 'watch', cb); 173 | }); 174 | 175 | // Build Task 176 | gulp.task('build', function(cb) { 177 | runSequence('clean', 'clear-cache', 'build-images', 'build-styles', 'scripts', 'move-fonts', cb); 178 | }); 179 | -------------------------------------------------------------------------------- /img/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kjbrum/juice/25e6d529b1c00d6a3523ad62cd59b035c3f16929/img/.gitkeep -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Juice: Mixins for life 9 | 10 | 20 | 21 | 22 | Fork me on GitHub 23 | 24 | 47 |
48 |

Juice

49 |

Mixins for Life

50 |
51 | 52 | 53 |
54 |
55 |
56 |

Simplify your life. Juice is a collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements. Juice is not just a collection to help with cross browser support, so it is best paired with autoprefixer, for the best possible browser compatibility. You can enable prefixing for the mixin if you would like by setting the $browser-prefixes variable to true.

57 |
58 |
59 |
60 | 61 | 62 |
63 |
64 |

Overview

65 |
66 | 67 |
68 |
69 |

Mixins

70 | 89 |

Helpers

90 | 99 |

Functions

100 | 109 |
110 |
111 |
112 | 113 | 114 |
115 |
116 |

Mixins

117 |
118 | 119 |
120 |
121 |

Breakpoints

122 |
195 |

An extensive mixin for easily changing styles for specific media queries. You can set the default breakpoints using the breakpoint variables.

196 |

Available preset values: xxlarge, xlarge-only, xlarge-up, xlarge, large-only, large-up, large, medium-only, medium-up, medium, small-only, small-up, small, xsmall-only, xsmall-up, xsmall, xxsmall, iphone3, iphone3-landscape, iphone3-portrait, iphone4, iphone4-landscape, iphone4-portrait, iphone5, iphone5-landscape, iphone5-portrait, iphone6, iphone6-landscape, iphone6-portrait, iphone6-plus, iphone6-plus-landscape, iphone6-plus-portrait, ipad, ipad-landscape, ipad-portrait, ipad-retina, ipad-retina-landscape, ipad-retina-portrait, hdpi.

197 |

Use preset values: @include bp(preset)
Set a max-width: @include bp(max,500px)
Set a min-width: @include bp(min,250px)
Set a min & max width: @include bp(500px,1000px)

198 |
199 |

Example:

200 |
201 | 
.element {
 202 |   @include bp(480px,1024px) {
 203 |     color: black;
 204 |   }
 205 | }
206 |

CSS Output:

207 | 
@media screen and (min-width: 480px) and (max-width: 1024px) {
 208 |   .element {
 209 |     color: black;
 210 |   }
 211 | }
212 |
213 | 214 |
215 |
216 |

Show/Hide Element

217 |
238 |

Set certain points at which you want to show or hide a block element.

239 |

Show Arguments: $breakpoint, $display

240 |

Hide Argument: $breakpoint

241 |

Available options to show/hide: Breakpoint preset values.

242 |
243 |

Example:

244 |
245 | 
.element {
 246 |   @include show(small-only, inline-block);
 247 | }
248 |

CSS Output:

249 | 
.element {
 250 |   display: none;
 251 | }
 252 | @media only screen and (min-width: 30.0625em) and (max-width: 40em) {
 253 |   .element {
 254 |     display: inline-block;
 255 |   }
 256 | }
257 |
258 | 259 |
260 |
261 |

Single Side Border Radius

262 |
279 |

Apply border radius to a single side of an element.

280 |

Argument: $border-radius

281 |
282 |

Example:

283 |
284 | 
.element {
 285 |   @include border-top-radius(5px);
 286 | }
287 |

CSS Output:

288 | 
.element {
 289 |   border-top-right-radius: 5px;
 290 |   border-top-left-radius: 5px;
 291 | }
292 |
293 | 294 |
295 |
296 |

Single Transform

297 |
363 |

Small shortcut mixins to apply a single transform property.

364 |

Available mixins: rotate, rotateX, rotateY, rotateZ, rotate3d, scale, scaleX, scaleY, scaleZ, scale3d, skew, skewX, skewY, translate, translateX, translateY, translateZ, translate3d.

365 |
366 |

Example:

367 |
368 | 
.element {
 369 |   @include rotate(45deg);
 370 | }
371 |

CSS Output:

372 | 
.element {
 373 |   transform: rotate(45deg);
 374 | }
375 |
376 | 377 |
378 |
379 |

Box Emboss

380 |
384 |

Apply an emboss effect to an element.

385 |

Arguments (decimal): $opacity, $opacity2

386 |
387 |

Example:

388 |
389 | 
.element {
 390 |   @include box-emboss(0.4,0.6);
 391 | }
392 |

CSS Output:

393 | 
.element {
 394 |   box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(0, 0, 0, 0.8) 0 1px 0;
 395 | }
396 |
397 | 398 |
399 |
400 |

Letterpress

401 |
405 |

Apply a letterpress effect to an element's text.

406 |

Argument (decimal): $opacity

407 |
408 |

Example:

409 |
410 | 
.element {
 411 |   @include letterpress(0.75);
 412 | }
413 |

CSS Output:

414 | 
.element {
 415 |   text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 416 | }
417 |
418 | 419 |
420 |
421 |

Placeholder Color

422 |
428 |

Set the color of an element's placeholder text.

429 |

Optional Argument: $color

430 |
431 |

Example:

432 |
433 | 
input {
 434 |   @include placeholder-color(#222222);
 435 | }
436 |

CSS Output:

437 | 
input::placeholder {
 438 |   color: #222222;
 439 | }
440 |
441 | 442 |
443 |
444 |

Sizing

445 |
453 |

Set an element's width and height. Also able to pass a single value for a square.

454 |

Set width and height: @include size(50px, 25px)
Create a square (Option 1): @include size(25px)

455 |
456 |

Example:

457 |
458 | 
.element {
 459 |   @include size(25px,100px);
 460 |   &:after {
 461 |     @include size(10px);
 462 |   }
 463 | }
464 |

CSS Output:

465 | 
.element {
 466 |   width: 25px;
 467 |   height: 100px;
 468 | }
 469 | .element:after {
 470 |   width: 10px;
 471 |   height: 10px;
 472 | }
473 |
474 | 475 |
476 |
477 |

Hoverer

478 |
485 |

Set the value of a property for it's normal and hover states.

486 |

Arguments: $property, $normal, $hovered

487 |
488 |

Example:

489 |
490 | 
.element {
 491 |   @include hoverer(color, #555555, #222222);
 492 | }
493 |

CSS Output:

494 | 
.element {
 495 |   color: #555555;
 496 | }
 497 | .element:hover {
 498 |   color: #222222;
 499 | }
500 |
501 | 502 |
503 |
504 |

Responsive

505 |
519 |

Set the values for a specific property at 3 different breakpoints.

520 |

Arguments: $property, $base, $medium (optional), $small (optional)

521 |
522 |

Example:

523 |
524 | 
.element {
 525 |   @include responsive(background-color, #FFFFFF, #DDDDDD, #BBBBBB);
 526 | }
527 |

CSS Output:

528 | 
.element {
 529 |   background-color: #FFFFFF;
 530 | }
 531 | @media only screen and (max-width: 64rem) {
 532 |   .element {
 533 |     background-color: #DDDDDD;
 534 |   }
 535 | }
 536 | @media only screen and (max-width: 40rem) {
 537 |   .element {
 538 |     background-color: #BBBBBB;
 539 |   }
 540 | }
541 |
542 | 543 |
544 |
545 |

Triangle

546 |
625 |

Create a psuedo element triangle.

626 |

Optional Arguments: $direction, $size, $color, $center, $element

627 |

Available directions: up, up-right, right, down-right, down, down-left, left, up-left

628 |
629 |

Example:

630 |
631 | 
.element {
 632 |   @include triangle(up-right, 50px, grey, true, before) {
 633 |     background-color: red;
 634 |   }
 635 | }
636 |

CSS Output:

637 | 
.element:before {
 638 |   content: '';
 639 |   width: 0;
 640 |   height: 0;
 641 |   border-style: solid;
 642 |   border-width: 0 50px 50px 0;
 643 |   border-color: transparent grey transparent transparent;
 644 |   position: absolute;
 645 |   top: 0;
 646 |   right: 0;
 647 |   background-color: red;
 648 | }
649 |
650 | 651 |
652 |
653 |

Circle

654 |
679 |

Create a circle, with an optional border.

680 |

Optional Arguments: $size, $color, $border-width, $border-color, $display

681 |
682 |

Example:

683 |
684 | 
.element {
 685 |   @include circle(40px, red, 5px);
 686 | }
687 |

CSS Output:

688 | 
.element {
 689 |   display: inline-block;
 690 |   border-radius: 50%;
 691 |   width: 40px;
 692 |   height: 40px;
 693 |   background-color: red;
 694 |   border: 5px solid #222222;
 695 | }
696 |
697 | 698 |
699 |
700 |

Square

701 |
718 |

Create a psuedo element square, with an optional border.

719 |

Optional Arguments: $size, $color, $border-width, $border-color, $element

720 |
721 |

Example:

722 |
723 | 
.element {
 724 |   @include square(25px, blue, 2px, teal);
 725 | }
726 |

CSS Output:

727 | 
.element:after {
 728 |   content: '';
 729 |   position: absolute;
 730 |   width: 25px;
 731 |   height: 25px;
 732 |   background: blue;
 733 |   border: 2px solid teal;
 734 | }
735 |
736 | 737 |
738 |
739 |

Position

740 |
764 |

Easily set an element's position and "trbl" values.

765 |

Arguments: $type, $top, $right, $bottom, $left

766 |

The long way: @include position(relative, 5px, 5px, 10px, 15px)
Set absolute: @include absolute(10px, 25px, null, 50px)
Set relative: @include relative(10px, 35px)
Set fixed: @include fixed(null, null, 20px, 20px)

767 |

Note: Pass null as the value if you don't want a "trbl" property to be set.

768 |
769 |

Example:

770 |
771 | 
.element {
 772 |   @include position(absolute,null,null,10px,15px);
 773 | }
 774 | .absolute-element {
 775 |   @include absolute(null,25px,25px);
 776 | }
 777 | .relative-element {
 778 |   @include relative(15px);
 779 | }
 780 | .fixed-element {
 781 |   @include fixed(10px,50px);
 782 | }
783 |

CSS Output:

784 | 
.element {
 785 |   position: absolute;
 786 |   bottom: 10px;
 787 |   left: 15px;
 788 | }
 789 | .absolute-element {
 790 |   position: absolute;
 791 |   right: 25px;
 792 |   bottom: 25px;
 793 | }
 794 | .relative-element {
 795 |   position: relative;
 796 |   top: 15px;
 797 | }
 798 | .fixed-element {
 799 |   position: fixed;
 800 |   top: 10px;
 801 |   right: 50px;
 802 | }
803 |
804 | 805 |
806 |
807 |

TRBL

808 |
829 |

Easily set an element's "trbl" values.

830 |

Arguments: $top, $right, $bottom, $left

831 |

Extra Mixins: top-left, top-right, bottom-left, bottom-right

832 |

Note: Pass null as the value if you don't want a property to be set.

833 |
834 |

Example:

835 |
836 | 
.element {
 837 |   @include trbl(55px,null,null,15px);
 838 | }
839 |

CSS Output:

840 | 
.element {
 841 |   top: 55px;
 842 |   left: 15px;
 843 | }
844 |
845 | 846 |
847 |
848 |

Image Preload

849 |
884 |

Preload images by setting them to a background-image on the html:after element.

885 |

Arguments: Path to image(s)

886 |

Note: Call "@include image-preload;" after all images in your stylesheet to load images, any calls after this will be ignored.

887 |
888 |

Example:

889 |
890 | 
.element1:hover {
 891 |   $image1: 'http://placeimg.com/500/350/tech/grayscale';
 892 |   background-image: url($image1);
 893 |   @include image-preload($image1);
 894 | }
 895 | .element2:hover {
 896 |   $image2: 'http://placeimg.com/500/350/tech';
 897 |   background-image: url($image2);
 898 |   @include image-preload($image2);
 899 | }
 900 | 
 901 | @include image-preload;
902 |

CSS Output:

903 | 
.element1:hover {
 904 |   background-image: url("http://placeimg.com/500/350/tech");
 905 | }
 906 | .element2:hover {
 907 |   background-image: url("http://placeimg.com/500/350/tech/grayscale");
 908 | }
 909 | 
 910 | html:after {
 911 |   content: '';
 912 |   display: none;
 913 |   background-image: url(http://placeimg.com/500/350/tech),
 914 |           url(http://placeimg.com/500/350/tech/grayscale);
 915 | }
916 |
917 | 918 |
919 |
920 |

Juice Prefixer

921 |
945 |

Mixin used to add vendor prefixes for cross browser compatibility.

946 |

Arguments: $property, $value, $prefixes

947 |
948 |

Example:

949 |
950 | 
.element {
 951 |   @include juice-prefixer(transform, scale(1.5), webkit moz ms o spec);
 952 | }
953 |

CSS Output:

954 | 
.element {
 955 |   -webkit-transform: scale(1.5);
 956 |   -moz-transform: scale(1.5);
 957 |   -ms-transform: scale(1.5);
 958 |   -o-transform: scale(1.5);
 959 |   transform: scale(1.5);
 960 | }
961 |
962 | 963 |
964 | 965 | 966 | 967 |
968 |
969 |

Helpers

970 |
971 | 972 |
973 |
974 |

Clearfix

975 |
988 |

Just an awesome clearfix.

989 |
990 |

Example:

991 |
992 | 
.element {
 993 |   @include clearfix;
 994 | }
995 |

CSS Output:

996 | 
.element {
 997 |   *zoom: 1;
 998 |   &:before,
 999 |   &:after {
1000 |     display: table;
1001 |     content: "";
1002 |     line-height: 0;
1003 |   }
1004 |   &:after {
1005 |     clear: both;
1006 |   }
1007 | }
1008 |
1009 | 1010 |
1011 |
1012 |

Hide Text

1013 |
1019 |

Hide the text in an element.

1020 |
1021 |

Example:

1022 |
1023 | 
.element {
1024 |   @include hide-text;
1025 | }
1026 |

CSS Output:

1027 | 
.element {
1028 |   font: 0/0 a;
1029 |   color: transparent;
1030 |   text-shadow: none;
1031 | }
1032 |
1033 | 1034 |
1035 |
1036 |

Centerer

1037 |
1042 |

Center an element vertically and horizontally.

1043 |
1044 |

Example:

1045 |
1046 | 
.element {
1047 |   @include centerer;
1048 | }
1049 |

CSS Output:

1050 | 
.element {
1051 |   position: absolute;
1052 |   top: 50%;
1053 |   left: 50%;
1054 |   transform: translate(-50%,-50%);
1055 | }
1056 |
1057 | 1058 |
1059 |
1060 |

Vertical Centerer

1061 |
1066 |

Center an element vertically.

1067 |
1068 |

Example:

1069 |
1070 | 
.element {
1071 |   @include vert-centerer;
1072 | }
1073 |

CSS Output:

1074 | 
.element {
1075 |   position: relative;
1076 |   top: 50%;
1077 |   transform: translateY(-50%);
1078 | }
1079 |
1080 | 1081 |
1082 |
1083 |

Coverer

1084 |
1089 |

Force an element to fill the screen or parent element.

1090 |
1091 |

Example:

1092 |
1093 | 
.element {
1094 |   @include coverer;
1095 | }
1096 |

CSS Output:

1097 | 
.element {
1098 |   position: absolute;
1099 |   top: 0;
1100 |   left: 0;
1101 |   width: 100%;
1102 |   height: 100%;
1103 | }
1104 |
1105 | 1106 |
1107 |
1108 |

Center Block

1109 |
1115 |

Turn an element into a block and center it with margins.

1116 |
1117 |

Example:

1118 |
1119 | 
.element {
1120 |   @include center-block;
1121 | }
1122 |

CSS Output:

1123 | 
.element {
1124 |   display: block;
1125 |   margin-left: auto;
1126 |   margin-right: auto;
1127 | }
1128 |
1129 | 1130 |
1131 |
1132 |

Clean

1133 |
1138 |

Remove the margin and padding from an element.

1139 |
1140 |

Example:

1141 |
1142 | 
.element {
1143 |   @include clean;
1144 | }
1145 |

CSS Output:

1146 | 
.element {
1147 |   margin: 0;
1148 |   padding: 0;
1149 | }
1150 |
1151 | 1152 |
1153 | 1154 | 1155 | 1156 |
1157 |
1158 |

Functions

1159 |
1160 | 1161 |
1162 |
1163 |

Tint

1164 |
1168 |

Mix a percentage of white with a color.

1169 |

Arguments: $color, $mix-percent

1170 |
1171 |

Example:

1172 |
1173 | 
.element {
1174 |   color: tint(#0000ff,15%);
1175 | }
1176 |

CSS Output:

1177 | 
.element {
1178 |   color: #2626ff;
1179 | }
1180 |
1181 | 1182 |
1183 |
1184 |

Shade

1185 |
1189 |

Mix a percentage of black with a color.

1190 |

Arguments: $color, $mix-percent

1191 |
1192 |

Example:

1193 |
1194 | 
.element {
1195 |   color: shade(#0000ff,15%);
1196 | }
1197 |

CSS Output:

1198 | 
.element {
1199 |   color: #0000d8;
1200 | }
1201 |
1202 | 1203 |
1204 |
1205 |

Strip Units

1206 |
1210 |

Remove any units from a number.

1211 |
1212 |

Example:

1213 |
1214 | 
.element {
1215 |   font-size: strip-units(5px);
1216 | }
1217 |

CSS Output:

1218 | 
.element {
1219 |   font-size: 5;
1220 | }
1221 |
1222 | 1223 |
1224 |
1225 |

Rem Calc

1226 |
1236 |

Calculate rems from a px value.

1237 |
1238 |

Example:

1239 |
1240 | 
.element {
1241 |   font-size: rem-calc(15px);
1242 | }
1243 |

CSS Output:

1244 | 
.element {
1245 |   font-size: 0.9375rem;
1246 | }
1247 |
1248 | 1249 |
1250 |
1251 |

Em Calc

1252 |
1262 |

Calculate ems from a px value.

1263 |
1264 |

Example:

1265 |
1266 | 
.element {
1267 |   font-size: em-calc(10px);
1268 | }
1269 |

CSS Output:

1270 | 
.element {
1271 |   font-size: 0.625em;
1272 | }
1273 |
1274 | 1275 |
1276 |
1277 |

Random Color

1278 |
1295 |

Generate a random hex or rgb color from rgb values.

1296 |

Optional Arguments: $min(0-255), $max(0-255), $alpha(0-1) 1297 |

1298 |

Example:

1299 |
1300 | 
.element {
1301 |   background-color: random-color(50,150,0.75);
1302 | }
1303 |

CSS Output:

1304 | 
.element {
1305 |   background-color: rgba(143, 56, 61, 0.75);
1306 | }
1307 |
1308 | 1309 |
1310 |
1311 |

Reverse String

1312 |
1321 |

Reverse a string.

1322 |
1323 |

Example:

1324 |
1325 | 
.element {
1326 |   background-color: reverse(eulb);
1327 | }
1328 |

CSS Output:

1329 | 
.element {
1330 |   background-color: blue;
1331 | }
1332 |
1333 | 1334 |
1335 | 1336 | 1337 | 1338 |
1339 |
1340 |

Setup

1341 |
1342 | 1343 |
1344 |
1345 |

Installation

1346 |

You can use either bower or just clone the github repo directly.

1347 |
1348 |

Bower

1349 |
1350 | 
$ bower install juice
1351 |
1352 |
1353 |

Clone/Fork

1354 |
1355 | 
$ git clone git@github.com:kjbrum/juice.git
1356 |
1357 |
1358 | View on Github 1359 | Download Repo 1360 |
1361 |
1362 | 1363 |
1364 |
1365 |

Using the file

1366 |

Just import the "_juice.scss" file into your main scss file.

1367 |
1368 | 
// In the SCSS file
1369 | 
1370 | // Enabling browser prefixing
1371 | $browser-prefixes: true !default;
1372 | 
1373 | // Import the dist file
1374 | @import "juice";
1375 |
1376 |
1377 | 1378 |
1379 |
1380 |

Settings

1381 |

You can override these variables at the top of your main scss file to change the default values.

1382 |
1383 | 
// Base px
1384 | $base-px-default: 16px !default;
1385 | $browser-prefixes: false !default;
1386 | // Breakpoints
1387 | $hdpi-ratio-default: 1.3 !default;
1388 | $breakpoint-xlarge-default: em-calc(1920) !default;
1389 | $breakpoint-large-default: em-calc(1440) !default;
1390 | $breakpoint-medium-default: em-calc(1024) !default;
1391 | $breakpoint-small-default: em-calc(640) !default;
1392 | $breakpoint-xsmall-default: em-calc(480) !default;
1393 | $breakpoint-xxsmall-default: em-calc(320) !default;
1394 | // Show/Hide
1395 | $show-display-default: block !default;
1396 | /// Border Radius
1397 | $border-radius-default: 5px !default;
1398 | // Placeholder Color
1399 | $placeholder-color-default: #555555 !default;
1400 | // Triangle
1401 | $triangle-direction-default: right !default;
1402 | $triangle-size-default: $base-px-default !default;
1403 | $triangle-color-default: #222222 !default;
1404 | $triangle-element-default: after !default;
1405 | // Circle
1406 | $circle-size-default: $base-px-default !default;
1407 | $circle-color-default: inherit !default;
1408 | $circle-border-width-default: null !default;
1409 | $circle-border-color-default: #222222 !default;
1410 | $circle-display-default: inline-block !default;
1411 | // Square
1412 | $square-size-default: $base-px-default !default;
1413 | $square-color-default: black !default;
1414 | $square-border-width-default: null !default;
1415 | $square-border-color-default: grey !default;
1416 | $square-element-default: after !default;
1417 | // Position
1418 | $position-default: null !default;
1419 | // Tint/Shade
1420 | $mix-percent-default: 15% !default;
1421 |
1422 | 1423 |
1424 | 1425 | 1426 | 1429 | 1430 | 1431 | 1432 | 1433 | 1434 | 1435 | 1436 | -------------------------------------------------------------------------------- /js/20-highlight.pack.js: -------------------------------------------------------------------------------- 1 | !function(e){"undefined"!=typeof exports?e(exports):(window.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return window.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(//gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){var n=(e.className+" "+(e.parentNode?e.parentNode.className:"")).split(/\s+/);return n=n.map(function(e){return e.replace(/^lang(uage)?-/,"")}),n.filter(function(e){return N(e)||/no(-?)highlight/.test(e)})[0]}function o(e,n){var t={};for(var r in e)t[r]=e[r];if(n)for(var r in n)t[r]=n[r];return t}function i(e){var n=[];return function r(e,a){for(var o=e.firstChild;o;o=o.nextSibling)3==o.nodeType?a+=o.nodeValue.length:1==o.nodeType&&(n.push({event:"start",offset:a,node:o}),a=r(o,a),t(o).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:o}));return a}(e,0),n}function c(e,r,a){function o(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset"}function c(e){l+=""}function u(e){("start"==e.event?i:c)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=o();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(c);do u(g.splice(0,1)[0]),g=o();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(i)}else"start"==g[0].event?f.push(g[0].node):f.pop(),u(g.splice(0,1)[0])}return l+n(a.substr(s))}function u(e){function n(e){return e&&e.source||e}function t(t,r){return RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var c={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");c[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):Object.keys(a.k).forEach(function(e){u(e,a.k[e])}),a.k=c}a.lR=t(a.l||/\b[A-Za-z0-9_]+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function s(e,t,a,o){function i(e,n){for(var t=0;t";return o+=e+'">',o+n+i}function d(){if(!w.k)return n(y);var e="",t=0;w.lR.lastIndex=0;for(var r=w.lR.exec(y);r;){e+=n(y.substr(t,r.index-t));var a=g(w,r);a?(B+=a[1],e+=p(a[0],n(r[0]))):e+=n(r[0]),t=w.lR.lastIndex,r=w.lR.exec(y)}return e+n(y.substr(t))}function h(){if(w.sL&&!R[w.sL])return n(y);var e=w.sL?s(w.sL,y,!0,L[w.sL]):l(y);return w.r>0&&(B+=e.r),"continuous"==w.subLanguageMode&&(L[w.sL]=e.top),p(e.language,e.value,!1,!0)}function v(){return void 0!==w.sL?h():d()}function b(e,t){var r=e.cN?p(e.cN,"",!0):"";e.rB?(M+=r,y=""):e.eB?(M+=n(t)+r,y=""):(M+=r,y=t),w=Object.create(e,{parent:{value:w}})}function m(e,t){if(y+=e,void 0===t)return M+=v(),0;var r=i(t,w);if(r)return M+=v(),b(r,t),r.rB?0:t.length;var a=c(w,t);if(a){var o=w;o.rE||o.eE||(y+=t),M+=v();do w.cN&&(M+=""),B+=w.r,w=w.parent;while(w!=a.parent);return o.eE&&(M+=n(t)),y="",a.starts&&b(a.starts,""),o.rE?0:t.length}if(f(t,w))throw new Error('Illegal lexeme "'+t+'" for mode "'+(w.cN||"")+'"');return y+=t,t.length||1}var x=N(e);if(!x)throw new Error('Unknown language: "'+e+'"');u(x);for(var w=o||x,L={},M="",k=w;k!=x;k=k.parent)k.cN&&(M=p(k.cN,"",!0)+M);var y="",B=0;try{for(var C,j,I=0;;){if(w.t.lastIndex=I,C=w.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}m(t.substr(I));for(var k=w;k.parent;k=k.parent)k.cN&&(M+="");return{r:B,value:M,language:e,top:w}}catch(A){if(-1!=A.message.indexOf("Illegal"))return{r:0,value:n(t)};throw A}}function l(e,t){t=t||E.languages||Object.keys(R);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(N(n)){var t=s(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function f(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"
")),e}function g(e,n,t){var r=n?x[n]:t,a=[e.trim()];return e.match(/(\s|^)hljs(\s|$)/)||a.push("hljs"),r&&a.push(r),a.join(" ").trim()}function p(e){var n=a(e);if(!/no(-?)highlight/.test(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):t=e;var r=t.textContent,o=n?s(n,r,!0):l(r),u=i(t);if(u.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(u,i(p),r)}o.value=f(o.value),e.innerHTML=o.value,e.className=g(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function h(){if(!h.called){h.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",h,!1),addEventListener("load",h,!1)}function b(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e){x[e]=n})}function m(){return Object.keys(R)}function N(e){return R[e]||R[x[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},R={},x={};return e.highlight=s,e.highlightAuto=l,e.fixMarkup=f,e.highlightBlock=p,e.configure=d,e.initHighlighting=h,e.initHighlightingOnLoad=v,e.registerLanguage=b,e.listLanguages=m,e.getLanguage=N,e.inherit=o,e.IR="[a-zA-Z][a-zA-Z0-9_]*",e.UIR="[a-zA-Z_][a-zA-Z0-9_]*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such)\b/},e.CLCM={cN:"comment",b:"//",e:"$",c:[e.PWM]},e.CBCM={cN:"comment",b:"/\\*",e:"\\*/",c:[e.PWM]},e.HCM={cN:"comment",b:"#",e:"$",c:[e.PWM]},e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",a={cN:"function",b:c+"\\(",rB:!0,eE:!0,e:"\\("};return{cI:!0,i:"[=/|']",c:[e.CBCM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[a,e.ASM,e.QSM,e.CSSNM]}]},{cN:"tag",b:c,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[e.CBCM,{cN:"rule",b:"[^\\s]",rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:!0,i:"[^\\s]",starts:{cN:"value",eW:!0,eE:!0,c:[a,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});hljs.registerLanguage("scss",function(e){{var t="[a-zA-Z-][a-zA-Z0-9_-]*",i={cN:"variable",b:"(\\$"+t+")\\b"},r={cN:"function",b:t+"\\(",rB:!0,eE:!0,e:"\\("},o={cN:"hexcolor",b:"#[0-9A-Fa-f]+"};({cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:!0,i:"[^\\s]",starts:{cN:"value",eW:!0,eE:!0,c:[r,o,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"important",b:"!important"}]}})}return{cI:!0,i:"[=/|']",c:[e.CLCM,e.CBCM,r,{cN:"id",b:"\\#[A-Za-z0-9_-]+",r:0},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"tag",b:"\\b(a|abbr|acronym|address|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|command|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|keygen|label|legend|li|link|map|mark|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre|progress|q|rp|rt|ruby|samp|script|section|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video)\\b",r:0},{cN:"pseudo",b:":(visited|valid|root|right|required|read-write|read-only|out-range|optional|only-of-type|only-child|nth-of-type|nth-last-of-type|nth-last-child|nth-child|not|link|left|last-of-type|last-child|lang|invalid|indeterminate|in-range|hover|focus|first-of-type|first-line|first-letter|first-child|first|enabled|empty|disabled|default|checked|before|after|active)"},{cN:"pseudo",b:"::(after|before|choices|first-letter|first-line|repeat-index|repeat-item|selection|value)"},i,{cN:"attribute",b:"\\b(z-index|word-wrap|word-spacing|word-break|width|widows|white-space|visibility|vertical-align|unicode-bidi|transition-timing-function|transition-property|transition-duration|transition-delay|transition|transform-style|transform-origin|transform|top|text-underline-position|text-transform|text-shadow|text-rendering|text-overflow|text-indent|text-decoration-style|text-decoration-line|text-decoration-color|text-decoration|text-align-last|text-align|tab-size|table-layout|right|resize|quotes|position|pointer-events|perspective-origin|perspective|page-break-inside|page-break-before|page-break-after|padding-top|padding-right|padding-left|padding-bottom|padding|overflow-y|overflow-x|overflow-wrap|overflow|outline-width|outline-style|outline-offset|outline-color|outline|orphans|order|opacity|object-position|object-fit|normal|none|nav-up|nav-right|nav-left|nav-index|nav-down|min-width|min-height|max-width|max-height|mask|marks|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|letter-spacing|left|justify-content|initial|inherit|ime-mode|image-orientation|image-resolution|image-rendering|icon|hyphens|height|font-weight|font-variant-ligatures|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-language-override|font-kerning|font-feature-settings|font-family|font|float|flex-wrap|flex-shrink|flex-grow|flex-flow|flex-direction|flex-basis|flex|filter|empty-cells|display|direction|cursor|counter-reset|counter-increment|content|column-width|column-span|column-rule-width|column-rule-style|column-rule-color|column-rule|column-gap|column-fill|column-count|columns|color|clip-path|clip|clear|caption-side|break-inside|break-before|break-after|box-sizing|box-shadow|box-decoration-break|bottom|border-width|border-top-width|border-top-style|border-top-right-radius|border-top-left-radius|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-radius|border-left-width|border-left-style|border-left-color|border-left|border-image-width|border-image-source|border-image-slice|border-image-repeat|border-image-outset|border-image|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-right-radius|border-bottom-left-radius|border-bottom-color|border-bottom|border|background-size|background-repeat|background-position|background-origin|background-image|background-color|background-clip|background-attachment|background|backface-visibility|auto|animation-timing-function|animation-play-state|animation-name|animation-iteration-count|animation-fill-mode|animation-duration|animation-direction|animation-delay|animation|align-self|align-items|align-content)\\b",i:"[^\\s]"},{cN:"value",b:"\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b"},{cN:"value",b:":",e:";",c:[r,i,o,e.CSSNM,e.QSM,e.ASM,{cN:"important",b:"!important"}]},{cN:"at_rule",b:"@",e:"[{;]",k:"mixin include extend for if else each while charset import debug media page content font-face namespace warn",c:[r,i,e.QSM,e.ASM,o,e.CSSNM,{cN:"preprocessor",b:"\\s[A-Za-z0-9_.-]+",r:0}]}]}}); -------------------------------------------------------------------------------- /js/30-flowtype.js: -------------------------------------------------------------------------------- 1 | /* 2 | * FlowType.JS v1.1 3 | * Copyright 2013-2014, Simple Focus http://simplefocus.com/ 4 | * 5 | * FlowType.JS by Simple Focus (http://simplefocus.com/) 6 | * is licensed under the MIT License. Read a copy of the 7 | * license in the LICENSE.txt file or at 8 | * http://choosealicense.com/licenses/mit 9 | * 10 | * Thanks to Giovanni Difeterici (http://www.gdifeterici.com/) 11 | */ 12 | 13 | (function($) { 14 | $.fn.flowtype = function(options) { 15 | 16 | // Establish default settings/variables 17 | // ==================================== 18 | var settings = $.extend({ 19 | maximum : 9999, 20 | minimum : 1, 21 | maxFont : 9999, 22 | minFont : 1, 23 | fontRatio : 35 24 | }, options), 25 | 26 | // Do the magic math 27 | // ================= 28 | changes = function(el) { 29 | var $el = $(el), 30 | elw = $el.width(), 31 | width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw, 32 | fontBase = width / settings.fontRatio, 33 | fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase; 34 | $el.css('font-size', fontSize + 'px'); 35 | }; 36 | 37 | // Make the magic visible 38 | // ====================== 39 | return this.each(function() { 40 | // Context for resize callback 41 | var that = this; 42 | // Make changes upon resize 43 | $(window).resize(function(){changes(that);}); 44 | // Set changes on load 45 | changes(this); 46 | }); 47 | }; 48 | }(jQuery)); -------------------------------------------------------------------------------- /js/xx-main.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | $('body') 3 | .scrollspy({ target: '.navbar-collapse' }) 4 | .flowtype({ 5 | minimum : 320, 6 | maximum : 780, 7 | minFont : 12, 8 | maxFont : 16, 9 | }); 10 | 11 | $('[data-toggle="popover"]').popover({ 12 | html: true 13 | }); 14 | 15 | $(document).on('click', '#main-navigation li a, .top, .navbar-brand, .overview-links a', function() { 16 | var section = $(this).attr('href'), 17 | extra = -8; 18 | $('html, body').animate({scrollTop:$(section).offset().top+extra},{duration:500}); 19 | return false; 20 | }); 21 | 22 | // Collapse nav when link is clicked 23 | $(document).on('click', '.nav a', function(){ 24 | if($(window).width() <= 800) { 25 | $('.navbar-toggle').click(); 26 | } 27 | }); 28 | 29 | runOnScroll(); 30 | $(window).scroll(function() { 31 | runOnScroll(); 32 | }); 33 | 34 | function runOnScroll() { 35 | var scrolled = $(this).scrollTop(), 36 | $top = $('.top'), 37 | $brand = $('.navbar-brand'), 38 | winHeight = $(window).height(), 39 | docHeight = $(document).height(), 40 | full = docHeight-winHeight-292, 41 | scrollPercent = ((scrolled/full)*100-(292/full)*100)+'%'; 42 | 43 | // Show/hide back to top button 44 | if(scrolled > 0) { 45 | $top.addClass('visible'); 46 | } else { 47 | $top.removeClass('visible'); 48 | } 49 | 50 | // Show/hide branding in the header 51 | if(scrolled >= 232) { 52 | $brand.addClass('visible'); 53 | } else { 54 | $brand.removeClass('visible'); 55 | } 56 | 57 | // Set pregress bar width 58 | $('.progressbar').width(scrollPercent); 59 | } 60 | 61 | $(document).on('click', '.show-source', function() { 62 | $('pre code').each(function(i, block) { 63 | hljs.highlightBlock(block); 64 | }); 65 | }); 66 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "juice", 3 | "description": "SASS Mixins for Life", 4 | "version": "1.0.1", 5 | "homepage": "http://juicynex.us/juice", 6 | "license": "MIT", 7 | "author": { 8 | "name": "Kyle Brumm" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git@github.com:kjbrum/juice.git" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/kjbrum/juice/issues" 16 | }, 17 | "devDependencies": { 18 | "browser-sync": "^1.3.3", 19 | "del": "^0.1.3", 20 | "gulp": "^3.8.7", 21 | "gulp-autoprefixer": "^1.0.1", 22 | "gulp-cache": "^0.2.0", 23 | "gulp-concat": "^2.3.4", 24 | "gulp-imagemin": "^0.6.2", 25 | "gulp-jshint": "^1.8.4", 26 | "gulp-minify-css": "^0.3.7", 27 | "gulp-notify": "^1.4.2", 28 | "gulp-plumber": "^0.6.4", 29 | "gulp-rename": "^1.2.0", 30 | "gulp-ruby-sass": "^0.7.1", 31 | "gulp-uglify": "^0.3.1", 32 | "run-sequence": "^0.3.6" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /sache.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Juice", 3 | "description": "Mixins for Life. A collection of useful mixins to help with any project.", 4 | "tags": ["mixins", "breakpoints", "media queries", "add-ons", "functions", "library", "helper", "preload", "responsive", "position", "collection"] 5 | } -------------------------------------------------------------------------------- /sass/_colors.scss: -------------------------------------------------------------------------------- 1 | // Custom Colors 2 | // -------------------------------------------------- 3 | $white: #eeeeee !default; 4 | $black: #000000 !default; 5 | $dark-blue: #222232 !default; 6 | $light-blue: lighten($dark-blue, 5%) !default; 7 | $purple: #B96CFF !default; 8 | $teal: #56D7C6 !default; -------------------------------------------------------------------------------- /sass/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Raleway:200,500,700|Open+Sans+Condensed:300,700); 2 | 3 | $ds: "Droid Sans", Helvetica, Arial, sans-serif !default; 4 | $os: "Open Sans", Helvetica, Arial, sans-serif !default; 5 | $raleway: "Raleway", Helvetica, Arial, sans-serif !default; 6 | -------------------------------------------------------------------------------- /sass/_variables.scss: -------------------------------------------------------------------------------- 1 | // When true, asset path helpers are used, otherwise the regular CSS `url()` is used. 2 | // When there no function is defined, `fn('')` is parsed as string that equals the right hand side 3 | // NB: in Sass 3.3 there is a native function: function-exists(twbs-font-path) 4 | $bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !default; 5 | 6 | // 7 | // Variables 8 | // -------------------------------------------------- 9 | 10 | 11 | //== Colors 12 | // 13 | //## Gray and brand colors for use across Bootstrap. 14 | 15 | $gray-base: #000 !default; 16 | $gray-darker: lighten($gray-base, 13.5%) !default; // #222 17 | $gray-dark: lighten($gray-base, 20%) !default; // #333 18 | $gray: lighten($gray-base, 33.5%) !default; // #555 19 | $gray-light: lighten($gray-base, 46.7%) !default; // #777 20 | $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee 21 | 22 | $brand-primary: darken(#428bca, 6.5%) !default; 23 | $brand-success: #5cb85c !default; 24 | $brand-info: #5bc0de !default; 25 | $brand-warning: #f0ad4e !default; 26 | $brand-danger: #d9534f !default; 27 | 28 | 29 | //== Scaffolding 30 | // 31 | //## Settings for some of the most global styles. 32 | 33 | //** Background color for ``. 34 | $body-bg: $white !default; 35 | //** Global text color on ``. 36 | $text-color: $dark-blue !default; 37 | 38 | //** Global textual link color. 39 | $link-color: $dark-blue !default; 40 | //** Link hover color set via `darken()` function. 41 | $link-hover-color: $purple !default; 42 | //** Link hover decoration. 43 | $link-hover-decoration: none !default; 44 | 45 | 46 | //== Typography 47 | // 48 | //## Font, line-height, and color for body text, headings, and more. 49 | 50 | $font-family-sans-serif: $os; 51 | $font-family-serif: $os; 52 | //** Default monospace fonts for ``, ``, and `
`.
 53 | $font-family-monospace:   Consolas, monospace;
 54 | $font-family-base:        $os;
 55 | 
 56 | $font-size-base:          16px !default;
 57 | $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 58 | $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 59 | 
 60 | // $font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
 61 | // $font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
 62 | // $font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
 63 | // $font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
 64 | // $font-size-h5:            $font-size-base !default;
 65 | // $font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
 66 | 
 67 | $font-size-h1: 5rem !default;
 68 | $font-size-h2: 4.2rem !default;
 69 | $font-size-h3: 3rem !default;
 70 | $font-size-h4: 2rem !default;
 71 | $font-size-h5: 1.4rem !default;
 72 | $font-size-h6: 1rem !default;
 73 | 
 74 | //** Unit-less `line-height` for use in components like buttons.
 75 | $line-height-base:        1.428571429 !default; // 20/14
 76 | //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 77 | $line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
 78 | 
 79 | //** By default, this inherits from the ``.
 80 | $headings-font-family:    $raleway !default;
 81 | $headings-font-weight:    500 !default;
 82 | $headings-line-height:    1.1 !default;
 83 | $headings-color:          $dark-blue !default;
 84 | 
 85 | 
 86 | //== Iconography
 87 | //
 88 | //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
 89 | 
 90 | //** Load fonts from this directory.
 91 | 
 92 | // [converter] Asset helpers such as Sprockets and Node.js Mincer do not resolve relative paths
 93 | $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
 94 | 
 95 | //** File name for all font files.
 96 | $icon-font-name:          "glyphicons-halflings-regular" !default;
 97 | //** Element ID within SVG icon file.
 98 | $icon-font-svg-id:        "glyphicons_halflingsregular" !default;
 99 | 
100 | 
101 | //== Components
102 | //
103 | //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
104 | 
105 | $padding-base-vertical:     6px !default;
106 | $padding-base-horizontal:   12px !default;
107 | 
108 | $padding-large-vertical:    10px !default;
109 | $padding-large-horizontal:  16px !default;
110 | 
111 | $padding-small-vertical:    5px !default;
112 | $padding-small-horizontal:  10px !default;
113 | 
114 | $padding-xs-vertical:       1px !default;
115 | $padding-xs-horizontal:     5px !default;
116 | 
117 | $line-height-large:         1.33 !default;
118 | $line-height-small:         1.5 !default;
119 | 
120 | $border-radius-base:        4px !default;
121 | $border-radius-large:       6px !default;
122 | $border-radius-small:       3px !default;
123 | 
124 | //** Global color for active items (e.g., navs or dropdowns).
125 | $component-active-color:    $white !default;
126 | //** Global background color for active items (e.g., navs or dropdowns).
127 | $component-active-bg:       $brand-primary !default;
128 | 
129 | //** Width of the `border` for generating carets that indicator dropdowns.
130 | $caret-width-base:          4px !default;
131 | //** Carets increase slightly in size for larger components.
132 | $caret-width-large:         5px !default;
133 | 
134 | 
135 | //== Tables
136 | //
137 | //## Customizes the `.table` component with basic values, each used across all table variations.
138 | 
139 | //** Padding for ``s and ``s.
140 | $table-cell-padding:            8px !default;
141 | //** Padding for cells in `.table-condensed`.
142 | $table-condensed-cell-padding:  5px !default;
143 | 
144 | //** Default background color used for all tables.
145 | $table-bg:                      transparent !default;
146 | //** Background color used for `.table-striped`.
147 | $table-bg-accent:               #f9f9f9 !default;
148 | //** Background color used for `.table-hover`.
149 | $table-bg-hover:                #f5f5f5 !default;
150 | $table-bg-active:               $table-bg-hover !default;
151 | 
152 | //** Border color for table and cell borders.
153 | $table-border-color:            #ddd !default;
154 | 
155 | 
156 | //== Buttons
157 | //
158 | //## For each of Bootstrap's buttons, define text, background and border color.
159 | 
160 | $btn-font-weight:                normal !default;
161 | 
162 | $btn-default-color:              #333 !default;
163 | $btn-default-bg:                 $white !default;
164 | $btn-default-border:             #ccc !default;
165 | 
166 | $btn-primary-color:              $white !default;
167 | $btn-primary-bg:                 $brand-primary !default;
168 | $btn-primary-border:             darken($btn-primary-bg, 5%) !default;
169 | 
170 | $btn-success-color:              $white !default;
171 | $btn-success-bg:                 $brand-success !default;
172 | $btn-success-border:             darken($btn-success-bg, 5%) !default;
173 | 
174 | $btn-info-color:                 $white !default;
175 | $btn-info-bg:                    $brand-info !default;
176 | $btn-info-border:                darken($btn-info-bg, 5%) !default;
177 | 
178 | $btn-warning-color:              $white !default;
179 | $btn-warning-bg:                 $brand-warning !default;
180 | $btn-warning-border:             darken($btn-warning-bg, 5%) !default;
181 | 
182 | $btn-danger-color:               $white !default;
183 | $btn-danger-bg:                  $brand-danger !default;
184 | $btn-danger-border:              darken($btn-danger-bg, 5%) !default;
185 | 
186 | $btn-link-disabled-color:        $gray-light !default;
187 | 
188 | 
189 | //== Forms
190 | //
191 | //##
192 | 
193 | //** `` background color
194 | $input-bg:                       $white !default;
195 | //** `` background color
196 | $input-bg-disabled:              $gray-lighter !default;
197 | 
198 | //** Text color for ``s
199 | $input-color:                    $gray !default;
200 | //** `` border color
201 | $input-border:                   #ccc !default;
202 | 
203 | // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
204 | //** Default `.form-control` border radius
205 | $input-border-radius:            $border-radius-base !default;
206 | //** Large `.form-control` border radius
207 | $input-border-radius-large:      $border-radius-large !default;
208 | //** Small `.form-control` border radius
209 | $input-border-radius-small:      $border-radius-small !default;
210 | 
211 | //** Border color for inputs on focus
212 | $input-border-focus:             #66afe9 !default;
213 | 
214 | //** Placeholder text color
215 | $input-color-placeholder:        #999 !default;
216 | 
217 | //** Default `.form-control` height
218 | $input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
219 | //** Large `.form-control` height
220 | $input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
221 | //** Small `.form-control` height
222 | $input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
223 | 
224 | $legend-color:                   $gray-dark !default;
225 | $legend-border-color:            #e5e5e5 !default;
226 | 
227 | //** Background color for textual input addons
228 | $input-group-addon-bg:           $gray-lighter !default;
229 | //** Border color for textual input addons
230 | $input-group-addon-border-color: $input-border !default;
231 | 
232 | //** Disabled cursor for form controls and buttons.
233 | $cursor-disabled:                not-allowed !default;
234 | 
235 | 
236 | //== Dropdowns
237 | //
238 | //## Dropdown menu container and contents.
239 | 
240 | //** Background for the dropdown menu.
241 | $dropdown-bg:                    $white !default;
242 | //** Dropdown menu `border-color`.
243 | $dropdown-border:                rgba(0,0,0,.15) !default;
244 | //** Dropdown menu `border-color` **for IE8**.
245 | $dropdown-fallback-border:       #ccc !default;
246 | //** Divider color for between dropdown items.
247 | $dropdown-divider-bg:            #e5e5e5 !default;
248 | 
249 | //** Dropdown link text color.
250 | $dropdown-link-color:            $gray-dark !default;
251 | //** Hover color for dropdown links.
252 | $dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
253 | //** Hover background for dropdown links.
254 | $dropdown-link-hover-bg:         #f5f5f5 !default;
255 | 
256 | //** Active dropdown menu item text color.
257 | $dropdown-link-active-color:     $component-active-color !default;
258 | //** Active dropdown menu item background color.
259 | $dropdown-link-active-bg:        $component-active-bg !default;
260 | 
261 | //** Disabled dropdown menu item background color.
262 | $dropdown-link-disabled-color:   $gray-light !default;
263 | 
264 | //** Text color for headers within dropdown menus.
265 | $dropdown-header-color:          $gray-light !default;
266 | 
267 | //** Deprecated `$dropdown-caret-color` as of v3.1.0
268 | $dropdown-caret-color:           #000 !default;
269 | 
270 | 
271 | //-- Z-index master list
272 | //
273 | // Warning: Avoid customizing these values. They're used for a bird's eye view
274 | // of components dependent on the z-axis and are designed to all work together.
275 | //
276 | // Note: These variables are not generated into the Customizer.
277 | 
278 | $zindex-navbar:            1080 !default;
279 | $zindex-dropdown:          1000 !default;
280 | $zindex-popover:           1060 !default;
281 | $zindex-tooltip:           1070 !default;
282 | $zindex-navbar-fixed:      1080 !default;
283 | $zindex-modal:             1040 !default;
284 | 
285 | 
286 | //== Media queries breakpoints
287 | //
288 | //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
289 | 
290 | // Extra small screen / phone
291 | //** Deprecated `$screen-xs` as of v3.0.1
292 | $screen-xs:                  480px !default;
293 | //** Deprecated `$screen-xs-min` as of v3.2.0
294 | $screen-xs-min:              $screen-xs !default;
295 | //** Deprecated `$screen-phone` as of v3.0.1
296 | $screen-phone:               $screen-xs-min !default;
297 | 
298 | // Small screen / tablet
299 | //** Deprecated `$screen-sm` as of v3.0.1
300 | $screen-sm:                  768px !default;
301 | $screen-sm-min:              $screen-sm !default;
302 | //** Deprecated `$screen-tablet` as of v3.0.1
303 | $screen-tablet:              $screen-sm-min !default;
304 | 
305 | // Medium screen / desktop
306 | //** Deprecated `$screen-md` as of v3.0.1
307 | $screen-md:                  992px !default;
308 | $screen-md-min:              $screen-md !default;
309 | //** Deprecated `$screen-desktop` as of v3.0.1
310 | $screen-desktop:             $screen-md-min !default;
311 | 
312 | // Large screen / wide desktop
313 | //** Deprecated `$screen-lg` as of v3.0.1
314 | $screen-lg:                  1200px !default;
315 | $screen-lg-min:              $screen-lg !default;
316 | //** Deprecated `$screen-lg-desktop` as of v3.0.1
317 | $screen-lg-desktop:          $screen-lg-min !default;
318 | 
319 | // So media queries don't overlap when required, provide a maximum
320 | $screen-xs-max:              ($screen-sm-min - 1) !default;
321 | $screen-sm-max:              ($screen-md-min - 1) !default;
322 | $screen-md-max:              ($screen-lg-min - 1) !default;
323 | 
324 | 
325 | //== Grid system
326 | //
327 | //## Define your custom responsive grid.
328 | 
329 | //** Number of columns in the grid.
330 | $grid-columns:              12 !default;
331 | //** Padding between columns. Gets divided in half for the left and right.
332 | $grid-gutter-width:         30px !default;
333 | // Navbar collapse
334 | //** Point at which the navbar becomes uncollapsed.
335 | $grid-float-breakpoint:     $screen-sm-min !default;
336 | //** Point at which the navbar begins collapsing.
337 | $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
338 | 
339 | 
340 | //== Container sizes
341 | //
342 | //## Define the maximum width of `.container` for different screen sizes.
343 | 
344 | // Small screen / tablet
345 | $container-tablet:             (720px + $grid-gutter-width) !default;
346 | //** For `$screen-sm-min` and up.
347 | $container-sm:                 $container-tablet !default;
348 | 
349 | // Medium screen / desktop
350 | $container-desktop:            (940px + $grid-gutter-width) !default;
351 | //** For `$screen-md-min` and up.
352 | $container-md:                 $container-desktop !default;
353 | 
354 | // Large screen / wide desktop
355 | $container-large-desktop:      (1140px + $grid-gutter-width) !default;
356 | //** For `$screen-lg-min` and up.
357 | $container-lg:                 $container-large-desktop !default;
358 | 
359 | 
360 | //== Navbar
361 | //
362 | //##
363 | 
364 | // Basics of a navbar
365 | $navbar-height:                    auto !default;
366 | $navbar-margin-bottom:             $line-height-computed !default;
367 | $navbar-border-radius:             0 !default;
368 | $navbar-padding-horizontal:        0 !default;
369 | $navbar-padding-vertical:          15px !default;
370 | $navbar-collapse-max-height:       340px !default;
371 | 
372 | $navbar-default-color:             $white !default;
373 | $navbar-default-bg:                $dark-blue !default;
374 | $navbar-default-border:            transparent !default;
375 | 
376 | // Navbar links
377 | $navbar-default-link-color:                $white !default;
378 | $navbar-default-link-hover-color:          $teal !default;
379 | $navbar-default-link-hover-bg:             transparent !default;
380 | $navbar-default-link-active-color:         $teal !default;
381 | $navbar-default-link-active-bg:            transparent !default;
382 | $navbar-default-link-disabled-color:       #ccc !default;
383 | $navbar-default-link-disabled-bg:          transparent !default;
384 | 
385 | // Navbar brand label
386 | $navbar-default-brand-color:               $navbar-default-link-color !default;
387 | $navbar-default-brand-hover-color:         $navbar-default-link-color !default;
388 | $navbar-default-brand-hover-bg:            transparent !default;
389 | 
390 | // Navbar toggle
391 | $navbar-default-toggle-hover-bg:           transparent !default;
392 | $navbar-default-toggle-icon-bar-bg:        $white !default;
393 | $navbar-default-toggle-border-color:       transparent !default;
394 | 
395 | 
396 | // Inverted navbar
397 | // Reset inverted navbar basics
398 | $navbar-inverse-color:                      lighten($gray-light, 15%) !default;
399 | $navbar-inverse-bg:                         #222 !default;
400 | $navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
401 | 
402 | // Inverted navbar links
403 | $navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
404 | $navbar-inverse-link-hover-color:           $white !default;
405 | $navbar-inverse-link-hover-bg:              transparent !default;
406 | $navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
407 | $navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
408 | $navbar-inverse-link-disabled-color:        #444 !default;
409 | $navbar-inverse-link-disabled-bg:           transparent !default;
410 | 
411 | // Inverted navbar brand label
412 | $navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
413 | $navbar-inverse-brand-hover-color:          $white !default;
414 | $navbar-inverse-brand-hover-bg:             transparent !default;
415 | 
416 | // Inverted navbar toggle
417 | $navbar-inverse-toggle-hover-bg:            #333 !default;
418 | $navbar-inverse-toggle-icon-bar-bg:         $white !default;
419 | $navbar-inverse-toggle-border-color:        #333 !default;
420 | 
421 | 
422 | //== Navs
423 | //
424 | //##
425 | 
426 | //=== Shared nav styles
427 | $nav-link-padding:                          10px 15px !default;
428 | $nav-link-hover-bg:                         $gray-lighter !default;
429 | 
430 | $nav-disabled-link-color:                   $gray-light !default;
431 | $nav-disabled-link-hover-color:             $gray-light !default;
432 | 
433 | //== Tabs
434 | $nav-tabs-border-color:                     #ddd !default;
435 | 
436 | $nav-tabs-link-hover-border-color:          $gray-lighter !default;
437 | 
438 | $nav-tabs-active-link-hover-bg:             $body-bg !default;
439 | $nav-tabs-active-link-hover-color:          $gray !default;
440 | $nav-tabs-active-link-hover-border-color:   #ddd !default;
441 | 
442 | $nav-tabs-justified-link-border-color:            #ddd !default;
443 | $nav-tabs-justified-active-link-border-color:     $body-bg !default;
444 | 
445 | //== Pills
446 | $nav-pills-border-radius:                   $border-radius-base !default;
447 | $nav-pills-active-link-hover-bg:            $component-active-bg !default;
448 | $nav-pills-active-link-hover-color:         $component-active-color !default;
449 | 
450 | 
451 | //== Pagination
452 | //
453 | //##
454 | 
455 | $pagination-color:                     $link-color !default;
456 | $pagination-bg:                        $white !default;
457 | $pagination-border:                    #ddd !default;
458 | 
459 | $pagination-hover-color:               $link-hover-color !default;
460 | $pagination-hover-bg:                  $gray-lighter !default;
461 | $pagination-hover-border:              #ddd !default;
462 | 
463 | $pagination-active-color:              $white !default;
464 | $pagination-active-bg:                 $brand-primary !default;
465 | $pagination-active-border:             $brand-primary !default;
466 | 
467 | $pagination-disabled-color:            $gray-light !default;
468 | $pagination-disabled-bg:               $white !default;
469 | $pagination-disabled-border:           #ddd !default;
470 | 
471 | 
472 | //== Pager
473 | //
474 | //##
475 | 
476 | $pager-bg:                             $pagination-bg !default;
477 | $pager-border:                         $pagination-border !default;
478 | $pager-border-radius:                  15px !default;
479 | 
480 | $pager-hover-bg:                       $pagination-hover-bg !default;
481 | 
482 | $pager-active-bg:                      $pagination-active-bg !default;
483 | $pager-active-color:                   $pagination-active-color !default;
484 | 
485 | $pager-disabled-color:                 $pagination-disabled-color !default;
486 | 
487 | 
488 | //== Jumbotron
489 | //
490 | //##
491 | 
492 | $jumbotron-padding:              30px !default;
493 | $jumbotron-color:                inherit !default;
494 | $jumbotron-bg:                   $gray-lighter !default;
495 | $jumbotron-heading-color:        inherit !default;
496 | $jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
497 | 
498 | 
499 | //== Form states and alerts
500 | //
501 | //## Define colors for form feedback states and, by default, alerts.
502 | 
503 | $state-success-text:             #3c763d !default;
504 | $state-success-bg:               #dff0d8 !default;
505 | $state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
506 | 
507 | $state-info-text:                #31708f !default;
508 | $state-info-bg:                  #d9edf7 !default;
509 | $state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
510 | 
511 | $state-warning-text:             #8a6d3b !default;
512 | $state-warning-bg:               #fcf8e3 !default;
513 | $state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
514 | 
515 | $state-danger-text:              #a94442 !default;
516 | $state-danger-bg:                #f2dede !default;
517 | $state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
518 | 
519 | 
520 | //== Tooltips
521 | //
522 | //##
523 | 
524 | //** Tooltip max width
525 | $tooltip-max-width:           200px !default;
526 | //** Tooltip text color
527 | $tooltip-color:               $white !default;
528 | //** Tooltip background color
529 | $tooltip-bg:                  #000 !default;
530 | $tooltip-opacity:             .9 !default;
531 | 
532 | //** Tooltip arrow width
533 | $tooltip-arrow-width:         5px !default;
534 | //** Tooltip arrow color
535 | $tooltip-arrow-color:         $tooltip-bg !default;
536 | 
537 | 
538 | //== Popovers
539 | //
540 | //##
541 | 
542 | //** Popover body background color
543 | $popover-bg:                          $white !default;
544 | //** Popover maximum width
545 | $popover-max-width:                   none !default;
546 | //** Popover border color
547 | $popover-border-color:                darken($white, 10%) !default;
548 | //** Popover fallback border color
549 | $popover-fallback-border-color:       darken($white, 10%) !default;
550 | 
551 | //** Popover title background color
552 | $popover-title-bg:                    darken($popover-bg, 3%) !default;
553 | 
554 | //** Popover arrow width
555 | $popover-arrow-width:                 0 !default;
556 | //** Popover arrow color
557 | $popover-arrow-color:                 $popover-bg !default;
558 | 
559 | //** Popover outer arrow width
560 | $popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
561 | //** Popover outer arrow color
562 | $popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
563 | //** Popover outer arrow fallback color
564 | $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
565 | 
566 | 
567 | //== Labels
568 | //
569 | //##
570 | 
571 | //** Default label background color
572 | $label-default-bg:            $gray-light !default;
573 | //** Primary label background color
574 | $label-primary-bg:            $brand-primary !default;
575 | //** Success label background color
576 | $label-success-bg:            $brand-success !default;
577 | //** Info label background color
578 | $label-info-bg:               $brand-info !default;
579 | //** Warning label background color
580 | $label-warning-bg:            $brand-warning !default;
581 | //** Danger label background color
582 | $label-danger-bg:             $brand-danger !default;
583 | 
584 | //** Default label text color
585 | $label-color:                 $white !default;
586 | //** Default text color of a linked label
587 | $label-link-hover-color:      $white !default;
588 | 
589 | 
590 | //== Modals
591 | //
592 | //##
593 | 
594 | //** Padding applied to the modal body
595 | $modal-inner-padding:         15px !default;
596 | 
597 | //** Padding applied to the modal title
598 | $modal-title-padding:         15px !default;
599 | //** Modal title line-height
600 | $modal-title-line-height:     $line-height-base !default;
601 | 
602 | //** Background color of modal content area
603 | $modal-content-bg:                             $white !default;
604 | //** Modal content border color
605 | $modal-content-border-color:                   rgba(0,0,0,.2) !default;
606 | //** Modal content border color **for IE8**
607 | $modal-content-fallback-border-color:          #999 !default;
608 | 
609 | //** Modal backdrop background color
610 | $modal-backdrop-bg:           #000 !default;
611 | //** Modal backdrop opacity
612 | $modal-backdrop-opacity:      .5 !default;
613 | //** Modal header border color
614 | $modal-header-border-color:   #e5e5e5 !default;
615 | //** Modal footer border color
616 | $modal-footer-border-color:   $modal-header-border-color !default;
617 | 
618 | $modal-lg:                    900px !default;
619 | $modal-md:                    600px !default;
620 | $modal-sm:                    300px !default;
621 | 
622 | 
623 | //== Alerts
624 | //
625 | //## Define alert colors, border radius, and padding.
626 | 
627 | $alert-padding:               15px !default;
628 | $alert-border-radius:         $border-radius-base !default;
629 | $alert-link-font-weight:      bold !default;
630 | 
631 | $alert-success-bg:            $state-success-bg !default;
632 | $alert-success-text:          $state-success-text !default;
633 | $alert-success-border:        $state-success-border !default;
634 | 
635 | $alert-info-bg:               $state-info-bg !default;
636 | $alert-info-text:             $state-info-text !default;
637 | $alert-info-border:           $state-info-border !default;
638 | 
639 | $alert-warning-bg:            $state-warning-bg !default;
640 | $alert-warning-text:          $state-warning-text !default;
641 | $alert-warning-border:        $state-warning-border !default;
642 | 
643 | $alert-danger-bg:             $state-danger-bg !default;
644 | $alert-danger-text:           $state-danger-text !default;
645 | $alert-danger-border:         $state-danger-border !default;
646 | 
647 | 
648 | //== Progress bars
649 | //
650 | //##
651 | 
652 | //** Background color of the whole progress component
653 | $progress-bg:                 #f5f5f5 !default;
654 | //** Progress bar text color
655 | $progress-bar-color:          $white !default;
656 | //** Variable for setting rounded corners on progress bar.
657 | $progress-border-radius:      $border-radius-base !default;
658 | 
659 | //** Default progress bar color
660 | $progress-bar-bg:             $brand-primary !default;
661 | //** Success progress bar color
662 | $progress-bar-success-bg:     $brand-success !default;
663 | //** Warning progress bar color
664 | $progress-bar-warning-bg:     $brand-warning !default;
665 | //** Danger progress bar color
666 | $progress-bar-danger-bg:      $brand-danger !default;
667 | //** Info progress bar color
668 | $progress-bar-info-bg:        $brand-info !default;
669 | 
670 | 
671 | //== List group
672 | //
673 | //##
674 | 
675 | //** Background color on `.list-group-item`
676 | $list-group-bg:                 $white !default;
677 | //** `.list-group-item` border color
678 | $list-group-border:             #ddd !default;
679 | //** List group border radius
680 | $list-group-border-radius:      $border-radius-base !default;
681 | 
682 | //** Background color of single list items on hover
683 | $list-group-hover-bg:           #f5f5f5 !default;
684 | //** Text color of active list items
685 | $list-group-active-color:       $component-active-color !default;
686 | //** Background color of active list items
687 | $list-group-active-bg:          $component-active-bg !default;
688 | //** Border color of active list elements
689 | $list-group-active-border:      $list-group-active-bg !default;
690 | //** Text color for content within active list items
691 | $list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
692 | 
693 | //** Text color of disabled list items
694 | $list-group-disabled-color:      $gray-light !default;
695 | //** Background color of disabled list items
696 | $list-group-disabled-bg:         $gray-lighter !default;
697 | //** Text color for content within disabled list items
698 | $list-group-disabled-text-color: $list-group-disabled-color !default;
699 | 
700 | $list-group-link-color:         #555 !default;
701 | $list-group-link-hover-color:   $list-group-link-color !default;
702 | $list-group-link-heading-color: #333 !default;
703 | 
704 | 
705 | //== Panels
706 | //
707 | //##
708 | 
709 | $panel-bg:                    $white !default;
710 | $panel-body-padding:          15px !default;
711 | $panel-heading-padding:       10px 15px !default;
712 | $panel-footer-padding:        $panel-heading-padding !default;
713 | $panel-border-radius:         $border-radius-base !default;
714 | 
715 | //** Border color for elements within panels
716 | $panel-inner-border:          #ddd !default;
717 | $panel-footer-bg:             #f5f5f5 !default;
718 | 
719 | $panel-default-text:          $gray-dark !default;
720 | $panel-default-border:        #ddd !default;
721 | $panel-default-heading-bg:    #f5f5f5 !default;
722 | 
723 | $panel-primary-text:          $white !default;
724 | $panel-primary-border:        $brand-primary !default;
725 | $panel-primary-heading-bg:    $brand-primary !default;
726 | 
727 | $panel-success-text:          $state-success-text !default;
728 | $panel-success-border:        $state-success-border !default;
729 | $panel-success-heading-bg:    $state-success-bg !default;
730 | 
731 | $panel-info-text:             $state-info-text !default;
732 | $panel-info-border:           $state-info-border !default;
733 | $panel-info-heading-bg:       $state-info-bg !default;
734 | 
735 | $panel-warning-text:          $state-warning-text !default;
736 | $panel-warning-border:        $state-warning-border !default;
737 | $panel-warning-heading-bg:    $state-warning-bg !default;
738 | 
739 | $panel-danger-text:           $state-danger-text !default;
740 | $panel-danger-border:         $state-danger-border !default;
741 | $panel-danger-heading-bg:     $state-danger-bg !default;
742 | 
743 | 
744 | //== Thumbnails
745 | //
746 | //##
747 | 
748 | //** Padding around the thumbnail image
749 | $thumbnail-padding:           4px !default;
750 | //** Thumbnail background color
751 | $thumbnail-bg:                $body-bg !default;
752 | //** Thumbnail border color
753 | $thumbnail-border:            #ddd !default;
754 | //** Thumbnail border radius
755 | $thumbnail-border-radius:     $border-radius-base !default;
756 | 
757 | //** Custom text color for thumbnail captions
758 | $thumbnail-caption-color:     $text-color !default;
759 | //** Padding around the thumbnail caption
760 | $thumbnail-caption-padding:   9px !default;
761 | 
762 | 
763 | //== Wells
764 | //
765 | //##
766 | 
767 | $well-bg:                     #f5f5f5 !default;
768 | $well-border:                 darken($well-bg, 7%) !default;
769 | 
770 | 
771 | //== Badges
772 | //
773 | //##
774 | 
775 | $badge-color:                 $white !default;
776 | //** Linked badge text color on hover
777 | $badge-link-hover-color:      $white !default;
778 | $badge-bg:                    $gray-light !default;
779 | 
780 | //** Badge text color in active nav link
781 | $badge-active-color:          $link-color !default;
782 | //** Badge background color in active nav link
783 | $badge-active-bg:             $white !default;
784 | 
785 | $badge-font-weight:           bold !default;
786 | $badge-line-height:           1 !default;
787 | $badge-border-radius:         10px !default;
788 | 
789 | 
790 | //== Breadcrumbs
791 | //
792 | //##
793 | 
794 | $breadcrumb-padding-vertical:   8px !default;
795 | $breadcrumb-padding-horizontal: 15px !default;
796 | //** Breadcrumb background color
797 | $breadcrumb-bg:                 #f5f5f5 !default;
798 | //** Breadcrumb text color
799 | $breadcrumb-color:              #ccc !default;
800 | //** Text color of current page in the breadcrumb
801 | $breadcrumb-active-color:       $gray-light !default;
802 | //** Textual separator for between breadcrumb elements
803 | $breadcrumb-separator:          "/" !default;
804 | 
805 | 
806 | //== Carousel
807 | //
808 | //##
809 | 
810 | $carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
811 | 
812 | $carousel-control-color:                      $white !default;
813 | $carousel-control-width:                      15% !default;
814 | $carousel-control-opacity:                    .5 !default;
815 | $carousel-control-font-size:                  20px !default;
816 | 
817 | $carousel-indicator-active-bg:                $white !default;
818 | $carousel-indicator-border-color:             $white !default;
819 | 
820 | $carousel-caption-color:                      $white !default;
821 | 
822 | 
823 | //== Close
824 | //
825 | //##
826 | 
827 | $close-font-weight:           bold !default;
828 | $close-color:                 #000 !default;
829 | $close-text-shadow:           0 1px 0 $white !default;
830 | 
831 | 
832 | //== Code
833 | //
834 | //##
835 | 
836 | $code-color:                  #c7254e !default;
837 | $code-bg:                     #f9f2f4 !default;
838 | 
839 | $kbd-color:                   $white !default;
840 | $kbd-bg:                      #333 !default;
841 | 
842 | $pre-bg:                      #f5f5f5 !default;
843 | $pre-color:                   $gray-dark !default;
844 | $pre-border-color:            #ccc !default;
845 | $pre-scrollable-max-height:   340px !default;
846 | 
847 | 
848 | //== Type
849 | //
850 | //##
851 | 
852 | //** Horizontal offset for forms and lists.
853 | $component-offset-horizontal: 180px !default;
854 | //** Text muted color
855 | $text-muted:                  $gray-light !default;
856 | //** Abbreviations and acronyms border color
857 | $abbr-border-color:           $gray-light !default;
858 | //** Headings small color
859 | $headings-small-color:        $gray-light !default;
860 | //** Blockquote small color
861 | $blockquote-small-color:      $gray-light !default;
862 | //** Blockquote font size
863 | $blockquote-font-size:        ($font-size-base * 1.25) !default;
864 | //** Blockquote border color
865 | $blockquote-border-color:     $gray-lighter !default;
866 | //** Page header border color
867 | $page-header-border-color:    $gray-lighter !default;
868 | //** Width of horizontal description list titles
869 | $dl-horizontal-offset:        $component-offset-horizontal !default;
870 | //** Horizontal line color.
871 | $hr-border:                   $gray-lighter !default;
872 | 


--------------------------------------------------------------------------------
/sass/code_styles/_custom.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Custom Style
  3 |  */
  4 | 
  5 | 
  6 | .hljs-keyword,
  7 | .hljs-literal,
  8 | .hljs-change,
  9 | .hljs-winutils,
 10 | .hljs-flow,
 11 | .nginx .hljs-title,
 12 | .css .hljs-id,
 13 | .tex .hljs-special,
 14 | .css .hljs-tag,
 15 | .css .hljs-pseudo,
 16 | .hljs-attribute,
 17 | .hljs .hljs-constant,
 18 | .xml .hljs-attribute,
 19 | .xml .hljs-tag .hljs-value,
 20 | .hljs-code,
 21 | .hljs-class .hljs-title,
 22 | .hljs-header,
 23 | .hljs-regexp,
 24 | .hljs-doctype,
 25 | .hljs-link_url,
 26 | .hljs-tag .hljs-title,
 27 | .hljs-bullet,
 28 | .hljs-subst,
 29 | .hljs-emphasis,
 30 | .hljs-type,
 31 | .hljs-pragma,
 32 | .ruby .hljs-class .hljs-parent,
 33 | .hljs-built_in,
 34 | .django .hljs-template_tag,
 35 | .django .hljs-variable,
 36 | .smalltalk .hljs-class,
 37 | .hljs-javadoc,
 38 | .django .hljs-filter .hljs-argument,
 39 | .smalltalk .hljs-localvars,
 40 | .smalltalk .hljs-array,
 41 | .hljs-attr_selector,
 42 | .hljs-pseudo,
 43 | .hljs-addition,
 44 | .hljs-stream,
 45 | .hljs-envvar,
 46 | .apache .hljs-tag,
 47 | .apache .hljs-cbracket,
 48 | .tex .hljs-command,
 49 | .hljs-prompt,
 50 | .hljs-string,
 51 | .hljs-annotation,
 52 | .hljs-blockquote,
 53 | .hljs-horizontal_rule,
 54 | .hljs-decorator,
 55 | .hljs-pi,
 56 | .hljs-deletion,
 57 | .hljs-shebang,
 58 | .apache .hljs-sqbracket,
 59 | .tex .hljs-formula {
 60 |   color: $teal;
 61 | }
 62 | 
 63 | .hljs-hexcolor,
 64 | .hljs-preprocessor,
 65 | .hljs-value,
 66 | .hljs-number {
 67 | 	color: $purple;
 68 | }
 69 | 
 70 | .hljs-at_rule,
 71 | .hljs-tag,
 72 | .hljs-at_rule .hljs-keyword,
 73 | .hljs-class {
 74 | 	color: $white;
 75 | }
 76 | 
 77 | .hljs-comment {
 78 | 	color: darken($white, 55%);
 79 | }
 80 | 
 81 | .hljs-keyword,
 82 | .hljs-literal,
 83 | .css .hljs-id,
 84 | .hljs-phpdoc,
 85 | .hljs-dartdoc,
 86 | .hljs-title,
 87 | .hljs-header,
 88 | .hljs-type,
 89 | .vbscript .hljs-built_in,
 90 | .rsl .hljs-built_in,
 91 | .smalltalk .hljs-class,
 92 | .diff .hljs-header,
 93 | .hljs-chunk,
 94 | .hljs-winutils,
 95 | .bash .hljs-variable,
 96 | .apache .hljs-tag,
 97 | .tex .hljs-special,
 98 | .hljs-request,
 99 | .hljs-at_rule .hljs-keyword,
100 | .hljs-status {
101 |   font-weight: bold;
102 | }


--------------------------------------------------------------------------------
/sass/code_styles/_default.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | Original style from softwaremaniacs.org (c) Ivan Sagalaev 
  4 | 
  5 | */
  6 | 
  7 | .hljs {
  8 |   display: block;
  9 |   overflow-x: auto;
 10 |   padding: 0.5em;
 11 |   background: #f0f0f0;
 12 |   -webkit-text-size-adjust: none;
 13 | }
 14 | 
 15 | .hljs,
 16 | .hljs-subst,
 17 | .hljs-tag .hljs-title,
 18 | .nginx .hljs-title {
 19 |   color: black;
 20 | }
 21 | 
 22 | .hljs-string,
 23 | .hljs-title,
 24 | .hljs-constant,
 25 | .hljs-parent,
 26 | .hljs-tag .hljs-value,
 27 | .hljs-rules .hljs-value,
 28 | .hljs-preprocessor,
 29 | .hljs-pragma,
 30 | .haml .hljs-symbol,
 31 | .ruby .hljs-symbol,
 32 | .ruby .hljs-symbol .hljs-string,
 33 | .hljs-template_tag,
 34 | .django .hljs-variable,
 35 | .smalltalk .hljs-class,
 36 | .hljs-addition,
 37 | .hljs-flow,
 38 | .hljs-stream,
 39 | .bash .hljs-variable,
 40 | .apache .hljs-tag,
 41 | .apache .hljs-cbracket,
 42 | .tex .hljs-command,
 43 | .tex .hljs-special,
 44 | .erlang_repl .hljs-function_or_atom,
 45 | .asciidoc .hljs-header,
 46 | .markdown .hljs-header,
 47 | .coffeescript .hljs-attribute {
 48 |   color: #800;
 49 | }
 50 | 
 51 | .smartquote,
 52 | .hljs-comment,
 53 | .hljs-annotation,
 54 | .diff .hljs-header,
 55 | .hljs-chunk,
 56 | .asciidoc .hljs-blockquote,
 57 | .markdown .hljs-blockquote {
 58 |   color: #888;
 59 | }
 60 | 
 61 | .hljs-number,
 62 | .hljs-date,
 63 | .hljs-regexp,
 64 | .hljs-literal,
 65 | .hljs-hexcolor,
 66 | .smalltalk .hljs-symbol,
 67 | .smalltalk .hljs-char,
 68 | .go .hljs-constant,
 69 | .hljs-change,
 70 | .lasso .hljs-variable,
 71 | .makefile .hljs-variable,
 72 | .asciidoc .hljs-bullet,
 73 | .markdown .hljs-bullet,
 74 | .asciidoc .hljs-link_url,
 75 | .markdown .hljs-link_url {
 76 |   color: #080;
 77 | }
 78 | 
 79 | .hljs-label,
 80 | .hljs-javadoc,
 81 | .ruby .hljs-string,
 82 | .hljs-decorator,
 83 | .hljs-filter .hljs-argument,
 84 | .hljs-localvars,
 85 | .hljs-array,
 86 | .hljs-attr_selector,
 87 | .hljs-important,
 88 | .hljs-pseudo,
 89 | .hljs-pi,
 90 | .haml .hljs-bullet,
 91 | .hljs-doctype,
 92 | .hljs-deletion,
 93 | .hljs-envvar,
 94 | .hljs-shebang,
 95 | .apache .hljs-sqbracket,
 96 | .nginx .hljs-built_in,
 97 | .tex .hljs-formula,
 98 | .erlang_repl .hljs-reserved,
 99 | .hljs-prompt,
100 | .asciidoc .hljs-link_label,
101 | .markdown .hljs-link_label,
102 | .vhdl .hljs-attribute,
103 | .clojure .hljs-attribute,
104 | .asciidoc .hljs-attribute,
105 | .lasso .hljs-attribute,
106 | .coffeescript .hljs-property,
107 | .hljs-phony {
108 |   color: #88f;
109 | }
110 | 
111 | .hljs-keyword,
112 | .hljs-id,
113 | .hljs-title,
114 | .hljs-built_in,
115 | .css .hljs-tag,
116 | .hljs-javadoctag,
117 | .hljs-phpdoc,
118 | .hljs-dartdoc,
119 | .hljs-yardoctag,
120 | .smalltalk .hljs-class,
121 | .hljs-winutils,
122 | .bash .hljs-variable,
123 | .apache .hljs-tag,
124 | .hljs-type,
125 | .hljs-typename,
126 | .tex .hljs-command,
127 | .asciidoc .hljs-strong,
128 | .markdown .hljs-strong,
129 | .hljs-request,
130 | .hljs-status {
131 |   font-weight: bold;
132 | }
133 | 
134 | .asciidoc .hljs-emphasis,
135 | .markdown .hljs-emphasis {
136 |   font-style: italic;
137 | }
138 | 
139 | .nginx .hljs-built_in {
140 |   font-weight: normal;
141 | }
142 | 
143 | .coffeescript .javascript,
144 | .javascript .xml,
145 | .lasso .markup,
146 | .tex .hljs-formula,
147 | .xml .javascript,
148 | .xml .vbscript,
149 | .xml .css,
150 | .xml .hljs-cdata {
151 |   opacity: 0.5;
152 | }
153 | 


--------------------------------------------------------------------------------
/sass/code_styles/_github.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | github.com style (c) Vasily Polovnyov 
  4 | 
  5 | */
  6 | 
  7 | .hljs {
  8 |   display: block;
  9 |   overflow-x: auto;
 10 |   padding: 0.5em;
 11 |   color: #333;
 12 |   background: #f8f8f8;
 13 |   -webkit-text-size-adjust: none;
 14 | }
 15 | 
 16 | .hljs-comment,
 17 | .diff .hljs-header,
 18 | .hljs-javadoc {
 19 |   color: #998;
 20 |   font-style: italic;
 21 | }
 22 | 
 23 | .hljs-keyword,
 24 | .css .rule .hljs-keyword,
 25 | .hljs-winutils,
 26 | .nginx .hljs-title,
 27 | .hljs-subst,
 28 | .hljs-request,
 29 | .hljs-status {
 30 |   color: #333;
 31 |   font-weight: bold;
 32 | }
 33 | 
 34 | .hljs-number,
 35 | .hljs-hexcolor,
 36 | .ruby .hljs-constant {
 37 |   color: #008080;
 38 | }
 39 | 
 40 | .hljs-string,
 41 | .hljs-tag .hljs-value,
 42 | .hljs-phpdoc,
 43 | .hljs-dartdoc,
 44 | .tex .hljs-formula {
 45 |   color: #d14;
 46 | }
 47 | 
 48 | .hljs-title,
 49 | .hljs-id,
 50 | .scss .hljs-preprocessor {
 51 |   color: #900;
 52 |   font-weight: bold;
 53 | }
 54 | 
 55 | .hljs-list .hljs-keyword,
 56 | .hljs-subst {
 57 |   font-weight: normal;
 58 | }
 59 | 
 60 | .hljs-class .hljs-title,
 61 | .hljs-type,
 62 | .vhdl .hljs-literal,
 63 | .tex .hljs-command {
 64 |   color: #458;
 65 |   font-weight: bold;
 66 | }
 67 | 
 68 | .hljs-tag,
 69 | .hljs-tag .hljs-title,
 70 | .hljs-rules .hljs-property,
 71 | .django .hljs-tag .hljs-keyword {
 72 |   color: #000080;
 73 |   font-weight: normal;
 74 | }
 75 | 
 76 | .hljs-attribute,
 77 | .hljs-variable,
 78 | .lisp .hljs-body {
 79 |   color: #008080;
 80 | }
 81 | 
 82 | .hljs-regexp {
 83 |   color: #009926;
 84 | }
 85 | 
 86 | .hljs-symbol,
 87 | .ruby .hljs-symbol .hljs-string,
 88 | .lisp .hljs-keyword,
 89 | .clojure .hljs-keyword,
 90 | .scheme .hljs-keyword,
 91 | .tex .hljs-special,
 92 | .hljs-prompt {
 93 |   color: #990073;
 94 | }
 95 | 
 96 | .hljs-built_in {
 97 |   color: #0086b3;
 98 | }
 99 | 
100 | .hljs-preprocessor,
101 | .hljs-pragma,
102 | .hljs-pi,
103 | .hljs-doctype,
104 | .hljs-shebang,
105 | .hljs-cdata {
106 |   color: #999;
107 |   font-weight: bold;
108 | }
109 | 
110 | .hljs-deletion {
111 |   background: #fdd;
112 | }
113 | 
114 | .hljs-addition {
115 |   background: #dfd;
116 | }
117 | 
118 | .diff .hljs-change {
119 |   background: #0086b3;
120 | }
121 | 
122 | .hljs-chunk {
123 |   color: #aaa;
124 | }
125 | 


--------------------------------------------------------------------------------
/sass/code_styles/_monokai.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | Monokai style - ported by Luigi Maselli - http://grigio.org
  3 | */
  4 | 
  5 | .hljs {
  6 |   display: block;
  7 |   overflow-x: auto;
  8 |   padding: 0.5em;
  9 |   background: #272822;
 10 |   -webkit-text-size-adjust: none;
 11 | }
 12 | 
 13 | .hljs-tag,
 14 | .hljs-tag .hljs-title,
 15 | .hljs-keyword,
 16 | .hljs-literal,
 17 | .hljs-strong,
 18 | .hljs-change,
 19 | .hljs-winutils,
 20 | .hljs-flow,
 21 | .nginx .hljs-title,
 22 | .tex .hljs-special {
 23 |   color: #f92672;
 24 | }
 25 | 
 26 | .hljs {
 27 |   color: #ddd;
 28 | }
 29 | 
 30 | .hljs .hljs-constant,
 31 | .asciidoc .hljs-code,
 32 | .markdown .hljs-code {
 33 | 	color: #66d9ef;
 34 | }
 35 | 
 36 | .hljs-code,
 37 | .hljs-class .hljs-title,
 38 | .hljs-header {
 39 | 	color: white;
 40 | }
 41 | 
 42 | .hljs-link_label,
 43 | .hljs-attribute,
 44 | .hljs-symbol,
 45 | .hljs-symbol .hljs-string,
 46 | .hljs-value,
 47 | .hljs-regexp {
 48 | 	color: #bf79db;
 49 | }
 50 | 
 51 | .hljs-link_url,
 52 | .hljs-tag .hljs-value,
 53 | .hljs-string,
 54 | .hljs-bullet,
 55 | .hljs-subst,
 56 | .hljs-title,
 57 | .hljs-emphasis,
 58 | .hljs-type,
 59 | .hljs-preprocessor,
 60 | .hljs-pragma,
 61 | .ruby .hljs-class .hljs-parent,
 62 | .hljs-built_in,
 63 | .django .hljs-template_tag,
 64 | .django .hljs-variable,
 65 | .smalltalk .hljs-class,
 66 | .hljs-javadoc,
 67 | .django .hljs-filter .hljs-argument,
 68 | .smalltalk .hljs-localvars,
 69 | .smalltalk .hljs-array,
 70 | .hljs-attr_selector,
 71 | .hljs-pseudo,
 72 | .hljs-addition,
 73 | .hljs-stream,
 74 | .hljs-envvar,
 75 | .apache .hljs-tag,
 76 | .apache .hljs-cbracket,
 77 | .tex .hljs-command,
 78 | .hljs-prompt {
 79 |   color: #a6e22e;
 80 | }
 81 | 
 82 | .hljs-comment,
 83 | .hljs-annotation,
 84 | .smartquote,
 85 | .hljs-blockquote,
 86 | .hljs-horizontal_rule,
 87 | .hljs-decorator,
 88 | .hljs-pi,
 89 | .hljs-doctype,
 90 | .hljs-deletion,
 91 | .hljs-shebang,
 92 | .apache .hljs-sqbracket,
 93 | .tex .hljs-formula {
 94 |   color: #75715e;
 95 | }
 96 | 
 97 | .hljs-keyword,
 98 | .hljs-literal,
 99 | .css .hljs-id,
100 | .hljs-phpdoc,
101 | .hljs-dartdoc,
102 | .hljs-title,
103 | .hljs-header,
104 | .hljs-type,
105 | .vbscript .hljs-built_in,
106 | .rsl .hljs-built_in,
107 | .smalltalk .hljs-class,
108 | .diff .hljs-header,
109 | .hljs-chunk,
110 | .hljs-winutils,
111 | .bash .hljs-variable,
112 | .apache .hljs-tag,
113 | .tex .hljs-special,
114 | .hljs-request,
115 | .hljs-status {
116 |   font-weight: bold;
117 | }
118 | 
119 | .coffeescript .javascript,
120 | .javascript .xml,
121 | .tex .hljs-formula,
122 | .xml .javascript,
123 | .xml .vbscript,
124 | .xml .css,
125 | .xml .hljs-cdata {
126 |   opacity: 0.5;
127 | }
128 | 


--------------------------------------------------------------------------------
/sass/code_styles/_monokai_sublime.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
  4 | 
  5 | */
  6 | 
  7 | .hljs {
  8 |   display: block;
  9 |   overflow-x: auto;
 10 |   padding: 0.5em;
 11 |   background: #23241f;
 12 |   -webkit-text-size-adjust: none;
 13 | }
 14 | 
 15 | .hljs,
 16 | .hljs-tag,
 17 | .css .hljs-rules,
 18 | .css .hljs-value,
 19 | .aspectj .hljs-function,
 20 | .css .hljs-function
 21 | .hljs-preprocessor,
 22 | .hljs-pragma {
 23 |   color: #f8f8f2;
 24 | }
 25 | 
 26 | .hljs-strongemphasis,
 27 | .hljs-strong,
 28 | .hljs-emphasis {
 29 |   color: #a8a8a2;
 30 | }
 31 | 
 32 | .hljs-bullet,
 33 | .hljs-blockquote,
 34 | .hljs-horizontal_rule,
 35 | .hljs-number,
 36 | .hljs-regexp,
 37 | .alias .hljs-keyword,
 38 | .hljs-literal,
 39 | .hljs-hexcolor {
 40 |   color: #ae81ff;
 41 | }
 42 | 
 43 | .hljs-tag .hljs-value,
 44 | .hljs-code,
 45 | .hljs-title,
 46 | .css .hljs-class,
 47 | .hljs-class .hljs-title:last-child {
 48 |   color: #a6e22e;
 49 | }
 50 | 
 51 | .hljs-link_url {
 52 |   font-size: 80%;
 53 | }
 54 | 
 55 | .hljs-strong,
 56 | .hljs-strongemphasis {
 57 |   font-weight: bold;
 58 | }
 59 | 
 60 | .hljs-emphasis,
 61 | .hljs-strongemphasis,
 62 | .hljs-class .hljs-title:last-child,
 63 | .hljs-typename {
 64 |   font-style: italic;
 65 | }
 66 | 
 67 | .hljs-keyword,
 68 | .ruby .hljs-class .hljs-keyword:first-child,
 69 | .ruby .hljs-function .hljs-keyword,
 70 | .hljs-function,
 71 | .hljs-change,
 72 | .hljs-winutils,
 73 | .hljs-flow,
 74 | .nginx .hljs-title,
 75 | .tex .hljs-special,
 76 | .hljs-header,
 77 | .hljs-attribute,
 78 | .hljs-symbol,
 79 | .hljs-symbol .hljs-string,
 80 | .hljs-tag .hljs-title,
 81 | .hljs-value,
 82 | .alias .hljs-keyword:first-child,
 83 | .css .hljs-tag,
 84 | .css .unit,
 85 | .css .hljs-important {
 86 |   color: #f92672;
 87 | }
 88 | 
 89 | .hljs-function .hljs-keyword,
 90 | .hljs-class .hljs-keyword:first-child,
 91 | .hljs-aspect .hljs-keyword:first-child,
 92 | .hljs-constant,
 93 | .hljs-typename,
 94 | .css .hljs-attribute {
 95 |   color: #66d9ef;
 96 | }
 97 | 
 98 | .hljs-variable,
 99 | .hljs-params,
100 | .hljs-class .hljs-title,
101 | .hljs-aspect .hljs-title {
102 |   color: #f8f8f2;
103 | }
104 | 
105 | .hljs-string,
106 | .css .hljs-id,
107 | .hljs-subst,
108 | .hljs-type,
109 | .ruby .hljs-class .hljs-parent,
110 | .hljs-built_in,
111 | .django .hljs-template_tag,
112 | .django .hljs-variable,
113 | .smalltalk .hljs-class,
114 | .django .hljs-filter .hljs-argument,
115 | .smalltalk .hljs-localvars,
116 | .smalltalk .hljs-array,
117 | .hljs-attr_selector,
118 | .hljs-pseudo,
119 | .hljs-addition,
120 | .hljs-stream,
121 | .hljs-envvar,
122 | .apache .hljs-tag,
123 | .apache .hljs-cbracket,
124 | .tex .hljs-command,
125 | .hljs-prompt,
126 | .hljs-link_label,
127 | .hljs-link_url {
128 |   color: #e6db74;
129 | }
130 | 
131 | .hljs-comment,
132 | .hljs-javadoc,
133 | .hljs-annotation,
134 | .hljs-decorator,
135 | .hljs-pi,
136 | .hljs-doctype,
137 | .hljs-deletion,
138 | .hljs-shebang,
139 | .apache .hljs-sqbracket,
140 | .tex .hljs-formula {
141 |   color: #75715e;
142 | }
143 | 
144 | .coffeescript .javascript,
145 | .javascript .xml,
146 | .tex .hljs-formula,
147 | .xml .javascript,
148 | .xml .vbscript,
149 | .xml .css,
150 | .xml .hljs-cdata,
151 | .xml .php,
152 | .php .xml {
153 |   opacity: 0.5;
154 | }
155 | 


--------------------------------------------------------------------------------
/sass/code_styles/_obsidian-mod.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Obsidian style
  3 |  * ported by Alexander Marenin (http://github.com/ioncreature)
  4 |  */
  5 | 
  6 | .hljs {
  7 | }
  8 | 
  9 | .hljs-keyword,
 10 | .hljs-literal,
 11 | .hljs-change,
 12 | .hljs-winutils,
 13 | .hljs-flow,
 14 | .nginx .hljs-title,
 15 | .css .hljs-id,
 16 | .tex .hljs-special {
 17 |   color: #15f2bf;
 18 | }
 19 | 
 20 | .hljs-number {
 21 |   color: #e19fff;
 22 | }
 23 | 
 24 | .hljs {
 25 |   color: #e0e2e4;
 26 | }
 27 | 
 28 | .css .hljs-tag,
 29 | .css .hljs-pseudo {
 30 |   color: #d0d2b5;
 31 | }
 32 | 
 33 | .hljs-attribute,
 34 | .hljs .hljs-constant {
 35 |   color: #6cbfdc;
 36 | }
 37 | 
 38 | .xml .hljs-attribute {
 39 |   color: #b3b689;
 40 | }
 41 | 
 42 | .xml .hljs-tag .hljs-value {
 43 |   color: #e8e2b7;
 44 | }
 45 | 
 46 | .hljs-code,
 47 | .hljs-class .hljs-title,
 48 | .hljs-header {
 49 |   color: white;
 50 | }
 51 | 
 52 | .hljs-class,
 53 | .hljs-hexcolor {
 54 |   color: #adf2df;
 55 | }
 56 | 
 57 | .hljs-regexp {
 58 |   color: #68ccd3;
 59 | }
 60 | 
 61 | .hljs-at_rule,
 62 | .hljs-at_rule .hljs-keyword {
 63 |   color: #d69ee6;
 64 | }
 65 | 
 66 | .hljs-doctype {
 67 |   color: #557182;
 68 | }
 69 | 
 70 | .hljs-link_url,
 71 | .hljs-tag,
 72 | .hljs-tag .hljs-title,
 73 | .hljs-bullet,
 74 | .hljs-subst,
 75 | .hljs-emphasis,
 76 | .hljs-type,
 77 | .hljs-preprocessor,
 78 | .hljs-pragma,
 79 | .ruby .hljs-class .hljs-parent,
 80 | .hljs-built_in,
 81 | .django .hljs-template_tag,
 82 | .django .hljs-variable,
 83 | .smalltalk .hljs-class,
 84 | .hljs-javadoc,
 85 | .django .hljs-filter .hljs-argument,
 86 | .smalltalk .hljs-localvars,
 87 | .smalltalk .hljs-array,
 88 | .hljs-attr_selector,
 89 | .hljs-pseudo,
 90 | .hljs-addition,
 91 | .hljs-stream,
 92 | .hljs-envvar,
 93 | .apache .hljs-tag,
 94 | .apache .hljs-cbracket,
 95 | .tex .hljs-command,
 96 | .hljs-prompt {
 97 |   color: #b6f3e1;
 98 | }
 99 | 
100 | .hljs-string {
101 |   color: #619aec;
102 | }
103 | 
104 | .hljs-comment,
105 | .hljs-annotation,
106 | .hljs-blockquote,
107 | .hljs-horizontal_rule,
108 | .hljs-decorator,
109 | .hljs-pi,
110 | .hljs-deletion,
111 | .hljs-shebang,
112 | .apache .hljs-sqbracket,
113 | .tex .hljs-formula {
114 |   color: #818e96;
115 | }
116 | 
117 | .hljs-keyword,
118 | .hljs-literal,
119 | .css .hljs-id,
120 | .hljs-phpdoc,
121 | .hljs-dartdoc,
122 | .hljs-title,
123 | .hljs-header,
124 | .hljs-type,
125 | .vbscript .hljs-built_in,
126 | .rsl .hljs-built_in,
127 | .smalltalk .hljs-class,
128 | .diff .hljs-header,
129 | .hljs-chunk,
130 | .hljs-winutils,
131 | .bash .hljs-variable,
132 | .apache .hljs-tag,
133 | .tex .hljs-special,
134 | .hljs-request,
135 | .hljs-at_rule .hljs-keyword,
136 | .hljs-status {
137 |   font-weight: bold;
138 | }
139 | 
140 | .coffeescript .javascript,
141 | .javascript .xml,
142 | .tex .hljs-formula,
143 | .xml .javascript,
144 | .xml .vbscript,
145 | .xml .css,
146 | .xml .hljs-cdata {
147 |   opacity: 0.5;
148 | }
149 | 


--------------------------------------------------------------------------------
/sass/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kjbrum/juice/25e6d529b1c00d6a3523ad62cd59b035c3f16929/sass/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/sass/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kjbrum/juice/25e6d529b1c00d6a3523ad62cd59b035c3f16929/sass/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/sass/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kjbrum/juice/25e6d529b1c00d6a3523ad62cd59b035c3f16929/sass/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/sass/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kjbrum/juice/25e6d529b1c00d6a3523ad62cd59b035c3f16929/sass/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/sass/style.scss:
--------------------------------------------------------------------------------
  1 | // Juice
  2 | @import "../dist/juice";
  3 | 
  4 | // Partials
  5 | @import "colors";
  6 | @import "fonts";
  7 | @import "csshake";
  8 | 
  9 | // Twitter Bootstrap
 10 | @import "variables";
 11 | @import "bootstrap";
 12 | 
 13 | // Font Awesome
 14 | @import "font-awesome";
 15 | 
 16 | 
 17 | ///////////////////////////////////
 18 | // General
 19 | ///////////////////////////////////
 20 | *,
 21 | *:before,
 22 | *:after {
 23 | 	transition: 0.3s ease-out;
 24 | }
 25 | 
 26 | b, strong,
 27 | i, em,
 28 | span {
 29 | 	transition: 0 !important;
 30 | 	&:before,
 31 | 	&:after {
 32 | 		transition: 0 !important;
 33 | 	}
 34 | }
 35 | 
 36 | html,
 37 | html a {
 38 |   -webkit-font-smoothing: antialiased;
 39 |   text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
 40 | }
 41 | 
 42 | html {
 43 | 	min-width: $breakpoint-xxsmall-default;
 44 | }
 45 | 
 46 | body {
 47 | 	position: relative;
 48 | }
 49 | 
 50 | a {
 51 | 	@include hoverer(color, $dark-blue, $purple);
 52 | }
 53 | 
 54 | hr {
 55 | 	border-color: #cccccc;
 56 | }
 57 | 
 58 | h1,h2,h3,
 59 | h4,h5,h6 {
 60 | 	margin: 0;
 61 | }
 62 | 
 63 | p {
 64 | 	text-align: justify;
 65 | }
 66 | 
 67 | 
 68 | ///////////////////////////////////
 69 | // Header
 70 | ///////////////////////////////////
 71 | .navbar {
 72 | 	border: 0;
 73 | 	background-color: transparent;
 74 | 	.container-fluid {
 75 | 		background-color: $dark-blue;
 76 | 	}
 77 | }
 78 | .navbar-header {
 79 | 	position: relative;
 80 | }
 81 | .navbar-collapse {
 82 | 	box-shadow: none;
 83 | }
 84 | .navbar-toggle {
 85 | 	@include absolute(50%, 0);
 86 | 	transform: translateY(-50%);
 87 | 	.icon-bar {
 88 | 		background-color: $teal !important;
 89 | 	}
 90 | 	&.collapsed .icon-bar {
 91 | 		background-color: $white !important;
 92 | 	}
 93 | }
 94 | .navbar-brand {
 95 | 	font-family: $raleway;
 96 | 	font-size: 3rem;
 97 | 	line-height: 1;
 98 | 	opacity: 0;
 99 | 	&.visible {
100 | 		opacity: 1;
101 | 	}
102 | }
103 | #main-navigation {
104 | 	.navbar-nav {
105 | 		float: none;
106 | 		text-align: center;
107 | 		margin: 0;
108 | 		li {
109 | 			float: none;
110 | 			display: inline-block;
111 | 			a:focus {
112 | 				color: $white;
113 | 			}
114 | 			&.active a:focus {
115 | 				color: $dark-blue;
116 | 			}
117 | 		}
118 | 	}
119 | }
120 | .navbar-default .navbar-nav > .active > a,
121 | .navbar-default .navbar-nav > .active > a:hover,
122 | .navbar-default .navbar-nav > .active > a:focus {
123 | 	background: $teal;
124 | 	color: $dark-blue;
125 | }
126 | 
127 | .progressbar {
128 | 	float: left;
129 | 	// background: $teal;
130 | 	background: tint($dark-blue,10%);
131 | 	@include coverer;
132 | }
133 | 
134 | @keyframes fadeUp {
135 | 	from {
136 | 		transform: translateY(40px);
137 | 		opacity: 0;
138 | 	}
139 | 	to {
140 | 		transform: translateY(0);
141 | 		opacity: 1;
142 | 	}
143 | }
144 | 
145 | .hero {
146 | 	position: relative;
147 | 	text-align: center;
148 | 	background: $dark-blue;
149 | 	padding: 80px 0 40px;
150 | 	border-bottom: 5px solid $teal;
151 | 	h1,
152 | 	h2 {
153 | 		font-weight: 200;
154 | 	}
155 | 	h1 {
156 | 		color: $purple;
157 | 		font-size: 11rem;
158 | 		animation: fadeUp 1.5s;
159 | 	}
160 | 	h2 {
161 | 		opacity: 0;
162 | 		color: $white;
163 | 		animation: fadeUp 1.5s 0.25s forwards;
164 | 	}
165 | }
166 | 
167 | 
168 | ///////////////////////////////////
169 | // Overview
170 | ///////////////////////////////////
171 | .overview-links {
172 | 	margin-top: 20px;
173 | 	text-align: center;
174 | 	ul {
175 | 		list-style: none;
176 | 		margin: 5px 0 15px 0;
177 | 		padding: 0;
178 | 		li {
179 | 			display: inline-block;
180 | 			padding: 8px 3px;
181 | 			a {
182 | 				color: $white;
183 | 				@include hoverer(background, $dark-blue, $purple);
184 | 				padding: 5px 10px;
185 | 			}
186 | 			&:before {
187 | 				content: '';
188 | 				@include size(5px);
189 | 				background: $dark-blue;
190 | 			}
191 | 		}
192 | 	}
193 | 	h4 {
194 | 		display: inline-block;
195 | 		border-bottom: 1px solid $dark-blue;
196 | 	}
197 | 	[class^="col-xs-"] {
198 | 		margin-bottom: 20px;
199 | 	}
200 | }
201 | 
202 | 
203 | ///////////////////////////////////
204 | // Main Content
205 | ///////////////////////////////////
206 | section {
207 | 	margin-top: 100px;
208 | 	padding-top: 40px;
209 | }
210 | 
211 | #about,
212 | #overview {
213 | 	margin-top: 0;
214 | }
215 | 
216 | .row {
217 | 	margin: 0 -10px;
218 | }
219 | 
220 | article {
221 | 	float: none;
222 | 	width: 100%;
223 | 	margin: 0 auto;
224 | }
225 | 
226 | .section-heading {
227 | 	padding: 40px 0;
228 | 	text-align: center;
229 | 	background: $teal;
230 | 	h3 {
231 | 		letter-spacing: 2px;
232 | 		color: $dark-blue;
233 | 	}
234 | }
235 | 
236 | article:not(.section-heading) {
237 | 	position: relative;
238 | 	h3,h4 {
239 | 		margin-bottom: 10px;
240 | 	}
241 | 	h3 {
242 | 		display: inline-block;
243 | 		margin-right: 15px;
244 | 		@include bp(small) {
245 | 			font-size: 2.1rem;
246 | 		}
247 | 	}
248 | 	.article-header {
249 | 		padding-top: 70px;
250 | 	}
251 | 	.show-source {
252 | 		display: inline-block;
253 | 		outline: none;
254 | 		cursor: pointer;
255 | 		font-size: 2.5rem;
256 | 		@include bp(small) {
257 | 			font-size: 2rem;
258 | 		}
259 | 	}
260 | 	.description {
261 | 		font-style: italic;
262 | 	}
263 | }
264 | 
265 | .contain {
266 | 	width: 100%;
267 | 	max-width: 50em;
268 | 	margin: 0 auto;
269 | 	padding: 0 10px;
270 | }
271 | 
272 | .popover {
273 | 	left: 0 !important;
274 | 	width: 100vw;
275 | 	max-width: 100vw;
276 | 	padding: 0;
277 | 	border: none;
278 | 	border-radius: 0;
279 | 	&.bottom > .arrow {
280 | 		display: none;
281 | 	}
282 | }
283 | 
284 | .popover-content {
285 | 	padding: 0;
286 | 	pre {
287 | 		margin-bottom: 0;
288 | 	}
289 | 	code {
290 | 		max-width: none;
291 | 		padding: 30px;
292 | 		@include bp(max, rem-calc(800)) {
293 | 			padding: 30px 10px;
294 | 		}
295 | 	}
296 | }
297 | 
298 | ///////////////////////////////////
299 | // Setup
300 | ///////////////////////////////////
301 | .download-repo {
302 | 	border: 1px solid $dark-blue;
303 | 	color: $dark-blue;
304 | 	padding: 10px 15px;
305 | 	&:hover {
306 | 		color: $purple;
307 | 		border-color: $purple;
308 | 	}
309 | }
310 | 
311 | ///////////////////////////////////
312 | // Code Styling
313 | ///////////////////////////////////
314 | // @import "code_styles/obsidian-mod";
315 | @import "code_styles/custom";
316 | 
317 | pre {
318 |   padding: 0 !important;
319 |   background: #282828;
320 |   border: none;
321 |   border-radius: 0;
322 | 	* {
323 | 		transition: 0 !important;
324 | 	}
325 | 	code {
326 | 	  display: block;
327 | 	  overflow-x: auto;
328 | 	  color: $white;
329 | 	  font-size: 16px;
330 | 	  max-width: 50em;
331 | 	  margin: 0 auto;
332 | 	  padding: 30px 10px;
333 | 	  background: transparent;
334 | 	  -webkit-text-size-adjust: none;
335 | 	  @include bp(max, 50em) {
336 | 	    font-size: 1.2rem !important;
337 | 	  }
338 | 	}
339 | }
340 | 
341 | ///////////////////////////////////
342 | // Footer
343 | ///////////////////////////////////
344 | .top {
345 | 	@include fixed(null,null,-30px,10px);
346 | 	@include size(30px, 30px);
347 | 	background: $dark-blue;
348 | 	line-height: 1;
349 | 	opacity: 0;
350 | 	border-radius: 5px;
351 | 	@include triangle(up,5px,$white) {
352 | 		@include centerer;
353 | 		transform: translate(-50%, -80%);
354 | 	}
355 | 	&.visible {
356 | 		bottom: 10px;
357 | 		opacity: 1;
358 | 	}
359 | 	&:hover {
360 | 		background: $purple;
361 | 	}
362 | }
363 | 
364 | @keyframes pulse {
365 | 	from {
366 | 		transform: scale(1);
367 | 	}
368 | 	to {
369 | 		transform: scale(1.4);
370 | 	}
371 | }
372 | footer {
373 | 	font-size: 1.4rem;
374 | 	background: $dark-blue;
375 | 	margin-top: 40px;
376 |   padding: 20px 0;
377 |   color: $white;
378 |   .fa-heart {
379 |   	padding: 0 4px;
380 |   	color: #ff5555;
381 |   	// animation: pulse 1s ease-in-out infinite alternate;
382 |   }
383 |   a {
384 |   	color: $white;
385 |   }
386 |   p {
387 | 	  text-align: center;
388 |   	margin: 0;
389 |   }
390 | }


--------------------------------------------------------------------------------