From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/src/getting-started/installation.pug | 84 +++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 docs/src/getting-started/installation.pug (limited to 'docs/src/getting-started/installation.pug') diff --git a/docs/src/getting-started/installation.pug b/docs/src/getting-started/installation.pug new file mode 100644 index 0000000..ef28d48 --- /dev/null +++ b/docs/src/getting-started/installation.pug @@ -0,0 +1,84 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'installation' + - var parent = 'getting-started' + - var title = 'Installation - Getting started - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('installation', 'Installation') + include ../_layout/_ad-g.pug + + p + | There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers. + + +docs-subheading('install-manually', 'Install manually') + p + | Download the compiled and minified + a(href='https://github.com/picturepan2/spectre/releases', target='_blank') Spectre CSS file + | (core ~10KB min+gzip): + p + a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Download Spectre.css + p + | Include + code spectre.css + | located in + strong /dist + | in your website or Web app . Also, you can add + code spectre-icons.css + | and + code spectre-exp.css + | accordingly. + + //- install manually + pre.code(data-lang='HTML') + code + :highlight(lang="html") + + + + + +docs-subheading('install-cdn', 'Install from CDN') + p + | Alternatively, you can use the + a(href='https://unpkg.com/', target='_blank') unpkg + | or + a(href='https://cdnjs.com/libraries/spectre.css', target='_blank') cdnjs + | CDN to load compiled Spectre.css. + + //- install from CDN + pre.code(data-lang='HTML') + code + :highlight(lang="html") + + + + + +docs-subheading('install-npm', 'Install with NPM') + + //- install with npm + pre.code(data-lang='Bash') + code + :highlight(lang="Bash") + npm install spectre.css --save + + +docs-subheading('install-yarn', 'Install with Yarn') + + //- install with yarn + pre.code(data-lang='Bash') + code + :highlight(lang="bash") + yarn add spectre.css + + +docs-subheading('install-bower', 'Install from Bower') + + //- install with bower + pre.code(data-lang='Bash') + code + :highlight(lang="bash") + bower install spectre.css --save + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file -- cgit v1.3.1-23-gd82d From f5ca9b22b084324cb9b4e9f95e6aef063f1ce8e7 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 7 Nov 2018 12:31:28 +0800 Subject: Update Docs and Readme --- README.md | 84 +++++++++++++++---------------- docs/dist/docs.css | 7 +++ docs/dist/docs.min.css | 2 +- docs/getting-started/installation.html | 6 +-- docs/src/getting-started/installation.pug | 6 +-- docs/src/scss/docs.scss | 4 ++ src/utilities/_cursors.scss | 2 +- 7 files changed, 61 insertions(+), 50 deletions(-) (limited to 'docs/src/getting-started/installation.pug') diff --git a/README.md b/README.md index 8d249e9..42b87f2 100644 --- a/README.md +++ b/README.md @@ -40,63 +40,63 @@ Alternatively, you can use the [unpkg](https://unpkg.com/) or [cdnjs](https://cd ## Compiling custom version -You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html#custom). +You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started/custom.html). ## Documentation and examples ### Elements -- [Typography](https://picturepan2.github.io/spectre/elements.html#typography) -- [Tables](https://picturepan2.github.io/spectre/elements.html#tables) -- [Buttons](https://picturepan2.github.io/spectre/elements.html#buttons) -- [Forms](https://picturepan2.github.io/spectre/elements.html#forms) -- [Icons](https://picturepan2.github.io/spectre/elements.html#icons) - CSS only -- [Labels](https://picturepan2.github.io/spectre/elements.html#labels) -- [Code](https://picturepan2.github.io/spectre/elements.html#code) -- [Media](https://picturepan2.github.io/spectre/elements.html#media) +- [Typography](https://picturepan2.github.io/spectre/elements/typography.html) +- [Tables](https://picturepan2.github.io/spectre/elements/tables.html) +- [Buttons](https://picturepan2.github.io/spectre/elements/buttons.html) +- [Forms](https://picturepan2.github.io/spectre/elements/forms.html) +- [Icons](https://picturepan2.github.io/spectre/elements/icons.html) - CSS only +- [Labels](https://picturepan2.github.io/spectre/elements/labels.html) +- [Code](https://picturepan2.github.io/spectre/elements/code.html) +- [Media](https://picturepan2.github.io/spectre/elements/media.html) ### Layout -- [Flexbox grid](https://picturepan2.github.io/spectre/layout.html#grid) -- [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive) -- [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) +- [Flexbox grid](https://picturepan2.github.io/spectre/layout/grid.html) +- [Responsive](https://picturepan2.github.io/spectre/layout/responsive.html) +- [Navbar](https://picturepan2.github.io/spectre/layout/navbar.html) ### Components -- [Accordions](https://picturepan2.github.io/spectre/components.html#accordions) -- [Avatars](https://picturepan2.github.io/spectre/components.html#avatars) -- [Badges](https://picturepan2.github.io/spectre/components.html#badges) -- [Breadcrumbs](https://picturepan2.github.io/spectre/components.html#breadcrumbs) -- [Bars](https://picturepan2.github.io/spectre/components.html#bars) -- [Cards](https://picturepan2.github.io/spectre/components.html#cards) -- [Chips](https://picturepan2.github.io/spectre/components.html#chips) -- [Empty states](https://picturepan2.github.io/spectre/components.html#empty) -- [Menu](https://picturepan2.github.io/spectre/components.html#menu) -- [Nav](https://picturepan2.github.io/spectre/components.html#nav) -- [Modals](https://picturepan2.github.io/spectre/components.html#modals) -- [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) -- [Panels](https://picturepan2.github.io/spectre/components.html#panels) -- [Popovers](https://picturepan2.github.io/spectre/components.html#popovers) -- [Steps](https://picturepan2.github.io/spectre/components.html#steps) -- [Tabs](https://picturepan2.github.io/spectre/components.html#tabs) -- [Tiles](https://picturepan2.github.io/spectre/components.html#tiles) -- [Toasts](https://picturepan2.github.io/spectre/components.html#toasts) -- [Tooltips](https://picturepan2.github.io/spectre/components.html#tooltips) +- [Accordions](https://picturepan2.github.io/spectre/components/accordions.html) +- [Avatars](https://picturepan2.github.io/spectre/components/avatars.html) +- [Badges](https://picturepan2.github.io/spectre/components/badges.html) +- [Breadcrumbs](https://picturepan2.github.io/spectre/components/breadcrumbs.html) +- [Bars](https://picturepan2.github.io/spectre/components/bars.html) +- [Cards](https://picturepan2.github.io/spectre/components/cards.html) +- [Chips](https://picturepan2.github.io/spectre/components/chips.html) +- [Empty states](https://picturepan2.github.io/spectre/components/empty.html) +- [Menu](https://picturepan2.github.io/spectre/components/menu.html) +- [Nav](https://picturepan2.github.io/spectre/components/nav.html) +- [Modals](https://picturepan2.github.io/spectre/components/modals.html) +- [Pagination](https://picturepan2.github.io/spectre/components/pagination.html) +- [Panels](https://picturepan2.github.io/spectre/components/panels.html) +- [Popovers](https://picturepan2.github.io/spectre/components/popovers.html) +- [Steps](https://picturepan2.github.io/spectre/components/steps.html) +- [Tabs](https://picturepan2.github.io/spectre/components/tabs.html) +- [Tiles](https://picturepan2.github.io/spectre/components/tiles.html) +- [Toasts](https://picturepan2.github.io/spectre/components/toasts.html) +- [Tooltips](https://picturepan2.github.io/spectre/components/tooltips.html) ### Utilities - [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities ### Experimentals -- [Autocomplete](https://picturepan2.github.io/spectre/experimentals.html#autocomplete) -- [Calendars](https://picturepan2.github.io/spectre/experimentals.html#calendars) -- [Carousels](https://picturepan2.github.io/spectre/experimentals.html#carousels) - CSS only -- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals.html#comparison) - CSS only -- [Filters](https://picturepan2.github.io/spectre/experimentals.html#carousels) - CSS only -- [Meters](https://picturepan2.github.io/spectre/experimentals.html#meters) -- [Off-canvas](https://picturepan2.github.io/spectre/experimentals.html#off-canvas) - CSS only -- [Parallax](https://picturepan2.github.io/spectre/experimentals.html#parallax) - CSS only -- [Progress](https://picturepan2.github.io/spectre/experimentals.html#progress) -- [Sliders](https://picturepan2.github.io/spectre/experimentals.html#sliders) -- [Timelines](https://picturepan2.github.io/spectre/experimentals.html#timelines) +- [Autocomplete](https://picturepan2.github.io/spectre/experimentals/autocomplete.html) +- [Calendars](https://picturepan2.github.io/spectre/experimentals/calendars.html) +- [Carousels](https://picturepan2.github.io/spectre/experimentals/carousels.html) - CSS only +- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals/comparison.html) - CSS only +- [Filters](https://picturepan2.github.io/spectre/experimentals/carousels.html) - CSS only +- [Meters](https://picturepan2.github.io/spectre/experimentals/meters.html) +- [Off-canvas](https://picturepan2.github.io/spectre/experimentals/off-canvas.html) - CSS only +- [Parallax](https://picturepan2.github.io/spectre/experimentals/parallax.html) - CSS only +- [Progress](https://picturepan2.github.io/spectre/experimentals/progress.html) +- [Sliders](https://picturepan2.github.io/spectre/experimentals/sliders.html) +- [Timelines](https://picturepan2.github.io/spectre/experimentals/timelines.html) ## Browser support Spectre uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended: diff --git a/docs/dist/docs.css b/docs/dist/docs.css index 0da0f6e..e76a1ff 100644 --- a/docs/dist/docs.css +++ b/docs/dist/docs.css @@ -212,6 +212,13 @@ color: #505c6e; } +.docs-content .c-select-all { + -webkit-user-select: all; + -moz-user-select: all; + -ms-user-select: all; + user-select: all; +} + .docs-content .panel { height: 75vh; } diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css index 2101e87..3f7192f 100644 --- a/docs/dist/docs.min.css +++ b/docs/dist/docs.min.css @@ -1 +1 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.5"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btns{position:absolute;right:1.5rem;top:1rem;width:8rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#455060;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#505c6e}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#66758c;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;display:none;margin-left:.2rem;padding:0 .2rem}.docs-content .anchor:focus,.docs-content .anchor:hover{display:inline;text-decoration:none}.docs-content .s-subtitle,.docs-content .s-title{line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:99}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{display:inline}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#eef0f3}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#505c6e}.docs-content .code .hljs-comment{color:#bcc3ce}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-name,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#505c6e}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline-block;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline-block;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#bcc3ce;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#66758c}.docs-ad{background:#f7f8f9;border-radius:.1rem;display:block;margin:2rem 0;padding:.4rem;position:relative}.docs-ad ins{line-height:1;vertical-align:middle}.docs-ad .carbon-wrap .carbon-img{display:block}.docs-ad .carbon-wrap .carbon-text{color:#66758c;display:block;font-size:.7rem}.docs-ad .carbon-poweredby{color:#bcc3ce;font-size:.7rem}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-ads{padding:1rem .5rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#bcc3ce;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#66758c}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#3b4351;font-size:1.6rem;font-weight:600;margin-bottom:1.5rem}.grid-hero h2{color:#455060;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#5b687d;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:1rem;font-weight:700;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(247,248,249,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btns{right:.9rem}.grid-hero .docs-brand{left:.9rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;margin:0;position:fixed;right:1rem;width:7.3rem}} \ No newline at end of file +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.5"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btns{position:absolute;right:1.5rem;top:1rem;width:8rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#455060;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#505c6e}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#66758c;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;display:none;margin-left:.2rem;padding:0 .2rem}.docs-content .anchor:focus,.docs-content .anchor:hover{display:inline;text-decoration:none}.docs-content .s-subtitle,.docs-content .s-title{line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:99}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{display:inline}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#eef0f3}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#505c6e}.docs-content .code .hljs-comment{color:#bcc3ce}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-name,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#505c6e}.docs-content .c-select-all{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline-block;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline-block;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#bcc3ce;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#66758c}.docs-ad{background:#f7f8f9;border-radius:.1rem;display:block;margin:2rem 0;padding:.4rem;position:relative}.docs-ad ins{line-height:1;vertical-align:middle}.docs-ad .carbon-wrap .carbon-img{display:block}.docs-ad .carbon-wrap .carbon-text{color:#66758c;display:block;font-size:.7rem}.docs-ad .carbon-poweredby{color:#bcc3ce;font-size:.7rem}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-ads{padding:1rem .5rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#bcc3ce;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#66758c}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#3b4351;font-size:1.6rem;font-weight:600;margin-bottom:1.5rem}.grid-hero h2{color:#455060;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#5b687d;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:1rem;font-weight:700;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(247,248,249,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btns{right:.9rem}.grid-hero .docs-brand{left:.9rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;margin:0;position:fixed;right:1rem;width:7.3rem}} \ No newline at end of file diff --git a/docs/getting-started/installation.html b/docs/getting-started/installation.html index 222674d..7491dd5 100644 --- a/docs/getting-started/installation.html +++ b/docs/getting-started/installation.html @@ -215,13 +215,13 @@ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

Install with NPM

- 
npm install spectre.css --save
+            
npm install spectre.css --save
 

             
Install with Yarn

-            
yarn add spectre.css
+            
yarn add spectre.css
 

             
Install from Bower

-            
bower install spectre.css --save
+            
bower install spectre.css --save
 

             

               
diff --git a/docs/src/getting-started/installation.pug b/docs/src/getting-started/installation.pug
index ef28d48..387e7bf 100644
--- a/docs/src/getting-started/installation.pug
+++ b/docs/src/getting-started/installation.pug
@@ -58,7 +58,7 @@ block docs-content
     +docs-subheading('install-npm', 'Install with NPM')
 
     //- install with npm
-    pre.code(data-lang='Bash')
+    pre.code.c-select-all(data-lang='Bash')
       code
         :highlight(lang="Bash")
           npm install spectre.css --save
@@ -66,7 +66,7 @@ block docs-content
     +docs-subheading('install-yarn', 'Install with Yarn')
 
     //- install with yarn
-    pre.code(data-lang='Bash')
+    pre.code.c-select-all(data-lang='Bash')
       code
         :highlight(lang="bash")
           yarn add spectre.css
@@ -74,7 +74,7 @@ block docs-content
     +docs-subheading('install-bower', 'Install from Bower')
 
     //- install with bower
-    pre.code(data-lang='Bash')
+    pre.code.c-select-all(data-lang='Bash')
       code
         :highlight(lang="bash")
           bower install spectre.css --save
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index 0fed87c..d5a33e5 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -223,6 +223,10 @@
     }
   }
 
+  .c-select-all {
+    user-select: all;
+  }
+
   .panel {
     height: 75vh;
 
diff --git a/src/utilities/_cursors.scss b/src/utilities/_cursors.scss
index bfc4c6b..bd755c8 100644
--- a/src/utilities/_cursors.scss
+++ b/src/utilities/_cursors.scss
@@ -21,4 +21,4 @@
 
 .c-auto {
   cursor: auto;
-}
+}
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d