├── .gitignore ├── .npmignore ├── .npmrc ├── README.md ├── build └── sass │ ├── _import.scss │ ├── basic │ ├── _animation.scss │ ├── _arrow.scss │ ├── _background.scss │ ├── _border.scss │ ├── _breakpoint.scss │ ├── _colour.scss │ ├── _display.scss │ ├── _drop-shadow.scss │ ├── _global.scss │ ├── _gradient.scss │ ├── _input-types.scss │ ├── _interaction.scss │ ├── _ios.scss │ ├── _layout.scss │ ├── _list.scss │ ├── _responsive-layout.scss │ ├── _size.scss │ ├── _spacing.scss │ ├── _text.scss │ └── _transform.scss │ ├── css │ ├── _background.scss │ ├── _display.scss │ ├── _execute.scss │ ├── _global.scss │ ├── _layout.scss │ ├── _position.scss │ ├── _responsive-layout.scss │ ├── _sizing.scss │ ├── _spacing.scss │ └── _text.scss │ ├── development │ ├── _function.scss │ └── _mixin.scss │ └── propel.scss ├── css ├── propel.min.css └── propel.min.css.map ├── import.scss ├── package-lock.json ├── package.json └── publish.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore docs files 2 | _gh_pages 3 | _site 4 | .ruby-version 5 | 6 | # Numerous always-ignore extensions 7 | *.diff 8 | *.err 9 | *.orig 10 | *.log 11 | *.rej 12 | *.swo 13 | *.swp 14 | *.zip 15 | *.vi 16 | *~ 17 | 18 | # OS or Editor folders 19 | .DS_Store 20 | ._* 21 | Thumbs.db 22 | .cache 23 | .project 24 | .settings 25 | .tmproj 26 | *.esproj 27 | nbproject 28 | *.sublime-project 29 | *.sublime-workspace 30 | .idea 31 | 32 | # Komodo 33 | *.komodoproject 34 | .komodotools 35 | 36 | # grunt-html-validation 37 | validation-status.json 38 | validation-report.json 39 | 40 | # Folders to ignore 41 | node_modules 42 | bower_components 43 | .sass-cache 44 | 45 | # Files to ignore 46 | test.html 47 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | // Files to ignore 2 | index.html 3 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | //registry.npmjs.org/:_authToken=${NPM_TOKEN_ROCKET} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NO LONGER SUPPORTED 2 | 3 | # Propel 4 | A lightweight SASS mixin library and responsive CSS layout engine. 5 | 6 | ## Table of Contents 7 | 8 | * [Getting Started](#getting-started) 9 | * [SASS Implementation](#sass-implementation) 10 | * [Variables](#variables) 11 | * [Animation](#animation) 12 | * [Arrow](#arrow) 13 | * [Background](#background) 14 | * [Background Images](#background-images) 15 | * [Borders](#borders) 16 | * [Border Radius](#border-radius) 17 | * [Border Shades](#border-shades) 18 | * [Display](#display) 19 | * [Drop Shadow](#drop-shadow) 20 | * [Global Setup](#global-setup) 21 | * [Gradient](#gradient) 22 | * [Interaction](#interaction) 23 | * [iOS](#ios) 24 | * [Layout](#layout) 25 | * [Layout Flex](#layout-flex) 26 | * [Layout Floats](#layout-floats) 27 | * [Layout Responsive](#layout-responsive) 28 | * [List](#list) 29 | * [Position](#position) 30 | * [Size](#size) 31 | * [Spacing Margins](#spacing-margins) 32 | * [Spacing Padding](#spacing-padding) 33 | * [Spacing Remove](#spacing-remove) 34 | * [Text](#text-1) 35 | * [Transform](#transform) 36 | * [CSS Implementation](#css-implementation) 37 | * [Background](#background-1) 38 | * [Display](#display-1) 39 | * [Layout](#layout-1) 40 | * [Layout Responsive](#layout-responsive-1) 41 | * [Position](#position-1) 42 | * [Sizing](#sizing) 43 | * [Spacing](#spacing) 44 | * [Text](#text-2) 45 | * [Blueplate Deprecated](#blueplate-deprecated) 46 | 47 | ## Getting Started 48 | You can either download a copy of the [source files](https://github.com/chrishumboldt/Rocket-Propel/archive/master.zip) or install via NPM. 49 | 50 | ``` 51 | npm install rocket-propel 52 | ``` 53 | 54 | ## SASS Implementation 55 | Start by importing the necessary file into your own SASS file and include the required mixins. 56 | 57 | **SASS** 58 | ```scss 59 | @import "rocket-propel/build/sass/import"; 60 | 61 | .example { 62 | @include row(); 63 | 64 | .left, .middle, .right { 65 | @include span(12); // 100% width 66 | } 67 | @include breakpoint($bpLarge) { 68 | .left { 69 | @include span-new(6); // 50% width 70 | } 71 | .middle { 72 | @include span-new(4); // 33.33% width 73 | } 74 | .right { 75 | @include span-new(2); // 16.66% width 76 | } 77 | } 78 | } 79 | ``` 80 | 81 | **HTML** 82 | ```html 83 |
84 |
85 |
86 |
87 |
88 | ``` 89 | 90 | #### Browser Prefixes 91 | Propel will apply all the necessary browser prefixes where needed but no longer supports the **-o-** prefix for older versions of Opera. Opera now uses the Blink engine from Chromium (Read More). 92 | 93 | Find the other available mixins below: 94 | 95 | #### Variables 96 | Propel comes pre-packaged with a host of SASS variables. They are all listed below. 97 | 98 | Variable | Default 99 | ---- | ---- 100 | `$columnLimit` | 12 101 | `$fontFamily` | 'Open Sans', Helvetica, Arial, sans-serif 102 | `$limitWidth` | 68.750em 103 | 104 | ##### Breakpoints 105 | Variable | Value | Evaluates To 106 | ---- | ---- | ---- 107 | `$bpSmall` | 21.875em | 350px 108 | `$bpMedium` | 46.875em | 700px 109 | `$bpLarge` | 68.750em | 1100px 110 | 111 | ##### Colours 112 | Type | Variables 113 | ---- | ---- 114 | Mono | `$black` `$blackBase` `$greyX2Light` `$greyXLight` `$greyLight` `$grey` `$greyDark` `$greyXDark` `$greyX2Dark` 115 | Primary | `$aqua` `$blue` `$green` `$orange` `$pink` `$purple` `$red` `$yellow` 116 | Secondary | `$asbestos` `$asphalt` `$bondiBlue` `$cloud` `$concrete` `$greyBlueXLight` `$greyBlueLight` `$greyBlue` `$greyBlueDark` `$greyBlueXDark` `$midnight` `$offWhite` `$offWhiteDark` `$riverBed` `$silver` 117 | 118 | ##### Spacing 119 | Variable | Value 120 | ---- | ---- 121 | `$spaceBase` | 24px 122 | `$spaceSmall` | 12px 123 | `$spaceMedium` | 48px 124 | `$spaceLarge` | 72px 125 | 126 | ##### Text 127 | Variable | Value 128 | ---- | ---- 129 | `$georgia` | Georgia, Cambria, "Times New Roman", Times, serif 130 | `$helvetica` | "Helvetica Neue", Helvetica, Arial, sans-serif 131 | `$impact` | Impact, Charcoal, sans-serif 132 | `$lato` | 'Lato', sans-serif 133 | `$lucindaGrande` | "Lucida Grande", Tahoma, Verdana, Arial, sans-serif 134 | `$monospace` | Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace 135 | `$openSans` | 'Open Sans', Helvetica, Arial, sans-serif 136 | `$roboto` | 'Roboto', 'Helvetic Neue', Helvetica, Arial 137 | `$tahoma` | Tahoma, Geneva, sans-serif 138 | `$timesNewRoman` | "Times New Roman", Times, serif 139 | `$trebuchet` | "Trebuchet MS", Helvetica, sans-serif 140 | `$verdana` | Verdana, Geneva, sans-serif 141 | 142 | ##### Text Size 143 | The size evaluates to an em value and then down to a pixel value. 144 | 145 | Variable | Evaluates To 146 | ---- | ---- 147 | `$sizeSmall` | 14px 148 | `$sizeBase` | 16px 149 | `$sizeMedium` | 18px 150 | `$sizeLarge` | 24px 151 | 152 | ##### Text Weight 153 | Variable | Value 154 | ---- | ---- 155 | `$weightThin` | 100 156 | `$weightLight` | 300 157 | `$weightBase` | 400 158 | `$weightBold` | 700 159 | `$weightHeavy` | 900 160 | 161 | #### Animation 162 | Mixin | Defaults | Description 163 | ---- | ---- | ---- 164 | `animate(attr, speed)` | `speed`: `0.2s` | Set the transition style of attribute `attr`. 165 | `animate-none()` | | Remove all transition styles for an element. 166 | `animate-timing-function(timing)` | | Set the transition `timing` function for an element. 167 | `animation(n, dur, i, dir, f)` | `dur`: `0.4s`
`i`: `false`
`dir`: `false`
`f`: `false` | Set all the animation properties.
`n` = name
`dur` = duration
`i` = iteration
`dir` = direction
`f` = fill mode 168 | `animation-delay(x)` | | Set the animation delay property to `x`. 169 | `animation-direction(x)` | `x`: `normal` | Set the animation direction property. 170 | `animation-duration(x)` | | Set the animation duration property to `x`. 171 | `animation-fill-mode(x)` | `x`: `forwards` | Set the animation fill mode property. 172 | `animation-iteration(x)` | | Set the animation iteration `x` property. 173 | `animation-name(x)` | | Set the animation name property. 174 | `animation-timing-function(x)` | `x`: `ease-out` | Set the animation timing function property. 175 | `keyframes(x)` | | Generate the animation keyframes with name `x`. 176 | 177 | ```scss 178 | // Animate block on hover 179 | .block { 180 | @include position(absolute, top 10px left 10px); 181 | @include height(50px); 182 | @include width(50px); 183 | @include background-colour($red); 184 | @include animate('all', 1s); // Here we attach the animation styles 185 | 186 | &:hover { 187 | @include position-set(top 20px left 20px); 188 | } 189 | } 190 | ``` 191 | 192 | #### Arrow 193 | Mixin | Defaults | Description 194 | ---- | ---- | ---- 195 | `arrow(pos, clr, size)` | `pos`: `bottom`
`clr`: `$white`
`size`: `20px` | Attach a CSS arrow to an element. 196 | `arrow-colour(pos, clr)` | `pos`: `bottom`
`clr`: `$white` | Change the colour of an elements CSS arrow. 197 | `arrow-none(clr)` | `clr`: `$white` | Remove an elements CSS arrow
Reset the background colour. 198 | 199 | #### Background 200 | Mixin | Defaults | Description 201 | ---- | ---- | ---- 202 | `background-attachment(x)` | `x`: `scroll` | Set the background attachment property to `x`. 203 | `background-clip(x)` | `x`: `border-box` | Set the background clip property to `x`. 204 | `background-colour(x)` | | Set the background colour to `x`. 205 | `background-contain()` | | Set the background size to contain and center position. 206 | `background-cover()` | | Set the background size to cover and center position. 207 | `background-origin(x)` | `x`: `padding-box` | Set the background origin property to `x`. 208 | `background-position(x)` | `x`: `center` | Set the background position property to `x`. 209 | `background-repeat(x)` | `x`: `repeat` | Set the background repeat property to `x`. 210 | `background-size(x)` | `x`: `auto` | Set the background size property to `x`. 211 | `background-single()` | | Set the background position to center
Stop the background from repeating. 212 | 213 | #### Background Images 214 | Mixin | Defaults | Description 215 | ---- | ---- | ---- 216 | `background-image(url, pos)` | `pos`: `top left` | Set the background image on an element. 217 | `background-image-contain(url, pos)` | `pos`: `center` | Set a contained background image on an element. 218 | `background-image-cover(url, pos)` | `pos`: `center` | Set a covered background image on an element. 219 | `background-image-parallax(url)` | | Set a parallax style background image on an element. 220 | `background-image-single(url, pos)` | `pos`: `center` | Set a single background image on an element. 221 | 222 | ```scss 223 | // Set the background 224 | .my-element { 225 | @include background-image-cover("global/background.png"); 226 | } 227 | ``` 228 | 229 | #### Borders 230 | Set the border property of an element. 231 | 232 | Mixin | Defaults 233 | ---- | ---- 234 | `border(clr, size, type)` | `clr`: `$grey`
`size`: `1px`
`type`: `solid` 235 | `border-[s](clr, size, type)` | `[s]`: `t` `r` `b` `l`
`clr`: `$grey`
`size`: `1px`
`type`: `solid` 236 | `border-horizontal(clr, size, type)` | `clr`: `$grey`
`size`: `1px`
`type`: `solid` 237 | `border-vertical(clr, size, type)` | `clr`: `$grey`
`size`: `1px`
`type`: `solid` 238 | `border-none()` | 239 | 240 | ```scss 241 | .my-element { 242 | @include border-left($red, 2px); 243 | } 244 | ``` 245 | 246 | #### Border Radius 247 | Set the border radius property on an element. 248 | 249 | Mixin | Options & Defaults | 250 | ---- | ---- | 251 | `border-radius(x)` | `x`: `2px` | 252 | `border-radius-[s](x)` | `[s]`: `t` `r` `b` `l` `tl` `tr` `bl` `br`
`x`: `2px` | 253 | `border-radius-none()` | | 254 | 255 | ```scss 256 | .my-element { 257 | @include border-radius-tr(4px); // This add a border radius to the top right corner. 258 | } 259 | ``` 260 | 261 | #### Display 262 | Mixin | Defaults | Description 263 | ---- | ---- | ---- 264 | `hide()` | | Hide an element. 265 | `hide-visually()` | | Hide an element but still make it accessible to the DOM.
Used for instances where accessibility is needed. 266 | `show(x)` | `x`: `block` | Show an element with display type of `x`. 267 | `opacity(int)` | `int`: `0.60` | Set the opacity of an element. 268 | `overflow(x, direction)` | `x`: `visible`
`direction`: `false` | Set the overflow of an element.
`direction` is optional and can be `vertical` or `horizontal`. 269 | `perspective(x)` | `x`: `0px` | Set the perspective of an element. 270 | `transparency(int)` | `int`: `0.60` | Set the transparency of an element.
You can also use the **opacity** mixin as an alternative. 271 | `visibility(x)` | `x`: `visible` | Set the visibility property of an element. 272 | 273 | #### Drop Shadow 274 | Mixin | Defaults | Description 275 | ---- | ---- | ---- 276 | `drop-shadow(clr, size, v, h)` | `clr`: `fade-out(#000, 0.6)`
`size`: `3px`
`v`: `0px`
`h`: `0px` | Set the drop shadow of an element.
`v` is the vertical offset.
`h` is the horizontal offset. 277 | `drop-shadow-inset(clr, size, v, h)` | `clr`: `fade-out(#000, 0.6)`
`size`: `3px`
`v`: `0px`
`h`: `0px` | Set an inset drop shadow of an element.
`v` is the vertical offset.
`h` is the horizontal offset. 278 | `drop-shadow-none()` | | Remove any drop shadow. 279 | 280 | ```scss 281 | .my-element { 282 | @include drop-shadow($green); 283 | } 284 | ``` 285 | 286 | #### Global Setup 287 | Mixin | Description 288 | ---- | ---- 289 | `global-setup()` | Apply the border-box property to all elements to contain dimensions. Set the default colour to a lighter, more readable black, the background colour to white and the default font to Open Sans with an Arial and Helvetica fallback. Note that this setup is automatically called by Rocket already. 290 | 291 | #### Gradient 292 | **Note** that the arguments `x` and `y` are the starting and ending gradient colours. 293 | 294 | Mixin | Defaults | Description 295 | ---- | ---- | ---- 296 | `gradient-animate(x, y, angle)` | `angle`: `135deg` | Apply animated background gradient. 297 | `gradient-animate-horizontal(x, y)` | | Apply animated background gradient from left to right. 298 | `gradient-animate-vertical(x, y)` | | Apply animated background gradient from top to bottom. 299 | `gradient-animate-none()` | | Remove any animated background gradient. 300 | `gradient-angle(x, y, angle)` | `angle`: `-45deg` | Apply background gradient. 301 | `gradient-horizontal(x, y)` | | Apply background gradient from left to right. 302 | `gradient-vertical(x, y)` | | Apply background gradient from top to bottom. 303 | `gradient-none()` | | Remove any background gradient. 304 | 305 | #### Interaction 306 | Mixin | Defaults | Description 307 | ---- | ---- | ---- 308 | `cursor(x)` | `x`: `auto` | Set the cursor to `x`. 309 | 310 | #### iOS 311 | Mixin | Description 312 | ---- | ---- 313 | `ios-render()` | Set some special properties like Webkit's backface visibility and perspective property to help with rendering elements like images. 314 | 315 | #### Layout 316 | Mixin | Defaults | Description 317 | ---- | ---- | ---- 318 | `box-sizing(x)` | `x`: `content-box` | Set the box sizing style of an element. 319 | `center()` | | Center an element within its container. 320 | `center-vertical()` | | Center an element vertically within its container. 321 | `clearfix()` | | Clear the zoom and set the clear style to both for the element. 322 | `level(int)` | `int`: `1` | Set the z-index of an element to `int`.
You can also use the z-index mixin as an alternative. 323 | `vertical-align(x)` | | Set the vertical alignment of an element to `x`. 324 | `z-index(int)` | `x`: `1` | Set the z-index of an element to `x`. 325 | 326 | #### Layout Flex 327 | For information on flex visit CSS-Tricks: A Guide to Flexbox 328 | 329 | Mixin | Defaults | Description 330 | ---- | ---- | ---- 331 | `align-content(x)` | `x`: `flex-start` | Set the align content property of a flex element.
`x` can be `flex-start`, `flex-end`, `center`,
`space-between`, `space-around` or `stretch`. 332 | `align-items(x)` | `x`: `flex-start` | Set the align items property of a flex element.
`x` can be `flex-start`, `flex-end`, `center`,
`space-between`, `space-around` or `stretch`. 333 | `align-self(x)` | `x`: `auto` | Set the align self property of a flex element.
`x` can be `flex-start`, `flex-end`, `center`,
`space-between`, `space-around` or `stretch`. 334 | `flex(grow, shrink, basis)` | `grow`: `0`
`shrink`: `1`
`basis`: `auto` | Set the all the flex properties for a flex item. 335 | `flex-basis(x)` | `basis`: `auto` | Set the flex basis property for a flex item. 336 | `flex-direction(x)` | `x`: `row` | Set the flex direction property of a flex element.
`x` can be `row`, `row-reverse`, `column` or `column-reverse`. 337 | `flex-display(x)` | `x`: `normal` | Set the flex display property of a flex element. 338 | `flex-flow(x, y)` | | Set the flex direction and wrap properties of a flex element.
`x` is direction.
`y` is wrap. 339 | `flex-grow(x)` | `x`: `0` | Set the flex grow property of a flex element. 340 | `flex-shrink(x)` | `x`: `1` | Set the flex shrink property of a flex element. 341 | `flex-wrap(x)` | `x`: `nowrap` | Set the flex wrap property of a flex element.
`x` can be `nowrap`, `wrap` or `wrap-reverse`. 342 | `justify-content(x)` | `x`: `flex-start` | Set the justify content property of a flex element.
`x` can be `flex-start`, `flex-end`, `center`,
`space-between` or `space-around`. 343 | `order(int)` | `int`: `0` | Set the flex order property for a flex item. 344 | 345 | #### Layout Floats 346 | Mixin | Description 347 | ---- | ---- 348 | `float(x)` | Set the float of an element to `x`. 349 | `float-clear()` | Clear the float of an element. 350 | `float-none()` | Set the float of an element to none. 351 | 352 | #### Layout Responsive 353 | Mixin | Defaults | Description 354 | ---- | ---- | ---- 355 | `breakpoint(x, y, z)` | `y`: `false`
`z`: `false` | Generate a media query based on a Rocket preset or a value.
`x`: `large`, `small` or an `em/px` value.
`y`: Breakpoint type of `min` or `max`
`z`: breakpoint orientation. 356 | `breakpoint-vertical(x, y, z)` | `y`: `false`
`z`: `false` | The same as breakpoint except it activates vertically. 357 | `limit(x)` | `x`: `$limitWidth` | Assigns a maximum width to an element and centers it.
Anything below the limit will become fluid.
Used mainly to contain row elements. 358 | `offset(x, y)` | `y`: `$columnLimit` | Push an element out `x` amount of columns from the left. 359 | `offset-right(x, y)` | `y`: `$columnLimit` | Push an element `x` amount of columns from the right. 360 | `row()` | | Turns an element into a row.
Row is needed to wrap any **span** elements.
A row element will default to a 100% width of its container. 361 | `span(x, y)` | `y`: `$columnLimit` | Span an element `x` amount of columns within the `z` total.
See and example below. 362 | `span-new(x, y)` | `y`: `$columnLimit` | Apply a new span amount of `x` to an element. 363 | 364 | ```html 365 |
366 |
Left Column
367 |
Right Column
368 |
369 | ``` 370 | 371 | ```scss 372 | .container { 373 | @include row(); 374 | 375 | .left, 376 | .right { 377 | @include span(12); // Span of 12 is a width of 100% (12/12). 378 | } 379 | 380 | // Change the layout at the large breakpoint 381 | @include breakpoint ($bpLarge) { 382 | .left { 383 | @include span-new(3); // Span of 3 is a width of 25% (3/12). 384 | } 385 | .right { 386 | @include span-new(9); // Span of 9 is a width of 75% (9/12). 387 | } 388 | } 389 | } 390 | ``` 391 | 392 | #### List 393 | Mixin | Defaults | Description 394 | ---- | ---- | ---- 395 | `list-style(x)` | `x`: `disc outside none` | Set the list style. 396 | `list-style-image(url)` | | Set the list style image. 397 | `list-style-position(x)` | `x`: `outside` | Set the list style position. 398 | `list-style-type(x)` | `x`: `disc` | Set the list style type. 399 | 400 | #### Position 401 | Mixin | Defaults | Description 402 | ---- | ---- | ---- 403 | `position(x, opt)` | `x`: `relative` | Set the position of an element to `x`.
`opt` is optional.
`opt` can include `top`, `right`, `bottom`, `left`,
`margin-top`, `margin-right`, `margin-bottom` and `margin-left`. 404 | `position-set(opt)` | | `opt` can include `top`, `right`, `bottom`, `left`,
`margin-top`, `margin-right`, `margin-bottom` and `margin-left`. 405 | 406 | ```scss 407 | .my-element { 408 | @include position(relative, left 10px margin-top 10px) 409 | } 410 | ``` 411 | 412 | #### Size 413 | Mixin | Defaults | Description 414 | ---- | ---- | ---- 415 | `height(x, y, z)` | `x`: `0px`
`y`: `false`
`z`: `false` | Set the height of an element.
`y` is the height max.
`z` is the height min. 416 | `height-max(x)` | `x`: `0px` | Set the maximum height of an element. 417 | `height-min(x)` | `x`: `0px` | Set the minimum height of an element. 418 | `size(x, y)` | `x`: `0px`
`y`: `0px` | Set the width `x` and height `y` of an element. 419 | `square(x)` | | Set the width, height and line-height of an element to `x`.
Center the text. 420 | `width(x, y, z)` | `x`: `0px`
`y`: `false`
`z`: `false` | Set the width of an element.
`y` is the width max.
`z` is the width min. 421 | `width-max(x)` | `x`: `0px` | Set the maximum width of an element. 422 | `width-min(x)` | `x`: `0px` | Set the minimum width of an element. 423 | 424 | #### Spacing Margins 425 | Mixin | Defaults | Description 426 | ---- | ---- | ---- 427 | `margin(x)` | `x`: `24px` | Set all the margins of an element. 428 | `margin-[s](x)` |
`x`: `24px` | Set the margin side of `s` of an element.
`s` can be `top`, `right`, `bottom`, `left`, `horizontal`, `vertical`. 429 | `margin-none()` | | Set the margin of an element to 0. 430 | 431 | ```scss 432 | .my-element { 433 | @include margin-b(12px); 434 | } 435 | ``` 436 | 437 | #### Spacing Padding 438 | Mixin | Defaults | Description 439 | ---- | ---- | ---- 440 | `padding(x)` | `x`: `24px` | Set all the padding of an element. 441 | `padding-[s](x)` | `x`: `24px` | Set the padding side of `s` of an element.
`s` can be `top`, `right`, `bottom`, `left`, `horizontal`, `vertical`. 442 | `padding-none()` | | Set the padding of an element to 0. 443 | 444 | ```scss 445 | .my-element { 446 | @include padding-right(20px); 447 | } 448 | ``` 449 | 450 | #### Spacing Remove 451 | Mixin | Description 452 | ---- | ---- 453 | `spacing-none()` | Remove all margins and padding from an element. 454 | 455 | #### Text 456 | Mixin | Defaults | Description 457 | ---- | ---- | ---- 458 | `text-align(x)` | `x`: `left` | Set the text alignment of an element. 459 | `text-colour(x)` | `x`: `$white` | Set the text colour of an element. 460 | `text-decoration(x)` | `x`: `none` | Set the text decoration of an element. 461 | `text-ellipsis()` | | Set text overflow to ellipsis and prevent word wrapping. 462 | `text-font(x)` | `x`: `$helvetica` | Set the text font family of an element. 463 | `text-hide()` | | Hide the text within an element. 464 | `text-letter-spacing(x)` | `x`: `normal` | Set the text letter spacing of an element. 465 | `text-line-height(x)` | `x`: `16px` | Set the line height of an element in pixels.
Calculates an additional rem overwrite. 466 | `text-size(x)` | `x`: `16px` | Set the font size of an element in pixels.
Calculates an additional rem overwrite. 467 | `text-style()` | `x`: `normal` | Set the text style of an element to $style. 468 | `text-transform(x)` | `x`: `none` | Set the text transform property of an element to `x`.
`x` can be `none`, `capitalize`, `uppercase`,
`lowercase` or `initial`. 469 | `text-weight(x)` | `x`: `normal` | Set the text weight of an element to `x`. 470 | 471 | #### Transform 472 | Mixin | Defaults | Description 473 | ---- | ---- | ---- 474 | `transform(x)` | | Set the transform of property `x` for an element. 475 | `transform-origin(x, y, z)` | `x`: `50%`
`y`: `50%`
`z`: `0` | Set the transform origin of an element. 476 | `transform-rotate(x)` | `x`: `0deg` | Set the transform rotate style of an element. 477 | `transform-rotate-x(x)` | `x`: `0deg` | Set the transform rotate `X` style of an element. 478 | `transform-rotate-y(x)` | `x`: `0deg` | Set the transform rotate `Y` style of an element. 479 | `transform-rotate-z(x)` | `x`: `0deg` | Set the transform rotate `Z` style of an element. 480 | `transform-scale(x, y)` | `x`: `1`
`y`: `1` | Set the transform scale style of an element. 481 | `transform-scale-3d(x, y, z)` | `x`: `1`
`y`: `1`
`z`: `1` | Set the transform scale3D style of an element. 482 | `transform-translate-3d(x, y, z)` | `x`: `0px`
`y`: `0px`
`z`: `0px` | Set the transform translate3d style of an element. 483 | `transform-translate-x(x)` | `x`: `1` | Set the transform translateX style of an element. 484 | `transform-translate-y(x)` | `x`: `1` | Set the transform translateY style of an element. 485 | `transform-translate-z(x)` | `x`: `1` | Set the transform translateZ style of an element. 486 | `transform-easing(x, y, z, s)` | `x`: `0px`
`y`: `0px`
`z`: `0px`
`s`: `0.2s` | Animate the translate3d transform style (ease-out). 487 | 488 | ## CSS Implementation 489 | Start by including the necessary files. 490 | 491 | ```html 492 | 493 | 494 | 495 | ``` 496 | 497 | Alternatively you can also build the SASS out if you wish to include all your CSS in one production file. See an example below. 498 | 499 | ```scss 500 | @import "rocket-propel/build/sass/import"; 501 | @include rocket-propel-css; 502 | ``` 503 | 504 | Now class your HTML to manage your layout. For example: 505 | 506 | ```html 507 |
508 |
Span 2
509 |
Span 2
510 |
Span 2
511 |
Span 2
512 |
Span 2
513 |
Span 2
514 |
515 | ``` 516 | 517 | #### Classes as Modifiers 518 | Because all classes are declared on the DOM elements themselves, Propel sees them as global modifiers and such uses the `_` prefix to reflect this. In the case of modules the module name would prefix the modifier but that only happens with extensions to Rocket Propel. 519 | 520 | Find the other available classes below: 521 | 522 | #### Background 523 | Class | Options | Description 524 | ---- | ---- | ---- 525 | `._back-pos-[x]` | `[x]`: `top`, `right`, `bottom`, `left`, `center` | Set the background position of an element.
`[x]` is for `top`, `right`, `bottom`, `left` or `center`. 526 | `._back-repeat-[x]` | `[x]`: `no` `y` `x` | Set the background repeat of an element.
`[x]` is for repeat no, along the Y axis or along the X axis. 527 | `._back-single` | | Set the background of element to no repeat and centered. 528 | `._back-contain` | | Set the background of element to no repeat and contain. 529 | `._back-cover` | | Set the background of element to no repeat and cover. 530 | `._back-black` | | Set the background colour to black. 531 | `._back-grey` | | Set the background colour to medium grey. 532 | `._back-grey-light` | | Set the background colour to light grey. 533 | `._back-white` | | Set the background colour to white. 534 | 535 | #### Display 536 | Class | Options | Description 537 | ---- | ---- | ---- 538 | `._hide` | | Hide an element. 539 | `._hide-visually` | | Hide an element visually.
It will still register as on the page. 540 | `._hide-large` | | Hide an element in large view only. 541 | `._hide-small` | | Hide an element in small view only. 542 | `._show` | | Show an element. 543 | `._show-large` | | Show an element in large view only. 544 | `._show-small` | | Show an element in small view only. 545 | `._transparency-[x]` | `[x]`: `100` `75` `50` `25` `0` | Set the opacity of an element.
`[x]` is for `100%`, `75%`, `50%`, `25%` or `0%`. 546 | 547 | #### Global 548 | Class | Options 549 | ---- | ---- 550 | `._propel` | Apply some global styles to the HTML element of your page. 551 | 552 | #### Layout 553 | Class | Options | Description 554 | ---- | ---- | ---- 555 | `._center` | | Center an element. 556 | `._float-[x]` | `[x]`: `l` `r` | Set the float property of an element to `left` or `right`. 557 | `._float-none` | | Remove the float property from an element. 558 | `._float-clear` | | Stop all floating elements from affecting any element following. 559 | `._valign-[x]` | `[x]`: `t` `m` `b` | Set the vertical alignment of an element to `top`, `middle` or `bottom`. 560 | 561 | ```html 562 |
563 |
One
564 |
Two
565 |
566 | ``` 567 | 568 | #### Layout Responsive 569 | Class | Options | Description 570 | ---- | ---- | ---- 571 | `._row` | | Set the element to a row. Used on responsive containers 572 | `._span-[i]` | `[i]`: `1` to `12` | Set width of an element within a row. The spans are base 12. 573 | `._span-large-[i]` | `[i]`: `1` to `12` | Set width of an element within a row at the large breakpoint. 574 | `._span-small-[i]` | `[i]`: `1` to `12` | Set width of an element within a row at the small breakpoint. 575 | `._limit` | | Limit an elements width to 68.750em (default) and center. 576 | `._offset-[i]` | `[i]`: `1` to `12` | Offset from the left by span `[i]`. The spans are base 12. 577 | `._offset-right-[i]` | `[i]`: `1` to `12` | Offset from the right by span `[i]`. 578 | `._offset-large-[i]` | `[i]`: `1` to `12` | Offset from the left by span `[i]` at the large breakpoint. 579 | `._offset-large-right-[i]` | `[i]`: `1` to `12` | Offset from the right by span `[i]` at the large breakpoint. 580 | `._offset-small-[i]` | `[i]`: `1` to `12` | Offset from the left by span of `[i]` at the small breakpoint. 581 | `._offset-small-right-[i]` | `[i]`: `1` to `12` | Offset from the right by span of `[i]` at the small breakpoint. 582 | 583 | ```html 584 |
585 |
Left Column
586 |
Right Column
587 |
588 | ``` 589 | 590 | #### Position 591 | Class | Description 592 | ---- | ---- 593 | `._pos-absolute` | Set the position of an element to absolute. 594 | `._pos-relative` | Set the position of an element to relative. 595 | `._pos-static` | Set the position of an element to static. 596 | `._pos-fixed` | Set the position of an element to fixed. 597 | 598 | #### Sizing 599 | Class | Options | Description 600 | ---- | ---- | ---- 601 | `._block-height-[x]` | `[x]`: `10` `20` `50` `100` `200` `500` `1000` | Set the height of an element.
`[x]` results in px value. 602 | `._block-width-[x]` | `[x]`: `10` `20` `50` `100` `200` `500` `1000` | Set the width of an element.
`[x]` results in px value. 603 | 604 | ```html 605 |
Block
606 | ``` 607 | 608 | #### Spacing 609 | Class | Options | Description 610 | ---- | ---- | ---- 611 | `._mgn-[x]` | `[x]`: `1` to `10` | Add `[x]` amount of margin all around. 612 | `._mgn-[s]-[x]` | `[s]`: `t` `r` `b` `l`
`[x]`: `1` to `10` | Add `[x]` amount of margin to the `[s]` side of an element. 613 | `._mgn-none` | | Remove all margins from an element. 614 | `._pad-[x]` | `[x]`: `1` to `10` | Add `[x]` amount of padding all around. 615 | `._pad-[s]-[x]` | `[s]`: `t` `r` `b` `l`
`[x]`: `1` to `10` | Add `[x]` amount of padding to the `[s]` side of an element. 616 | `._pad-none` | | Remove all padding from an element. 617 | `._spacing-none` | | Remove all padding and margins from an element. 618 | 619 | ```html 620 |
Padding top of 10 pixels
621 |
Margin right of 8 pixels
622 | ``` 623 | 624 | #### Text 625 | Class | Options | Description 626 | ---- | ---- | ---- 627 | `._txt-hide` | | Hide the text within an element. 628 | `._txt-[x]` | `[x]`: `l` `c` `r` | Set the text alignment to `[x]`.
`[x]` is for `left`, `center`, `right`. 629 | `._txt-size-[x]` | `[x]`: `s` `m` `n` `l` | Set the font size to `[x]`. 630 | `._txt-weight-[x]` | `[x]`: `xl` `l` `n` `b` `xb` | Set the font weight to `[x]`. 631 | `._txt-light` | | Set the font weight to light. 632 | `._txt-bold` | | Set the font weight to bold. 633 | `._txt-normal` | | Set the font weight and style to normal. 634 | `._txt-italics` | | Set the font style to italics. 635 | `._txt-oblique` | | Set the font style to oblique. 636 | `._txt-white` | | Set the font colour to white. 637 | `._txt-grey` | | Set the font colour to medium grey. 638 | 639 | ```html 640 |
Very light text.
641 |
Text aligned right.
642 | ``` 643 | 644 | ## Author 645 | Created and maintained by Chris Humboldt
646 | Website: chrishumboldt.com
647 | GitHub github.com/chrishumboldt
648 | 649 | ## Copyright and License 650 | Copyright 2019 Rocket Project 651 | 652 | Licensed under the Apache License, Version 2.0 (the "License"); 653 | you may not use this file except in compliance with the License. 654 | You may obtain a copy of the License at 655 | 656 | http://www.apache.org/licenses/LICENSE-2.0 657 | 658 | Unless required by applicable law or agreed to in writing, software 659 | distributed under the License is distributed on an "AS IS" BASIS, 660 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 661 | See the License for the specific language governing permissions and 662 | limitations under the License. 663 | -------------------------------------------------------------------------------- /build/sass/_import.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | // Development 4 | @import "development/function"; 5 | @import "development/mixin"; 6 | 7 | // Basic 8 | @import "basic/animation"; 9 | @import "basic/arrow"; 10 | @import "basic/background"; 11 | @import "basic/border"; 12 | @import "basic/breakpoint"; 13 | @import "basic/colour"; 14 | @import "basic/display"; 15 | @import "basic/drop-shadow"; 16 | @import "basic/global"; 17 | @import "basic/gradient"; 18 | @import "basic/input-types"; 19 | @import "basic/interaction"; 20 | @import "basic/ios"; 21 | @import "basic/layout"; 22 | @import "basic/list"; 23 | @import "basic/responsive-layout"; 24 | @import "basic/size"; 25 | @import "basic/spacing"; 26 | @import "basic/text"; 27 | @import "basic/transform"; 28 | 29 | // CSS 30 | @import "css/background"; 31 | @import "css/display"; 32 | @import "css/global"; 33 | @import "css/layout"; 34 | @import "css/position"; 35 | @import "css/responsive-layout"; 36 | @import "css/sizing"; 37 | @import "css/spacing"; 38 | @import "css/text"; 39 | 40 | // Execute 41 | @import "css/execute"; 42 | -------------------------------------------------------------------------------- /build/sass/basic/_animation.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | // Animate 4 | @mixin transition( 5 | $attributes, 6 | $transitionSpeed: 0.2s, 7 | $delay: 0s, 8 | $easing: ease-out 9 | ) { 10 | @include transition-property($attributes); 11 | @include transition-duration($transitionSpeed); 12 | @include transition-delay($delay); 13 | @include transition-timing-function($easing); 14 | } 15 | @mixin transition-property($attributes) { 16 | -webkit-transition-property: unquote($attributes); 17 | -moz-transition-property: unquote($attributes); 18 | -ms-transition-property: unquote($attributes); 19 | transition-property: unquote($attributes); 20 | } 21 | @mixin transition-delay($delay: 0s) { 22 | -webkit-transition-delay: $delay; 23 | -moz-transition-delay: $delay; 24 | -ms-transition-delay: $delay; 25 | transition-delay: $delay; 26 | } 27 | @mixin transition-duration($transitionSpeed: 0.2s) { 28 | -webkit-transition-duration: $transitionSpeed; 29 | -moz-transition-duration: $transitionSpeed; 30 | -ms-transition-duration: $transitionSpeed; 31 | transition-duration: $transitionSpeed; 32 | } 33 | @mixin transition-timing-function($easing: ease-out) { 34 | -webkit-transition-timing-function: $easing; 35 | -moz-transition-timing-function: $easing; 36 | -ms-transition-timing-function: $easing; 37 | transition-timing-function: $easing; 38 | } 39 | @mixin transition-none() { 40 | -webkit-transition: none !important; 41 | -moz-transition: none !important; 42 | -ms-transition: none !important; 43 | transition: none !important; 44 | } 45 | @mixin transition-timing-function($timing) { 46 | -webkit-transition-timing-function: $timing; 47 | -moz-transition-timing-function: $timing; 48 | -ms-transition-timing-function: $timing; 49 | transition-timing-function: $timing; 50 | } 51 | @mixin animate( 52 | $attribute, 53 | $transitionSpeed: 0.2s, 54 | $delay: 0s, 55 | $easing: ease-out 56 | ) { 57 | @include transition($attribute, $transitionSpeed, $delay, $easing); 58 | } 59 | @mixin animate-none() { 60 | @include transition-none(); 61 | } 62 | @mixin animate-timing-function($timing) { 63 | @include transition-timing-function($timing); 64 | } 65 | 66 | // Animation 67 | @mixin animation-delay($delay) { 68 | -webkit-animation-delay: $delay; 69 | -moz-animation-delay: $delay; 70 | -ms-animation-delay: $delay; 71 | animation-delay: $delay; 72 | } 73 | @mixin animation-direction($direction: normal) { 74 | -webkit-animation-direction: $direction; 75 | -moz-animation-direction: $direction; 76 | -ms-animation-direction: $direction; 77 | animation-direction: $direction; 78 | } 79 | @mixin animation-duration($duration) { 80 | -webkit-animation-duration: $duration; 81 | -moz-animation-duration: $duration; 82 | -ms-animation-duration: $duration; 83 | animation-duration: $duration; 84 | } 85 | @mixin animation-fill-mode($fill: forwards) { 86 | -webkit-animation-fill-mode: $fill; 87 | -moz-animation-fill-mode: $fill; 88 | -ms-animation-fill-mode: $fill; 89 | animation-fill-mode: $fill; 90 | } 91 | @mixin animation-iteration($iteration) { 92 | -webkit-animation-iteration-count: $iteration; 93 | -moz-animation-iteration-count: $iteration; 94 | -ms-animation-iteration-count: $iteration; 95 | animation-iteration-count: $iteration; 96 | } 97 | @mixin animation-name($name) { 98 | -webkit-animation-name: $name; 99 | -moz-animation-name: $name; 100 | -ms-animation-name: $name; 101 | animation-name: $name; 102 | } 103 | @mixin animation-timing-function($timing: ease-out) { 104 | -webkit-animation-timing-function: $timing; 105 | -moz-animation-timing-function: $timing; 106 | -ms-animation-timing-function: $timing; 107 | animation-timing-function: $timing; 108 | } 109 | @mixin animation( 110 | $name, 111 | $duration: 0.4s, 112 | $iteration: false, 113 | $direction: false, 114 | $fillMode: false 115 | ) { 116 | @include animation-name($name); 117 | @include animation-duration($duration); 118 | 119 | @if $iteration != false { 120 | @include animation-iteration($iteration); 121 | } 122 | @if $direction != false { 123 | @include animation-direction($direction); 124 | } 125 | @if $fillMode != false { 126 | @include animation-fill-mode($fillMode); 127 | } 128 | } 129 | 130 | // Keyframes 131 | @mixin keyframes($name) { 132 | @-webkit-keyframes #{$name} { 133 | @content; 134 | } 135 | @-moz-keyframes #{$name} { 136 | @content; 137 | } 138 | @keyframes #{$name} { 139 | @content; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /build/sass/basic/_arrow.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin arrow($position: bottom, $colour: $white, $size: 20px) { 4 | position: relative; 5 | &:after { 6 | border: solid transparent; 7 | content: " "; 8 | height: 0; 9 | width: 0; 10 | position: absolute; 11 | pointer-events: none; 12 | border-color: rgba(255, 255, 255, 0); 13 | border-width: $size; 14 | z-index: 1; 15 | 16 | @if $position == top { 17 | bottom: 100%; 18 | left: 50%; 19 | margin-left: -$size; 20 | } 21 | @else if $position == left { 22 | right: 100%; 23 | top: 50%; 24 | margin-top: -$size; 25 | } 26 | @else if $position == right { 27 | left: 100%; 28 | top: 50%; 29 | margin-top: -$size; 30 | } 31 | @else { 32 | top: 100%; 33 | left: 50%; 34 | margin-left: -$size; 35 | } 36 | } 37 | 38 | @include arrow-colour($position, $colour); 39 | } 40 | 41 | // Arrow colour 42 | @mixin arrow-colour($position: bottom, $colour: $white) { 43 | background: $colour; 44 | &:after { 45 | @if $position == top { 46 | border-bottom-color: $colour; 47 | } 48 | @else if $position == left { 49 | border-right-color: $colour; 50 | } 51 | @else if $position == right { 52 | border-left-color: $colour; 53 | } 54 | @else { 55 | border-top-color: $colour; 56 | } 57 | } 58 | } 59 | 60 | // No arrow 61 | @mixin arrow-no($colour: $white) { 62 | background: $colour; 63 | &:after { 64 | display: none;; 65 | border-width: 0px; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /build/sass/basic/_background.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin background-attachment($attachment: scroll) { 4 | background-attachment: $attachment; 5 | } 6 | @mixin background-clip($clip: border-box) { 7 | background-clip: $clip; 8 | } 9 | @mixin background-colour($colour) { 10 | background-color: $colour; 11 | } 12 | @mixin background-color($colour) { 13 | @include background-colour($colour); 14 | } 15 | @mixin background-contain() { 16 | @include background-position(center); 17 | @include background-repeat(no-repeat); 18 | @include background-size(contain); 19 | } 20 | @mixin background-cover() { 21 | @include background-position(center); 22 | @include background-repeat(no-repeat); 23 | @include background-size(cover); 24 | } 25 | @mixin background-origin($origin: padding-box) { 26 | background-origin: $origin; 27 | } 28 | @mixin background-position($position: center) { 29 | background-position: $position; 30 | } 31 | @mixin background-repeat($repeat: repeat) { 32 | background-repeat: $repeat; 33 | } 34 | @mixin background-size($size: auto) { 35 | background-size: $size; 36 | } 37 | @mixin background-single() { 38 | @include background-position(center); 39 | @include background-repeat(no-repeat); 40 | } 41 | 42 | // Background images 43 | @mixin background-image($imagePath, $position: top left) { 44 | background-image: url("#{$imagePath}"); 45 | @include background-position($position); 46 | } 47 | @mixin background-image-contain($imagePath, $position: center) { 48 | @include background-image($imagePath, $position); 49 | @include background-repeat(no-repeat); 50 | @include background-size(contain); 51 | } 52 | @mixin background-image-cover($imagePath, $position: center) { 53 | @include background-image($imagePath, $position); 54 | @include background-repeat(no-repeat); 55 | @include background-size(cover); 56 | } 57 | @mixin background-image-parallax($imagePath, $position: center) { 58 | @include background-image($imagePath, $position); 59 | @include background-attachment(fixed); 60 | @include background-size(cover); 61 | } 62 | @mixin background-image-single($imagePath, $position: center) { 63 | @include background-image($imagePath, $position); 64 | @include background-repeat(no-repeat); 65 | } 66 | -------------------------------------------------------------------------------- /build/sass/basic/_border.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | // Border lines 4 | @mixin border($colour: $grey, $size: 1px, $type: solid) { 5 | border: $size $type $colour; 6 | } 7 | @mixin border-top($colour: $grey, $size: 1px, $type: solid) { 8 | border-top: $size $type $colour; 9 | } 10 | @mixin border-bottom($colour: $grey, $size: 1px, $type: solid) { 11 | border-bottom: $size $type $colour; 12 | } 13 | @mixin border-left($colour: $grey, $size: 1px, $type: solid) { 14 | border-left: $size $type $colour; 15 | } 16 | @mixin border-right($colour: $grey, $size: 1px, $type: solid) { 17 | border-right: $size $type $colour; 18 | } 19 | @mixin border-vertical($colour: $grey, $size: 1px, $type: solid) { 20 | @include border-top($colour, $size, $type); 21 | @include border-bottom($colour, $size, $type); 22 | } 23 | @mixin border-horizontal($colour: $grey, $size: 1px, $type: solid) { 24 | @include border-left($colour, $size, $type); 25 | @include border-right($colour, $size, $type); 26 | } 27 | @mixin border-none() { 28 | border: medium none $black; 29 | } 30 | 31 | // Border radius 32 | @mixin border-radius($radius: 2px) { 33 | border-radius: $radius; 34 | -ms-border-radius: $radius; 35 | -moz-border-radius: $radius; 36 | -webkit-border-radius: $radius; 37 | background-clip: padding-box; 38 | } 39 | @mixin border-radius-top($radius: 2px) { 40 | border-radius: $radius $radius 0px 0px; 41 | -ms-border-radius: $radius $radius 0px 0px; 42 | -moz-border-radius: $radius $radius 0px 0px; 43 | -webkit-border-radius: $radius $radius 0px 0px; 44 | background-clip: padding-box; 45 | } 46 | @mixin border-radius-bottom($radius: 2px) { 47 | border-radius: 0px 0px $radius $radius; 48 | -ms-border-radius: 0px 0px $radius $radius; 49 | -moz-border-radius: 0px 0px $radius $radius; 50 | -webkit-border-radius: 0px 0px $radius $radius; 51 | background-clip: padding-box; 52 | } 53 | @mixin border-radius-left($radius: 2px) { 54 | border-radius: $radius 0px 0px $radius; 55 | -ms-border-radius: $radius 0px 0px $radius; 56 | -moz-border-radius: $radius 0px 0px $radius; 57 | -webkit-border-radius: $radius 0px 0px $radius; 58 | background-clip: padding-box; 59 | } 60 | @mixin border-radius-right($radius: 2px) { 61 | border-radius: 0px $radius $radius 0px; 62 | -ms-border-radius: 0px $radius $radius 0px; 63 | -moz-border-radius: 0px $radius $radius 0px; 64 | -webkit-border-radius: 0px $radius $radius 0px; 65 | background-clip: padding-box; 66 | } 67 | @mixin border-radius-top-right($radius: 2px) { 68 | border-radius: 0px $radius 0px 0px; 69 | -ms-border-radius: 0px $radius 0px 0px; 70 | -moz-border-radius: 0px $radius 0px 0px; 71 | -webkit-border-radius: 0px $radius 0px 0px; 72 | background-clip: padding-box; 73 | } 74 | @mixin border-radius-top-left($radius: 2px) { 75 | border-radius: $radius 0px 0px 0px; 76 | -ms-border-radius: $radius 0px 0px 0px; 77 | -moz-border-radius: $radius 0px 0px 0px; 78 | -webkit-border-radius: $radius 0px 0px 0px; 79 | background-clip: padding-box; 80 | } 81 | @mixin border-radius-bottom-right($radius: 2px) { 82 | border-radius: 0px 0px $radius 0px; 83 | -ms-border-radius: 0px 0px $radius 0px; 84 | -moz-border-radius: 0px 0px $radius 0px; 85 | -webkit-border-radius: 0px 0px $radius 0px; 86 | background-clip: padding-box; 87 | } 88 | @mixin border-radius-bottom-left($radius: 2px) { 89 | border-radius: 0px 0px 0px $radius; 90 | -ms-border-radius: 0px 0px 0px $radius; 91 | -moz-border-radius: 0px 0px 0px $radius; 92 | -webkit-border-radius: 0px 0px 0px $radius; 93 | background-clip: padding-box; 94 | } 95 | @mixin border-radius-none() { 96 | border-radius: 0px; 97 | -ms-border-radius: 0px; 98 | -moz-border-radius: 0px; 99 | -webkit-border-radius: 0px; 100 | background-clip: padding-box; 101 | } 102 | -------------------------------------------------------------------------------- /build/sass/basic/_breakpoint.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | $bpSmall: 21.875em; // 350px 4 | $bpMedium: 46.875em; // 700px 5 | $bpLarge: 68.750em; // 1100px 6 | -------------------------------------------------------------------------------- /build/sass/basic/_colour.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | // Mono 4 | $white: #fff; 5 | $black: #000; 6 | $blackBase: lighten($black, 22%); 7 | $greyX2Light: lighten($black, 98%); 8 | $greyXLight: lighten($black, 96%); 9 | $greyLight: lighten($black, 90%); 10 | $grey: lighten($black, 50%); 11 | $greyDark: lighten($black, 40%); 12 | $greyXDark: lighten($black, 35%); 13 | $greyX2Dark: lighten($black, 30%); 14 | 15 | // Primary 16 | $aqua: #1abc9c; 17 | $blue: #3498db; 18 | $green: #2ecc71; 19 | $orange: #f39c12; 20 | $pink: #eb5367; 21 | $purple: #9b59b6; 22 | $red: #e74c3c; 23 | $yellow: #f1c40f; 24 | 25 | // Secondary 26 | $asbestos: #7f8c8d; 27 | $asphalt: #34495e; 28 | $bondiBlue: #008d9c; 29 | $cloud: #ecf0f1; 30 | $concrete: #95a5a6; 31 | $greyBlueXLight: #f8f9fa; 32 | $greyBlueLight: #dee1e7; 33 | $greyBlue: #aab2bd; 34 | $greyBlueDark: #656d78; 35 | $greyBlueXDark: #434a54; 36 | $midnight: #2c3e50; 37 | $offWhite: #f5f7fa; 38 | $offWhiteDark: #e6e9ed; 39 | $riverBed: #434d5a; 40 | $silver: #bdc3c7; 41 | 42 | // Lists 43 | $coloursMono: ( 44 | "white": $white, 45 | "black": $black, 46 | "blackBase": $blackBase, 47 | "greyX2Light": $greyX2Light, 48 | "greyXLight": $greyXLight, 49 | "greyLight": $greyLight, 50 | "grey": $grey, 51 | "greyDark": $greyDark, 52 | "greyXDark": $greyXDark, 53 | "greyX2Dark": $greyX2Dark 54 | ); 55 | $coloursPrimary: ( 56 | "grey": $grey, 57 | "black": $blackBase, 58 | "white": $white, 59 | "aqua": $aqua, 60 | "blue": $blue, 61 | "green": $green, 62 | "orange": $orange, 63 | "pink": $pink, 64 | "purple": $purple, 65 | "red": $red, 66 | "yellow": $yellow 67 | ); 68 | $coloursSecondary: ( 69 | "asbestos": $asbestos, 70 | "asphalt": $asphalt, 71 | "bondiBlue": $bondiBlue, 72 | "cloud": $cloud, 73 | "concrete": $concrete, 74 | "greyBlueLight": $greyBlueLight, 75 | "greyBlue": $greyBlue, 76 | "greyBlueDark": $greyBlueDark, 77 | "greyBlueXDark": $greyBlueXDark, 78 | "midnight": $midnight, 79 | "offWhite": $offWhite, 80 | "offWhiteDark": $offWhiteDark, 81 | "river-bed": $riverBed, 82 | "silver": $silver 83 | ); 84 | $coloursButtons: ( 85 | "grey": $greyLight, 86 | "black": $blackBase, 87 | "white": $white, 88 | "aqua": $aqua, 89 | "blue": $blue, 90 | "green": $green, 91 | "orange": $orange, 92 | "pink": $pink, 93 | "purple": $purple, 94 | "red": $red, 95 | "yellow": $yellow 96 | ); 97 | $coloursForm: ( 98 | "grey": $greyLight, 99 | "black": $blackBase, 100 | "white": $white, 101 | "aqua": $aqua, 102 | "blue": $blue, 103 | "green": $green, 104 | "orange": $orange, 105 | "pink": $pink, 106 | "purple": $purple, 107 | "red": $red, 108 | "yellow": $yellow, 109 | "greyBlue": $greyBlue 110 | ); 111 | -------------------------------------------------------------------------------- /build/sass/basic/_display.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin display($type: block) { 4 | display: $type; 5 | } 6 | @mixin hide() { 7 | display: none; 8 | } 9 | @mixin hide-visually() { 10 | margin: -1px; 11 | padding: 0; 12 | width: 1px; 13 | height: 1px; 14 | overflow: hidden; 15 | clip: rect(0 0 0 0); 16 | clip: rect(0, 0, 0, 0); 17 | position: absolute; 18 | } 19 | @mixin show($type: block) { 20 | @include display($type); 21 | } 22 | 23 | // Opacity 24 | @mixin opacity($opacity: 0.60) { 25 | opacity: $opacity; 26 | $opacity-ie: $opacity * 100; 27 | filter:alpha(opacity=$opacity-ie); //IE8 28 | } 29 | @mixin transparency($transparency: 0.60) { 30 | @include opacity($transparency); 31 | } 32 | 33 | // Overflow 34 | @mixin overflow($overflow: visible, $orientation: false) { 35 | @if $orientation == vertical { 36 | overflow-y: $overflow; 37 | } @else if $orientation == horizontal { 38 | overflow-x: $overflow; 39 | } @else { 40 | overflow: $overflow; 41 | } 42 | } 43 | 44 | // Perspective 45 | @mixin perspective($perspective: 0px) { 46 | -webkit-perspective: $perspective; 47 | -moz-perspective: $perspective; 48 | perspective: $perspective; 49 | } 50 | 51 | // Visibility 52 | @mixin visibility($visibility: visible) { 53 | visibility: $visibility; 54 | } 55 | -------------------------------------------------------------------------------- /build/sass/basic/_drop-shadow.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin drop-shadow($color: fade-out(#000, 0.6), $size: 3px, $verticalOffset: 0px, $horizontalOffset: 0px) { 4 | box-shadow: $horizontalOffset $verticalOffset $size $color; 5 | -webkit-box-shadow: $horizontalOffset $verticalOffset $size $color; 6 | -moz-box-shadow: $horizontalOffset $verticalOffset $size $color; 7 | } 8 | @mixin drop-shadow-inset($color: fade-out(#000, 0.6), $size: 3px, $verticalOffset: 0px, $horizontalOffset: 0px) { 9 | box-shadow: inset $horizontalOffset $verticalOffset $size $color; 10 | -webkit-box-shadow: inset $horizontalOffset $verticalOffset $size $color; 11 | -moz-box-shadow: inset $horizontalOffset $verticalOffset $size $color; 12 | } 13 | @mixin drop-shadow-none() { 14 | box-shadow: none; 15 | -webkit-box-shadow: none; 16 | -moz-box-shadow: none; 17 | } 18 | -------------------------------------------------------------------------------- /build/sass/basic/_global.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | $fontFamily: 'Open Sans', Helvetica, Arial, sans-serif; 4 | 5 | @mixin global-setup() { 6 | @include global-model(); 7 | 8 | html { 9 | @include global-html(); 10 | } 11 | } 12 | @mixin global-model() { 13 | *, 14 | *:before, 15 | *:after { 16 | -webkit-box-sizing: border-box; 17 | -moz-box-sizing: border-box; 18 | box-sizing: border-box; 19 | } 20 | } 21 | @mixin global-html() { 22 | font-family: $fontFamily; 23 | color: lighten(#000, 20%); 24 | background-color: #fff; 25 | text-size-adjust: 100%; 26 | -ms-text-size-adjust: 100%; 27 | -webkit-texts-size-adjust: 100%; 28 | backface-visibility: hidden; 29 | -webkit-backface-visibility: hidden; 30 | 31 | body { 32 | margin: 0; 33 | padding: 0; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /build/sass/basic/_gradient.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | // Animated gradients 4 | @mixin gradient-animate-angle($topLeftColour, $bottomRightColour) { 5 | @include gradient-animate($topLeftColour, $bottomRightColour, 135deg); 6 | } 7 | @mixin gradient-animate-horizontal($leftColour, $rightColour) { 8 | @include gradient-animate(left, $leftColour, $rightColour); 9 | } 10 | @mixin gradient-animate-vertical($topColour, $bottomColour) { 11 | @include gradient-animate(top, $leftColour, $rightColour); 12 | } 13 | @mixin gradient-animate($colour1, $colour2, $angle) { 14 | @if $angle != top { 15 | background: linear-gradient($angle, $colour1, $colour2); 16 | } 17 | @else { 18 | background: linear-gradient($colour1, $colour2); 19 | } 20 | background-size: 400% 400%; 21 | -webkit-animation: GradientAnimation 30s ease infinite; 22 | -moz-animation: GradientAnimation 30s ease infinite; 23 | animation: GradientAnimation 30s ease infinite; 24 | 25 | @-webkit-keyframes GradientAnimation { 26 | 0% { 27 | background-position: 0 91%; 28 | } 29 | 50% { 30 | background-position: 100% 10%; 31 | } 32 | 100% { 33 | background-position: 0 91%; 34 | } 35 | } 36 | @-moz-keyframes GradientAnimation { 37 | 0% { 38 | background-position: 0 91%; 39 | } 40 | 50% { 41 | background-position: 100% 10%; 42 | } 43 | 100% { 44 | background-position: 0 91%; 45 | } 46 | } 47 | @keyframes GradientAnimation { 48 | 0% { 49 | background-position: 0 91%; 50 | } 51 | 50% { 52 | background-position: 100% 10%; 53 | } 54 | 100% { 55 | background-position: 0 91%; 56 | } 57 | } 58 | } 59 | @mixin gradient-animate-none() { 60 | background: none !important; 61 | background-size: auto; 62 | -webkit-animation: none; 63 | -moz-animation: none; 64 | animation: none; 65 | } 66 | // Gradients 67 | @mixin gradient-angle($leftColour, $rightColour, $angle: -45deg) { 68 | background: $leftColour; 69 | background: linear-gradient($angle, $leftColour 0%, $rightColour 100%); 70 | background: -moz-linear-gradient($angle, $leftColour 0%, $rightColour 100%); 71 | background: -ms-linear-gradient($angle, $leftColour 0%, $rightColour 100%); 72 | background: -webkit-linear-gradient($angle, $leftColour 0%, $rightColour 100%); 73 | } 74 | @mixin gradient-horizontal($leftColour, $rightColour) { 75 | background: $leftColour; 76 | background: linear-gradient(to right, $leftColour 0%, $rightColour 100%); 77 | background: -moz-linear-gradient(to right, $leftColour 0%, $rightColour 100%); 78 | background: -ms-linear-gradient(to right, $leftColour 0%, $rightColour 100%); 79 | background: -webkit-linear-gradient(to right, $leftColour 0%, $rightColour 100%); 80 | } 81 | @mixin gradient-vertical($topColour, $bottomColour) { 82 | background: $topColour; 83 | background: linear-gradient(to bottom, $topColour 0%, $bottomColour 100%); 84 | background: -moz-linear-gradient(to bottom, $topColour 0%, $bottomColour 100%); 85 | background: -ms-linear-gradient(to bottom, $topColour 0%, $bottomColour 100%); 86 | background: -webkit-linear-gradient(to bottom, $topColour 0%, $bottomColour 100%); 87 | } 88 | @mixin gradient-none() { 89 | background: none !important; 90 | } 91 | -------------------------------------------------------------------------------- /build/sass/basic/_input-types.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | // All inputs 4 | $all-inputs: 'input[type="text"], input[type="password"], input[type="time"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="week"], input[type="month"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="color"], input[type="radio"], input[type="checkbox"]'; 5 | $all-inputs-active: 'input[type="text"]:active, input[type="password"]:active, input[type="time"]:active, input[type="date"]:active, input[type="datetime"]:active, input[type="datetime-local"]:active, input[type="week"]:active, input[type="month"]:active, input[type="email"]:active, input[type="number"]:active, input[type="search"]:active, input[type="url"]:active, input[type="tel"]:active, input[type="color"]:active, input[type="radio"]:active, input[type="checkbox"]:active'; 6 | $all-inputs-focus: 'input[type="text"]:focus, input[type="password"]:focus, input[type="time"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="week"]:focus, input[type="month"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="color"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus'; 7 | $all-inputs-hover: 'input[type="text"]:hover, input[type="password"]:hover, input[type="time"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="week"]:hover, input[type="month"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="url"]:hover, input[type="tel"]:hover, input[type="color"]:hover, input[type="radio"]:hover, input[type="checkbox"]:hover'; 8 | 9 | // Basic inputs 10 | $basic-inputs: 'input[type="text"], input[type="password"], input[type="time"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="week"], input[type="month"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="color"]'; 11 | $basic-inputs-active: 'input[type="text"]:active, input[type="password"]:active, input[type="time"]:active, input[type="date"]:active, input[type="datetime"]:active, input[type="datetime-local"]:active, input[type="week"]:active, input[type="month"]:active, input[type="email"]:active, input[type="number"]:active, input[type="search"]:active, input[type="url"]:active, input[type="tel"]:active, input[type="color"]:active'; 12 | $basic-inputs-focus: 'input[type="text"]:focus, input[type="password"]:focus, input[type="time"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="week"]:focus, input[type="month"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="color"]:focus'; 13 | $basic-inputs-hover: 'input[type="text"]:hover, input[type="password"]:hover, input[type="time"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="week"]:hover, input[type="month"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="url"]:hover, input[type="tel"]:hover, input[type="color"]:hover'; 14 | 15 | // Check inputs 16 | $check-inputs: 'input[type="radio"], input[type="checkbox"]'; 17 | $check-inputs-active: 'input[type="radio"]:active, input[type="checkbox"]:active'; 18 | $check-inputs-focus: 'input[type="radio"]:focus, input[type="checkbox"]:focus'; 19 | $check-inputs-hover: 'input[type="radio"]:hover, input[type="checkbox"]:hover'; 20 | 21 | // Checkbox input 22 | $checkbox-input: 'input[type="checkbox"]'; 23 | $checkbox-input-active: 'input[type="checkbox"]:active'; 24 | $checkbox-input-focus: 'input[type="checkbox"]:focus'; 25 | $checkbox-input-hover: 'input[type="checkbox"]:hover'; 26 | 27 | // Radio input 28 | $radio-input: 'input[type="radio"]'; 29 | $radio-input-active: 'input[type="radio"]:active'; 30 | $radio-input-focus: 'input[type="radio"]:focus'; 31 | $radio-input-hover: 'input[type="radio"]:hover'; 32 | -------------------------------------------------------------------------------- /build/sass/basic/_interaction.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin cursor($cursor: auto) { 4 | cursor: $cursor; 5 | } 6 | -------------------------------------------------------------------------------- /build/sass/basic/_ios.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin ios-render() { 4 | perspective: 1000; 5 | -webkit-perspective: 1000; 6 | backface-visibility: hidden; 7 | -webkit-backface-visibility: hidden; 8 | } 9 | -------------------------------------------------------------------------------- /build/sass/basic/_layout.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | // Box sizing 4 | @mixin box-sizing($option: content-box) { 5 | -webkit-box-sizing: $option; 6 | -moz-box-sizing: $option; 7 | box-sizing: $option; 8 | } 9 | 10 | // Centering 11 | @mixin center() { 12 | margin: 0 auto; 13 | } 14 | @mixin center-vertical() { 15 | // As per: Sebastian Ekström 16 | // URL: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ 17 | position: relative; 18 | top: 50%; 19 | @include transform-translate-y(-50%); 20 | } 21 | 22 | // Fixes 23 | @mixin clearfix() { 24 | *zoom: 1; 25 | &:before, 26 | &:after { 27 | content: " "; 28 | display: table; 29 | } 30 | &:after { 31 | clear: both; 32 | } 33 | } 34 | 35 | // Floats 36 | @mixin float($float: left) { 37 | float: $float; 38 | } 39 | @mixin float-clear() { 40 | clear: both; 41 | } 42 | @mixin float-none() { 43 | @include float(none); 44 | } 45 | 46 | // Index 47 | @mixin z-index($index: 1) { 48 | z-index: $index; 49 | } 50 | @mixin level($index: 1) { 51 | @include z-index($index); 52 | } 53 | 54 | // Position 55 | @mixin position($position: relative, $arguments: false) { 56 | position: $position; 57 | @include position-set($arguments); 58 | } 59 | @mixin position-set($arguments: false) { 60 | @include position-arguments($arguments); 61 | } 62 | 63 | // Square 64 | @mixin square($size) { 65 | width: $size; 66 | height: $size; 67 | line-height: $size; 68 | text-align: center; 69 | } 70 | 71 | // Vertical align 72 | @mixin vertical-align($position) { 73 | vertical-align: $position; 74 | } 75 | -------------------------------------------------------------------------------- /build/sass/basic/_list.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin list-style($style: disc outside none) { 4 | list-style: $style; 5 | } 6 | @mixin list-style-image($url: none) { 7 | list-style-image: $url; 8 | } 9 | @mixin list-style-position($position: outside) { 10 | list-style-position: $position; 11 | } 12 | @mixin list-style-type($type: disc) { 13 | list-style-type: $type; 14 | } 15 | -------------------------------------------------------------------------------- /build/sass/basic/_responsive-layout.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | $columnLimit: 12 !default; 4 | $limitWidth: 68.750em !default; 5 | $breakMain: 43.813em !default; 6 | $minMax: false !default; 7 | 8 | // Row 9 | @mixin row() { 10 | width: 100%; 11 | &:before, 12 | &:after { 13 | content: " "; 14 | display: table; 15 | } 16 | &:after { 17 | clear: both; 18 | } 19 | } 20 | 21 | // Spans 22 | @mixin span($span: $columnLimit, $spanColumnLimit: $columnLimit) { 23 | float: left; 24 | position: relative; 25 | width: percentage($span / $spanColumnLimit); 26 | } 27 | @mixin span-new($span: $columnLimit, $spanColumnLimit: $columnLimit) { 28 | width: percentage($span / $spanColumnLimit); 29 | } 30 | @mixin span-reset() { 31 | @include span($columnLimit); 32 | @include offset(0); 33 | @include offset-right(0); 34 | } 35 | 36 | // Offsets 37 | @mixin offset($offBy, $spanColumnLimit: $columnLimit) { 38 | margin-left: percentage($offBy / $spanColumnLimit); 39 | } 40 | @mixin offset-right($offBy, $spanColumnLimit: $columnLimit) { 41 | margin-right: percentage($offBy / $spanColumnLimit); 42 | } 43 | 44 | // Layout 45 | @mixin limit($limit: $limitWidth) { 46 | width: 100%; 47 | max-width: $limit; 48 | margin: 0 auto; 49 | } 50 | 51 | // Breakpoint 52 | @mixin breakpoint($breakpoint, $breakpointType: false, $orientation: false) { 53 | @if $breakpoint == retina { 54 | @media screen and (-webkit-min-device-pixel-ratio: 1.75), 55 | (min-resolution: 168dpi) { 56 | @content; 57 | } 58 | } @else { 59 | /* Min max */ 60 | @if $breakpointType == false { 61 | @if $breakpoint == small { 62 | $minMax: max-width !global; 63 | } @else if $breakpoint == fluid { 64 | $minMax: max-width !global; 65 | } @else { 66 | $minMax: min-width !global; 67 | } 68 | } @else { 69 | @if $breakpointType == max { 70 | $minMax: max-width !global; 71 | } @else { 72 | $minMax: min-width !global; 73 | } 74 | } 75 | /* Breakpoint */ 76 | @if $breakpoint == large { 77 | $breakpoint: $breakMain; 78 | } @else if $breakpoint == fluid { 79 | $breakpoint: $limitWidth; 80 | } @else if $breakpoint == small { 81 | $breakpoint: $breakMain; 82 | } 83 | /* Return (check orientation) */ 84 | @if $orientation != false { 85 | @media only screen and ($minMax: $breakpoint) and (orientation : $orientation) { 86 | @content; 87 | } 88 | } @else { 89 | @media only screen and ($minMax: $breakpoint) { 90 | @content; 91 | } 92 | } 93 | } 94 | } 95 | @mixin breakpoint-vertical($breakpoint, $breakpointType: false, $orientation: false) { 96 | @if $breakpoint == retina { 97 | @media screen and (-webkit-min-device-pixel-ratio: 1.75), 98 | (min-resolution: 168dpi) { 99 | @content; 100 | } 101 | } 102 | @else { 103 | /* Min max */ 104 | @if $breakpointType == false { 105 | /* Large */ 106 | @if $breakpoint == small { 107 | $minMax: max-height !global; 108 | } @else if $breakpoint == fluid { 109 | $minMax: max-height !global; 110 | } @else { 111 | $minMax: min-height !global; 112 | } 113 | } @else { 114 | @if $breakpointType == max { 115 | $minMax: max-height !global; 116 | } @else { 117 | $minMax: min-height !global; 118 | } 119 | } 120 | /* Breakpoint */ 121 | @if $breakpoint == large { 122 | $breakpoint: $breakMain; 123 | } @else if $breakpoint == fluid { 124 | $breakpoint: $limitWidth; 125 | } @else if $breakpoint == small { 126 | $breakpoint: $breakMain; 127 | } 128 | /* Return (check orientation) */ 129 | @if $orientation != false { 130 | @media only screen and ($minMax: $breakpoint) and (orientation : $orientation) { 131 | @content; 132 | } 133 | } @else { 134 | @media only screen and ($minMax: $breakpoint) { 135 | @content; 136 | } 137 | } 138 | } 139 | } 140 | 141 | // Flexbox 142 | // Based on: https://github.com/zessx/sass-flexbox/blob/master/sass-flexbox.scss 143 | // By: Samuel Marchal 144 | @mixin align-content($align: flex-start) { 145 | @if $align == flex-start { 146 | -ms-flex-line-pack: start; 147 | -webkit-align-content: flex-start; 148 | -moz-align-content: flex-start; 149 | align-content: flex-start; 150 | } @else if $align == flex-end { 151 | -ms-flex-line-pack: end; 152 | -webkit-align-content: flex-end; 153 | -moz-align-content: flex-end; 154 | align-content: flex-end; 155 | } @else if $align == center { 156 | -ms-flex-line-pack: center; 157 | -webkit-align-content: center; 158 | -moz-align-content: center; 159 | align-content: center; 160 | } @else if $align == space-between { 161 | -ms-flex-line-pack: space-between; 162 | -webkit-align-content: space-between; 163 | -moz-align-content: space-between; 164 | align-content: space-between; 165 | } @else if $align == space-around { 166 | -ms-flex-line-pack: space-around; 167 | -webkit-align-content: space-around; 168 | -moz-align-content: space-around; 169 | align-content: space-around; 170 | } @else if $align == stretch { 171 | -ms-flex-line-pack: stretch; 172 | -webkit-align-content: stretch; 173 | -moz-align-content: stretch; 174 | align-content: stretch; 175 | } @else { 176 | -ms-flex-line-pack: inherit; 177 | -webkit-align-content: inherit; 178 | -moz-align-content: inherit; 179 | align-content: inherit; 180 | } 181 | } 182 | @mixin align-items($align: flex-start) { 183 | @if $align == flex-start { 184 | -webkit-box-align: start; 185 | -ms-flex-align: start; 186 | -webkit-align-items: flex-start; 187 | -moz-align-items: flex-start; 188 | align-items: flex-start; 189 | } @else if $align == flex-end { 190 | -webkit-box-align: end; 191 | -ms-flex-align: end; 192 | -webkit-align-items: flex-end; 193 | -moz-align-items: flex-end; 194 | align-items: flex-end; 195 | } @else if $align == center { 196 | -webkit-box-align: center; 197 | -ms-flex-align: center; 198 | -webkit-align-items: center; 199 | -moz-align-items: center; 200 | align-items: center; 201 | } @else if $align == baseline { 202 | -webkit-box-align: baseline; 203 | -ms-flex-align: baseline; 204 | -webkit-align-items: baseline; 205 | -moz-align-items: baseline; 206 | align-items: baseline; 207 | } @else if $align == stretch { 208 | -webkit-box-align: stretch; 209 | -ms-flex-align: stretch; 210 | -webkit-align-items: stretch; 211 | -moz-align-items: stretch; 212 | align-items: stretch; 213 | } @else { 214 | -webkit-box-align: inherit; 215 | -ms-flex-align: inherit; 216 | -webkit-align-items: inherit; 217 | -moz-align-items: inherit; 218 | align-items: inherit; 219 | } 220 | } 221 | @mixin align-self($align: auto) { 222 | @if $align == auto { 223 | -ms-flex-item-align: auto; 224 | -webkit-align-self: auto; 225 | -moz-align-self: auto; 226 | align-self: auto; 227 | } @else if $align == flex-start { 228 | -ms-flex-item-align: start; 229 | -webkit-align-self: flex-start; 230 | -moz-align-self: flex-start; 231 | align-self: flex-start; 232 | } @else if $align == flex-end { 233 | -ms-flex-item-align: end; 234 | -webkit-align-self: flex-end; 235 | -moz-align-self: flex-end; 236 | align-self: flex-end; 237 | } @else if $align == center { 238 | -ms-flex-item-align: center; 239 | -webkit-align-self: center; 240 | -moz-align-self: center; 241 | align-self: center; 242 | } @else if $align == baseline { 243 | -ms-flex-item-align: baseline; 244 | -webkit-align-self: baseline; 245 | -moz-align-self: baseline; 246 | align-self: baseline; 247 | } @else if $align == stretch { 248 | -ms-flex-item-align: stretch; 249 | -webkit-align-self: stretch; 250 | -moz-align-self: stretch; 251 | align-self: stretch; 252 | } @else { 253 | -ms-flex-item-align: inherit; 254 | -webkit-align-self: inherit; 255 | -moz-align-self: inherit; 256 | align-self: inherit; 257 | } 258 | } 259 | @mixin flex($grow: 0, $shrink: 1, $basis: auto) { 260 | @include flex-grow($grow); 261 | @include flex-shrink($shrink); 262 | @include flex-basis($basis); 263 | } 264 | @mixin flex-basis($basis: auto) { 265 | -webkit-flex-basis: $basis; 266 | -moz-flex-basis: $basis; 267 | -ms-flex-preferred-size: $basis; 268 | flex-basis: $basis; 269 | } 270 | @mixin flex-direction($direction: row) { 271 | @if $direction == row { 272 | -webkit-box-orient: horizontal; 273 | -moz-box-orient: horizontal; 274 | -webkit-flex-direction: row; 275 | -moz-flex-direction: row; 276 | -ms-flex-direction: row; 277 | flex-direction: row; 278 | } @else if $direction == row-reverse { 279 | -webkit-box-orient: horizontal; 280 | -moz-box-orient: horizontal; 281 | -webkit-box-direction: reverse; 282 | -moz-box-direction: reverse; 283 | -webkit-flex-direction: row-reverse; 284 | -moz-flex-direction: row-reverse; 285 | -ms-flex-direction: row-reverse; 286 | flex-direction: row-reverse; 287 | } @else if $direction == column { 288 | -webkit-box-orient: vertical; 289 | -moz-box-orient: vertical; 290 | -webkit-flex-direction: column; 291 | -moz-flex-direction: column; 292 | -ms-flex-direction: column; 293 | flex-direction: column; 294 | } @else if $direction == column-reverse { 295 | -webkit-box-orient: vertical; 296 | -moz-box-orient: vertical; 297 | -webkit-box-direction: reverse; 298 | -moz-box-direction: reverse; 299 | -webkit-flex-direction: column-reverse; 300 | -moz-flex-direction: column-reverse; 301 | -ms-flex-direction: column-reverse; 302 | flex-direction: column-reverse; 303 | } @else { 304 | -webkit-box-orient: inherit; 305 | -moz-box-orient: inherit; 306 | -webkit-flex-direction: inherit; 307 | -moz-flex-direction: inherit; 308 | -ms-flex-direction: inherit; 309 | flex-direction: inherit; 310 | } 311 | } 312 | @mixin flex-display($display: normal) { 313 | @if $display == inline { 314 | display: -webkit-inline-flex; 315 | display: inline-flex; 316 | } @else { 317 | display: -webkit-box; 318 | display: -moz-box; 319 | display: -webkit-flexbox; 320 | display: -ms-flexbox; 321 | display: -webkit-flex; 322 | display: flex; 323 | } 324 | } 325 | @mixin flex-flow($direction, $wrap) { 326 | @include flex-direction($direction); 327 | @include flex-wrap($wrap); 328 | } 329 | @mixin flex-grow($grow: 0) { 330 | -webkit-flex-grow: $grow; 331 | -webkit-box-flex: $grow; 332 | -moz-flex-grow: $grow; 333 | -ms-flex-positive: $grow; 334 | flex-grow: $grow; 335 | } 336 | @mixin flex-shrink($shrink: 1) { 337 | -webkit-flex-shrink: $shrink; 338 | -webkit-box-flex: $shrink; 339 | -moz-flex-shrink: $shrink; 340 | -ms-flex-negative: $shrink; 341 | flex-shrink: $shrink; 342 | } 343 | @mixin flex-wrap($wrap: nowrap) { 344 | @if $wrap == nowrap { 345 | -webkit-flex-wrap: nowrap; 346 | -moz-flex-wrap: nowrap; 347 | -ms-flex-wrap: none; 348 | flex-wrap: nowrap; 349 | } @else if $wrap == wrap { 350 | -webkit-flex-wrap: wrap; 351 | -moz-flex-wrap: wrap; 352 | -ms-flex-wrap: wrap; 353 | flex-wrap: wrap; 354 | } @else if $wrap == wrap-reverse { 355 | -webkit-flex-wrap: wrap-reverse; 356 | -moz-flex-wrap: wrap-reverse; 357 | -ms-flex-wrap: wrap-reverse; 358 | flex-wrap: wrap-reverse; 359 | } @else { 360 | -webkit-flex-wrap: inherit; 361 | -moz-flex-wrap: inherit; 362 | -ms-flex-wrap: inherit; 363 | flex-wrap: inherit; 364 | } 365 | } 366 | @mixin justify-content($content: flex-start) { 367 | @if $content == flex-start { 368 | -webkit-box-pack: start; 369 | -moz-box-pack: start; 370 | -webkit-flex-pack: start; 371 | -ms-flex-pack: start; 372 | -moz-justify-content: flex-start; 373 | -webkit-justify-content: flex-start; 374 | justify-content: flex-start; 375 | } @else if $content == flex-end { 376 | -webkit-box-pack: end; 377 | -moz-box-pack: end; 378 | -webkit-flex-pack: end; 379 | -ms-flex-pack: end; 380 | -moz-justify-content: flex-end; 381 | -webkit-justify-content: flex-end; 382 | justify-content: flex-end; 383 | } @else if $content == center { 384 | -webkit-box-pack: center; 385 | -moz-box-pack: center; 386 | -webkit-flex-pack: center; 387 | -ms-flex-pack: center; 388 | -moz-justify-content: center; 389 | -webkit-justify-content: center; 390 | justify-content: center; 391 | } @else if $content == space-between { 392 | -webkit-box-pack: justify; 393 | -moz-box-pack: justify; 394 | -webkit-flex-pack: justify; 395 | -ms-flex-pack: justify; 396 | -moz-justify-content: space-between; 397 | -webkit-justify-content: space-between; 398 | justify-content: space-between; 399 | } @else if $content == space-around { 400 | -moz-justify-content: space-around; 401 | -webkit-justify-content: space-around; 402 | justify-content: space-around; 403 | } @else { 404 | -webkit-box-pack: inherit; 405 | -moz-box-pack: inherit; 406 | -webkit-flex-pack: inherit; 407 | -ms-flex-pack: inherit; 408 | -moz-justify-content: inherit; 409 | -webkit-justify-content: inherit; 410 | justify-content: inherit; 411 | } 412 | } 413 | @mixin order($order: 0) { 414 | -webkit-box-ordinal-group: ($order + 1); 415 | -moz-box-ordinal-group: $order; 416 | -ms-flex-order: $order; 417 | -webkit-order: $order; 418 | -moz-order: $order; 419 | order: $order; 420 | } 421 | -------------------------------------------------------------------------------- /build/sass/basic/_size.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin size($width: 0px, $height: 0px) { 4 | @include width($width); 5 | @include height($height); 6 | } 7 | @mixin height($height: 0px, $heightMax: false, $heightMin: false) { 8 | height: $height; 9 | @if $heightMax != false { 10 | @include height-max($heightMax); 11 | } 12 | @if $heightMin != false { 13 | @include height-min($heightMin); 14 | } 15 | } 16 | @mixin height-max($height: 0px) { 17 | max-height: $height; 18 | } 19 | @mixin height-min($height: 0px) { 20 | min-height: $height; 21 | } 22 | @mixin width($width: 0px, $widthMax: false, $widthMin: false) { 23 | width: $width; 24 | @if $widthMax != false { 25 | @include width-max($widthMax); 26 | } 27 | @if $widthMin != false { 28 | @include width-min($widthMin); 29 | } 30 | } 31 | @mixin width-max($width: 0px) { 32 | max-width: $width; 33 | } 34 | @mixin width-min($width: 0px) { 35 | min-width: $width; 36 | } 37 | -------------------------------------------------------------------------------- /build/sass/basic/_spacing.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | $spaceBase: 24px !default; 4 | $spaceSmall: $spaceBase / 2; 5 | $spaceMedium: $spaceBase * 2; 6 | $spaceLarge: $spaceBase * 3; 7 | 8 | $spaceBaseEm: 1.250em !default; 9 | $spaceSmallEm: $spaceBaseEm / 2; 10 | $spaceMediumEm: $spaceBaseEm * 2; 11 | $spaceLargeEm: $spaceBaseEm * 3; 12 | 13 | // Margins 14 | @mixin margin($spacing: $spaceBase) { 15 | margin: $spacing; 16 | } 17 | @mixin margin-top($spacing: $spaceBase) { 18 | margin-top: $spacing; 19 | } 20 | @mixin margin-bottom($spacing: $spaceBase) { 21 | margin-bottom: $spacing; 22 | } 23 | @mixin margin-left($spacing: $spaceBase) { 24 | margin-left: $spacing; 25 | } 26 | @mixin margin-right($spacing: $spaceBase) { 27 | margin-right: $spacing; 28 | } 29 | @mixin margin-vertical($spacing: $spaceBase) { 30 | @include margin-top($spacing); 31 | @include margin-bottom($spacing); 32 | } 33 | @mixin margin-horizontal($spacing: $spaceBase) { 34 | @include margin-left($spacing); 35 | @include margin-right($spacing); 36 | } 37 | @mixin margin-none() { 38 | margin: 0; 39 | } 40 | 41 | // Padding 42 | @mixin padding($spacing: $spaceBase) { 43 | padding: $spacing; 44 | } 45 | @mixin padding-top($spacing: $spaceBase) { 46 | padding-top: $spacing; 47 | } 48 | @mixin padding-bottom($spacing: $spaceBase) { 49 | padding-bottom: $spacing; 50 | } 51 | @mixin padding-left($spacing: $spaceBase) { 52 | padding-left: $spacing; 53 | } 54 | @mixin padding-right($spacing: $spaceBase) { 55 | padding-right: $spacing; 56 | } 57 | @mixin padding-vertical($spacing: $spaceBase) { 58 | @include padding-top($spacing); 59 | @include padding-bottom($spacing); 60 | } 61 | @mixin padding-horizontal($spacing: $spaceBase) { 62 | @include padding-left($spacing); 63 | @include padding-right($spacing); 64 | } 65 | @mixin padding-none() { 66 | padding: 0; 67 | } 68 | 69 | // Spacing reset 70 | @mixin spacing-none() { 71 | padding: 0; 72 | margin: 0; 73 | } 74 | -------------------------------------------------------------------------------- /build/sass/basic/_text.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif; 4 | $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; 5 | $impact: Impact, Charcoal, sans-serif; 6 | $lato: 'Lato', sans-serif; 7 | $lucindaGrande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 8 | $monospace: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; 9 | $openSans: 'Open Sans', Helvetica, Arial, sans-serif; 10 | $roboto: 'Roboto', 'Helvetic Neue', Helvetica, Arial; 11 | $tahoma: Tahoma, Geneva, sans-serif; 12 | $timesNewRoman: "Times New Roman", Times, serif; 13 | $trebuchet: "Trebuchet MS", Helvetica, sans-serif; 14 | $verdana: Verdana, Geneva, sans-serif; 15 | 16 | $sizeBase: 16px; 17 | $sizeSmall: 14px; 18 | $sizeMedium: 18px; 19 | $sizeLarge: 24px; 20 | 21 | $weightBase: 400; 22 | $weightThin: 100; 23 | $weightLight: 300; 24 | $weightBold: 700; 25 | $weightHeavy: 900; 26 | 27 | // Font 28 | @mixin font-family($font: $openSans) { 29 | font-family: $font; 30 | } 31 | @mixin font-size($size: $sizeBase) { 32 | font-size: $size; 33 | font-size: calculate-rem-size($size); 34 | } 35 | @mixin font-style($style: normal) { 36 | font-style: $style; 37 | } 38 | @mixin font-weight($weight: normal) { 39 | font-weight: $weight; 40 | } 41 | @mixin line-height($lineHeight: $sizeBase) { 42 | line-height: $lineHeight; 43 | line-height: calculate-rem-size($lineHeight); 44 | } 45 | @mixin letter-spacing($letterSpacing: normal) { 46 | letter-spacing: $letterSpacing; 47 | } 48 | 49 | // Text 50 | @mixin text($arguments: false) { 51 | @include text-arguments($arguments); 52 | } 53 | @mixin text-align($align: left) { 54 | text-align: $align; 55 | } 56 | @mixin text-colour($colour: $white) { 57 | color: $colour; 58 | } 59 | @mixin text-decoration($decoration: none) { 60 | text-decoration: $decoration; 61 | } 62 | @mixin text-ellipsis($width: 100%) { 63 | display: inline-block; 64 | max-width: $width; 65 | overflow: hidden; 66 | text-overflow: ellipsis; 67 | white-space: nowrap; 68 | word-wrap: normal; 69 | } 70 | @mixin text-font($font: $helvetica) { 71 | @include font-family($font); 72 | } 73 | @mixin text-hide() { 74 | border: 0; 75 | font: 0/0 a; 76 | text-shadow: none; 77 | color: transparent; 78 | background-color: transparent; 79 | } 80 | @mixin text-hyphen($type: none) { 81 | -webkit-hyphens: $type; 82 | -moz-hyphens: $type; 83 | -ms-hyphens: $type; 84 | hyphens: $type; 85 | } 86 | @mixin text-letter-spacing($letterSpacing: normal) { 87 | @include letter-spacing($letterSpacing); 88 | } 89 | @mixin text-line-height($lineHeight: $sizeBase) { 90 | @include line-height($lineHeight); 91 | } 92 | @mixin text-shadow($distance: 2px, $blur: 2px, $colour: fade-out(#000, 0.5), $angle: 0px) { 93 | text-shadow: $angle $distance $blur $colour; 94 | } 95 | 96 | @mixin text-size($size: $sizeBase) { 97 | @if $size == small { 98 | @include font-size($sizeSmall); 99 | } @else if $size == base { 100 | @include font-size($sizeBase); 101 | } @else if $size == medium { 102 | @include font-size($sizeMedium); 103 | } @else if $size == large { 104 | @include font-size($sizeLarge); 105 | } @else { 106 | @include font-size($size); 107 | } 108 | } 109 | @mixin text-style($style: normal) { 110 | @include font-style($style); 111 | } 112 | @mixin text-transform($transform: none) { 113 | text-transform: $transform; 114 | } 115 | @mixin text-weight($weight: normal) { 116 | @if $weight == thin { 117 | @include font-weight($weightThin); 118 | } @else if $weight == light { 119 | @include font-weight($weightLight); 120 | } @else if $weight == base { 121 | @include font-weight($weightBase); 122 | } @else if $weight == bold { 123 | @include font-weight($weightBold); 124 | } @else if $weight == heavy { 125 | @include font-weight($weightHeavy); 126 | } @else { 127 | @include font-weight($weight); 128 | } 129 | } 130 | @mixin text-wrap($wrap: break-word) { 131 | overflow-wrap: $wrap; 132 | word-wrap: $wrap; 133 | @if $wrap == break-word { 134 | word-break: break-all; 135 | } @else { 136 | word-break: $wrap; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /build/sass/basic/_transform.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin transform($anything) { 4 | -webkit-transform: $anything; 5 | -o-transform: $anything; 6 | -moz-transform: $anything; 7 | transform: $anything; 8 | } 9 | @mixin transform-origin($x: 50%, $y: 50%, $z: 0) { 10 | -webkit-transform-origin: $x $y $z; 11 | -o-transform-origin: $x $y $z; 12 | -moz-transform-origin: $x $y $z; 13 | transform-origin: $x $y $z; 14 | }; 15 | @mixin transform-rotate($rotate: 0deg) { 16 | @include transform(rotate($rotate)); 17 | } 18 | @mixin transform-rotate-x($rotate: 0deg) { 19 | @include transform(rotateX($rotate)); 20 | } 21 | @mixin transform-rotate-y($rotate: 0deg) { 22 | @include transform(rotateY($rotate)); 23 | } 24 | @mixin transform-rotate-z($rotate: 0deg) { 25 | @include transform(rotateZ($rotate)); 26 | } 27 | @mixin transform-scale($x: 1, $y: 1) { 28 | @include transform(scale($x, $y)); 29 | } 30 | @mixin transform-scale-3d($x: 1, $y: 1, $z: 1) { 31 | @include transform(scale3d($x, $y, $z)); 32 | } 33 | @mixin transform-translate-3d($x: 0px, $y: 0px, $z: 0px) { 34 | @include transform(translate3d($x, $y, $z)); 35 | } 36 | @mixin transform-translate-x($x: 0px) { 37 | @include transform(translateX($x)); 38 | } 39 | @mixin transform-translate-y($y: 0px) { 40 | @include transform(translateY($y)); 41 | } 42 | @mixin transform-translate-z($z: 0px) { 43 | @include transform(translateZ($z)); 44 | } 45 | 46 | // Transform easing 47 | @mixin transform-easing($x: 0px, $y: 0px, $z: 0px, $transitionSpeed: 0.2s) { 48 | @include transform-translate-3d($x, $y, $z); 49 | -webkit-transition: -webkit-transform $transitionSpeed ease-out; 50 | -o-transition: -o-transform $transitionSpeed ease-out; 51 | -moz-transition: -moz-transform $transitionSpeed ease-out; 52 | transition: transform $transitionSpeed ease-out; 53 | } 54 | -------------------------------------------------------------------------------- /build/sass/css/_background.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin mod-propel-background() { 4 | ._back-pos-left { 5 | @include background-position(left); 6 | } 7 | ._back-pos-right { 8 | @include background-position(right); 9 | } 10 | ._back-pos-top { 11 | @include background-position(top); 12 | } 13 | ._back-pos-bottom { 14 | @include background-position(bottom); 15 | } 16 | ._back-pos-center { 17 | @include background-position(center); 18 | } 19 | ._back-repeat-none { 20 | @include background-repeat(no-repeat); 21 | } 22 | ._back-repeat-vertical { 23 | @include background-repeat(repeat-y); 24 | } 25 | ._back-repeat-horizontal { 26 | @include background-repeat(repeat-x); 27 | } 28 | ._back-single { 29 | @include background-single(); 30 | } 31 | ._back-contain { 32 | @include background-contain(); 33 | } 34 | ._back-cover { 35 | @include background-cover(); 36 | } 37 | ._back-black { 38 | @include background-colour($black); 39 | } 40 | ._back-grey { 41 | @include background-colour($grey); 42 | } 43 | ._back-greyLight { 44 | @include background-colour($greyLight); 45 | } 46 | ._back-greyXLight { 47 | @include background-colour($greyXLight); 48 | } 49 | ._back-white { 50 | @include background-colour($white); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /build/sass/css/_display.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin mod-propel-display() { 4 | ._show { 5 | @include show(); 6 | } 7 | ._hide { 8 | @include hide(); 9 | } 10 | ._hide-visually { 11 | @include hide-visually(); 12 | } 13 | ._opacity-100 { 14 | @include opacity(1); 15 | } 16 | ._opacity-75 { 17 | @include opacity(0.75); 18 | } 19 | ._opacity-50 { 20 | @include opacity(0.5); 21 | } 22 | ._opacity-25 { 23 | @include opacity(0.25); 24 | } 25 | ._opacity-0 { 26 | @include opacity(0); 27 | } 28 | @include breakpoint(large) { 29 | ._show-small { 30 | @include hide(); 31 | } 32 | ._show-large { 33 | @include show(); 34 | } 35 | ._hide-large { 36 | @include hide(); 37 | } 38 | } 39 | @include breakpoint(small) { 40 | ._show-small { 41 | @include show(); 42 | } 43 | ._hide-small { 44 | @include hide(); 45 | } 46 | ._show-large { 47 | @include hide(); 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /build/sass/css/_execute.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin rocket-propel-css() { 4 | @include mod-propel-global(); 5 | 6 | @include mod-propel-layout(); 7 | @include mod-propel-responsive-layout(); 8 | @include mod-propel-display(); 9 | @include mod-propel-position(); 10 | @include mod-propel-text(); 11 | @include mod-propel-background(); 12 | @include mod-propel-sizing(); 13 | @include mod-propel-spacing(); 14 | } 15 | -------------------------------------------------------------------------------- /build/sass/css/_global.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin mod-propel-global() { 4 | html._propel { 5 | @include global-html(); 6 | @include global-model(); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /build/sass/css/_layout.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin mod-propel-layout() { 4 | ._float-none { 5 | @include float-none(); 6 | } 7 | ._float-left { 8 | @include float(left); 9 | } 10 | ._float-right { 11 | @include float(right); 12 | } 13 | ._float-clear { 14 | @include float-clear(); 15 | } 16 | ._center { 17 | @include center(); 18 | } 19 | ._center-vertical { 20 | @include center-vertical(); 21 | } 22 | ._valign-top { 23 | @include vertical-align(top); 24 | } 25 | ._valign-middle { 26 | @include vertical-align(middle); 27 | } 28 | ._valign-bottom { 29 | @include vertical-align(bottom); 30 | } 31 | 32 | /* Limit */ 33 | ._limit, 34 | ._limit-x2Small, 35 | ._limit-xSmall, 36 | ._limit-small, 37 | ._limit-minor, 38 | ._limit-medium, 39 | ._limit-large { 40 | @include limit(); 41 | } 42 | ._limit-x2Small { 43 | @include width-max(25em); 44 | } 45 | ._limit-xSmall { 46 | @include width-max(40em); 47 | } 48 | ._limit-small { 49 | @include width-max(54em); 50 | } 51 | ._limit-minor { 52 | @include width-max(60em); 53 | } 54 | ._limit-medium { 55 | @include width-max(80em); 56 | } 57 | ._limit-large { 58 | @include width-max(90em); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /build/sass/css/_position.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin mod-propel-position() { 4 | ._pos-absolute { 5 | @include position(absolute); 6 | } 7 | ._pos-relative { 8 | @include position(relative); 9 | } 10 | ._pos-static { 11 | @include position(static); 12 | } 13 | ._pos-fixed { 14 | @include position(fixed); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /build/sass/css/_responsive-layout.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin mod-propel-responsive-layout() { 4 | ._row { 5 | @include row(); 6 | ._row { 7 | @include width(auto); 8 | } 9 | [class *= "_span-"] { 10 | @include position(relative); 11 | @include float(left); 12 | } 13 | 14 | @for $index from 1 through $columnLimit { 15 | ._span-#{$index} { 16 | @include span-new($index); 17 | } 18 | } 19 | 20 | @for $index from 1 through ($columnLimit - 1) { 21 | ._offset-#{$index} { 22 | @include offset($index); 23 | } 24 | ._offset-right-#{$index} { 25 | @include offset-right($index); 26 | } 27 | } 28 | } 29 | /* Limit */ 30 | ._limit { 31 | @include limit(); 32 | } 33 | /* Large view */ 34 | @include breakpoint($bpLarge) { 35 | ._row { 36 | @for $index from 1 through $columnLimit { 37 | ._span-large-#{$index} { 38 | @include span-new($index); 39 | } 40 | } 41 | 42 | @for $index from 1 through ($columnLimit - 1) { 43 | ._offset-large-#{$index} { 44 | @include offset($index); 45 | } 46 | ._offset-large-right-#{$index} { 47 | @include offset-right($index); 48 | } 49 | } 50 | } 51 | } 52 | /* Small view */ 53 | @include breakpoint($bpSmall) { 54 | ._row { 55 | @for $index from 1 through $columnLimit { 56 | ._span-small-#{$index} { 57 | @include span-new($index); 58 | } 59 | } 60 | 61 | @for $index from 1 through ($columnLimit - 1) { 62 | ._offset-small-#{$index} { 63 | @include offset($index); 64 | } 65 | ._offset-small-right-#{$index} { 66 | @include offset-right($index); 67 | } 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /build/sass/css/_sizing.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin mod-propel-sizing() { 4 | ._block-height-10 { 5 | @include height(10px); 6 | } 7 | ._block-height-20 { 8 | @include height(20px); 9 | } 10 | ._block-height-50 { 11 | @include height(50px); 12 | } 13 | ._block-height-100 { 14 | @include height(100px); 15 | } 16 | ._block-height-200 { 17 | @include height(200px); 18 | } 19 | ._block-height-500 { 20 | @include height(500px); 21 | } 22 | ._block-height-1000 { 23 | @include height(1000px); 24 | } 25 | ._block-width-10 { 26 | @include width(10px); 27 | } 28 | ._block-width-20 { 29 | @include width(20px); 30 | } 31 | ._block-width-50 { 32 | @include width(50px); 33 | } 34 | ._block-width-100 { 35 | @include width(109px); 36 | } 37 | ._block-width-200 { 38 | @include width(200px); 39 | } 40 | ._block-width-500 { 41 | @include width(500px); 42 | } 43 | ._block-width-1000 { 44 | @include width(1000px); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /build/sass/css/_spacing.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | $spacingLimit: 10 !default; 4 | 5 | @mixin mod-propel-spacing() { 6 | ._spacing-none { 7 | @include spacing-none(); 8 | } 9 | ._pad-none { 10 | @include padding(0px); 11 | } 12 | ._mgn-none { 13 | @include margin(0px); 14 | } 15 | 16 | // Spacing loop. 17 | @for $index from 1 through $spacingLimit { 18 | $multiplication: 1px; 19 | $className: ($index * 1); 20 | 21 | ._pad-#{$className} { 22 | @include padding($multiplication * $index); 23 | } 24 | ._pad-top-#{$className} { 25 | @include padding-right($multiplication * $index); 26 | } 27 | ._pad-left-#{$className} { 28 | @include padding-left($multiplication * $index); 29 | } 30 | ._pad-top-#{$className} { 31 | @include padding-top($multiplication * $index); 32 | } 33 | ._pad-bottom-#{$className} { 34 | @include padding-bottom($multiplication * $index); 35 | } 36 | ._mgn-#{$className} { 37 | @include margin($multiplication * $index); 38 | } 39 | ._mgn-top-#{$className} { 40 | @include margin-right($multiplication * $index); 41 | } 42 | ._mgn-left-#{$className} { 43 | @include margin-left($multiplication * $index); 44 | } 45 | ._mgn-top-#{$className} { 46 | @include margin-top($multiplication * $index); 47 | } 48 | ._mgn-bottom-#{$className} { 49 | @include margin-bottom($multiplication * $index); 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /build/sass/css/_text.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @mixin mod-propel-text() { 4 | ._txt-hide { 5 | @include text-hide(); 6 | } 7 | ._txt-left { 8 | @include text-align(left); 9 | } 10 | ._txt-center { 11 | @include text-align(center); 12 | } 13 | ._txt-right { 14 | @include text-align(right); 15 | } 16 | ._txt-size-large { 17 | @include text-size(large); 18 | } 19 | ._txt-size-medium { 20 | @include text-size(medium); 21 | } 22 | ._txt-size-default { 23 | @include text-size(base); 24 | } 25 | ._txt-size-s { 26 | @include text-size(small); 27 | } 28 | ._txt-weight-xb { 29 | @include text-weight(heavy); 30 | } 31 | ._txt-weight-b, ._txt-bold { 32 | @include text-weight(bold); 33 | } 34 | ._txt-weight-default { 35 | @include text-weight(base); 36 | } 37 | ._txt-weight-l, ._txt-light { 38 | @include text-weight(light); 39 | } 40 | ._txt-weight-xl, ._txt-thin { 41 | @include text-weight(thin); 42 | } 43 | ._txt-weight-xl { 44 | @include text-weight(100); 45 | } 46 | ._txt-normal { 47 | @include text-weight(normal); 48 | } 49 | ._txt-italics { 50 | @include text-style(italic); 51 | } 52 | ._txt-oblique { 53 | @include text-style(oblique); 54 | } 55 | ._txt-white { 56 | @include text-colour($white); 57 | } 58 | ._txt-grey { 59 | @include text-colour($grey); 60 | } 61 | 62 | @include breakpoint($bpLarge) { 63 | ._txt-size-l-large { 64 | @include text-size(large); 65 | } 66 | ._txt-size-m-large { 67 | @include text-size(medium); 68 | } 69 | ._txt-size-n-large { 70 | @include text-size(base); 71 | } 72 | ._txt-size-s-large { 73 | @include text-size(small); 74 | } 75 | ._txt-weight-xb-large { 76 | @include text-weight(heavy); 77 | } 78 | ._txt-weight-b-large, ._txt-bold-large { 79 | @include text-weight(bold); 80 | } 81 | ._txt-weight-n-large { 82 | @include text-weight(base); 83 | } 84 | ._txt-weight-l-large, ._txt-light-large { 85 | @include text-weight(light); 86 | } 87 | ._txt-weight-xl-large { 88 | @include text-weight(thin); 89 | } 90 | ._txt-normal-large { 91 | @include text-weight(base); 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /build/sass/development/_function.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @function calculate-rem-size($size) { 4 | $remSize: $size / 16px; 5 | @return $remSize * 1rem; 6 | } 7 | -------------------------------------------------------------------------------- /build/sass/development/_mixin.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | // Position argument 4 | @mixin position-arguments($arguments: false) { 5 | // As per: Hugo Giraudel 6 | // URL: http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/ 7 | @if $arguments != false { 8 | $offsets: top right bottom left margin-top margin-right margin-bottom margin-left; 9 | 10 | @each $o in $offsets { 11 | $i: index($arguments, $o); 12 | 13 | @if $i 14 | and $i + 1 <= length($arguments) 15 | and type-of( nth($arguments, $i + 1) ) == number { 16 | #{$o}: nth($arguments, $i + 1); 17 | } 18 | } 19 | } 20 | } 21 | 22 | // Text arguments 23 | @mixin text-arguments($arguments: false) { 24 | @if $arguments != false { 25 | $offsets: text-align color font-family; 26 | 27 | @each $o in $offsets { 28 | $i: index($arguments, $o); 29 | 30 | @if $i 31 | and $i + 1 <= length($arguments) { 32 | #{$o}: nth($arguments, $i + 1); 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /build/sass/propel.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @import "import"; 4 | @include rocket-propel-css(); 5 | -------------------------------------------------------------------------------- /css/propel.min.css: -------------------------------------------------------------------------------- 1 | html._propel { 2 | font-family: "Open Sans", Helvetica, Arial, sans-serif; 3 | color: #333333; 4 | background-color: #fff; 5 | text-size-adjust: 100%; 6 | -ms-text-size-adjust: 100%; 7 | -webkit-texts-size-adjust: 100%; 8 | backface-visibility: hidden; 9 | -webkit-backface-visibility: hidden; 10 | } 11 | html._propel body { 12 | margin: 0; 13 | padding: 0; 14 | } 15 | html._propel *, 16 | html._propel *:before, 17 | html._propel *:after { 18 | -webkit-box-sizing: border-box; 19 | -moz-box-sizing: border-box; 20 | box-sizing: border-box; 21 | } 22 | 23 | ._float-none { 24 | float: none; 25 | } 26 | 27 | ._float-left { 28 | float: left; 29 | } 30 | 31 | ._float-right { 32 | float: right; 33 | } 34 | 35 | ._float-clear { 36 | clear: both; 37 | } 38 | 39 | ._center { 40 | margin: 0 auto; 41 | } 42 | 43 | ._center-vertical { 44 | position: relative; 45 | top: 50%; 46 | -webkit-transform: translateY(-50%); 47 | -o-transform: translateY(-50%); 48 | -moz-transform: translateY(-50%); 49 | transform: translateY(-50%); 50 | } 51 | 52 | ._valign-top { 53 | vertical-align: top; 54 | } 55 | 56 | ._valign-middle { 57 | vertical-align: middle; 58 | } 59 | 60 | ._valign-bottom { 61 | vertical-align: bottom; 62 | } 63 | 64 | /* Limit */ 65 | ._limit, 66 | ._limit-x2Small, 67 | ._limit-xSmall, 68 | ._limit-small, 69 | ._limit-minor, 70 | ._limit-medium, 71 | ._limit-large { 72 | width: 100%; 73 | max-width: 68.75em; 74 | margin: 0 auto; 75 | } 76 | 77 | ._limit-x2Small { 78 | max-width: 25em; 79 | } 80 | 81 | ._limit-xSmall { 82 | max-width: 40em; 83 | } 84 | 85 | ._limit-small { 86 | max-width: 54em; 87 | } 88 | 89 | ._limit-minor { 90 | max-width: 60em; 91 | } 92 | 93 | ._limit-medium { 94 | max-width: 80em; 95 | } 96 | 97 | ._limit-large { 98 | max-width: 90em; 99 | } 100 | 101 | ._row { 102 | width: 100%; 103 | } 104 | ._row:before, ._row:after { 105 | content: " "; 106 | display: table; 107 | } 108 | ._row:after { 109 | clear: both; 110 | } 111 | ._row ._row { 112 | width: auto; 113 | } 114 | ._row [class*=_span-] { 115 | position: relative; 116 | float: left; 117 | } 118 | ._row ._span-1 { 119 | width: 8.3333333333%; 120 | } 121 | ._row ._span-2 { 122 | width: 16.6666666667%; 123 | } 124 | ._row ._span-3 { 125 | width: 25%; 126 | } 127 | ._row ._span-4 { 128 | width: 33.3333333333%; 129 | } 130 | ._row ._span-5 { 131 | width: 41.6666666667%; 132 | } 133 | ._row ._span-6 { 134 | width: 50%; 135 | } 136 | ._row ._span-7 { 137 | width: 58.3333333333%; 138 | } 139 | ._row ._span-8 { 140 | width: 66.6666666667%; 141 | } 142 | ._row ._span-9 { 143 | width: 75%; 144 | } 145 | ._row ._span-10 { 146 | width: 83.3333333333%; 147 | } 148 | ._row ._span-11 { 149 | width: 91.6666666667%; 150 | } 151 | ._row ._span-12 { 152 | width: 100%; 153 | } 154 | ._row ._offset-1 { 155 | margin-left: 8.3333333333%; 156 | } 157 | ._row ._offset-right-1 { 158 | margin-right: 8.3333333333%; 159 | } 160 | ._row ._offset-2 { 161 | margin-left: 16.6666666667%; 162 | } 163 | ._row ._offset-right-2 { 164 | margin-right: 16.6666666667%; 165 | } 166 | ._row ._offset-3 { 167 | margin-left: 25%; 168 | } 169 | ._row ._offset-right-3 { 170 | margin-right: 25%; 171 | } 172 | ._row ._offset-4 { 173 | margin-left: 33.3333333333%; 174 | } 175 | ._row ._offset-right-4 { 176 | margin-right: 33.3333333333%; 177 | } 178 | ._row ._offset-5 { 179 | margin-left: 41.6666666667%; 180 | } 181 | ._row ._offset-right-5 { 182 | margin-right: 41.6666666667%; 183 | } 184 | ._row ._offset-6 { 185 | margin-left: 50%; 186 | } 187 | ._row ._offset-right-6 { 188 | margin-right: 50%; 189 | } 190 | ._row ._offset-7 { 191 | margin-left: 58.3333333333%; 192 | } 193 | ._row ._offset-right-7 { 194 | margin-right: 58.3333333333%; 195 | } 196 | ._row ._offset-8 { 197 | margin-left: 66.6666666667%; 198 | } 199 | ._row ._offset-right-8 { 200 | margin-right: 66.6666666667%; 201 | } 202 | ._row ._offset-9 { 203 | margin-left: 75%; 204 | } 205 | ._row ._offset-right-9 { 206 | margin-right: 75%; 207 | } 208 | ._row ._offset-10 { 209 | margin-left: 83.3333333333%; 210 | } 211 | ._row ._offset-right-10 { 212 | margin-right: 83.3333333333%; 213 | } 214 | ._row ._offset-11 { 215 | margin-left: 91.6666666667%; 216 | } 217 | ._row ._offset-right-11 { 218 | margin-right: 91.6666666667%; 219 | } 220 | 221 | /* Limit */ 222 | ._limit { 223 | width: 100%; 224 | max-width: 68.75em; 225 | margin: 0 auto; 226 | } 227 | 228 | /* Large view */ 229 | /* Min max */ 230 | /* Breakpoint */ 231 | /* Return (check orientation) */ 232 | @media only screen and (min-width: 68.75em) { 233 | ._row ._span-large-1 { 234 | width: 8.3333333333%; 235 | } 236 | ._row ._span-large-2 { 237 | width: 16.6666666667%; 238 | } 239 | ._row ._span-large-3 { 240 | width: 25%; 241 | } 242 | ._row ._span-large-4 { 243 | width: 33.3333333333%; 244 | } 245 | ._row ._span-large-5 { 246 | width: 41.6666666667%; 247 | } 248 | ._row ._span-large-6 { 249 | width: 50%; 250 | } 251 | ._row ._span-large-7 { 252 | width: 58.3333333333%; 253 | } 254 | ._row ._span-large-8 { 255 | width: 66.6666666667%; 256 | } 257 | ._row ._span-large-9 { 258 | width: 75%; 259 | } 260 | ._row ._span-large-10 { 261 | width: 83.3333333333%; 262 | } 263 | ._row ._span-large-11 { 264 | width: 91.6666666667%; 265 | } 266 | ._row ._span-large-12 { 267 | width: 100%; 268 | } 269 | ._row ._offset-large-1 { 270 | margin-left: 8.3333333333%; 271 | } 272 | ._row ._offset-large-right-1 { 273 | margin-right: 8.3333333333%; 274 | } 275 | ._row ._offset-large-2 { 276 | margin-left: 16.6666666667%; 277 | } 278 | ._row ._offset-large-right-2 { 279 | margin-right: 16.6666666667%; 280 | } 281 | ._row ._offset-large-3 { 282 | margin-left: 25%; 283 | } 284 | ._row ._offset-large-right-3 { 285 | margin-right: 25%; 286 | } 287 | ._row ._offset-large-4 { 288 | margin-left: 33.3333333333%; 289 | } 290 | ._row ._offset-large-right-4 { 291 | margin-right: 33.3333333333%; 292 | } 293 | ._row ._offset-large-5 { 294 | margin-left: 41.6666666667%; 295 | } 296 | ._row ._offset-large-right-5 { 297 | margin-right: 41.6666666667%; 298 | } 299 | ._row ._offset-large-6 { 300 | margin-left: 50%; 301 | } 302 | ._row ._offset-large-right-6 { 303 | margin-right: 50%; 304 | } 305 | ._row ._offset-large-7 { 306 | margin-left: 58.3333333333%; 307 | } 308 | ._row ._offset-large-right-7 { 309 | margin-right: 58.3333333333%; 310 | } 311 | ._row ._offset-large-8 { 312 | margin-left: 66.6666666667%; 313 | } 314 | ._row ._offset-large-right-8 { 315 | margin-right: 66.6666666667%; 316 | } 317 | ._row ._offset-large-9 { 318 | margin-left: 75%; 319 | } 320 | ._row ._offset-large-right-9 { 321 | margin-right: 75%; 322 | } 323 | ._row ._offset-large-10 { 324 | margin-left: 83.3333333333%; 325 | } 326 | ._row ._offset-large-right-10 { 327 | margin-right: 83.3333333333%; 328 | } 329 | ._row ._offset-large-11 { 330 | margin-left: 91.6666666667%; 331 | } 332 | ._row ._offset-large-right-11 { 333 | margin-right: 91.6666666667%; 334 | } 335 | } 336 | /* Small view */ 337 | /* Min max */ 338 | /* Breakpoint */ 339 | /* Return (check orientation) */ 340 | @media only screen and (min-width: 21.875em) { 341 | ._row ._span-small-1 { 342 | width: 8.3333333333%; 343 | } 344 | ._row ._span-small-2 { 345 | width: 16.6666666667%; 346 | } 347 | ._row ._span-small-3 { 348 | width: 25%; 349 | } 350 | ._row ._span-small-4 { 351 | width: 33.3333333333%; 352 | } 353 | ._row ._span-small-5 { 354 | width: 41.6666666667%; 355 | } 356 | ._row ._span-small-6 { 357 | width: 50%; 358 | } 359 | ._row ._span-small-7 { 360 | width: 58.3333333333%; 361 | } 362 | ._row ._span-small-8 { 363 | width: 66.6666666667%; 364 | } 365 | ._row ._span-small-9 { 366 | width: 75%; 367 | } 368 | ._row ._span-small-10 { 369 | width: 83.3333333333%; 370 | } 371 | ._row ._span-small-11 { 372 | width: 91.6666666667%; 373 | } 374 | ._row ._span-small-12 { 375 | width: 100%; 376 | } 377 | ._row ._offset-small-1 { 378 | margin-left: 8.3333333333%; 379 | } 380 | ._row ._offset-small-right-1 { 381 | margin-right: 8.3333333333%; 382 | } 383 | ._row ._offset-small-2 { 384 | margin-left: 16.6666666667%; 385 | } 386 | ._row ._offset-small-right-2 { 387 | margin-right: 16.6666666667%; 388 | } 389 | ._row ._offset-small-3 { 390 | margin-left: 25%; 391 | } 392 | ._row ._offset-small-right-3 { 393 | margin-right: 25%; 394 | } 395 | ._row ._offset-small-4 { 396 | margin-left: 33.3333333333%; 397 | } 398 | ._row ._offset-small-right-4 { 399 | margin-right: 33.3333333333%; 400 | } 401 | ._row ._offset-small-5 { 402 | margin-left: 41.6666666667%; 403 | } 404 | ._row ._offset-small-right-5 { 405 | margin-right: 41.6666666667%; 406 | } 407 | ._row ._offset-small-6 { 408 | margin-left: 50%; 409 | } 410 | ._row ._offset-small-right-6 { 411 | margin-right: 50%; 412 | } 413 | ._row ._offset-small-7 { 414 | margin-left: 58.3333333333%; 415 | } 416 | ._row ._offset-small-right-7 { 417 | margin-right: 58.3333333333%; 418 | } 419 | ._row ._offset-small-8 { 420 | margin-left: 66.6666666667%; 421 | } 422 | ._row ._offset-small-right-8 { 423 | margin-right: 66.6666666667%; 424 | } 425 | ._row ._offset-small-9 { 426 | margin-left: 75%; 427 | } 428 | ._row ._offset-small-right-9 { 429 | margin-right: 75%; 430 | } 431 | ._row ._offset-small-10 { 432 | margin-left: 83.3333333333%; 433 | } 434 | ._row ._offset-small-right-10 { 435 | margin-right: 83.3333333333%; 436 | } 437 | ._row ._offset-small-11 { 438 | margin-left: 91.6666666667%; 439 | } 440 | ._row ._offset-small-right-11 { 441 | margin-right: 91.6666666667%; 442 | } 443 | } 444 | ._show { 445 | display: block; 446 | } 447 | 448 | ._hide { 449 | display: none; 450 | } 451 | 452 | ._hide-visually { 453 | margin: -1px; 454 | padding: 0; 455 | width: 1px; 456 | height: 1px; 457 | overflow: hidden; 458 | clip: rect(0 0 0 0); 459 | clip: rect(0, 0, 0, 0); 460 | position: absolute; 461 | } 462 | 463 | ._opacity-100 { 464 | opacity: 1; 465 | filter: alpha(opacity=100); 466 | } 467 | 468 | ._opacity-75 { 469 | opacity: 0.75; 470 | filter: alpha(opacity=75); 471 | } 472 | 473 | ._opacity-50 { 474 | opacity: 0.5; 475 | filter: alpha(opacity=50); 476 | } 477 | 478 | ._opacity-25 { 479 | opacity: 0.25; 480 | filter: alpha(opacity=25); 481 | } 482 | 483 | ._opacity-0 { 484 | opacity: 0; 485 | filter: alpha(opacity=0); 486 | } 487 | 488 | /* Min max */ 489 | /* Breakpoint */ 490 | /* Return (check orientation) */ 491 | @media only screen and (min-width: 43.813em) { 492 | ._show-small { 493 | display: none; 494 | } 495 | 496 | ._show-large { 497 | display: block; 498 | } 499 | 500 | ._hide-large { 501 | display: none; 502 | } 503 | } 504 | /* Min max */ 505 | /* Breakpoint */ 506 | /* Return (check orientation) */ 507 | @media only screen and (max-width: 43.813em) { 508 | ._show-small { 509 | display: block; 510 | } 511 | 512 | ._hide-small { 513 | display: none; 514 | } 515 | 516 | ._show-large { 517 | display: none; 518 | } 519 | } 520 | ._pos-absolute { 521 | position: absolute; 522 | } 523 | 524 | ._pos-relative { 525 | position: relative; 526 | } 527 | 528 | ._pos-static { 529 | position: static; 530 | } 531 | 532 | ._pos-fixed { 533 | position: fixed; 534 | } 535 | 536 | ._txt-hide { 537 | border: 0; 538 | font: 0/0 a; 539 | text-shadow: none; 540 | color: transparent; 541 | background-color: transparent; 542 | } 543 | 544 | ._txt-left { 545 | text-align: left; 546 | } 547 | 548 | ._txt-center { 549 | text-align: center; 550 | } 551 | 552 | ._txt-right { 553 | text-align: right; 554 | } 555 | 556 | ._txt-size-large { 557 | font-size: 24px; 558 | font-size: 1.5rem; 559 | } 560 | 561 | ._txt-size-medium { 562 | font-size: 18px; 563 | font-size: 1.125rem; 564 | } 565 | 566 | ._txt-size-default { 567 | font-size: 16px; 568 | font-size: 1rem; 569 | } 570 | 571 | ._txt-size-s { 572 | font-size: 14px; 573 | font-size: 0.875rem; 574 | } 575 | 576 | ._txt-weight-xb { 577 | font-weight: 900; 578 | } 579 | 580 | ._txt-weight-b, ._txt-bold { 581 | font-weight: 700; 582 | } 583 | 584 | ._txt-weight-default { 585 | font-weight: 400; 586 | } 587 | 588 | ._txt-weight-l, ._txt-light { 589 | font-weight: 300; 590 | } 591 | 592 | ._txt-weight-xl, ._txt-thin { 593 | font-weight: 100; 594 | } 595 | 596 | ._txt-weight-xl { 597 | font-weight: 100; 598 | } 599 | 600 | ._txt-normal { 601 | font-weight: normal; 602 | } 603 | 604 | ._txt-italics { 605 | font-style: italic; 606 | } 607 | 608 | ._txt-oblique { 609 | font-style: oblique; 610 | } 611 | 612 | ._txt-white { 613 | color: #fff; 614 | } 615 | 616 | ._txt-grey { 617 | color: gray; 618 | } 619 | 620 | /* Min max */ 621 | /* Breakpoint */ 622 | /* Return (check orientation) */ 623 | @media only screen and (min-width: 68.75em) { 624 | ._txt-size-l-large { 625 | font-size: 24px; 626 | font-size: 1.5rem; 627 | } 628 | 629 | ._txt-size-m-large { 630 | font-size: 18px; 631 | font-size: 1.125rem; 632 | } 633 | 634 | ._txt-size-n-large { 635 | font-size: 16px; 636 | font-size: 1rem; 637 | } 638 | 639 | ._txt-size-s-large { 640 | font-size: 14px; 641 | font-size: 0.875rem; 642 | } 643 | 644 | ._txt-weight-xb-large { 645 | font-weight: 900; 646 | } 647 | 648 | ._txt-weight-b-large, ._txt-bold-large { 649 | font-weight: 700; 650 | } 651 | 652 | ._txt-weight-n-large { 653 | font-weight: 400; 654 | } 655 | 656 | ._txt-weight-l-large, ._txt-light-large { 657 | font-weight: 300; 658 | } 659 | 660 | ._txt-weight-xl-large { 661 | font-weight: 100; 662 | } 663 | 664 | ._txt-normal-large { 665 | font-weight: 400; 666 | } 667 | } 668 | ._back-pos-left { 669 | background-position: left; 670 | } 671 | 672 | ._back-pos-right { 673 | background-position: right; 674 | } 675 | 676 | ._back-pos-top { 677 | background-position: top; 678 | } 679 | 680 | ._back-pos-bottom { 681 | background-position: bottom; 682 | } 683 | 684 | ._back-pos-center { 685 | background-position: center; 686 | } 687 | 688 | ._back-repeat-none { 689 | background-repeat: no-repeat; 690 | } 691 | 692 | ._back-repeat-vertical { 693 | background-repeat: repeat-y; 694 | } 695 | 696 | ._back-repeat-horizontal { 697 | background-repeat: repeat-x; 698 | } 699 | 700 | ._back-single { 701 | background-position: center; 702 | background-repeat: no-repeat; 703 | } 704 | 705 | ._back-contain { 706 | background-position: center; 707 | background-repeat: no-repeat; 708 | background-size: contain; 709 | } 710 | 711 | ._back-cover { 712 | background-position: center; 713 | background-repeat: no-repeat; 714 | background-size: cover; 715 | } 716 | 717 | ._back-black { 718 | background-color: #000; 719 | } 720 | 721 | ._back-grey { 722 | background-color: gray; 723 | } 724 | 725 | ._back-greyLight { 726 | background-color: #e6e6e6; 727 | } 728 | 729 | ._back-greyXLight { 730 | background-color: whitesmoke; 731 | } 732 | 733 | ._back-white { 734 | background-color: #fff; 735 | } 736 | 737 | ._block-height-10 { 738 | height: 10px; 739 | } 740 | 741 | ._block-height-20 { 742 | height: 20px; 743 | } 744 | 745 | ._block-height-50 { 746 | height: 50px; 747 | } 748 | 749 | ._block-height-100 { 750 | height: 100px; 751 | } 752 | 753 | ._block-height-200 { 754 | height: 200px; 755 | } 756 | 757 | ._block-height-500 { 758 | height: 500px; 759 | } 760 | 761 | ._block-height-1000 { 762 | height: 1000px; 763 | } 764 | 765 | ._block-width-10 { 766 | width: 10px; 767 | } 768 | 769 | ._block-width-20 { 770 | width: 20px; 771 | } 772 | 773 | ._block-width-50 { 774 | width: 50px; 775 | } 776 | 777 | ._block-width-100 { 778 | width: 109px; 779 | } 780 | 781 | ._block-width-200 { 782 | width: 200px; 783 | } 784 | 785 | ._block-width-500 { 786 | width: 500px; 787 | } 788 | 789 | ._block-width-1000 { 790 | width: 1000px; 791 | } 792 | 793 | ._spacing-none { 794 | padding: 0; 795 | margin: 0; 796 | } 797 | 798 | ._pad-none { 799 | padding: 0px; 800 | } 801 | 802 | ._mgn-none { 803 | margin: 0px; 804 | } 805 | 806 | ._pad-1 { 807 | padding: 1px; 808 | } 809 | 810 | ._pad-top-1 { 811 | padding-right: 1px; 812 | } 813 | 814 | ._pad-left-1 { 815 | padding-left: 1px; 816 | } 817 | 818 | ._pad-top-1 { 819 | padding-top: 1px; 820 | } 821 | 822 | ._pad-bottom-1 { 823 | padding-bottom: 1px; 824 | } 825 | 826 | ._mgn-1 { 827 | margin: 1px; 828 | } 829 | 830 | ._mgn-top-1 { 831 | margin-right: 1px; 832 | } 833 | 834 | ._mgn-left-1 { 835 | margin-left: 1px; 836 | } 837 | 838 | ._mgn-top-1 { 839 | margin-top: 1px; 840 | } 841 | 842 | ._mgn-bottom-1 { 843 | margin-bottom: 1px; 844 | } 845 | 846 | ._pad-2 { 847 | padding: 2px; 848 | } 849 | 850 | ._pad-top-2 { 851 | padding-right: 2px; 852 | } 853 | 854 | ._pad-left-2 { 855 | padding-left: 2px; 856 | } 857 | 858 | ._pad-top-2 { 859 | padding-top: 2px; 860 | } 861 | 862 | ._pad-bottom-2 { 863 | padding-bottom: 2px; 864 | } 865 | 866 | ._mgn-2 { 867 | margin: 2px; 868 | } 869 | 870 | ._mgn-top-2 { 871 | margin-right: 2px; 872 | } 873 | 874 | ._mgn-left-2 { 875 | margin-left: 2px; 876 | } 877 | 878 | ._mgn-top-2 { 879 | margin-top: 2px; 880 | } 881 | 882 | ._mgn-bottom-2 { 883 | margin-bottom: 2px; 884 | } 885 | 886 | ._pad-3 { 887 | padding: 3px; 888 | } 889 | 890 | ._pad-top-3 { 891 | padding-right: 3px; 892 | } 893 | 894 | ._pad-left-3 { 895 | padding-left: 3px; 896 | } 897 | 898 | ._pad-top-3 { 899 | padding-top: 3px; 900 | } 901 | 902 | ._pad-bottom-3 { 903 | padding-bottom: 3px; 904 | } 905 | 906 | ._mgn-3 { 907 | margin: 3px; 908 | } 909 | 910 | ._mgn-top-3 { 911 | margin-right: 3px; 912 | } 913 | 914 | ._mgn-left-3 { 915 | margin-left: 3px; 916 | } 917 | 918 | ._mgn-top-3 { 919 | margin-top: 3px; 920 | } 921 | 922 | ._mgn-bottom-3 { 923 | margin-bottom: 3px; 924 | } 925 | 926 | ._pad-4 { 927 | padding: 4px; 928 | } 929 | 930 | ._pad-top-4 { 931 | padding-right: 4px; 932 | } 933 | 934 | ._pad-left-4 { 935 | padding-left: 4px; 936 | } 937 | 938 | ._pad-top-4 { 939 | padding-top: 4px; 940 | } 941 | 942 | ._pad-bottom-4 { 943 | padding-bottom: 4px; 944 | } 945 | 946 | ._mgn-4 { 947 | margin: 4px; 948 | } 949 | 950 | ._mgn-top-4 { 951 | margin-right: 4px; 952 | } 953 | 954 | ._mgn-left-4 { 955 | margin-left: 4px; 956 | } 957 | 958 | ._mgn-top-4 { 959 | margin-top: 4px; 960 | } 961 | 962 | ._mgn-bottom-4 { 963 | margin-bottom: 4px; 964 | } 965 | 966 | ._pad-5 { 967 | padding: 5px; 968 | } 969 | 970 | ._pad-top-5 { 971 | padding-right: 5px; 972 | } 973 | 974 | ._pad-left-5 { 975 | padding-left: 5px; 976 | } 977 | 978 | ._pad-top-5 { 979 | padding-top: 5px; 980 | } 981 | 982 | ._pad-bottom-5 { 983 | padding-bottom: 5px; 984 | } 985 | 986 | ._mgn-5 { 987 | margin: 5px; 988 | } 989 | 990 | ._mgn-top-5 { 991 | margin-right: 5px; 992 | } 993 | 994 | ._mgn-left-5 { 995 | margin-left: 5px; 996 | } 997 | 998 | ._mgn-top-5 { 999 | margin-top: 5px; 1000 | } 1001 | 1002 | ._mgn-bottom-5 { 1003 | margin-bottom: 5px; 1004 | } 1005 | 1006 | ._pad-6 { 1007 | padding: 6px; 1008 | } 1009 | 1010 | ._pad-top-6 { 1011 | padding-right: 6px; 1012 | } 1013 | 1014 | ._pad-left-6 { 1015 | padding-left: 6px; 1016 | } 1017 | 1018 | ._pad-top-6 { 1019 | padding-top: 6px; 1020 | } 1021 | 1022 | ._pad-bottom-6 { 1023 | padding-bottom: 6px; 1024 | } 1025 | 1026 | ._mgn-6 { 1027 | margin: 6px; 1028 | } 1029 | 1030 | ._mgn-top-6 { 1031 | margin-right: 6px; 1032 | } 1033 | 1034 | ._mgn-left-6 { 1035 | margin-left: 6px; 1036 | } 1037 | 1038 | ._mgn-top-6 { 1039 | margin-top: 6px; 1040 | } 1041 | 1042 | ._mgn-bottom-6 { 1043 | margin-bottom: 6px; 1044 | } 1045 | 1046 | ._pad-7 { 1047 | padding: 7px; 1048 | } 1049 | 1050 | ._pad-top-7 { 1051 | padding-right: 7px; 1052 | } 1053 | 1054 | ._pad-left-7 { 1055 | padding-left: 7px; 1056 | } 1057 | 1058 | ._pad-top-7 { 1059 | padding-top: 7px; 1060 | } 1061 | 1062 | ._pad-bottom-7 { 1063 | padding-bottom: 7px; 1064 | } 1065 | 1066 | ._mgn-7 { 1067 | margin: 7px; 1068 | } 1069 | 1070 | ._mgn-top-7 { 1071 | margin-right: 7px; 1072 | } 1073 | 1074 | ._mgn-left-7 { 1075 | margin-left: 7px; 1076 | } 1077 | 1078 | ._mgn-top-7 { 1079 | margin-top: 7px; 1080 | } 1081 | 1082 | ._mgn-bottom-7 { 1083 | margin-bottom: 7px; 1084 | } 1085 | 1086 | ._pad-8 { 1087 | padding: 8px; 1088 | } 1089 | 1090 | ._pad-top-8 { 1091 | padding-right: 8px; 1092 | } 1093 | 1094 | ._pad-left-8 { 1095 | padding-left: 8px; 1096 | } 1097 | 1098 | ._pad-top-8 { 1099 | padding-top: 8px; 1100 | } 1101 | 1102 | ._pad-bottom-8 { 1103 | padding-bottom: 8px; 1104 | } 1105 | 1106 | ._mgn-8 { 1107 | margin: 8px; 1108 | } 1109 | 1110 | ._mgn-top-8 { 1111 | margin-right: 8px; 1112 | } 1113 | 1114 | ._mgn-left-8 { 1115 | margin-left: 8px; 1116 | } 1117 | 1118 | ._mgn-top-8 { 1119 | margin-top: 8px; 1120 | } 1121 | 1122 | ._mgn-bottom-8 { 1123 | margin-bottom: 8px; 1124 | } 1125 | 1126 | ._pad-9 { 1127 | padding: 9px; 1128 | } 1129 | 1130 | ._pad-top-9 { 1131 | padding-right: 9px; 1132 | } 1133 | 1134 | ._pad-left-9 { 1135 | padding-left: 9px; 1136 | } 1137 | 1138 | ._pad-top-9 { 1139 | padding-top: 9px; 1140 | } 1141 | 1142 | ._pad-bottom-9 { 1143 | padding-bottom: 9px; 1144 | } 1145 | 1146 | ._mgn-9 { 1147 | margin: 9px; 1148 | } 1149 | 1150 | ._mgn-top-9 { 1151 | margin-right: 9px; 1152 | } 1153 | 1154 | ._mgn-left-9 { 1155 | margin-left: 9px; 1156 | } 1157 | 1158 | ._mgn-top-9 { 1159 | margin-top: 9px; 1160 | } 1161 | 1162 | ._mgn-bottom-9 { 1163 | margin-bottom: 9px; 1164 | } 1165 | 1166 | ._pad-10 { 1167 | padding: 10px; 1168 | } 1169 | 1170 | ._pad-top-10 { 1171 | padding-right: 10px; 1172 | } 1173 | 1174 | ._pad-left-10 { 1175 | padding-left: 10px; 1176 | } 1177 | 1178 | ._pad-top-10 { 1179 | padding-top: 10px; 1180 | } 1181 | 1182 | ._pad-bottom-10 { 1183 | padding-bottom: 10px; 1184 | } 1185 | 1186 | ._mgn-10 { 1187 | margin: 10px; 1188 | } 1189 | 1190 | ._mgn-top-10 { 1191 | margin-right: 10px; 1192 | } 1193 | 1194 | ._mgn-left-10 { 1195 | margin-left: 10px; 1196 | } 1197 | 1198 | ._mgn-top-10 { 1199 | margin-top: 10px; 1200 | } 1201 | 1202 | ._mgn-bottom-10 { 1203 | margin-bottom: 10px; 1204 | } 1205 | 1206 | /*# sourceMappingURL=propel.min.css.map */ 1207 | -------------------------------------------------------------------------------- /css/propel.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../build/sass/css/_global.scss","../build/sass/basic/_global.scss","../build/sass/css/_layout.scss","../build/sass/basic/_layout.scss","../build/sass/basic/_transform.scss","../build/sass/basic/_responsive-layout.scss","../build/sass/basic/_size.scss","../build/sass/css/_responsive-layout.scss","../build/sass/css/_display.scss","../build/sass/basic/_display.scss","../build/sass/css/_position.scss","../build/sass/css/_text.scss","../build/sass/basic/_text.scss","../build/sass/basic/_colour.scss","../build/sass/css/_background.scss","../build/sass/basic/_background.scss","../build/sass/css/_sizing.scss","../build/sass/css/_spacing.scss","../build/sass/basic/_spacing.scss"],"names":[],"mappings":"AAGG;ECkBA,aAnBU;EAoBV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACG;EACA;;AApBH;AAAA;AAAA;EAGG;EACA;EACA;;;ACdH;ECiCA,OAMe;;;ADpCf;EC8BA,OD7BkB;;;AAElB;EC2BA,OD1BkB;;;AAElB;EC2BA;;;ADxBA;ECJA;;;ADOA;ECFA;EACA;ECdA,mBAoCmB;EAnCnB,cAmCmB;EAlCnB,gBAkCmB;EAjCnB,WAiCmB;;;AFlBnB;ECmDA,gBDlD2B;;;AAE3B;ECgDA,gBD/C2B;;;AAE3B;EC6CA,gBD5C2B;;;AAG3B;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EGaA;EACA,WA3CU;EA4CV;;;AHNA;EIVA,WJWsB;;;AAEtB;EIbA,WJcsB;;;AAEtB;EIhBA,WJiBsB;;;AAEtB;EInBA,WJoBsB;;;AAEtB;EItBA,WJuBsB;;;AAEtB;EIzBA,WJ0BsB;;;AKtDtB;EFMA;;AACA;EAEG;EACA;;AAEH;EACG;;AEXA;EDiBH,OChBqB;;AAElB;EJ+CH,UI9CwB;EJ2BxB,OI1BqB;;AAIf;EFaN;;AEbM;EFaN;;AEbM;EFaN;;AEbM;EFaN;;AEbM;EFaN;;AEbM;EFaN;;AEbM;EFaN;;AEbM;EFaN;;AEbM;EFaN;;AEbM;EFaN;;AEbM;EFaN;;AEbM;EFaN;;AEPM;EFiBN;;AEdM;EFiBN;;AEpBM;EFiBN;;AEdM;EFiBN;;AEpBM;EFiBN;;AEdM;EFiBN;;AEpBM;EFiBN;;AEdM;EFiBN;;AEpBM;EFiBN;;AEdM;EFiBN;;AEpBM;EFiBN;;AEdM;EFiBN;;AEpBM;EFiBN;;AEdM;EFiBN;;AEpBM;EFiBN;;AEdM;EFiBN;;AEpBM;EFiBN;;AEdM;EFiBN;;AEpBM;EFiBN;;AEdM;EFiBN;;AEpBM;EFiBN;;AEdM;EFiBN;;;AEZA;AACA;EFgBA;EACA,WA3CU;EA4CV;;;AEfA;AF0BG;AAgBA;AAQA;AAMG;EEpDG;IFTT;;EESS;IFTT;;EESS;IFTT;;EESS;IFTT;;EESS;IFTT;;EESS;IFTT;;EESS;IFTT;;EESS;IFTT;;EESS;IFTT;;EESS;IFTT;;EESS;IFTT;;EESS;IFTT;;EEeS;IFLT;;EEQS;IFLT;;EEES;IFLT;;EEQS;IFLT;;EEES;IFLT;;EEQS;IFLT;;EEES;IFLT;;EEQS;IFLT;;EEES;IFLT;;EEQS;IFLT;;EEES;IFLT;;EEQS;IFLT;;EEES;IFLT;;EEQS;IFLT;;EEES;IFLT;;EEQS;IFLT;;EEES;IFLT;;EEQS;IFLT;;EEES;IFLT;;EEQS;IFLT;;EEES;IFLT;;EEQS;IFLT;;;AEWA;AFOG;AAgBA;AAQA;AAMG;EEjCG;IF5BT;;EE4BS;IF5BT;;EE4BS;IF5BT;;EE4BS;IF5BT;;EE4BS;IF5BT;;EE4BS;IF5BT;;EE4BS;IF5BT;;EE4BS;IF5BT;;EE4BS;IF5BT;;EE4BS;IF5BT;;EE4BS;IF5BT;;EE4BS;IF5BT;;EEkCS;IFxBT;;EE2BS;IFxBT;;EEqBS;IFxBT;;EE2BS;IFxBT;;EEqBS;IFxBT;;EE2BS;IFxBT;;EEqBS;IFxBT;;EE2BS;IFxBT;;EEqBS;IFxBT;;EE2BS;IFxBT;;EEqBS;IFxBT;;EE2BS;IFxBT;;EEqBS;IFxBT;;EE2BS;IFxBT;;EEqBS;IFxBT;;EE2BS;IFxBT;;EEqBS;IFxBT;;EE2BS;IFxBT;;EEqBS;IFxBT;;EE2BS;IFxBT;;EEqBS;IFxBT;;EE2BS;IFxBT;;;AGrCA;ECAA,SAegB;;;ADZhB;ECAA;;;ADGA;ECAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADJA;ECYA,SDXoB;ECapB;;;ADXA;ECSA,SDRoB;ECUpB;;;ADRA;ECMA,SDLoB;ECOpB;;;ADLA;ECGA,SDFoB;ECIpB;;;ADFA;ECAA,SDCoB;ECCpB;;;AJgCG;AAgBA;AAQA;AAMG;EG5DH;ICtBH;;;EDyBG;IC5BH,SAegB;;;EDgBb;IC5BH;;;AJoDG;AAgBA;AAQA;AAMG;EGjDH;ICpCH,SAegB;;;EDwBb;ICpCH;;;EDuCG;ICvCH;;;ACHA;EPoDA,UOnDqB;;;AAErB;EPiDA,UOhDqB;;;AAErB;EP8CA,UO7CqB;;;AAErB;EP2CA,UO1CqB;;;ACVrB;ECsEA;EACA;EACA;EACA;EACA;;;ADvEA;EC+CA,YD9CuB;;;AAEvB;EC4CA,YD3CuB;;;AAEvB;ECyCA,YDxCuB;;;AAEvB;ECgBA,WAbS;EAcT;;;ADdA;ECaA,WAdU;EAeV;;;ADXA;ECUA,WAhBQ;EAiBR;;;ADRA;ECOA,WAfS;EAgBT;;;ADLA;ECWA,aAdW;;;ADMX;ECQA,aAfU;;;ADUV;ECKA,aAlBU;;;ADgBV;ECEA,aAhBW;;;ADiBX;ECDA,aAjBU;;;ADqBV;ECJA,aDKwB;;;AAExB;ECPA,aDQwB;;;AAExB;ECbA,YDcuB;;;AAEvB;EChBA,YDiBuB;;;AAEvB;ECEA,OCrDK;;;AFsDL;ECDA,OC/CI;;;ARiDD;AAgBA;AAQA;AAMG;EM1BH;IC/BH,WAbS;IAcT;;;EDiCG;IClCH,WAdU;IAeV;;;EDoCG;ICrCH,WAhBQ;IAiBR;;;EDuCG;ICxCH,WAfS;IAgBT;;;ED0CG;ICpCH,aAdW;;;EDqDR;ICvCH,aAfU;;;EDyDP;IC1CH,aAlBU;;;ED+DP;IC7CH,aAhBW;;;EDgER;IChDH,aAjBU;;;EDoEP;ICnDH,aAlBU;;;AEjBZ;ECyBE,qBDxB4B;;;AAE9B;ECsBE,qBDrB4B;;;AAE9B;ECmBE,qBDlB4B;;;AAE9B;ECgBE,qBDf4B;;;AAE9B;ECaE,qBDZ4B;;;AAE9B;ECaE,mBDZ0B;;;AAE5B;ECUE,mBDT0B;;;AAE5B;ECOE,mBDN0B;;;AAE5B;ECCE,qBAS6B;EAN7B,mBAO2B;;;ADR7B;ECFE,qBAb6B;EAgB7B,mBAf2B;EAkB3B,iBAjByB;;;ADgB3B;ECLE,qBAR6B;EAW7B,mBAV2B;EAa3B,iBAZyB;;;ADc3B;EC3BE,kBFLK;;;ACmCP;EC9BE;;;ADiCF;ECjCE,kBFDS;;;ACqCX;ECpCE,kBFFU;;;ACyCZ;ECvCE,kBFNK;;;AGAL;EVIA,QUHmB;;;AAEnB;EVCA;;;AUEA;EVFA,QUGmB;;;AAEnB;EVLA,QUMmB;;;AAEnB;EVRA,QUSmB;;;AAEnB;EVXA,QUYmB;;;AAEnB;EVdA,QUemB;;;AAEnB;EVFA,OUGkB;;;AAElB;EVLA,OUMkB;;;AAElB;EVRA,OUSkB;;;AAElB;EVXA,OUYkB;;;AAElB;EVdA,OUekB;;;AAElB;EVjBA,OUkBkB;;;AAElB;EVpBA,OUqBkB;;;ACtClB;ECiEA;EACA;;;AD/DA;ECkCA,SDjCoB;;;AAEpB;ECGA,QDFmB;;;AAQhB;ECsBH,SDrBuB;;;AAEpB;EC+BH,eD9B6B;;;AAE1B;ECyBH,cDxB4B;;;AAEzB;ECgBH,aDf2B;;;AAExB;ECgBH,gBDf8B;;;AAE3B;ECrBH,QDsBsB;;;AAEnB;ECZH,cDa4B;;;AAEzB;EClBH,aDmB2B;;;AAExB;EC3BH,YD4B0B;;;AAEvB;EC3BH,eD4B6B;;;AA5B1B;ECsBH,SDrBuB;;;AAEpB;EC+BH,eD9B6B;;;AAE1B;ECyBH,cDxB4B;;;AAEzB;ECgBH,aDf2B;;;AAExB;ECgBH,gBDf8B;;;AAE3B;ECrBH,QDsBsB;;;AAEnB;ECZH,cDa4B;;;AAEzB;EClBH,aDmB2B;;;AAExB;EC3BH,YD4B0B;;;AAEvB;EC3BH,eD4B6B;;;AA5B1B;ECsBH,SDrBuB;;;AAEpB;EC+BH,eD9B6B;;;AAE1B;ECyBH,cDxB4B;;;AAEzB;ECgBH,aDf2B;;;AAExB;ECgBH,gBDf8B;;;AAE3B;ECrBH,QDsBsB;;;AAEnB;ECZH,cDa4B;;;AAEzB;EClBH,aDmB2B;;;AAExB;EC3BH,YD4B0B;;;AAEvB;EC3BH,eD4B6B;;;AA5B1B;ECsBH,SDrBuB;;;AAEpB;EC+BH,eD9B6B;;;AAE1B;ECyBH,cDxB4B;;;AAEzB;ECgBH,aDf2B;;;AAExB;ECgBH,gBDf8B;;;AAE3B;ECrBH,QDsBsB;;;AAEnB;ECZH,cDa4B;;;AAEzB;EClBH,aDmB2B;;;AAExB;EC3BH,YD4B0B;;;AAEvB;EC3BH,eD4B6B;;;AA5B1B;ECsBH,SDrBuB;;;AAEpB;EC+BH,eD9B6B;;;AAE1B;ECyBH,cDxB4B;;;AAEzB;ECgBH,aDf2B;;;AAExB;ECgBH,gBDf8B;;;AAE3B;ECrBH,QDsBsB;;;AAEnB;ECZH,cDa4B;;;AAEzB;EClBH,aDmB2B;;;AAExB;EC3BH,YD4B0B;;;AAEvB;EC3BH,eD4B6B;;;AA5B1B;ECsBH,SDrBuB;;;AAEpB;EC+BH,eD9B6B;;;AAE1B;ECyBH,cDxB4B;;;AAEzB;ECgBH,aDf2B;;;AAExB;ECgBH,gBDf8B;;;AAE3B;ECrBH,QDsBsB;;;AAEnB;ECZH,cDa4B;;;AAEzB;EClBH,aDmB2B;;;AAExB;EC3BH,YD4B0B;;;AAEvB;EC3BH,eD4B6B;;;AA5B1B;ECsBH,SDrBuB;;;AAEpB;EC+BH,eD9B6B;;;AAE1B;ECyBH,cDxB4B;;;AAEzB;ECgBH,aDf2B;;;AAExB;ECgBH,gBDf8B;;;AAE3B;ECrBH,QDsBsB;;;AAEnB;ECZH,cDa4B;;;AAEzB;EClBH,aDmB2B;;;AAExB;EC3BH,YD4B0B;;;AAEvB;EC3BH,eD4B6B;;;AA5B1B;ECsBH,SDrBuB;;;AAEpB;EC+BH,eD9B6B;;;AAE1B;ECyBH,cDxB4B;;;AAEzB;ECgBH,aDf2B;;;AAExB;ECgBH,gBDf8B;;;AAE3B;ECrBH,QDsBsB;;;AAEnB;ECZH,cDa4B;;;AAEzB;EClBH,aDmB2B;;;AAExB;EC3BH,YD4B0B;;;AAEvB;EC3BH,eD4B6B;;;AA5B1B;ECsBH,SDrBuB;;;AAEpB;EC+BH,eD9B6B;;;AAE1B;ECyBH,cDxB4B;;;AAEzB;ECgBH,aDf2B;;;AAExB;ECgBH,gBDf8B;;;AAE3B;ECrBH,QDsBsB;;;AAEnB;ECZH,cDa4B;;;AAEzB;EClBH,aDmB2B;;;AAExB;EC3BH,YD4B0B;;;AAEvB;EC3BH,eD4B6B;;;AA5B1B;ECsBH,SDrBuB;;;AAEpB;EC+BH,eD9B6B;;;AAE1B;ECyBH,cDxB4B;;;AAEzB;ECgBH,aDf2B;;;AAExB;ECgBH,gBDf8B;;;AAE3B;ECrBH,QDsBsB;;;AAEnB;ECZH,cDa4B;;;AAEzB;EClBH,aDmB2B;;;AAExB;EC3BH,YD4B0B;;;AAEvB;EC3BH,eD4B6B","file":"propel.min.css"} -------------------------------------------------------------------------------- /import.scss: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | @import './build/sass/import'; 4 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@chrishumboldt/rocket-propel", 3 | "version": "6.1.7", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "anymatch": { 8 | "version": "3.1.1", 9 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", 10 | "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", 11 | "dev": true, 12 | "requires": { 13 | "normalize-path": "^3.0.0", 14 | "picomatch": "^2.0.4" 15 | } 16 | }, 17 | "binary-extensions": { 18 | "version": "2.0.0", 19 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz", 20 | "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==", 21 | "dev": true 22 | }, 23 | "braces": { 24 | "version": "3.0.2", 25 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", 26 | "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", 27 | "dev": true, 28 | "requires": { 29 | "fill-range": "^7.0.1" 30 | } 31 | }, 32 | "chokidar": { 33 | "version": "3.3.1", 34 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz", 35 | "integrity": "sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==", 36 | "dev": true, 37 | "requires": { 38 | "anymatch": "~3.1.1", 39 | "braces": "~3.0.2", 40 | "fsevents": "~2.1.2", 41 | "glob-parent": "~5.1.0", 42 | "is-binary-path": "~2.1.0", 43 | "is-glob": "~4.0.1", 44 | "normalize-path": "~3.0.0", 45 | "readdirp": "~3.3.0" 46 | } 47 | }, 48 | "fill-range": { 49 | "version": "7.0.1", 50 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", 51 | "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", 52 | "dev": true, 53 | "requires": { 54 | "to-regex-range": "^5.0.1" 55 | } 56 | }, 57 | "fsevents": { 58 | "version": "2.1.2", 59 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz", 60 | "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==", 61 | "dev": true, 62 | "optional": true 63 | }, 64 | "glob-parent": { 65 | "version": "5.1.0", 66 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz", 67 | "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==", 68 | "dev": true, 69 | "requires": { 70 | "is-glob": "^4.0.1" 71 | } 72 | }, 73 | "is-binary-path": { 74 | "version": "2.1.0", 75 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 76 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 77 | "dev": true, 78 | "requires": { 79 | "binary-extensions": "^2.0.0" 80 | } 81 | }, 82 | "is-extglob": { 83 | "version": "2.1.1", 84 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 85 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", 86 | "dev": true 87 | }, 88 | "is-glob": { 89 | "version": "4.0.1", 90 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", 91 | "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", 92 | "dev": true, 93 | "requires": { 94 | "is-extglob": "^2.1.1" 95 | } 96 | }, 97 | "is-number": { 98 | "version": "7.0.0", 99 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 100 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 101 | "dev": true 102 | }, 103 | "normalize-path": { 104 | "version": "3.0.0", 105 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 106 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 107 | "dev": true 108 | }, 109 | "picomatch": { 110 | "version": "2.2.1", 111 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz", 112 | "integrity": "sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==", 113 | "dev": true 114 | }, 115 | "readdirp": { 116 | "version": "3.3.0", 117 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.3.0.tgz", 118 | "integrity": "sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==", 119 | "dev": true, 120 | "requires": { 121 | "picomatch": "^2.0.7" 122 | } 123 | }, 124 | "sass": { 125 | "version": "1.26.1", 126 | "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.1.tgz", 127 | "integrity": "sha512-DWtzW0jDu+96MYkEdM8vUigjpisvM9qSlDwNvTFcr+XC7o2+3aXSAbHNcJ+8HzD1857uW9Opbxgu39esytVUKA==", 128 | "dev": true, 129 | "requires": { 130 | "chokidar": ">=2.0.0 <4.0.0" 131 | } 132 | }, 133 | "to-regex-range": { 134 | "version": "5.0.1", 135 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 136 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 137 | "dev": true, 138 | "requires": { 139 | "is-number": "^7.0.0" 140 | } 141 | } 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@chrishumboldt/rocket-propel", 3 | "version": "6.1.7", 4 | "description": "A lightweight SASS mixin library and responsive CSS layout engine.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/chrishumboldt/Rocket-Propel.git" 8 | }, 9 | "keywords": [ 10 | "Rocket", 11 | "Part", 12 | "Modules", 13 | "SASS", 14 | "Library", 15 | "Mixins", 16 | "CSS" 17 | ], 18 | "author": "Chris Humboldt ", 19 | "license": "Apache-2.0", 20 | "bugs": { 21 | "url": "https://github.com/chrishumboldt/Rocket-Propel/issues" 22 | }, 23 | "homepage": "https://github.com/chrishumboldt/Rocket-Propel#readme", 24 | "scripts": { 25 | "rocket:build": "node node_modules/sass/sass.js ./build/sass/propel.scss ./css/propel.min.css", 26 | "rocket:publish:major": "node publish.js version=major", 27 | "rocket:publish:minor": "node publish.js version=minor", 28 | "rocket:publish:patch": "node publish.js version=patch" 29 | }, 30 | "devDependencies": { 31 | "sass": "^1.26.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /publish.js: -------------------------------------------------------------------------------- 1 | // @author Chris Humboldt 2 | 3 | const { spawn } = require('child_process'); 4 | 5 | // Set the input arguments. 6 | const package = 'Rocket Propel Library'; 7 | const version = process.argv[2] ? process.argv[2].split('=')[1] : 'patch'; 8 | 9 | const commands = [ 10 | `rm -rf css`, 11 | `git add -A`, 12 | `git commit -m "Publishig ${version} version."`, 13 | `npm version ${version}`, 14 | `npm run rocket:build`, 15 | `npm publish --access public` 16 | ]; 17 | 18 | // Run the commands 19 | console.log(`Publishing ${package} package`); 20 | const runCommands = spawn(commands.join(' && '), {shell: true}); 21 | 22 | // Handle the spawn events. 23 | runCommands.stdout.on('data', (data) => { 24 | console.log(data.toString()); 25 | }); 26 | 27 | runCommands.stderr.on('data', (data) => { 28 | console.error(data.toString()); 29 | }); --------------------------------------------------------------------------------