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/getting-started/installation.html | 247 +++++++++++++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 docs/getting-started/installation.html (limited to 'docs/getting-started/installation.html') diff --git a/docs/getting-started/installation.html b/docs/getting-started/installation.html new file mode 100644 index 0000000..222674d --- /dev/null +++ b/docs/getting-started/installation.html @@ -0,0 +1,247 @@ + + + + Installation - Getting started - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Installation

+
+
+ + + +
+
+ + +
+
+

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.

+

Install manually

+

Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

+

Download Spectre.css

+

Include spectre.css located in /dist in your website or Web app . Also, you can add spectre-icons.css and spectre-exp.css accordingly.

+ 
<link rel="stylesheet" href="spectre.min.css">
+<link rel="stylesheet" href="spectre-exp.min.css">
+<link rel="stylesheet" href="spectre-icons.min.css">
+
+

Install from CDN

+

Alternatively, you can use the unpkg or cdnjs CDN to load compiled Spectre.css.

+ 
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
+<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
+<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
+
+

Install with NPM

+ 
npm install spectre.css --save
+
+

Install with Yarn

+ 
yarn add spectre.css
+
+

Install from Bower

+ 
bower install spectre.css --save
+
+
+ +
+
+ +
+
+
+ + + \ 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/getting-started/installation.html') 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