├── .chec.json ├── .env.example ├── .gitignore ├── 1655d83676faa2f8e6cccbec1e91df4d.png ├── 763a8d77f190ed48786f300e4e8b503f.svg ├── README.md ├── a1632b7715729528c66bd5c5c29b3752.png ├── be1bde007cfbeb280785fa9f3a745e04.svg ├── build ├── asset-manifest.json ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt ├── service-worker.js └── static │ └── media │ ├── arrow-icon.3a5e09cc.svg │ ├── cart-icon.d744b1f3.svg │ ├── letters-hero-big.763a8d77.svg │ ├── logo.6607ab50.svg │ ├── pair-shoes-small.1655d836.png │ └── remove-icon.2d319ad9.svg ├── ed6953fb271c3177f261198f8da75bf1.svg ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt ├── socjvue.png └── socsreact.png ├── seeds ├── assets.json └── products.json ├── src ├── App.js ├── assets │ ├── arrow-icon.svg │ ├── cart-icon.svg │ ├── down-arrow.svg │ ├── footprint.svg │ ├── icons8-shoe-print-240.png │ ├── letters-hero-big.svg │ ├── logo.svg │ ├── pair-shoes-small.png │ ├── remove-icon.svg │ ├── secure-icon.svg │ ├── shoes-hero.png │ └── updated-sock-image.png ├── components │ ├── .DS_Store │ ├── CartCheckout.js │ ├── Header.js │ ├── LandingPage.js │ ├── Loaders.js │ ├── ProductDetail.js │ ├── Products.js │ └── ThankYou.js ├── index.js ├── lib │ ├── ScrollToTop.js │ └── commerce.js ├── order.json ├── styles │ ├── .DS_Store │ ├── application.scss │ ├── components │ │ ├── _footer.scss │ │ ├── _footprintsloader.scss │ │ ├── _header.scss │ │ ├── _index.scss │ │ └── _productDetail.scss │ ├── modules │ │ ├── _breakpoints.scss │ │ ├── _colors.scss │ │ ├── _elements.scss │ │ ├── _globals.scss │ │ ├── _index.scss │ │ ├── _reset.scss │ │ ├── _sizing.scss │ │ ├── _typography.scss │ │ └── utils.scss │ └── tachyons │ │ ├── .npmrc │ │ ├── bower.json │ │ ├── code-of-conduct.md │ │ ├── css │ │ ├── tachyons.css │ │ └── tachyons.min.css │ │ ├── index.html │ │ ├── license │ │ ├── package.json │ │ ├── sites.md │ │ ├── src │ │ ├── _aspect-ratios.css │ │ ├── _background-position.css │ │ ├── _background-size.css │ │ ├── _border-colors.css │ │ ├── _border-radius.css │ │ ├── _border-style.css │ │ ├── _border-widths.css │ │ ├── _borders.css │ │ ├── _box-shadow.css │ │ ├── _box-sizing.css │ │ ├── _clears.css │ │ ├── _code.css │ │ ├── _colors.css │ │ ├── _coordinates.css │ │ ├── _debug-children.css │ │ ├── _debug-grid.css │ │ ├── _debug.css │ │ ├── _display.css │ │ ├── _flexbox.css │ │ ├── _floats.css │ │ ├── _font-family.css │ │ ├── _font-style.css │ │ ├── _font-weight.css │ │ ├── _forms.css │ │ ├── _heights.css │ │ ├── _hovers.css │ │ ├── _images.css │ │ ├── _letter-spacing.css │ │ ├── _line-height.css │ │ ├── _links.css │ │ ├── _lists.css │ │ ├── _max-widths.css │ │ ├── _media-queries.css │ │ ├── _module-template.css │ │ ├── _negative-margins.css │ │ ├── _nested.css │ │ ├── _normalize.css │ │ ├── _opacity.css │ │ ├── _outlines.css │ │ ├── _overflow.css │ │ ├── _position.css │ │ ├── _rotations.css │ │ ├── _skins-pseudo.css │ │ ├── _skins.css │ │ ├── _spacing.css │ │ ├── _styles.css │ │ ├── _tables.css │ │ ├── _text-align.css │ │ ├── _text-decoration.css │ │ ├── _text-transform.css │ │ ├── _type-scale.css │ │ ├── _typography.css │ │ ├── _utilities.css │ │ ├── _vertical-align.css │ │ ├── _visibility.css │ │ ├── _white-space.css │ │ ├── _widths.css │ │ ├── _word-break.css │ │ ├── _z-index.css │ │ └── tachyons.css │ │ └── yarn.lock └── utils │ └── ccFormat.js └── yarn.lock /.chec.json: -------------------------------------------------------------------------------- 1 | { 2 | "npm": "yarn", 3 | "buildScripts": ["seed", "start"], 4 | "dotenv": { 5 | "NODE_ENV": "development", 6 | "REACT_APP_COMMERCEJS_PUBLIC_KEY": "%chec_pkey%", 7 | "REACT_APP_COMMERCEJS_API_URL": "%chec_api_url%", 8 | "CHEC_SECRET_KEY": "%chec_skey%", 9 | "CHEC_API_URL": "%chec_api_url%" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | REACT_APP_COMMERCEJS_PUBLIC_KEY= 2 | # CHEC_SECRET_KEY used with chec/seeder to access your Chec dashboard, seeding it with sample products 3 | # Recommended to remove once done using with chec/seeder 4 | CHEC_SECRET_KEY= 5 | CHEC_API_URL=api.chec.io 6 | NODE_ENV= 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | bundle.js 14 | 15 | env 16 | .env 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 29 | 30 | # dependencies 31 | /node_modules 32 | /.pnp 33 | .pnp.js 34 | 35 | # testing 36 | /coverage 37 | 38 | # production 39 | /build 40 | 41 | # misc 42 | .DS_Store 43 | .env.local 44 | .env.development.local 45 | .env.test.local 46 | .env.production.local 47 | 48 | npm-debug.log* 49 | yarn-debug.log* 50 | yarn-error.log* 51 | 52 | src/styles/tachyons/css 53 | src/styles/tachyons/node_modules 54 | -------------------------------------------------------------------------------- /1655d83676faa2f8e6cccbec1e91df4d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/1655d83676faa2f8e6cccbec1e91df4d.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Demo store using Commerce.js & React 2 | 3 | This demo-store uses [Commerce.js](https://github.com/chec/commerce.js), an eCommerce client-side 4 | JavaScript SDK. 5 | 6 | [![](https://github.com/chec/commercejs-reactjs-vuejs-demo-store/blob/react.js/public/socsreact.png)](https://chec.github.io/commercejs-reactjs-vuejs-demo-store/#/) 7 | 8 | 9 | [![Demo button](https://cdn.chec.io/email/assets/marketing/chec-demo-btn_gray.svg)](https://chec.github.io/commercejs-reactjs-vuejs-demo-store/#/) 10 | 11 | # Spin up a local demo 12 | Follow the instructions below to [install the Chec CLI](https://github.com/chec/cli#usage). 13 | 14 | ## Install source code using the [Chec CLI](https://github.com/chec/cli) 15 | Use the Chec CLI to create copy of the source code on your computer. First follow the instructions to install the Chec CLI. 16 | 17 | Once installed login using the Chec login command. Then run the Chec demo-store command and select the `react-shoe-store`. 18 | 19 | If authenticated successfully (tip: use `chec whoami`) your Chec Dashboard should now include two sample products, seeded by the Chec CLI, and your terminal should have a `react-shoe-store` directory. 20 | 21 | ## Clone & use NPM script `seed` 22 | You can also skip the use of the Chec CLI and instead clone the repo, switch to the `react.js` branch, make a copy of `.env.example` into `.env` and setting the variables needed. 23 | 24 | You must specifiy your secret key in the `.env` for the `seed` script to have the proper permission to seed your Chec Dashboard with the sample product data. Please remove the secret key when not in use anymore. 25 | 26 | Once you have the proper `.env` keys run `yarn install` then `yarn seed`—and when ready to serve the application `yarn serve`. 27 | 28 | ## Other Branches 29 | - `Vue.js` 30 | - Contains an abstracted version of the Master branch using Vue.js CSS/SASS, templating syntax. [View here](https://github.com/chec/commercejs-reactjs-vuejs-demo-store/tree/vue.js) 31 | - `Master` (not ready) 32 | - Contains a plain HTML/CSS/SASS/Vanilla JS implemenation. 33 | 34 | ## ⚠️ Note 35 | 36 | ### This repository is no longer maintained 37 | However, we will accept issue reports and contributions for this repository. See the [contribute to the commerce community](https://commercejs.com/docs/community/contribute) page for more information on how to contribute to our open source projects. For update-to-date APIs, please check the latest version of the [API documentation](https://commercejs.com/docs/api/). 38 | -------------------------------------------------------------------------------- /a1632b7715729528c66bd5c5c29b3752.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/a1632b7715729528c66bd5c5c29b3752.png -------------------------------------------------------------------------------- /build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/example.checkout.v2/static/css/main.086f6061.chunk.css", 4 | "main.js": "/example.checkout.v2/static/js/main.54d652fa.chunk.js", 5 | "main.js.map": "/example.checkout.v2/static/js/main.54d652fa.chunk.js.map", 6 | "runtime~main.js": "/example.checkout.v2/static/js/runtime~main.2d8bcddb.js", 7 | "runtime~main.js.map": "/example.checkout.v2/static/js/runtime~main.2d8bcddb.js.map", 8 | "static/css/2.69e88859.chunk.css": "/example.checkout.v2/static/css/2.69e88859.chunk.css", 9 | "static/js/2.8dde45e8.chunk.js": "/example.checkout.v2/static/js/2.8dde45e8.chunk.js", 10 | "static/js/2.8dde45e8.chunk.js.map": "/example.checkout.v2/static/js/2.8dde45e8.chunk.js.map", 11 | "index.html": "/example.checkout.v2/index.html", 12 | "precache-manifest.134708a2c9db4100e06f0bf6d28b7646.js": "/example.checkout.v2/precache-manifest.134708a2c9db4100e06f0bf6d28b7646.js", 13 | "service-worker.js": "/example.checkout.v2/service-worker.js", 14 | "static/css/2.69e88859.chunk.css.map": "/example.checkout.v2/static/css/2.69e88859.chunk.css.map", 15 | "static/css/main.086f6061.chunk.css.map": "/example.checkout.v2/static/css/main.086f6061.chunk.css.map", 16 | "static/media/arrow-icon.3a5e09cc.svg": "/example.checkout.v2/static/media/arrow-icon.3a5e09cc.svg", 17 | "static/media/cart-icon.d744b1f3.svg": "/example.checkout.v2/static/media/cart-icon.d744b1f3.svg", 18 | "static/media/down-arrow.cdc06d86.svg": "/example.checkout.v2/static/media/down-arrow.cdc06d86.svg", 19 | "static/media/footprint.8303cb28.svg": "/example.checkout.v2/static/media/footprint.8303cb28.svg", 20 | "static/media/letters-hero-big.763a8d77.svg": "/example.checkout.v2/static/media/letters-hero-big.763a8d77.svg", 21 | "static/media/logo.6607ab50.svg": "/example.checkout.v2/static/media/logo.6607ab50.svg", 22 | "static/media/pair-shoes-small.png": "/example.checkout.v2/static/media/pair-shoes-small.1655d836.png", 23 | "static/media/remove-icon.2d319ad9.svg": "/example.checkout.v2/static/media/remove-icon.2d319ad9.svg", 24 | "static/media/shoes-hero.png": "/example.checkout.v2/static/media/shoes-hero.ceb19562.png", 25 | "static/media/updated-sock-image.png": "/example.checkout.v2/static/media/updated-sock-image.2cacb41f.png" 26 | } 27 | } -------------------------------------------------------------------------------- /build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/build/favicon.ico -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | Socks & Shoes
-------------------------------------------------------------------------------- /build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/build/logo192.png -------------------------------------------------------------------------------- /build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/build/logo512.png -------------------------------------------------------------------------------- /build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: /static/ -------------------------------------------------------------------------------- /build/service-worker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Welcome to your Workbox-powered service worker! 3 | * 4 | * You'll need to register this file in your web app and you should 5 | * disable HTTP caching for this file too. 6 | * See https://goo.gl/nhQhGp 7 | * 8 | * The rest of the code is auto-generated. Please don't update this file 9 | * directly; instead, make changes to your Workbox build configuration 10 | * and re-run your build process. 11 | * See https://goo.gl/2aRDsh 12 | */ 13 | 14 | importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); 15 | 16 | importScripts( 17 | "/example.checkout.v2/precache-manifest.134708a2c9db4100e06f0bf6d28b7646.js" 18 | ); 19 | 20 | self.addEventListener('message', (event) => { 21 | if (event.data && event.data.type === 'SKIP_WAITING') { 22 | self.skipWaiting(); 23 | } 24 | }); 25 | 26 | workbox.core.clientsClaim(); 27 | 28 | /** 29 | * The workboxSW.precacheAndRoute() method efficiently caches and responds to 30 | * requests for URLs in the manifest. 31 | * See https://goo.gl/S9QRab 32 | */ 33 | self.__precacheManifest = [].concat(self.__precacheManifest || []); 34 | workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); 35 | 36 | workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/example.checkout.v2/index.html"), { 37 | 38 | blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/], 39 | }); 40 | -------------------------------------------------------------------------------- /build/static/media/arrow-icon.3a5e09cc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /build/static/media/cart-icon.d744b1f3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /build/static/media/logo.6607ab50.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /build/static/media/pair-shoes-small.1655d836.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/build/static/media/pair-shoes-small.1655d836.png -------------------------------------------------------------------------------- /build/static/media/remove-icon.2d319ad9.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /ed6953fb271c3177f261198f8da75bf1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example_checkout.v2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chec/commerce.js": "^2.0.0", 7 | "gh-pages": "^2.1.1", 8 | "github-fork-ribbon-css": "^0.2.3", 9 | "node-sass": "^7.0.0", 10 | "react": "^16.9.0", 11 | "react-dom": "^16.9.0", 12 | "react-router": "^5.0.1", 13 | "react-router-dom": "^5.0.1", 14 | "react-scripts": "3.1.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject", 21 | "predeploy": "yarn run build", 22 | "deploy": "gh-pages -d build", 23 | "seed": "chec-seed seeds" 24 | }, 25 | "eslintConfig": { 26 | "extends": "react-app" 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | }, 40 | "homepage": "https://chec.github.io/commercejs-reactjs-vuejs-demo-store/", 41 | "devDependencies": { 42 | "@chec/seeder": "^1.0.0-beta1" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 19 | 20 | 29 | Socks & Shoes 30 | 31 | 32 | 33 |
34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: /static/ -------------------------------------------------------------------------------- /public/socjvue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/public/socjvue.png -------------------------------------------------------------------------------- /public/socsreact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/public/socsreact.png -------------------------------------------------------------------------------- /seeds/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "product": { 4 | "name": "New season shoes", 5 | "price": "89.99", 6 | "description": "Fresh off the press, these new season shoes are keen for a sniff" 7 | }, 8 | "variant": [ 9 | { 10 | "name": "Size", 11 | "options": [ 12 | { 13 | "description": "8", 14 | "price": "0.00" 15 | }, 16 | { 17 | "description": "9", 18 | "price": "5.00" 19 | }, 20 | { 21 | "description": "10", 22 | "price": "5.00" 23 | }, 24 | { 25 | "description": "11", 26 | "price": "10.00" 27 | }, 28 | { 29 | "description": "12", 30 | "price": "10.00" 31 | } 32 | ] 33 | } 34 | ] 35 | }, 36 | { 37 | "product": { 38 | "name": "Cute socks", 39 | "price": "9.99", 40 | "description": "Warning: will befriend your feet immediately with incomparable softness" 41 | }, 42 | "variant": [ 43 | { 44 | "name": "Size", 45 | "options": [ 46 | { 47 | "description": "S" 48 | }, 49 | { 50 | "description": "M" 51 | }, 52 | { 53 | "description": "L" 54 | } 55 | ] 56 | } 57 | ] 58 | } 59 | ] 60 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from 'react'; 2 | import { Route, Switch, withRouter } from "react-router-dom"; 3 | import commerce from './lib/commerce'; 4 | import Header from './components/Header'; 5 | import LandingPage from './components/LandingPage'; 6 | import Products from './components/Products'; 7 | import CartCheckout from './components/CartCheckout'; 8 | import ThankYou from './components/ThankYou'; 9 | 10 | class App extends Component { 11 | constructor(props) { 12 | super(props); 13 | this.addProductToCart = this.addProductToCart.bind(this); 14 | this.removeProductFromCart = this.removeProductFromCart.bind(this); 15 | this.captureOrder = this.captureOrder.bind(this); 16 | this.refreshCart = this.refreshCart.bind(this); 17 | this.updateQuantity = this.updateQuantity.bind(this); 18 | this.retrieveCart = this.retrieveCart.bind(this); 19 | this.state = { 20 | products: null, 21 | cart: null, 22 | order: null, 23 | playCartAnimation: false 24 | } 25 | } 26 | 27 | componentDidUpdate(prevProps, prevState) { 28 | if ( prevState.cart && prevState.cart.total_items !== this.state.cart.total_items) { 29 | this.setState({ 30 | playCartAnimation: true 31 | }) 32 | } 33 | } 34 | 35 | componentDidMount() { 36 | this.retrieveCart() 37 | commerce.products.list().then( 38 | ({data = []}) => { 39 | //Success 40 | this.setState({ 41 | products: [ 42 | ...data.map(product => ({ 43 | ...product, 44 | variants: product.variants ? product.variants.map(variant => ({ 45 | ...variant, 46 | optionsById: variant.options.reduce((obj, currentOption) => { 47 | obj[currentOption.id] = { 48 | ...currentOption, 49 | variantId: variant.id 50 | } 51 | return obj; 52 | }, {}) 53 | })) : [] 54 | })) 55 | ] 56 | }) 57 | } 58 | ).catch( 59 | (error) => { 60 | // handle error properly in real-world 61 | console.log(error) 62 | } 63 | ); 64 | } 65 | 66 | retrieveCart(){ 67 | commerce.cart.retrieve().then(cart => { 68 | this.setState({ 69 | cart 70 | }) 71 | }).catch(error => console.log(error)); 72 | } 73 | 74 | // adds product to cart by invoking Commerce.js's Cart method 'Cart.add' 75 | // https://commercejs.com/docs/api/?javascript#add-item-to-cart 76 | addProductToCart(product) { 77 | this.setState({ 78 | playCartAnimation: false 79 | }) 80 | const { 81 | productId, 82 | variant 83 | } = product 84 | 85 | commerce.cart.add( 86 | productId, 87 | 1, 88 | variant 89 | ).then(resp => { 90 | // if successful update Cart 91 | this.setState({ 92 | cart: resp.cart 93 | }) 94 | }).catch(error => console.log(error)) 95 | } 96 | 97 | // cart methods 98 | removeProductFromCart(lineItemId) { 99 | return commerce.cart.remove(lineItemId).then((resp) => { 100 | this.setState({ 101 | cart: resp.cart 102 | }) 103 | return resp 104 | }) 105 | } 106 | 107 | // refreshes cart 108 | refreshCart(){ 109 | commerce.cart.refresh().then(resp => { 110 | this.retrieveCart() 111 | }).catch(error => console.log(error)) 112 | } 113 | 114 | captureOrder(checkoutId, order) { 115 | // upon successful capturing of order, refresh cart, and clear checkout state, then set order state 116 | return commerce.checkout 117 | .capture(checkoutId, order).then(resp => { 118 | this.refreshCart() 119 | this.setState({ 120 | checkout: null, 121 | order: resp 122 | }) 123 | return resp; 124 | }).catch((errorResp) => { 125 | throw errorResp.data; 126 | }) 127 | } 128 | 129 | updateQuantity(lineItemId, quantity) { 130 | return commerce.cart.update(lineItemId, { quantity }).then( 131 | resp => { 132 | // if (resp.cart.total_items === 0) { 133 | // this.setState({ 134 | // checkout: null 135 | // }, () => alert("Add items to your cart before to continue checkout.")) 136 | // } we won't need something like this, since when given quantity 0, Commercejs does 137 | // not make line-item 0 but rather leaves it at 1 138 | return this.setState({ 139 | cart: resp.cart 140 | }) 141 | }) 142 | } 143 | 144 | 145 | 146 | render() { 147 | const { 148 | cart, 149 | products 150 | } = this.state; 151 | return ( 152 | 153 | { 154 |
155 | } 156 |
157 | 158 | 159 | { 162 | return ( 163 | 168 | ) 169 | }} 170 | /> 171 | { 174 | return ( 175 | 183 | ) 184 | }} 185 | /> 186 | { 187 | if (!this.state.order) { 188 | return props.history.push("/") 189 | } 190 | return 191 | }}/> 192 | 193 |
194 | 204 | 205 | Fork me on GitHub 206 | 207 | 208 | ) 209 | } 210 | } 211 | 212 | // doc for withRouter https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md 213 | export default withRouter(App); 214 | -------------------------------------------------------------------------------- /src/assets/arrow-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/cart-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/down-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/footprint.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons8-shoe-print-240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/src/assets/icons8-shoe-print-240.png -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/pair-shoes-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/src/assets/pair-shoes-small.png -------------------------------------------------------------------------------- /src/assets/remove-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/secure-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/shoes-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/src/assets/shoes-hero.png -------------------------------------------------------------------------------- /src/assets/updated-sock-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/src/assets/updated-sock-image.png -------------------------------------------------------------------------------- /src/components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/src/components/.DS_Store -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from "react-router-dom"; 3 | import {ReactComponent as Logo } from '../assets/logo.svg' 4 | import {ReactComponent as CartIcon} from '../assets/cart-icon.svg'; 5 | 6 | function Header(props) { 7 | const isThankYouPathname = props.location.pathname === '/thank-you'; 8 | const currentFillColor = isThankYouPathname ? 'fill-cherry' : 'fill-near-white'; 9 | const currentColor = isThankYouPathname ? 'cherry' : 'white'; 10 | const productPageClass = props.location.pathname === '/products' ? 'headerContainer--products-page' : ''; 11 | 12 | return ( 13 |
14 | 15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 |
24 |

25 | {props.cart ? props.cart.total_items : '0'} 26 |

27 | 28 |
29 |
30 | ) 31 | } 32 | 33 | export default Header; 34 | -------------------------------------------------------------------------------- /src/components/LandingPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from "react-router-dom"; 3 | import {ReactComponent as LettersHeroBg } from '../assets/letters-hero-big.svg' 4 | import shoesHero from '../assets/shoes-hero.png'; 5 | 6 | function LandingPage(props) { 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 |
14 | Pair of Shoes 15 |
16 | 17 | shop products 18 | 19 |
20 |
21 |
22 |
23 | ) 24 | } 25 | 26 | export default LandingPage; 27 | -------------------------------------------------------------------------------- /src/components/Loaders.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ReactComponent as FootPrintSvg } from '../assets/footprint.svg'; 3 | 4 | export function FootPrintsLoading(props) { 5 | return ( 6 |
7 |
8 | { 9 | Array.from({length: '8'}).map((item, id) => ( 10 |
11 | 12 |
13 | )) 14 | } 15 |
16 |

17 | { props.children || 'loading...'} 18 |

19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /src/components/ProductDetail.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { ReactComponent as ArrowIcon } from '../assets/down-arrow.svg' 3 | 4 | function Label(props) { 5 | return ( 6 |
7 |

8 | {props.labelTitle || ''} 9 |

10 |

11 | {props.body || (props.placeholder || '')} 12 |

13 | {props.children} 14 |
15 | ) 16 | } 17 | 18 | 19 | class ProductDetail extends Component { 20 | 21 | constructor(props) { 22 | super(props); 23 | this.handleChange = this.handleChange.bind(this) 24 | this.addProductToCart = this.addProductToCart.bind(this) 25 | this.state = { 26 | sizeSelect: '' 27 | } 28 | } 29 | 30 | handleChange(e) { 31 | this.setState({ 32 | [e.target.name]: e.target.value 33 | }) 34 | } 35 | 36 | addProductToCart(e) { 37 | const product = { 38 | productId: this.props.product.id, 39 | variant: { 40 | [this.props.product.variants[0].id]: this.state.sizeSelect 41 | } 42 | } 43 | this.props.addProductToCart(product) 44 | } 45 | 46 | render() { 47 | const { 48 | product 49 | } = this.props; 50 | 51 | const { 52 | sizeSelect 53 | } = this.state; 54 | 55 | return ( 56 |
57 |
58 |
59 |
60 |

61 | {product.name} 62 |

63 |
67 |
68 |
69 | Product 70 |
71 |
72 |

73 | type 74 |

75 |

76 | brand 77 |

78 |
79 |
80 |
81 |
82 |
83 |
84 |
114 |
115 | 122 |
123 |
124 |
125 | 126 |
127 | ) 128 | } 129 | } 130 | 131 | export default ProductDetail; 132 | -------------------------------------------------------------------------------- /src/components/Products.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FootPrintsLoading as Loading } from './Loaders'; 3 | import ProductDetail from './ProductDetail'; 4 | 5 | class Products extends Component { 6 | render() { 7 | if (this.props.products) { 8 | const allProducts = this.props.products.map((product, id) => { 9 | return ( 10 | 15 | ) 16 | }) 17 | return this.props.products.length ? 18 | ( 19 |
20 | {allProducts.reverse()} 21 |
22 | ) : 23 | ( 24 |
25 |

26 | There are currently no items for sale. 27 |

28 |
29 | ) 30 | } 31 | return ( 32 | 33 | ) 34 | } 35 | } 36 | 37 | export default Products 38 | -------------------------------------------------------------------------------- /src/components/ThankYou.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import pairShoes from '../assets/pair-shoes-small.png' 3 | import sockImage from '../assets/updated-sock-image.png' 4 | 5 | class ThankYou extends Component { 6 | render() { 7 | const allLineItems = this.props.order.order.line_items.map((item, key) => { 8 | return ( 9 |
10 |
11 |
20 |
21 |

22 | {item.name} 23 | 24 | {item.variants[0].option_name} 25 | 26 | 27 | x{item.quantity} - ${item.line_total.formatted_with_code} 28 | 29 |

30 |
31 | ) 32 | }) 33 | return ( 34 |
35 |
36 |
37 |
38 | {allLineItems} 39 |
40 |
41 |
42 |

43 | total 44 |

45 |

46 | ${this.props.order.order.total.formatted_with_code} 47 |

48 |
49 |
50 |
51 |
52 |
53 |

54 | Thank you for your order! 55 |

56 |
57 |

58 | a full receipt will be emailed to {this.props.order.customer.email}. 59 |

60 |
61 |

62 | your details 63 | {this.props.order.customer.email} 64 |

65 |

66 | 67 | delivery address 68 | 69 | 70 | { 71 | this.props.order.shipping.name 72 | } 73 | 74 | 75 | { 76 | this.props.order.shipping.street 77 | } 78 | 79 | 80 | { 81 | this.props.order.shipping.town_city 82 | } 83 | 84 | 85 | { 86 | `${this.props.order.shipping.county_state}, ${this.props.order.shipping.postal_zip_code}` 87 | } 88 | 89 | 90 | { 91 | this.props.order.shipping.country 92 | } 93 | 94 |

95 |
96 |
97 |
98 |
99 |
100 |
101 | ) 102 | } 103 | } 104 | 105 | export default ThankYou; 106 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { HashRouter as Router } from 'react-router-dom'; 4 | import ScrollToTop from './lib/ScrollToTop'; 5 | import './styles/application.scss'; 6 | import App from './App'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /src/lib/ScrollToTop.js: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import { withRouter } from "react-router-dom"; 3 | 4 | class ScrollToTop extends Component { 5 | componentDidUpdate(prevProps) { 6 | if (this.props.location !== prevProps.location) { 7 | window.scrollTo(0, 0); 8 | } 9 | } 10 | render() { 11 | return this.props.children; 12 | } 13 | } 14 | 15 | export default withRouter(ScrollToTop); 16 | -------------------------------------------------------------------------------- /src/lib/commerce.js: -------------------------------------------------------------------------------- 1 | import Commerce from '@chec/commerce.js'; 2 | 3 | const commercejsPublicKey = process.env.REACT_APP_COMMERCEJS_PUBLIC_KEY; 4 | const isDevMode = process.env.NODE_ENV === 'development'; 5 | if (isDevMode && !commercejsPublicKey) { 6 | throw Error('You must provide your public API key as an environment variable named REACT_APP_COMMERCEJS_PUBLIC_KEY for Commerce.js to work. Your public key is available within your Chec dashboard, or can be obtained with the Chec CLI via "whoami') 7 | } 8 | export default new Commerce( 9 | commercejsPublicKey, 10 | isDevMode 11 | ); 12 | -------------------------------------------------------------------------------- /src/order.json: -------------------------------------------------------------------------------- 1 | { 2 | {"id":"ord_ZM8X5nnQJ5pv4q","cart_id":"cart_R5XEeBeW8xvEGl","checkout_token_id":"chkt_mwJ2YQMNz71v3w","created":1565709580,"redirect":false,"customer_reference":"XMPLCHCKT-77333","status_payment":"paid","status_fulfillment":"not_fulfilled","customer":{"email":"john@doe.com"},"currency":{"code":"USD","symbol":"$"},"extrafields":null,"shipping":{"name":"undefined undefined","street":"1161 Mission St","town_city":"San Francisco","county_state":"CA","postal_zip_code":"94103","country":"US"},"billing":[],"order":{"line_items":[{"id":"item_7RyWOwmK5nEa2V","product_id":"prod_4WJvlKMYJobYV1","product_name":"White Shoe","type":"standard","quantity":1,"price":{"raw":149.99,"formatted":"149.99","formatted_with_symbol":"$149.99","formatted_with_code":"149.99 USD"},"line_total":{"raw":149.99,"formatted":"149.99","formatted_with_symbol":"$149.99","formatted_with_code":"149.99 USD"},"variants":[{"variant_id":"vrnt_RqEv5xkEOoZz4j","option_id":"optn_yA6nld7Bg5EWbz","variant_name":"Sizes","option_name":"SIZE 7.5MEN/ 5.5 WOMEN","price":{"raw":0,"formatted":"0.00","formatted_with_symbol":"$0.00","formatted_with_code":"0.00 USD"}}],"tax":{"is_taxable":false,"taxable_amount":null,"amount":null,"breakdown":[]}}],"subtotal":{"raw":149.99,"formatted":"149.99","formatted_with_symbol":"$149.99","formatted_with_code":"149.99 USD"},"discount":[],"shipping":{"id":"ship_8XxzoBPmKlPQAZ","description":"Domestic","price":{"raw":0,"formatted":"0.00","formatted_with_symbol":"$0.00","formatted_with_code":"0.00 USD"}},"tax":{"amount":{"raw":0,"formatted":"0.00","formatted_with_symbol":"$0.00","formatted_with_code":"0.00 USD"},"included_in_price":false,"breakdown":[],"zone":null},"total":{"raw":149.99,"formatted":"149.99","formatted_with_symbol":"$149.99","formatted_with_code":"149.99 USD"},"total_with_tax":{"raw":149.99,"formatted":"149.99","formatted_with_symbol":"$149.99","formatted_with_code":"149.99 USD"},"giftcard":[],"pay_what_you_want":{"enabled":false,"minimum":null,"customer_set_price":null},"total_paid":{"raw":149.99,"formatted":"149.99","formatted_with_symbol":"$149.99","formatted_with_code":"149.99 USD"},"future_charges":[]},"payments":[{"id":"pymnt_A12Jwr44j5Pjnk","transaction_id":1565709580,"card_type":"visa","gateway":"test_gateway","amount":{"raw":149.99,"formatted":"149.99","formatted_with_symbol":"$149.99","formatted_with_code":"149.99 USD"},"reference":4242}],"pending_payments":[],"fulfillment":{"shipping":{"id":"ful_9BAmwJyA1QleXd","description":"Domestic","price":0,"shipping_method_id":"ship_8XxzoBPmKlPQAZ","provider":"chec","provider_type":"native_shipping"},"digital":null},"conditionals":{"collects_fullname":false,"collects_shipping_address":true,"collects_billing_address":false,"fulfill_shipping":true,"fulfill_digital":false,"has_available_discounts":false,"has_pay_what_you_want":false,"collects_extrafields":false,"is_cart_free":false,"has_preorder":false},"metadata":[],"fraud":[],"preorders":[],"merchant":{"id":16492,"business_name":"Example Checkout","business_description":"","status":"active","timezone":"UT8","country":"US","currency":{"symbol":"$","code":"USD"},"support_email":"john@trychec.com","logo":null,"logo_shape":null,"cover":null,"analytics":{"google":{"settings":{"tracking_id":null,"linked_domains":null}}},"has":{"logo":false,"cover":false,"analytics":false,"business_description":false}}} 3 | } 4 | -------------------------------------------------------------------------------- /src/styles/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/src/styles/.DS_Store -------------------------------------------------------------------------------- /src/styles/application.scss: -------------------------------------------------------------------------------- 1 | // Modules 2 | @import 'modules/index'; 3 | // Tachyons.css 4 | @import 'tachyons/css/tachyons'; 5 | // Components 6 | @import 'components/index'; 7 | // External 8 | @import '~github-fork-ribbon-css/gh-fork-ribbon.css'; 9 | -------------------------------------------------------------------------------- /src/styles/components/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | @extend .w-100 !optional; 3 | min-height: $footer-height; 4 | } 5 | -------------------------------------------------------------------------------- /src/styles/components/_footprintsloader.scss: -------------------------------------------------------------------------------- 1 | .FootPrintsLoader { 2 | &__prints-container { 3 | width: auto; 4 | height: 5rem; 5 | margin-right: 4.75rem; 6 | margin-bottom: 10rem; 7 | } 8 | 9 | &__print { 10 | animation: 2500ms pawAnimation ease-in infinite; 11 | opacity: 0; 12 | 13 | 14 | &:nth-child(odd){ 15 | transform: rotate(0deg); 16 | } 17 | 18 | &:nth-child(even){ 19 | margin-left: 6rem; 20 | transform: rotate(0deg) scaleX(-1) translate(0, -50%); 21 | } 22 | 23 | @for $i from 1 through 10 { 24 | 25 | @if($i == 1){ 26 | &:nth-child(#{$i}){ 27 | animation-delay: #{ (($i * -1)+10)*0.25 }s; 28 | transform: rotate(0deg) translate3d(60%, -68%, 0); 29 | } 30 | } 31 | @if($i == 2){ 32 | &:nth-child(#{$i}){ 33 | animation-delay: #{ (($i * -1)+10)*0.25 }s; 34 | transform: rotate(0deg) scaleX(-1) translate3d(-10%, -137%, 0); 35 | } 36 | } 37 | 38 | @if($i == 3){ 39 | &:nth-child(#{$i}){ 40 | animation-delay: #{ (($i * -1)+10)*0.25 }s; 41 | transform: rotate(0deg) translate3d(58%, -155%, 0); 42 | } 43 | } 44 | @if($i == 4){ 45 | &:nth-child(#{$i}){ 46 | animation-delay: #{ (($i * -1)+10)*0.25 }s; 47 | transform: rotate(3deg) scaleX(-1) translate3d(5%, -227%, 0); 48 | } 49 | } 50 | 51 | @if($i == 5){ 52 | &:nth-child(#{$i}){ 53 | animation-delay: #{ (($i * -1)+10)*0.25 }s; 54 | transform: rotate(0deg) translate3d(55%, -246%, 0); 55 | } 56 | } 57 | @if($i == 6){ 58 | &:nth-child(#{$i}){ 59 | animation-delay: #{ (($i * -1)+10)*0.25 }s; 60 | transform: rotate(0deg) scaleX(-1) translate3d(-3.9%, -312%, 0); 61 | } 62 | } 63 | 64 | @if($i == 7){ 65 | &:nth-child(#{$i}){ 66 | animation-delay: #{ (($i * -1)+10)*0.25 }s; 67 | transform: rotate(0deg) translate3d(56%, -336%, 0) 68 | } 69 | } 70 | 71 | @if($i == 8){ 72 | &:nth-child(#{$i}) { 73 | animation-delay: #{ (($i * -1)+10)*0.25 }s; 74 | transform: rotate(0deg) scaleX(-1) translate3d(0%, -400%, 0); 75 | } 76 | } 77 | }//for loop ends 78 | } 79 | } 80 | 81 | @keyframes pawAnimation { 82 | 0%{ 83 | opacity: 1; 84 | } 85 | 50%{ 86 | opacity: 0; 87 | } 88 | 100%{ 89 | opacity: 0; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/styles/components/_header.scss: -------------------------------------------------------------------------------- 1 | .headerContainer { 2 | &--products-page { 3 | position: fixed; 4 | background-color: black; 5 | padding: 1rem 2rem; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/styles/components/_index.scss: -------------------------------------------------------------------------------- 1 | @import 'footer'; 2 | @import 'productDetail'; 3 | @import 'header'; 4 | @import 'footprintsloader'; 5 | -------------------------------------------------------------------------------- /src/styles/components/_productDetail.scss: -------------------------------------------------------------------------------- 1 | .productDetail { 2 | background: linear-gradient(-188deg, #EEB9AB 26.04%, #eeb9ab00 100%); 3 | } 4 | -------------------------------------------------------------------------------- /src/styles/modules/_breakpoints.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-reactjs-vuejs-demo-store/d0867a23d009a94ec3c62e5655121921e8d6e30f/src/styles/modules/_breakpoints.scss -------------------------------------------------------------------------------- /src/styles/modules/_colors.scss: -------------------------------------------------------------------------------- 1 | $color-blossom: #F1D0C7; 2 | $color-cherry: #d65c5c; 3 | $near-white: #f4f4f4; 4 | $color-tan-white: #FBF9F9; 5 | -------------------------------------------------------------------------------- /src/styles/modules/_elements.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | @extend .medium-text, .pointer !optional; 3 | &__add-to-cart { 4 | padding: 1rem 5rem; 5 | font-size: 0.70rem; 6 | letter-spacing: 0.25rem; 7 | border-radius: 0.30rem; 8 | } 9 | 10 | &__checkout { 11 | padding: 1.8rem 5rem; 12 | font-size: 0.70rem; 13 | letter-spacing: 0.25rem; 14 | border-radius: 0.30rem; 15 | } 16 | } 17 | 18 | .logoContainer { 19 | width: 13.5rem; 20 | height: 2rem; 21 | } 22 | 23 | .cartIconContainer { 24 | width: 1.5rem;; 25 | height: 1.5rem; 26 | } 27 | 28 | .cartIconContainer { 29 | width: 1.97rem;; 30 | height: 1.97rem; 31 | } 32 | 33 | .arrowIconContainer { 34 | width: 1rem; 35 | height: 1.8rem; 36 | } 37 | 38 | .arrowDownContainer { 39 | width: 1.5rem; 40 | height: 1.5rem; 41 | } 42 | 43 | .footPrintContainer { 44 | width: 6rem; 45 | height: 6rem; 46 | } 47 | 48 | .checkoutFormInput { 49 | @extend .w-100 !optional; 50 | @extend .br3 !optional; 51 | @extend.bg-dark-gray !optional; 52 | @extend .pa3 !optional; 53 | @extend .bn !optional; 54 | @extend .mb4 !optional; 55 | @extend .light-gray !optional; 56 | @extend .medium-text !optional; 57 | @extend .tracked-mega-1 !optional; 58 | &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 59 | @extend .light-gray !optional; 60 | @extend .ttu !optional; 61 | } 62 | } 63 | 64 | .checkoutFormInputLabel { 65 | @extend .medium-text !optional; 66 | @extend .dark-gray !optional; 67 | @extend .f7 !optional; 68 | @extend .tracked-mega-1 !optional; 69 | @extend .ttu !optional; 70 | @extend .pb2 !optional; 71 | @extend .nowrap !optional; 72 | } 73 | 74 | .chooseASize { 75 | display: flex; 76 | align-items: center; 77 | color: white; 78 | padding: 0.75rem 1rem; 79 | background: black; 80 | p { 81 | padding: 0px; 82 | font-size: 2.2rem; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/styles/modules/_globals.scss: -------------------------------------------------------------------------------- 1 | #main { 2 | min-height: calc(100vh - #{$footer-height}); 3 | } 4 | 5 | button { 6 | outline: none; 7 | } 8 | 9 | input[type=number]::-webkit-inner-spin-button, 10 | input[type=number]::-webkit-outer-spin-button { 11 | -webkit-appearance: none; 12 | margin: 0; 13 | } 14 | 15 | .scale-animation { 16 | animation: scale 2000ms 1; 17 | } 18 | 19 | @keyframes scale { 20 | 0%, 20%, 50%, 80%, 100% {transform: scale(1);} 21 | 40% {transform: scale(1.2);} 22 | 60% {transform: scale(1.4);} 23 | } 24 | -------------------------------------------------------------------------------- /src/styles/modules/_index.scss: -------------------------------------------------------------------------------- 1 | @import 'reset', 'colors', 'sizing', 'typography', 'utils', 'globals', 'elements'; 2 | -------------------------------------------------------------------------------- /src/styles/modules/_reset.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | menu, 73 | nav, 74 | output, 75 | ruby, 76 | section, 77 | summary, 78 | time, 79 | mark, 80 | audio, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | article, 90 | aside, 91 | details, 92 | figcaption, 93 | figure, 94 | footer, 95 | header, 96 | hgroup, 97 | menu, 98 | nav, 99 | section { 100 | display: block; 101 | } 102 | * { 103 | -webkit-font-smoothing: antialiased; 104 | -moz-osx-font-smoothing: grayscale; 105 | box-sizing: border-box; 106 | } 107 | button { 108 | appearance: none; 109 | border: none; 110 | } 111 | input { 112 | outline: none; 113 | } 114 | -------------------------------------------------------------------------------- /src/styles/modules/_sizing.scss: -------------------------------------------------------------------------------- 1 | $footer-height: 18.75rem; 2 | $header-height: 13.50rem; 3 | -------------------------------------------------------------------------------- /src/styles/modules/_typography.scss: -------------------------------------------------------------------------------- 1 | $font-roboto: 'Roboto', 'Indie Flower', sans-serif; 2 | 3 | .font-roboto { 4 | font-family: $font-roboto; 5 | } 6 | 7 | .medium-text { 8 | @extend .font-roboto !optional; 9 | font-style: normal; 10 | font-weight: bold; 11 | font-size: 0.70rem; 12 | line-height: 0.80rem; 13 | letter-spacing: 0.13rem; 14 | } 15 | 16 | .hero-text { 17 | @extend .font-roboto !optional; 18 | font-style: normal; 19 | font-weight: bold; 20 | font-size: 3rem; 21 | line-height: 3.5rem; 22 | letter-spacing: 1.2rem; 23 | } 24 | 25 | .large-title-text { 26 | @extend .font-roboto, .tracked-tight !optional; 27 | font-style: normal; 28 | font-weight: 900; 29 | font-size: 5.5rem; 30 | line-height: 89%; 31 | } 32 | 33 | .medium-body-text { 34 | @extend .font-roboto, .tracked-tight !optional; 35 | font-style: normal; 36 | font-weight: bold; 37 | font-size: 1.5rem; 38 | line-height: 1.8rem; 39 | } 40 | -------------------------------------------------------------------------------- /src/styles/modules/utils.scss: -------------------------------------------------------------------------------- 1 | .bg-none { 2 | background: none; 3 | } 4 | 5 | .fill-cherry { 6 | fill: $color-cherry; 7 | } 8 | 9 | .fill-near-white { 10 | fill: $near-white; 11 | } 12 | 13 | .cherry { 14 | color: $color-cherry; 15 | } 16 | 17 | .bg-cherry { 18 | background-color: $color-cherry; 19 | } 20 | 21 | .bg-tan-white { 22 | background-color: $color-tan-white; 23 | } 24 | 25 | .input-error { 26 | outline: $color-cherry auto 0.3rem; 27 | box-shadow: 0 0 0.5rem $color-cherry; 28 | } 29 | 30 | @media (--breakpoint-medium) { 31 | .rotate-lift-m { 32 | transform: translate(2rem, -5rem) rotate(-90deg); 33 | } 34 | 35 | .bg-none-m { 36 | background: none; 37 | } 38 | 39 | .fill-cherry-m { 40 | fill: $color-cherry; 41 | } 42 | 43 | .fill-near-white-m { 44 | fill: $near-white; 45 | } 46 | 47 | .cherry-m { 48 | color: $color-cherry; 49 | } 50 | 51 | .bg-cherry-m { 52 | background-color: $color-cherry; 53 | } 54 | 55 | .bg-tan-white-m { 56 | background-color: $color-tan-white; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/styles/tachyons/.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /src/styles/tachyons/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tachyons", 3 | "description": "Functional CSS for humans", 4 | "main": "css/tachyons.css", 5 | "authors": [ 6 | "mrmrs" 7 | ], 8 | "license": "MIT", 9 | "keywords": [ 10 | "css", 11 | "design", 12 | "system", 13 | "responsive", 14 | "design" 15 | ], 16 | "homepage": "http://tachyons.io", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /src/styles/tachyons/code-of-conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | ### Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, 8 | body size, disability, ethnicity, gender identity and expression, level of 9 | experience, nationality, personal appearance, race, religion, or sexual 10 | identity and orientation. 11 | 12 | ### Our Standards 13 | 14 | #### Examples of behavior that contributes to creating a positive environment include: 15 | 16 | * Using welcoming and inclusive language 17 | * Being respectful of differing viewpoints and experiences 18 | * Gracefully accepting constructive criticism 19 | * Focusing on what is best for the community 20 | * Showing empathy towards other community members 21 | 22 | #### Examples of unacceptable behavior by participants include: 23 | 24 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 25 | * Trolling, insulting/derogatory comments, and personal or political attacks 26 | * Public or private harassment 27 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 28 | * Other conduct which could reasonably be considered inappropriate in a professional setting 29 | 30 | ### Our Responsibilities 31 | 32 | Project maintainers are responsible for clarifying the standards of acceptable 33 | behavior and are expected to take appropriate and fair corrective action in 34 | response to any instances of unacceptable behavior. 35 | 36 | Project maintainers have the right and responsibility to remove, edit, or 37 | reject comments, commits, code, wiki edits, issues, and other contributions 38 | that are not aligned to this Code of Conduct, or to ban temporarily or 39 | permanently any contributor for other behaviors that they deem inappropriate, 40 | threatening, offensive, or harmful. 41 | 42 | ### Scope 43 | 44 | This Code of Conduct applies both within project spaces and in public spaces 45 | when an individual is representing the project or its community. Examples of 46 | representing a project or community include using an official project e-mail 47 | address, posting via an official social media account, or acting as an 48 | appointed representative at an online or offline event. Representation of a 49 | project may be further defined and clarified by project maintainers. 50 | 51 | ### Enforcement 52 | 53 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 54 | reported by contacting the project team at hi@mrmrs.cc. All 55 | complaints will be reviewed and investigated and will result in a response that 56 | is deemed necessary and appropriate to the circumstances. The project team is 57 | obligated to maintain confidentiality with regard to the reporter of an 58 | incident. Further details of specific enforcement policies may be posted 59 | separately. 60 | 61 | Project maintainers who do not follow or enforce the Code of Conduct in good 62 | faith may face temporary or permanent repercussions as determined by other 63 | members of the project's leadership. 64 | 65 | ### Attribution 66 | 67 | This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at http://contributor-covenant.org/version/1/4 68 | -------------------------------------------------------------------------------- /src/styles/tachyons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/styles/tachyons/license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /src/styles/tachyons/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tachyons", 3 | "version": "4.11.2", 4 | "description": "Functional CSS for humans", 5 | "author": "mrmrs", 6 | "style": "css/tachyons.min.css", 7 | "main": "css/tachyons.css", 8 | "files": [ 9 | "css", 10 | "src" 11 | ], 12 | "repository": "tachyons-css/tachyons", 13 | "keywords": [ 14 | "css", 15 | "oocss", 16 | "postcss", 17 | "functional css", 18 | "design", 19 | "responsive", 20 | "performance" 21 | ], 22 | "license": "MIT", 23 | "devDependencies": { 24 | "copy-files": "^0.1.0", 25 | "immutable-css-cli": "^1.1.1", 26 | "normalize.css": "^8.0.0", 27 | "tachyons-modules": "^1.1.10", 28 | "tachyons-cli": "^1.3.2", 29 | "watch": "^1.0.2" 30 | }, 31 | "contributors": [ 32 | { 33 | "name": "adam morse", 34 | "email": "hi@mrmrs.cc" 35 | }, 36 | { 37 | "name": "john otander", 38 | "url": "http://johnotander.com" 39 | } 40 | ], 41 | "scripts": { 42 | "start": "npm run build:watch", 43 | "mutations": "immutable-css src/tachyons.css --strict", 44 | "build": "npm run build:css && npm run build:minify", 45 | "build:css": "tachyons src/tachyons.css > css/tachyons.css", 46 | "build:minify": "tachyons src/tachyons.css --minify > css/tachyons.min.css", 47 | "build:watch": "watch \"npm run build\" ./src/" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/styles/tachyons/sites.md: -------------------------------------------------------------------------------- 1 | * https://gohugo.io 2 | * https://interfacelovers.com 3 | * https://friendstalkfrontend.com 4 | * http://www.philipyoungg.com 5 | * https://antonsten.com 6 | * https://enbytech.github.io 7 | * https://fontawesome.com 8 | * https://asay.io 9 | * https://detroitjs.com 10 | * https://purple3.herokuapp.com 11 | * https://watsonmulkey.github.io 12 | * http://vuenosair.es 13 | * http://www.codeblocq.com 14 | * http://blunt.af/tachy.app/ 15 | * https://aframevr-userland.github.io/mainframe/ 16 | * https://coralproject.net 17 | * https://goldenstaterecord.com 18 | * http://www.sogol.co 19 | * http://lastjapan.com 20 | * https://segment.com 21 | * http://hicuties.com 22 | * https://urlbox.io 23 | * https://loronarecords.com 24 | * https://community.algolia.com/wordpress/ 25 | * http://studiocraft.cc 26 | * http://samueldregan.com 27 | * https://filmstrip.cf 28 | * https://voteplz.com 29 | * http://bluebottlecoffee.com 30 | * http://cyclelove.cc 31 | * http://topher.design 32 | * http://kerem.co 33 | * http://iheanyi.com/ 34 | * http://johnotander.com 35 | * https://vimgifs.com 36 | * http://jon.gold/txt 37 | * http://rene.jon.gold 38 | * https://tinychime.github.io/jekyons/ 39 | * http://prnt.cc 40 | * http://spenhar.com 41 | * http://randoma11y.com 42 | * http://www.csspurge.com 43 | * http://clrs.cc 44 | * https://cljsjs.github.io 45 | * https://www.getnoodl.es 46 | * https://natwelch.com 47 | * http://pesticide.io 48 | * http://zachhurd.com 49 | * http://gfffs.com 50 | * https://wordpress.org/themes/vanilla-milkshake/ 51 | * http://comics.hongkonggong.com/ 52 | * https://accessmyinfo.hk/#/ 53 | * https://accessmyinfo.org/#/ 54 | * http://rene.jon.gold 55 | * http://randoma11y.com 56 | * http://designbytyping.com 57 | * http://colepeters.com 58 | * https://atmin.github.io/funponent/ 59 | * http://blog.colepeters.com 60 | * http://aboutlife.com 61 | * http://joinoneroom.com 62 | * http://filipaonunes.com 63 | * https://vakra.band 64 | * http://tylernford.com 65 | * https://adventuretron.org 66 | * https://uptimeumbrella.com 67 | * http://www.talbs.me 68 | * https://podviaznikov.com 69 | * http://seanoshea.me 70 | * https://www.hiaida.com 71 | * http://maxogden.github.io/screencat/ 72 | * http://numenta.com 73 | * https://windtoday.co 74 | * https://crunchbangplusplus.org 75 | * http://claudio.netlify.com 76 | * http://devday-ar.com 77 | * https://zoneii.github.io 78 | * http://kow.fm 79 | * http://jonshort.me 80 | * https://nuxtjs.org 81 | * http://devgame.surge.sh 82 | * https://scottmathson.com 83 | * https://podviaznikov.com 84 | * https://hero-patterns.lowmess.com 85 | * https://colinwilson.uk 86 | * https://grodziski.com 87 | * https://hatchloyalty.com 88 | * http://www.spokesman.com/ 89 | * https://enveloop.studio 90 | * http://tylerdeitz.com 91 | * https://www.dcdesignweek.org/ 92 | * https://tribekampala.com 93 | * https://www.classaction.org 94 | * https://gaest.com 95 | * https://aravindh.net 96 | * https://www.starklabs.io/ 97 | * https://pylon.design 98 | * https://lasttramfrom.com/ 99 | * https://www.stepahead.de 100 | * https://cryptocurrencyjobs.co/ 101 | * https://foundlo.st 102 | * https://jjude.com 103 | * http://www.spokesman.com 104 | * https://beta.observablehq.com/ 105 | * https://www.medienblau.de 106 | * https://c.atet.in 107 | * https://tools.kaklabs.com 108 | * https://eppendocs.de 109 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_aspect-ratios.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ASPECT RATIOS 4 | 5 | */ 6 | 7 | /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. 8 | * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e 9 | * Make sure there are no height and width attributes on the embedded media. 10 | * Adapted from: https://github.com/suitcss/components-flex-embed 11 | * 12 | * Example: 13 | * 14 | *
15 | * 16 | *
17 | * 18 | * */ 19 | 20 | .aspect-ratio { 21 | height: 0; 22 | position: relative; 23 | } 24 | 25 | .aspect-ratio--16x9 { padding-bottom: 56.25%; } 26 | .aspect-ratio--9x16 { padding-bottom: 177.77%; } 27 | 28 | .aspect-ratio--4x3 { padding-bottom: 75%; } 29 | .aspect-ratio--3x4 { padding-bottom: 133.33%; } 30 | 31 | .aspect-ratio--6x4 { padding-bottom: 66.6%; } 32 | .aspect-ratio--4x6 { padding-bottom: 150%; } 33 | 34 | .aspect-ratio--8x5 { padding-bottom: 62.5%; } 35 | .aspect-ratio--5x8 { padding-bottom: 160%; } 36 | 37 | .aspect-ratio--7x5 { padding-bottom: 71.42%; } 38 | .aspect-ratio--5x7 { padding-bottom: 140%; } 39 | 40 | .aspect-ratio--1x1 { padding-bottom: 100%; } 41 | 42 | .aspect-ratio--object { 43 | position: absolute; 44 | top: 0; 45 | right: 0; 46 | bottom: 0; 47 | left: 0; 48 | width: 100%; 49 | height: 100%; 50 | z-index: 100; 51 | } 52 | 53 | @media (--breakpoint-not-small){ 54 | .aspect-ratio-ns { 55 | height: 0; 56 | position: relative; 57 | } 58 | .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } 59 | .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } 60 | .aspect-ratio--4x3-ns { padding-bottom: 75%; } 61 | .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } 62 | .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } 63 | .aspect-ratio--4x6-ns { padding-bottom: 150%; } 64 | .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } 65 | .aspect-ratio--5x8-ns { padding-bottom: 160%; } 66 | .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } 67 | .aspect-ratio--5x7-ns { padding-bottom: 140%; } 68 | .aspect-ratio--1x1-ns { padding-bottom: 100%; } 69 | .aspect-ratio--object-ns { 70 | position: absolute; 71 | top: 0; 72 | right: 0; 73 | bottom: 0; 74 | left: 0; 75 | width: 100%; 76 | height: 100%; 77 | z-index: 100; 78 | } 79 | } 80 | 81 | @media (--breakpoint-medium){ 82 | .aspect-ratio-m { 83 | height: 0; 84 | position: relative; 85 | } 86 | .aspect-ratio--16x9-m { padding-bottom: 56.25%; } 87 | .aspect-ratio--9x16-m { padding-bottom: 177.77%; } 88 | .aspect-ratio--4x3-m { padding-bottom: 75%; } 89 | .aspect-ratio--3x4-m { padding-bottom: 133.33%; } 90 | .aspect-ratio--6x4-m { padding-bottom: 66.6%; } 91 | .aspect-ratio--4x6-m { padding-bottom: 150%; } 92 | .aspect-ratio--8x5-m { padding-bottom: 62.5%; } 93 | .aspect-ratio--5x8-m { padding-bottom: 160%; } 94 | .aspect-ratio--7x5-m { padding-bottom: 71.42%; } 95 | .aspect-ratio--5x7-m { padding-bottom: 140%; } 96 | .aspect-ratio--1x1-m { padding-bottom: 100%; } 97 | .aspect-ratio--object-m { 98 | position: absolute; 99 | top: 0; 100 | right: 0; 101 | bottom: 0; 102 | left: 0; 103 | width: 100%; 104 | height: 100%; 105 | z-index: 100; 106 | } 107 | } 108 | 109 | @media (--breakpoint-large){ 110 | .aspect-ratio-l { 111 | height: 0; 112 | position: relative; 113 | } 114 | .aspect-ratio--16x9-l { padding-bottom: 56.25%; } 115 | .aspect-ratio--9x16-l { padding-bottom: 177.77%; } 116 | .aspect-ratio--4x3-l { padding-bottom: 75%; } 117 | .aspect-ratio--3x4-l { padding-bottom: 133.33%; } 118 | .aspect-ratio--6x4-l { padding-bottom: 66.6%; } 119 | .aspect-ratio--4x6-l { padding-bottom: 150%; } 120 | .aspect-ratio--8x5-l { padding-bottom: 62.5%; } 121 | .aspect-ratio--5x8-l { padding-bottom: 160%; } 122 | .aspect-ratio--7x5-l { padding-bottom: 71.42%; } 123 | .aspect-ratio--5x7-l { padding-bottom: 140%; } 124 | .aspect-ratio--1x1-l { padding-bottom: 100%; } 125 | .aspect-ratio--object-l { 126 | position: absolute; 127 | top: 0; 128 | right: 0; 129 | bottom: 0; 130 | left: 0; 131 | width: 100%; 132 | height: 100%; 133 | z-index: 100; 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_background-position.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BACKGROUND POSITION 4 | 5 | Base: 6 | bg = background 7 | 8 | Modifiers: 9 | -center = center center 10 | -top = top center 11 | -right = center right 12 | -bottom = bottom center 13 | -left = center left 14 | 15 | Media Query Extensions: 16 | -ns = not-small 17 | -m = medium 18 | -l = large 19 | 20 | */ 21 | 22 | .bg-center { 23 | background-repeat: no-repeat; 24 | background-position: center center; 25 | } 26 | 27 | .bg-top { 28 | background-repeat: no-repeat; 29 | background-position: top center; 30 | } 31 | 32 | .bg-right { 33 | background-repeat: no-repeat; 34 | background-position: center right; 35 | } 36 | 37 | .bg-bottom { 38 | background-repeat: no-repeat; 39 | background-position: bottom center; 40 | } 41 | 42 | .bg-left { 43 | background-repeat: no-repeat; 44 | background-position: center left; 45 | } 46 | 47 | @media (--breakpoint-not-small) { 48 | .bg-center-ns { 49 | background-repeat: no-repeat; 50 | background-position: center center; 51 | } 52 | 53 | .bg-top-ns { 54 | background-repeat: no-repeat; 55 | background-position: top center; 56 | } 57 | 58 | .bg-right-ns { 59 | background-repeat: no-repeat; 60 | background-position: center right; 61 | } 62 | 63 | .bg-bottom-ns { 64 | background-repeat: no-repeat; 65 | background-position: bottom center; 66 | } 67 | 68 | .bg-left-ns { 69 | background-repeat: no-repeat; 70 | background-position: center left; 71 | } 72 | } 73 | 74 | @media (--breakpoint-medium) { 75 | .bg-center-m { 76 | background-repeat: no-repeat; 77 | background-position: center center; 78 | } 79 | 80 | .bg-top-m { 81 | background-repeat: no-repeat; 82 | background-position: top center; 83 | } 84 | 85 | .bg-right-m { 86 | background-repeat: no-repeat; 87 | background-position: center right; 88 | } 89 | 90 | .bg-bottom-m { 91 | background-repeat: no-repeat; 92 | background-position: bottom center; 93 | } 94 | 95 | .bg-left-m { 96 | background-repeat: no-repeat; 97 | background-position: center left; 98 | } 99 | } 100 | 101 | @media (--breakpoint-large) { 102 | .bg-center-l { 103 | background-repeat: no-repeat; 104 | background-position: center center; 105 | } 106 | 107 | .bg-top-l { 108 | background-repeat: no-repeat; 109 | background-position: top center; 110 | } 111 | 112 | .bg-right-l { 113 | background-repeat: no-repeat; 114 | background-position: center right; 115 | } 116 | 117 | .bg-bottom-l { 118 | background-repeat: no-repeat; 119 | background-position: bottom center; 120 | } 121 | 122 | .bg-left-l { 123 | background-repeat: no-repeat; 124 | background-position: center left; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_background-size.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BACKGROUND SIZE 4 | Docs: http://tachyons.io/docs/themes/background-size/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | /* 14 | Often used in combination with background image set as an inline style 15 | on an html element. 16 | */ 17 | 18 | .cover { background-size: cover!important; } 19 | .contain { background-size: contain!important; } 20 | 21 | @media (--breakpoint-not-small) { 22 | .cover-ns { background-size: cover!important; } 23 | .contain-ns { background-size: contain!important; } 24 | } 25 | 26 | @media (--breakpoint-medium) { 27 | .cover-m { background-size: cover!important; } 28 | .contain-m { background-size: contain!important; } 29 | } 30 | 31 | @media (--breakpoint-large) { 32 | .cover-l { background-size: cover!important; } 33 | .contain-l { background-size: contain!important; } 34 | } 35 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_border-colors.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER COLORS 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | Border colors can be used to extend the base 7 | border classes ba,bt,bb,br,bl found in the _borders.css file. 8 | 9 | The base border class by default will set the color of the border 10 | to that of the current text color. These classes are for the cases 11 | where you desire for the text and border colors to be different. 12 | 13 | Base: 14 | b = border 15 | 16 | Modifiers: 17 | --color-name = each color variable name is also a border color name 18 | 19 | */ 20 | 21 | .b--black { border-color: var(--black); } 22 | .b--near-black { border-color: var(--near-black); } 23 | .b--dark-gray { border-color: var(--dark-gray); } 24 | .b--mid-gray { border-color: var(--mid-gray); } 25 | .b--gray { border-color: var(--gray); } 26 | .b--silver { border-color: var(--silver); } 27 | .b--light-silver { border-color: var(--light-silver); } 28 | .b--moon-gray { border-color: var(--moon-gray); } 29 | .b--light-gray { border-color: var(--light-gray); } 30 | .b--near-white { border-color: var(--near-white); } 31 | .b--white { border-color: var(--white); } 32 | 33 | .b--white-90 { border-color: var(--white-90); } 34 | .b--white-80 { border-color: var(--white-80); } 35 | .b--white-70 { border-color: var(--white-70); } 36 | .b--white-60 { border-color: var(--white-60); } 37 | .b--white-50 { border-color: var(--white-50); } 38 | .b--white-40 { border-color: var(--white-40); } 39 | .b--white-30 { border-color: var(--white-30); } 40 | .b--white-20 { border-color: var(--white-20); } 41 | .b--white-10 { border-color: var(--white-10); } 42 | .b--white-05 { border-color: var(--white-05); } 43 | .b--white-025 { border-color: var(--white-025); } 44 | .b--white-0125 { border-color: var(--white-0125); } 45 | 46 | .b--black-90 { border-color: var(--black-90); } 47 | .b--black-80 { border-color: var(--black-80); } 48 | .b--black-70 { border-color: var(--black-70); } 49 | .b--black-60 { border-color: var(--black-60); } 50 | .b--black-50 { border-color: var(--black-50); } 51 | .b--black-40 { border-color: var(--black-40); } 52 | .b--black-30 { border-color: var(--black-30); } 53 | .b--black-20 { border-color: var(--black-20); } 54 | .b--black-10 { border-color: var(--black-10); } 55 | .b--black-05 { border-color: var(--black-05); } 56 | .b--black-025 { border-color: var(--black-025); } 57 | .b--black-0125 { border-color: var(--black-0125); } 58 | 59 | .b--dark-red { border-color: var(--dark-red); } 60 | .b--red { border-color: var(--red); } 61 | .b--light-red { border-color: var(--light-red); } 62 | .b--orange { border-color: var(--orange); } 63 | .b--gold { border-color: var(--gold); } 64 | .b--yellow { border-color: var(--yellow); } 65 | .b--light-yellow { border-color: var(--light-yellow); } 66 | .b--purple { border-color: var(--purple); } 67 | .b--light-purple { border-color: var(--light-purple); } 68 | .b--dark-pink { border-color: var(--dark-pink); } 69 | .b--hot-pink { border-color: var(--hot-pink); } 70 | .b--pink { border-color: var(--pink); } 71 | .b--light-pink { border-color: var(--light-pink); } 72 | .b--dark-green { border-color: var(--dark-green); } 73 | .b--green { border-color: var(--green); } 74 | .b--light-green { border-color: var(--light-green); } 75 | .b--navy { border-color: var(--navy); } 76 | .b--dark-blue { border-color: var(--dark-blue); } 77 | .b--blue { border-color: var(--blue); } 78 | .b--light-blue { border-color: var(--light-blue); } 79 | .b--lightest-blue { border-color: var(--lightest-blue); } 80 | .b--washed-blue { border-color: var(--washed-blue); } 81 | .b--washed-green { border-color: var(--washed-green); } 82 | .b--washed-yellow { border-color: var(--washed-yellow); } 83 | .b--washed-red { border-color: var(--washed-red); } 84 | 85 | .b--transparent { border-color: var(--transparent); } 86 | .b--inherit { border-color: inherit; } 87 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_border-radius.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER RADIUS 4 | Docs: http://tachyons.io/docs/themes/border-radius/ 5 | 6 | Base: 7 | br = border-radius 8 | 9 | Modifiers: 10 | 0 = 0/none 11 | 1 = 1st step in scale 12 | 2 = 2nd step in scale 13 | 3 = 3rd step in scale 14 | 4 = 4th step in scale 15 | 16 | Literal values: 17 | -100 = 100% 18 | -pill = 9999px 19 | 20 | Media Query Extensions: 21 | -ns = not-small 22 | -m = medium 23 | -l = large 24 | 25 | */ 26 | 27 | .br0 { border-radius: 0; } 28 | .br1 { border-radius: .125rem; } 29 | .br2 { border-radius: .25rem; } 30 | .br3 { border-radius: .5rem; } 31 | .br4 { border-radius: 1rem; } 32 | .br-100 { border-radius: 100%; } 33 | .br-pill { border-radius: 9999px; } 34 | .br--bottom { 35 | border-top-left-radius: 0; 36 | border-top-right-radius: 0; 37 | } 38 | .br--top { 39 | border-bottom-left-radius: 0; 40 | border-bottom-right-radius: 0; 41 | } 42 | .br--right { 43 | border-top-left-radius: 0; 44 | border-bottom-left-radius: 0; 45 | } 46 | .br--left { 47 | border-top-right-radius: 0; 48 | border-bottom-right-radius: 0; 49 | } 50 | 51 | @media (--breakpoint-not-small) { 52 | .br0-ns { border-radius: 0; } 53 | .br1-ns { border-radius: .125rem; } 54 | .br2-ns { border-radius: .25rem; } 55 | .br3-ns { border-radius: .5rem; } 56 | .br4-ns { border-radius: 1rem; } 57 | .br-100-ns { border-radius: 100%; } 58 | .br-pill-ns { border-radius: 9999px; } 59 | .br--bottom-ns { 60 | border-top-left-radius: 0; 61 | border-top-right-radius: 0; 62 | } 63 | .br--top-ns { 64 | border-bottom-left-radius: 0; 65 | border-bottom-right-radius: 0; 66 | } 67 | .br--right-ns { 68 | border-top-left-radius: 0; 69 | border-bottom-left-radius: 0; 70 | } 71 | .br--left-ns { 72 | border-top-right-radius: 0; 73 | border-bottom-right-radius: 0; 74 | } 75 | } 76 | 77 | @media (--breakpoint-medium) { 78 | .br0-m { border-radius: 0; } 79 | .br1-m { border-radius: .125rem; } 80 | .br2-m { border-radius: .25rem; } 81 | .br3-m { border-radius: .5rem; } 82 | .br4-m { border-radius: 1rem; } 83 | .br-100-m { border-radius: 100%; } 84 | .br-pill-m { border-radius: 9999px; } 85 | .br--bottom-m { 86 | border-top-left-radius: 0; 87 | border-top-right-radius: 0; 88 | } 89 | .br--top-m { 90 | border-bottom-left-radius: 0; 91 | border-bottom-right-radius: 0; 92 | } 93 | .br--right-m { 94 | border-top-left-radius: 0; 95 | border-bottom-left-radius: 0; 96 | } 97 | .br--left-m { 98 | border-top-right-radius: 0; 99 | border-bottom-right-radius: 0; 100 | } 101 | } 102 | 103 | @media (--breakpoint-large) { 104 | .br0-l { border-radius: 0; } 105 | .br1-l { border-radius: .125rem; } 106 | .br2-l { border-radius: .25rem; } 107 | .br3-l { border-radius: .5rem; } 108 | .br4-l { border-radius: 1rem; } 109 | .br-100-l { border-radius: 100%; } 110 | .br-pill-l { border-radius: 9999px; } 111 | .br--bottom-l { 112 | border-top-left-radius: 0; 113 | border-top-right-radius: 0; 114 | } 115 | .br--top-l { 116 | border-bottom-left-radius: 0; 117 | border-bottom-right-radius: 0; 118 | } 119 | .br--right-l { 120 | border-top-left-radius: 0; 121 | border-bottom-left-radius: 0; 122 | } 123 | .br--left-l { 124 | border-top-right-radius: 0; 125 | border-bottom-right-radius: 0; 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_border-style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER STYLES 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | Depends on base border module in _borders.css 7 | 8 | Base: 9 | b = border-style 10 | 11 | Modifiers: 12 | --none = none 13 | --dotted = dotted 14 | --dashed = dashed 15 | --solid = solid 16 | 17 | Media Query Extensions: 18 | -ns = not-small 19 | -m = medium 20 | -l = large 21 | 22 | */ 23 | 24 | .b--dotted { border-style: dotted; } 25 | .b--dashed { border-style: dashed; } 26 | .b--solid { border-style: solid; } 27 | .b--none { border-style: none; } 28 | 29 | @media (--breakpoint-not-small) { 30 | .b--dotted-ns { border-style: dotted; } 31 | .b--dashed-ns { border-style: dashed; } 32 | .b--solid-ns { border-style: solid; } 33 | .b--none-ns { border-style: none; } 34 | } 35 | 36 | @media (--breakpoint-medium) { 37 | .b--dotted-m { border-style: dotted; } 38 | .b--dashed-m { border-style: dashed; } 39 | .b--solid-m { border-style: solid; } 40 | .b--none-m { border-style: none; } 41 | } 42 | 43 | @media (--breakpoint-large) { 44 | .b--dotted-l { border-style: dotted; } 45 | .b--dashed-l { border-style: dashed; } 46 | .b--solid-l { border-style: solid; } 47 | .b--none-l { border-style: none; } 48 | } 49 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_border-widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER WIDTHS 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | Base: 7 | bw = border-width 8 | 9 | Modifiers: 10 | 0 = 0 width border 11 | 1 = 1st step in border-width scale 12 | 2 = 2nd step in border-width scale 13 | 3 = 3rd step in border-width scale 14 | 4 = 4th step in border-width scale 15 | 5 = 5th step in border-width scale 16 | 17 | Media Query Extensions: 18 | -ns = not-small 19 | -m = medium 20 | -l = large 21 | 22 | */ 23 | 24 | .bw0 { border-width: 0; } 25 | .bw1 { border-width: .125rem; } 26 | .bw2 { border-width: .25rem; } 27 | .bw3 { border-width: .5rem; } 28 | .bw4 { border-width: 1rem; } 29 | .bw5 { border-width: 2rem; } 30 | 31 | /* Resets */ 32 | .bt-0 { border-top-width: 0; } 33 | .br-0 { border-right-width: 0; } 34 | .bb-0 { border-bottom-width: 0; } 35 | .bl-0 { border-left-width: 0; } 36 | 37 | @media (--breakpoint-not-small) { 38 | .bw0-ns { border-width: 0; } 39 | .bw1-ns { border-width: .125rem; } 40 | .bw2-ns { border-width: .25rem; } 41 | .bw3-ns { border-width: .5rem; } 42 | .bw4-ns { border-width: 1rem; } 43 | .bw5-ns { border-width: 2rem; } 44 | .bt-0-ns { border-top-width: 0; } 45 | .br-0-ns { border-right-width: 0; } 46 | .bb-0-ns { border-bottom-width: 0; } 47 | .bl-0-ns { border-left-width: 0; } 48 | } 49 | 50 | @media (--breakpoint-medium) { 51 | .bw0-m { border-width: 0; } 52 | .bw1-m { border-width: .125rem; } 53 | .bw2-m { border-width: .25rem; } 54 | .bw3-m { border-width: .5rem; } 55 | .bw4-m { border-width: 1rem; } 56 | .bw5-m { border-width: 2rem; } 57 | .bt-0-m { border-top-width: 0; } 58 | .br-0-m { border-right-width: 0; } 59 | .bb-0-m { border-bottom-width: 0; } 60 | .bl-0-m { border-left-width: 0; } 61 | } 62 | 63 | @media (--breakpoint-large) { 64 | .bw0-l { border-width: 0; } 65 | .bw1-l { border-width: .125rem; } 66 | .bw2-l { border-width: .25rem; } 67 | .bw3-l { border-width: .5rem; } 68 | .bw4-l { border-width: 1rem; } 69 | .bw5-l { border-width: 2rem; } 70 | .bt-0-l { border-top-width: 0; } 71 | .br-0-l { border-right-width: 0; } 72 | .bb-0-l { border-bottom-width: 0; } 73 | .bl-0-l { border-left-width: 0; } 74 | } 75 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_borders.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDERS 4 | Docs: http://tachyons.io/docs/themes/borders/ 5 | 6 | Base: 7 | b = border 8 | 9 | Modifiers: 10 | a = all 11 | t = top 12 | r = right 13 | b = bottom 14 | l = left 15 | n = none 16 | 17 | Media Query Extensions: 18 | -ns = not-small 19 | -m = medium 20 | -l = large 21 | 22 | */ 23 | 24 | .ba { border-style: solid; border-width: 1px; } 25 | .bt { border-top-style: solid; border-top-width: 1px; } 26 | .br { border-right-style: solid; border-right-width: 1px; } 27 | .bb { border-bottom-style: solid; border-bottom-width: 1px; } 28 | .bl { border-left-style: solid; border-left-width: 1px; } 29 | .bn { border-style: none; border-width: 0; } 30 | 31 | 32 | @media (--breakpoint-not-small) { 33 | .ba-ns { border-style: solid; border-width: 1px; } 34 | .bt-ns { border-top-style: solid; border-top-width: 1px; } 35 | .br-ns { border-right-style: solid; border-right-width: 1px; } 36 | .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } 37 | .bl-ns { border-left-style: solid; border-left-width: 1px; } 38 | .bn-ns { border-style: none; border-width: 0; } 39 | } 40 | 41 | @media (--breakpoint-medium) { 42 | .ba-m { border-style: solid; border-width: 1px; } 43 | .bt-m { border-top-style: solid; border-top-width: 1px; } 44 | .br-m { border-right-style: solid; border-right-width: 1px; } 45 | .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } 46 | .bl-m { border-left-style: solid; border-left-width: 1px; } 47 | .bn-m { border-style: none; border-width: 0; } 48 | } 49 | 50 | @media (--breakpoint-large) { 51 | .ba-l { border-style: solid; border-width: 1px; } 52 | .bt-l { border-top-style: solid; border-top-width: 1px; } 53 | .br-l { border-right-style: solid; border-right-width: 1px; } 54 | .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } 55 | .bl-l { border-left-style: solid; border-left-width: 1px; } 56 | .bn-l { border-style: none; border-width: 0; } 57 | } 58 | 59 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_box-shadow.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BOX-SHADOW 4 | Docs: http://tachyons.io/docs/themes/box-shadow/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | .shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } 14 | .shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } 15 | .shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } 16 | .shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } 17 | .shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } 18 | 19 | @media (--breakpoint-not-small) { 20 | .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } 21 | .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } 22 | .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } 23 | .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } 24 | .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } 25 | } 26 | 27 | @media (--breakpoint-medium) { 28 | .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } 29 | .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } 30 | .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } 31 | .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } 32 | .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } 33 | } 34 | 35 | @media (--breakpoint-large) { 36 | .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } 37 | .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } 38 | .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } 39 | .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } 40 | .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } 41 | } 42 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_box-sizing.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BOX SIZING 4 | 5 | */ 6 | 7 | html, 8 | body, 9 | div, 10 | article, 11 | aside, 12 | section, 13 | main, 14 | nav, 15 | footer, 16 | header, 17 | form, 18 | fieldset, 19 | legend, 20 | pre, 21 | code, 22 | a, 23 | h1,h2,h3,h4,h5,h6, 24 | p, 25 | ul, 26 | ol, 27 | li, 28 | dl, 29 | dt, 30 | dd, 31 | blockquote, 32 | figcaption, 33 | figure, 34 | textarea, 35 | table, 36 | td, 37 | th, 38 | tr, 39 | input[type="email"], 40 | input[type="number"], 41 | input[type="password"], 42 | input[type="tel"], 43 | input[type="text"], 44 | input[type="url"], 45 | .border-box { 46 | box-sizing: border-box; 47 | } 48 | 49 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_clears.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CLEARFIX 4 | http://tachyons.io/docs/layout/clearfix/ 5 | 6 | */ 7 | 8 | /* Nicolas Gallaghers Clearfix solution 9 | Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ 10 | 11 | .cf:before, 12 | .cf:after { content: " "; display: table; } 13 | .cf:after { clear: both; } 14 | .cf { *zoom: 1; } 15 | 16 | .cl { clear: left; } 17 | .cr { clear: right; } 18 | .cb { clear: both; } 19 | .cn { clear: none; } 20 | 21 | @media (--breakpoint-not-small) { 22 | .cl-ns { clear: left; } 23 | .cr-ns { clear: right; } 24 | .cb-ns { clear: both; } 25 | .cn-ns { clear: none; } 26 | } 27 | 28 | @media (--breakpoint-medium) { 29 | .cl-m { clear: left; } 30 | .cr-m { clear: right; } 31 | .cb-m { clear: both; } 32 | .cn-m { clear: none; } 33 | } 34 | 35 | @media (--breakpoint-large) { 36 | .cl-l { clear: left; } 37 | .cr-l { clear: right; } 38 | .cb-l { clear: both; } 39 | .cn-l { clear: none; } 40 | } 41 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_code.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CODE 4 | 5 | */ 6 | 7 | .pre { 8 | overflow-x: auto; 9 | overflow-y: hidden; 10 | overflow: scroll; 11 | } 12 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_colors.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Tachyons 4 | COLOR VARIABLES 5 | 6 | Grayscale 7 | - Solids 8 | - Transparencies 9 | Colors 10 | 11 | */ 12 | 13 | :root { 14 | --black: #000; 15 | --near-black: #111; 16 | --dark-gray:#333; 17 | --mid-gray:#555; 18 | --gray: #777; 19 | --silver: #999; 20 | --light-silver: #aaa; 21 | --moon-gray: #ccc; 22 | --light-gray: #eee; 23 | --near-white: #f4f4f4; 24 | --white: #fff; 25 | 26 | --transparent:transparent; 27 | 28 | --black-90: rgba(0,0,0,.9); 29 | --black-80: rgba(0,0,0,.8); 30 | --black-70: rgba(0,0,0,.7); 31 | --black-60: rgba(0,0,0,.6); 32 | --black-50: rgba(0,0,0,.5); 33 | --black-40: rgba(0,0,0,.4); 34 | --black-30: rgba(0,0,0,.3); 35 | --black-20: rgba(0,0,0,.2); 36 | --black-10: rgba(0,0,0,.1); 37 | --black-05: rgba(0,0,0,.05); 38 | --black-025: rgba(0,0,0,.025); 39 | --black-0125: rgba(0,0,0,.0125); 40 | 41 | --white-90: rgba(255,255,255,.9); 42 | --white-80: rgba(255,255,255,.8); 43 | --white-70: rgba(255,255,255,.7); 44 | --white-60: rgba(255,255,255,.6); 45 | --white-50: rgba(255,255,255,.5); 46 | --white-40: rgba(255,255,255,.4); 47 | --white-30: rgba(255,255,255,.3); 48 | --white-20: rgba(255,255,255,.2); 49 | --white-10: rgba(255,255,255,.1); 50 | --white-05: rgba(255,255,255,.05); 51 | --white-025: rgba(255,255,255,.025); 52 | --white-0125: rgba(255,255,255,.0125); 53 | 54 | --dark-red: #e7040f; 55 | --red: #ff4136; 56 | --light-red: #ff725c; 57 | --orange: #ff6300; 58 | --gold: #ffb700; 59 | --yellow: #ffd700; 60 | --light-yellow: #fbf1a9; 61 | --purple: #5e2ca5; 62 | --light-purple: #a463f2; 63 | --dark-pink: #d5008f; 64 | --hot-pink: #ff41b4; 65 | --pink: #ff80cc; 66 | --light-pink: #ffa3d7; 67 | --dark-green: #137752; 68 | --green: #19a974; 69 | --light-green: #9eebcf; 70 | --navy: #001b44; 71 | --dark-blue: #00449e; 72 | --blue: #357edd; 73 | --light-blue: #96ccff; 74 | --lightest-blue: #cdecff; 75 | --washed-blue: #f6fffe; 76 | --washed-green: #e8fdf5; 77 | --washed-yellow: #fffceb; 78 | --washed-red: #ffdfdf; 79 | 80 | --blossom: #F1D0C7; 81 | --cherry: #d65c5c; 82 | --tan-white: #FBF9F9; 83 | 84 | } 85 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_coordinates.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | COORDINATES 4 | Docs: http://tachyons.io/docs/layout/position/ 5 | 6 | Use in combination with the position module. 7 | 8 | Base: 9 | top 10 | bottom 11 | right 12 | left 13 | 14 | Modifiers: 15 | -0 = literal value 0 16 | -1 = literal value 1 17 | -2 = literal value 2 18 | --1 = literal value -1 19 | --2 = literal value -2 20 | 21 | Media Query Extensions: 22 | -ns = not-small 23 | -m = medium 24 | -l = large 25 | 26 | */ 27 | 28 | .top-0 { top: 0; } 29 | .right-0 { right: 0; } 30 | .bottom-0 { bottom: 0; } 31 | .left-0 { left: 0; } 32 | 33 | .top-1 { top: 1rem; } 34 | .right-1 { right: 1rem; } 35 | .bottom-1 { bottom: 1rem; } 36 | .left-1 { left: 1rem; } 37 | 38 | .top-2 { top: 2rem; } 39 | .right-2 { right: 2rem; } 40 | .bottom-2 { bottom: 2rem; } 41 | .left-2 { left: 2rem; } 42 | 43 | .top--1 { top: -1rem; } 44 | .right--1 { right: -1rem; } 45 | .bottom--1 { bottom: -1rem; } 46 | .left--1 { left: -1rem; } 47 | 48 | .top--2 { top: -2rem; } 49 | .right--2 { right: -2rem; } 50 | .bottom--2 { bottom: -2rem; } 51 | .left--2 { left: -2rem; } 52 | 53 | 54 | .absolute--fill { 55 | top: 0; 56 | right: 0; 57 | bottom: 0; 58 | left: 0; 59 | } 60 | 61 | @media (--breakpoint-not-small) { 62 | .top-0-ns { top: 0; } 63 | .left-0-ns { left: 0; } 64 | .right-0-ns { right: 0; } 65 | .bottom-0-ns { bottom: 0; } 66 | .top-1-ns { top: 1rem; } 67 | .left-1-ns { left: 1rem; } 68 | .right-1-ns { right: 1rem; } 69 | .bottom-1-ns { bottom: 1rem; } 70 | .top-2-ns { top: 2rem; } 71 | .left-2-ns { left: 2rem; } 72 | .right-2-ns { right: 2rem; } 73 | .bottom-2-ns { bottom: 2rem; } 74 | .top--1-ns { top: -1rem; } 75 | .right--1-ns { right: -1rem; } 76 | .bottom--1-ns { bottom: -1rem; } 77 | .left--1-ns { left: -1rem; } 78 | .top--2-ns { top: -2rem; } 79 | .right--2-ns { right: -2rem; } 80 | .bottom--2-ns { bottom: -2rem; } 81 | .left--2-ns { left: -2rem; } 82 | .absolute--fill-ns { 83 | top: 0; 84 | right: 0; 85 | bottom: 0; 86 | left: 0; 87 | } 88 | } 89 | 90 | @media (--breakpoint-medium) { 91 | .top-0-m { top: 0; } 92 | .left-0-m { left: 0; } 93 | .right-0-m { right: 0; } 94 | .bottom-0-m { bottom: 0; } 95 | .top-1-m { top: 1rem; } 96 | .left-1-m { left: 1rem; } 97 | .right-1-m { right: 1rem; } 98 | .bottom-1-m { bottom: 1rem; } 99 | .top-2-m { top: 2rem; } 100 | .left-2-m { left: 2rem; } 101 | .right-2-m { right: 2rem; } 102 | .bottom-2-m { bottom: 2rem; } 103 | .top--1-m { top: -1rem; } 104 | .right--1-m { right: -1rem; } 105 | .bottom--1-m { bottom: -1rem; } 106 | .left--1-m { left: -1rem; } 107 | .top--2-m { top: -2rem; } 108 | .right--2-m { right: -2rem; } 109 | .bottom--2-m { bottom: -2rem; } 110 | .left--2-m { left: -2rem; } 111 | .absolute--fill-m { 112 | top: 0; 113 | right: 0; 114 | bottom: 0; 115 | left: 0; 116 | } 117 | } 118 | 119 | @media (--breakpoint-large) { 120 | .top-0-l { top: 0; } 121 | .left-0-l { left: 0; } 122 | .right-0-l { right: 0; } 123 | .bottom-0-l { bottom: 0; } 124 | .top-1-l { top: 1rem; } 125 | .left-1-l { left: 1rem; } 126 | .right-1-l { right: 1rem; } 127 | .bottom-1-l { bottom: 1rem; } 128 | .top-2-l { top: 2rem; } 129 | .left-2-l { left: 2rem; } 130 | .right-2-l { right: 2rem; } 131 | .bottom-2-l { bottom: 2rem; } 132 | .top--1-l { top: -1rem; } 133 | .right--1-l { right: -1rem; } 134 | .bottom--1-l { bottom: -1rem; } 135 | .left--1-l { left: -1rem; } 136 | .top--2-l { top: -2rem; } 137 | .right--2-l { right: -2rem; } 138 | .bottom--2-l { bottom: -2rem; } 139 | .left--2-l { left: -2rem; } 140 | .absolute--fill-l { 141 | top: 0; 142 | right: 0; 143 | bottom: 0; 144 | left: 0; 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_debug-children.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DEBUG CHILDREN 4 | Docs: http://tachyons.io/docs/debug/ 5 | 6 | Just add the debug class to any element to see outlines on its 7 | children. 8 | 9 | */ 10 | 11 | .debug * { outline: 1px solid gold; } 12 | .debug-white * { outline: 1px solid white; } 13 | .debug-black * { outline: 1px solid black; } 14 | 15 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_debug-grid.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DEBUG GRID 4 | http://tachyons.io/docs/debug-grid/ 5 | 6 | Can be useful for debugging layout issues 7 | or helping to make sure things line up perfectly. 8 | Just tack one of these classes onto a parent element. 9 | 10 | */ 11 | 12 | .debug-grid { 13 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left; 14 | } 15 | 16 | .debug-grid-16 { 17 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left; 18 | } 19 | 20 | .debug-grid-8-solid { 21 | background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left; 22 | } 23 | 24 | .debug-grid-16-solid { 25 | background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left; 26 | } 27 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_debug.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DEBUG (PESTICIDE) 4 | Docs: http://tachyons.io/docs/debug/ 5 | 6 | This is a partial you have to manually include in your 7 | build file. It places a different colored outline on 8 | each element which can help you debug layout issues. 9 | There is also a handy chrome extension that can 10 | be found at http://pesticide.io 11 | 12 | */ 13 | 14 | body { outline: 1px solid #2980B9!important; } 15 | article { outline: 1px solid #3498DB!important; } 16 | nav { outline: 1px solid #0088C3!important; } 17 | aside { outline: 1px solid #33A0CE!important; } 18 | section { outline: 1px solid #66B8DA!important; } 19 | header { outline: 1px solid #99CFE7!important; } 20 | footer { outline: 1px solid #CCE7F3!important; } 21 | h1 { outline: 1px solid #162544!important; } 22 | h2 { outline: 1px solid #314E6E!important; } 23 | h3 { outline: 1px solid #3E5E85!important; } 24 | h4 { outline: 1px solid #449BAF!important; } 25 | h5 { outline: 1px solid #C7D1CB!important; } 26 | h6 { outline: 1px solid #4371D0!important; } 27 | main { outline: 1px solid #2F4F90!important; } 28 | address { outline: 1px solid #1A2C51!important; } 29 | div { outline: 1px solid #036CDB!important; } 30 | 31 | 32 | p { outline: 1px solid #AC050B!important; } 33 | hr { outline: 1px solid #FF063F!important; } 34 | pre { outline: 1px solid #850440!important; } 35 | blockquote { outline: 1px solid #F1B8E7!important; } 36 | ol { outline: 1px solid #FF050C!important; } 37 | ul { outline: 1px solid #D90416!important; } 38 | li { outline: 1px solid #D90416!important; } 39 | dl { outline: 1px solid #FD3427!important; } 40 | dt { outline: 1px solid #FF0043!important; } 41 | dd { outline: 1px solid #E80174!important; } 42 | figure { outline: 1px solid #FF00BB!important; } 43 | figcaption { outline: 1px solid #BF0032!important; } 44 | 45 | 46 | 47 | table { outline: 1px solid #00CC99!important; } 48 | caption { outline: 1px solid #37FFC4!important; } 49 | thead { outline: 1px solid #98DACA!important; } 50 | tbody { outline: 1px solid #64A7A0!important; } 51 | tfoot { outline: 1px solid #22746B!important; } 52 | tr { outline: 1px solid #86C0B2!important; } 53 | th { outline: 1px solid #A1E7D6!important; } 54 | td { outline: 1px solid #3F5A54!important; } 55 | col { outline: 1px solid #6C9A8F!important; } 56 | colgroup { outline: 1px solid #6C9A9D!important; } 57 | 58 | 59 | button { outline: 1px solid #DA8301!important; } 60 | datalist { outline: 1px solid #C06000!important; } 61 | fieldset { outline: 1px solid #D95100!important; } 62 | form { outline: 1px solid #D23600!important; } 63 | input { outline: 1px solid #FCA600!important; } 64 | keygen { outline: 1px solid #B31E00!important; } 65 | label { outline: 1px solid #EE8900!important; } 66 | legend { outline: 1px solid #DE6D00!important; } 67 | meter { outline: 1px solid #E8630C!important; } 68 | optgroup { outline: 1px solid #B33600!important; } 69 | option { outline: 1px solid #FF8A00!important; } 70 | output { outline: 1px solid #FF9619!important; } 71 | progress { outline: 1px solid #E57C00!important; } 72 | select { outline: 1px solid #E26E0F!important; } 73 | textarea { outline: 1px solid #CC5400!important; } 74 | 75 | 76 | 77 | details { outline: 1px solid #33848F!important; } 78 | summary { outline: 1px solid #60A1A6!important; } 79 | command { outline: 1px solid #438DA1!important; } 80 | menu { outline: 1px solid #449DA6!important; } 81 | 82 | 83 | 84 | del { outline: 1px solid #BF0000!important; } 85 | ins { outline: 1px solid #400000!important; } 86 | 87 | 88 | 89 | img { outline: 1px solid #22746B!important; } 90 | iframe { outline: 1px solid #64A7A0!important; } 91 | embed { outline: 1px solid #98DACA!important; } 92 | object { outline: 1px solid #00CC99!important; } 93 | param { outline: 1px solid #37FFC4!important; } 94 | video { outline: 1px solid #6EE866!important; } 95 | audio { outline: 1px solid #027353!important; } 96 | source { outline: 1px solid #012426!important; } 97 | canvas { outline: 1px solid #A2F570!important; } 98 | track { outline: 1px solid #59A600!important; } 99 | map { outline: 1px solid #7BE500!important; } 100 | area { outline: 1px solid #305900!important; } 101 | 102 | 103 | 104 | a { outline: 1px solid #FF62AB!important; } 105 | em { outline: 1px solid #800B41!important; } 106 | strong { outline: 1px solid #FF1583!important; } 107 | i { outline: 1px solid #803156!important; } 108 | b { outline: 1px solid #CC1169!important; } 109 | u { outline: 1px solid #FF0430!important; } 110 | s { outline: 1px solid #F805E3!important; } 111 | small { outline: 1px solid #D107B2!important; } 112 | abbr { outline: 1px solid #4A0263!important; } 113 | q { outline: 1px solid #240018!important; } 114 | cite { outline: 1px solid #64003C!important; } 115 | dfn { outline: 1px solid #B4005A!important; } 116 | sub { outline: 1px solid #DBA0C8!important; } 117 | sup { outline: 1px solid #CC0256!important; } 118 | time { outline: 1px solid #D6606D!important; } 119 | code { outline: 1px solid #E04251!important; } 120 | kbd { outline: 1px solid #5E001F!important; } 121 | samp { outline: 1px solid #9C0033!important; } 122 | var { outline: 1px solid #D90047!important; } 123 | mark { outline: 1px solid #FF0053!important; } 124 | bdi { outline: 1px solid #BF3668!important; } 125 | bdo { outline: 1px solid #6F1400!important; } 126 | ruby { outline: 1px solid #FF7B93!important; } 127 | rt { outline: 1px solid #FF2F54!important; } 128 | rp { outline: 1px solid #803E49!important; } 129 | span { outline: 1px solid #CC2643!important; } 130 | br { outline: 1px solid #DB687D!important; } 131 | wbr { outline: 1px solid #DB175B!important; } 132 | 133 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_display.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISPLAY 4 | Docs: http://tachyons.io/docs/layout/display 5 | 6 | Base: 7 | d = display 8 | 9 | Modifiers: 10 | n = none 11 | b = block 12 | ib = inline-block 13 | it = inline-table 14 | t = table 15 | tc = table-cell 16 | t-row = table-row 17 | t-columm = table-column 18 | t-column-group = table-column-group 19 | 20 | Media Query Extensions: 21 | -ns = not-small 22 | -m = medium 23 | -l = large 24 | 25 | */ 26 | 27 | .dn { display: none; } 28 | .di { display: inline; } 29 | .db { display: block; } 30 | .dib { display: inline-block; } 31 | .dit { display: inline-table; } 32 | .dt { display: table; } 33 | .dtc { display: table-cell; } 34 | .dt-row { display: table-row; } 35 | .dt-row-group { display: table-row-group; } 36 | .dt-column { display: table-column; } 37 | .dt-column-group { display: table-column-group; } 38 | 39 | /* 40 | This will set table to full width and then 41 | all cells will be equal width 42 | */ 43 | .dt--fixed { 44 | table-layout: fixed; 45 | width: 100%; 46 | } 47 | 48 | @media (--breakpoint-not-small) { 49 | .dn-ns { display: none; } 50 | .di-ns { display: inline; } 51 | .db-ns { display: block; } 52 | .dib-ns { display: inline-block; } 53 | .dit-ns { display: inline-table; } 54 | .dt-ns { display: table; } 55 | .dtc-ns { display: table-cell; } 56 | .dt-row-ns { display: table-row; } 57 | .dt-row-group-ns { display: table-row-group; } 58 | .dt-column-ns { display: table-column; } 59 | .dt-column-group-ns { display: table-column-group; } 60 | 61 | .dt--fixed-ns { 62 | table-layout: fixed; 63 | width: 100%; 64 | } 65 | } 66 | 67 | @media (--breakpoint-medium) { 68 | .dn-m { display: none; } 69 | .di-m { display: inline; } 70 | .db-m { display: block; } 71 | .dib-m { display: inline-block; } 72 | .dit-m { display: inline-table; } 73 | .dt-m { display: table; } 74 | .dtc-m { display: table-cell; } 75 | .dt-row-m { display: table-row; } 76 | .dt-row-group-m { display: table-row-group; } 77 | .dt-column-m { display: table-column; } 78 | .dt-column-group-m { display: table-column-group; } 79 | 80 | .dt--fixed-m { 81 | table-layout: fixed; 82 | width: 100%; 83 | } 84 | } 85 | 86 | @media (--breakpoint-large) { 87 | .dn-l { display: none; } 88 | .di-l { display: inline; } 89 | .db-l { display: block; } 90 | .dib-l { display: inline-block; } 91 | .dit-l { display: inline-table; } 92 | .dt-l { display: table; } 93 | .dtc-l { display: table-cell; } 94 | .dt-row-l { display: table-row; } 95 | .dt-row-group-l { display: table-row-group; } 96 | .dt-column-l { display: table-column; } 97 | .dt-column-group-l { display: table-column-group; } 98 | 99 | .dt--fixed-l { 100 | table-layout: fixed; 101 | width: 100%; 102 | } 103 | } 104 | 105 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_flexbox.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FLEXBOX 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | .flex { display: flex; } 13 | .inline-flex { display: inline-flex; } 14 | 15 | /* 1. Fix for Chrome 44 bug. 16 | * https://code.google.com/p/chromium/issues/detail?id=506893 */ 17 | .flex-auto { 18 | flex: 1 1 auto; 19 | min-width: 0; /* 1 */ 20 | min-height: 0; /* 1 */ 21 | } 22 | 23 | .flex-none { flex: none; } 24 | 25 | .flex-column { flex-direction: column; } 26 | .flex-row { flex-direction: row; } 27 | .flex-wrap { flex-wrap: wrap; } 28 | .flex-nowrap { flex-wrap: nowrap; } 29 | .flex-wrap-reverse { flex-wrap: wrap-reverse; } 30 | .flex-column-reverse { flex-direction: column-reverse; } 31 | .flex-row-reverse { flex-direction: row-reverse; } 32 | 33 | .items-start { align-items: flex-start; } 34 | .items-end { align-items: flex-end; } 35 | .items-center { align-items: center; } 36 | .items-baseline { align-items: baseline; } 37 | .items-stretch { align-items: stretch; } 38 | 39 | .self-start { align-self: flex-start; } 40 | .self-end { align-self: flex-end; } 41 | .self-center { align-self: center; } 42 | .self-baseline { align-self: baseline; } 43 | .self-stretch { align-self: stretch; } 44 | 45 | .justify-start { justify-content: flex-start; } 46 | .justify-end { justify-content: flex-end; } 47 | .justify-center { justify-content: center; } 48 | .justify-between { justify-content: space-between; } 49 | .justify-around { justify-content: space-around; } 50 | 51 | .content-start { align-content: flex-start; } 52 | .content-end { align-content: flex-end; } 53 | .content-center { align-content: center; } 54 | .content-between { align-content: space-between; } 55 | .content-around { align-content: space-around; } 56 | .content-stretch { align-content: stretch; } 57 | 58 | .order-0 { order: 0; } 59 | .order-1 { order: 1; } 60 | .order-2 { order: 2; } 61 | .order-3 { order: 3; } 62 | .order-4 { order: 4; } 63 | .order-5 { order: 5; } 64 | .order-6 { order: 6; } 65 | .order-7 { order: 7; } 66 | .order-8 { order: 8; } 67 | .order-last { order: 99999; } 68 | 69 | .flex-grow-0 { flex-grow: 0; } 70 | .flex-grow-1 { flex-grow: 1; } 71 | 72 | .flex-shrink-0 { flex-shrink: 0; } 73 | .flex-shrink-1 { flex-shrink: 1; } 74 | 75 | @media (--breakpoint-not-small) { 76 | .flex-ns { display: flex; } 77 | .inline-flex-ns { display: inline-flex; } 78 | .flex-auto-ns { 79 | flex: 1 1 auto; 80 | min-width: 0; /* 1 */ 81 | min-height: 0; /* 1 */ 82 | } 83 | .flex-none-ns { flex: none; } 84 | .flex-column-ns { flex-direction: column; } 85 | .flex-row-ns { flex-direction: row; } 86 | .flex-wrap-ns { flex-wrap: wrap; } 87 | .flex-nowrap-ns { flex-wrap: nowrap; } 88 | .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; } 89 | .flex-column-reverse-ns { flex-direction: column-reverse; } 90 | .flex-row-reverse-ns { flex-direction: row-reverse; } 91 | .items-start-ns { align-items: flex-start; } 92 | .items-end-ns { align-items: flex-end; } 93 | .items-center-ns { align-items: center; } 94 | .items-baseline-ns { align-items: baseline; } 95 | .items-stretch-ns { align-items: stretch; } 96 | 97 | .self-start-ns { align-self: flex-start; } 98 | .self-end-ns { align-self: flex-end; } 99 | .self-center-ns { align-self: center; } 100 | .self-baseline-ns { align-self: baseline; } 101 | .self-stretch-ns { align-self: stretch; } 102 | 103 | .justify-start-ns { justify-content: flex-start; } 104 | .justify-end-ns { justify-content: flex-end; } 105 | .justify-center-ns { justify-content: center; } 106 | .justify-between-ns { justify-content: space-between; } 107 | .justify-around-ns { justify-content: space-around; } 108 | 109 | .content-start-ns { align-content: flex-start; } 110 | .content-end-ns { align-content: flex-end; } 111 | .content-center-ns { align-content: center; } 112 | .content-between-ns { align-content: space-between; } 113 | .content-around-ns { align-content: space-around; } 114 | .content-stretch-ns { align-content: stretch; } 115 | 116 | .order-0-ns { order: 0; } 117 | .order-1-ns { order: 1; } 118 | .order-2-ns { order: 2; } 119 | .order-3-ns { order: 3; } 120 | .order-4-ns { order: 4; } 121 | .order-5-ns { order: 5; } 122 | .order-6-ns { order: 6; } 123 | .order-7-ns { order: 7; } 124 | .order-8-ns { order: 8; } 125 | .order-last-ns { order: 99999; } 126 | 127 | .flex-grow-0-ns { flex-grow: 0; } 128 | .flex-grow-1-ns { flex-grow: 1; } 129 | 130 | .flex-shrink-0-ns { flex-shrink: 0; } 131 | .flex-shrink-1-ns { flex-shrink: 1; } 132 | } 133 | @media (--breakpoint-medium) { 134 | .flex-m { display: flex; } 135 | .inline-flex-m { display: inline-flex; } 136 | .flex-auto-m { 137 | flex: 1 1 auto; 138 | min-width: 0; /* 1 */ 139 | min-height: 0; /* 1 */ 140 | } 141 | .flex-none-m { flex: none; } 142 | .flex-column-m { flex-direction: column; } 143 | .flex-row-m { flex-direction: row; } 144 | .flex-wrap-m { flex-wrap: wrap; } 145 | .flex-nowrap-m { flex-wrap: nowrap; } 146 | .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } 147 | .flex-column-reverse-m { flex-direction: column-reverse; } 148 | .flex-row-reverse-m { flex-direction: row-reverse; } 149 | .items-start-m { align-items: flex-start; } 150 | .items-end-m { align-items: flex-end; } 151 | .items-center-m { align-items: center; } 152 | .items-baseline-m { align-items: baseline; } 153 | .items-stretch-m { align-items: stretch; } 154 | 155 | .self-start-m { align-self: flex-start; } 156 | .self-end-m { align-self: flex-end; } 157 | .self-center-m { align-self: center; } 158 | .self-baseline-m { align-self: baseline; } 159 | .self-stretch-m { align-self: stretch; } 160 | 161 | .justify-start-m { justify-content: flex-start; } 162 | .justify-end-m { justify-content: flex-end; } 163 | .justify-center-m { justify-content: center; } 164 | .justify-between-m { justify-content: space-between; } 165 | .justify-around-m { justify-content: space-around; } 166 | 167 | .content-start-m { align-content: flex-start; } 168 | .content-end-m { align-content: flex-end; } 169 | .content-center-m { align-content: center; } 170 | .content-between-m { align-content: space-between; } 171 | .content-around-m { align-content: space-around; } 172 | .content-stretch-m { align-content: stretch; } 173 | 174 | .order-0-m { order: 0; } 175 | .order-1-m { order: 1; } 176 | .order-2-m { order: 2; } 177 | .order-3-m { order: 3; } 178 | .order-4-m { order: 4; } 179 | .order-5-m { order: 5; } 180 | .order-6-m { order: 6; } 181 | .order-7-m { order: 7; } 182 | .order-8-m { order: 8; } 183 | .order-last-m { order: 99999; } 184 | 185 | .flex-grow-0-m { flex-grow: 0; } 186 | .flex-grow-1-m { flex-grow: 1; } 187 | 188 | .flex-shrink-0-m { flex-shrink: 0; } 189 | .flex-shrink-1-m { flex-shrink: 1; } 190 | } 191 | 192 | @media (--breakpoint-large) { 193 | .flex-l { display: flex; } 194 | .inline-flex-l { display: inline-flex; } 195 | .flex-auto-l { 196 | flex: 1 1 auto; 197 | min-width: 0; /* 1 */ 198 | min-height: 0; /* 1 */ 199 | } 200 | .flex-none-l { flex: none; } 201 | .flex-column-l { flex-direction: column; } 202 | .flex-row-l { flex-direction: row; } 203 | .flex-wrap-l { flex-wrap: wrap; } 204 | .flex-nowrap-l { flex-wrap: nowrap; } 205 | .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } 206 | .flex-column-reverse-l { flex-direction: column-reverse; } 207 | .flex-row-reverse-l { flex-direction: row-reverse; } 208 | 209 | .items-start-l { align-items: flex-start; } 210 | .items-end-l { align-items: flex-end; } 211 | .items-center-l { align-items: center; } 212 | .items-baseline-l { align-items: baseline; } 213 | .items-stretch-l { align-items: stretch; } 214 | 215 | .self-start-l { align-self: flex-start; } 216 | .self-end-l { align-self: flex-end; } 217 | .self-center-l { align-self: center; } 218 | .self-baseline-l { align-self: baseline; } 219 | .self-stretch-l { align-self: stretch; } 220 | 221 | .justify-start-l { justify-content: flex-start; } 222 | .justify-end-l { justify-content: flex-end; } 223 | .justify-center-l { justify-content: center; } 224 | .justify-between-l { justify-content: space-between; } 225 | .justify-around-l { justify-content: space-around; } 226 | 227 | .content-start-l { align-content: flex-start; } 228 | .content-end-l { align-content: flex-end; } 229 | .content-center-l { align-content: center; } 230 | .content-between-l { align-content: space-between; } 231 | .content-around-l { align-content: space-around; } 232 | .content-stretch-l { align-content: stretch; } 233 | 234 | .order-0-l { order: 0; } 235 | .order-1-l { order: 1; } 236 | .order-2-l { order: 2; } 237 | .order-3-l { order: 3; } 238 | .order-4-l { order: 4; } 239 | .order-5-l { order: 5; } 240 | .order-6-l { order: 6; } 241 | .order-7-l { order: 7; } 242 | .order-8-l { order: 8; } 243 | .order-last-l { order: 99999; } 244 | 245 | .flex-grow-0-l { flex-grow: 0; } 246 | .flex-grow-1-l { flex-grow: 1; } 247 | 248 | .flex-shrink-0-l { flex-shrink: 0; } 249 | .flex-shrink-1-l { flex-shrink: 1; } 250 | } 251 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_floats.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FLOATS 4 | http://tachyons.io/docs/layout/floats/ 5 | 6 | 1. Floated elements are automatically rendered as block level elements. 7 | Setting floats to display inline will fix the double margin bug in 8 | ie6. You know... just in case. 9 | 10 | 2. Don't forget to clearfix your floats with .cf 11 | 12 | Base: 13 | f = float 14 | 15 | Modifiers: 16 | l = left 17 | r = right 18 | n = none 19 | 20 | Media Query Extensions: 21 | -ns = not-small 22 | -m = medium 23 | -l = large 24 | 25 | */ 26 | 27 | 28 | 29 | .fl { float: left; _display: inline; } 30 | .fr { float: right; _display: inline; } 31 | .fn { float: none; } 32 | 33 | @media (--breakpoint-not-small) { 34 | .fl-ns { float: left; _display: inline; } 35 | .fr-ns { float: right; _display: inline; } 36 | .fn-ns { float: none; } 37 | } 38 | 39 | @media (--breakpoint-medium) { 40 | .fl-m { float: left; _display: inline; } 41 | .fr-m { float: right; _display: inline; } 42 | .fn-m { float: none; } 43 | } 44 | 45 | @media (--breakpoint-large) { 46 | .fl-l { float: left; _display: inline; } 47 | .fr-l { float: right; _display: inline; } 48 | .fn-l { float: none; } 49 | } 50 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_font-family.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FONT FAMILY GROUPS 4 | Docs: http://tachyons.io/docs/typography/font-family/ 5 | 6 | */ 7 | 8 | 9 | .sans-serif { 10 | font-family: -apple-system, BlinkMacSystemFont, 11 | 'avenir next', avenir, 12 | 'helvetica neue', helvetica, 13 | ubuntu, 14 | roboto, noto, 15 | 'segoe ui', arial, 16 | sans-serif; 17 | } 18 | 19 | .serif { 20 | font-family: georgia, 21 | times, 22 | serif; 23 | } 24 | 25 | .system-sans-serif { 26 | font-family: sans-serif; 27 | } 28 | 29 | .system-serif { 30 | font-family: serif; 31 | } 32 | 33 | 34 | /* Monospaced Typefaces (for code) */ 35 | 36 | /* From http://cssfontstack.com */ 37 | code, .code { 38 | font-family: Consolas, 39 | monaco, 40 | monospace; 41 | } 42 | 43 | .courier { 44 | font-family: 'Courier Next', 45 | courier, 46 | monospace; 47 | } 48 | 49 | 50 | /* Sans-Serif Typefaces */ 51 | 52 | .helvetica { 53 | font-family: 'helvetica neue', helvetica, 54 | sans-serif; 55 | } 56 | 57 | .avenir { 58 | font-family: 'avenir next', avenir, 59 | sans-serif; 60 | } 61 | 62 | 63 | /* Serif Typefaces */ 64 | 65 | .athelas { 66 | font-family: athelas, 67 | georgia, 68 | serif; 69 | } 70 | 71 | .georgia { 72 | font-family: georgia, 73 | serif; 74 | } 75 | 76 | .times { 77 | font-family: times, 78 | serif; 79 | } 80 | 81 | .bodoni { 82 | font-family: "Bodoni MT", 83 | serif; 84 | } 85 | 86 | .calisto { 87 | font-family: "Calisto MT", 88 | serif; 89 | } 90 | 91 | .garamond { 92 | font-family: garamond, 93 | serif; 94 | } 95 | 96 | .baskerville { 97 | font-family: baskerville, 98 | serif; 99 | } 100 | 101 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_font-style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FONT STYLE 4 | Docs: http://tachyons.io/docs/typography/font-style/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | .i { font-style: italic; } 14 | .fs-normal { font-style: normal; } 15 | 16 | @media (--breakpoint-not-small) { 17 | .i-ns { font-style: italic; } 18 | .fs-normal-ns { font-style: normal; } 19 | } 20 | 21 | @media (--breakpoint-medium) { 22 | .i-m { font-style: italic; } 23 | .fs-normal-m { font-style: normal; } 24 | } 25 | 26 | @media (--breakpoint-large) { 27 | .i-l { font-style: italic; } 28 | .fs-normal-l { font-style: normal; } 29 | } 30 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_font-weight.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FONT WEIGHT 4 | Docs: http://tachyons.io/docs/typography/font-weight/ 5 | 6 | Base 7 | fw = font-weight 8 | 9 | Modifiers: 10 | 1 = literal value 100 11 | 2 = literal value 200 12 | 3 = literal value 300 13 | 4 = literal value 400 14 | 5 = literal value 500 15 | 6 = literal value 600 16 | 7 = literal value 700 17 | 8 = literal value 800 18 | 9 = literal value 900 19 | 20 | Media Query Extensions: 21 | -ns = not-small 22 | -m = medium 23 | -l = large 24 | 25 | */ 26 | 27 | .normal { font-weight: normal; } 28 | .b { font-weight: bold; } 29 | .fw1 { font-weight: 100; } 30 | .fw2 { font-weight: 200; } 31 | .fw3 { font-weight: 300; } 32 | .fw4 { font-weight: 400; } 33 | .fw5 { font-weight: 500; } 34 | .fw6 { font-weight: 600; } 35 | .fw7 { font-weight: 700; } 36 | .fw8 { font-weight: 800; } 37 | .fw9 { font-weight: 900; } 38 | 39 | 40 | @media (--breakpoint-not-small) { 41 | .normal-ns { font-weight: normal; } 42 | .b-ns { font-weight: bold; } 43 | .fw1-ns { font-weight: 100; } 44 | .fw2-ns { font-weight: 200; } 45 | .fw3-ns { font-weight: 300; } 46 | .fw4-ns { font-weight: 400; } 47 | .fw5-ns { font-weight: 500; } 48 | .fw6-ns { font-weight: 600; } 49 | .fw7-ns { font-weight: 700; } 50 | .fw8-ns { font-weight: 800; } 51 | .fw9-ns { font-weight: 900; } 52 | } 53 | 54 | @media (--breakpoint-medium) { 55 | .normal-m { font-weight: normal; } 56 | .b-m { font-weight: bold; } 57 | .fw1-m { font-weight: 100; } 58 | .fw2-m { font-weight: 200; } 59 | .fw3-m { font-weight: 300; } 60 | .fw4-m { font-weight: 400; } 61 | .fw5-m { font-weight: 500; } 62 | .fw6-m { font-weight: 600; } 63 | .fw7-m { font-weight: 700; } 64 | .fw8-m { font-weight: 800; } 65 | .fw9-m { font-weight: 900; } 66 | } 67 | 68 | @media (--breakpoint-large) { 69 | .normal-l { font-weight: normal; } 70 | .b-l { font-weight: bold; } 71 | .fw1-l { font-weight: 100; } 72 | .fw2-l { font-weight: 200; } 73 | .fw3-l { font-weight: 300; } 74 | .fw4-l { font-weight: 400; } 75 | .fw5-l { font-weight: 500; } 76 | .fw6-l { font-weight: 600; } 77 | .fw7-l { font-weight: 700; } 78 | .fw8-l { font-weight: 800; } 79 | .fw9-l { font-weight: 900; } 80 | } 81 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_forms.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FORMS 4 | 5 | */ 6 | 7 | .input-reset { 8 | -webkit-appearance: none; 9 | -moz-appearance: none; 10 | } 11 | 12 | .button-reset::-moz-focus-inner, 13 | .input-reset::-moz-focus-inner { 14 | border: 0; 15 | padding: 0; 16 | } 17 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_heights.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | HEIGHTS 4 | Docs: http://tachyons.io/docs/layout/heights/ 5 | 6 | Base: 7 | h = height 8 | min-h = min-height 9 | min-vh = min-height vertical screen height 10 | vh = vertical screen height 11 | 12 | Modifiers 13 | 1 = 1st step in height scale 14 | 2 = 2nd step in height scale 15 | 3 = 3rd step in height scale 16 | 4 = 4th step in height scale 17 | 5 = 5th step in height scale 18 | 19 | -25 = literal value 25% 20 | -50 = literal value 50% 21 | -75 = literal value 75% 22 | -100 = literal value 100% 23 | 24 | -auto = string value of auto 25 | -inherit = string value of inherit 26 | 27 | Media Query Extensions: 28 | -ns = not-small 29 | -m = medium 30 | -l = large 31 | 32 | */ 33 | 34 | /* Height Scale */ 35 | 36 | .h1 { height: 1rem; } 37 | .h2 { height: 2rem; } 38 | .h3 { height: 4rem; } 39 | .h4 { height: 8rem; } 40 | .h5 { height: 16rem; } 41 | 42 | /* Height Percentages - Based off of height of parent */ 43 | 44 | .h-25 { height: 25%; } 45 | .h-50 { height: 50%; } 46 | .h-75 { height: 75%; } 47 | .h-100 { height: 100%; } 48 | 49 | .min-h-100 { min-height: 100%; } 50 | 51 | /* Screen Height Percentage */ 52 | 53 | .vh-25 { height: 25vh; } 54 | .vh-50 { height: 50vh; } 55 | .vh-75 { height: 75vh; } 56 | .vh-100 { height: 100vh; } 57 | 58 | .min-vh-100 { min-height: 100vh; } 59 | 60 | 61 | /* String Properties */ 62 | 63 | .h-auto { height: auto; } 64 | .h-inherit { height: inherit; } 65 | 66 | @media (--breakpoint-not-small) { 67 | .h1-ns { height: 1rem; } 68 | .h2-ns { height: 2rem; } 69 | .h3-ns { height: 4rem; } 70 | .h4-ns { height: 8rem; } 71 | .h5-ns { height: 16rem; } 72 | .h-25-ns { height: 25%; } 73 | .h-50-ns { height: 50%; } 74 | .h-75-ns { height: 75%; } 75 | .h-100-ns { height: 100%; } 76 | .min-h-100-ns { min-height: 100%; } 77 | .vh-25-ns { height: 25vh; } 78 | .vh-50-ns { height: 50vh; } 79 | .vh-75-ns { height: 75vh; } 80 | .vh-100-ns { height: 100vh; } 81 | .min-vh-100-ns { min-height: 100vh; } 82 | .h-auto-ns { height: auto; } 83 | .h-inherit-ns { height: inherit; } 84 | } 85 | 86 | @media (--breakpoint-medium) { 87 | .h1-m { height: 1rem; } 88 | .h2-m { height: 2rem; } 89 | .h3-m { height: 4rem; } 90 | .h4-m { height: 8rem; } 91 | .h5-m { height: 16rem; } 92 | .h-25-m { height: 25%; } 93 | .h-50-m { height: 50%; } 94 | .h-75-m { height: 75%; } 95 | .h-100-m { height: 100%; } 96 | .min-h-100-m { min-height: 100%; } 97 | .vh-25-m { height: 25vh; } 98 | .vh-50-m { height: 50vh; } 99 | .vh-75-m { height: 75vh; } 100 | .vh-100-m { height: 100vh; } 101 | .min-vh-100-m { min-height: 100vh; } 102 | .h-auto-m { height: auto; } 103 | .h-inherit-m { height: inherit; } 104 | } 105 | 106 | @media (--breakpoint-large) { 107 | .h1-l { height: 1rem; } 108 | .h2-l { height: 2rem; } 109 | .h3-l { height: 4rem; } 110 | .h4-l { height: 8rem; } 111 | .h5-l { height: 16rem; } 112 | .h-25-l { height: 25%; } 113 | .h-50-l { height: 50%; } 114 | .h-75-l { height: 75%; } 115 | .h-100-l { height: 100%; } 116 | .min-h-100-l { min-height: 100%; } 117 | .vh-25-l { height: 25vh; } 118 | .vh-50-l { height: 50vh; } 119 | .vh-75-l { height: 75vh; } 120 | .vh-100-l { height: 100vh; } 121 | .min-vh-100-l { min-height: 100vh; } 122 | .h-auto-l { height: auto; } 123 | .h-inherit-l { height: inherit; } 124 | } 125 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_hovers.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | HOVER EFFECTS 4 | Docs: http://tachyons.io/docs/themes/hovers/ 5 | 6 | - Dim 7 | - Glow 8 | - Hide Child 9 | - Underline text 10 | - Grow 11 | - Pointer 12 | - Shadow 13 | 14 | */ 15 | 16 | /* 17 | 18 | Dim element on hover by adding the dim class. 19 | 20 | */ 21 | .dim { 22 | opacity: 1; 23 | transition: opacity .15s ease-in; 24 | } 25 | .dim:hover { 26 | opacity: .5; 27 | transition: opacity .15s ease-in; 28 | } 29 | .dim:active { 30 | opacity: .8; transition: opacity .15s ease-out; 31 | } 32 | 33 | /* 34 | 35 | Animate opacity to 100% on hover by adding the glow class. 36 | 37 | */ 38 | .glow { 39 | transition: opacity .15s ease-in; 40 | } 41 | .glow:hover, 42 | .glow:focus { 43 | opacity: 1; 44 | transition: opacity .15s ease-in; 45 | } 46 | 47 | /* 48 | 49 | Hide child & reveal on hover: 50 | 51 | Put the hide-child class on a parent element and any nested element with the 52 | child class will be hidden and displayed on hover or focus. 53 | 54 |
55 |
Hidden until hover or focus
56 |
Hidden until hover or focus
57 |
Hidden until hover or focus
58 |
Hidden until hover or focus
59 |
60 | */ 61 | 62 | .hide-child .child { 63 | opacity: 0; 64 | transition: opacity .15s ease-in; 65 | } 66 | .hide-child:hover .child, 67 | .hide-child:focus .child, 68 | .hide-child:active .child { 69 | opacity: 1; 70 | transition: opacity .15s ease-in; 71 | } 72 | 73 | .underline-hover:hover, 74 | .underline-hover:focus { 75 | text-decoration: underline; 76 | } 77 | 78 | /* Can combine this with overflow-hidden to make background images grow on hover 79 | * even if you are using background-size: cover */ 80 | 81 | .grow { 82 | -moz-osx-font-smoothing: grayscale; 83 | backface-visibility: hidden; 84 | transform: translateZ(0); 85 | transition: transform 0.25s ease-out; 86 | } 87 | 88 | .grow:hover, 89 | .grow:focus { 90 | transform: scale(1.05); 91 | } 92 | 93 | .grow:active { 94 | transform: scale(.90); 95 | } 96 | 97 | .grow-large { 98 | -moz-osx-font-smoothing: grayscale; 99 | backface-visibility: hidden; 100 | transform: translateZ(0); 101 | transition: transform .25s ease-in-out; 102 | } 103 | 104 | .grow-large:hover, 105 | .grow-large:focus { 106 | transform: scale(1.2); 107 | } 108 | 109 | .grow-large:active { 110 | transform: scale(.95); 111 | } 112 | 113 | /* Add pointer on hover */ 114 | 115 | .pointer:hover { 116 | cursor: pointer; 117 | } 118 | 119 | /* 120 | Add shadow on hover. 121 | 122 | Performant box-shadow animation pattern from 123 | http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 124 | */ 125 | 126 | .shadow-hover { 127 | cursor: pointer; 128 | position: relative; 129 | transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 130 | } 131 | 132 | .shadow-hover::after { 133 | content: ''; 134 | box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); 135 | border-radius: inherit; 136 | opacity: 0; 137 | position: absolute; 138 | top: 0; 139 | left: 0; 140 | width: 100%; 141 | height: 100%; 142 | z-index: -1; 143 | transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 144 | } 145 | 146 | .shadow-hover:hover::after, 147 | .shadow-hover:focus::after { 148 | opacity: 1; 149 | } 150 | 151 | /* Combine with classes in skins and skins-pseudo for 152 | * many different transition possibilities. */ 153 | 154 | .bg-animate, 155 | .bg-animate:hover, 156 | .bg-animate:focus { 157 | transition: background-color .15s ease-in-out; 158 | } 159 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_images.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | IMAGES 4 | Docs: http://tachyons.io/docs/elements/images/ 5 | 6 | */ 7 | 8 | /* Responsive images! */ 9 | 10 | img { max-width: 100%; } 11 | 12 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_letter-spacing.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LETTER SPACING 4 | Docs: http://tachyons.io/docs/typography/tracking/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | .tracked { letter-spacing: .1em; } 14 | .tracked-tight { letter-spacing: -.05em; } 15 | .tracked-mega { letter-spacing: .25em; } 16 | .tracked-mega-1 { letter-spacing: .50em; } 17 | 18 | 19 | @media (--breakpoint-not-small) { 20 | .tracked-ns { letter-spacing: .1em; } 21 | .tracked-tight-ns { letter-spacing: -.05em; } 22 | .tracked-mega-ns { letter-spacing: .25em; } 23 | .tracked-mega-1-ns { letter-spacing: .50em; } 24 | 25 | } 26 | 27 | @media (--breakpoint-medium) { 28 | .tracked-m { letter-spacing: .1em; } 29 | .tracked-tight-m { letter-spacing: -.05em; } 30 | .tracked-mega-m { letter-spacing: .25em; } 31 | .tracked-mega-1-m { letter-spacing: .50em; } 32 | 33 | } 34 | 35 | @media (--breakpoint-large) { 36 | .tracked-l { letter-spacing: .1em; } 37 | .tracked-tight-l { letter-spacing: -.05em; } 38 | .tracked-mega-l { letter-spacing: .25em; } 39 | .tracked-mega-1-l { letter-spacing: .50em; } 40 | } 41 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_line-height.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LINE HEIGHT / LEADING 4 | Docs: http://tachyons.io/docs/typography/line-height 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | .lh-solid { line-height: 1; } 14 | .lh-title { line-height: 1.25; } 15 | .lh-copy { line-height: 1.5; } 16 | 17 | @media (--breakpoint-not-small) { 18 | .lh-solid-ns { line-height: 1; } 19 | .lh-title-ns { line-height: 1.25; } 20 | .lh-copy-ns { line-height: 1.5; } 21 | } 22 | 23 | @media (--breakpoint-medium) { 24 | .lh-solid-m { line-height: 1; } 25 | .lh-title-m { line-height: 1.25; } 26 | .lh-copy-m { line-height: 1.5; } 27 | } 28 | 29 | @media (--breakpoint-large) { 30 | .lh-solid-l { line-height: 1; } 31 | .lh-title-l { line-height: 1.25; } 32 | .lh-copy-l { line-height: 1.5; } 33 | } 34 | 35 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_links.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LINKS 4 | Docs: http://tachyons.io/docs/elements/links/ 5 | 6 | */ 7 | 8 | .link { 9 | text-decoration: none; 10 | transition: color .15s ease-in; 11 | } 12 | 13 | .link:link, 14 | .link:visited { 15 | transition: color .15s ease-in; 16 | } 17 | .link:hover { 18 | transition: color .15s ease-in; 19 | } 20 | .link:active { 21 | transition: color .15s ease-in; 22 | } 23 | .link:focus { 24 | transition: color .15s ease-in; 25 | outline: 1px dotted currentColor; 26 | } 27 | 28 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_lists.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LISTS 4 | http://tachyons.io/docs/elements/lists/ 5 | 6 | */ 7 | 8 | .list { list-style-type: none; } 9 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_max-widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | MAX WIDTHS 4 | Docs: http://tachyons.io/docs/layout/max-widths/ 5 | 6 | Base: 7 | mw = max-width 8 | 9 | Modifiers 10 | 1 = 1st step in width scale 11 | 2 = 2nd step in width scale 12 | 3 = 3rd step in width scale 13 | 4 = 4th step in width scale 14 | 5 = 5th step in width scale 15 | 6 = 6st step in width scale 16 | 7 = 7nd step in width scale 17 | 8 = 8rd step in width scale 18 | 9 = 9th step in width scale 19 | 20 | -100 = literal value 100% 21 | 22 | -none = string value none 23 | 24 | 25 | Media Query Extensions: 26 | -ns = not-small 27 | -m = medium 28 | -l = large 29 | 30 | */ 31 | 32 | /* Max Width Percentages */ 33 | 34 | .mw-100 { max-width: 100%; } 35 | 36 | /* Max Width Scale */ 37 | 38 | .mw1 { max-width: 1rem; } 39 | .mw2 { max-width: 2rem; } 40 | .mw3 { max-width: 4rem; } 41 | .mw4 { max-width: 8rem; } 42 | .mw5 { max-width: 16rem; } 43 | .mw6 { max-width: 32rem; } 44 | .mw7 { max-width: 48rem; } 45 | .mw8 { max-width: 64rem; } 46 | .mw9 { max-width: 84rem; } 47 | 48 | .mw50rem { max-width: 50rem; } 49 | 50 | /* Max Width String Properties */ 51 | 52 | .mw-none { max-width: none; } 53 | 54 | @media (--breakpoint-not-small) { 55 | .mw-100-ns { max-width: 100%; } 56 | 57 | .mw1-ns { max-width: 1rem; } 58 | .mw2-ns { max-width: 2rem; } 59 | .mw3-ns { max-width: 4rem; } 60 | .mw4-ns { max-width: 8rem; } 61 | .mw5-ns { max-width: 16rem; } 62 | .mw6-ns { max-width: 32rem; } 63 | .mw7-ns { max-width: 48rem; } 64 | .mw8-ns { max-width: 64rem; } 65 | .mw9-ns { max-width: 84rem; } 66 | 67 | .mw-none-ns { max-width: none; } 68 | 69 | .mw50rem-ns { max-width: 50rem; } 70 | 71 | } 72 | 73 | @media (--breakpoint-medium) { 74 | .mw-100-m { max-width: 100%; } 75 | 76 | .mw1-m { max-width: 1rem; } 77 | .mw2-m { max-width: 2rem; } 78 | .mw3-m { max-width: 4rem; } 79 | .mw4-m { max-width: 8rem; } 80 | .mw5-m { max-width: 16rem; } 81 | .mw6-m { max-width: 32rem; } 82 | .mw7-m { max-width: 48rem; } 83 | .mw8-m { max-width: 64rem; } 84 | .mw9-m { max-width: 84rem; } 85 | 86 | .mw-none-m { max-width: none; } 87 | 88 | .mw50rem-m { max-width: 50rem; } 89 | } 90 | 91 | @media (--breakpoint-large) { 92 | .mw-100-l { max-width: 100%; } 93 | 94 | .mw1-l { max-width: 1rem; } 95 | .mw2-l { max-width: 2rem; } 96 | .mw3-l { max-width: 4rem; } 97 | .mw4-l { max-width: 8rem; } 98 | .mw5-l { max-width: 16rem; } 99 | .mw6-l { max-width: 32rem; } 100 | .mw7-l { max-width: 48rem; } 101 | .mw8-l { max-width: 64rem; } 102 | .mw9-l { max-width: 84rem; } 103 | 104 | .mw-none-l { max-width: none; } 105 | 106 | .mw50rem-l { max-width: 50rem; } 107 | } 108 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_media-queries.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CUSTOM MEDIA QUERIES 4 | 5 | Media query values can be changed to fit your own content. 6 | There are no magic bullets when it comes to media query width values. 7 | They should be declared in em units - and they should be set to meet 8 | the needs of your content. You can also add additional media queries, 9 | or remove some of the existing ones. 10 | 11 | These media queries can be referenced like so: 12 | 13 | @media (--breakpoint-not-small) { 14 | .medium-and-larger-specific-style { 15 | background-color: red; 16 | } 17 | } 18 | 19 | @media (--breakpoint-medium) { 20 | .medium-screen-specific-style { 21 | background-color: red; 22 | } 23 | } 24 | 25 | 26 | 27 | */ 28 | 29 | /* Media Queries */ 30 | @custom-media --breakpoint-not-small screen and (min-width: 30em); 31 | @custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em); 32 | @custom-media --breakpoint-large screen and (min-width: 60em); 33 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_module-template.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | MODULE NAME 4 | 5 | Use this scaffolding to create or extend your own modules with tachyons 6 | style architecture. 7 | 8 | */ 9 | 10 | 11 | @media (--breakpoint-not-small) { 12 | 13 | } 14 | 15 | @media (--breakpoint-medium) { 16 | 17 | } 18 | 19 | @media (--breakpoint-large) { 20 | 21 | } 22 | 23 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_nested.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | NESTED 4 | Tachyons module for styling nested elements 5 | that are generated by a cms. 6 | 7 | */ 8 | 9 | .nested-copy-line-height p, 10 | .nested-copy-line-height ul, 11 | .nested-copy-line-height ol { 12 | line-height: 1.5; 13 | } 14 | 15 | .nested-headline-line-height h1, 16 | .nested-headline-line-height h2, 17 | .nested-headline-line-height h3, 18 | .nested-headline-line-height h4, 19 | .nested-headline-line-height h5, 20 | .nested-headline-line-height h6 { 21 | line-height: 1.25; 22 | } 23 | 24 | .nested-list-reset ul, 25 | .nested-list-reset ol { 26 | padding-left: 0; 27 | margin-left: 0; 28 | list-style-type: none; 29 | } 30 | 31 | .nested-copy-indent p+p { 32 | text-indent: 1em; 33 | margin-top: 0; 34 | margin-bottom: 0; 35 | } 36 | 37 | .nested-copy-separator p+p { 38 | margin-top: 1.5em; 39 | } 40 | 41 | .nested-img img { 42 | width: 100%; 43 | max-width: 100%; 44 | display: block; 45 | } 46 | 47 | .nested-links a { 48 | color: var(--blue); 49 | transition: color .15s ease-in; 50 | } 51 | 52 | .nested-links a:hover, 53 | .nested-links a:focus { 54 | color: var(--light-blue); 55 | transition: color .15s ease-in; 56 | } 57 | 58 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Correct the font size and margin on `h1` elements within `section` and 29 | * `article` contexts in Chrome, Firefox, and Safari. 30 | */ 31 | 32 | h1 { 33 | font-size: 2em; 34 | margin: 0.67em 0; 35 | } 36 | 37 | /* Grouping content 38 | ========================================================================== */ 39 | 40 | /** 41 | * 1. Add the correct box sizing in Firefox. 42 | * 2. Show the overflow in Edge and IE. 43 | */ 44 | 45 | hr { 46 | box-sizing: content-box; /* 1 */ 47 | height: 0; /* 1 */ 48 | overflow: visible; /* 2 */ 49 | } 50 | 51 | /** 52 | * 1. Correct the inheritance and scaling of font size in all browsers. 53 | * 2. Correct the odd `em` font sizing in all browsers. 54 | */ 55 | 56 | pre { 57 | font-family: monospace, monospace; /* 1 */ 58 | font-size: 1em; /* 2 */ 59 | } 60 | 61 | /* Text-level semantics 62 | ========================================================================== */ 63 | 64 | /** 65 | * Remove the gray background on active links in IE 10. 66 | */ 67 | 68 | a { 69 | background-color: transparent; 70 | } 71 | 72 | /** 73 | * 1. Remove the bottom border in Chrome 57- 74 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 75 | */ 76 | 77 | abbr[title] { 78 | border-bottom: none; /* 1 */ 79 | text-decoration: underline; /* 2 */ 80 | text-decoration: underline dotted; /* 2 */ 81 | } 82 | 83 | /** 84 | * Add the correct font weight in Chrome, Edge, and Safari. 85 | */ 86 | 87 | b, 88 | strong { 89 | font-weight: bolder; 90 | } 91 | 92 | /** 93 | * 1. Correct the inheritance and scaling of font size in all browsers. 94 | * 2. Correct the odd `em` font sizing in all browsers. 95 | */ 96 | 97 | code, 98 | kbd, 99 | samp { 100 | font-family: monospace, monospace; /* 1 */ 101 | font-size: 1em; /* 2 */ 102 | } 103 | 104 | /** 105 | * Add the correct font size in all browsers. 106 | */ 107 | 108 | small { 109 | font-size: 80%; 110 | } 111 | 112 | /** 113 | * Prevent `sub` and `sup` elements from affecting the line height in 114 | * all browsers. 115 | */ 116 | 117 | sub, 118 | sup { 119 | font-size: 75%; 120 | line-height: 0; 121 | position: relative; 122 | vertical-align: baseline; 123 | } 124 | 125 | sub { 126 | bottom: -0.25em; 127 | } 128 | 129 | sup { 130 | top: -0.5em; 131 | } 132 | 133 | /* Embedded content 134 | ========================================================================== */ 135 | 136 | /** 137 | * Remove the border on images inside links in IE 10. 138 | */ 139 | 140 | img { 141 | border-style: none; 142 | } 143 | 144 | /* Forms 145 | ========================================================================== */ 146 | 147 | /** 148 | * 1. Change the font styles in all browsers. 149 | * 2. Remove the margin in Firefox and Safari. 150 | */ 151 | 152 | button, 153 | input, 154 | optgroup, 155 | select, 156 | textarea { 157 | font-family: inherit; /* 1 */ 158 | font-size: 100%; /* 1 */ 159 | line-height: 1.15; /* 1 */ 160 | margin: 0; /* 2 */ 161 | } 162 | 163 | /** 164 | * Show the overflow in IE. 165 | * 1. Show the overflow in Edge. 166 | */ 167 | 168 | button, 169 | input { /* 1 */ 170 | overflow: visible; 171 | } 172 | 173 | /** 174 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 175 | * 1. Remove the inheritance of text transform in Firefox. 176 | */ 177 | 178 | button, 179 | select { /* 1 */ 180 | text-transform: none; 181 | } 182 | 183 | /** 184 | * Correct the inability to style clickable types in iOS and Safari. 185 | */ 186 | 187 | button, 188 | [type="button"], 189 | [type="reset"], 190 | [type="submit"] { 191 | -webkit-appearance: button; 192 | } 193 | 194 | /** 195 | * Remove the inner border and padding in Firefox. 196 | */ 197 | 198 | button::-moz-focus-inner, 199 | [type="button"]::-moz-focus-inner, 200 | [type="reset"]::-moz-focus-inner, 201 | [type="submit"]::-moz-focus-inner { 202 | border-style: none; 203 | padding: 0; 204 | } 205 | 206 | /** 207 | * Restore the focus styles unset by the previous rule. 208 | */ 209 | 210 | button:-moz-focusring, 211 | [type="button"]:-moz-focusring, 212 | [type="reset"]:-moz-focusring, 213 | [type="submit"]:-moz-focusring { 214 | outline: 1px dotted ButtonText; 215 | } 216 | 217 | /** 218 | * Correct the padding in Firefox. 219 | */ 220 | 221 | fieldset { 222 | padding: 0.35em 0.75em 0.625em; 223 | } 224 | 225 | /** 226 | * 1. Correct the text wrapping in Edge and IE. 227 | * 2. Correct the color inheritance from `fieldset` elements in IE. 228 | * 3. Remove the padding so developers are not caught out when they zero out 229 | * `fieldset` elements in all browsers. 230 | */ 231 | 232 | legend { 233 | box-sizing: border-box; /* 1 */ 234 | color: inherit; /* 2 */ 235 | display: table; /* 1 */ 236 | max-width: 100%; /* 1 */ 237 | padding: 0; /* 3 */ 238 | white-space: normal; /* 1 */ 239 | } 240 | 241 | /** 242 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 243 | */ 244 | 245 | progress { 246 | vertical-align: baseline; 247 | } 248 | 249 | /** 250 | * Remove the default vertical scrollbar in IE 10+. 251 | */ 252 | 253 | textarea { 254 | overflow: auto; 255 | } 256 | 257 | /** 258 | * 1. Add the correct box sizing in IE 10. 259 | * 2. Remove the padding in IE 10. 260 | */ 261 | 262 | [type="checkbox"], 263 | [type="radio"] { 264 | box-sizing: border-box; /* 1 */ 265 | padding: 0; /* 2 */ 266 | } 267 | 268 | /** 269 | * Correct the cursor style of increment and decrement buttons in Chrome. 270 | */ 271 | 272 | [type="number"]::-webkit-inner-spin-button, 273 | [type="number"]::-webkit-outer-spin-button { 274 | height: auto; 275 | } 276 | 277 | /** 278 | * 1. Correct the odd appearance in Chrome and Safari. 279 | * 2. Correct the outline style in Safari. 280 | */ 281 | 282 | [type="search"] { 283 | -webkit-appearance: textfield; /* 1 */ 284 | outline-offset: -2px; /* 2 */ 285 | } 286 | 287 | /** 288 | * Remove the inner padding in Chrome and Safari on macOS. 289 | */ 290 | 291 | [type="search"]::-webkit-search-decoration { 292 | -webkit-appearance: none; 293 | } 294 | 295 | /** 296 | * 1. Correct the inability to style clickable types in iOS and Safari. 297 | * 2. Change font properties to `inherit` in Safari. 298 | */ 299 | 300 | ::-webkit-file-upload-button { 301 | -webkit-appearance: button; /* 1 */ 302 | font: inherit; /* 2 */ 303 | } 304 | 305 | /* Interactive 306 | ========================================================================== */ 307 | 308 | /* 309 | * Add the correct display in Edge, IE 10+, and Firefox. 310 | */ 311 | 312 | details { 313 | display: block; 314 | } 315 | 316 | /* 317 | * Add the correct display in all browsers. 318 | */ 319 | 320 | summary { 321 | display: list-item; 322 | } 323 | 324 | /* Misc 325 | ========================================================================== */ 326 | 327 | /** 328 | * Add the correct display in IE 10+. 329 | */ 330 | 331 | template { 332 | display: none; 333 | } 334 | 335 | /** 336 | * Add the correct display in IE 10. 337 | */ 338 | 339 | [hidden] { 340 | display: none; 341 | } 342 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_opacity.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OPACITY 4 | Docs: http://tachyons.io/docs/themes/opacity/ 5 | 6 | */ 7 | 8 | .o-100 { opacity: 1; } 9 | .o-90 { opacity: .9; } 10 | .o-80 { opacity: .8; } 11 | .o-70 { opacity: .7; } 12 | .o-60 { opacity: .6; } 13 | .o-50 { opacity: .5; } 14 | .o-40 { opacity: .4; } 15 | .o-30 { opacity: .3; } 16 | .o-20 { opacity: .2; } 17 | .o-10 { opacity: .1; } 18 | .o-05 { opacity: .05; } 19 | .o-025 { opacity: .025; } 20 | .o-0 { opacity: 0; } 21 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_outlines.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OUTLINES 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | .outline { outline: 1px solid; } 13 | .outline-transparent { outline: 1px solid transparent; } 14 | .outline-0 { outline: 0; } 15 | 16 | @media (--breakpoint-not-small) { 17 | .outline-ns { outline: 1px solid; } 18 | .outline-transparent-ns { outline: 1px solid transparent; } 19 | .outline-0-ns { outline: 0; } 20 | } 21 | 22 | @media (--breakpoint-medium) { 23 | .outline-m { outline: 1px solid; } 24 | .outline-transparent-m { outline: 1px solid transparent; } 25 | .outline-0-m { outline: 0; } 26 | } 27 | 28 | @media (--breakpoint-large) { 29 | .outline-l { outline: 1px solid; } 30 | .outline-transparent-l { outline: 1px solid transparent; } 31 | .outline-0-l { outline: 0; } 32 | } 33 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_overflow.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OVERFLOW 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | .overflow-visible { overflow: visible; } 13 | .overflow-hidden { overflow: hidden; } 14 | .overflow-scroll { overflow: scroll; } 15 | .overflow-auto { overflow: auto; } 16 | 17 | .overflow-x-visible { overflow-x: visible; } 18 | .overflow-x-hidden { overflow-x: hidden; } 19 | .overflow-x-scroll { overflow-x: scroll; } 20 | .overflow-x-auto { overflow-x: auto; } 21 | 22 | .overflow-y-visible { overflow-y: visible; } 23 | .overflow-y-hidden { overflow-y: hidden; } 24 | .overflow-y-scroll { overflow-y: scroll; } 25 | .overflow-y-auto { overflow-y: auto; } 26 | 27 | @media (--breakpoint-not-small) { 28 | .overflow-visible-ns { overflow: visible; } 29 | .overflow-hidden-ns { overflow: hidden; } 30 | .overflow-scroll-ns { overflow: scroll; } 31 | .overflow-auto-ns { overflow: auto; } 32 | .overflow-x-visible-ns { overflow-x: visible; } 33 | .overflow-x-hidden-ns { overflow-x: hidden; } 34 | .overflow-x-scroll-ns { overflow-x: scroll; } 35 | .overflow-x-auto-ns { overflow-x: auto; } 36 | 37 | .overflow-y-visible-ns { overflow-y: visible; } 38 | .overflow-y-hidden-ns { overflow-y: hidden; } 39 | .overflow-y-scroll-ns { overflow-y: scroll; } 40 | .overflow-y-auto-ns { overflow-y: auto; } 41 | } 42 | 43 | @media (--breakpoint-medium) { 44 | .overflow-visible-m { overflow: visible; } 45 | .overflow-hidden-m { overflow: hidden; } 46 | .overflow-scroll-m { overflow: scroll; } 47 | .overflow-auto-m { overflow: auto; } 48 | 49 | .overflow-x-visible-m { overflow-x: visible; } 50 | .overflow-x-hidden-m { overflow-x: hidden; } 51 | .overflow-x-scroll-m { overflow-x: scroll; } 52 | .overflow-x-auto-m { overflow-x: auto; } 53 | 54 | .overflow-y-visible-m { overflow-y: visible; } 55 | .overflow-y-hidden-m { overflow-y: hidden; } 56 | .overflow-y-scroll-m { overflow-y: scroll; } 57 | .overflow-y-auto-m { overflow-y: auto; } 58 | } 59 | 60 | @media (--breakpoint-large) { 61 | .overflow-visible-l { overflow: visible; } 62 | .overflow-hidden-l { overflow: hidden; } 63 | .overflow-scroll-l { overflow: scroll; } 64 | .overflow-auto-l { overflow: auto; } 65 | 66 | .overflow-x-visible-l { overflow-x: visible; } 67 | .overflow-x-hidden-l { overflow-x: hidden; } 68 | .overflow-x-scroll-l { overflow-x: scroll; } 69 | .overflow-x-auto-l { overflow-x: auto; } 70 | 71 | .overflow-y-visible-l { overflow-y: visible; } 72 | .overflow-y-hidden-l { overflow-y: hidden; } 73 | .overflow-y-scroll-l { overflow-y: scroll; } 74 | .overflow-y-auto-l { overflow-y: auto; } 75 | } 76 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_position.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | POSITIONING 4 | Docs: http://tachyons.io/docs/layout/position/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | .static { position: static; } 14 | .relative { position: relative; } 15 | .absolute { position: absolute; } 16 | .fixed { position: fixed; } 17 | 18 | @media (--breakpoint-not-small) { 19 | .static-ns { position: static; } 20 | .relative-ns { position: relative; } 21 | .absolute-ns { position: absolute; } 22 | .fixed-ns { position: fixed; } 23 | } 24 | 25 | @media (--breakpoint-medium) { 26 | .static-m { position: static; } 27 | .relative-m { position: relative; } 28 | .absolute-m { position: absolute; } 29 | .fixed-m { position: fixed; } 30 | } 31 | 32 | @media (--breakpoint-large) { 33 | .static-l { position: static; } 34 | .relative-l { position: relative; } 35 | .absolute-l { position: absolute; } 36 | .fixed-l { position: fixed; } 37 | } 38 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_rotations.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ROTATIONS 4 | 5 | */ 6 | 7 | .rotate-45 { transform: rotate(45deg); } 8 | .rotate-90 { transform: rotate(90deg); } 9 | .rotate-135 { transform: rotate(135deg); } 10 | .rotate-180 { transform: rotate(180deg); } 11 | .rotate-225 { transform: rotate(225deg); } 12 | .rotate-270 { transform: rotate(270deg); } 13 | .rotate-315 { transform: rotate(315deg); } 14 | 15 | .nrotate-90 { transform: rotate(-90deg); } 16 | 17 | .rotate-lift { 18 | transform: translate(2rem, -5rem) rotate(-90deg); 19 | } 20 | 21 | .rotate-lift-less { 22 | transform: translate(2rem, -4rem) rotate(-90deg); 23 | } 24 | 25 | 26 | 27 | @media (--breakpoint-not-small){ 28 | .rotate-45-ns { transform: rotate(45deg); } 29 | .rotate-90-ns { transform: rotate(90deg); } 30 | .rotate-135-ns { transform: rotate(135deg); } 31 | .rotate-180-ns { transform: rotate(180deg); } 32 | .rotate-225-ns { transform: rotate(225deg); } 33 | .rotate-270-ns { transform: rotate(270deg); } 34 | .rotate-315-ns { transform: rotate(315deg); } 35 | 36 | .nrotate-90-ns { transform: rotate(-90deg); } 37 | 38 | .rotate-lift-ns { 39 | transform: translate(2rem, -5rem) rotate(-90deg); 40 | } 41 | 42 | .rotate-lift-less-ns { 43 | transform: translate(2rem, -4rem) rotate(-90deg); 44 | } 45 | 46 | } 47 | 48 | @media (--breakpoint-medium){ 49 | .rotate-45-m { transform: rotate(45deg); } 50 | .rotate-90-m { transform: rotate(90deg); } 51 | .rotate-135-m { transform: rotate(135deg); } 52 | .rotate-180-m { transform: rotate(180deg); } 53 | .rotate-225-m { transform: rotate(225deg); } 54 | .rotate-270-m { transform: rotate(270deg); } 55 | .rotate-315-m { transform: rotate(315deg); } 56 | 57 | .nrotate-90-m { transform: rotate(-90deg); } 58 | 59 | .rotate-lift-m { 60 | transform: translate(2rem, -5rem) rotate(-90deg); 61 | } 62 | 63 | .rotate-lift-less-m { 64 | transform: translate(2rem, -4rem) rotate(-90deg); 65 | } 66 | 67 | } 68 | 69 | @media (--breakpoint-large){ 70 | .rotate-45-l { transform: rotate(45deg); } 71 | .rotate-90-l { transform: rotate(90deg); } 72 | .rotate-135-l { transform: rotate(135deg); } 73 | .rotate-180-l { transform: rotate(180deg); } 74 | .rotate-225-l { transform: rotate(225deg); } 75 | .rotate-270-l { transform: rotate(270deg); } 76 | .rotate-315-l { transform: rotate(315deg); } 77 | 78 | .nrotate-90-l { transform: rotate(-90deg); } 79 | 80 | .rotate-lift-l { 81 | transform: translate(2rem, -5rem) rotate(-90deg); 82 | } 83 | 84 | .rotate-lift-less-l { 85 | transform: translate(2rem, -4rem) rotate(-90deg); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_skins.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | SKINS 4 | Docs: http://tachyons.io/docs/themes/skins/ 5 | 6 | Classes for setting foreground and background colors on elements. 7 | If you haven't declared a border color, but set border on an element, it will 8 | be set to the current text color. 9 | 10 | */ 11 | 12 | /* Text colors */ 13 | 14 | .black-90 { color: var(--black-90); } 15 | .black-80 { color: var(--black-80); } 16 | .black-70 { color: var(--black-70); } 17 | .black-60 { color: var(--black-60); } 18 | .black-50 { color: var(--black-50); } 19 | .black-40 { color: var(--black-40); } 20 | .black-30 { color: var(--black-30); } 21 | .black-20 { color: var(--black-20); } 22 | .black-10 { color: var(--black-10); } 23 | .black-05 { color: var(--black-05); } 24 | 25 | .white-90 { color: var(--white-90); } 26 | .white-80 { color: var(--white-80); } 27 | .white-70 { color: var(--white-70); } 28 | .white-60 { color: var(--white-60); } 29 | .white-50 { color: var(--white-50); } 30 | .white-40 { color: var(--white-40); } 31 | .white-30 { color: var(--white-30); } 32 | .white-20 { color: var(--white-20); } 33 | .white-10 { color: var(--white-10); } 34 | 35 | .black { color: var(--black); } 36 | .near-black { color: var(--near-black); } 37 | .dark-gray { color: var(--dark-gray); } 38 | .mid-gray { color: var(--mid-gray); } 39 | .gray { color: var(--gray); } 40 | .silver { color: var(--silver); } 41 | .light-silver { color: var(--light-silver); } 42 | .moon-gray { color: var(--moon-gray); } 43 | .light-gray { color: var(--light-gray); } 44 | .near-white { color: var(--near-white); } 45 | .white { color: var(--white); } 46 | 47 | 48 | .dark-red { color: var(--dark-red); } 49 | .red { color: var(--red); } 50 | .light-red { color: var(--light-red); } 51 | .orange { color: var(--orange); } 52 | .gold { color: var(--gold); } 53 | .yellow { color: var(--yellow); } 54 | .light-yellow { color: var(--light-yellow); } 55 | .purple { color: var(--purple); } 56 | .light-purple { color: var(--light-purple); } 57 | .dark-pink { color: var(--dark-pink); } 58 | .hot-pink { color: var(--hot-pink); } 59 | .pink { color: var(--pink); } 60 | .light-pink { color: var(--light-pink); } 61 | .dark-green { color: var(--dark-green); } 62 | .green { color: var(--green); } 63 | .light-green { color: var(--light-green); } 64 | .navy { color: var(--navy); } 65 | .dark-blue { color: var(--dark-blue); } 66 | .blue { color: var(--blue); } 67 | .light-blue { color: var(--light-blue); } 68 | .lightest-blue { color: var(--lightest-blue); } 69 | .washed-blue { color: var(--washed-blue); } 70 | .washed-green { color: var(--washed-green); } 71 | .washed-yellow { color: var(--washed-yellow); } 72 | .washed-red { color: var(--washed-red); } 73 | .color-inherit { color: inherit; } 74 | .blossom { color: var(--blossom); } 75 | .cherry { color: var(--cherry); } 76 | 77 | 78 | 79 | /* Background colors */ 80 | 81 | .bg-black-90 { background-color: var(--black-90); } 82 | .bg-black-80 { background-color: var(--black-80); } 83 | .bg-black-70 { background-color: var(--black-70); } 84 | .bg-black-60 { background-color: var(--black-60); } 85 | .bg-black-50 { background-color: var(--black-50); } 86 | .bg-black-40 { background-color: var(--black-40); } 87 | .bg-black-30 { background-color: var(--black-30); } 88 | .bg-black-20 { background-color: var(--black-20); } 89 | .bg-black-10 { background-color: var(--black-10); } 90 | .bg-black-05 { background-color: var(--black-05); } 91 | .bg-white-90 { background-color: var(--white-90); } 92 | .bg-white-80 { background-color: var(--white-80); } 93 | .bg-white-70 { background-color: var(--white-70); } 94 | .bg-white-60 { background-color: var(--white-60); } 95 | .bg-white-50 { background-color: var(--white-50); } 96 | .bg-white-40 { background-color: var(--white-40); } 97 | .bg-white-30 { background-color: var(--white-30); } 98 | .bg-white-20 { background-color: var(--white-20); } 99 | .bg-white-10 { background-color: var(--white-10); } 100 | 101 | .bg-black { background-color: var(--black); } 102 | .bg-near-black { background-color: var(--near-black); } 103 | .bg-dark-gray { background-color: var(--dark-gray); } 104 | .bg-mid-gray { background-color: var(--mid-gray); } 105 | .bg-gray { background-color: var(--gray); } 106 | .bg-silver { background-color: var(--silver); } 107 | .bg-light-silver { background-color: var(--light-silver); } 108 | .bg-moon-gray { background-color: var(--moon-gray); } 109 | .bg-light-gray { background-color: var(--light-gray); } 110 | .bg-near-white { background-color: var(--near-white); } 111 | .bg-white { background-color: var(--white); } 112 | .bg-transparent { background-color: var(--transparent); } 113 | 114 | .bg-dark-red { background-color: var(--dark-red); } 115 | .bg-red { background-color: var(--red); } 116 | .bg-light-red { background-color: var(--light-red); } 117 | .bg-orange { background-color: var(--orange); } 118 | .bg-gold { background-color: var(--gold); } 119 | .bg-yellow { background-color: var(--yellow); } 120 | .bg-light-yellow { background-color: var(--light-yellow); } 121 | .bg-purple { background-color: var(--purple); } 122 | .bg-light-purple { background-color: var(--light-purple); } 123 | .bg-dark-pink { background-color: var(--dark-pink); } 124 | .bg-hot-pink { background-color: var(--hot-pink); } 125 | .bg-pink { background-color: var(--pink); } 126 | .bg-light-pink { background-color: var(--light-pink); } 127 | .bg-dark-green { background-color: var(--dark-green); } 128 | .bg-green { background-color: var(--green); } 129 | .bg-light-green { background-color: var(--light-green); } 130 | .bg-navy { background-color: var(--navy); } 131 | .bg-dark-blue { background-color: var(--dark-blue); } 132 | .bg-blue { background-color: var(--blue); } 133 | .bg-light-blue { background-color: var(--light-blue); } 134 | .bg-lightest-blue { background-color: var(--lightest-blue); } 135 | .bg-washed-blue { background-color: var(--washed-blue); } 136 | .bg-washed-green { background-color: var(--washed-green); } 137 | .bg-washed-yellow { background-color: var(--washed-yellow); } 138 | .bg-washed-red { background-color: var(--washed-red); } 139 | .bg-inherit { background-color: inherit; } 140 | 141 | .bg-blossom { background-color: var(--blossom); } 142 | .bg-cherry { background-color: var(--cherry); } 143 | .bg-tan-white { background-color: var(--tan-white); } 144 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | STYLES 4 | 5 | Add custom styles here. 6 | 7 | */ 8 | 9 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_tables.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TABLES 4 | Docs: http://tachyons.io/docs/elements/tables/ 5 | 6 | */ 7 | 8 | .collapse { 9 | border-collapse: collapse; 10 | border-spacing: 0; 11 | } 12 | 13 | .striped--light-silver:nth-child(odd) { 14 | background-color: var(--light-silver); 15 | } 16 | 17 | .striped--moon-gray:nth-child(odd) { 18 | background-color: var(--moon-gray); 19 | } 20 | 21 | .striped--light-gray:nth-child(odd) { 22 | background-color: var(--light-gray); 23 | } 24 | 25 | .striped--near-white:nth-child(odd) { 26 | background-color: var(--near-white); 27 | } 28 | 29 | .stripe-light:nth-child(odd) { 30 | background-color: var(--white-10); 31 | } 32 | 33 | .stripe-dark:nth-child(odd) { 34 | background-color: var(--black-10); 35 | } 36 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_text-align.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT ALIGN 4 | Docs: http://tachyons.io/docs/typography/text-align/ 5 | 6 | Base 7 | t = text-align 8 | 9 | Modifiers 10 | l = left 11 | r = right 12 | c = center 13 | j = justify 14 | 15 | Media Query Extensions: 16 | -ns = not-small 17 | -m = medium 18 | -l = large 19 | 20 | */ 21 | 22 | .tl { text-align: left; } 23 | .tr { text-align: right; } 24 | .tc { text-align: center; } 25 | .tj { text-align: justify; } 26 | 27 | @media (--breakpoint-not-small) { 28 | .tl-ns { text-align: left; } 29 | .tr-ns { text-align: right; } 30 | .tc-ns { text-align: center; } 31 | .tj-ns { text-align: justify; } 32 | } 33 | 34 | @media (--breakpoint-medium) { 35 | .tl-m { text-align: left; } 36 | .tr-m { text-align: right; } 37 | .tc-m { text-align: center; } 38 | .tj-m { text-align: justify; } 39 | } 40 | 41 | @media (--breakpoint-large) { 42 | .tl-l { text-align: left; } 43 | .tr-l { text-align: right; } 44 | .tc-l { text-align: center; } 45 | .tj-l { text-align: justify; } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_text-decoration.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT DECORATION 4 | Docs: http://tachyons.io/docs/typography/text-decoration/ 5 | 6 | 7 | Media Query Extensions: 8 | -ns = not-small 9 | -m = medium 10 | -l = large 11 | 12 | */ 13 | 14 | .strike { text-decoration: line-through; } 15 | .underline { text-decoration: underline; } 16 | .no-underline { text-decoration: none; } 17 | 18 | 19 | @media (--breakpoint-not-small) { 20 | .strike-ns { text-decoration: line-through; } 21 | .underline-ns { text-decoration: underline; } 22 | .no-underline-ns { text-decoration: none; } 23 | } 24 | 25 | @media (--breakpoint-medium) { 26 | .strike-m { text-decoration: line-through; } 27 | .underline-m { text-decoration: underline; } 28 | .no-underline-m { text-decoration: none; } 29 | } 30 | 31 | @media (--breakpoint-large) { 32 | .strike-l { text-decoration: line-through; } 33 | .underline-l { text-decoration: underline; } 34 | .no-underline-l { text-decoration: none; } 35 | } 36 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_text-transform.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT TRANSFORM 4 | Docs: http://tachyons.io/docs/typography/text-transform/ 5 | 6 | Base: 7 | tt = text-transform 8 | 9 | Modifiers 10 | c = capitalize 11 | l = lowercase 12 | u = uppercase 13 | n = none 14 | 15 | Media Query Extensions: 16 | -ns = not-small 17 | -m = medium 18 | -l = large 19 | 20 | */ 21 | 22 | .ttc { text-transform: capitalize; } 23 | .ttl { text-transform: lowercase; } 24 | .ttu { text-transform: uppercase; } 25 | .ttn { text-transform: none; } 26 | 27 | @media (--breakpoint-not-small) { 28 | .ttc-ns { text-transform: capitalize; } 29 | .ttl-ns { text-transform: lowercase; } 30 | .ttu-ns { text-transform: uppercase; } 31 | .ttn-ns { text-transform: none; } 32 | } 33 | 34 | @media (--breakpoint-medium) { 35 | .ttc-m { text-transform: capitalize; } 36 | .ttl-m { text-transform: lowercase; } 37 | .ttu-m { text-transform: uppercase; } 38 | .ttn-m { text-transform: none; } 39 | } 40 | 41 | @media (--breakpoint-large) { 42 | .ttc-l { text-transform: capitalize; } 43 | .ttl-l { text-transform: lowercase; } 44 | .ttu-l { text-transform: uppercase; } 45 | .ttn-l { text-transform: none; } 46 | } 47 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_type-scale.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TYPE SCALE 4 | Docs: http://tachyons.io/docs/typography/scale/ 5 | 6 | Base: 7 | f = font-size 8 | 9 | Modifiers 10 | 1 = 1st step in size scale 11 | 2 = 2nd step in size scale 12 | 3 = 3rd step in size scale 13 | 4 = 4th step in size scale 14 | 5 = 5th step in size scale 15 | 6 = 6th step in size scale 16 | 7 = 7th step in size scale 17 | 18 | Media Query Extensions: 19 | -ns = not-small 20 | -m = medium 21 | -l = large 22 | */ 23 | 24 | /* 25 | * For Hero/Marketing Titles 26 | * 27 | * These generally are too large for mobile 28 | * so be careful using them on smaller screens. 29 | * */ 30 | 31 | .f-6, 32 | .f-headline { 33 | font-size: 6rem; 34 | } 35 | .f-5, 36 | .f-subheadline { 37 | font-size: 5rem; 38 | } 39 | 40 | 41 | /* Type Scale */ 42 | 43 | .f1 { font-size: 3rem; } 44 | .f2 { font-size: 2.25rem; } 45 | .f3 { font-size: 1.5rem; } 46 | .f4 { font-size: 1.25rem; } 47 | .f5 { font-size: 1rem; } 48 | .f6 { font-size: .875rem; } 49 | .f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */ 50 | .f8 { font-size: .65rem; } /* Small and hard to read for many people so use with extreme caution */ 51 | 52 | 53 | @media (--breakpoint-not-small){ 54 | .f-6-ns, 55 | .f-headline-ns { font-size: 6rem; } 56 | .f-5-ns, 57 | .f-subheadline-ns { font-size: 5rem; } 58 | .f1-ns { font-size: 3rem; } 59 | .f2-ns { font-size: 2.25rem; } 60 | .f3-ns { font-size: 1.5rem; } 61 | .f4-ns { font-size: 1.25rem; } 62 | .f5-ns { font-size: 1rem; } 63 | .f6-ns { font-size: .875rem; } 64 | .f7-ns { font-size: .75rem; } 65 | .f8-ns { font-size: .65rem; } 66 | .font-3-rem-ns { 67 | font-size: 3rem; 68 | } 69 | } 70 | 71 | @media (--breakpoint-medium) { 72 | .f-6-m, 73 | .f-headline-m { font-size: 6rem; } 74 | .f-5-m, 75 | .f-subheadline-m { font-size: 5rem; } 76 | .f1-m { font-size: 3rem; } 77 | .f2-m { font-size: 2.25rem; } 78 | .f3-m { font-size: 1.5rem; } 79 | .f4-m { font-size: 1.25rem; } 80 | .f5-m { font-size: 1rem; } 81 | .f6-m { font-size: .875rem; } 82 | .f8-m { font-size: .65rem; } 83 | .font-3-rem-m { 84 | font-size: 3rem; 85 | } 86 | } 87 | 88 | @media (--breakpoint-large) { 89 | .f-6-l, 90 | .f-headline-l { 91 | font-size: 6rem; 92 | } 93 | .f-5-l, 94 | .f-subheadline-l { 95 | font-size: 5rem; 96 | } 97 | .f1-l { font-size: 3rem; } 98 | .f2-l { font-size: 2.25rem; } 99 | .f3-l { font-size: 1.5rem; } 100 | .f4-l { font-size: 1.25rem; } 101 | .f5-l { font-size: 1rem; } 102 | .f6-l { font-size: .875rem; } 103 | .f7-l { font-size: .75rem; } 104 | .f8-l { font-size: .65rem; } 105 | .font-3-rem-l { 106 | font-size: 3rem; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_typography.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TYPOGRAPHY 4 | http://tachyons.io/docs/typography/measure/ 5 | 6 | Media Query Extensions: 7 | -ns = not-small 8 | -m = medium 9 | -l = large 10 | 11 | */ 12 | 13 | 14 | 15 | /* Measure is limited to ~66 characters */ 16 | .measure { 17 | max-width: 30em; 18 | } 19 | 20 | /* Measure is limited to ~80 characters */ 21 | .measure-wide { 22 | max-width: 34em; 23 | } 24 | 25 | /* Measure is limited to ~45 characters */ 26 | .measure-narrow { 27 | max-width: 20em; 28 | } 29 | 30 | /* Book paragraph style - paragraphs are indented with no vertical spacing. */ 31 | .indent { 32 | text-indent: 1em; 33 | margin-top: 0; 34 | margin-bottom: 0; 35 | } 36 | 37 | .small-caps { 38 | font-variant: small-caps; 39 | } 40 | 41 | /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ 42 | 43 | .truncate { 44 | white-space: nowrap; 45 | overflow: hidden; 46 | text-overflow: ellipsis; 47 | } 48 | 49 | @media (--breakpoint-not-small) { 50 | .measure-ns { 51 | max-width: 30em; 52 | } 53 | .measure-wide-ns { 54 | max-width: 34em; 55 | } 56 | .measure-narrow-ns { 57 | max-width: 20em; 58 | } 59 | .indent-ns { 60 | text-indent: 1em; 61 | margin-top: 0; 62 | margin-bottom: 0; 63 | } 64 | .small-caps-ns { 65 | font-variant: small-caps; 66 | } 67 | .truncate-ns { 68 | white-space: nowrap; 69 | overflow: hidden; 70 | text-overflow: ellipsis; 71 | } 72 | } 73 | 74 | @media (--breakpoint-medium) { 75 | .measure-m { 76 | max-width: 30em; 77 | } 78 | .measure-wide-m { 79 | max-width: 34em; 80 | } 81 | .measure-narrow-m { 82 | max-width: 20em; 83 | } 84 | .indent-m { 85 | text-indent: 1em; 86 | margin-top: 0; 87 | margin-bottom: 0; 88 | } 89 | .small-caps-m { 90 | font-variant: small-caps; 91 | } 92 | .truncate-m { 93 | white-space: nowrap; 94 | overflow: hidden; 95 | text-overflow: ellipsis; 96 | } 97 | } 98 | 99 | @media (--breakpoint-large) { 100 | .measure-l { 101 | max-width: 30em; 102 | } 103 | .measure-wide-l { 104 | max-width: 34em; 105 | } 106 | .measure-narrow-l { 107 | max-width: 20em; 108 | } 109 | .indent-l { 110 | text-indent: 1em; 111 | margin-top: 0; 112 | margin-bottom: 0; 113 | } 114 | .small-caps-l { 115 | font-variant: small-caps; 116 | } 117 | .truncate-l { 118 | white-space: nowrap; 119 | overflow: hidden; 120 | text-overflow: ellipsis; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_utilities.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | UTILITIES 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | /* Equivalent to .overflow-y-scroll */ 13 | .overflow-container { 14 | overflow-y: scroll; 15 | } 16 | 17 | .center { 18 | margin-right: auto; 19 | margin-left: auto; 20 | } 21 | 22 | .mr-auto { margin-right: auto; } 23 | .ml-auto { margin-left: auto; } 24 | 25 | @media (--breakpoint-not-small){ 26 | .center-ns { 27 | margin-right: auto; 28 | margin-left: auto; 29 | } 30 | .mr-auto-ns { margin-right: auto; } 31 | .ml-auto-ns { margin-left: auto; } 32 | } 33 | 34 | @media (--breakpoint-medium){ 35 | .center-m { 36 | margin-right: auto; 37 | margin-left: auto; 38 | } 39 | .mr-auto-m { margin-right: auto; } 40 | .ml-auto-m { margin-left: auto; } 41 | } 42 | 43 | @media (--breakpoint-large){ 44 | .center-l { 45 | margin-right: auto; 46 | margin-left: auto; 47 | } 48 | .mr-auto-l { margin-right: auto; } 49 | .ml-auto-l { margin-left: auto; } 50 | } 51 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_vertical-align.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | VERTICAL ALIGN 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | .v-base { vertical-align: baseline; } 13 | .v-mid { vertical-align: middle; } 14 | .v-top { vertical-align: top; } 15 | .v-btm { vertical-align: bottom; } 16 | 17 | @media (--breakpoint-not-small) { 18 | .v-base-ns { vertical-align: baseline; } 19 | .v-mid-ns { vertical-align: middle; } 20 | .v-top-ns { vertical-align: top; } 21 | .v-btm-ns { vertical-align: bottom; } 22 | } 23 | 24 | @media (--breakpoint-medium) { 25 | .v-base-m { vertical-align: baseline; } 26 | .v-mid-m { vertical-align: middle; } 27 | .v-top-m { vertical-align: top; } 28 | .v-btm-m { vertical-align: bottom; } 29 | } 30 | 31 | @media (--breakpoint-large) { 32 | .v-base-l { vertical-align: baseline; } 33 | .v-mid-l { vertical-align: middle; } 34 | .v-top-l { vertical-align: top; } 35 | .v-btm-l { vertical-align: bottom; } 36 | } 37 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_visibility.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | VISIBILITY 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | 13 | /* 14 | Text that is hidden but accessible 15 | Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 16 | */ 17 | 18 | .clip { 19 | position: fixed !important; 20 | _position: absolute !important; 21 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 22 | clip: rect(1px, 1px, 1px, 1px); 23 | } 24 | 25 | @media (--breakpoint-not-small) { 26 | .clip-ns { 27 | position: fixed !important; 28 | _position: absolute !important; 29 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 30 | clip: rect(1px, 1px, 1px, 1px); 31 | } 32 | } 33 | 34 | @media (--breakpoint-medium) { 35 | .clip-m { 36 | position: fixed !important; 37 | _position: absolute !important; 38 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 39 | clip: rect(1px, 1px, 1px, 1px); 40 | } 41 | } 42 | 43 | @media (--breakpoint-large) { 44 | .clip-l { 45 | position: fixed !important; 46 | _position: absolute !important; 47 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 48 | clip: rect(1px, 1px, 1px, 1px); 49 | } 50 | } 51 | 52 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_white-space.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WHITE SPACE 4 | 5 | Media Query Extensions: 6 | -ns = not-small 7 | -m = medium 8 | -l = large 9 | 10 | */ 11 | 12 | 13 | .ws-normal { white-space: normal; } 14 | .nowrap { white-space: nowrap; } 15 | .pre { white-space: pre; } 16 | 17 | @media (--breakpoint-not-small) { 18 | .ws-normal-ns { white-space: normal; } 19 | .nowrap-ns { white-space: nowrap; } 20 | .pre-ns { white-space: pre; } 21 | } 22 | 23 | @media (--breakpoint-medium) { 24 | .ws-normal-m { white-space: normal; } 25 | .nowrap-m { white-space: nowrap; } 26 | .pre-m { white-space: pre; } 27 | } 28 | 29 | @media (--breakpoint-large) { 30 | .ws-normal-l { white-space: normal; } 31 | .nowrap-l { white-space: nowrap; } 32 | .pre-l { white-space: pre; } 33 | } 34 | 35 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_widths.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WIDTHS 4 | Docs: http://tachyons.io/docs/layout/widths/ 5 | 6 | Base: 7 | w = width 8 | 9 | Modifiers 10 | 1 = 1st step in width scale 11 | 2 = 2nd step in width scale 12 | 3 = 3rd step in width scale 13 | 4 = 4th step in width scale 14 | 5 = 5th step in width scale 15 | 16 | -10 = literal value 10% 17 | -20 = literal value 20% 18 | -25 = literal value 25% 19 | -30 = literal value 30% 20 | -33 = literal value 33% 21 | -34 = literal value 34% 22 | -40 = literal value 40% 23 | -50 = literal value 50% 24 | -60 = literal value 60% 25 | -70 = literal value 70% 26 | -75 = literal value 75% 27 | -80 = literal value 80% 28 | -90 = literal value 90% 29 | -100 = literal value 100% 30 | 31 | -third = 100% / 3 (Not supported in opera mini or IE8) 32 | -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) 33 | -auto = string value auto 34 | 35 | 36 | Media Query Extensions: 37 | -ns = not-small 38 | -m = medium 39 | -l = large 40 | 41 | */ 42 | 43 | /* Width Scale */ 44 | 45 | .w1 { width: 1rem; } 46 | .w2 { width: 2rem; } 47 | .w3 { width: 4rem; } 48 | .w4 { width: 8rem; } 49 | .w5 { width: 16rem; } 50 | 51 | .w-10 { width: 10%; } 52 | .w-20 { width: 20%; } 53 | .w-25 { width: 25%; } 54 | .w-30 { width: 30%; } 55 | .w-33 { width: 33%; } 56 | .w-34 { width: 34%; } 57 | .w-40 { width: 40%; } 58 | .w-50 { width: 50%; } 59 | .w-60 { width: 60%; } 60 | .w-70 { width: 70%; } 61 | .w-75 { width: 75%; } 62 | .w-80 { width: 80%; } 63 | .w-85 { width: 85%; } 64 | .w-90 { width: 90%; } 65 | .w-95 { width: 95%; } 66 | .w-100 { width: 100%; } 67 | 68 | .w-third { width: calc(100% / 3); } 69 | .w-two-thirds { width: calc(100% / 1.5); } 70 | .w-auto { width: auto; } 71 | 72 | @media (--breakpoint-not-small) { 73 | .w1-ns { width: 1rem; } 74 | .w2-ns { width: 2rem; } 75 | .w3-ns { width: 4rem; } 76 | .w4-ns { width: 8rem; } 77 | .w5-ns { width: 16rem; } 78 | .w-10-ns { width: 10%; } 79 | .w-20-ns { width: 20%; } 80 | .w-25-ns { width: 25%; } 81 | .w-30-ns { width: 30%; } 82 | .w-33-ns { width: 33%; } 83 | .w-34-ns { width: 34%; } 84 | .w-40-ns { width: 40%; } 85 | .w-50-ns { width: 50%; } 86 | .w-60-ns { width: 60%; } 87 | .w-70-ns { width: 70%; } 88 | .w-75-ns { width: 75%; } 89 | .w-80-ns { width: 80%; } 90 | .w-90-ns { width: 90%; } 91 | .w-95-ns { width: 95%; } 92 | .w-100-ns { width: 100%; } 93 | .w-third-ns { width: calc(100% / 3); } 94 | .w-two-thirds-ns { width: calc(100% / 1.5); } 95 | .w-auto-ns { width: auto; } 96 | } 97 | 98 | @media (--breakpoint-medium) { 99 | .w1-m { width: 1rem; } 100 | .w2-m { width: 2rem; } 101 | .w3-m { width: 4rem; } 102 | .w4-m { width: 8rem; } 103 | .w5-m { width: 16rem; } 104 | .w-10-m { width: 10%; } 105 | .w-20-m { width: 20%; } 106 | .w-25-m { width: 25%; } 107 | .w-30-m { width: 30%; } 108 | .w-33-m { width: 33%; } 109 | .w-34-m { width: 34%; } 110 | .w-40-m { width: 40%; } 111 | .w-50-m { width: 50%; } 112 | .w-60-m { width: 60%; } 113 | .w-70-m { width: 70%; } 114 | .w-75-m { width: 75%; } 115 | .w-80-m { width: 80%; } 116 | .w-90-m { width: 90%; } 117 | .w-95-m { width: 95%; } 118 | .w-100-m { width: 100%; } 119 | .w-third-m { width: calc(100% / 3); } 120 | .w-two-thirds-m { width: calc(100% / 1.5); } 121 | .w-auto-m { width: auto; } 122 | } 123 | 124 | @media (--breakpoint-large) { 125 | .w1-l { width: 1rem; } 126 | .w2-l { width: 2rem; } 127 | .w3-l { width: 4rem; } 128 | .w4-l { width: 8rem; } 129 | .w5-l { width: 16rem; } 130 | .w-10-l { width: 10%; } 131 | .w-20-l { width: 20%; } 132 | .w-25-l { width: 25%; } 133 | .w-30-l { width: 30%; } 134 | .w-33-l { width: 33%; } 135 | .w-34-l { width: 34%; } 136 | .w-40-l { width: 40%; } 137 | .w-50-l { width: 50%; } 138 | .w-60-l { width: 60%; } 139 | .w-70-l { width: 70%; } 140 | .w-75-l { width: 75%; } 141 | .w-80-l { width: 80%; } 142 | .w-90-l { width: 90%; } 143 | .w-95-l { width: 95%; } 144 | .w-100-l { width: 100%; } 145 | .w-third-l { width: calc(100% / 3); } 146 | .w-two-thirds-l { width: calc(100% / 1.5); } 147 | .w-auto-l { width: auto; } 148 | } 149 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_word-break.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WORD BREAK 4 | 5 | Base: 6 | word = word-break 7 | 8 | Media Query Extensions: 9 | -ns = not-small 10 | -m = medium 11 | -l = large 12 | 13 | */ 14 | 15 | .word-normal { word-break: normal; } 16 | .word-wrap { word-break: break-all; } 17 | .word-nowrap { word-break: keep-all; } 18 | 19 | @media (--breakpoint-not-small) { 20 | .word-normal-ns { word-break: normal; } 21 | .word-wrap-ns { word-break: break-all; } 22 | .word-nowrap-ns { word-break: keep-all; } 23 | } 24 | 25 | @media (--breakpoint-medium) { 26 | .word-normal-m { word-break: normal; } 27 | .word-wrap-m { word-break: break-all; } 28 | .word-nowrap-m { word-break: keep-all; } 29 | } 30 | 31 | @media (--breakpoint-large) { 32 | .word-normal-l { word-break: normal; } 33 | .word-wrap-l { word-break: break-all; } 34 | .word-nowrap-l { word-break: keep-all; } 35 | } 36 | 37 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/_z-index.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Z-INDEX 4 | 5 | Base 6 | z = z-index 7 | 8 | Modifiers 9 | -0 = literal value 0 10 | -1 = literal value 1 11 | -2 = literal value 2 12 | -3 = literal value 3 13 | -4 = literal value 4 14 | -5 = literal value 5 15 | -999 = literal value 999 16 | -9999 = literal value 9999 17 | 18 | -max = largest accepted z-index value as integer 19 | 20 | -inherit = string value inherit 21 | -initial = string value initial 22 | -unset = string value unset 23 | 24 | MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index 25 | Spec: http://www.w3.org/TR/CSS2/zindex.html 26 | Articles: 27 | https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ 28 | 29 | Tips on extending: 30 | There might be a time worth using negative z-index values. 31 | Or if you are using tachyons with another project, you might need to 32 | adjust these values to suit your needs. 33 | 34 | */ 35 | 36 | .z-0 { z-index: 0; } 37 | .z-1 { z-index: 1; } 38 | .z-2 { z-index: 2; } 39 | .z-3 { z-index: 3; } 40 | .z-4 { z-index: 4; } 41 | .z-5 { z-index: 5; } 42 | 43 | .z-999 { z-index: 999; } 44 | .z-9999 { z-index: 9999; } 45 | 46 | .z-max { 47 | z-index: 2147483647; 48 | } 49 | 50 | .z-inherit { z-index: inherit; } 51 | .z-initial { z-index: initial; } 52 | .z-unset { z-index: unset; } 53 | 54 | -------------------------------------------------------------------------------- /src/styles/tachyons/src/tachyons.css: -------------------------------------------------------------------------------- 1 | /*! TACHYONS v4.11.2 | http://tachyons.io */ 2 | 3 | /* 4 | * 5 | * ________ ______ 6 | * ___ __/_____ _________ /______ ______________________ 7 | * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ 8 | * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) 9 | * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ 10 | * /____/ 11 | * 12 | * TABLE OF CONTENTS 13 | * 14 | * 1. External Library Includes 15 | * - Normalize.css | http://normalize.css.github.io 16 | * 2. Tachyons Modules 17 | * 3. Variables 18 | * - Media Queries 19 | * - Colors 20 | * 4. Debugging 21 | * - Debug all 22 | * - Debug children 23 | * 24 | */ 25 | 26 | 27 | /* External Library Includes */ 28 | @import './_normalize'; 29 | 30 | 31 | /* Modules */ 32 | @import './_box-sizing'; 33 | @import './_aspect-ratios'; 34 | @import './_images'; 35 | @import './_background-size'; 36 | @import './_background-position'; 37 | @import './_outlines'; 38 | @import './_borders'; 39 | @import './_border-colors'; 40 | @import './_border-radius'; 41 | @import './_border-style'; 42 | @import './_border-widths'; 43 | @import './_box-shadow'; 44 | @import './_code'; 45 | @import './_coordinates'; 46 | @import './_clears'; 47 | @import './_display'; 48 | @import './_flexbox'; 49 | @import './_floats'; 50 | @import './_font-family'; 51 | @import './_font-style'; 52 | @import './_font-weight'; 53 | @import './_forms'; 54 | @import './_heights'; 55 | @import './_letter-spacing'; 56 | @import './_line-height'; 57 | @import './_links'; 58 | @import './_lists'; 59 | @import './_max-widths'; 60 | @import './_widths'; 61 | @import './_overflow'; 62 | @import './_position'; 63 | @import './_opacity'; 64 | @import './_rotations'; 65 | @import './_skins'; 66 | @import './_skins-pseudo'; 67 | @import './_spacing'; 68 | @import './_negative-margins'; 69 | @import './_tables'; 70 | @import './_text-decoration'; 71 | @import './_text-align'; 72 | @import './_text-transform'; 73 | @import './_type-scale'; 74 | @import './_typography'; 75 | @import './_utilities'; 76 | @import './_visibility'; 77 | @import './_white-space'; 78 | @import './_vertical-align'; 79 | @import './_hovers'; 80 | @import './_z-index'; 81 | @import './_nested'; 82 | @import './_styles'; 83 | 84 | /* Variables */ 85 | /* Importing here will allow you to override any variables in the modules */ 86 | @import './_colors'; 87 | @import './_media-queries'; 88 | 89 | /* Debugging */ 90 | @import './_debug-children'; 91 | @import './_debug-grid'; 92 | 93 | /* Uncomment out the line below to help debug layout issues */ 94 | /* @import './_debug'; */ 95 | -------------------------------------------------------------------------------- /src/utils/ccFormat.js: -------------------------------------------------------------------------------- 1 | function cc_format(value) { 2 | var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '') 3 | var matches = v.match(/\d{4,16}/g); 4 | var match = (matches && matches[0]) || '' 5 | var parts = [] 6 | for (let i = 0, len = match.length; i < len; i += 4) { 7 | parts.push(match.substring(i, i + 4)) 8 | } 9 | if (parts.length) { 10 | return parts.join(' ') 11 | } 12 | return value 13 | } 14 | 15 | export default cc_format; 16 | --------------------------------------------------------------------------------