mirror of
https://github.com/anatolykopyl/vue-highlights.git
synced 2026-03-26 12:55:35 +00:00
first commit
This commit is contained in:
Pedro G. Galaviz
90
docs-src/App.vue
Normal file
90
docs-src/App.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<nav id="nav">
|
||||
<div class="flex vcenter between container">
|
||||
<div class="flex vcenter">
|
||||
<img alt="Vue logo" src="@/assets/logo.png" class="mr-sm">
|
||||
<router-link to="/">
|
||||
<h1>vue-highlights</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="flex vcenter">
|
||||
<router-link class="nav-item" :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
<router-link class="nav-item" :to="{ name: 'docs' }">
|
||||
Documentation
|
||||
</router-link>
|
||||
<a class="nav-item" href="https://github.com/pggalaviz/vue-highlights" title="Github" target="_blank">
|
||||
<div class="nav-icon">
|
||||
<svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"></path></svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<router-view/>
|
||||
|
||||
<footer id="footer" class="flex center py-md mt-lg">
|
||||
<div class="text-center">
|
||||
<div> © 2019 Pedro G. Galaviz </div>
|
||||
<a class="text-sm" href="http://pggalaviz.com">pggalaviz.com</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '~@vars'
|
||||
|
||||
#app
|
||||
padding-top: 80px
|
||||
|
||||
#nav
|
||||
#footer
|
||||
background-color: $color-background
|
||||
width: 100%
|
||||
|
||||
#nav
|
||||
border-bottom: 1px solid #eaeaea
|
||||
height: 50px
|
||||
left: 0
|
||||
position: fixed
|
||||
top: 0
|
||||
z-index: 5
|
||||
h1
|
||||
line-height: 50px
|
||||
font-size: 20px
|
||||
margin: 0px
|
||||
img
|
||||
width: 24px
|
||||
height: auto
|
||||
|
||||
.nav-item
|
||||
color: $color-gray-8
|
||||
font-size: 12px
|
||||
font-weight: bold
|
||||
margin-left: $space-base
|
||||
transition: all .3s ease
|
||||
&:hover
|
||||
color: $color-brand
|
||||
|
||||
.nav-icon
|
||||
fill: $color-gray-8
|
||||
height: auto
|
||||
margin-top: 4px
|
||||
transition: all .3s ease
|
||||
width: 20px
|
||||
&:hover
|
||||
fill: $color-brand
|
||||
|
||||
#footer
|
||||
border-top: 1px solid #eaeaea
|
||||
</style>
|
||||
339
docs-src/Docs.vue
Normal file
339
docs-src/Docs.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div id="docs">
|
||||
<div class="container">
|
||||
<h2>Documentation</h2>
|
||||
<h3>Installation</h3>
|
||||
|
||||
<p>You can install via npm or yarn:</p>
|
||||
|
||||
<CodeSnippet lang="shell" :code="code1" />
|
||||
|
||||
<p>And then import the component in your app:</p>
|
||||
|
||||
<CodeSnippet lang="js" :code="code2" />
|
||||
|
||||
<h3>Usage</h3>
|
||||
|
||||
<p>Let's create our first component:</p>
|
||||
|
||||
<CodeSnippet lang="js" :code="code3" />
|
||||
|
||||
<p>As you can see, the component accepts some props:</p>
|
||||
|
||||
<table class="text-sm" style="width: 100%;">
|
||||
<thead class="mb-sm">
|
||||
<tr>
|
||||
<th>Prop</th>
|
||||
<th class="px-sm">Type</th>
|
||||
<th colspan="2">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="props-name-col">
|
||||
<div class="props-name">
|
||||
extractUrlsWithoutProtocol
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-type-col px-sm">
|
||||
<div class="props-type">
|
||||
Boolean
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-desc-col">
|
||||
<div class="props-desc">
|
||||
As the name says, when active, the compoponet will try to match
|
||||
URLs even when a protocol (http://, https://) is not found.
|
||||
<b>Defaults to true</b>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="props-name-col">
|
||||
<div class="props-name">
|
||||
caretColor
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-type-col px-sm">
|
||||
<div class="props-type">
|
||||
String
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-desc-col">
|
||||
<div class="props-desc">
|
||||
A valid HEX color (eg. #ccc, #ff4545).
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="props-name-col">
|
||||
<div class="props-name">
|
||||
placeholder
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-type-col px-sm">
|
||||
<div class="props-type">
|
||||
String
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-desc-col">
|
||||
<div class="props-desc">
|
||||
A placeholder to show when no text is entered.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="props-name-col">
|
||||
<div class="props-name">
|
||||
usernameClass
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-type-col px-sm">
|
||||
<div class="props-type">
|
||||
String
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-desc-col">
|
||||
<div class="props-desc">
|
||||
The CSS class(es) that will be added to a @username match.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="props-name-col">
|
||||
<div class="props-name">
|
||||
hashtagClass
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-type-col px-sm">
|
||||
<div class="props-type">
|
||||
String
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-desc-col">
|
||||
<div class="props-desc">
|
||||
The CSS class(es) that will be added to a #hashtag match.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="props-name-col">
|
||||
<div class="props-name">
|
||||
urlClass
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-type-col px-sm">
|
||||
<div class="props-type">
|
||||
String
|
||||
</div>
|
||||
</td>
|
||||
<td class="props-desc-col">
|
||||
<div class="props-desc">
|
||||
The CSS class(es) that will be added to a URL match.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
The exported component (vue-highlights) renders a text
|
||||
input that highlights all username, hashtag and URL matches. In order to
|
||||
work with this input some CSS classes should be attended, here's an
|
||||
example:
|
||||
</p>
|
||||
|
||||
<CodeSnippet lang="css" :code="code4" />
|
||||
|
||||
<p>With this we should get a working example.</p>
|
||||
|
||||
<p>As you can see when we first imported the package, 2 functions are also
|
||||
exported: <b>autoLink</b> and <b>autoHighlight</b>.
|
||||
</p>
|
||||
<p>
|
||||
Both return a <b>String</b> value which contains our highlighted text.
|
||||
<b>autoLink</b> returns the matches found between <b>anchor</b> tags for
|
||||
links.
|
||||
<b>autoHighlight</b> returns the matches found between <b>span</b> tags for
|
||||
highlight only.
|
||||
</p>
|
||||
<h5>Examples</h5>
|
||||
|
||||
<CodeSnippet lang="js" :code="code5" />
|
||||
|
||||
<p>Now we can render our linked/highlighted text anywhere we like:</p>
|
||||
|
||||
<CodeSnippet lang="js" :code="code6" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeSnippet from './components/CodeSnippet'
|
||||
|
||||
const code1 = `
|
||||
npm install --save vue-highlights
|
||||
yarn add vue-highlights
|
||||
`
|
||||
|
||||
const code2 = `
|
||||
import Vue from 'vue'
|
||||
import VueHighlights, { autoLink, autoHighlight } from 'vue-highlights'
|
||||
|
||||
// Install component
|
||||
Vue.component(VueHighlights.name, VueHighlights)
|
||||
`
|
||||
|
||||
const code3 = `
|
||||
<template>
|
||||
<vue-highlights
|
||||
v-model="text"
|
||||
:extractUrlsWithoutProtocol="true"
|
||||
caretColor="#ccc"
|
||||
placeholder="My custom placeholder..."
|
||||
usernameClass="my-username-class"
|
||||
hashtagClass="my-hash-class"
|
||||
urlClass="my-url-class"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
data () {
|
||||
return {
|
||||
text: text
|
||||
}
|
||||
}
|
||||
}
|
||||
${'<'}/script>
|
||||
`
|
||||
|
||||
const code4 = `
|
||||
.highlights__content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlights__placeholder {
|
||||
color: #ccc;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.highlights__body-container {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.highlights__body {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.highlights {
|
||||
color: #ff3b8e;
|
||||
}
|
||||
`
|
||||
|
||||
const code5 = `
|
||||
import { autoLink, autoHighlight } from 'vue-highlights'
|
||||
|
||||
const text = 'my @username, my #hashtag and myurl.com'
|
||||
|
||||
const autoLinked = autoLink(text, {
|
||||
extractUrlsWithoutProtocol: true, // Defaults to true
|
||||
targetBlank: true, // Defauls to true, applies only in URLs
|
||||
usernameClass: 'username-class',
|
||||
usernameUrlBase: '/users/',
|
||||
hashtagClass: 'hashtag-class',
|
||||
hashtagUrlBase: '/myhashtags/',
|
||||
urlClass: 'url-class'
|
||||
})
|
||||
|
||||
/*
|
||||
autoLinked:
|
||||
my <a href="/users/username" title="@username" class="username-class"
|
||||
data-username="username">@username</a>, my <a href="/myhashtags/hashtag"
|
||||
title="#hashtag" class="hashtag-class" data-hashtag="hashtag">#hashtag</a>
|
||||
and <a href="http://myurl.com" target="_blank" class="url-class">myurl.com</a>
|
||||
*/
|
||||
|
||||
const autoHighlighted = autoHighlight(text, {
|
||||
extractUrlsWithoutProtocol: true, // Defaults to true
|
||||
usernameClass: 'username-class',
|
||||
hashtagClass: 'hashtag-class',
|
||||
urlClass: 'url-class'
|
||||
})
|
||||
|
||||
/*
|
||||
autoLinked:
|
||||
my <span class="username-class">@username</span>, my <span class="hashtag-class">
|
||||
#hashtag</span> and <span class="url-class">myurl.com</span>
|
||||
*/
|
||||
`
|
||||
|
||||
const code6 = `
|
||||
<template>
|
||||
<div class="my-linked-text">
|
||||
<div v-html="text"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { autoLink } from 'vue-highlights'
|
||||
|
||||
const rawText = 'my @username, my #hashtag and myurl.com'
|
||||
const autoLinked = autoLink(rawText) // Uses default options
|
||||
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
data () {
|
||||
return {
|
||||
text: autoLinked
|
||||
}
|
||||
}
|
||||
}
|
||||
${'<'}/script>
|
||||
`
|
||||
|
||||
export default {
|
||||
name: 'Docs',
|
||||
components: { CodeSnippet },
|
||||
data () {
|
||||
return {
|
||||
code1,
|
||||
code2,
|
||||
code3,
|
||||
code4,
|
||||
code5,
|
||||
code6
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '~@vars'
|
||||
|
||||
.props-name-col
|
||||
width: 30%
|
||||
|
||||
.props-type-col
|
||||
width: 10%
|
||||
|
||||
.props-name
|
||||
color: $color-brand
|
||||
font-weight: 500
|
||||
|
||||
.props-type
|
||||
color: $color-gray-6
|
||||
font-weight: 600
|
||||
|
||||
</style>
|
||||
151
docs-src/Home.vue
Normal file
151
docs-src/Home.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div id="home" class="text-center">
|
||||
<img id="logo" alt="Vue logo" src="./assets/logo.png">
|
||||
|
||||
<h1>vue-highlights</h1>
|
||||
|
||||
<div id="description" class="mb-md">
|
||||
<b>Easy mention, hashtag and URL highlight for Vue 2.x</b>
|
||||
</div>
|
||||
|
||||
<div class="flex center mb-md text-sm">
|
||||
<div id="install" class="pa-md font-mono content-container">
|
||||
npm install --save vue-highlights
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex center text-md">
|
||||
<vue-highlights
|
||||
v-model="text"
|
||||
class="content-container"
|
||||
:placeholder="placeholder"
|
||||
:caretColor="caretColor"
|
||||
:extractUrlsWithoutProtocol="options.extractUrlsWithoutProtocol"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex center my-md">
|
||||
<div id="options" class="content-container">
|
||||
<h4>Options (props)</h4>
|
||||
<div class="flex center">
|
||||
<label for="ep" class="mr-lg cursor-pointer">
|
||||
<input id="ep" type="checkbox" v-model="options.extractUrlsWithoutProtocol">
|
||||
extractUrlsWithoutProtocol
|
||||
</label>
|
||||
<label for="tb" class="cursor-pointer">
|
||||
<input id="tb" type="checkbox" v-model="options.targetBlank">
|
||||
targetBlank
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex center mt-sm text-left relative">
|
||||
<div class="mr-md col-50">
|
||||
<label for="uc" class="label cursor-pointer">
|
||||
usernameClass
|
||||
</label>
|
||||
<input id="uc" type="text" class="input" v-model="options.usernameClass">
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<label for="ut" class="label cursor-pointer">
|
||||
usernameUrlBase
|
||||
</label>
|
||||
<div>
|
||||
<input id="ut" type="text" class="input" v-model="options.usernameUrlBase">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex center mt-sm text-left">
|
||||
<div class="mr-md col-50">
|
||||
<label for="hc" class="label cursor-pointer">
|
||||
hashtagClass
|
||||
</label>
|
||||
<div>
|
||||
<input id="hc" type="text" class="input" v-model="options.hashtagClass">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<label for="ht" class="label cursor-pointer">
|
||||
hashtagUrlBase
|
||||
</label>
|
||||
<div>
|
||||
<input id="ht" type="text" class="input" v-model="options.hashtagUrlBase">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex center mt-sm text-left">
|
||||
<div class="mr-md col-50">
|
||||
<label for="urc" class="label cursor-pointer">
|
||||
urlClass
|
||||
</label>
|
||||
<div>
|
||||
<input id="urc" type="text" class="input" v-model="options.urlClass">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<label for="cc" class="label cursor-pointer">
|
||||
caretColor
|
||||
</label>
|
||||
<div>
|
||||
<input id="cc" type="text" class="input" v-model="caretColor">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column center vcenter">
|
||||
<div class="mb-md">
|
||||
<h4>HTML with links:</h4>
|
||||
<div class="content-container text-md" v-html="$autoLink(text, options)"></div>
|
||||
</div>
|
||||
|
||||
<div class="mb-md">
|
||||
<h4>Text with links:</h4>
|
||||
<div class="content-container"> {{ $autoLink(text, options) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-md">
|
||||
<h4>Model text:</h4>
|
||||
<div class="content-container"> {{ text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Home',
|
||||
data () {
|
||||
return {
|
||||
placeholder: 'Write something here, include @mentions, #hashtags and URLs...',
|
||||
text: 'Hi there! @pggalaviz #vue pggalaviz.com',
|
||||
caretColor: '#ff3b8e',
|
||||
options: {
|
||||
targetBlank: true,
|
||||
extractUrlsWithoutProtocol: true,
|
||||
usernameClass: 'highlights username',
|
||||
usernameUrlBase: '#/',
|
||||
hashtagClass: 'highlights hashtag',
|
||||
hashtagUrlBase: '#/hashtag/',
|
||||
urlClass: 'highlights url'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '~@vars'
|
||||
|
||||
#logo
|
||||
width: 50px
|
||||
height: auto
|
||||
|
||||
#install
|
||||
background-color: lighten($color-border, 60%)
|
||||
line-height: 1
|
||||
|
||||
</style>
|
||||
BIN
docs-src/assets/logo.png
Normal file
BIN
docs-src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
66
docs-src/components/CodeSnippet.vue
Normal file
66
docs-src/components/CodeSnippet.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="code-snippet box relative flex">
|
||||
<div class="language">{{ lang }}</div>
|
||||
<div class="line-numbers">
|
||||
<div class="line-number" v-for="n in lineCount" :key="n">{{ n }}</div>
|
||||
</div>
|
||||
<div class="render" v-html="result"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import hljs from 'highlight.js'
|
||||
|
||||
export default {
|
||||
name: 'CodeSnippet',
|
||||
props: {
|
||||
code: String,
|
||||
lang: String
|
||||
},
|
||||
computed: {
|
||||
result () {
|
||||
const highlighted = hljs.highlight(this.lang, this.code.trim())
|
||||
return highlighted.value
|
||||
},
|
||||
lineCount () {
|
||||
const str = this.result
|
||||
let length = 0
|
||||
for (var i = 0; i < str.length; ++i) {
|
||||
if (str[i] === '\n') {
|
||||
length++
|
||||
}
|
||||
}
|
||||
return length + 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '~@vars'
|
||||
.code-snippet
|
||||
padding: 0px !important
|
||||
margin-bottom: $space-base
|
||||
font-family: 'Roboto Mono', monospace
|
||||
|
||||
.line-numbers,
|
||||
.render
|
||||
padding: 12px 12px
|
||||
|
||||
.line-numbers
|
||||
color: $color-gray-4
|
||||
border-radius: 2px 0 0 2px
|
||||
border-right: 1px solid $color-border
|
||||
|
||||
.render
|
||||
white-space: pre
|
||||
|
||||
.language
|
||||
position: absolute
|
||||
top: 0
|
||||
right: 0
|
||||
background: $color-gray-1
|
||||
color: $color-gray-9
|
||||
padding: 3px 12px
|
||||
border-radius: 0 5px 0 4px
|
||||
</style>
|
||||
29
docs-src/main.js
Normal file
29
docs-src/main.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import VueHighlights, { autoLink, autoHighlight } from '../src'
|
||||
import App from './App.vue'
|
||||
import Home from './Home.vue'
|
||||
import Docs from './Docs.vue'
|
||||
|
||||
import './styles/main.styl'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const router = new VueRouter({
|
||||
routes: [
|
||||
{ path: '/', name: 'home', component: Home },
|
||||
{ path: '/docs', name: 'docs', component: Docs },
|
||||
{ path: '*', component: Home }
|
||||
]
|
||||
})
|
||||
|
||||
Vue.component(VueHighlights.name, VueHighlights)
|
||||
Vue.prototype.$autoLink = autoLink
|
||||
Vue.prototype.$autoHighlight = autoHighlight
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
131
docs-src/styles/base.styl
Normal file
131
docs-src/styles/base.styl
Normal file
@@ -0,0 +1,131 @@
|
||||
*, *:after, *:before
|
||||
box-sizing: border-box
|
||||
|
||||
html, body
|
||||
width : 100%
|
||||
height: 100%
|
||||
|
||||
html
|
||||
font-size: 100%
|
||||
text-size-adjust: 100%
|
||||
|
||||
body
|
||||
overflow-x: hidden
|
||||
overflow-y: scroll
|
||||
background-color: $color-background
|
||||
min-height: 100%
|
||||
font-family: $font-helvetica
|
||||
font-size: $font-md
|
||||
line-height: $line-height-base
|
||||
font-weight: $font-weight-base
|
||||
color: $font-color-base
|
||||
text-rendering: optimizeLegibility
|
||||
scroll-behavior: smooth
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
|
||||
// Selection
|
||||
::-moz-selection
|
||||
background-color: $color-brand-lighter
|
||||
color: $color-white
|
||||
::selection
|
||||
background-color: $color-brand-lighter
|
||||
color: $color-white
|
||||
|
||||
// Placeholder
|
||||
::-webkit-input-placeholder
|
||||
color inherit
|
||||
opacity .7
|
||||
::-moz-placeholder
|
||||
color inherit
|
||||
opacity .7
|
||||
:-ms-input-placeholder
|
||||
color inherit !important
|
||||
opacity .7 !important
|
||||
::-ms-input-placeholder
|
||||
color inherit
|
||||
opacity .7
|
||||
::placeholder
|
||||
color inherit
|
||||
opacity .7
|
||||
|
||||
p
|
||||
margin: 0
|
||||
&:not(:last-child)
|
||||
margin-bottom: $space-base
|
||||
|
||||
// Links
|
||||
a
|
||||
line-height: inherit
|
||||
transition: color 0.2s ease, border-bottom-color 0.2s ease
|
||||
border: none
|
||||
font-family: inherit
|
||||
color: $color-link
|
||||
text-decoration: none
|
||||
cursor: pointer
|
||||
&:focus
|
||||
outline: none
|
||||
&:hover
|
||||
color: $color-link-hover
|
||||
img
|
||||
border: 0
|
||||
&.router-exact-active // vue-router
|
||||
color: $color-gray-6
|
||||
h1, h2, h3, h4, h5
|
||||
color: $font-color-base
|
||||
|
||||
// Images
|
||||
img
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
height: auto
|
||||
|
||||
pre
|
||||
background-color: lighten($color-border, 60%)
|
||||
padding: $space-base
|
||||
line-height: 1.5
|
||||
|
||||
table
|
||||
width: 100%
|
||||
margin-bottom: $space-sm
|
||||
th
|
||||
font-weight: 800
|
||||
th, td
|
||||
padding-bottom: 16px
|
||||
text-align: center
|
||||
text-align: left
|
||||
vertical-align: middle
|
||||
|
||||
// layout
|
||||
.flex
|
||||
.column
|
||||
display: flex
|
||||
&.center
|
||||
justify-content: center
|
||||
&.between
|
||||
justify-content: space-between
|
||||
&.vcenter
|
||||
align-items: center
|
||||
|
||||
.column
|
||||
flex-direction: column
|
||||
|
||||
.col-50
|
||||
width: 50%
|
||||
.col-25
|
||||
width: 25%
|
||||
|
||||
.relative
|
||||
position: relative
|
||||
|
||||
.container
|
||||
width: 960px
|
||||
max-width: 96%
|
||||
margin: 0 auto
|
||||
|
||||
.content-container
|
||||
width: 560px
|
||||
max-width: 96%
|
||||
|
||||
.cursor-pointer
|
||||
cursor: pointer
|
||||
57
docs-src/styles/main.styl
Normal file
57
docs-src/styles/main.styl
Normal file
@@ -0,0 +1,57 @@
|
||||
@import 'variables'
|
||||
@import 'reset'
|
||||
@import 'base'
|
||||
@import 'spacing'
|
||||
@import 'typo'
|
||||
|
||||
// Mentions
|
||||
|
||||
.highlights__content
|
||||
position: relative
|
||||
|
||||
.highlights__placeholder
|
||||
color: #ccc
|
||||
position: absolute
|
||||
top: $space-base
|
||||
left: $space-base
|
||||
z-index: -1
|
||||
|
||||
.box,
|
||||
.highlights__body-container
|
||||
border-radius: 5px
|
||||
box-shadow: 0 5px 15px 0 rgba(80,86,98,.1), 0 2px 4px 0 rgba(199,202,209,.4)
|
||||
padding: $space-base
|
||||
|
||||
.highlights__body
|
||||
min-height: 60px
|
||||
|
||||
.highlights
|
||||
color: $color-primary
|
||||
|
||||
.label
|
||||
display: block
|
||||
margin-bottom: 3px
|
||||
|
||||
.input
|
||||
background-color: $color-background
|
||||
background-image: none
|
||||
border: 1px solid $color-gray-1
|
||||
border-radius: 4px
|
||||
color: $color-gray-9
|
||||
cursor: text
|
||||
display: block
|
||||
font-size: 12px
|
||||
height: 32px
|
||||
line-height: 32px
|
||||
max-width: 100%
|
||||
min-width: 100%
|
||||
padding: 2px 8px
|
||||
position: relative
|
||||
transition: all .2s
|
||||
width: 100%
|
||||
&:hover
|
||||
border-color: $color-gray-4
|
||||
&:focus,
|
||||
&.focus
|
||||
border-color: $color-brand
|
||||
outline: none
|
||||
212
docs-src/styles/reset.styl
Normal file
212
docs-src/styles/reset.styl
Normal file
@@ -0,0 +1,212 @@
|
||||
// Custom browser reset
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video, select
|
||||
margin: 0
|
||||
padding: 0
|
||||
border: 0
|
||||
font-size: 100%
|
||||
font: inherit
|
||||
vertical-align: baseline
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, main
|
||||
display: block
|
||||
|
||||
html
|
||||
font-family: sans-serif
|
||||
-ms-text-size-adjust: 100%
|
||||
-webkit-text-size-adjust: 100%
|
||||
|
||||
body
|
||||
line-height: 1
|
||||
|
||||
ol, ul
|
||||
list-style: none
|
||||
|
||||
blockquote, q
|
||||
quotes: none
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after
|
||||
content: ''
|
||||
content: none
|
||||
|
||||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
|
||||
figcaption,
|
||||
figure
|
||||
display: block
|
||||
|
||||
hr
|
||||
box-sizing: content-box
|
||||
height: 0
|
||||
overflow: visible
|
||||
|
||||
pre
|
||||
font-family: monospace, monospace
|
||||
font-size: 1em
|
||||
|
||||
a
|
||||
background-color: transparent
|
||||
-webkit-text-decoration-skip: objects
|
||||
&:hover,
|
||||
&:active
|
||||
outline-width: 0
|
||||
|
||||
|
||||
abbr[title]
|
||||
border-bottom: none
|
||||
text-decoration: underline
|
||||
text-decoration: underline dotted
|
||||
|
||||
b,
|
||||
strong
|
||||
font-weight: bolder
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp
|
||||
font-family: monospace, monospace
|
||||
font-size: 1em
|
||||
|
||||
dfn
|
||||
font-style: italic
|
||||
|
||||
mark
|
||||
background-color: #ff0
|
||||
color: #000
|
||||
|
||||
small
|
||||
font-size: 80%
|
||||
|
||||
sub,
|
||||
sup
|
||||
font-size: 75%
|
||||
line-height: 0
|
||||
position: relative
|
||||
vertical-align: baseline
|
||||
|
||||
sub
|
||||
bottom: -0.25em
|
||||
|
||||
sup
|
||||
top: -0.5em
|
||||
|
||||
audio,
|
||||
video,
|
||||
canvas
|
||||
display: inline-block
|
||||
|
||||
audio:not([controls])
|
||||
display: none
|
||||
height: 0
|
||||
|
||||
img
|
||||
border-style: none
|
||||
|
||||
svg:not(:root)
|
||||
overflow: hidden
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea
|
||||
font-family: sans-serif
|
||||
font-size: 100%
|
||||
line-height: 1
|
||||
margin: 0
|
||||
|
||||
button
|
||||
overflow: visible
|
||||
|
||||
button,
|
||||
select
|
||||
text-transform: none
|
||||
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"]
|
||||
-webkit-appearance: button
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"]
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner
|
||||
border-style: none
|
||||
padding: 0
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring
|
||||
outline: 1px dotted ButtonText
|
||||
|
||||
input
|
||||
overflow: visible
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
box-sizing: border-box
|
||||
padding: 0
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button
|
||||
height: auto
|
||||
|
||||
[type="search"]
|
||||
-webkit-appearance: textfield
|
||||
outline-offset: -2px
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration
|
||||
-webkit-appearance: none
|
||||
|
||||
::-webkit-file-upload-button
|
||||
-webkit-appearance: button
|
||||
font: inherit
|
||||
|
||||
legend
|
||||
box-sizing: border-box
|
||||
display: table
|
||||
max-width: 100%
|
||||
padding: 0
|
||||
color: inherit
|
||||
white-space: normal
|
||||
|
||||
progress
|
||||
display: inline-block
|
||||
vertical-align: baseline
|
||||
|
||||
textarea
|
||||
overflow: auto
|
||||
|
||||
summary
|
||||
display: list-item
|
||||
|
||||
template
|
||||
display: none
|
||||
|
||||
[hidden]
|
||||
display: none
|
||||
32
docs-src/styles/spacing.styl
Normal file
32
docs-src/styles/spacing.styl
Normal file
@@ -0,0 +1,32 @@
|
||||
// Spacing
|
||||
|
||||
for $space, $value in $global-spaces
|
||||
.pa-{$space}
|
||||
padding: $value
|
||||
.pl-{$space}
|
||||
padding-left: $value
|
||||
.pr-{$space}
|
||||
padding-right: $value
|
||||
.pt-{$space}
|
||||
padding-top: $value
|
||||
.pb-{$space}
|
||||
padding-bottom: $value
|
||||
.px-{$space}
|
||||
@extends .pl-{$space}, .pr-{$space}
|
||||
.py-{$space}
|
||||
@extends .pt-{$space}, .pb-{$space}
|
||||
|
||||
.ma-{$space}
|
||||
margin: $value
|
||||
.ml-{$space}
|
||||
margin-left: $value
|
||||
.mr-{$space}
|
||||
margin-right: $value
|
||||
.mt-{$space}
|
||||
margin-top: $value
|
||||
.mb-{$space}
|
||||
margin-bottom: $value
|
||||
.mx-{$space}
|
||||
@extends .ml-{$space}, .mr-{$space}
|
||||
.my-{$space}
|
||||
@extends .mt-{$space}, .mb-{$space}
|
||||
74
docs-src/styles/typo.styl
Normal file
74
docs-src/styles/typo.styl
Normal file
@@ -0,0 +1,74 @@
|
||||
// Typo
|
||||
|
||||
// Headings
|
||||
// ========
|
||||
$--typo-header-font-family ?= $font-helvetica
|
||||
$--typo-header-font-weight ?= 800
|
||||
$--typo-header-font-style ?= normal
|
||||
$--typo-header-color ?= inherit
|
||||
$--typo-header-line-height ?= $global-line-height-heading
|
||||
$--typo-header-margin-bottom ?= $space-base/2
|
||||
|
||||
strong, b
|
||||
font-weight: $font-weight-bold
|
||||
line-height: inherit
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6
|
||||
font-family: $--typo-header-font-family
|
||||
font-style: $--typo-header-font-style
|
||||
font-weight: $--typo-header-font-weight
|
||||
color: $--typo-header-color
|
||||
text-rendering: optimizeLegibility
|
||||
letter-spacing: -1px
|
||||
line-height: $--typo-header-line-height
|
||||
margin-bottom: $--typo-header-margin-bottom
|
||||
small
|
||||
line-height: 0
|
||||
color: $color-gray-light
|
||||
a
|
||||
color: inherit
|
||||
a:hover
|
||||
color: inherit
|
||||
|
||||
h1, .h1
|
||||
font-size: $font-h1
|
||||
h2, .h2
|
||||
font-size: $font-h2
|
||||
h3, .h3
|
||||
font-size: $font-h3
|
||||
h4, .h4
|
||||
font-size: $font-h4
|
||||
h5, .h5
|
||||
font-size: $font-h5
|
||||
h6, .h6
|
||||
font-size: $font-h6
|
||||
text-transform: uppercase
|
||||
color: $color-gray
|
||||
letter-spacing: 0px
|
||||
|
||||
// size
|
||||
.text-xs
|
||||
font-size: $font-xs
|
||||
.text-sm
|
||||
font-size: $font-sm
|
||||
.text-md
|
||||
font-size: $font-md
|
||||
.text-lg
|
||||
font-size: $font-lg
|
||||
.text-xl
|
||||
font-size: $font-xl
|
||||
|
||||
.text-left
|
||||
text-align: left
|
||||
.text-center
|
||||
text-align: center
|
||||
.text-right
|
||||
text-align: right
|
||||
|
||||
.font-mono
|
||||
font-family: $font-mono
|
||||
92
docs-src/styles/variables.styl
Normal file
92
docs-src/styles/variables.styl
Normal file
@@ -0,0 +1,92 @@
|
||||
// Variables
|
||||
|
||||
// Color
|
||||
$color-primary ?= #ff3b8e
|
||||
$color-brand ?= $color-primary
|
||||
$color-brand-light ?= lighten($color-brand, 25%)
|
||||
$color-brand-lighter ?= lighten($color-brand, 50%)
|
||||
$color-brand-dark ?= darken($color-brand, 25%)
|
||||
$color-brand-darker ?= darken($color-brand, 50%)
|
||||
|
||||
// Grays
|
||||
$color-gray ?= #828c8f
|
||||
$color-gray-1 ?= lighten($color-gray, 80%)
|
||||
$color-gray-2 ?= lighten($color-gray, 70%)
|
||||
$color-gray-3 ?= lighten($color-gray, 60%)
|
||||
$color-gray-4 ?= lighten($color-gray, 50%)
|
||||
$color-gray-5 ?= lighten($color-gray, 40%)
|
||||
$color-gray-6 ?= lighten($color-gray, 30%)
|
||||
$color-gray-7 ?= lighten($color-gray, 20%)
|
||||
$color-gray-8 ?= lighten($color-gray, 10%)
|
||||
$color-gray-9 ?= $color-gray
|
||||
$color-gray-10 ?= darken($color-gray, 10%)
|
||||
$color-gray-11 ?= darken($color-gray, 20%)
|
||||
$color-gray-12 ?= darken($color-gray, 30%)
|
||||
$color-gray-13 ?= darken($color-gray, 40%)
|
||||
$color-gray-14 ?= darken($color-gray, 50%)
|
||||
$color-gray-15 ?= darken($color-gray, 60%)
|
||||
$color-gray-16 ?= darken($color-gray, 70%)
|
||||
|
||||
// Other colors
|
||||
$color-black ?= #0a0a0a
|
||||
$color-white ?= #fefefe
|
||||
$color-blue ?= #00B0E9
|
||||
$color-red ?= #f56c6c
|
||||
$color-yellow ?= #f5ad58
|
||||
$color-green ?= #67C23A
|
||||
$color-pink ?= #D3529B
|
||||
|
||||
// App
|
||||
$color-danger ?= $color-red
|
||||
$color-warning ?= $color-yellow
|
||||
$color-success ?= $color-green
|
||||
$color-info ?= $color-blue
|
||||
$color-background ?= $color-white
|
||||
$color-border ?= #eaeaea
|
||||
|
||||
// Links
|
||||
$color-link ?= $color-brand
|
||||
$color-link-hover ?= $color-gray-8
|
||||
$color-link-active ?= $color-gray-5
|
||||
|
||||
// Space
|
||||
$space-base ?= 16px
|
||||
$space-sm ?= 8px
|
||||
$space-lg ?= 24px
|
||||
|
||||
$global-spaces ?= {
|
||||
sm: $space-base * .5,
|
||||
md: $space-base,
|
||||
lg: $space-base * 1.25,
|
||||
}
|
||||
|
||||
// Typo
|
||||
$font-helvetica ?= Helvetica neue, Helvetica, Arial, sans-serif
|
||||
$font-mono ?= Menlo, Monaco, Consolas, monospace
|
||||
$font-default ?= $font-helvetica
|
||||
|
||||
$font-base ?= 14px
|
||||
$font-xs ?= 10px
|
||||
$font-sm ?= 12px
|
||||
$font-md ?= $font-base
|
||||
$font-lg ?= 16px
|
||||
$font-xl ?= 18px
|
||||
|
||||
$font-h1 ?= 28px
|
||||
$font-h2 ?= 24px
|
||||
$font-h3 ?= 20px
|
||||
$font-h4 ?= 18px
|
||||
$font-h5 ?= 16px
|
||||
$font-h6 ?= 14px
|
||||
|
||||
$font-weight-base ?= 400
|
||||
$font-weight-light ?= 300
|
||||
$font-weight-medium ?= 600
|
||||
$font-weight-bold ?= 700
|
||||
$font-weight-bolder ?= 800
|
||||
|
||||
$font-color-base ?= $color-gray-12
|
||||
$font-color-light ?= $color-gray-4
|
||||
|
||||
$line-height-base ?= 1.5
|
||||
$line-height-heading ?= 1.2
|
||||
Reference in New Issue
Block a user