├── .editorconfig
├── .github
├── CONTRIBUTING.md
└── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .htaccess
├── LICENSE.md
├── README.md
├── data
├── colour.yml
├── company.yml
├── first-name.yml
├── last-name.yml
├── paragraph.yml
├── price.yml
├── size.yml
└── title.yml
├── gulpfile.js
├── inc
├── functions.php
├── lib
│ ├── Spyc.php
│ ├── content.php
│ ├── helper.php
│ └── navigation.php
└── template
│ └── nav.php
├── index.php
├── package.json
├── pattern
├── base
│ ├── blockquote
│ │ └── base.php
│ ├── button
│ │ ├── base.php
│ │ └── disabled.php
│ ├── form
│ │ ├── checkbox.php
│ │ ├── input.php
│ │ ├── label.php
│ │ ├── legend.php
│ │ ├── radio.php
│ │ ├── select.php
│ │ └── validation.php
│ ├── heading
│ │ ├── base.php
│ │ └── paragraph.php
│ ├── horizontal-rule
│ │ └── base.php
│ ├── icon
│ │ ├── general.php
│ │ ├── icon.php
│ │ ├── payment.php
│ │ ├── size.php
│ │ └── social.php
│ ├── image
│ │ ├── base.php
│ │ ├── figure.php
│ │ ├── picture.php
│ │ └── responsive.php
│ ├── inline
│ │ └── base.php
│ ├── list
│ │ ├── definition.php
│ │ ├── ordered.php
│ │ └── unordered.php
│ ├── paragraph
│ │ ├── base.php
│ │ └── lead.php
│ ├── pre
│ │ └── base.php
│ ├── table
│ │ └── base.php
│ └── timestamp
│ │ └── base.php
├── branding
│ ├── color
│ │ ├── contextual.php
│ │ ├── neutral.php
│ │ ├── primary.php
│ │ ├── readme.php
│ │ └── social.php
│ ├── logo
│ │ ├── android.php
│ │ ├── apple.php
│ │ ├── base.php
│ │ ├── favicon.php
│ │ └── placeholder.php
│ └── typography
│ │ ├── font.php
│ │ └── tester.php
├── component
│ ├── accordion
│ │ ├── collapse-all.php
│ │ ├── open-all.php
│ │ └── open-one.php
│ ├── alert
│ │ ├── base.php
│ │ ├── dismissible.php
│ │ ├── error.php
│ │ ├── info.php
│ │ ├── success.php
│ │ └── warning.php
│ ├── breadcrumb
│ │ └── base.php
│ ├── button
│ │ ├── base.php
│ │ ├── block.php
│ │ ├── disabled.php
│ │ ├── ghost.php
│ │ ├── readme.php
│ │ ├── size.php
│ │ ├── text.php
│ │ └── variation.php
│ ├── card
│ │ ├── base.php
│ │ └── card-group.php
│ ├── field-group
│ │ ├── base.php
│ │ ├── collapse.php
│ │ └── radio-group.php
│ ├── form-elements
│ │ ├── checkbox.php
│ │ ├── file.php
│ │ ├── radio.php
│ │ └── select.php
│ ├── nav
│ │ ├── base.php
│ │ ├── inline-pills.php
│ │ ├── inline-space.php
│ │ ├── inline.php
│ │ ├── multi-level.php
│ │ ├── pills.php
│ │ └── space.php
│ ├── overlay
│ │ ├── drawer-left.php
│ │ ├── drawer-right.php
│ │ ├── modal.php
│ │ └── overlay.php
│ ├── pagination
│ │ └── base.php
│ ├── single-form
│ │ └── base.php
│ ├── table
│ │ ├── base.php
│ │ ├── bordered.php
│ │ ├── condensed.php
│ │ ├── responsive-table.php
│ │ └── striped.php
│ ├── tabs
│ │ └── base.php
│ ├── tag
│ │ ├── badge.php
│ │ ├── base.php
│ │ ├── large.php
│ │ └── small.php
│ ├── title
│ │ └── base.php
│ └── toggle-icon
│ │ ├── base.php
│ │ └── readme.php
├── helper
│ ├── breakpoint
│ │ ├── base.php
│ │ └── min-max.php
│ ├── data
│ │ ├── base.php
│ │ └── readme.php
│ ├── ellipsis
│ │ └── base.php
│ ├── grid
│ │ ├── base.php
│ │ ├── center.php
│ │ ├── col.php
│ │ ├── gutter.php
│ │ ├── justify.php
│ │ └── reverse.php
│ ├── shape
│ │ ├── chevron.php
│ │ ├── circle.php
│ │ ├── cross.php
│ │ ├── hamburger.php
│ │ ├── minus.php
│ │ ├── plus.php
│ │ ├── ring.php
│ │ ├── square.php
│ │ ├── tick.php
│ │ └── triangle.php
│ └── toggle
│ │ ├── activate.php
│ │ ├── base.php
│ │ ├── container.php
│ │ ├── group.php
│ │ ├── grouped-toggles.php
│ │ ├── multiple-target.php
│ │ ├── readme.php
│ │ ├── stateful.php
│ │ └── tooltip.php
├── template
│ └── homepage
│ │ └── base.php
└── utility
│ ├── align
│ ├── center.php
│ ├── pull-left.php
│ ├── pull-right.php
│ ├── text-center.php
│ ├── text-left.php
│ └── text-right.php
│ ├── block
│ ├── base.php
│ └── readme.php
│ ├── color
│ ├── fill.php
│ └── text.php
│ ├── container
│ ├── base.php
│ └── readme.php
│ ├── full-height
│ └── base.php
│ ├── grid
│ ├── base.php
│ ├── collapse.php
│ ├── readme.php
│ ├── reverse.php
│ ├── space.php
│ ├── stretch-first.php
│ └── stretch-last.php
│ ├── list
│ ├── inline.php
│ ├── ordered.php
│ ├── unordered.php
│ └── unstyled.php
│ ├── ratio
│ ├── 16x9.php
│ ├── 4x3.php
│ ├── base.php
│ ├── landscape.php
│ ├── portrait.php
│ └── readme.php
│ ├── section
│ ├── base.php
│ └── readme.php
│ ├── separator
│ ├── base.php
│ └── readme.php
│ ├── space
│ ├── base.php
│ └── readme.php
│ ├── toggle
│ ├── base.php
│ └── media.php
│ └── visible
│ └── readme.php
├── publish
└── src
├── artwork
└── payment-icons.ai
├── img
├── logo
│ ├── logo.png
│ ├── logo_email.gif
│ └── logo_print.gif
├── placeholder
│ ├── 1240x400.jpg
│ ├── 1440x440.jpg
│ └── 300x300.jpg
└── vector
│ ├── general
│ ├── arrow-down6.svg
│ ├── arrow-left6.svg
│ ├── arrow-right6.svg
│ ├── arrow-up6.svg
│ ├── bubble.svg
│ ├── bubbles.svg
│ ├── cart.svg
│ ├── checkmark.svg
│ ├── cloud.svg
│ ├── cog.svg
│ ├── cross.svg
│ ├── envelop.svg
│ ├── heart.svg
│ ├── home.svg
│ ├── info.svg
│ ├── link.svg
│ ├── list.svg
│ ├── lock.svg
│ ├── lock4.svg
│ ├── menu.svg
│ ├── minus.svg
│ ├── notification.svg
│ ├── pencil.svg
│ ├── phone.svg
│ ├── phone2.svg
│ ├── plus.svg
│ ├── question.svg
│ ├── radio-checked.svg
│ ├── radio-unchecked.svg
│ ├── search.svg
│ ├── search3.svg
│ ├── star-full.svg
│ ├── table2.svg
│ └── user.svg
│ ├── payment
│ ├── Amazon-card-light.svg
│ ├── AmericanExpress-card-light.svg
│ ├── AmericanExpress-light.svg
│ ├── Apple-card-light.svg
│ ├── Cirrus-card-light.svg
│ ├── DinersClub-card-light.svg
│ ├── DirectDebit-card-light.svg
│ ├── Discover-card-light.svg
│ ├── JCB-card-light.svg
│ ├── Maestro-card-light.svg
│ ├── MasterCard-light.svg
│ ├── Paypal-card-light.svg
│ ├── Sage-card-light.svg
│ ├── Stripe-card-light.svg
│ ├── UnionPay-card-light.svg
│ ├── Visa-card-light.svg
│ ├── WorldPay-card-light.svg
│ ├── color
│ │ ├── amazon.svg
│ │ ├── american-express.svg
│ │ ├── braintree.svg
│ │ ├── cirrus.svg
│ │ ├── direct-debit.svg
│ │ ├── ebay.svg
│ │ ├── jcb.svg
│ │ ├── maestro.svg
│ │ ├── mastercard-securecode.svg
│ │ ├── mastercard.svg
│ │ ├── norton.svg
│ │ ├── paypal.svg
│ │ ├── paypoint.svg
│ │ ├── sage.svg
│ │ ├── stripe.svg
│ │ ├── verified-by-visa.svg
│ │ ├── visa-electron.svg
│ │ ├── visa.svg
│ │ ├── western-union.svg
│ │ └── worldpay.svg
│ ├── transparent
│ │ ├── amazon.svg
│ │ ├── american-express.svg
│ │ ├── braintree.svg
│ │ ├── cirrus.svg
│ │ ├── direct-debit.svg
│ │ ├── ebay.svg
│ │ ├── jcb.svg
│ │ ├── maestro.svg
│ │ ├── mastercard-securecode.svg
│ │ ├── mastercard.svg
│ │ ├── norton.svg
│ │ ├── paypal.svg
│ │ ├── paypoint.svg
│ │ ├── sage.svg
│ │ ├── stripe.svg
│ │ ├── verified-by-visa.svg
│ │ ├── visa-electron.svg
│ │ ├── visa.svg
│ │ ├── western-union.svg
│ │ └── worldpay.svg
│ └── white
│ │ ├── amazon.svg
│ │ ├── american-express.svg
│ │ ├── braintree.svg
│ │ ├── cirrus.svg
│ │ ├── direct-debit.svg
│ │ ├── ebay.svg
│ │ ├── jcb.svg
│ │ ├── maestro.svg
│ │ ├── mastercard-securecode.svg
│ │ ├── mastercard.svg
│ │ ├── norton.svg
│ │ ├── paypal.svg
│ │ ├── paypoint.svg
│ │ ├── sage.svg
│ │ ├── stripe.svg
│ │ ├── verified-by-visa.svg
│ │ ├── visa-electron.svg
│ │ ├── visa.svg
│ │ ├── western-union.svg
│ │ └── worldpay.svg
│ └── social
│ ├── facebook.svg
│ ├── google-plus.svg
│ ├── instagram.svg
│ ├── linkedin.svg
│ ├── pinterest.svg
│ ├── tumblr.svg
│ ├── twitter.svg
│ └── youtube.svg
├── js
├── chop.base.widget.js
├── chop.collapsible.widget.js
├── chop.global.js
├── chop.toggle.widget.js
└── chopchop-ui.js
├── scss
├── _setting.scss
├── _var.scss
├── base
│ ├── _form.scss
│ ├── _heading.scss
│ ├── _horizontal-rule.scss
│ ├── _html.scss
│ ├── _icon.scss
│ ├── _image.scss
│ ├── _table.scss
│ ├── _tag.scss
│ └── _text.scss
├── chopchop-ui.scss
├── component
│ ├── _accordion.scss
│ ├── _alert.scss
│ ├── _breadcrumb.scss
│ ├── _button.scss
│ ├── _card-group.scss
│ ├── _card.scss
│ ├── _checkbox.scss
│ ├── _drawer.scss
│ ├── _field-group.scss
│ ├── _modal.scss
│ ├── _nav.scss
│ ├── _overlay.scss
│ ├── _pagination.scss
│ ├── _radio.scss
│ ├── _responsive-table.scss
│ ├── _select.scss
│ ├── _single-form.scss
│ ├── _table.scss
│ ├── _tabs.scss
│ ├── _title.scss
│ └── _toggle-icon.scss
├── helper
│ ├── _accordion.scss
│ ├── _breakpoint.scss
│ ├── _button.scss
│ ├── _ellipsis.scss
│ ├── _flex.scss
│ ├── _grid.scss
│ ├── _number.scss
│ ├── _ratio.scss
│ ├── _section.scss
│ ├── _setting-function.scss
│ ├── _shape.scss
│ ├── _tabs.scss
│ ├── _type.scss
│ └── _variable-function.scss
├── styles.scss
└── utility
│ ├── _align.scss
│ ├── _animate.scss
│ ├── _block.scss
│ ├── _clearfix.scss
│ ├── _color.scss
│ ├── _container.scss
│ ├── _full-height.scss
│ ├── _grid.scss
│ ├── _image.scss
│ ├── _list.scss
│ ├── _ratio.scss
│ ├── _section.scss
│ ├── _separator.scss
│ ├── _shape.scss
│ ├── _space.scss
│ ├── _toggle.scss
│ ├── _typography.scss
│ ├── _visible.scss
│ └── _z-index.scss
└── vendor
├── bxslider
└── bxslider.js
├── element-queries
├── ElementQueries.js
└── ResizeSensor.js
├── enquire
└── enquire.js
├── favicons
├── android-chrome-192x192.png
├── apple-touch-icon.png
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── manifest.json
├── mstile-150x150.png
└── safari-pinned-tab.svg
├── jquery.cookie
└── jquery.cookie.js
├── jquery
├── jquery-no-conflict.js
├── jquery-ui.min.js
└── jquery.js
├── js.cookie
└── js.cookie.js
├── modernizer
└── modernizr.js
├── normalize.css
└── normalize.css
├── picturefill
└── picturefill.js
├── prismjs
├── prism.css
└── prism.js
├── svg4everybody
└── svg4everybody.js
└── svgxuse
└── svgxuse.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | # This file is for unifying the coding style for different editors and IDEs
2 | # editorconfig.org
3 |
4 | root = true
5 |
6 | [*]
7 | charset = utf-8
8 | end_of_line = lf
9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | indent_style = space
12 | indent_size = 4
13 |
14 | [*.md]
15 | trim_trailing_whitespace = false 1,1 Top
16 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .AppleDouble
3 | .LSOverride
4 |
5 | # Thumbnails
6 | ._*
7 |
8 | # Files that might appear in the root of a volume
9 | .DocumentRevisions-V100
10 | .fseventsd
11 | .Spotlight-V100
12 | .TemporaryItems
13 | .Trashes
14 | .VolumeIcon.icns
15 |
16 | # Directories potentially created on remote AFP share
17 | .AppleDB
18 | .AppleDesktop
19 | Network Trash Folder
20 | Temporary Items
21 | .apdisk
22 | .vscode
23 |
24 | # Gulp
25 | node_modules
26 | .sass-cache
27 | npm-debug.log
28 |
29 | # Server stuff
30 | .bash_history
31 | .bash_logout
32 | .bashrc
33 | .cache
34 | .profile
35 | .ssh
36 | log
37 |
38 |
39 | # Temp files
40 | build
41 | cc
42 |
--------------------------------------------------------------------------------
/.htaccess:
--------------------------------------------------------------------------------
1 | Options -Multiviews
2 | RewriteEngine On
3 | RewriteCond %{REQUEST_FILENAME} -s [OR]
4 | RewriteCond %{REQUEST_FILENAME} -l [OR]
5 | RewriteCond %{REQUEST_FILENAME} -f
6 | RewriteRule ^.*$ - [NC,L]
7 | RewriteRule ^(.*)$ index.php [PT,L]
8 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Chop Chop
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/data/colour.yml:
--------------------------------------------------------------------------------
1 | ---
2 | colour:
3 | - "Red"
4 | - "Green"
5 | - "Blue"
6 | - "Yellow"
7 | - "Purple"
8 | - "Pink"
9 | - "Turquoise"
10 |
--------------------------------------------------------------------------------
/data/company.yml:
--------------------------------------------------------------------------------
1 | ---
2 | company:
3 | name: "iWeb"
4 | vat-number: "670 1335 61"
5 | company-number: "3980207"
6 | address: "10 Parker Court, Dyson Way, Staffordshire Technology Park, Stafford. ST18 0WP."
7 | telephone: "01785 876469"
8 | email: "hello@iweb.co.uk"
9 | copyright: "©iWeb is a trading name of Interactive Web Solutions Ltd. 1995 - 2016."
10 |
11 | twitter-handle: "@iwebtweets"
12 | twitter-url: "https://twitter.com/iwebtweets"
--------------------------------------------------------------------------------
/data/first-name.yml:
--------------------------------------------------------------------------------
1 | ---
2 | first-name:
3 | - "Jake"
4 | - "Gareth"
5 | - "David"
6 | - "Andrew"
7 | - "Jon"
8 | - "Bas"
9 | - "Philip"
10 | - "Chloe"
11 | - "Laura"
12 | - "Darren"
13 | - "Nicholas"
14 | - "Edward"
15 | - "Richard"
16 | - "Neil"
17 |
--------------------------------------------------------------------------------
/data/last-name.yml:
--------------------------------------------------------------------------------
1 | ---
2 | last-name:
3 | - "Redfern"
4 | - "Joyce"
5 | - "Baker"
6 | - "Uppal"
7 | - "Singh"
8 | - "Wylie"
9 | - "McCombe"
10 | - "Pinson"
11 | - "Turner"
12 | - "Gordon"
13 | - "Cobley"
14 | - "Larkin"
15 |
--------------------------------------------------------------------------------
/data/price.yml:
--------------------------------------------------------------------------------
1 | ---
2 | price:
3 | - 30
4 | - 40
5 | - 9.99
6 | - 5.99
7 | - 99.99
8 | - 78.50
9 | - 19.99
10 | - 20
11 | - 14.99
12 | - 103.99
13 | - 199.99
14 | - 149
15 | - 169
16 |
--------------------------------------------------------------------------------
/data/size.yml:
--------------------------------------------------------------------------------
1 | ---
2 | size:
3 | - "X-Small"
4 | - "Small"
5 | - "Medium"
6 | - "Large"
7 | - "X-Large"
8 | - "XX-Large"
9 |
--------------------------------------------------------------------------------
/data/title.yml:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | - "Phasellus condimentum ante auctor urna imperdiet"
4 | - "Integer imperdiet risus non metus"
5 | - "Quisque faucibus quam eu tempor"
6 | - "Nulla egestas mi ut vehicula"
7 | - "Integer turpis urna molestie non"
8 | - "Sed ut volutpat ipsum sed"
9 | - "Vestibulum iaculis dictum velit eu"
10 | - "Nullam posuere diam sapien sed"
11 | - "Mauris non euismod massa Duis"
12 | - "Mauris efficitur quam si amet"
13 | - "Nunc efficitur vehicula lacus non"
14 | - "Aliquam fermentum consequat metus non"
15 | - "Nunc commodo ornare dolor ac aenean eget ornare neque"
16 | - "Vivamus ut nisl pretium tincidunt"
17 |
--------------------------------------------------------------------------------
/inc/lib/helper.php:
--------------------------------------------------------------------------------
1 | \]"]+)?/';
18 |
19 | preg_match_all($regex, $css_contents, $matches);
20 | //sort($matches[0]);
21 | return array_unique($matches[0]);
22 | }
23 |
24 | /*
25 | * @var $width - width of the image
26 | * @var $height - height of the image
27 | * @var $fg - foreground (text) colour, 6 characters
28 | * @var $bg - background colour, 6 characters
29 | * @var $text - text to be displayed on the image
30 | *
31 | * Example Usage: Helper::getPlaceholder('400','550','ffffff','000000','ChopChop');
32 | */
33 | public static function getPlaceholder($width, $height, $fg = false, $bg = false, $text = false)
34 | {
35 | $placeholderUrl = 'http://pims.iweb.co.uk/';
36 | $placeholderUrl .= $width . 'x' . $height;
37 |
38 | if ($fg || $bg || $text) {
39 | $placeholderUrl .= '?';
40 | }
41 |
42 | if ($fg) {
43 | $placeholderUrl .= 'fg=' . $fg;
44 | }
45 |
46 | if ($bg) {
47 | $placeholderUrl .= '&bg=' . $bg;
48 | }
49 |
50 | if ($text) {
51 | $placeholderUrl .= '&text=' . $text;
52 | }
53 |
54 | return $placeholderUrl;
55 | }
56 |
57 | public static function printPlaceholder($width, $height, $fg = false, $bg = false, $text = false)
58 | {
59 | echo '
14 |
15 | $categoryChildren){
16 | foreach($categoryChildren as $category) { ?>
17 |
20 |
21 |
22 |
23 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
38 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chopchop",
3 | "version": "3.0.0",
4 | "description": "Chop Chop is a lightweight frontend pattern primer.",
5 | "main": "gulpfile.js",
6 | "scripts": {
7 | "watch": "gulp; gulp watch",
8 | "build": "gulp",
9 | "build:production": "gulp --production"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git@github.com:getchopchop/chopchop.git"
14 | },
15 | "keywords": [
16 | "npm",
17 | "gulp",
18 | "sass",
19 | "css",
20 | "js",
21 | "img",
22 | "svg"
23 | ],
24 | "author": "Chop Chop https://github.com/getchopchop/chopchop/",
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/getchopchop/chopchop/issues"
28 | },
29 | "homepage": "https://github.com/getchopchop/chopchop",
30 | "devDependencies": {
31 | "del": "^2.1.0",
32 | "fs": "0.0.2",
33 | "gulp": "github:gulpjs/gulp#4.0",
34 | "gulp-autoprefixer": "^3.0.2",
35 | "gulp-changed": "^1.3.0",
36 | "gulp-clip-empty-files": "^0.1.1",
37 | "gulp-combine-mq": "^0.4.0",
38 | "gulp-cssnano": "^2.1.0",
39 | "gulp-imagemin": "^2.3.0",
40 | "gulp-jshint": "^2.0.0",
41 | "gulp-sass": "^2.1.0",
42 | "gulp-svg-sprite": "^1.3.1",
43 | "gulp-uglify": "^1.4.2",
44 | "gulp-util": "^3.0.6",
45 | "jshint": "^2.8.0",
46 | "merge-stream": "^1.0.0",
47 | "path": "^0.12.7"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/pattern/base/blockquote/base.php:
--------------------------------------------------------------------------------
1 |
2 | The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar , pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
3 | Someone famous in Source Title
4 |
5 |
--------------------------------------------------------------------------------
/pattern/base/button/base.php:
--------------------------------------------------------------------------------
1 | Button
2 |
--------------------------------------------------------------------------------
/pattern/base/button/disabled.php:
--------------------------------------------------------------------------------
1 | Disabled Button
2 |
--------------------------------------------------------------------------------
/pattern/base/form/checkbox.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
12 |
13 |
14 |
17 |
18 |
--------------------------------------------------------------------------------
/pattern/base/form/label.php:
--------------------------------------------------------------------------------
1 | Sign up for news and offers
2 |
--------------------------------------------------------------------------------
/pattern/base/form/legend.php:
--------------------------------------------------------------------------------
1 | Sign up for an account
2 |
--------------------------------------------------------------------------------
/pattern/base/form/radio.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
12 |
13 |
14 |
15 |
18 |
19 |
--------------------------------------------------------------------------------
/pattern/base/form/select.php:
--------------------------------------------------------------------------------
1 |
2 |
Browse a category...
3 |
4 |
5 |
6 | Option One
7 | Option Two
8 | Option Three
9 |
10 |
11 |
12 |
2 |
Error Input
3 |
4 |
6 |
7 |
This field has failed validation.
8 |
9 |
12 |
Valid
13 |
14 |
16 |
h1 Heading
2 |
3 | h2 Heading
4 |
5 | h3 Heading
6 |
7 | h4 Heading
8 |
9 | h5 Heading
10 |
11 | h6 Heading
12 |
--------------------------------------------------------------------------------
/pattern/base/heading/paragraph.php:
--------------------------------------------------------------------------------
1 | h1 Heading
2 |
3 | h2 Heading
4 |
5 | h3 Heading
6 |
7 | h4 Heading
8 |
9 | h5 Heading
10 |
11 | h6 Heading
12 |
--------------------------------------------------------------------------------
/pattern/base/horizontal-rule/base.php:
--------------------------------------------------------------------------------
1 | .icon--card
23 |
26 |
--------------------------------------------------------------------------------
/pattern/base/icon/size.php:
--------------------------------------------------------------------------------
1 | .icon--lg
2 |
3 | .icon--sm
4 |
--------------------------------------------------------------------------------
/pattern/base/icon/social.php:
--------------------------------------------------------------------------------
1 |
13 |
16 |
--------------------------------------------------------------------------------
/pattern/base/image/base.php:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/pattern/base/image/picture.php:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/pattern/base/image/responsive.php:
--------------------------------------------------------------------------------
1 | This is a text link
2 |
3 | Strong is used to indicate strong importance
4 |
5 | This text has added emphasis
6 |
7 | The b element is stylistically different text from normal text, without any special importance
8 |
9 | The i element is text that is set off from the normal text
10 |
11 | The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
12 |
13 | This text is deleted and This text is inserted
14 |
15 | This text has a strikethrough
16 |
17 | Superscript®
18 |
19 | Subscript for things like H2 O
20 |
21 | This small text is small for for fine print, etc.
22 |
23 | Abbreviation: HTML
24 |
25 | Keybord input: Cmd
26 |
27 | This text is a short inline quotation
28 |
29 | This is a citation
30 |
31 | The dfn element indicates a definition.
32 |
33 | The mark element indicates a highlight
34 |
35 | This is what inline code looks like.
36 |
37 | This is sample output from a computer program
38 |
39 | The variarble element , such as x = y
40 |
--------------------------------------------------------------------------------
/pattern/base/list/definition.php:
--------------------------------------------------------------------------------
1 |
2 | This is a term.
3 | This is the definition of that term, which both live in a dl.
4 | Here is another term.
5 | And it gets a definition too, which is this line.
6 | Here is term that shares a definition with the term below.
7 | Here is a defined term.
8 | dt terms may stand on their own without an accompanying dd, but in that case they share descriptions with the next available dt. You may not have a dd without a parent dt.
10 |
--------------------------------------------------------------------------------
/pattern/base/list/ordered.php:
--------------------------------------------------------------------------------
1 |
2 | The European languages are members of the same family.
3 | Their separate existence is a myth.
4 | For science, music, sport, etc, Europe uses the same vocabulary.
5 | The languages only differ in their grammar, their pronunciation and their most common words.
6 | Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
7 | To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.
8 | If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.
9 | The new common language will be more simple and regular than the existing European languages.
10 |
11 | It will be as simple as Occidental; in fact, it will be Occidental.
12 | To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.
13 | The European languages are members of the same family.
14 | Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
15 |
16 |
17 | The languages only differ in their grammar, their pronunciation and their most common words.
18 | Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
19 |
20 |
--------------------------------------------------------------------------------
/pattern/base/list/unordered.php:
--------------------------------------------------------------------------------
1 |
2 | The European languages are members of the same family.
3 | Their separate existence is a myth.
4 | For science, music, sport, etc, Europe uses the same vocabulary.
5 | The languages only differ in their grammar, their pronunciation and their most common words.
6 | Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
7 | To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.
8 | If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.
9 | The new common language will be more simple and regular than the existing European languages.
10 |
11 | It will be as simple as Occidental; in fact, it will be Occidental.
12 | To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.
13 | The European languages are members of the same family.
14 | Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
15 |
16 |
17 | The languages only differ in their grammar, their pronunciation and their most common words.
18 | Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
19 |
20 |
--------------------------------------------------------------------------------
/pattern/base/paragraph/base.php:
--------------------------------------------------------------------------------
1 | The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar , pronunciation and more common words.
2 |
--------------------------------------------------------------------------------
/pattern/base/paragraph/lead.php:
--------------------------------------------------------------------------------
1 | The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar , pronunciation and more common words.
2 |
--------------------------------------------------------------------------------
/pattern/base/pre/base.php:
--------------------------------------------------------------------------------
1 |
2 | P R E F O R M A T T E D T E X T
3 | ! " # $ % & ' ( ) * + , - . /
4 | 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
5 | @ A B C D E F G H I J K L M N O
6 | P Q R S T U V W X Y Z [ \ ] ^ _
7 | ` a b c d e f g h i j k l m n o
8 | p q r s t u v w x y z { | } ~
9 |
10 |
--------------------------------------------------------------------------------
/pattern/base/table/base.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Table Heading 1
5 | Table Heading 2
6 | Table Heading 3
7 | Table Heading 4
8 | Table Heading 5
9 |
10 |
11 |
12 |
13 | Table Footer 1
14 | Table Footer 2
15 | Table Footer 3
16 | Table Footer 4
17 | Table Footer 5
18 |
19 |
20 |
21 |
22 | Table Cell 1
23 | Table Cell 2
24 | Table Cell 3
25 | Table Cell 4
26 | Table Cell 5
27 |
28 |
29 | Table Cell 1
30 | Table Cell 2
31 | Table Cell 3
32 | Table Cell 4
33 | Table Cell 5
34 |
35 |
36 | Table Cell 1
37 | Table Cell 2
38 | Table Cell 3
39 | Table Cell 4
40 | Table Cell 5
41 |
42 |
43 | Table Cell 1
44 | Table Cell 2
45 | Table Cell 3
46 | Table Cell 4
47 | Table Cell 5
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/pattern/base/timestamp/base.php:
--------------------------------------------------------------------------------
1 | 2 weeks ago
2 | The concert took place on May 15 .
3 |
--------------------------------------------------------------------------------
/pattern/branding/color/contextual.php:
--------------------------------------------------------------------------------
1 |
2 |
16 |
--------------------------------------------------------------------------------
/pattern/branding/color/neutral.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
--------------------------------------------------------------------------------
/pattern/branding/color/primary.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
--------------------------------------------------------------------------------
/pattern/branding/color/readme.php:
--------------------------------------------------------------------------------
1 | Read me stuff goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
--------------------------------------------------------------------------------
/pattern/branding/color/social.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
--------------------------------------------------------------------------------
/pattern/branding/logo/android.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Android Home Screen
4 |
5 |
192x192
6 |
7 |
8 |
Windows Tile (Reverse)
9 |
10 |
150x150
11 |
12 |
2 |
3 | 180x180
5 |
6 |
7 |
--------------------------------------------------------------------------------
/pattern/branding/logo/base.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16x16
5 |
6 |
7 |
8 |
32x32
9 |
10 |
2 | a b c d e f g h i j k l m n o p q r s t u v w x y z
6 |
--------------------------------------------------------------------------------
/pattern/branding/typography/tester.php:
--------------------------------------------------------------------------------
1 |
2 |
I am the big heading
3 |
4 |
5 |
6 |
I am a second level heading
7 |
8 |
9 |
10 |
11 |
I am a second level heading
12 |
13 |
I am a third level heading
14 |
Shall we have a very important quote from someone famous?
15 |
16 |
I am a third level heading
17 |
18 |
I am a fourth level heading
19 |
20 |
21 |
22 |
2 |
5 |
8 |
11 |
14 |
17 |
20 |
2 |
5 |
8 |
11 |
14 |
17 |
20 |
2 |
5 |
8 |
11 |
14 |
17 |
20 |
2 |
This is a default alert message.
3 |
2 |
This is a default alert message with a close option. Close
3 |
2 |
This is a error alert message.
3 |
2 |
This is a warning info message.
3 |
2 |
This is a success alert message.
3 |
2 |
This is a warning alert message.
3 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/pattern/component/button/base.php:
--------------------------------------------------------------------------------
1 | Button
2 | Button
3 |
--------------------------------------------------------------------------------
/pattern/component/button/block.php:
--------------------------------------------------------------------------------
1 | Button Block
2 | Button Block
3 |
--------------------------------------------------------------------------------
/pattern/component/button/disabled.php:
--------------------------------------------------------------------------------
1 | Disabled Button
2 | Disabled Button
3 |
--------------------------------------------------------------------------------
/pattern/component/button/ghost.php:
--------------------------------------------------------------------------------
1 | Ghost Button
2 | Ghost Button
3 |
--------------------------------------------------------------------------------
/pattern/component/button/readme.php:
--------------------------------------------------------------------------------
1 | example of readme
2 |
3 |
4 |
6 | //
7 | //
Content goes here.
8 | //
13 |
14 |
15 |
--------------------------------------------------------------------------------
/pattern/component/button/size.php:
--------------------------------------------------------------------------------
1 | Button sm
2 | Button sm
3 |
4 | Button lg
5 | Button lg
6 |
--------------------------------------------------------------------------------
/pattern/component/button/text.php:
--------------------------------------------------------------------------------
1 | Text Button
2 | Text Button
3 |
--------------------------------------------------------------------------------
/pattern/component/button/variation.php:
--------------------------------------------------------------------------------
1 |
15 |
16 | Button
17 | Button
18 | Ghost Button
19 | Ghost Button
20 |
21 |
--------------------------------------------------------------------------------
/pattern/component/card/base.php:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 | Block Content
8 |
9 |
12 |
2 |
3 |
4 |
5 |
6 |
7 | Now £
8 |
9 | delivered £
13 |
14 |
15 |
16 |
17 |
Free delivery.
18 |
19 |
20 |
2 |
Text Input *
3 |
4 |
6 |
2 |
3 |
5 |
6 | Subscribe to the newsletter to receive store news and offers via email.
7 |
8 |
2 |
Choose an option
3 |
23 |
.checkbox class. Use .field-group to space.
5 | */ ?>
6 |
7 |
8 |
9 | Checked
11 |
12 |
13 |
14 | Unchecked
16 |
17 |
18 |
19 | Disabled
21 |
22 |
23 |
24 | Label wrap input
26 |
--------------------------------------------------------------------------------
/pattern/component/form-elements/file.php:
--------------------------------------------------------------------------------
1 |
2 |
Choose a file
3 |
4 |
6 |
.radio class. Use .field-group to space.
5 | */ ?>
6 |
7 |
8 |
9 | Checked
11 |
12 |
13 |
14 | Unchecked
16 |
17 |
18 |
19 | Disabled
21 |
22 |
23 |
24 | Label wrap input
26 |
--------------------------------------------------------------------------------
/pattern/component/form-elements/select.php:
--------------------------------------------------------------------------------
1 |
2 |
Browse a category...
3 |
4 |
5 |
6 |
7 | Option One
8 | Option Two
9 | Option Three
10 |
11 |
12 |
13 |
14 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/pattern/component/nav/inline-pills.php:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/pattern/component/nav/inline-space.php:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/pattern/component/nav/inline.php:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/pattern/component/nav/multi-level.php:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/pattern/component/nav/pills.php:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/pattern/component/nav/space.php:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/pattern/component/overlay/drawer-left.php:
--------------------------------------------------------------------------------
1 | Active left drawer
2 |
3 |
4 |
5 |
6 |
7 |
8 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
Active right 1 drawer or Active right 2 drawer
2 |
3 |
4 |
5 |
6 |
21 |
22 |
35 |
36 |
37 |
Overlay is hidden by default and shows on activation of drawers or modals.
2 |
3 |
4 |
--------------------------------------------------------------------------------
/pattern/component/pagination/base.php:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/pattern/component/single-form/base.php:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/pattern/component/table/base.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Table Heading 1
5 | Table Heading 2
6 | Table Heading 3
7 | Table Heading 4
8 | Table Heading 5
9 |
10 |
11 |
12 |
13 | Table Footer 1
14 | Table Footer 2
15 | Table Footer 3
16 | Table Footer 4
17 | Table Footer 5
18 |
19 |
20 |
21 |
22 | Table Cell 1
23 | Table Cell 2
24 | Table Cell 3
25 | Table Cell 4
26 | Table Cell 5
27 |
28 |
29 | Table Cell 1
30 | Table Cell 2
31 | Table Cell 3
32 | Table Cell 4
33 | Table Cell 5
34 |
35 |
36 | Table Cell 1
37 | Table Cell 2
38 | Table Cell 3
39 | Table Cell 4
40 | Table Cell 5
41 |
42 |
43 | Table Cell 1
44 | Table Cell 2
45 | Table Cell 3
46 | Table Cell 4
47 | Table Cell 5
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/pattern/component/table/bordered.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Table Heading 1
5 | Table Heading 2
6 | Table Heading 3
7 | Table Heading 4
8 | Table Heading 5
9 |
10 |
11 |
12 |
13 | Table Footer 1
14 | Table Footer 2
15 | Table Footer 3
16 | Table Footer 4
17 | Table Footer 5
18 |
19 |
20 |
21 |
22 | Table Cell 1
23 | Table Cell 2
24 | Table Cell 3
25 | Table Cell 4
26 | Table Cell 5
27 |
28 |
29 | Table Cell 1
30 | Table Cell 2
31 | Table Cell 3
32 | Table Cell 4
33 | Table Cell 5
34 |
35 |
36 | Table Cell 1
37 | Table Cell 2
38 | Table Cell 3
39 | Table Cell 4
40 | Table Cell 5
41 |
42 |
43 | Table Cell 1
44 | Table Cell 2
45 | Table Cell 3
46 | Table Cell 4
47 | Table Cell 5
48 |
49 |
50 | Table Cell 1
51 | Table Cell 2
52 | Table Cell 3
53 | Table Cell 4
54 | Table Cell 5
55 |
56 |
57 | Table Cell 1
58 | Table Cell 2
59 | Table Cell 3
60 | Table Cell 4
61 | Table Cell 5
62 |
63 |
64 | Table Cell 1
65 | Table Cell 2
66 | Table Cell 3
67 | Table Cell 4
68 | Table Cell 5
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/pattern/component/table/condensed.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Table Heading 1
5 | Table Heading 2
6 | Table Heading 3
7 | Table Heading 4
8 | Table Heading 5
9 |
10 |
11 |
12 |
13 | Table Footer 1
14 | Table Footer 2
15 | Table Footer 3
16 | Table Footer 4
17 | Table Footer 5
18 |
19 |
20 |
21 |
22 | Table Cell 1
23 | Table Cell 2
24 | Table Cell 3
25 | Table Cell 4
26 | Table Cell 5
27 |
28 |
29 | Table Cell 1
30 | Table Cell 2
31 | Table Cell 3
32 | Table Cell 4
33 | Table Cell 5
34 |
35 |
36 | Table Cell 1
37 | Table Cell 2
38 | Table Cell 3
39 | Table Cell 4
40 | Table Cell 5
41 |
42 |
43 | Table Cell 1
44 | Table Cell 2
45 | Table Cell 3
46 | Table Cell 4
47 | Table Cell 5
48 |
49 |
50 | Table Cell 1
51 | Table Cell 2
52 | Table Cell 3
53 | Table Cell 4
54 | Table Cell 5
55 |
56 |
57 | Table Cell 1
58 | Table Cell 2
59 | Table Cell 3
60 | Table Cell 4
61 | Table Cell 5
62 |
63 |
64 | Table Cell 1
65 | Table Cell 2
66 | Table Cell 3
67 | Table Cell 4
68 | Table Cell 5
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/pattern/component/table/striped.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Table Heading 1
5 | Table Heading 2
6 | Table Heading 3
7 | Table Heading 4
8 | Table Heading 5
9 |
10 |
11 |
12 |
13 | Table Footer 1
14 | Table Footer 2
15 | Table Footer 3
16 | Table Footer 4
17 | Table Footer 5
18 |
19 |
20 |
21 |
22 | Table Cell 1
23 | Table Cell 2
24 | Table Cell 3
25 | Table Cell 4
26 | Table Cell 5
27 |
28 |
29 | Table Cell 1
30 | Table Cell 2
31 | Table Cell 3
32 | Table Cell 4
33 | Table Cell 5
34 |
35 |
36 | Table Cell 1
37 | Table Cell 2
38 | Table Cell 3
39 | Table Cell 4
40 | Table Cell 5
41 |
42 |
43 | Table Cell 1
44 | Table Cell 2
45 | Table Cell 3
46 | Table Cell 4
47 | Table Cell 5
48 |
49 |
50 | Table Cell 1
51 | Table Cell 2
52 | Table Cell 3
53 | Table Cell 4
54 | Table Cell 5
55 |
56 |
57 | Table Cell 1
58 | Table Cell 2
59 | Table Cell 3
60 | Table Cell 4
61 | Table Cell 5
62 |
63 |
64 | Table Cell 1
65 | Table Cell 2
66 | Table Cell 3
67 | Table Cell 4
68 | Table Cell 5
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/pattern/component/tabs/base.php:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
11 |
14 |
17 |
20 |
Badge
2 |
--------------------------------------------------------------------------------
/pattern/component/tag/base.php:
--------------------------------------------------------------------------------
1 | Base tag
2 |
--------------------------------------------------------------------------------
/pattern/component/tag/large.php:
--------------------------------------------------------------------------------
1 | large
2 |
--------------------------------------------------------------------------------
/pattern/component/tag/small.php:
--------------------------------------------------------------------------------
1 | small
2 |
--------------------------------------------------------------------------------
/pattern/component/title/base.php:
--------------------------------------------------------------------------------
1 |
2 |
This is a Main Title
3 | This is a Sub Title
4 |
5 |
--------------------------------------------------------------------------------
/pattern/component/toggle-icon/base.php:
--------------------------------------------------------------------------------
1 |
5 |
13 |
--------------------------------------------------------------------------------
/pattern/component/toggle-icon/readme.php:
--------------------------------------------------------------------------------
1 | Adds a plus and minus icon to the interface using the shape mixin .
--------------------------------------------------------------------------------
/pattern/helper/breakpoint/base.php:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/pattern/helper/breakpoint/min-max.php:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/pattern/helper/data/base.php:
--------------------------------------------------------------------------------
1 | Company Information
2 |
3 | Name:
4 | Copyright:
5 | Twitter:
6 |
7 |
8 | List of Titles
9 |
14 |
15 | Random Title
16 |
17 |
18 | Price
19 |
20 |
21 | Was £
22 | Now £
23 | Save £
24 |
25 |
26 | Random Colour
27 |
28 |
29 | Random Size
30 |
31 |
32 | Random First Name
33 |
34 |
35 | Random Last Name
36 |
37 |
38 | Random Paragraph
39 |
40 |
--------------------------------------------------------------------------------
/pattern/helper/data/readme.php:
--------------------------------------------------------------------------------
1 | A demo of using data. See documentation for more information .
2 |
--------------------------------------------------------------------------------
/pattern/helper/ellipsis/base.php:
--------------------------------------------------------------------------------
1 | This is an example of the ellipsis pattern, resize your browser to see it get truncated!
2 |
--------------------------------------------------------------------------------
/pattern/helper/grid/base.php:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/pattern/helper/grid/center.php:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/pattern/helper/grid/col.php:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/pattern/helper/grid/gutter.php:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/pattern/helper/grid/justify.php:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/pattern/helper/grid/reverse.php:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/pattern/helper/shape/chevron.php:
--------------------------------------------------------------------------------
1 | Activate Beef Burger
2 |
3 |
4 |
🍔
5 |
6 |
--------------------------------------------------------------------------------
/pattern/helper/toggle/base.php:
--------------------------------------------------------------------------------
1 | Toggle Hot Dog
2 |
3 |
4 |
🌭
5 |
6 |
--------------------------------------------------------------------------------
/pattern/helper/toggle/container.php:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/pattern/helper/toggle/group.php:
--------------------------------------------------------------------------------
1 | Toggle Mushroom in group "veg"
2 | Toggle Tomato in group "veg"
3 |
4 | Toggle Banana in group "fruit"
5 | Toggle Apple in group "fruit"
6 |
7 |
8 |
🍄
9 |
10 |
11 |
12 |
🍅
13 |
14 |
15 |
16 |
🍌
17 |
18 |
19 |
20 |
🍎
21 |
22 |
--------------------------------------------------------------------------------
/pattern/helper/toggle/grouped-toggles.php:
--------------------------------------------------------------------------------
1 |
2 |
🏴☠️
3 |
4 |
5 |
6 | Show Pirate
7 |
8 |
9 |
10 | Hide Pirate
11 |
12 |
13 |
--------------------------------------------------------------------------------
/pattern/helper/toggle/multiple-target.php:
--------------------------------------------------------------------------------
1 | Toggle All Animals
2 |
3 |
4 |
🐴
5 |
6 |
7 |
8 |
🐔
9 |
10 |
11 |
12 |
🐴
13 |
14 |
--------------------------------------------------------------------------------
/pattern/helper/toggle/readme.php:
--------------------------------------------------------------------------------
1 | Full documentation can be found on our GitHub wiki .
--------------------------------------------------------------------------------
/pattern/helper/toggle/stateful.php:
--------------------------------------------------------------------------------
1 | Activate Alien
2 | Deactivate Alien
3 |
4 |
5 |
6 |
👾
7 |
8 |
--------------------------------------------------------------------------------
/pattern/helper/toggle/tooltip.php:
--------------------------------------------------------------------------------
1 | Boo
2 |
3 |
4 |
👻
5 |
6 |
--------------------------------------------------------------------------------
/pattern/template/homepage/base.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/pattern/utility/align/center.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Curabitur facilisis mi a nunc tempus, vel ornare enim pharetra. Donec mattis tellus iaculis metus fringilla, vel maximus lorem condimentum. In in viverra velit. Vestibulum eu turpis non velit consectetur feugiat vitae et dolor. Aliquam molestie, risus sed tempor bibendum, justo nisi finibus ante, id iaculis neque nibh a risus. Nunc ex orci, ullamcorper vitae ullamcorper ut, facilisis ut lectus. Donec ut lectus ut risus congue maximus. Sed dapibus auctor egestas. In pretium iaculis elit. Suspendisse euismod turpis sollicitudin augue interdum dictum. Quisque ullamcorper libero eu tortor porttitor ullamcorper.
4 |
2 |
3 |
Curabitur facilisis mi a nunc tempus, vel ornare enim pharetra. Donec mattis tellus iaculis metus fringilla, vel maximus lorem condimentum. In in viverra velit. Vestibulum eu turpis non velit consectetur feugiat vitae et dolor. Aliquam molestie, risus sed tempor bibendum, justo nisi finibus ante, id iaculis neque nibh a risus. Nunc ex orci, ullamcorper vitae ullamcorper ut, facilisis ut lectus. Donec ut lectus ut risus congue maximus. Sed dapibus auctor egestas. In pretium iaculis elit. Suspendisse euismod turpis sollicitudin augue interdum dictum. Quisque ullamcorper libero eu tortor porttitor ullamcorper.
4 |
This is center aligned text
2 |
--------------------------------------------------------------------------------
/pattern/utility/align/text-left.php:
--------------------------------------------------------------------------------
1 | This is left aligned text
2 |
--------------------------------------------------------------------------------
/pattern/utility/align/text-right.php:
--------------------------------------------------------------------------------
1 | This is right aligned text
2 |
--------------------------------------------------------------------------------
/pattern/utility/block/base.php:
--------------------------------------------------------------------------------
1 |
2 |
Text inside block
3 |
Adds padding and explicitly displays the element as a block.
2 | Available classes:
3 |
4 |
5 |
12 |
--------------------------------------------------------------------------------
/pattern/utility/color/fill.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
--------------------------------------------------------------------------------
/pattern/utility/color/text.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Text
9 |
10 |
14 |
15 |
16 |
17 |
2 |
I am in a container
3 |
Containers are centered with various max widths.
2 | Available classes:
3 |
4 |
5 |
12 |
--------------------------------------------------------------------------------
/pattern/utility/full-height/base.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 1
8 |
9 |
14 |
Columns
2 | Grids are 12 columns at all screen sizes. At each breakpoint columns can be adapted. The following classes are available for columns:
3 |
4 |
5 |
12 |
13 |
14 | Gutters
15 | Gutters add spacing on the left and right of each column. All gutters are available for both x and y, just x or just y. Classes available for gutters:
16 |
17 |
18 |
25 |
26 |
27 | Center
28 | Grids can be centered vertically, horizontally or both at the same time. Classes available:
29 |
30 |
31 |
38 |
--------------------------------------------------------------------------------
/pattern/utility/grid/reverse.php:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/pattern/utility/grid/space.php:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/pattern/utility/grid/stretch-first.php:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/pattern/utility/grid/stretch-last.php:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/pattern/utility/list/inline.php:
--------------------------------------------------------------------------------
1 |
2 | Item 1
3 | Item 2
4 | Item 3
5 | Item 4
6 | Item 5
7 |
8 |
--------------------------------------------------------------------------------
/pattern/utility/list/ordered.php:
--------------------------------------------------------------------------------
1 |
2 | Item 1
3 | Item 2
4 | Item 3
5 | Item 4
6 | Item 5
7 |
8 |
--------------------------------------------------------------------------------
/pattern/utility/list/unordered.php:
--------------------------------------------------------------------------------
1 |
2 | Item 1
3 | Item 2
4 | Item 3
5 | Item 4
6 | Item 5
7 |
8 |
--------------------------------------------------------------------------------
/pattern/utility/list/unstyled.php:
--------------------------------------------------------------------------------
1 |
2 | Item 1
3 | Item 2
4 | Item 3
5 | Item 4
6 | Item 5
7 |
8 |
--------------------------------------------------------------------------------
/pattern/utility/ratio/16x9.php:
--------------------------------------------------------------------------------
1 |
2 | VIDEO
3 |
4 |
--------------------------------------------------------------------------------
/pattern/utility/ratio/4x3.php:
--------------------------------------------------------------------------------
1 |
2 | VIDEO
3 |
4 |
--------------------------------------------------------------------------------
/pattern/utility/ratio/base.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
2 |
3 |
2 |
3 |
Makes an element a fixed ratio. Default is square with options for 16x9 and 4x3. Direct descendants fill the area. Images keep aspect ratio and will not stretch above their natural size.
2 |
--------------------------------------------------------------------------------
/pattern/utility/section/base.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
I am in a section with margin top and bottom
4 |
5 |
8 |
9 |
I am in a section with margin top only
10 |
11 |
14 |
15 |
I am in a section with bottom top only
16 |
17 |
Sections add large margin above, below or both to a section.
2 | Available classes:
3 |
4 |
5 |
12 |
--------------------------------------------------------------------------------
/pattern/utility/separator/base.php:
--------------------------------------------------------------------------------
1 |
2 |
7 |
12 |
13 |
14 | Bottom
15 |
16 |
17 |
22 |
23 |
24 | Right
25 |
26 |
27 |
Separators add a border around a div or to one specific side.
2 | Available classes:
3 |
4 |
5 |
12 |
--------------------------------------------------------------------------------
/pattern/utility/space/base.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Text inside block
4 |
5 |
Adds small margins to elements. Can pass through a size and position. Position accepts top or bottom. Size accepts values inside the spacing variables array. Position is optional. Will apply to both top and bottom without it.
2 |
3 | Available classes:
4 |
5 |
6 |
13 |
14 |
--------------------------------------------------------------------------------
/pattern/utility/toggle/base.php:
--------------------------------------------------------------------------------
1 | Toggle content
2 |
3 |
4 |
Some content inside toggle.
5 |
Toggle content on screen(sm)
2 |
3 |
4 |
Some content inside toggle.
5 |
Visibibility classes show and hide content at different breakpoints.
2 |
3 | Visible Classes
4 |
5 |
6 |
13 |
14 | Hidden Classes
15 |
16 |
17 |
24 |
25 | Visually Hidden Classes
26 |
27 |
28 |
35 |
--------------------------------------------------------------------------------
/publish:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | if [ $# -lt 1 ]; then
3 | echo "Usage: $0 " >&2
4 | echo " e.g. $0 chop.aaron.dyn.iweb.co.uk" >&2
5 | exit 1
6 | fi
7 | i=$1
8 | rm -rf cc
9 | httrack -O cc http://$i/
10 | cd cc/$i
11 | git init
12 | git add .
13 | git commit -m 'Website'
14 | git push git@github.com:getchopchop/getchopchop.github.io master:master -f
15 |
--------------------------------------------------------------------------------
/src/artwork/payment-icons.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/artwork/payment-icons.ai
--------------------------------------------------------------------------------
/src/img/logo/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/img/logo/logo.png
--------------------------------------------------------------------------------
/src/img/logo/logo_email.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/img/logo/logo_email.gif
--------------------------------------------------------------------------------
/src/img/logo/logo_print.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/img/logo/logo_print.gif
--------------------------------------------------------------------------------
/src/img/placeholder/1240x400.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/img/placeholder/1240x400.jpg
--------------------------------------------------------------------------------
/src/img/placeholder/1440x440.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/img/placeholder/1440x440.jpg
--------------------------------------------------------------------------------
/src/img/placeholder/300x300.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/img/placeholder/300x300.jpg
--------------------------------------------------------------------------------
/src/img/vector/general/arrow-down6.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/arrow-left6.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/arrow-right6.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/arrow-up6.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/bubble.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/bubbles.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/cart.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
--------------------------------------------------------------------------------
/src/img/vector/general/checkmark.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/cloud.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/cog.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/cross.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/envelop.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/heart.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/home.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/info.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
--------------------------------------------------------------------------------
/src/img/vector/general/link.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/src/img/vector/general/list.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/lock.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/lock4.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/menu.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
--------------------------------------------------------------------------------
/src/img/vector/general/minus.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/notification.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/pencil.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/phone.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/src/img/vector/general/phone2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/plus.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/question.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/radio-checked.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/radio-unchecked.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/search.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/search3.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/star-full.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/table2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/general/user.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/payment/color/direct-debit.svg:
--------------------------------------------------------------------------------
1 | payment-icons payment-icons payment-icons payment-icons payment-icons payment-icons payment-icons payment-icons payment-icons payment-icons payment-icons payment-icons payment-icons payment-icons payment-icons
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/social/google-plus.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/src/img/vector/social/instagram.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/social/linkedin.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
--------------------------------------------------------------------------------
/src/img/vector/social/pinterest.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/social/tumblr.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/social/twitter.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/img/vector/social/youtube.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/src/js/chop.global.js:
--------------------------------------------------------------------------------
1 | ;(function($){
2 | $(document).on('ready', function() {
3 |
4 | // =============================================
5 | // Overlay
6 | // =============================================
7 |
8 | $('#overlay').on('toggleactivate', function() {
9 | $('body').addClass('has-active-overlay');
10 | });
11 |
12 | $('#overlay').on('toggledeactivate', function() {
13 | $('body').removeClass('has-active-overlay');
14 | });
15 |
16 | });
17 | }(jQuery));
18 |
--------------------------------------------------------------------------------
/src/js/chopchop-ui.js:
--------------------------------------------------------------------------------
1 | ;(function($){
2 | $(document).on('ready', function() {
3 |
4 | // =============================================
5 | // Cookie to show menu
6 | // =============================================
7 |
8 | var $ccNav = $('#cc-nav'),
9 | $body = $('body');
10 |
11 | console.log(Cookies.set('cc-nav'));
12 |
13 | if(Cookies.set('cc-nav') == 1) {
14 | $ccNav.data('chopchop-toggle').activate();
15 | $body.addClass('has-cc-nav-active');
16 | }
17 |
18 | $ccNav.on('toggleactivate', function() {
19 | Cookies.set('cc-nav', 1, { expires: 30, path: '/' });
20 | $body.addClass('has-cc-nav-active');
21 | });
22 |
23 | $ccNav.on('toggledeactivate', function() {
24 | Cookies.set('cc-nav', 0, { expires: 30, path: '/' });
25 | $body.removeClass('has-cc-nav-active');
26 | });
27 |
28 | });
29 | }(jQuery));
30 |
--------------------------------------------------------------------------------
/src/scss/base/_heading.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Headings
3 | */
4 |
5 | h1, h2, h3, h4, h5, h6,
6 | .h1, .h2, .h3, .h4, .h5, .h6,
7 | %h1, %h2, %h3, %h4, %h5, %h6 {
8 | font-family: $heading-font-family;
9 | line-height: $line-height-sm;
10 | font-weight: $bold;
11 | margin-top: 0;
12 | margin-bottom: spacing(sm);
13 | }
14 |
15 | * + h1, * + h2, * + h3, * + h4, * + h5, * + h6,
16 | * + .h1, * + .h2, * + .h3, * + .h4, * + .h5, * + .h6,
17 | * + %h1, * + %h2, * + %h3, * + %h4, * + %h5, * + %h6 {
18 | margin-top: spacing(xl);
19 | }
20 |
21 | $heading-min: map-get($typescale-calc,min);
22 | $heading-max: map-get($typescale-calc,max);
23 |
24 | $screen-min: screen( nth(map-keys($screens),2) );
25 | $screen-max: screen( nth( map-keys($screens), length($screens) ) );
26 |
27 | @each $h in h6, h5, h4, h3, h2, h1 {
28 | #{$h}, %#{$h}, .#{$h} {
29 | font-size: $heading-min;
30 |
31 | @include breakpoint($screen-min) {
32 | font-size: calc(#{$heading-min} + #{strip-unit($heading-max - $heading-min)} * ((100vw - #{$screen-min}) / #{strip-unit($screen-max - $screen-min)}));
33 | }
34 |
35 | @include breakpoint($screen-max) {
36 | font-size: $heading-max;
37 | }
38 | }
39 |
40 | $heading-min: $heading-min * map-get($typescale,min);
41 | $heading-max: $heading-max * map-get($typescale,max);
42 | }
43 |
--------------------------------------------------------------------------------
/src/scss/base/_horizontal-rule.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Horizontal Line
3 | */
4 |
5 | hr {
6 | border: 0;
7 | height: 1px;
8 | background-color: color(neutral, light);
9 | margin-top: spacing(xl);
10 | margin-bottom: spacing(xl);
11 | }
12 |
--------------------------------------------------------------------------------
/src/scss/base/_html.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Box Sizing
3 | */
4 |
5 | *,
6 | input, textarea, button {
7 | box-sizing: border-box;
8 | }
9 |
--------------------------------------------------------------------------------
/src/scss/base/_icon.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Icon
3 | */
4 |
5 | .icon,
6 | %icon {
7 | height: spacing();
8 | width: spacing();
9 | }
10 |
11 |
12 | /**
13 | * Icon Small
14 | */
15 |
16 | .icon--sm,
17 | %icon--sm {
18 | height: spacing(sm);
19 | width: spacing(sm);
20 | }
21 |
22 |
23 | /**
24 | * Icon Large
25 | */
26 |
27 | .icon--lg,
28 | %icon--lg {
29 | height: spacing(lg);
30 | width: spacing(lg);
31 | }
32 |
33 |
34 | /**
35 | * Icon Card
36 | */
37 |
38 | .icon--card,
39 | %icon--card {
40 | width: 5em;
41 | height: 3em;
42 |
43 | &.icon--sm {
44 | width: 3em;
45 | height: 2em;
46 | }
47 |
48 | &.icon--lg {
49 | width: 6em;
50 | height: 4em;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/scss/base/_image.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Image
3 | */
4 |
5 | img {
6 | @extend %u-img-responsive;
7 | }
8 |
--------------------------------------------------------------------------------
/src/scss/base/_table.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Table
3 | */
4 |
5 | table {
6 | background-color: transparent;
7 | width: 100%;
8 |
9 | > * {
10 | border: 0;
11 | text-align: left;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/scss/base/_tag.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Tag
3 | */
4 |
5 | .tag,
6 | %tag {
7 | display: inline-block;
8 | background-color: color(neutral,darker);
9 | color: color(neutral, white);
10 | padding: spacing(xs)/2 spacing(xs);
11 | white-space: nowrap;
12 | vertical-align: baseline;
13 | line-height: $line-height-sm;
14 | border-radius: $border-radius;
15 | }
16 |
17 |
18 | /**
19 | * Tag Small
20 | */
21 |
22 | .tag--sm,
23 | %tag--sm {
24 | font-size: $font-size-sm;
25 | }
26 |
27 |
28 | /**
29 | * Tag Large
30 | */
31 |
32 | .tag--lg,
33 | %tag--lg {
34 | font-size: $font-size-lg;
35 | }
36 |
37 |
38 | /**
39 | * Badge
40 | */
41 |
42 | .tag--badge,
43 | %tag--badge {
44 | border-radius: spacing(xl);
45 | }
46 |
--------------------------------------------------------------------------------
/src/scss/base/_text.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Font Anti Aliasing
3 | */
4 |
5 | // html {
6 | // -webkit-font-smoothing: antialiased;
7 | // -moz-osx-font-smoothing: grayscale;
8 | // }
9 |
10 | @media only screen and (-webkit-min-device-pixel-ratio: 1.25),
11 | only screen and ( min-device-pixel-ratio: 1.25),
12 | only screen and ( min-resolution: 200dpi),
13 | only screen and ( min-resolution: 1.25dppx) {
14 | html {
15 | -webkit-font-smoothing: subpixel-antialiased;
16 | }
17 | }
18 |
19 |
20 | /**
21 | * Typography
22 | */
23 |
24 | html {
25 | font-size: $font-size;
26 | font-family: $font-family;
27 | line-height: $line-height;
28 | color: color(neutral, darker);
29 | }
30 |
31 | ul, ol, p {
32 | margin-top: 0;
33 | margin-bottom: spacing();
34 | }
35 |
36 | ul, ol {
37 | ul, ol {
38 | margin-bottom: 0;
39 | }
40 | }
41 |
42 | strong, b {
43 | font-weight: $bold;
44 | }
45 |
46 | dfn, em, i, cite {
47 | font-style: italic;
48 | }
49 |
50 | sub,
51 | sup,
52 | small {
53 | font-size: $font-size-sm;
54 | }
55 |
56 | code,
57 | kbd,
58 | pre,
59 | samp {
60 | font-size: $font-size;
61 | }
62 |
63 | code {
64 | padding: 2px 4px;
65 | font-size: $font-size-sm;
66 | color: color(contextual, error);
67 | background-color: color(neutral, lighter);
68 | border-radius: $border-radius;
69 | }
70 |
71 | mark {
72 | background: color(contextual, error);
73 | color: color(neutral, black);
74 | }
75 |
76 |
77 | /**
78 | * Link
79 | */
80 |
81 | a,
82 | .link,
83 | %link {
84 | color: color(neutral, black);
85 | touch-action: manipulation;
86 |
87 | &:hover {
88 | color: color(neutral, dark);
89 | }
90 | }
91 |
92 |
93 | /**
94 | * Lead
95 | */
96 |
97 | .lead,
98 | %lead {
99 | font-size: $font-size-lg;
100 | }
101 |
102 |
103 | /**
104 | * Micro
105 | */
106 |
107 | .micro,
108 | %micro {
109 | font-size: $font-size-sm;
110 | }
111 |
--------------------------------------------------------------------------------
/src/scss/component/_accordion.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Accordion
3 | */
4 |
5 | .accordion,
6 | %accordion {
7 | @include accordion;
8 | }
9 |
--------------------------------------------------------------------------------
/src/scss/component/_alert.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Alert
3 | *
4 | * @since 1.0.0
5 | */
6 |
7 | .alert,
8 | %alert {
9 | padding: spacing();
10 | background-color: color(neutral, lighter);
11 | border: 1px solid color(neutral, dark);
12 | margin-bottom: spacing();
13 |
14 | p {
15 | margin: 0;
16 | }
17 | }
18 |
19 |
20 | /**
21 | * Dismissible Alert
22 | */
23 |
24 | .alert--dismissible,
25 | %alert--dismissible {
26 | padding-right: 3rem;
27 | position: relative;
28 |
29 | .close {
30 | position: absolute;
31 | top: 0;
32 | bottom: 0;
33 | right: 0;
34 | width: 3rem;
35 | text-decoration: none;
36 | display: block;
37 | text-align: center;
38 | text-indent: -9999%;
39 |
40 | &:after {
41 | content: "x";
42 | display: block;
43 | position: absolute;
44 | top: 50%;
45 | left: 50%;
46 | text-indent: 0;
47 | transform: translate(-50%, -50%);
48 | }
49 | }
50 |
51 | &.is-inactive {
52 | display: none;
53 | }
54 | }
55 |
56 |
57 | /**
58 | * Alert Variations
59 | */
60 |
61 | .alert--success,
62 | %alert--success {
63 | background-color: color(contextual, success-light);
64 | border-color: darken(color(contextual, success-light),12%);
65 | }
66 |
67 | .alert--warning,
68 | %alert--warning {
69 | background-color: color(contextual, warning-light);
70 | border-color: darken(color(contextual, warning-light),15%);
71 | }
72 |
73 | .alert--error,
74 | %alert--error {
75 | background-color: color(contextual, error-light);
76 | border-color: darken(color(contextual, error-light),5%);
77 | }
78 |
79 | .alert--info,
80 | %alert--info {
81 | background-color: color(contextual, info-light);
82 | border-color: darken(color(contextual, info-light),5%);
83 | }
84 |
--------------------------------------------------------------------------------
/src/scss/component/_breadcrumb.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Breadcrumb
3 | */
4 |
5 | .breadcrumb,
6 | %breadcrumb {
7 |
8 | li:not(:last-child) {
9 | margin-right: spacing(sm);
10 |
11 | &:after {
12 | @include chevron(color(neutral, dark), 4px, right, 1px);
13 | vertical-align: middle;
14 | }
15 | }
16 |
17 | a {
18 | margin-right: spacing(sm);
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/src/scss/component/_card-group.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Cards in groups
3 | */
4 |
5 | .card-group,
6 | %card-group {
7 | > *:not(:first-child) {
8 | border-top-left-radius: 0;
9 | border-top-right-radius: 0;
10 | }
11 |
12 | > *:not(:last-child) {
13 | border-bottom-left-radius: 0;
14 | border-bottom-right-radius: 0;
15 | border-bottom: 0;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/scss/component/_card.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Card
3 | */
4 |
5 | .card,
6 | %card {
7 | border: seperator(base, width) seperator(base, style) seperator(base, color);
8 | background-color: color(neutral, white);
9 | border-radius: $border-radius;
10 |
11 | > [class*="__header"] {
12 | border-bottom: seperator(base, width) seperator(base, style) seperator(base, color);
13 |
14 | > * {
15 | margin-bottom: 0;
16 | }
17 | }
18 |
19 | > [class*="__body"] > *:last-child {
20 | margin-bottom: 0;
21 | }
22 |
23 | > [class*="__header"],
24 | > [class*="__body"],
25 | > [class*="__footer"] {
26 | padding: spacing(lg);
27 | }
28 |
29 | > [class*="__footer"] {
30 | border-top: seperator(base, width) seperator(base, style) seperator(base, color);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/scss/component/_drawer.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Drawer
3 | */
4 |
5 | .drawer__dialog {
6 | position: fixed;
7 | top: 0;
8 | bottom: 0;
9 | width: 90%;
10 | max-width: 30em;
11 | background: color(neutral, white);
12 | overflow-y: auto;
13 | -webkit-overflow-scrolling: touch;
14 | }
15 |
16 |
17 | /**
18 | * Drawer Positioning
19 | */
20 |
21 | .drawer--left .drawer__dialog {
22 | left: 0;
23 | transform: translateX(-100%);
24 | }
25 |
26 | .drawer--right .drawer__dialog {
27 | right: 0;
28 | transform: translateX(100%);
29 | }
30 |
31 | .is-active.drawer .drawer__dialog {
32 | transform: translateX(0);
33 | }
34 |
--------------------------------------------------------------------------------
/src/scss/component/_field-group.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Field Group
3 | */
4 |
5 | .field-group,
6 | %field-group {
7 | margin: spacing() 0;
8 |
9 | .field-group {
10 | margin-top: spacing(xs);
11 | margin-bottom: spacing(xs);
12 | }
13 |
14 | &:first-child {
15 | margin-top: 0;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/scss/component/_modal.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Modal
3 | */
4 |
5 | .modal,
6 | %modal {
7 | position: fixed;
8 | top: 0;
9 | left: 0;
10 | right: 0;
11 | bottom: 0;
12 | overflow: scroll;
13 | -webkit-overflow-scrolling: touch;
14 | display: none;
15 | }
16 |
17 | .is-active.modal {
18 | display: block;
19 | }
20 |
21 | /**
22 | * Modal Dialog
23 | */
24 |
25 | .modal__dialog {
26 | background-color: color(neutral, white);
27 | margin-left: auto;
28 | margin-right: auto;
29 | position: relative;
30 |
31 | @include breakpoint(screen(sm)) {
32 | max-width: 50em;
33 | width: 90%;
34 | margin: 5em auto;
35 | }
36 | }
37 |
38 | .modal--sm .modal__dialog {
39 | max-width: 26em;
40 | }
41 |
42 | .modal--lg .modal__dialog {
43 | max-width: 42em;
44 | }
45 |
46 |
47 | /**
48 | * Modal Close
49 | */
50 |
51 | .modal__close {
52 | position: fixed;
53 | top: spacing();
54 | right: spacing(lg);
55 | z-index: $z-1;
56 | }
57 |
--------------------------------------------------------------------------------
/src/scss/component/_nav.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Nav
3 | */
4 |
5 | .nav,
6 | %nav {
7 | @extend %u-list-unstyled;
8 |
9 | a {
10 | text-decoration: none;
11 | }
12 | }
13 |
14 |
15 | /**
16 | * Nav Pills
17 | */
18 |
19 | .nav--pills,
20 | %nav--pills {
21 | a {
22 | display: block;
23 | padding: spacing(xs) spacing(sm);
24 | }
25 | }
26 |
27 |
28 | /**
29 | * Nav Inline
30 | */
31 |
32 | .nav--inline,
33 | %nav--inline {
34 | @include flex;
35 | @include flex-wrap(wrap);
36 | white-space: nowrap;
37 | }
38 |
39 |
40 | /**
41 | * Nav Space
42 | */
43 |
44 | .nav--space,
45 | %nav--space {
46 | &:not(.nav--inline) > * {
47 | margin-bottom: spacing(sm);
48 | }
49 |
50 | &.nav--inline > * {
51 | margin-right: spacing(sm);
52 |
53 | &:last-child {
54 | margin-right: 0;
55 | }
56 | }
57 | }
58 |
59 |
60 | /**
61 | * Nav Multi Level
62 | */
63 |
64 | .nav--multi-level,
65 | %nav--multi-level {
66 | li {
67 | position: relative;
68 | }
69 |
70 | // All levels
71 | ul,
72 | ol {
73 | @extend %nav;
74 | display: none;
75 | position: absolute;
76 | }
77 |
78 | // Just Level 0
79 | > ul,
80 | > ol {
81 | top: 100%;
82 | }
83 |
84 | ul ul,
85 | ol ol,
86 | ul ol,
87 | ol ul {
88 | top: 0;
89 | left: 100%;
90 | }
91 |
92 | li:hover > ul,
93 | li:hover > ol {
94 | display: block;
95 | }
96 |
97 | a {
98 | white-space: nowrap;
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/src/scss/component/_overlay.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Overlay
3 | */
4 |
5 | .overlay,
6 | %overlay {
7 | position: fixed;
8 | top: 0;
9 | left: 0;
10 | bottom: 0;
11 | right: 0;
12 | background-color: rgba(0,0,0,0.7);
13 | display: none;
14 | cursor: pointer;
15 | }
16 |
17 | .has-active-overlay {
18 | overflow: hidden;
19 | }
20 |
21 | .is-active.overlay {
22 | display: block;
23 | }
24 |
--------------------------------------------------------------------------------
/src/scss/component/_pagination.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Pagination
3 | */
4 |
5 | .pagination,
6 | %pagination {
7 | &__pager {
8 | @extend %nav;
9 | @extend %nav--inline;
10 | @extend %nav--pills;
11 | @extend %nav--space;
12 | }
13 | &__previous,
14 | &__next {
15 | &::after {
16 | vertical-align: middle;
17 | }
18 | }
19 | &__previous::after {
20 | @include chevron(color(neutral, dark), 6px, left, 2px);
21 | }
22 | &__next::after {
23 | @include chevron(color(neutral, dark), 6px, right, 2px);
24 | }
25 |
26 | a:hover,
27 | .is-active {
28 | background-color: color(neutral, lighter);
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/scss/component/_radio.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Radio
3 | *
4 | * @link http://codepen.io/triss90/pen/XNEdRe
5 | */
6 |
7 |
8 | .radio {
9 |
10 | input[type="radio"] {
11 | position: absolute;
12 | opacity: 0;
13 |
14 | & + .radio__label {
15 | &::before {
16 | content: '';
17 | background: color(neutral, lightest);
18 | border-radius: 100%;
19 | border: 2px solid color(neutral, light);
20 | display: inline-block;
21 | width: 1.4em;
22 | height: 1.4em;
23 | position: relative;
24 | top: -0.1em;
25 | margin-right: spacing();
26 | vertical-align: top;
27 | cursor: pointer;
28 | text-align: center;
29 | transition: all $animation-speed ease;
30 | }
31 | }
32 |
33 | &:checked {
34 | + .radio__label {
35 | &::before {
36 | background-color: color(contextual, success);
37 | box-shadow: inset 0 0 0 4px color(neutral, lightest);
38 | }
39 | }
40 | }
41 |
42 | &:focus {
43 | + .radio__label {
44 | &::before {
45 | outline: none;
46 | border-color: color(contextual, success);
47 | }
48 | }
49 | }
50 |
51 | &:disabled {
52 | + .radio__label {
53 | &::before {
54 | box-shadow: inset 0 0 0 4px color(neutral, lightest);
55 | border-color: color(neutral, light);
56 | background: color(neutral, light);
57 | }
58 | }
59 | }
60 |
61 | + .radio__label {
62 | &:empty {
63 | &::before {
64 | margin-right: 0;
65 | }
66 | }
67 | }
68 |
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/scss/component/_responsive-table.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Responsive Table
3 | */
4 |
5 | .responsive-table,
6 | %responsive-table {
7 | overflow-x: auto;
8 | min-height: 0.01%;
9 | -webkit-overflow-scrolling: touch;
10 |
11 | th,
12 | td {
13 | white-space: nowrap;
14 | }
15 | }
16 |
17 | @include breakpoint(max-width screen(sm)) {
18 | .responsive-table,
19 | %responsive-table {
20 | width: 100%;
21 | overflow-y: hidden;
22 | -ms-overflow-style: -ms-autohiding-scrollbar;
23 | border: 1px solid color(neutral, light);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/scss/component/_select.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Custom Select
3 | */
4 |
5 | .select,
6 | %select {
7 | padding: 0;
8 | padding-right: 2em;
9 | margin: 0;
10 | border: 1px solid color(neutral, dark);
11 | overflow: hidden;
12 | position: relative;
13 | background-color: color(neutral, white);
14 |
15 | &::after,
16 | &::before {
17 | position: absolute;
18 | right: 1em;
19 | }
20 |
21 | &::after {
22 | @include chevron(color(neutral, dark), 8px, down, 1px);
23 | top: 1.25em;
24 | }
25 |
26 | &::before {
27 | @include chevron(color(neutral, dark), 8px, up, 1px);
28 | top: 0.8em;
29 | }
30 |
31 | select {
32 | padding: 0.54em;
33 | width: 130%;
34 | max-width: none;
35 | border: none;
36 | box-shadow: none;
37 | background-color: transparent;
38 | -webkit-appearance: none;
39 | -moz-appearance: none;
40 | appearance: none;
41 |
42 | &:focus {
43 | outline: none;
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/scss/component/_single-form.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Single Form
3 | *
4 | * @since 3.0.0
5 | */
6 |
7 | .single-form,
8 | %single-form {
9 | input {
10 | border-top-right-radius: 0;
11 | border-bottom-right-radius: 0;
12 | border-right: 0;
13 | }
14 | .btn {
15 | border-top-left-radius: 0;
16 | border-bottom-left-radius: 0;
17 | }
18 | }
--------------------------------------------------------------------------------
/src/scss/component/_table.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Table
3 | */
4 |
5 | .table,
6 | %table {
7 | th, td {
8 | padding: spacing();
9 | vertical-align: top;
10 | }
11 |
12 | td {
13 | border-top: 1px solid color(neutral, light);
14 | }
15 |
16 | th {
17 | vertical-align: bottom;
18 | }
19 |
20 | caption {
21 | padding-top: spacing(sm);
22 | padding-bottom: spacing(sm);
23 | color: color(neutral, dark);
24 | text-align: left;
25 | }
26 |
27 | thead th {
28 | border-top: 0;
29 | border-bottom: 2px solid color(neutral, light);
30 | }
31 |
32 | tfoot td {
33 | border-top-width: 2px;
34 | }
35 | }
36 |
37 |
38 | /**
39 | * Table Condensed
40 | */
41 |
42 | .table--condensed,
43 | %table--condensed {
44 | th,
45 | td {
46 | padding: spacing(xs);
47 | }
48 | }
49 |
50 |
51 | /**
52 | * Tabled Bordered
53 | */
54 |
55 | .table--bordered,
56 | %table--bordered {
57 | border: 1px solid color(neutral, light);
58 |
59 | th,
60 | td {
61 | border: 1px solid color(neutral, light);
62 | }
63 |
64 | thead th,
65 | thead td {
66 | border-bottom-width: 2px;
67 | }
68 | }
69 |
70 |
71 | /**
72 | * Table Striped
73 | */
74 |
75 | .table--striped,
76 | %table--striped {
77 | tbody tr:nth-child(odd) {
78 | background-color: color(neutral, lighter);
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/scss/component/_tabs.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Tabs
3 | */
4 |
5 | .tabs,
6 | %tabs {
7 | @include tabs;
8 | }
9 |
--------------------------------------------------------------------------------
/src/scss/component/_title.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Title
3 | */
4 |
5 | .title,
6 | %title {
7 | > *:not(:last-child) {
8 | margin-bottom: 0;
9 | }
10 | > *:not(:first-child) {
11 | margin-top: 0;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/scss/component/_toggle-icon.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Toggle Icon
3 | *
4 | * @since 3.0.0
5 | */
6 |
7 | .toggle-icon,
8 | %toggle-icon {
9 | @include flex;
10 | @include justify-content(space-between);
11 | @include align-items(center);
12 |
13 | &.is-active .toggle-icon__icon {
14 | @include minus(color(neutral, light), 16px, 2px);
15 | }
16 |
17 | &:not(.is-active) .toggle-icon__icon {
18 | @include plus(color(neutral, light), 16px, 2px);
19 | }
20 |
21 | }
--------------------------------------------------------------------------------
/src/scss/helper/_accordion.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Accordion
3 | */
4 |
5 | @mixin accordion {
6 | > [class*="__header"] {
7 | cursor: pointer;
8 | }
9 |
10 | > [class*="__header"].is-active {
11 | color: red;
12 | }
13 |
14 | > [class*="__body"] {
15 | display: none;
16 |
17 | &.is-active {
18 | display: block;
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/scss/helper/_breakpoint.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Breakpoint
3 | */
4 |
5 | @mixin breakpoint($query) {
6 | $query-string: breakpoint-parse-query($query);
7 |
8 | @media #{$query-string} {
9 | @content;
10 | }
11 |
12 | // Missing the no query fallbacks code
13 | }
14 |
15 |
16 | @function breakpoint-parse-query($query) {
17 | $length: length($query);
18 | $mq: 'all ';
19 |
20 | // If it's a single number
21 | @if $length == 1 {
22 | @return $mq + 'and (min-width: ' + $query + ')';
23 | }
24 |
25 | // If we've got a string/number
26 | @if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'number') {
27 | @return $mq + 'and (' + nth($query, 1) + ': ' + nth($query, 2) + ')';
28 | }
29 |
30 | // If they're both numbers, we assume it's a double and roll with that
31 | @if (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'number') {
32 | @return $mq + 'and (min-width: ' + nth($query, 1) + ') and (max-width: ' + nth($query, 2) + ' )';
33 | }
34 |
35 | // Else assume is a list of properly formatted mq
36 | @each $single-query in $query {
37 | $mq: $mq + 'and (' + nth($query, 1) + ': ' + nth($query, 2) + ')';
38 | }
39 | @return $mq;
40 | }
41 |
--------------------------------------------------------------------------------
/src/scss/helper/_button.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Generate colours for buttons
3 | */
4 |
5 | @mixin button-colors($button, $state) {
6 | background: button($button, $state, background);
7 | border-color: button($button, $state, border-color);
8 | color: button($button, $state, color);
9 | }
10 |
11 | @mixin button-ghost-colors($button, $state) {
12 | background: transparent;
13 | color: button($button, $state, background);
14 | }
15 |
--------------------------------------------------------------------------------
/src/scss/helper/_ellipsis.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Ellipsis
3 | */
4 |
5 | @mixin ellipsis {
6 | text-overflow: ellipsis;
7 | overflow: hidden;
8 | white-space: nowrap;
9 | }
10 |
--------------------------------------------------------------------------------
/src/scss/helper/_flex.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Flex
3 | */
4 |
5 | @mixin flex {
6 | display: flex;
7 | }
8 |
9 |
10 | /**
11 | * Flex Wrap
12 | */
13 |
14 | @mixin flex-wrap($value: nowrap) {
15 | flex-wrap: $value;
16 | }
17 |
18 |
19 | /**
20 | * Flex Direction
21 | */
22 |
23 | @mixin flex-direction($value: row) {
24 | flex-direction: $value;
25 | }
26 |
27 |
28 | /**
29 | * Align Items
30 | */
31 |
32 | @mixin align-items($value: flex-start) {
33 | align-items: $value;
34 | }
35 |
36 |
37 | /**
38 | * Justify Content
39 | */
40 |
41 | @mixin justify-content($value: flex-start) {
42 | justify-content: $value;
43 | }
44 |
--------------------------------------------------------------------------------
/src/scss/helper/_grid.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Grid
3 | */
4 |
5 | @mixin grid {
6 | @include flex;
7 | @include flex-wrap(wrap);
8 |
9 | > * {
10 | width: 100%;
11 |
12 | > *:first-child {
13 | margin-bottom: 0;
14 | }
15 | }
16 | }
17 |
18 |
19 | /**
20 | * Grid Gutter X
21 | */
22 |
23 | @mixin grid-gutter-x($gap: gutter('base')) {
24 | $half-gap: $gap / 2;
25 | margin-left: -$half-gap;
26 | margin-right: -$half-gap;
27 |
28 | > * {
29 | padding-left: $half-gap;
30 | padding-right: $half-gap;
31 | }
32 | }
33 |
34 |
35 | /**
36 | * Grid Gutter Y
37 | */
38 |
39 | @mixin grid-gutter-y($gap: gutter('base'), $edge: spacing()) {
40 | > * {
41 | margin-bottom: $gap;
42 |
43 | @supports(-ms-accelerator:true) {
44 | margin-bottom: $edge;
45 | }
46 | }
47 | }
48 |
49 |
50 | /**
51 | * Grid Col
52 | */
53 |
54 | @mixin grid-col($col: 100%) {
55 | @if length($col) > 1 {
56 | width: (nth($col, 1) / nth($col, 3)) * 100%;
57 | } @else {
58 | width: $col;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/scss/helper/_number.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Strip Unit
3 | */
4 |
5 | @function strip-unit($number) {
6 | @if type-of($number) == 'number' and not unitless($number) {
7 | @return $number / ($number * 0 + 1);
8 | }
9 |
10 | @return $number;
11 | }
12 |
--------------------------------------------------------------------------------
/src/scss/helper/_ratio.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Ratio
3 | */
4 |
5 | @mixin ratio($value: 100%) {
6 | position: relative;
7 | overflow: hidden;
8 |
9 | &:before {
10 | content: "";
11 | display: block;
12 | padding-top: $value;
13 | overflow: hidden;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/scss/helper/_section.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Section
3 | */
4 |
5 | $screen-min: screen( nth(map-keys($screens),2) );
6 | $screen-max: screen( nth( map-keys($screens), length($screens) ) );
7 |
8 | @mixin section($key) {
9 | margin-top: section($key, min);
10 | margin-bottom: section($key, min);
11 |
12 | &-top {
13 | margin-top: section($key, min);
14 | }
15 | &-bottom {
16 | margin-bottom: section($key, min);
17 | }
18 |
19 | @include breakpoint($screen-min) {
20 | margin-top: responsive-size(section($key, min), section($key, max));
21 | margin-bottom: responsive-size(section($key, min), section($key, max));
22 |
23 | &-top {
24 | margin-top: responsive-size(section($key, min), section($key, max));
25 | }
26 | &-bottom {
27 | margin-bottom: responsive-size(section($key, min), section($key, max));
28 | }
29 | }
30 |
31 | @include breakpoint($screen-max) {
32 | margin-top: section($key, max);
33 | margin-bottom: section($key, max);
34 |
35 | &-top {
36 | margin-top: section($key, max);
37 | }
38 | &-bottom {
39 | margin-bottom: section($key, max);
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/scss/helper/_setting-function.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Button
3 | */
4 |
5 | @function button($button: 'base', $state: 'default', $var: 'color') {
6 | @return map-get(map-get(map-get($buttons, $button), $state), $var);
7 | }
8 |
9 |
10 | /**
11 | * Container
12 | */
13 |
14 | @function container($value: 'base') {
15 | @return map-get($containers, $value);
16 | }
17 |
18 |
19 | /**
20 | * Gutter
21 | */
22 |
23 | @function gutter($value: 'base') {
24 | @return map-get($gutters, $value);
25 | }
26 |
27 |
28 | /**
29 | * Section
30 | */
31 |
32 | @function section($section, $type: 'min') {
33 | @return map-get(map-get($sections, $section), $type);
34 | }
35 |
36 |
37 | /**
38 | * Separator
39 | */
40 |
41 | @function seperator($seperator, $var: 'width') {
42 | @return map-get(map-get($separators, $seperator), $var);
43 | }
44 |
--------------------------------------------------------------------------------
/src/scss/helper/_tabs.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Tabs
3 | */
4 |
5 | @mixin tabs {
6 | @include flex;
7 | @include flex-wrap(wrap);
8 |
9 | > [class*="__header"] {
10 | cursor: pointer;
11 | order: 1;
12 |
13 | &.is-active {
14 | color: red;
15 | }
16 | }
17 |
18 | > [class*="__body"] {
19 | order: 2;
20 | width: 100%;
21 | display: none;
22 |
23 | &.is-active {
24 | display: block;
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/scss/helper/_type.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Responsive Size
3 | */
4 |
5 | $screen-min: screen( nth(map-keys($screens),2) );
6 | $screen-max: screen( nth( map-keys($screens), length($screens) ) );
7 |
8 | @function responsive-size($min-size, $max-size, $min-media: $screen-min, $max-media: $screen-max) {
9 | @return calc( #{$min-size} + #{(strip-unit($max-size) - strip-unit($min-size))} * ( 100vw - #{$min-media} ) / (#{strip-unit($max-media)} - #{strip-unit($min-media)}) )
10 | }
11 |
12 |
13 | /**
14 | * Heading Scale
15 | */
16 |
17 | @mixin heading-scale($scale: 1.2) {
18 | $size: 1 / $scale * 1em;
19 | @each $h in h6, h5, h4, h3, h2, h1 {
20 | #{$h}, %#{$h}, .#{$h} {
21 | font-size: $size;
22 | }
23 | $size: $size * $scale;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/scss/helper/_variable-function.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Color
3 | */
4 |
5 | @function color($color, $tone: 'base') {
6 | @return map-get(map-get($colors, $color), $tone);
7 | }
8 |
9 |
10 | /**
11 | * Screen
12 | */
13 |
14 | @function screen($screen, $type: 'base') {
15 | @return map-get(map-get($screens, $screen), $type);
16 | }
17 |
18 |
19 | /**
20 | * Generating typescale calculations
21 | */
22 |
23 | $typescale-calc: (
24 | min: 1 / map-get($typescale, min) * 1em,
25 | max: 1 / map-get($typescale, max) * 1em
26 | );
27 |
28 |
29 | /**
30 | * Spacing
31 | */
32 |
33 | @function spacing($value: 'base') {
34 | @return map-get($spacing, $value);
35 | }
36 |
--------------------------------------------------------------------------------
/src/scss/styles.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Variables
3 | */
4 |
5 | @import "var";
6 | @import "helper/variable-function";
7 |
8 |
9 | /**
10 | * Settings for specific components and utilities
11 | */
12 |
13 | @import "setting";
14 | @import "helper/setting-function";
15 |
16 | /**
17 | * Helper Mixins
18 | */
19 |
20 | @import "helper/flex";
21 | @import "helper/accordion";
22 | @import "helper/button";
23 | @import "helper/breakpoint";
24 | @import "helper/ellipsis";
25 | @import "helper/grid";
26 | @import "helper/ratio";
27 | @import "helper/section";
28 | @import "helper/shape";
29 | @import "helper/tabs";
30 | @import "helper/type";
31 | @import "helper/number";
32 |
33 |
34 | /**
35 | * Utilities
36 | */
37 |
38 | @import "utility/align";
39 | @import "utility/animate";
40 | @import "utility/block";
41 | @import "utility/clearfix";
42 | @import "utility/color";
43 | @import "utility/container";
44 | @import "utility/ratio";
45 | @import "utility/full-height";
46 | @import "utility/grid";
47 | @import "utility/image";
48 | @import "utility/list";
49 | @import "utility/section";
50 | @import "utility/separator";
51 | @import "utility/shape";
52 | @import "utility/space";
53 | @import "utility/toggle";
54 | @import "utility/typography";
55 | @import "utility/visible";
56 | @import "utility/z-index";
57 |
58 |
59 | /**
60 | * Base
61 | */
62 |
63 | @import "base/form";
64 | @import "base/heading";
65 | @import "base/horizontal-rule";
66 | @import "base/html";
67 | @import "base/icon";
68 | @import "base/image";
69 | @import "base/table";
70 | @import "base/tag";
71 | @import "base/text";
72 |
73 |
74 | /**
75 | * Component
76 | */
77 |
78 | @import "component/accordion";
79 | @import "component/alert";
80 | @import "component/button";
81 | @import "component/breadcrumb";
82 | @import "component/card";
83 | @import "component/card-group";
84 | @import "component/checkbox";
85 | @import "component/drawer";
86 | @import "component/field-group";
87 | @import "component/title";
88 | @import "component/modal";
89 | @import "component/nav";
90 | @import "component/overlay";
91 | @import "component/pagination";
92 | @import "component/radio";
93 | @import "component/select";
94 | @import "component/single-form";
95 | @import "component/tabs";
96 | @import "component/table";
97 | @import "component/toggle-icon";
98 | @import "component/responsive-table";
99 |
--------------------------------------------------------------------------------
/src/scss/utility/_align.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Alignment Utility
3 | *
4 | * General alignment utilities useful for arranging content.
5 | * The use of `!important` means they should be used wisely.
6 | *
7 | * * Text Align
8 | * * Align Centrally
9 | * * Float Align
10 | *
11 | * @since 1.0.0
12 | */
13 |
14 | .u-text-center,
15 | %u-text-center {
16 | text-align: center !important;
17 | }
18 |
19 | .u-text-left,
20 | %u-text-left {
21 | text-align: left !important;
22 | }
23 |
24 | .u-text-right,
25 | %u-text-right {
26 | text-align: right !important;
27 | }
28 |
29 | .u-center,
30 | %u-center {
31 | margin-left: auto !important;
32 | margin-right: auto !important;
33 | }
34 |
35 | .u-pull-left,
36 | %u-pull-left {
37 | float: left !important;
38 | }
39 |
40 | .u-pull-right,
41 | %u-pull-right {
42 | float: right !important;
43 | }
44 |
--------------------------------------------------------------------------------
/src/scss/utility/_animate.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Spin
3 | *
4 | * @since 3.0.0
5 | */
6 |
7 | .u-spin,
8 | %u-spin {
9 | animation: spin 0.3s infinite linear;
10 | }
11 |
12 | @keyframes spin {
13 | from {
14 | transform: rotate(0deg);
15 | }
16 | to {
17 | transform: rotate(359deg);
18 | }
19 | }
--------------------------------------------------------------------------------
/src/scss/utility/_block.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Block Utility
3 | *
4 | * Gives an element padding based on the `$spacing` array set in _var.scss
5 | * Useful on `.card` elements in particular.
6 | *
7 | * @var $spacing
8 | *
9 | * @since 1.2.0
10 | */
11 |
12 | [class*="u-block"],
13 | %u-block-base {
14 | display: block;
15 |
16 | > *:last-child {
17 | margin-bottom: 0;
18 | }
19 | }
20 |
21 |
22 | @each $key, $value in $spacing {
23 | @if $key == base {
24 | .u-block,
25 | %u-block {
26 | padding: $value !important;
27 |
28 | &-top {
29 | padding-top: $value !important;
30 | }
31 | &-bottom {
32 | padding-bottom: $value !important;
33 | }
34 | }
35 | %u-block {
36 | &,
37 | &-top,
38 | &-bottom {
39 | @extend %u-block-base;
40 | }
41 | }
42 | } @else {
43 | .u-block-#{$key},
44 | %u-block-#{$key} {
45 | padding: $value !important;
46 |
47 | &-top {
48 | padding-top: $value !important;
49 | }
50 | &-bottom {
51 | padding-bottom: $value !important;
52 | }
53 | }
54 | %u-block-#{$key} {
55 | &,
56 | &-top,
57 | &-bottom {
58 | @extend %u-block-base;
59 | }
60 | }
61 | }
62 | }
--------------------------------------------------------------------------------
/src/scss/utility/_clearfix.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Clearfix
3 | *
4 | * @link https://goo.gl/iyJRmk
5 | */
6 |
7 | .u-clearfix,
8 | %u-clearfix {
9 | overflow: hidden;
10 |
11 | &:after {
12 | content: "";
13 | display: table;
14 | clear: both;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/scss/utility/_color.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Color (Background)
3 | */
4 |
5 | @each $color-key, $color-value in $colors {
6 | @each $tone-key, $tone-value in $color-value {
7 | @if $tone-key == base {
8 | .u-fill-#{$color-key},
9 | %u-fill-#{$color-key} {
10 | background-color: $tone-value !important;
11 | }
12 | } @else {
13 | .u-fill-#{$color-key}-#{$tone-key},
14 | %u-fill-#{$color-key}-#{$tone-key} {
15 | background-color: $tone-value !important;
16 | }
17 | }
18 | }
19 | }
20 |
21 |
22 | /**
23 | * Color (Text)
24 | */
25 |
26 | @each $color-key, $color-value in $colors {
27 | @each $tone-key, $tone-value in $color-value {
28 | @if $tone-key == base {
29 | .u-text-#{$color-key},
30 | %u-text-#{$color-key} {
31 | color: $tone-value !important;
32 | fill: currentColor !important;
33 | }
34 | } @else {
35 | .u-text-#{$color-key}-#{$tone-key},
36 | %u-text-#{$color-key}-#{$tone-key} {
37 | color: $tone-value !important;
38 | fill: currentColor !important;
39 | }
40 | }
41 | }
42 | }
--------------------------------------------------------------------------------
/src/scss/utility/_container.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Container
3 | */
4 |
5 | [class*="u-container"],
6 | %u-container {
7 | margin-left: auto;
8 | margin-right: auto;
9 | width: 96%;
10 | }
11 |
12 | @each $key, $value in $containers {
13 | .u-container-#{$key},
14 | %u-container-#{$key} {
15 | max-width: $value;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/scss/utility/_full-height.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Full Height
3 | */
4 |
5 | .u-full-height,
6 | %u-full-height {
7 | @include flex;
8 | flex-flow: wrap;
9 |
10 | > * {
11 | width: 100%;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/scss/utility/_image.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Responsive Image
3 | *
4 | * @since 1.0.0
5 | */
6 |
7 | .u-img-responsive,
8 | %u-img-responsive {
9 | display: block;
10 | max-width: 100%;
11 | height: auto;
12 | }
13 |
14 |
15 | figure {
16 | margin: 0;
17 | margin-bottom: spacing(lg);
18 |
19 | img {
20 | @extend %u-img-responsive;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/scss/utility/_list.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Unstyled List
3 | *
4 | * @since 1.0.0
5 | */
6 |
7 | .u-list-unstyled,
8 | %u-list-unstyled {
9 | margin: 0;
10 | padding: 0;
11 | list-style: none;
12 | }
13 |
14 |
15 | /**
16 | * List Inline
17 | *
18 | * @since 1.0.0
19 | */
20 |
21 | .u-list-inline,
22 | %u-list-inline {
23 | padding-left: 0;
24 | margin-left: 0;
25 | list-style: none;
26 |
27 | > li {
28 | display: inline-block;
29 | }
30 | }
31 |
32 |
33 | /**
34 | * Ordered List
35 | *
36 | * @since 1.0.0
37 | */
38 |
39 | .u-list-ordered,
40 | %u-list-ordered {
41 | list-style: decimal;
42 | }
43 |
44 |
45 | /**
46 | * Unordered List
47 | *
48 | * @since 1.0.0
49 | */
50 |
51 | .u-list-unordered,
52 | %u-list-unordered {
53 | list-style: disc;
54 | }
55 |
--------------------------------------------------------------------------------
/src/scss/utility/_ratio.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Ratio
3 | *
4 | * @since 2.4.0
5 | */
6 |
7 | .u-ratio,
8 | %u-ratio {
9 | @include ratio;
10 |
11 | > * {
12 | position: absolute;
13 | top: 50%;
14 | left: 50%;
15 | transform: translate(-50%, -50%);
16 | }
17 |
18 | > *:not(img) {
19 | width: 100%;
20 | height: 100%;
21 | }
22 |
23 | > img {
24 | max-width: 100%;
25 | max-height: 100%;
26 | }
27 | }
28 |
29 |
30 | /**
31 | * Ratio 16x9
32 | *
33 | * @since 2.4.0
34 | */
35 |
36 | .u-ratio--16x9::before,
37 | %u-ratio--16x9::before {
38 | padding-top: 56.25%;
39 | }
40 |
41 |
42 | /**
43 | * Ratio 4x3
44 | *
45 | * @since 2.4.0
46 | */
47 |
48 | .u-ratio--4x3::before,
49 | %u-ratio--4x3::before {
50 | padding-top: 75%;
51 | }
52 |
--------------------------------------------------------------------------------
/src/scss/utility/_section.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Section Utility
3 | *
4 | * Adds spacing above, below and both that scales between the min and max
5 | * value from the min breakpoint to the max breakpoint.
6 | *
7 | * Loops through an array of section values set in _var.scss.
8 | * 3 classes become available for each value in the array.
9 | *
10 | * A default base setting doesn't require `-*`.
11 | *
12 | * @var $sections
13 | * @since 1.2.0
14 | * @link http://goo.gl/l2mymR
15 | */
16 |
17 | @each $key, $value in $sections {
18 | @if $key == base {
19 | .u-section,
20 | %u-section {
21 | @include section($key);
22 | }
23 | } @else {
24 | .u-section-#{$key},
25 | %u-section-#{$key} {
26 | @include section($key);
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/scss/utility/_separator.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Separator
3 | *
4 | * @since 3.0.0
5 | */
6 |
7 | @function seperator($seperator, $var: 'width') {
8 | @return map-get(map-get($separators, $seperator), $var);
9 | }
10 |
11 | $seperator-sides: (base, top, left, bottom, right);
12 |
13 | @each $key, $value in $separators {
14 | $class: 'u-separator-' + $key;
15 | @if($key == base) {
16 | $class: 'u-separator';
17 | }
18 |
19 | @each $side in $seperator-sides {
20 | @if($side == base) {
21 | .#{$class},
22 | %#{$class} {
23 | border: seperator($key, width) seperator($key, style) seperator($key, color);
24 | }
25 | } @else {
26 | .#{$class}-#{$side},
27 | %#{$class}-#{$side} {
28 | border-#{$side}: seperator($key, width) seperator($key, style) seperator($key, color);
29 | }
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/scss/utility/_shape.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Shape
3 | *
4 | * @since 3.0.0
5 | */
6 |
7 | .u-shape-ring,
8 | %u-shape-ring {
9 | @include ring(color(neutral, dark), color(neutral, light), 16px, 3px);
10 | }
11 |
12 | .u-shape-ring-lg,
13 | %u-shape-ring-lg {
14 | @include ring(color(neutral, dark), color(neutral, light), 32px, 3px);
15 | }
16 |
--------------------------------------------------------------------------------
/src/scss/utility/_space.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Space
3 | *
4 | * @since 3.0.0
5 | */
6 |
7 | @each $key, $value in $spacing {
8 | $value: strip-unit($value) * 1rem;
9 |
10 | @if $key == base {
11 | .u-space,
12 | %u-space {
13 | margin-top: $value !important;
14 | margin-bottom: $value !important;
15 |
16 | &-top {
17 | margin-top: $value !important;
18 | }
19 | &-bottom {
20 | margin-bottom: $value !important;
21 | }
22 | }
23 | } @else {
24 | .u-space-#{$key},
25 | %u-space-#{$key} {
26 | margin-top: $value !important;
27 | margin-bottom: $value !important;
28 |
29 | &-top {
30 | margin-top: $value !important;
31 | }
32 | &-bottom {
33 | margin-bottom: $value !important;
34 | }
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/scss/utility/_typography.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Typography Utility
3 | *
4 | * Useful for setting a font on a specific component or text element.
5 | * Add any custom fonts here. Values are set in _var.scss.
6 | *
7 | * @since 1.0.0
8 | */
9 |
10 | .u-font-family,
11 | %u-font-family {
12 | font-family: $font-family;
13 | }
14 |
--------------------------------------------------------------------------------
/src/scss/utility/_z-index.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * z-index Utility
3 | *
4 | * Use to keep all layered components together, this keeps things
5 | * easy when debugging any z-index issues.
6 | *
7 | * Values are set in _var.scss and range from 1 to 10.
8 | *
9 | * @since 1.0.0
10 | */
11 |
12 | .overlay {
13 | z-index: $z-9;
14 | }
15 |
16 | .modal,
17 | .drawer__dialog {
18 | z-index: $z-10;
19 | }
20 |
--------------------------------------------------------------------------------
/src/vendor/favicons/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/vendor/favicons/android-chrome-192x192.png
--------------------------------------------------------------------------------
/src/vendor/favicons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/vendor/favicons/apple-touch-icon.png
--------------------------------------------------------------------------------
/src/vendor/favicons/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | #ffffff
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/vendor/favicons/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/vendor/favicons/favicon-16x16.png
--------------------------------------------------------------------------------
/src/vendor/favicons/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/vendor/favicons/favicon-32x32.png
--------------------------------------------------------------------------------
/src/vendor/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/vendor/favicons/favicon.ico
--------------------------------------------------------------------------------
/src/vendor/favicons/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Chop Chop",
3 | "icons": [
4 | {
5 | "src": "\/android-chrome-192x192.png",
6 | "sizes": "192x192",
7 | "type": "image\/png"
8 | }
9 | ],
10 | "theme_color": "#ffffff",
11 | "display": "standalone"
12 | }
13 |
--------------------------------------------------------------------------------
/src/vendor/favicons/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getchopchop/chopchop/3c8253c4d11a8c5d4cdf8738479d67890de73bd6/src/vendor/favicons/mstile-150x150.png
--------------------------------------------------------------------------------
/src/vendor/jquery/jquery-no-conflict.js:
--------------------------------------------------------------------------------
1 | $j = jQuery.noConflict();
--------------------------------------------------------------------------------
/src/vendor/svg4everybody/svg4everybody.js:
--------------------------------------------------------------------------------
1 | (function (document, navigator, CACHE, IE9TO11) {
2 | if (IE9TO11) document.addEventListener('DOMContentLoaded', function () {
3 | [].forEach.call(document.querySelectorAll('use'), function (use) {
4 | var
5 | svg = use.parentNode,
6 | url = use.getAttribute('xlink:href').split('#'),
7 | url_root = url[0],
8 | url_hash = url[1],
9 | xhr = CACHE[url_root] = CACHE[url_root] || new XMLHttpRequest();
10 |
11 | if (!xhr.s) {
12 | xhr.s = [];
13 |
14 | xhr.open('GET', url_root);
15 |
16 | xhr.onload = function () {
17 | var x = document.createElement('x'), s = xhr.s;
18 |
19 | x.innerHTML = xhr.responseText;
20 |
21 | xhr.onload = function () {
22 | s.splice(0).map(function (array) {
23 | var g = x.querySelector('#' + array[2]);
24 |
25 | if (g) array[0].replaceChild(g.cloneNode(true), array[1]);
26 | });
27 | };
28 |
29 | xhr.onload();
30 | };
31 |
32 | xhr.send();
33 | }
34 |
35 | xhr.s.push([svg, use, url_hash]);
36 |
37 | if (xhr.responseText) xhr.onload();
38 | });
39 | });
40 | })(
41 | document,
42 | navigator,
43 | {},
44 | /Trident\/[567]\b/.test(navigator.userAgent)
45 | );
--------------------------------------------------------------------------------
; ?>)
3 | ; ?>)
5 | 192x192
6 | ; ?>)
10 | 150x150
11 | ; ?>){kind=icon}
4 | 180x180
5 | ; ?>){kind=logo}
2 |
--------------------------------------------------------------------------------
/pattern/branding/logo/favicon.php:
--------------------------------------------------------------------------------
1 | ; ?>){kind=small}
4 | 16x16
5 | ; ?>){kind=small}
8 | 32x32
9 | ; ?>)
3 |