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
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