POC responsive widget in Flex Direction docs
This commit is contained in:
Adam Wathan
parent
d3727efa00
commit
0bd33a8f73
19 changed files with 11835 additions and 70 deletions
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"/source/js/app.js": "/source/js/app.js",
|
||||
"/source/css/main.css": "/source/css/main.css"
|
||||
}
|
||||
|
|
@ -2,16 +2,19 @@
|
|||
"scripts": {
|
||||
"dev": "npm run compile-css-js && jigsaw build",
|
||||
"compile-css-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"watch-js": "chokidar 'source/_assets/js/**/*' --initial=true -c 'npm run compile-css-js'",
|
||||
"watch-css": "chokidar 'tailwind.js' 'source/_assets/less/**/*' --initial=true -c 'npm run compile-css-js'",
|
||||
"watch-templates": "chokidar 'source/**/*' --initial=true -c 'jigsaw build'",
|
||||
"watch": "concurrently \"npm run watch-css\" \"npm run watch-templates\"",
|
||||
"watch": "concurrently \"npm run watch-css\" \"npm run watch-js\" \"npm run watch-templates\"",
|
||||
"prod": "npm run production && jigsaw build production",
|
||||
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
|
||||
},
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"cross-env": "^3.2.3",
|
||||
"laravel-mix": "^1.5.1"
|
||||
"escape-html": "^1.0.3",
|
||||
"laravel-mix": "^1.5.1",
|
||||
"vue": "^2.5.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"chokidar-cli": "^1.2.0",
|
||||
|
|
|
|||
7
docs/source/_assets/js/app.js
Normal file
7
docs/source/_assets/js/app.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
window.Vue = require('vue')
|
||||
|
||||
Vue.component('responsive-code-sample', require('./components/ResponsiveCodeSample.vue'))
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app'
|
||||
})
|
||||
42
docs/source/_assets/js/components/ResponsiveCodeSample.vue
Normal file
42
docs/source/_assets/js/components/ResponsiveCodeSample.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="flex items-end justify-end pb-2">
|
||||
<svg class="inline-block cursor-pointer mr-4" :class="activeScreen === 'none' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'none'" width="12" height="20" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M3.625 9a.6.6 0 0 0-.184-.441A.607.607 0 0 0 3 8.375a.596.596 0 0 0-.441.184.604.604 0 0 0-.184.441c0 .17.061.318.184.441s.27.185.441.184a.607.607 0 0 0 .441-.184A.6.6 0 0 0 3.625 9zM5.25 7.75v-5.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 5 2H1a.24.24 0 0 0-.176.074.24.24 0 0 0-.074.176v5.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 1 8h4a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm-1.5-6.625c0-.083-.042-.125-.125-.125h-1.25c-.083 0-.125.042-.125.125 0 .083.042.125.125.125h1.25c.083 0 .125-.042.125-.125zM6 1v8a.96.96 0 0 1-.297.703A.96.96 0 0 1 5 10H1a.96.96 0 0 1-.703-.297A.96.96 0 0 1 0 9V1A.96.96 0 0 1 .297.297.96.96 0 0 1 1 0h4a.96.96 0 0 1 .703.297A.96.96 0 0 1 6 1z"/></svg>
|
||||
<svg class="inline-block cursor-pointer mr-4" :class="activeScreen === 'sm' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'sm'" width="18" height="22" viewBox="0 0 9 11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M5 10a.483.483 0 0 0-.148-.352A.476.476 0 0 0 4.5 9.5a.486.486 0 0 0-.352.148A.479.479 0 0 0 4 10c0 .137.05.254.148.352a.486.486 0 0 0 .352.148.476.476 0 0 0 .352-.148A.483.483 0 0 0 5 10zm3-1.25v-7.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 7.75 1h-6.5a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v7.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 1.25 9h6.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 8 8.75zm1-7.5v8.5c0 .344-.122.638-.367.883A1.204 1.204 0 0 1 7.75 11h-6.5c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 9.75v-8.5C0 .906.122.612.367.367S.906 0 1.25 0h6.5c.344 0 .638.122.883.367S9 .906 9 1.25z"/></svg>
|
||||
<svg class="inline-block cursor-pointer mr-4" :class="activeScreen === 'md' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'md'" width="28" height="22" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M1 6c.135 0 .253-.05.352-.148A.476.476 0 0 0 1.5 5.5a.486.486 0 0 0-.148-.352A.479.479 0 0 0 1 5a.479.479 0 0 0-.352.148A.486.486 0 0 0 .5 5.5c0 .136.049.253.148.352C.748 5.951.865 6 1 6zm1.25 4h10.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 13 9.75v-8.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 12.75 1H2.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 2 1.25v8.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074zm10.5 1H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 9.75v-8.5C0 .906.122.612.367.367S.906 0 1.25 0h11.5c.344 0 .638.122.883.367S14 .906 14 1.25v8.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367z"/></svg>
|
||||
<svg class="inline-block cursor-pointer mr-4" :class="activeScreen === 'lg' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'lg'" width="34" height="24" viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M2.25 10c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 1 8.75v-7.5c0-.344.122-.638.367-.883S1.906 0 2.25 0h12.5c.344 0 .638.122.883.367S16 .906 16 1.25v7.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H2.25zM2 1.25v7.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 2.25 9h12.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 15 8.75v-7.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 14.75 1H2.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 2 1.25zm13.75 9.25H17v.75c0 .208-.122.385-.367.531-.245.146-.539.219-.883.219H1.25c-.344 0-.638-.073-.883-.219C.122 11.635 0 11.458 0 11.25v-.75h15.75zm-6.625.75c.083 0 .125-.042.125-.125 0-.083-.042-.125-.125-.125h-1.25c-.083 0-.125.042-.125.125 0 .083.042.125.125.125h1.25z"/></svg>
|
||||
<svg class="inline-block cursor-pointer" :class="activeScreen === 'xl' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'xl'" width="38" height="30" viewBox="0 0 19 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M18 10.75v-9.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 17.75 1H1.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v9.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h16.5a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm1-9.5v10.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H11.5c0 .193.042.394.125.605.083.21.167.396.25.555.083.16.125.273.125.34 0 .135-.05.253-.148.352A.476.476 0 0 1 11.5 15h-4a.483.483 0 0 1-.352-.148A.476.476 0 0 1 7 14.5c0-.073.042-.187.125-.344.083-.157.167-.339.25-.547.083-.208.125-.411.125-.609H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 11.75V1.25C0 .906.122.612.367.367S.906 0 1.25 0h16.5c.344 0 .638.122.883.367S19 .906 19 1.25z"/></svg>
|
||||
</div>
|
||||
<div class="rounded mask border-2 border-smoke mb-8">
|
||||
<div class="p-4 bg-smoke-lighter border-b-2 border-smoke">
|
||||
<div class="whitespace-pre font-mono text-slate-lighter text-sm overflow-x-scroll" v-html="highlightedCode"></div>
|
||||
</div>
|
||||
<div class="bg-white p-4">
|
||||
<slot v-if="activeScreen === 'none'" name="none"></slot>
|
||||
<slot v-if="activeScreen === 'sm'" name="sm"></slot>
|
||||
<slot v-if="activeScreen === 'md'" name="md"></slot>
|
||||
<slot v-if="activeScreen === 'lg'" name="lg"></slot>
|
||||
<slot v-if="activeScreen === 'xl'" name="xl"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import escape from 'escape-html'
|
||||
|
||||
export default {
|
||||
props: ['code'],
|
||||
data() {
|
||||
return {
|
||||
activeScreen: 'none',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
highlightedCode() {
|
||||
const regex = new RegExp(`(${this.activeScreen}\:[^\\s\\&]+)`, 'g')
|
||||
return escape(this.code).replace(regex, '<span class="text-purple">$1</span>').replace(/none:/g, '')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -72,7 +72,7 @@ pre[class*="language-"] {
|
|||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
@apply .text-slate-lighter;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
@if (isset($title))
|
||||
<title>{{ $title . ' - Tailwind CSS' }}</title>
|
||||
@else
|
||||
<title>{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS' }}</title>
|
||||
@endif
|
||||
<style>
|
||||
@import url("https://use.typekit.net/iqy1okj.css");
|
||||
</style>
|
||||
|
|
@ -13,7 +17,7 @@
|
|||
<script type="text/javascript" src="/js/prism.js" defer=""></script>
|
||||
</head>
|
||||
<body class="font-sans font-normal text-slate-darker leading-normal">
|
||||
<div class="min-h-screen">
|
||||
<div id="app" class="min-h-screen">
|
||||
<div class="fixed pin-y pin-l bg-smoke-light w-full max-w-xs flex-none overflow-y-scroll border-r-2 border-smoke">
|
||||
<div class="text-center border-b border-smoke p-8">
|
||||
<svg class="h-8 mr-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
|
||||
|
|
@ -176,5 +180,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
7
docs/source/_partials/responsive-code-sample.blade.php
Normal file
7
docs/source/_partials/responsive-code-sample.blade.php
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<responsive-code-sample code="{{ e($code) }}">
|
||||
<div slot="none">{{ $none }}</div>
|
||||
<div slot="sm">{{ $sm }}</div>
|
||||
<div slot="md">{{ $md }}</div>
|
||||
<div slot="lg">{{ $lg }}</div>
|
||||
<div slot="xl">{{ $xl }}</div>
|
||||
</responsive-code-sample>
|
||||
11637
docs/source/js/app.js
Normal file
11637
docs/source/js/app.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,64 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
<div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
|
||||
|
||||
# Flex Direction
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
</div>
|
||||
|
||||
Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
|
||||
|
||||
<h2>Row <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
|
||||
|
||||
Use `.flex-row` to position flex items horizontally in the same direction as text:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-row bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Row reversed
|
||||
|
||||
Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-row-reverse bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Column
|
||||
|
||||
Use `.flex-col` to position flex items vertically:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-col bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Column reversed
|
||||
|
||||
Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-col-reverse bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
110
docs/source/styles/flexbox/direction.blade.php
Normal file
110
docs/source/styles/flexbox/direction.blade.php
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
@extends('_layouts.markdown', ['title' => 'Flex Direction'])
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
|
||||
|
||||
<h1>Flex Direction</h1>
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
</div>
|
||||
|
||||
<p>Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.</p>
|
||||
|
||||
<h2>Responsive</h2>
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex flex-row bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex flex-col bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex flex-row-reverse bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex flex-col-reverse bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex flex-row bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:flex-row sm:flex-col md:flex-row-reverse lg:flex-col-reverse xl:flex-row ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
<h2>Row <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
|
||||
|
||||
<p>Use <code>.flex-row</code> to position flex items horizontally in the same direction as text:</p>
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-row bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
<h2>Row reversed</h2>
|
||||
|
||||
<p>Use <code>.flex-row-reverse</code> to position flex items horizontally in the opposite direction:</p>
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-row-reverse bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
<h2>Column</h2>
|
||||
|
||||
<p>Use <code>.flex-col</code> to position flex items vertically:</p>
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-col bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
<h2>Column reversed</h2>
|
||||
|
||||
<p>Use <code>.flex-col-reverse</code> to position flex items vertically in the opposite direction:</p>
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-col-reverse bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
@endsection
|
||||
1
docs/source/svg/desktop.svg
Executable file
1
docs/source/svg/desktop.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<svg width="42" height="32" viewBox="0 0 21 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M20 11.75V1.25a.24.24 0 0 0-.074-.176A.24.24 0 0 0 19.75 1H1.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v10.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h18.5a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm1-10.5v11.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H12.5c0 .193.042.394.125.605.083.21.167.396.25.555.083.16.125.273.125.34 0 .135-.05.253-.148.352A.476.476 0 0 1 12.5 16h-4a.483.483 0 0 1-.352-.148A.476.476 0 0 1 8 15.5c0-.073.042-.187.125-.344.083-.157.167-.339.25-.547.083-.208.125-.411.125-.609H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 12.75V1.25C0 .906.122.612.367.367S.906 0 1.25 0h18.5c.344 0 .638.122.883.367S21 .906 21 1.25z"/></svg>
|
||||
|
After Width: | Height: | Size: 814 B |
1
docs/source/svg/landscape-tablet.svg
Executable file
1
docs/source/svg/landscape-tablet.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(0 4)"/><defs><path id="a" d="M1 6c.135 0 .253-.05.352-.148A.476.476 0 0 0 1.5 5.5a.486.486 0 0 0-.148-.352A.479.479 0 0 0 1 5a.479.479 0 0 0-.352.148A.486.486 0 0 0 .5 5.5a.48.48 0 0 0 .148.352C.748 5.951.865 6 1 6zm1.25 4h10.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 13 9.75v-8.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 12.75 1H2.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 2 1.25v8.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074zm10.5 1H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 9.75v-8.5C0 .906.122.612.367.367S.906 0 1.25 0h11.5c.344 0 .638.122.883.367S14 .906 14 1.25v8.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367z"/></defs></svg>
|
||||
|
After Width: | Height: | Size: 817 B |
1
docs/source/svg/laptop.svg
Executable file
1
docs/source/svg/laptop.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 19 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><use xlink:href="#a"/><defs><path id="a" d="M2.25 12c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 1 10.75v-9.5c0-.344.122-.638.367-.883S1.906 0 2.25 0h14.5c.344 0 .638.122.883.367S18 .906 18 1.25v9.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H2.25zM2 1.25v9.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h14.5a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176v-9.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 16.75 1H2.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 2 1.25zM17.75 12.5H19v.75c0 .208-.122.385-.367.531-.245.146-.539.219-.883.219H1.25c-.344 0-.638-.073-.883-.219C.122 13.635 0 13.458 0 13.25v-.75h17.75zm-7.625.75c.083 0 .125-.042.125-.125 0-.083-.042-.125-.125-.125h-1.25c-.083 0-.125.042-.125.125 0 .083.042.125.125.125h1.25z"/></defs></svg>
|
||||
|
After Width: | Height: | Size: 878 B |
1
docs/source/svg/mobile.svg
Executable file
1
docs/source/svg/mobile.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 6 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(0 5)"/><defs><path id="a" d="M3.625 9a.6.6 0 0 0-.184-.441A.607.607 0 0 0 3 8.375a.596.596 0 0 0-.441.184.604.604 0 0 0-.184.441c0 .17.061.318.184.441s.27.185.441.184a.607.607 0 0 0 .441-.184A.6.6 0 0 0 3.625 9zM5.25 7.75v-5.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 5 2H1a.24.24 0 0 0-.176.074.24.24 0 0 0-.074.176v5.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 1 8h4a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm-1.5-6.625c0-.083-.042-.125-.125-.125h-1.25c-.083 0-.125.042-.125.125 0 .083.042.125.125.125h1.25c.083 0 .125-.042.125-.125zM6 1v8a.96.96 0 0 1-.297.703A.96.96 0 0 1 5 10H1a.96.96 0 0 1-.703-.297A.96.96 0 0 1 0 9V1A.96.96 0 0 1 .297.297.96.96 0 0 1 1 0h4a.96.96 0 0 1 .703.297A.96.96 0 0 1 6 1z"/></defs></svg>
|
||||
|
After Width: | Height: | Size: 889 B |
1
docs/source/svg/tablet.svg
Executable file
1
docs/source/svg/tablet.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 9 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(0 4)"/><defs><path id="a" d="M5 10a.483.483 0 0 0-.148-.352A.476.476 0 0 0 4.5 9.5a.486.486 0 0 0-.352.148A.479.479 0 0 0 4 10c0 .137.05.254.148.352a.486.486 0 0 0 .352.148.476.476 0 0 0 .352-.148A.483.483 0 0 0 5 10zm3-1.25v-7.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 7.75 1h-6.5a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v7.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 1.25 9h6.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 8 8.75zm1-7.5v8.5c0 .344-.122.638-.367.883A1.204 1.204 0 0 1 7.75 11h-6.5c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 9.75v-8.5C0 .906.122.612.367.367S.906 0 1.25 0h6.5c.344 0 .638.122.883.367S9 .906 9 1.25z"/></defs></svg>
|
||||
|
After Width: | Height: | Size: 809 B |
1
docs/source/svg/widescreen.svg
Executable file
1
docs/source/svg/widescreen.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 21 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><use xlink:href="#a"/><defs><path id="a" d="M20 11.75V1.25a.24.24 0 0 0-.074-.176A.24.24 0 0 0 19.75 1H1.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v10.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h18.5a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm1-10.5v10.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H12.5c0 .193.042.394.125.605.083.21.167.396.25.555.083.16.125.273.125.34 0 .135-.05.253-.148.352A.476.476 0 0 1 12.5 15h-4a.483.483 0 0 1-.352-.148A.476.476 0 0 1 8 14.5c0-.073.042-.187.125-.344.083-.157.167-.339.25-.547.083-.208.125-.411.125-.609H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 11.75V1.25C0 .906.122.612.367.367S.906 0 1.25 0h18.5c.344 0 .638.122.883.367S21 .906 21 1.25z"/></defs></svg>
|
||||
|
After Width: | Height: | Size: 857 B |
6
docs/svgo.yml
Normal file
6
docs/svgo.yml
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
multipass: true
|
||||
plugins:
|
||||
- removeTitle: true
|
||||
- removeDimensions: true
|
||||
- removeAttrs:
|
||||
- attrs: 'fill'
|
||||
|
|
@ -12,7 +12,8 @@ const tailwind = require('./../lib/index.js');
|
|||
|
|
||||
*/
|
||||
|
||||
mix.less('source/_assets/less/main.less', 'source/css')
|
||||
mix.js('source/_assets/js/app.js', 'source/js')
|
||||
.less('source/_assets/less/main.less', 'source/css')
|
||||
.options({
|
||||
postCss: [
|
||||
tailwind('tailwind.js'),
|
||||
|
|
|
|||
|
|
@ -2127,7 +2127,7 @@ es6-weak-map@^2.0.1:
|
|||
es6-iterator "^2.0.1"
|
||||
es6-symbol "^3.1.1"
|
||||
|
||||
escape-html@~1.0.3:
|
||||
escape-html@^1.0.3, escape-html@~1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
|
||||
|
||||
|
|
@ -6777,6 +6777,10 @@ vue-template-es2015-compiler@^1.6.0:
|
|||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
|
||||
|
||||
vue@^2.5.2:
|
||||
version "2.5.2"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.2.tgz#fd367a87bae7535e47f9dc5c9ec3b496e5feb5a4"
|
||||
|
||||
ware@^1.2.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/ware/-/ware-1.3.0.tgz#d1b14f39d2e2cb4ab8c4098f756fe4b164e473d4"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue