Showing preview only (2,138K chars total). Download the full file or copy to clipboard to get everything.
Repository: picturepan2/spectre
Branch: master
Commit: 8847251d71b4
Files: 229
Total size: 2.0 MB
Directory structure:
gitextract_t0vr0ru3/
├── .csscomb.json
├── .gitattributes
├── .gitignore
├── .hound.yml
├── .scss-lint.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── bower.json
├── dist/
│ ├── spectre-exp.css
│ ├── spectre-icons.css
│ └── spectre.css
├── docs/
│ ├── components/
│ │ ├── accordions.html
│ │ ├── avatars.html
│ │ ├── badges.html
│ │ ├── bars.html
│ │ ├── breadcrumbs.html
│ │ ├── cards.html
│ │ ├── chips.html
│ │ ├── empty.html
│ │ ├── menu.html
│ │ ├── modals.html
│ │ ├── nav.html
│ │ ├── pagination.html
│ │ ├── panels.html
│ │ ├── popovers.html
│ │ ├── steps.html
│ │ ├── tabs.html
│ │ ├── tiles.html
│ │ ├── toasts.html
│ │ └── tooltips.html
│ ├── components.html
│ ├── dist/
│ │ ├── docs.css
│ │ ├── spectre-exp.css
│ │ ├── spectre-icons.css
│ │ ├── spectre-rtl.css
│ │ └── spectre.css
│ ├── elements/
│ │ ├── buttons.html
│ │ ├── code.html
│ │ ├── forms.html
│ │ ├── icons.html
│ │ ├── labels.html
│ │ ├── media.html
│ │ ├── tables.html
│ │ └── typography.html
│ ├── elements.html
│ ├── examples/
│ │ └── starter.html
│ ├── experimentals/
│ │ ├── autocomplete.html
│ │ ├── calendars.html
│ │ ├── carousels.html
│ │ ├── comparison.html
│ │ ├── filters.html
│ │ ├── meters.html
│ │ ├── off-canvas.html
│ │ ├── parallax.html
│ │ ├── progress.html
│ │ ├── sliders.html
│ │ ├── timelines.html
│ │ └── viewer-360.html
│ ├── experimentals.html
│ ├── getting-started/
│ │ ├── browsers.html
│ │ ├── custom.html
│ │ ├── installation.html
│ │ └── whatsnew.html
│ ├── getting-started.html
│ ├── index.html
│ ├── layout/
│ │ ├── grid.html
│ │ ├── hero.html
│ │ ├── navbar.html
│ │ └── responsive.html
│ ├── layout.html
│ ├── rtl.html
│ ├── src/
│ │ ├── _layout/
│ │ │ ├── _ad-c.pug
│ │ │ ├── _ad-g.pug
│ │ │ ├── _docs-layout.pug
│ │ │ ├── _example-layout.pug
│ │ │ ├── _footer.pug
│ │ │ ├── _layout.pug
│ │ │ └── _mixins.pug
│ │ ├── components/
│ │ │ ├── accordions.pug
│ │ │ ├── avatars.pug
│ │ │ ├── badges.pug
│ │ │ ├── bars.pug
│ │ │ ├── breadcrumbs.pug
│ │ │ ├── cards.pug
│ │ │ ├── chips.pug
│ │ │ ├── empty.pug
│ │ │ ├── menu.pug
│ │ │ ├── modals.pug
│ │ │ ├── nav.pug
│ │ │ ├── pagination.pug
│ │ │ ├── panels.pug
│ │ │ ├── popovers.pug
│ │ │ ├── steps.pug
│ │ │ ├── tabs.pug
│ │ │ ├── tiles.pug
│ │ │ ├── toasts.pug
│ │ │ └── tooltips.pug
│ │ ├── components.pug
│ │ ├── elements/
│ │ │ ├── buttons.pug
│ │ │ ├── code.pug
│ │ │ ├── forms.pug
│ │ │ ├── icons.pug
│ │ │ ├── labels.pug
│ │ │ ├── media.pug
│ │ │ ├── tables.pug
│ │ │ └── typography.pug
│ │ ├── elements.pug
│ │ ├── examples/
│ │ │ └── starter.pug
│ │ ├── experimentals/
│ │ │ ├── autocomplete.pug
│ │ │ ├── calendars.pug
│ │ │ ├── carousels.pug
│ │ │ ├── comparison.pug
│ │ │ ├── filters.pug
│ │ │ ├── meters.pug
│ │ │ ├── off-canvas.pug
│ │ │ ├── parallax.pug
│ │ │ ├── progress.pug
│ │ │ ├── sliders.pug
│ │ │ ├── timelines.pug
│ │ │ └── viewer-360.pug
│ │ ├── experimentals.pug
│ │ ├── getting-started/
│ │ │ ├── browsers.pug
│ │ │ ├── custom.pug
│ │ │ ├── installation.pug
│ │ │ └── whatsnew.pug
│ │ ├── getting-started.pug
│ │ ├── index.pug
│ │ ├── layout/
│ │ │ ├── grid.pug
│ │ │ ├── hero.pug
│ │ │ ├── navbar.pug
│ │ │ └── responsive.pug
│ │ ├── layout.pug
│ │ ├── scss/
│ │ │ ├── docs.scss
│ │ │ └── spectre-rtl.scss
│ │ ├── utilities/
│ │ │ ├── colors.pug
│ │ │ ├── cursors.pug
│ │ │ ├── display.pug
│ │ │ ├── divider.pug
│ │ │ ├── loading.pug
│ │ │ ├── position.pug
│ │ │ ├── shapes.pug
│ │ │ └── text.pug
│ │ └── utilities.pug
│ ├── utilities/
│ │ ├── colors.html
│ │ ├── cursors.html
│ │ ├── display.html
│ │ ├── divider.html
│ │ ├── loading.html
│ │ ├── position.html
│ │ ├── shapes.html
│ │ └── text.html
│ └── utilities.html
├── gulpfile.js
├── package.json
└── src/
├── _accordions.scss
├── _animations.scss
├── _asian.scss
├── _autocomplete.scss
├── _avatars.scss
├── _badges.scss
├── _bars.scss
├── _base.scss
├── _breadcrumbs.scss
├── _buttons.scss
├── _calendars.scss
├── _cards.scss
├── _carousels.scss
├── _chips.scss
├── _codes.scss
├── _comparison-sliders.scss
├── _dropdowns.scss
├── _empty.scss
├── _filters.scss
├── _forms.scss
├── _hero.scss
├── _icons.scss
├── _labels.scss
├── _layout.scss
├── _media.scss
├── _menus.scss
├── _meters.scss
├── _mixins.scss
├── _modals.scss
├── _navbar.scss
├── _navs.scss
├── _normalize.scss
├── _off-canvas.scss
├── _pagination.scss
├── _panels.scss
├── _parallax.scss
├── _popovers.scss
├── _progress.scss
├── _sliders.scss
├── _steps.scss
├── _tables.scss
├── _tabs.scss
├── _tiles.scss
├── _timelines.scss
├── _toasts.scss
├── _tooltips.scss
├── _typography.scss
├── _utilities.scss
├── _variables.scss
├── _viewer-360.scss
├── icons/
│ ├── _icons-action.scss
│ ├── _icons-core.scss
│ ├── _icons-navigation.scss
│ └── _icons-object.scss
├── mixins/
│ ├── _avatar.scss
│ ├── _button.scss
│ ├── _clearfix.scss
│ ├── _color.scss
│ ├── _label.scss
│ ├── _position.scss
│ ├── _shadow.scss
│ ├── _text.scss
│ └── _toast.scss
├── spectre-exp.scss
├── spectre-icons.scss
├── spectre.scss
└── utilities/
├── _colors.scss
├── _cursors.scss
├── _display.scss
├── _divider.scss
├── _loading.scss
├── _position.scss
├── _shapes.scss
└── _text.scss
================================================
FILE CONTENTS
================================================
================================================
FILE: .csscomb.json
================================================
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": false,
"leading-zero": false,
"quotes": "double",
"sort-order-fallback": "abc",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": true,
"unitless-zero": true,
"sort-order": [[
"$variable",
"$include",
"$import"
]]
}
================================================
FILE: .gitattributes
================================================
**/*.html linguist-documentation
================================================
FILE: .gitignore
================================================
.idea/
node_modules/
yarn.lock
package-lock.json
.*
!.csscomb.json
!.gitignore
!.gitattributes
!.hound.yml
!.scss-lint.yml
================================================
FILE: .hound.yml
================================================
scss:
config_file: .scss-lint.yml
================================================
FILE: .scss-lint.yml
================================================
# Default application configuration that all configurations inherit from.
scss_files: "**/*.scss"
plugin_directories: ['.scss-linters']
# List of gem names to load custom linters from (make sure they are already
# installed)
plugin_gems: []
# Default severity of all linters.
severity: warning
linters:
BangFormat:
enabled: true
space_before_bang: true
space_after_bang: false
BemDepth:
enabled: false
max_elements: 1
BorderZero:
enabled: true
convention: zero # or `none`
ChainedClasses:
enabled: false
ColorKeyword:
enabled: true
ColorVariable:
enabled: true
Comment:
enabled: false
style: silent
DebugStatement:
enabled: true
DeclarationOrder:
enabled: true
DisableLinterReason:
enabled: false
DuplicateProperty:
enabled: true
ElsePlacement:
enabled: true
style: same_line # or 'new_line'
EmptyLineBetweenBlocks:
enabled: true
ignore_single_line_blocks: true
EmptyRule:
enabled: true
ExtendDirective:
enabled: false
FinalNewline:
enabled: true
present: true
HexLength:
enabled: false
style: short # or 'long'
HexNotation:
enabled: true
style: lowercase # or 'uppercase'
HexValidation:
enabled: true
IdSelector:
enabled: true
ImportantRule:
enabled: true
ImportPath:
enabled: true
leading_underscore: false
filename_extension: false
Indentation:
enabled: true
allow_non_nested_indentation: false
character: space # or 'tab'
width: 2
LeadingZero:
enabled: true
style: exclude_zero # or 'include_zero'
MergeableSelector:
enabled: true
force_nesting: true
NameFormat:
enabled: true
allow_leading_underscore: true
convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
NestingDepth:
enabled: true
max_depth: 4
ignore_parent_selectors: false
PlaceholderInExtend:
enabled: false
PrivateNamingConvention:
enabled: false
prefix: _
PropertyCount:
enabled: true
include_nested: false
max_properties: 10
PropertySortOrder:
enabled: true
ignore_unspecified: false
min_properties: 2
separate_groups: false
PropertySpelling:
enabled: true
extra_properties: []
disabled_properties: []
PropertyUnits:
enabled: true
global: [
'ch', 'em', 'ex', 'rem', # Font-relative lengths
'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths
'deg', 'grad', 'rad', 'turn', # Angle
'ms', 's', # Duration
'Hz', 'kHz', # Frequency
'dpi', 'dpcm', 'dppx', # Resolution
'%'] # Other
properties: {}
PseudoElement:
enabled: true
QualifyingElement:
enabled: true
allow_element_with_attribute: false
allow_element_with_class: false
allow_element_with_id: false
SelectorDepth:
enabled: true
max_depth: 2
SelectorFormat:
enabled: true
convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
Shorthand:
enabled: false
allowed_shorthands: [1, 2, 3, 4]
SingleLinePerProperty:
enabled: true
allow_single_line_rule_sets: true
SingleLinePerSelector:
enabled: true
SpaceAfterComma:
enabled: true
style: one_space # or 'no_space', or 'at_least_one_space'
SpaceAfterPropertyColon:
enabled: true
style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
SpaceAfterPropertyName:
enabled: true
SpaceAfterVariableColon:
enabled: false
style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'
SpaceAfterVariableName:
enabled: true
SpaceAroundOperator:
enabled: true
style: one_space # or 'at_least_one_space', or 'no_space'
SpaceBeforeBrace:
enabled: true
style: space # or 'new_line'
allow_single_line_padding: false
SpaceBetweenParens:
enabled: true
spaces: 0
StringQuotes:
enabled: true
style: double_quotes # or single_quotes
TrailingSemicolon:
enabled: true
TrailingWhitespace:
enabled: true
TrailingZero:
enabled: false
TransitionAll:
enabled: false
UnnecessaryMantissa:
enabled: true
UnnecessaryParentReference:
enabled: true
UrlFormat:
enabled: true
UrlQuotes:
enabled: true
VariableForProperty:
enabled: false
properties: []
VendorPrefix:
enabled: true
identifier_list: base
additional_identifiers: []
excluded_identifiers: []
ZeroUnit:
enabled: true
Compass::*:
enabled: false
================================================
FILE: CHANGELOG.md
================================================
#### Spectre.css Changelog
##### v0.5.9 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.9)
- Update gulp and dependencies
- Update docs, fixes typos, merging PRs, and add more examples like Hero layout and custom prefix
- Update column classes less verbose
- Fix #619 by adding pointer-events to 3 dots
- Fix the behavior of class `loading` together with tooltip
- Only rotate the first child icon when accordion is open/close
- Add a "Reviewed by Hound" badge
##### v0.5.8 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.8)
- IMPORTANT: Moving
- Add Auto width column #541
- Add more Menu badge support #545
- Improve 360-Degree Viewer
- Fix gulp issue #547
- Fix the errors in the Docs #538
##### v0.5.7 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.7)
- Add pure CSS 360-Degree Viewer
- Improve Docs SEO
- Change Carousels image number to variable #428
- Fix Form textarea height issue
##### v0.5.6 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.6)
- Add Docs Search #509 #291
- Add Copy icon
- Add Hero layout #380
- Add multiline Tooltips #500
- Replace transition: all; #526
- Fix #511 issue
- Fix sidebar background height for short docs pages
##### v0.5.5 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.5)
- IMPORTANT: New Docs
- Add Changelog to What's New section
- Fix chip vertical scrollbar #521
- Fix circle -> s-circle #489
- Fix code font-family issue for asian languages #476
##### v0.5.4 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.4)
- IMPORTANT: Change naming of position utilities to avoid conflicts
- Update dark color variable
- Fix sidebar hash link bug #482
- Fix browser support typo #469
- Fix code typo #460
- Fix GitHub button z-index bug #458
- Fix Bar background color issue by adding !important to color utilities
- Fix chip bug when content is too long #506
- Fix multiple select height bug #508
##### v0.5.3 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.3)
- Add dark text color to utilities
- Add error state to the indeterminate checkbox
- Add inline forms
- Add more code examples
- Fix errors in the Docs
##### v0.5.2 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.2)
- IMPORTANT: Move Docs to Pug templates
- Add more Docs examples
- Add visited link style
- Add 100% modal height class #391
- Fix off-canvas-overlay bug #392
- Fix margin and padding values #431
- Fix Accordion example #438
- Fix a bug of input addons width on mobile devices #449
- Separate Simplified Chinese (zh/zh-Hans) from Traditional (zh-Hant)
##### v0.5.1 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.1)
IMPORTANT: Move Autocomplete to the Experimentals
- Add form checkbox, radio and switch support to Menus
- Add responsive horizontal form support #375
- Add Favicons in the docs #398
- Fix Off-canvas z-index problem #361
- Fix icons disappearing on group classes on focus
- Fix Deprecation Warning #396 #356
- Initial commit of RTL support (not finished)
##### v0.5.0 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.0)
- IMPORTANT: Restore /dist folder
- Add Grid nesting example #353
- Add Form control sizes support
- Update Off-canvas default behavior and new option available #347
- Split Mixins
- Fix Navbar last-child align right bug #346
- Fix modal doc typo
- Fix docs examples #348
##### v0.4.7 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.7)
- Add new button colors (success and error) #227 #241 #342
- Add overflow-scrolling: touch; CSS for better scrolling
- Add touch support to Parallax image hover effect
- Update the Modal example code
- Fix form horizontal layout spacing
##### v0.4.6 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.6)
- Add new Sliders example #328
- Add Table with horizontal scroll support #333
- Update Calendar event style which makes use of color utilities #326
- Define $parallax-fade-color as default variable #332
- Fix the Docs content mistake
- Fix breadcrumb-item extra spacing #337
- Fix comparison slider image responsive bug #338
##### v0.4.5 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.5)
- Rewrite Off-canvas component
- Add `active` support to the Off-canvas #308
- Update the Docs pages
##### v0.4.4 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.4)
- IMPORTANT: Increase default font sizes to 16px #271
- Add version number to CSS #288 #289
##### v0.4.3 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.3)
- Add Icon Sizes #284
- Add Large Modals #293
- Update primary color to #5755d9
- Change Tooltips `white-space` to `pre` #292
- Encode SVG Data URI (thanks to @mariodev) #297 #298
- Improve Buttons and Forms small and large variables
- Improve Filters code
- Improve gulpfile and package
- Add Importing Sass Docs
##### v0.4.2 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.2)
- Add Off-screen experimental
- Fix Docs rendering bug in Safari
##### v0.4.1 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.1)
- Add default modifier to all variables
- Add `address` reset which changes font-style to normal
- Add Details and Summary Accordions support
- Fix responsive video
- Update the Docs
##### v0.4.0 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.0)
- Switch from Less to Sass
- Add Cursor utilities
##### v0.3.2 [#](https://github.com/picturepan2/spectre/releases/tag/v0.3.2)
- Add label-rounded classes
- Add Avatars presence status code
- Add Typography Fonts Docs
- Add Button variant mixins
- Update Autocomplete style
- Update Autoprefixer rules
- Update label mixin and code mono font family
##### v0.3.1 [#](https://github.com/picturepan2/spectre/releases/tag/v0.3.1)
*IMPORTANT*: The default root font-size has been changed to `20px`, please update your `rem` numbers if you're using the custom sizes. [Learn more](https://picturepan2.github.io/spectre/getting-started/custom.html#variables-sizes).
- Fix margin and padding utilities bug
- Add grid offset
- Rename Display utilities class names
- Move Panels and Empty states to Components from Layout
- Fix Docs bugs and cleanup codes
##### v0.2.15 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.15)
- BIG Update to the Docs experience, completely rewritten and improved #240
- Add Text and Background colors utilities #205 #219
- Add Install from CDN option #191
- Add unit size (4px) and unit size variables
- Add Responsive container (max width container) #222
- Add error and success states to checkbox, radio and switch #246
- Fix Rem unit issue in East Asian Chrome #110
- Fix icon direction bug #218
- Fix Dropdown menu max items/height #226
##### v0.2.14 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.14)
- Add vertical divider
- Add Form icon support
- Add Accordions
- Add anchor links to Docs
- Add new container grid size
- Fix link error and typo
##### v0.2.13 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.13)
- Add Timelines code
- Add input readonly style
- Change Gulp building process and ignore /dist
- Change naming `danger` to `error`
- Change label-variant mixin
- Fix dropdown-toggle border radius in button groups
- Fix Calendars date item width bug under Firefox
##### v0.2.12 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.12)
- Add pure CSS Comparison Sliders
- Add pure CSS content Filters
- Add Avatars badge support
- Add more icons
- Change :focus support
- Change Docs image sizes and add object-fit support
- Update Navbar code
- Fix typos, Modals bugs
##### v0.2.11 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.11)
- Add pure CSS Popovers
- Add pure CSS Icons
- Add Slider bars
- Add tvOS Parallax effect text layer
- Update shadow mixin
##### v0.2.10 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.10)
- Add Shadows and Z-index variables
- Add Divider text
- Improve color variables
- Cleanup components code
- Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)
##### v0.2.9 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.9)
- Add Panels layout: flexible view container layout with auto-expand content section
- Update Navbar layout
- Update docs and examples
##### v0.2.8 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.8)
- Add Carousels previous and next buttons
- Improve disabled state for forms
- Improve calendar events style
- Improve Sliders disabled style
- Improve Autocomplete menu position
- Merge Menus and Dropdowns
##### v0.2.7 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.7)
- Add Calendars experimental support
- Add tabindex note to the dropdowns docs
- Add shrink-to-fit=no to head meta
- Add Colors docs and update colors
- Fix wrong shadow colors with form-select
- Fix grid-480
##### v0.2.6 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.6)
- Add Carousels initial experimental version
- Add Spectre.css Twitter account (@spectrecss) link
- Improve Docs experience and navbar
- Fix the bug of form input focus colors
##### v0.2.5 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.5)
- Improve color variables completely
- Add Menu badges
- Add Responsive visibility (show-x)
- Add Parallax effect (pure CSS)
- Fix elements and components
- Update empty state layout code
##### v0.2.4 [#] (https://github.com/picturepan2/spectre/releases/tag/v0.2.4)
- ADD: Meters element experimental support
- ADD: Progress indeterminate animation
- ADD: Text-decoration-skip support
- CHG: Split Codes and improve docs codes
- FIX: Steps with tooltips z-index bug
##### v0.2.3 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.3)
- Bars component
- Badges for buttons
- Experimentals CSS and docs
- Sliders experimental component
- A number of fixes as usual
##### v0.2.1 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.1)
I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:
- New Docs experience with better navigations and better mobile off-canvas menu
- New components: Tiles, Steps and Navs (part of Navigation)
- Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards, new Progress experimental support
- Improvements: better focus style
- Fixes
##### v0.0.1 - March 2016
Initial commit
Thank you. ♥
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2016 - 2020 Yan Zhu
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<a href="https://picturepan2.github.io/spectre">
<img src="https://picturepan2.github.io/spectre/img/spectre-logo.svg" width="72" height="72">
</a>
## Spectre.css
[](https://houndci.com)
Spectre.css is a lightweight, responsive and modern CSS framework.
- Lightweight (~10KB gzipped) starting point for your projects
- Flexbox-based, responsive and mobile-friendly layout
- Elegantly designed and developed elements and components
Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.
Spectre.css is completely free to use. If you enjoy it, please consider [donating via Paypal](https://www.paypal.me/picturepan2) or [via Patreon](https://www.patreon.com/spectrecss) for the further development. ♥
## Getting started
There are 5 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.
### Install manually
Download the compiled and minified [Spectre CSS files](https://github.com/picturepan2/spectre/tree/master/docs/dist). And include `spectre.css` located in `/docs/dist` in your website or Web app <head> part.
`<link rel="stylesheet" href="spectre.min.css">`
### Install from CDN
Alternatively, you can use the [unpkg](https://unpkg.com/) or [cdnjs](https://cdnjs.com/libraries/spectre.css) CDN to load compiled Spectre.css.
`<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">`
### Install with NPM
`$ npm install spectre.css --save`
### Install with Yarn
`$ yarn add spectre.css`
### Install with Bower
`$ bower install spectre.css --save`
## Compiling custom version
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/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.css](https://picturepan2.github.io/icons.css) - 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/grid.html)
- [Responsive](https://picturepan2.github.io/spectre/layout/responsive.html)
- [Hero](https://picturepan2.github.io/spectre/layout/hero.html)
- [Navbar](https://picturepan2.github.io/spectre/layout/navbar.html)
### Components
- [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
- [360-Degree Viewer](https://picturepan2.github.io/spectre/experimentals/viewer-360.html) - CSS ONLY
- [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/filters.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:
- Chrome (LAST 4)
- Microsoft Edge (LAST 4)
- Firefox (EXTENDED SUPPORT RELEASE)
- Safari (LAST 4)
- Opera (LAST 4)
- Internet Explorer 10+
Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
Designed and built with ♥ by [Yan Zhu](https://twitter.com/picturepan2). Feel free to submit a pull request. Help is always appreciated.
================================================
FILE: bower.json
================================================
{
"name": "spectre.css",
"version": "0.5.9",
"description": "Spectre.css: A lightweight, responsive and modern CSS framework",
"homepage": "http://picturepan2.github.io/spectre",
"repository": "picturepan2/spectre",
"license": "MIT",
"author": "Yan Zhu <picturepan2@hotmail.com>",
"main": "dist/spectre.css",
"keywords": [
"css",
"framework",
"flexbox",
"responsive",
"mobile-friendly",
"front-end",
"sass",
"modern"
],
"ignore": [
".idea",
".gitignore",
"bower.json",
"package.json",
"node_modules"
]
}
================================================
FILE: dist/spectre-exp.css
================================================
/*! Spectre.css Experimentals v0.5.9 | MIT License | github.com/picturepan2/spectre */
.form-autocomplete {
position: relative;
}
.form-autocomplete .form-autocomplete-input {
align-content: flex-start;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: auto;
min-height: 1.6rem;
padding: .1rem;
}
.form-autocomplete .form-autocomplete-input.is-focused {
border-color: #5755d9;
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
}
.form-autocomplete .form-autocomplete-input .form-input {
border-color: transparent;
box-shadow: none;
display: inline-block;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
height: 1.2rem;
line-height: .8rem;
margin: .1rem;
width: auto;
}
.form-autocomplete .menu {
left: 0;
position: absolute;
top: 100%;
width: 100%;
}
.form-autocomplete.autocomplete-oneline .form-autocomplete-input {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
overflow-x: auto;
}
.form-autocomplete.autocomplete-oneline .chip {
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.calendar {
border: .05rem solid #dadee4;
border-radius: .1rem;
display: block;
min-width: 280px;
}
.calendar .calendar-nav {
align-items: center;
background: #f7f8f9;
border-top-left-radius: .1rem;
border-top-right-radius: .1rem;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
font-size: .9rem;
padding: .4rem;
}
.calendar .calendar-header,
.calendar .calendar-body {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
padding: .4rem 0;
}
.calendar .calendar-header .calendar-date,
.calendar .calendar-body .calendar-date {
-ms-flex: 0 0 14.28%;
flex: 0 0 14.28%;
max-width: 14.28%;
}
.calendar .calendar-header {
background: #f7f8f9;
border-bottom: .05rem solid #dadee4;
color: #bcc3ce;
font-size: .7rem;
text-align: center;
}
.calendar .calendar-body {
color: #66758c;
}
.calendar .calendar-date {
border: 0;
padding: .2rem;
}
.calendar .calendar-date .date-item {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: .05rem solid transparent;
border-radius: 50%;
color: #66758c;
cursor: pointer;
font-size: .7rem;
height: 1.4rem;
line-height: 1rem;
outline: none;
padding: .1rem;
position: relative;
text-align: center;
text-decoration: none;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
vertical-align: middle;
white-space: nowrap;
width: 1.4rem;
}
.calendar .calendar-date .date-item.date-today {
border-color: #e5e5f9;
color: #5755d9;
}
.calendar .calendar-date .date-item:focus {
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
}
.calendar .calendar-date .date-item:focus,
.calendar .calendar-date .date-item:hover {
background: #fefeff;
border-color: #e5e5f9;
color: #5755d9;
text-decoration: none;
}
.calendar .calendar-date .date-item:active,
.calendar .calendar-date .date-item.active {
background: #4b48d6;
border-color: #3634d2;
color: #fff;
}
.calendar .calendar-date .date-item.badge::after {
position: absolute;
right: 3px;
top: 3px;
transform: translate(50%, -50%);
}
.calendar .calendar-date .date-item:disabled,
.calendar .calendar-date .date-item.disabled,
.calendar .calendar-date .calendar-event:disabled,
.calendar .calendar-date .calendar-event.disabled {
cursor: default;
opacity: .25;
pointer-events: none;
}
.calendar .calendar-date.prev-month .date-item,
.calendar .calendar-date.prev-month .calendar-event,
.calendar .calendar-date.next-month .date-item,
.calendar .calendar-date.next-month .calendar-event {
opacity: .25;
}
.calendar .calendar-range {
position: relative;
}
.calendar .calendar-range::before {
background: #f1f1fc;
content: "";
height: 1.4rem;
left: 0;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.calendar .calendar-range.range-start::before {
left: 50%;
}
.calendar .calendar-range.range-end::before {
right: 50%;
}
.calendar .calendar-range.range-start .date-item,
.calendar .calendar-range.range-end .date-item {
background: #4b48d6;
border-color: #3634d2;
color: #fff;
}
.calendar .calendar-range .date-item {
color: #5755d9;
}
.calendar.calendar-lg .calendar-body {
padding: 0;
}
.calendar.calendar-lg .calendar-body .calendar-date {
border-bottom: .05rem solid #dadee4;
border-right: .05rem solid #dadee4;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
height: 5.5rem;
padding: 0;
}
.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) {
border-right: 0;
}
.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7) {
border-bottom: 0;
}
.calendar.calendar-lg .date-item {
align-self: flex-end;
-ms-flex-item-align: end;
height: 1.4rem;
margin-right: .2rem;
margin-top: .2rem;
}
.calendar.calendar-lg .calendar-range::before {
top: 19px;
}
.calendar.calendar-lg .calendar-range.range-start::before {
left: auto;
width: 19px;
}
.calendar.calendar-lg .calendar-range.range-end::before {
right: 19px;
}
.calendar.calendar-lg .calendar-events {
flex-grow: 1;
-ms-flex-positive: 1;
line-height: 1;
overflow-y: auto;
padding: .2rem;
}
.calendar.calendar-lg .calendar-event {
border-radius: .1rem;
display: block;
font-size: .7rem;
margin: .1rem auto;
overflow: hidden;
padding: 3px 4px;
text-overflow: ellipsis;
white-space: nowrap;
}
.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4),
.carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-container .carousel-item:nth-of-type(5),
.carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-container .carousel-item:nth-of-type(6),
.carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-container .carousel-item:nth-of-type(7),
.carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-container .carousel-item:nth-of-type(8) {
animation: carousel-slidein .75s ease-in-out 1;
opacity: 1;
z-index: 100;
}
.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4),
.carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-nav .nav-item:nth-of-type(5),
.carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-nav .nav-item:nth-of-type(6),
.carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-nav .nav-item:nth-of-type(7),
.carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-nav .nav-item:nth-of-type(8) {
color: #f7f8f9;
}
.carousel {
background: #f7f8f9;
display: block;
overflow: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
width: 100%;
z-index: 1;
}
.carousel .carousel-container {
height: 100%;
left: 0;
position: relative;
}
.carousel .carousel-container::before {
content: "";
display: block;
padding-bottom: 56.25%;
}
.carousel .carousel-container .carousel-item {
animation: carousel-slideout 1s ease-in-out 1;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.carousel .carousel-container .carousel-item:hover .item-prev,
.carousel .carousel-container .carousel-item:hover .item-next {
opacity: 1;
}
.carousel .carousel-container .item-prev,
.carousel .carousel-container .item-next {
background: rgba(247, 248, 249, .25);
border-color: rgba(247, 248, 249, .5);
color: #f7f8f9;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: all .4s;
z-index: 100;
}
.carousel .carousel-container .item-prev {
left: 1rem;
}
.carousel .carousel-container .item-next {
right: 1rem;
}
.carousel .carousel-nav {
bottom: .4rem;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 10rem;
z-index: 100;
}
.carousel .carousel-nav .nav-item {
color: rgba(247, 248, 249, .5);
display: block;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
height: 1.6rem;
margin: .2rem;
max-width: 2.5rem;
position: relative;
}
.carousel .carousel-nav .nav-item::before {
background: currentColor;
content: "";
display: block;
height: .1rem;
position: absolute;
top: .5rem;
width: 100%;
}
@keyframes carousel-slidein {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes carousel-slideout {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(-50%);
}
}
.comparison-slider {
height: 50vh;
overflow: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
width: 100%;
}
.comparison-slider .comparison-before,
.comparison-slider .comparison-after {
height: 100%;
left: 0;
margin: 0;
overflow: hidden;
position: absolute;
top: 0;
}
.comparison-slider .comparison-before img,
.comparison-slider .comparison-after img {
height: 100%;
object-fit: cover;
object-position: left center;
position: absolute;
width: 100%;
}
.comparison-slider .comparison-before {
width: 100%;
z-index: 1;
}
.comparison-slider .comparison-before .comparison-label {
right: .8rem;
}
.comparison-slider .comparison-after {
max-width: 100%;
min-width: 0;
z-index: 2;
}
.comparison-slider .comparison-after::before {
background: transparent;
content: "";
cursor: default;
height: 100%;
left: 0;
position: absolute;
right: .8rem;
top: 0;
z-index: 1;
}
.comparison-slider .comparison-after::after {
background: currentColor;
border-radius: 50%;
box-shadow: 0 -5px, 0 5px;
color: #fff;
content: "";
height: 3px;
pointer-events: none;
position: absolute;
right: .4rem;
top: 50%;
transform: translate(50%, -50%);
width: 3px;
}
.comparison-slider .comparison-after .comparison-label {
left: .8rem;
}
.comparison-slider .comparison-resizer {
animation: first-run 1.5s 1 ease-in-out;
cursor: ew-resize;
height: .8rem;
left: 0;
max-width: 100%;
min-width: .8rem;
opacity: 0;
outline: none;
position: relative;
resize: horizontal;
top: 50%;
transform: translateY(-50%) scaleY(30);
width: 0;
}
.comparison-slider .comparison-label {
background: rgba(48, 55, 66, .5);
bottom: .8rem;
color: #fff;
padding: .2rem .4rem;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@keyframes first-run {
0% {
width: 0;
}
25% {
width: 2.4rem;
}
50% {
width: .8rem;
}
75% {
width: 1.2rem;
}
100% {
width: 0;
}
}
.filter .filter-tag#tag-0:checked ~ .filter-nav .chip[for="tag-0"],
.filter .filter-tag#tag-1:checked ~ .filter-nav .chip[for="tag-1"],
.filter .filter-tag#tag-2:checked ~ .filter-nav .chip[for="tag-2"],
.filter .filter-tag#tag-3:checked ~ .filter-nav .chip[for="tag-3"],
.filter .filter-tag#tag-4:checked ~ .filter-nav .chip[for="tag-4"],
.filter .filter-tag#tag-5:checked ~ .filter-nav .chip[for="tag-5"],
.filter .filter-tag#tag-6:checked ~ .filter-nav .chip[for="tag-6"],
.filter .filter-tag#tag-7:checked ~ .filter-nav .chip[for="tag-7"],
.filter .filter-tag#tag-8:checked ~ .filter-nav .chip[for="tag-8"] {
background: #5755d9;
color: #fff;
}
.filter .filter-tag#tag-1:checked ~ .filter-body .filter-item:not([data-tag~="tag-1"]),
.filter .filter-tag#tag-2:checked ~ .filter-body .filter-item:not([data-tag~="tag-2"]),
.filter .filter-tag#tag-3:checked ~ .filter-body .filter-item:not([data-tag~="tag-3"]),
.filter .filter-tag#tag-4:checked ~ .filter-body .filter-item:not([data-tag~="tag-4"]),
.filter .filter-tag#tag-5:checked ~ .filter-body .filter-item:not([data-tag~="tag-5"]),
.filter .filter-tag#tag-6:checked ~ .filter-body .filter-item:not([data-tag~="tag-6"]),
.filter .filter-tag#tag-7:checked ~ .filter-body .filter-item:not([data-tag~="tag-7"]),
.filter .filter-tag#tag-8:checked ~ .filter-body .filter-item:not([data-tag~="tag-8"]) {
display: none;
}
.filter .filter-nav {
margin: .4rem 0;
}
.filter .filter-body {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.meter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #f7f8f9;
border: 0;
border-radius: .1rem;
display: block;
height: .8rem;
width: 100%;
}
.meter::-webkit-meter-inner-element {
display: block;
}
.meter::-webkit-meter-bar,
.meter::-webkit-meter-optimum-value,
.meter::-webkit-meter-suboptimum-value,
.meter::-webkit-meter-even-less-good-value {
border-radius: .1rem;
}
.meter::-webkit-meter-bar {
background: #f7f8f9;
}
.meter::-webkit-meter-optimum-value {
background: #32b643;
}
.meter::-webkit-meter-suboptimum-value {
background: #ffb700;
}
.meter::-webkit-meter-even-less-good-value {
background: #e85600;
}
.meter::-moz-meter-bar,
.meter:-moz-meter-optimum,
.meter:-moz-meter-sub-optimum,
.meter:-moz-meter-sub-sub-optimum {
border-radius: .1rem;
}
.meter:-moz-meter-optimum::-moz-meter-bar {
background: #32b643;
}
.meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: #ffb700;
}
.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: #e85600;
}
.off-canvas {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: nowrap;
flex-flow: nowrap;
height: 100%;
position: relative;
width: 100%;
}
.off-canvas .off-canvas-toggle {
display: block;
left: .4rem;
position: absolute;
top: .4rem;
transition: none;
z-index: 1;
}
.off-canvas .off-canvas-sidebar {
background: #f7f8f9;
bottom: 0;
left: 0;
min-width: 10rem;
overflow-y: auto;
position: fixed;
top: 0;
transform: translateX(-100%);
transition: transform .25s;
z-index: 200;
}
.off-canvas .off-canvas-content {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
height: 100%;
padding: .4rem .4rem .4rem 4rem;
}
.off-canvas .off-canvas-overlay {
background: rgba(48, 55, 66, .1);
border-color: transparent;
border-radius: 0;
bottom: 0;
display: none;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.off-canvas .off-canvas-sidebar:target,
.off-canvas .off-canvas-sidebar.active {
transform: translateX(0);
}
.off-canvas .off-canvas-sidebar:target ~ .off-canvas-overlay,
.off-canvas .off-canvas-sidebar.active ~ .off-canvas-overlay {
display: block;
z-index: 100;
}
@media (min-width: 960px) {
.off-canvas.off-canvas-sidebar-show .off-canvas-toggle {
display: none;
}
.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
position: relative;
transform: none;
}
.off-canvas.off-canvas-sidebar-show .off-canvas-overlay {
display: none !important;
}
}
.parallax {
display: block;
height: auto;
position: relative;
width: auto;
}
.parallax .parallax-content {
box-shadow: 0 1rem 2.1rem rgba(48, 55, 66, .3);
height: auto;
transform: perspective(1000px);
transform-style: preserve-3d;
transition: all .4s ease;
width: 100%;
}
.parallax .parallax-content::before {
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.parallax .parallax-front {
align-items: center;
color: #fff;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
text-align: center;
text-shadow: 0 0 20px rgba(48, 55, 66, .75);
top: 0;
transform: translateZ(50px) scale(.95);
transition: transform .4s;
width: 100%;
z-index: 1;
}
.parallax .parallax-top-left {
height: 50%;
left: 0;
outline: none;
position: absolute;
top: 0;
width: 50%;
z-index: 100;
}
.parallax .parallax-top-left:focus ~ .parallax-content,
.parallax .parallax-top-left:hover ~ .parallax-content {
transform: perspective(1000px) rotateX(3deg) rotateY(-3deg);
}
.parallax .parallax-top-left:focus ~ .parallax-content::before,
.parallax .parallax-top-left:hover ~ .parallax-content::before {
background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
}
.parallax .parallax-top-left:focus ~ .parallax-content .parallax-front,
.parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
transform: translate3d(4.5px, 4.5px, 50px) scale(.95);
}
.parallax .parallax-top-right {
height: 50%;
outline: none;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 100;
}
.parallax .parallax-top-right:focus ~ .parallax-content,
.parallax .parallax-top-right:hover ~ .parallax-content {
transform: perspective(1000px) rotateX(3deg) rotateY(3deg);
}
.parallax .parallax-top-right:focus ~ .parallax-content::before,
.parallax .parallax-top-right:hover ~ .parallax-content::before {
background: linear-gradient(-135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
}
.parallax .parallax-top-right:focus ~ .parallax-content .parallax-front,
.parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
transform: translate3d(-4.5px, 4.5px, 50px) scale(.95);
}
.parallax .parallax-bottom-left {
bottom: 0;
height: 50%;
left: 0;
outline: none;
position: absolute;
width: 50%;
z-index: 100;
}
.parallax .parallax-bottom-left:focus ~ .parallax-content,
.parallax .parallax-bottom-left:hover ~ .parallax-content {
transform: perspective(1000px) rotateX(-3deg) rotateY(-3deg);
}
.parallax .parallax-bottom-left:focus ~ .parallax-content::before,
.parallax .parallax-bottom-left:hover ~ .parallax-content::before {
background: linear-gradient(45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
}
.parallax .parallax-bottom-left:focus ~ .parallax-content .parallax-front,
.parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
transform: translate3d(4.5px, -4.5px, 50px) scale(.95);
}
.parallax .parallax-bottom-right {
bottom: 0;
height: 50%;
outline: none;
position: absolute;
right: 0;
width: 50%;
z-index: 100;
}
.parallax .parallax-bottom-right:focus ~ .parallax-content,
.parallax .parallax-bottom-right:hover ~ .parallax-content {
transform: perspective(1000px) rotateX(-3deg) rotateY(3deg);
}
.parallax .parallax-bottom-right:focus ~ .parallax-content::before,
.parallax .parallax-bottom-right:hover ~ .parallax-content::before {
background: linear-gradient(-45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
}
.parallax .parallax-bottom-right:focus ~ .parallax-content .parallax-front,
.parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
transform: translate3d(-4.5px, -4.5px, 50px) scale(.95);
}
.progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #eef0f3;
border: 0;
border-radius: .1rem;
color: #5755d9;
height: .2rem;
position: relative;
width: 100%;
}
.progress::-webkit-progress-bar {
background: transparent;
border-radius: .1rem;
}
.progress::-webkit-progress-value {
background: #5755d9;
border-radius: .1rem;
}
.progress::-moz-progress-bar {
background: #5755d9;
border-radius: .1rem;
}
.progress:indeterminate {
animation: progress-indeterminate 1.5s linear infinite;
background: #eef0f3 linear-gradient(to right, #5755d9 30%, #eef0f3 30%) top left/150% 150% no-repeat;
}
.progress:indeterminate::-moz-progress-bar {
background: transparent;
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
display: block;
height: 1.2rem;
width: 100%;
}
.slider:focus {
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
outline: none;
}
.slider.tooltip:not([data-tooltip])::after {
content: attr(value);
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #5755d9;
border: 0;
border-radius: 50%;
height: .6rem;
margin-top: -.25rem;
-webkit-transition: transform .2s;
transition: transform .2s;
width: .6rem;
}
.slider::-moz-range-thumb {
background: #5755d9;
border: 0;
border-radius: 50%;
height: .6rem;
-moz-transition: transform .2s;
transition: transform .2s;
width: .6rem;
}
.slider::-ms-thumb {
background: #5755d9;
border: 0;
border-radius: 50%;
height: .6rem;
-ms-transition: transform .2s;
transition: transform .2s;
width: .6rem;
}
.slider:active::-webkit-slider-thumb {
transform: scale(1.25);
}
.slider:active::-moz-range-thumb {
transform: scale(1.25);
}
.slider:active::-ms-thumb {
transform: scale(1.25);
}
.slider:disabled::-webkit-slider-thumb,
.slider.disabled::-webkit-slider-thumb {
background: #f7f8f9;
transform: scale(1);
}
.slider:disabled::-moz-range-thumb,
.slider.disabled::-moz-range-thumb {
background: #f7f8f9;
transform: scale(1);
}
.slider:disabled::-ms-thumb,
.slider.disabled::-ms-thumb {
background: #f7f8f9;
transform: scale(1);
}
.slider::-webkit-slider-runnable-track {
background: #eef0f3;
border-radius: .1rem;
height: .1rem;
width: 100%;
}
.slider::-moz-range-track {
background: #eef0f3;
border-radius: .1rem;
height: .1rem;
width: 100%;
}
.slider::-ms-track {
background: #eef0f3;
border-radius: .1rem;
height: .1rem;
width: 100%;
}
.slider::-ms-fill-lower {
background: #5755d9;
}
.timeline .timeline-item {
display: -ms-flexbox;
display: flex;
margin-bottom: 1.2rem;
position: relative;
}
.timeline .timeline-item::before {
background: #dadee4;
content: "";
height: 100%;
left: 11px;
position: absolute;
top: 1.2rem;
width: 2px;
}
.timeline .timeline-item .timeline-left {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.timeline .timeline-item .timeline-content {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 2px 0 2px .8rem;
}
.timeline .timeline-item .timeline-icon {
align-items: center;
border-radius: 50%;
color: #fff;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
height: 1.2rem;
justify-content: center;
text-align: center;
width: 1.2rem;
}
.timeline .timeline-item .timeline-icon::before {
border: .1rem solid #5755d9;
border-radius: 50%;
content: "";
display: block;
height: .4rem;
left: .4rem;
position: absolute;
top: .4rem;
width: .4rem;
}
.timeline .timeline-item .timeline-icon.icon-lg {
background: #5755d9;
line-height: 1.2rem;
}
.timeline .timeline-item .timeline-icon.icon-lg::before {
content: none;
}
.viewer-360 {
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-ms-flex-direction: column;
flex-direction: column;
}
.viewer-360 .viewer-slider[max="36"][value="1"] + .viewer-image {
background-position-y: 0;
}
.viewer-360 .viewer-slider[max="36"][value="2"] + .viewer-image {
background-position-y: 2.8571428571%;
}
.viewer-360 .viewer-slider[max="36"][value="3"] + .viewer-image {
background-position-y: 5.7142857143%;
}
.viewer-360 .viewer-slider[max="36"][value="4"] + .viewer-image {
background-position-y: 8.5714285714%;
}
.viewer-360 .viewer-slider[max="36"][value="5"] + .viewer-image {
background-position-y: 11.4285714286%;
}
.viewer-360 .viewer-slider[max="36"][value="6"] + .viewer-image {
background-position-y: 14.2857142857%;
}
.viewer-360 .viewer-slider[max="36"][value="7"] + .viewer-image {
background-position-y: 17.1428571429%;
}
.viewer-360 .viewer-slider[max="36"][value="8"] + .viewer-image {
background-position-y: 20%;
}
.viewer-360 .viewer-slider[max="36"][value="9"] + .viewer-image {
background-position-y: 22.8571428571%;
}
.viewer-360 .viewer-slider[max="36"][value="10"] + .viewer-image {
background-position-y: 25.7142857143%;
}
.viewer-360 .viewer-slider[max="36"][value="11"] + .viewer-image {
background-position-y: 28.5714285714%;
}
.viewer-360 .viewer-slider[max="36"][value="12"] + .viewer-image {
background-position-y: 31.4285714286%;
}
.viewer-360 .viewer-slider[max="36"][value="13"] + .viewer-image {
background-position-y: 34.2857142857%;
}
.viewer-360 .viewer-slider[max="36"][value="14"] + .viewer-image {
background-position-y: 37.1428571429%;
}
.viewer-360 .viewer-slider[max="36"][value="15"] + .viewer-image {
background-position-y: 40%;
}
.viewer-360 .viewer-slider[max="36"][value="16"] + .viewer-image {
background-position-y: 42.8571428571%;
}
.viewer-360 .viewer-slider[max="36"][value="17"] + .viewer-image {
background-position-y: 45.7142857143%;
}
.viewer-360 .viewer-slider[max="36"][value="18"] + .viewer-image {
background-position-y: 48.5714285714%;
}
.viewer-360 .viewer-slider[max="36"][value="19"] + .viewer-image {
background-position-y: 51.4285714286%;
}
.viewer-360 .viewer-slider[max="36"][value="20"] + .viewer-image {
background-position-y: 54.2857142857%;
}
.viewer-360 .viewer-slider[max="36"][value="21"] + .viewer-image {
background-position-y: 57.1428571429%;
}
.viewer-360 .viewer-slider[max="36"][value="22"] + .viewer-image {
background-position-y: 60%;
}
.viewer-360 .viewer-slider[max="36"][value="23"] + .viewer-image {
background-position-y: 62.8571428571%;
}
.viewer-360 .viewer-slider[max="36"][value="24"] + .viewer-image {
background-position-y: 65.7142857143%;
}
.viewer-360 .viewer-slider[max="36"][value="25"] + .viewer-image {
background-position-y: 68.5714285714%;
}
.viewer-360 .viewer-slider[max="36"][value="26"] + .viewer-image {
background-position-y: 71.4285714286%;
}
.viewer-360 .viewer-slider[max="36"][value="27"] + .viewer-image {
background-position-y: 74.2857142857%;
}
.viewer-360 .viewer-slider[max="36"][value="28"] + .viewer-image {
background-position-y: 77.1428571429%;
}
.viewer-360 .viewer-slider[max="36"][value="29"] + .viewer-image {
background-position-y: 80%;
}
.viewer-360 .viewer-slider[max="36"][value="30"] + .viewer-image {
background-position-y: 82.8571428571%;
}
.viewer-360 .viewer-slider[max="36"][value="31"] + .viewer-image {
background-position-y: 85.7142857143%;
}
.viewer-360 .viewer-slider[max="36"][value="32"] + .viewer-image {
background-position-y: 88.5714285714%;
}
.viewer-360 .viewer-slider[max="36"][value="33"] + .viewer-image {
background-position-y: 91.4285714286%;
}
.viewer-360 .viewer-slider[max="36"][value="34"] + .viewer-image {
background-position-y: 94.2857142857%;
}
.viewer-360 .viewer-slider[max="36"][value="35"] + .viewer-image {
background-position-y: 97.1428571429%;
}
.viewer-360 .viewer-slider[max="36"][value="36"] + .viewer-image {
background-position-y: 100%;
}
.viewer-360 .viewer-slider {
cursor: ew-resize;
-ms-flex-order: 2;
margin: 1rem;
order: 2;
width: 60%;
}
.viewer-360 .viewer-image {
background-position-y: 0;
background-repeat: no-repeat;
background-size: 100%;
-ms-flex-order: 1;
max-width: 100%;
order: 1;
}
================================================
FILE: dist/spectre-icons.css
================================================
/*! Spectre.css Icons v0.5.9 | MIT License | github.com/picturepan2/spectre */
.icon {
box-sizing: border-box;
display: inline-block;
font-size: inherit;
font-style: normal;
height: 1em;
position: relative;
text-indent: -9999px;
vertical-align: middle;
width: 1em;
}
.icon::before,
.icon::after {
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.icon.icon-2x {
font-size: 1.6rem;
}
.icon.icon-3x {
font-size: 2.4rem;
}
.icon.icon-4x {
font-size: 3.2rem;
}
.accordion .icon,
.btn .icon,
.toast .icon,
.menu .icon {
vertical-align: -10%;
}
.btn-lg .icon {
vertical-align: -15%;
}
.icon-arrow-down::before,
.icon-arrow-left::before,
.icon-arrow-right::before,
.icon-arrow-up::before,
.icon-downward::before,
.icon-back::before,
.icon-forward::before,
.icon-upward::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .65em;
width: .65em;
}
.icon-arrow-down::before {
transform: translate(-50%, -75%) rotate(225deg);
}
.icon-arrow-left::before {
transform: translate(-25%, -50%) rotate(-45deg);
}
.icon-arrow-right::before {
transform: translate(-75%, -50%) rotate(135deg);
}
.icon-arrow-up::before {
transform: translate(-50%, -25%) rotate(45deg);
}
.icon-back::after,
.icon-forward::after {
background: currentColor;
height: .1rem;
width: .8em;
}
.icon-downward::after,
.icon-upward::after {
background: currentColor;
height: .8em;
width: .1rem;
}
.icon-back::after {
left: 55%;
}
.icon-back::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
.icon-downward::after {
top: 45%;
}
.icon-downward::before {
transform: translate(-50%, -50%) rotate(-135deg);
}
.icon-forward::after {
left: 45%;
}
.icon-forward::before {
transform: translate(-50%, -50%) rotate(135deg);
}
.icon-upward::after {
top: 55%;
}
.icon-upward::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.icon-caret::before {
border-left: .3em solid transparent;
border-right: .3em solid transparent;
border-top: .3em solid currentColor;
height: 0;
transform: translate(-50%, -25%);
width: 0;
}
.icon-menu::before {
background: currentColor;
box-shadow: 0 -.35em, 0 .35em;
height: .1rem;
width: 100%;
}
.icon-apps::before {
background: currentColor;
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
height: 3px;
width: 3px;
}
.icon-resize-horiz::before,
.icon-resize-horiz::after,
.icon-resize-vert::before,
.icon-resize-vert::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .45em;
width: .45em;
}
.icon-resize-horiz::before,
.icon-resize-vert::before {
transform: translate(-50%, -90%) rotate(45deg);
}
.icon-resize-horiz::after,
.icon-resize-vert::after {
transform: translate(-50%, -10%) rotate(225deg);
}
.icon-resize-horiz::before {
transform: translate(-90%, -50%) rotate(-45deg);
}
.icon-resize-horiz::after {
transform: translate(-10%, -50%) rotate(135deg);
}
.icon-more-horiz::before,
.icon-more-vert::before {
background: currentColor;
border-radius: 50%;
box-shadow: -.4em 0, .4em 0;
height: 3px;
width: 3px;
}
.icon-more-vert::before {
box-shadow: 0 -.4em, 0 .4em;
}
.icon-plus::before,
.icon-minus::before,
.icon-cross::before {
background: currentColor;
height: .1rem;
width: 100%;
}
.icon-plus::after,
.icon-cross::after {
background: currentColor;
height: 100%;
width: .1rem;
}
.icon-cross::before {
width: 100%;
}
.icon-cross::after {
height: 100%;
}
.icon-cross::before,
.icon-cross::after {
transform: translate(-50%, -50%) rotate(45deg);
}
.icon-check::before {
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
transform: translate(-50%, -75%) rotate(-45deg);
width: .9em;
}
.icon-stop {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-stop::before {
background: currentColor;
height: .1rem;
transform: translate(-50%, -50%) rotate(45deg);
width: 1em;
}
.icon-shutdown {
border: .1rem solid currentColor;
border-radius: 50%;
border-top-color: transparent;
}
.icon-shutdown::before {
background: currentColor;
content: "";
height: .5em;
top: .1em;
width: .1rem;
}
.icon-refresh::before {
border: .1rem solid currentColor;
border-radius: 50%;
border-right-color: transparent;
height: 1em;
width: 1em;
}
.icon-refresh::after {
border: .2em solid currentColor;
border-left-color: transparent;
border-top-color: transparent;
height: 0;
left: 80%;
top: 20%;
width: 0;
}
.icon-search::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .75em;
left: 5%;
top: 5%;
transform: translate(0, 0) rotate(45deg);
width: .75em;
}
.icon-search::after {
background: currentColor;
height: .1rem;
left: 80%;
top: 80%;
transform: translate(-50%, -50%) rotate(45deg);
width: .4em;
}
.icon-edit::before {
border: .1rem solid currentColor;
height: .4em;
transform: translate(-40%, -60%) rotate(-45deg);
width: .85em;
}
.icon-edit::after {
border: .15em solid currentColor;
border-right-color: transparent;
border-top-color: transparent;
height: 0;
left: 5%;
top: 95%;
transform: translate(0, -100%);
width: 0;
}
.icon-delete::before {
border: .1rem solid currentColor;
border-bottom-left-radius: .1rem;
border-bottom-right-radius: .1rem;
border-top: 0;
height: .75em;
top: 60%;
width: .75em;
}
.icon-delete::after {
background: currentColor;
box-shadow: -.25em .2em, .25em .2em;
height: .1rem;
top: .05rem;
width: .5em;
}
.icon-share {
border: .1rem solid currentColor;
border-radius: .1rem;
border-right: 0;
border-top: 0;
}
.icon-share::before {
border: .1rem solid currentColor;
border-left: 0;
border-top: 0;
height: .4em;
left: 100%;
top: .25em;
transform: translate(-125%, -50%) rotate(-45deg);
width: .4em;
}
.icon-share::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: 75% 0;
border-right: 0;
height: .5em;
width: .6em;
}
.icon-flag::before {
background: currentColor;
height: 1em;
left: 15%;
width: .1rem;
}
.icon-flag::after {
border: .1rem solid currentColor;
border-bottom-right-radius: .1rem;
border-left: 0;
border-top-right-radius: .1rem;
height: .65em;
left: 60%;
top: 35%;
width: .8em;
}
.icon-bookmark::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-top-left-radius: .1rem;
border-top-right-radius: .1rem;
height: .9em;
width: .8em;
}
.icon-bookmark::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-left: 0;
border-radius: .1rem;
height: .5em;
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
width: .5em;
}
.icon-download,
.icon-upload {
border-bottom: .1rem solid currentColor;
}
.icon-download::before,
.icon-upload::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .5em;
transform: translate(-50%, -60%) rotate(-135deg);
width: .5em;
}
.icon-download::after,
.icon-upload::after {
background: currentColor;
height: .6em;
top: 40%;
width: .1rem;
}
.icon-upload::before {
transform: translate(-50%, -60%) rotate(45deg);
}
.icon-upload::after {
top: 50%;
}
.icon-copy::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: .1rem;
border-right: 0;
height: .8em;
left: 40%;
top: 35%;
width: .8em;
}
.icon-copy::after {
border: .1rem solid currentColor;
border-radius: .1rem;
height: .8em;
left: 60%;
top: 60%;
width: .8em;
}
.icon-time {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-time::before {
background: currentColor;
height: .4em;
transform: translate(-50%, -75%);
width: .1rem;
}
.icon-time::after {
background: currentColor;
height: .3em;
transform: translate(-50%, -75%) rotate(90deg);
transform-origin: 50% 90%;
width: .1rem;
}
.icon-mail::before {
border: .1rem solid currentColor;
border-radius: .1rem;
height: .8em;
width: 1em;
}
.icon-mail::after {
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
width: .5em;
}
.icon-people::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .45em;
top: 25%;
width: .45em;
}
.icon-people::after {
border: .1rem solid currentColor;
border-radius: 50% 50% 0 0;
height: .4em;
top: 75%;
width: .9em;
}
.icon-message {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: .1rem;
border-right: 0;
}
.icon-message::before {
border: .1rem solid currentColor;
border-bottom-right-radius: .1rem;
border-left: 0;
border-top: 0;
height: .8em;
left: 65%;
top: 40%;
width: .7em;
}
.icon-message::after {
background: currentColor;
border-radius: .1rem;
height: .3em;
left: 10%;
top: 100%;
transform: translate(0, -90%) rotate(45deg);
width: .1rem;
}
.icon-photo {
border: .1rem solid currentColor;
border-radius: .1rem;
}
.icon-photo::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .25em;
left: 35%;
top: 35%;
width: .25em;
}
.icon-photo::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-left: 0;
height: .5em;
left: 60%;
transform: translate(-50%, 25%) rotate(-45deg);
width: .5em;
}
.icon-link::before,
.icon-link::after {
border: .1rem solid currentColor;
border-radius: 5em 0 0 5em;
border-right: 0;
height: .5em;
width: .75em;
}
.icon-link::before {
transform: translate(-70%, -45%) rotate(-45deg);
}
.icon-link::after {
transform: translate(-30%, -55%) rotate(135deg);
}
.icon-location::before {
border: .1rem solid currentColor;
border-radius: 50% 50% 50% 0;
height: .8em;
transform: translate(-50%, -60%) rotate(-45deg);
width: .8em;
}
.icon-location::after {
border: .1rem solid currentColor;
border-radius: 50%;
height: .2em;
transform: translate(-50%, -80%);
width: .2em;
}
.icon-emoji {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-emoji::before {
border-radius: 50%;
box-shadow: -.17em -.1em, .17em -.1em;
height: .15em;
width: .15em;
}
.icon-emoji::after {
border: .1rem solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
border-right-color: transparent;
height: .5em;
transform: translate(-50%, -40%) rotate(-135deg);
width: .5em;
}
================================================
FILE: dist/spectre.css
================================================
/*! Spectre.css v0.5.9 | MIT License | github.com/picturepan2/spectre */
/* Manually forked from Normalize.css */
/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
/* Document ========================================================================== */
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 3 */
-ms-text-size-adjust: 100%; /* 3 */
}
/* Sections ========================================================================== */
/** Remove the margin in all browsers (opinionated). */
body {
margin: 0;
}
/** Add the correct display in IE 9-. */
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 {
font-size: 2em;
margin: .67em 0;
}
/* Grouping content ========================================================================== */
/** Add the correct display in IE 9-. 1. Add the correct display in IE. */
figcaption,
figure,
main {
/* 1 */ display: block;
}
/** Add the correct margin in IE 8 (removed). */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/** 1. Correct the inheritance and scaling of font size in all browsers. (removed) 2. Correct the odd `em` font sizing in all browsers. */
/* Text-level semantics ========================================================================== */
/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
a:active,
a:hover {
outline-width: 0;
}
/** Modify default styling of address. */
address {
font-style: normal;
}
/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) */
/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b,
strong {
font-weight: inherit;
}
/** Add the correct font weight in Chrome, Edge, and Safari. */
b,
strong {
font-weight: bolder;
}
/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code,
kbd,
pre,
samp {
font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; /* 1 (changed) */
font-size: 1em; /* 2 */
}
/** Add the correct font style in Android 4.3-. */
dfn {
font-style: italic;
}
/** Add the correct background and color in IE 9-. (Removed) */
/** Add the correct font size in all browsers. */
small {
font-size: 80%;
font-weight: 400; /* (added) */
}
/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
/* Embedded content ========================================================================== */
/** Add the correct display in IE 9-. */
audio,
video {
display: inline-block;
}
/** Add the correct display in iOS 4-7. */
audio:not([controls]) {
display: none;
height: 0;
}
/** Remove the border on images inside links in IE 10-. */
img {
border-style: none;
}
/** Hide the overflow in IE. */
svg:not(:root) {
overflow: hidden;
}
/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 (changed) */
font-size: inherit; /* 1 (changed) */
line-height: inherit; /* 1 (changed) */
margin: 0; /* 2 */
}
/** Show the overflow in IE. 1. Show the overflow in Edge. */
button,
input {
/* 1 */ overflow: visible;
}
/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button,
select {
/* 1 */ text-transform: none;
}
/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/** Restore the focus styles unset by the previous rule (removed). */
/** Change the border, margin, and padding in all browsers (opinionated) (changed). */
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/** 1. Add the correct display in IE 9-. 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/** Remove the default vertical scrollbar in IE. */
textarea {
overflow: auto;
}
/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/** Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive ========================================================================== */
/* Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. */
details,
menu {
display: block;
}
/* Add the correct display in all browsers. */
summary {
display: list-item;
outline: none;
}
/* Scripting ========================================================================== */
/** Add the correct display in IE 9-. */
canvas {
display: inline-block;
}
/** Add the correct display in IE. */
template {
display: none;
}
/* Hidden ========================================================================== */
/** Add the correct display in IE 10-. */
[hidden] {
display: none;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 20px;
line-height: 1.5;
-webkit-tap-highlight-color: transparent;
}
body {
background: #fff;
color: #3b4351;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
font-size: .8rem;
overflow-x: hidden;
text-rendering: optimizeLegibility;
}
a {
color: #5755d9;
outline: none;
text-decoration: none;
}
a:focus {
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
}
a:focus,
a:hover,
a:active,
a.active {
color: #302ecd;
text-decoration: underline;
}
a:visited {
color: #807fe2;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-weight: 500;
line-height: 1.2;
margin-bottom: .5em;
margin-top: 0;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-weight: 500;
}
h1,
.h1 {
font-size: 2rem;
}
h2,
.h2 {
font-size: 1.6rem;
}
h3,
.h3 {
font-size: 1.4rem;
}
h4,
.h4 {
font-size: 1.2rem;
}
h5,
.h5 {
font-size: 1rem;
}
h6,
.h6 {
font-size: .8rem;
}
p {
margin: 0 0 1.2rem;
}
a,
ins,
u {
-webkit-text-decoration-skip: ink edges;
text-decoration-skip: ink edges;
}
abbr[title] {
border-bottom: .05rem dotted;
cursor: help;
text-decoration: none;
}
kbd {
background: #303742;
border-radius: .1rem;
color: #fff;
font-size: .7rem;
line-height: 1.25;
padding: .1rem .2rem;
}
mark {
background: #ffe9b3;
border-bottom: .05rem solid #ffd367;
border-radius: .1rem;
color: #3b4351;
padding: .05rem .1rem 0;
}
blockquote {
border-left: .1rem solid #dadee4;
margin-left: 0;
padding: .4rem .8rem;
}
blockquote p:last-child {
margin-bottom: 0;
}
ul,
ol {
margin: .8rem 0 .8rem .8rem;
padding: 0;
}
ul ul,
ul ol,
ol ul,
ol ol {
margin: .8rem 0 .8rem .8rem;
}
ul li,
ol li {
margin-top: .4rem;
}
ul {
list-style: disc inside;
}
ul ul {
list-style-type: circle;
}
ol {
list-style: decimal inside;
}
ol ol {
list-style-type: lower-alpha;
}
dl dt {
font-weight: bold;
}
dl dd {
margin: .4rem 0 .8rem 0;
}
html:lang(zh),
html:lang(zh-Hans),
.lang-zh,
.lang-zh-hans {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}
html:lang(zh-Hant),
.lang-zh-hant {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
}
html:lang(ja),
.lang-ja {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
}
html:lang(ko),
.lang-ko {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
}
:lang(zh) ins,
:lang(zh) u,
:lang(ja) ins,
:lang(ja) u,
.lang-cjk ins,
.lang-cjk u {
border-bottom: .05rem solid;
text-decoration: none;
}
:lang(zh) del + del,
:lang(zh) del + s,
:lang(zh) ins + ins,
:lang(zh) ins + u,
:lang(zh) s + del,
:lang(zh) s + s,
:lang(zh) u + ins,
:lang(zh) u + u,
:lang(ja) del + del,
:lang(ja) del + s,
:lang(ja) ins + ins,
:lang(ja) ins + u,
:lang(ja) s + del,
:lang(ja) s + s,
:lang(ja) u + ins,
:lang(ja) u + u,
.lang-cjk del + del,
.lang-cjk del + s,
.lang-cjk ins + ins,
.lang-cjk ins + u,
.lang-cjk s + del,
.lang-cjk s + s,
.lang-cjk u + ins,
.lang-cjk u + u {
margin-left: .125em;
}
.table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
width: 100%;
}
.table.table-striped tbody tr:nth-of-type(odd) {
background: #f7f8f9;
}
.table tbody tr.active,
.table.table-striped tbody tr.active {
background: #eef0f3;
}
.table.table-hover tbody tr:hover {
background: #eef0f3;
}
.table.table-scroll {
display: block;
overflow-x: auto;
padding-bottom: .75rem;
white-space: nowrap;
}
.table td,
.table th {
border-bottom: .05rem solid #dadee4;
padding: .6rem .4rem;
}
.table th {
border-bottom-width: .1rem;
}
.btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #fff;
border: .05rem solid #5755d9;
border-radius: .1rem;
color: #5755d9;
cursor: pointer;
display: inline-block;
font-size: .8rem;
height: 1.8rem;
line-height: 1.2rem;
outline: none;
padding: .25rem .4rem;
text-align: center;
text-decoration: none;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
}
.btn:focus {
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
}
.btn:focus,
.btn:hover {
background: #f1f1fc;
border-color: #4b48d6;
text-decoration: none;
}
.btn:active,
.btn.active {
background: #4b48d6;
border-color: #3634d2;
color: #fff;
text-decoration: none;
}
.btn:active.loading::after,
.btn.active.loading::after {
border-bottom-color: #fff;
border-left-color: #fff;
}
.btn[disabled],
.btn:disabled,
.btn.disabled {
cursor: default;
opacity: .5;
pointer-events: none;
}
.btn.btn-primary {
background: #5755d9;
border-color: #4b48d6;
color: #fff;
}
.btn.btn-primary:focus,
.btn.btn-primary:hover {
background: #4240d4;
border-color: #3634d2;
color: #fff;
}
.btn.btn-primary:active,
.btn.btn-primary.active {
background: #3a38d2;
border-color: #302ecd;
color: #fff;
}
.btn.btn-primary.loading::after {
border-bottom-color: #fff;
border-left-color: #fff;
}
.btn.btn-success {
background: #32b643;
border-color: #2faa3f;
color: #fff;
}
.btn.btn-success:focus {
box-shadow: 0 0 0 .1rem rgba(50, 182, 67, .2);
}
.btn.btn-success:focus,
.btn.btn-success:hover {
background: #30ae40;
border-color: #2da23c;
color: #fff;
}
.btn.btn-success:active,
.btn.btn-success.active {
background: #2a9a39;
border-color: #278e34;
color: #fff;
}
.btn.btn-success.loading::after {
border-bottom-color: #fff;
border-left-color: #fff;
}
.btn.btn-error {
background: #e85600;
border-color: #d95000;
color: #fff;
}
.btn.btn-error:focus {
box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
}
.btn.btn-error:focus,
.btn.btn-error:hover {
background: #de5200;
border-color: #cf4d00;
color: #fff;
}
.btn.btn-error:active,
.btn.btn-error.active {
background: #c44900;
border-color: #b54300;
color: #fff;
}
.btn.btn-error.loading::after {
border-bottom-color: #fff;
border-left-color: #fff;
}
.btn.btn-link {
background: transparent;
border-color: transparent;
color: #5755d9;
}
.btn.btn-link:focus,
.btn.btn-link:hover,
.btn.btn-link:active,
.btn.btn-link.active {
color: #302ecd;
}
.btn.btn-sm {
font-size: .7rem;
height: 1.4rem;
padding: .05rem .3rem;
}
.btn.btn-lg {
font-size: .9rem;
height: 2rem;
padding: .35rem .6rem;
}
.btn.btn-block {
display: block;
width: 100%;
}
.btn.btn-action {
padding-left: 0;
padding-right: 0;
width: 1.8rem;
}
.btn.btn-action.btn-sm {
width: 1.4rem;
}
.btn.btn-action.btn-lg {
width: 2rem;
}
.btn.btn-clear {
background: transparent;
border: 0;
color: currentColor;
height: 1rem;
line-height: .8rem;
margin-left: .2rem;
margin-right: -2px;
opacity: 1;
padding: .1rem;
text-decoration: none;
width: 1rem;
}
.btn.btn-clear:focus,
.btn.btn-clear:hover {
background: rgba(247, 248, 249, .5);
opacity: .95;
}
.btn.btn-clear::before {
content: "\2715";
}
.btn-group {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.btn-group .btn {
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.btn-group .btn:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.btn-group .btn:not(:first-child):not(:last-child) {
border-radius: 0;
margin-left: -.05rem;
}
.btn-group .btn:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -.05rem;
}
.btn-group .btn:focus,
.btn-group .btn:hover,
.btn-group .btn:active,
.btn-group .btn.active {
z-index: 1;
}
.btn-group.btn-group-block {
display: -ms-flexbox;
display: flex;
}
.btn-group.btn-group-block .btn {
-ms-flex: 1 0 0;
flex: 1 0 0;
}
.form-group:not(:last-child) {
margin-bottom: .4rem;
}
fieldset {
margin-bottom: .8rem;
}
legend {
font-size: .9rem;
font-weight: 500;
margin-bottom: .8rem;
}
.form-label {
display: block;
line-height: 1.2rem;
padding: .3rem 0;
}
.form-label.label-sm {
font-size: .7rem;
padding: .1rem 0;
}
.form-label.label-lg {
font-size: .9rem;
padding: .4rem 0;
}
.form-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #fff;
background-image: none;
border: .05rem solid #bcc3ce;
border-radius: .1rem;
color: #3b4351;
display: block;
font-size: .8rem;
height: 1.8rem;
line-height: 1.2rem;
max-width: 100%;
outline: none;
padding: .25rem .4rem;
position: relative;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
width: 100%;
}
.form-input:focus {
border-color: #5755d9;
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
}
.form-input:-ms-input-placeholder {
color: #bcc3ce;
}
.form-input::-ms-input-placeholder {
color: #bcc3ce;
}
.form-input::placeholder {
color: #bcc3ce;
}
.form-input.input-sm {
font-size: .7rem;
height: 1.4rem;
padding: .05rem .3rem;
}
.form-input.input-lg {
font-size: .9rem;
height: 2rem;
padding: .35rem .6rem;
}
.form-input.input-inline {
display: inline-block;
vertical-align: middle;
width: auto;
}
.form-input[type="file"] {
height: auto;
}
textarea.form-input,
textarea.form-input.input-lg,
textarea.form-input.input-sm {
height: auto;
}
.form-input-hint {
color: #bcc3ce;
font-size: .7rem;
margin-top: .2rem;
}
.has-success .form-input-hint,
.is-success + .form-input-hint {
color: #32b643;
}
.has-error .form-input-hint,
.is-error + .form-input-hint {
color: #e85600;
}
.form-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #fff;
border: .05rem solid #bcc3ce;
border-radius: .1rem;
color: inherit;
font-size: .8rem;
height: 1.8rem;
line-height: 1.2rem;
outline: none;
padding: .25rem .4rem;
vertical-align: middle;
width: 100%;
}
.form-select:focus {
border-color: #5755d9;
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
}
.form-select::-ms-expand {
display: none;
}
.form-select.select-sm {
font-size: .7rem;
height: 1.4rem;
padding: .05rem 1.1rem .05rem .3rem;
}
.form-select.select-lg {
font-size: .9rem;
height: 2rem;
padding: .35rem 1.4rem .35rem .6rem;
}
.form-select[size],
.form-select[multiple] {
height: auto;
padding: .25rem .4rem;
}
.form-select[size] option,
.form-select[multiple] option {
padding: .1rem .2rem;
}
.form-select:not([multiple]):not([size]) {
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
padding-right: 1.2rem;
}
.has-icon-left,
.has-icon-right {
position: relative;
}
.has-icon-left .form-icon,
.has-icon-right .form-icon {
height: .8rem;
margin: 0 .25rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: .8rem;
z-index: 2;
}
.has-icon-left .form-icon {
left: .05rem;
}
.has-icon-left .form-input {
padding-left: 1.3rem;
}
.has-icon-right .form-icon {
right: .05rem;
}
.has-icon-right .form-input {
padding-right: 1.3rem;
}
.form-checkbox,
.form-radio,
.form-switch {
display: block;
line-height: 1.2rem;
margin: .2rem 0;
min-height: 1.4rem;
padding: .1rem .4rem .1rem 1.2rem;
position: relative;
}
.form-checkbox input,
.form-radio input,
.form-switch input {
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
width: 1px;
}
.form-checkbox input:focus + .form-icon,
.form-radio input:focus + .form-icon,
.form-switch input:focus + .form-icon {
border-color: #5755d9;
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
}
.form-checkbox input:checked + .form-icon,
.form-radio input:checked + .form-icon,
.form-switch input:checked + .form-icon {
background: #5755d9;
border-color: #5755d9;
}
.form-checkbox .form-icon,
.form-radio .form-icon,
.form-switch .form-icon {
border: .05rem solid #bcc3ce;
cursor: pointer;
display: inline-block;
position: absolute;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
}
.form-checkbox.input-sm,
.form-radio.input-sm,
.form-switch.input-sm {
font-size: .7rem;
margin: 0;
}
.form-checkbox.input-lg,
.form-radio.input-lg,
.form-switch.input-lg {
font-size: .9rem;
margin: .3rem 0;
}
.form-checkbox .form-icon,
.form-radio .form-icon {
background: #fff;
height: .8rem;
left: 0;
top: .3rem;
width: .8rem;
}
.form-checkbox input:active + .form-icon,
.form-radio input:active + .form-icon {
background: #eef0f3;
}
.form-checkbox .form-icon {
border-radius: .1rem;
}
.form-checkbox input:checked + .form-icon::before {
background-clip: padding-box;
border: .1rem solid #fff;
border-left-width: 0;
border-top-width: 0;
content: "";
height: 9px;
left: 50%;
margin-left: -3px;
margin-top: -6px;
position: absolute;
top: 50%;
transform: rotate(45deg);
width: 6px;
}
.form-checkbox input:indeterminate + .form-icon {
background: #5755d9;
border-color: #5755d9;
}
.form-checkbox input:indeterminate + .form-icon::before {
background: #fff;
content: "";
height: 2px;
left: 50%;
margin-left: -5px;
margin-top: -1px;
position: absolute;
top: 50%;
width: 10px;
}
.form-radio .form-icon {
border-radius: 50%;
}
.form-radio input:checked + .form-icon::before {
background: #fff;
border-radius: 50%;
content: "";
height: 6px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
}
.form-switch {
padding-left: 2rem;
}
.form-switch .form-icon {
background: #bcc3ce;
background-clip: padding-box;
border-radius: .45rem;
height: .9rem;
left: 0;
top: .25rem;
width: 1.6rem;
}
.form-switch .form-icon::before {
background: #fff;
border-radius: 50%;
content: "";
display: block;
height: .8rem;
left: 0;
position: absolute;
top: 0;
transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
width: .8rem;
}
.form-switch input:checked + .form-icon::before {
left: 14px;
}
.form-switch input:active + .form-icon::before {
background: #f7f8f9;
}
.input-group {
display: -ms-flexbox;
display: flex;
}
.input-group .input-group-addon {
background: #f7f8f9;
border: .05rem solid #bcc3ce;
border-radius: .1rem;
line-height: 1.2rem;
padding: .25rem .4rem;
white-space: nowrap;
}
.input-group .input-group-addon.addon-sm {
font-size: .7rem;
padding: .05rem .3rem;
}
.input-group .input-group-addon.addon-lg {
font-size: .9rem;
padding: .35rem .6rem;
}
.input-group .form-input,
.input-group .form-select {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
}
.input-group .input-group-btn {
z-index: 1;
}
.input-group .form-input:first-child:not(:last-child),
.input-group .form-select:first-child:not(:last-child),
.input-group .input-group-addon:first-child:not(:last-child),
.input-group .input-group-btn:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-group .form-input:not(:first-child):not(:last-child),
.input-group .form-select:not(:first-child):not(:last-child),
.input-group .input-group-addon:not(:first-child):not(:last-child),
.input-group .input-group-btn:not(:first-child):not(:last-child) {
border-radius: 0;
margin-left: -.05rem;
}
.input-group .form-input:last-child:not(:first-child),
.input-group .form-select:last-child:not(:first-child),
.input-group .input-group-addon:last-child:not(:first-child),
.input-group .input-group-btn:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -.05rem;
}
.input-group .form-input:focus,
.input-group .form-select:focus,
.input-group .input-group-addon:focus,
.input-group .input-group-btn:focus {
z-index: 2;
}
.input-group .form-select {
width: auto;
}
.input-group.input-inline {
display: -ms-inline-flexbox;
display: inline-flex;
}
.has-success .form-input,
.form-input.is-success,
.has-success .form-select,
.form-select.is-success {
background: #f9fdfa;
border-color: #32b643;
}
.has-success .form-input:focus,
.form-input.is-success:focus,
.has-success .form-select:focus,
.form-select.is-success:focus {
box-shadow: 0 0 0 .1rem rgba(50, 182, 67, .2);
}
.has-error .form-input,
.form-input.is-error,
.has-error .form-select,
.form-select.is-error {
background: #fffaf7;
border-color: #e85600;
}
.has-error .form-input:focus,
.form-input.is-error:focus,
.has-error .form-select:focus,
.form-select.is-error:focus {
box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
}
.has-error .form-checkbox .form-icon,
.form-checkbox.is-error .form-icon,
.has-error .form-radio .form-icon,
.form-radio.is-error .form-icon,
.has-error .form-switch .form-icon,
.form-switch.is-error .form-icon {
border-color: #e85600;
}
.has-error .form-checkbox input:checked + .form-icon,
.form-checkbox.is-error input:checked + .form-icon,
.has-error .form-radio input:checked + .form-icon,
.form-radio.is-error input:checked + .form-icon,
.has-error .form-switch input:checked + .form-icon,
.form-switch.is-error input:checked + .form-icon {
background: #e85600;
border-color: #e85600;
}
.has-error .form-checkbox input:focus + .form-icon,
.form-checkbox.is-error input:focus + .form-icon,
.has-error .form-radio input:focus + .form-icon,
.form-radio.is-error input:focus + .form-icon,
.has-error .form-switch input:focus + .form-icon,
.form-switch.is-error input:focus + .form-icon {
border-color: #e85600;
box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
}
.has-error .form-checkbox input:indeterminate + .form-icon,
.form-checkbox.is-error input:indeterminate + .form-icon {
background: #e85600;
border-color: #e85600;
}
.form-input:not(:-ms-input-placeholder):invalid {
border-color: #e85600;
}
.form-input:not(:placeholder-shown):invalid {
border-color: #e85600;
}
.form-input:not(:-ms-input-placeholder):invalid:focus {
background: #fffaf7;
box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
}
.form-input:not(:placeholder-shown):invalid:focus {
background: #fffaf7;
box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
}
.form-input:not(:-ms-input-placeholder):invalid + .form-input-hint {
color: #e85600;
}
.form-input:not(:placeholder-shown):invalid + .form-input-hint {
color: #e85600;
}
.form-input:disabled,
.form-input.disabled,
.form-select:disabled,
.form-select.disabled {
background-color: #eef0f3;
cursor: not-allowed;
opacity: .5;
}
.form-input[readonly] {
background-color: #f7f8f9;
}
input:disabled + .form-icon,
input.disabled + .form-icon {
background: #eef0f3;
cursor: not-allowed;
opacity: .5;
}
.form-switch input:disabled + .form-icon::before,
.form-switch input.disabled + .form-icon::before {
background: #fff;
}
.form-horizontal {
padding: .4rem 0;
}
.form-horizontal .form-group {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.form-inline {
display: inline-block;
}
.label {
background: #eef0f3;
border-radius: .1rem;
color: #455060;
display: inline-block;
line-height: 1.25;
padding: .1rem .2rem;
}
.label.label-rounded {
border-radius: 5rem;
padding-left: .4rem;
padding-right: .4rem;
}
.label.label-primary {
background: #5755d9;
color: #fff;
}
.label.label-secondary {
background: #f1f1fc;
color: #5755d9;
}
.label.label-success {
background: #32b643;
color: #fff;
}
.label.label-warning {
background: #ffb700;
color: #fff;
}
.label.label-error {
background: #e85600;
color: #fff;
}
code {
background: #fcf2f2;
border-radius: .1rem;
color: #d73e48;
font-size: 85%;
line-height: 1.25;
padding: .1rem .2rem;
}
.code {
border-radius: .1rem;
color: #3b4351;
position: relative;
}
.code::before {
color: #bcc3ce;
content: attr(data-lang);
font-size: .7rem;
position: absolute;
right: .4rem;
top: .1rem;
}
.code code {
background: #f7f8f9;
color: inherit;
display: block;
line-height: 1.5;
overflow-x: auto;
padding: 1rem;
width: 100%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.img-fit-cover {
object-fit: cover;
}
.img-fit-contain {
object-fit: contain;
}
.video-responsive {
display: block;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
.video-responsive::before {
content: "";
display: block;
padding-bottom: 56.25%;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
video.video-responsive {
height: auto;
max-width: 100%;
}
video.video-responsive::before {
content: none;
}
.video-responsive-4-3::before {
padding-bottom: 75%;
}
.video-responsive-1-1::before {
padding-bottom: 100%;
}
.figure {
margin: 0 0 .4rem 0;
}
.figure .figure-caption {
color: #66758c;
margin-top: .4rem;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: .4rem;
padding-right: .4rem;
width: 100%;
}
.container.grid-xl {
max-width: 1296px;
}
.container.grid-lg {
max-width: 976px;
}
.container.grid-md {
max-width: 856px;
}
.container.grid-sm {
max-width: 616px;
}
.container.grid-xs {
max-width: 496px;
}
.show-xs,
.show-sm,
.show-md,
.show-lg,
.show-xl {
display: none !important;
}
.cols,
.columns {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -.4rem;
margin-right: -.4rem;
}
.cols.col-gapless,
.columns.col-gapless {
margin-left: 0;
margin-right: 0;
}
.cols.col-gapless > .column,
.columns.col-gapless > .column {
padding-left: 0;
padding-right: 0;
}
.cols.col-oneline,
.columns.col-oneline {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
overflow-x: auto;
}
[class~="col-"],
.column {
-ms-flex: 1;
flex: 1;
max-width: 100%;
padding-left: .4rem;
padding-right: .4rem;
}
[class~="col-"].col-12,
[class~="col-"].col-11,
[class~="col-"].col-10,
[class~="col-"].col-9,
[class~="col-"].col-8,
[class~="col-"].col-7,
[class~="col-"].col-6,
[class~="col-"].col-5,
[class~="col-"].col-4,
[class~="col-"].col-3,
[class~="col-"].col-2,
[class~="col-"].col-1,
[class~="col-"].col-auto,
.column.col-12,
.column.col-11,
.column.col-10,
.column.col-9,
.column.col-8,
.column.col-7,
.column.col-6,
.column.col-5,
.column.col-4,
.column.col-3,
.column.col-2,
.column.col-1,
.column.col-auto {
-ms-flex: none;
flex: none;
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.66666667%;
}
.col-10 {
width: 83.33333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.66666667%;
}
.col-7 {
width: 58.33333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.66666667%;
}
.col-4 {
width: 33.33333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.66666667%;
}
.col-1 {
width: 8.33333333%;
}
.col-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
max-width: none;
width: auto;
}
.col-mx-auto {
margin-left: auto;
margin-right: auto;
}
.col-ml-auto {
margin-left: auto;
}
.col-mr-auto {
margin-right: auto;
}
@media (max-width: 1280px) {
.col-xl-12,
.col-xl-11,
.col-xl-10,
.col-xl-9,
.col-xl-8,
.col-xl-7,
.col-xl-6,
.col-xl-5,
.col-xl-4,
.col-xl-3,
.col-xl-2,
.col-xl-1,
.col-xl-auto {
-ms-flex: none;
flex: none;
}
.col-xl-12 {
width: 100%;
}
.col-xl-11 {
width: 91.66666667%;
}
.col-xl-10 {
width: 83.33333333%;
}
.col-xl-9 {
width: 75%;
}
.col-xl-8 {
width: 66.66666667%;
}
.col-xl-7 {
width: 58.33333333%;
}
.col-xl-6 {
width: 50%;
}
.col-xl-5 {
width: 41.66666667%;
}
.col-xl-4 {
width: 33.33333333%;
}
.col-xl-3 {
width: 25%;
}
.col-xl-2 {
width: 16.66666667%;
}
.col-xl-1 {
width: 8.33333333%;
}
.col-xl-auto {
width: auto;
}
.hide-xl {
display: none !important;
}
.show-xl {
display: block !important;
}
}
@media (max-width: 960px) {
.col-lg-12,
.col-lg-11,
.col-lg-10,
.col-lg-9,
.col-lg-8,
.col-lg-7,
.col-lg-6,
.col-lg-5,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-lg-1,
.col-lg-auto {
-ms-flex: none;
flex: none;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-auto {
width: auto;
}
.hide-lg {
display: none !important;
}
.show-lg {
display: block !important;
}
}
@media (max-width: 840px) {
.col-md-12,
.col-md-11,
.col-md-10,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-md-1,
.col-md-auto {
-ms-flex: none;
flex: none;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-auto {
width: auto;
}
.hide-md {
display: none !important;
}
.show-md {
display: block !important;
}
}
@media (max-width: 600px) {
.col-sm-12,
.col-sm-11,
.col-sm-10,
.col-sm-9,
.col-sm-8,
.col-sm-7,
.col-sm-6,
.col-sm-5,
.col-sm-4,
.col-sm-3,
.col-sm-2,
.col-sm-1,
.col-sm-auto {
-ms-flex: none;
flex: none;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-auto {
width: auto;
}
.hide-sm {
display: none !important;
}
.show-sm {
display: block !important;
}
}
@media (max-width: 480px) {
.col-xs-12,
.col-xs-11,
.col-xs-10,
.col-xs-9,
.col-xs-8,
.col-xs-7,
.col-xs-6,
.col-xs-5,
.col-xs-4,
.col-xs-3,
.col-xs-2,
.col-xs-1,
.col-xs-auto {
-ms-flex: none;
flex: none;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-auto {
width: auto;
}
.hide-xs {
display: none !important;
}
.show-xs {
display: block !important;
}
}
.hero {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 4rem;
padding-top: 4rem;
}
.hero.hero-sm {
padding-bottom: 2rem;
padding-top: 2rem;
}
.hero.hero-lg {
padding-bottom: 8rem;
padding-top: 8rem;
}
.hero .hero-body {
padding: .4rem;
}
.navbar {
align-items: stretch;
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
-ms-flex-pack: justify;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}
.navbar .navbar-section {
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex: 1 0 0;
flex: 1 0 0;
-ms-flex-align: center;
}
.navbar .navbar-section:not(:first-child):last-child {
-ms-flex-pack: end;
justify-content: flex-end;
}
.navbar .navbar-center {
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex-align: center;
}
.navbar .navbar-brand {
font-size: .9rem;
text-decoration: none;
}
.accordion input:checked ~ .accordion-header > .icon:first-child,
.accordion[open] .accordion-header > .icon:first-child {
transform: rotate(90deg);
}
.accordion input:checked ~ .accordion-body,
.accordion[open] .accordion-body {
max-height: 50rem;
}
.accordion .accordion-header {
display: block;
padding: .2rem .4rem;
}
.accordion .accordion-header .icon {
transition: transform .25s;
}
.accordion .accordion-body {
margin-bottom: .4rem;
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
summary.accordion-header::-webkit-details-marker {
display: none;
}
.avatar {
background: #5755d9;
border-radius: 50%;
color: rgba(255, 255, 255, .85);
display: inline-block;
font-size: .8rem;
font-weight: 300;
height: 1.6rem;
line-height: 1.25;
margin: 0;
position: relative;
vertical-align: middle;
width: 1.6rem;
}
.avatar.avatar-xs {
font-size: .4rem;
height: .8rem;
width: .8rem;
}
.avatar.avatar-sm {
font-size: .6rem;
height: 1.2rem;
width: 1.2rem;
}
.avatar.avatar-lg {
font-size: 1.2rem;
height: 2.4rem;
width: 2.4rem;
}
.avatar.avatar-xl {
font-size: 1.6rem;
height: 3.2rem;
width: 3.2rem;
}
.avatar img {
border-radius: 50%;
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
.avatar .avatar-icon,
.avatar .avatar-presence {
background: #fff;
bottom: 14.64%;
height: 50%;
padding: .1rem;
position: absolute;
right: 14.64%;
transform: translate(50%, 50%);
width: 50%;
z-index: 2;
}
.avatar .avatar-presence {
background: #bcc3ce;
border-radius: 50%;
box-shadow: 0 0 0 .1rem #fff;
height: .5em;
width: .5em;
}
.avatar .avatar-presence.online {
background: #32b643;
}
.avatar .avatar-presence.busy {
background: #e85600;
}
.avatar .avatar-presence.away {
background: #ffb700;
}
.avatar[data-initial]::before {
color: currentColor;
content: attr(data-initial);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.badge {
position: relative;
white-space: nowrap;
}
.badge[data-badge]::after,
.badge:not([data-badge])::after {
background: #5755d9;
background-clip: padding-box;
border-radius: .5rem;
box-shadow: 0 0 0 .1rem #fff;
color: #fff;
content: attr(data-badge);
display: inline-block;
transform: translate(-.05rem, -.5rem);
}
.badge[data-badge]::after {
font-size: .7rem;
height: .9rem;
line-height: 1;
min-width: .9rem;
padding: .1rem .2rem;
text-align: center;
white-space: nowrap;
}
.badge:not([data-badge])::after,
.badge[data-badge=""]::after {
height: 6px;
min-width: 6px;
padding: 0;
width: 6px;
}
.badge.btn::after {
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
}
.badge.avatar::after {
position: absolute;
right: 14.64%;
top: 14.64%;
transform: translate(50%, -50%);
z-index: 100;
}
.breadcrumb {
list-style: none;
margin: .2rem 0;
padding: .2rem 0;
}
.breadcrumb .breadcrumb-item {
color: #66758c;
display: inline-block;
margin: 0;
padding: .2rem 0;
}
.breadcrumb .breadcrumb-item:not(:last-child) {
margin-right: .2rem;
}
.breadcrumb .breadcrumb-item:not(:last-child) a {
color: #66758c;
}
.breadcrumb .breadcrumb-item:not(:first-child)::before {
color: #66758c;
content: "/";
padding-right: .4rem;
}
.bar {
background: #eef0f3;
border-radius: .1rem;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
height: .8rem;
width: 100%;
}
.bar.bar-sm {
height: .2rem;
}
.bar .bar-item {
background: #5755d9;
color: #fff;
display: block;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: .7rem;
height: 100%;
line-height: .8rem;
position: relative;
text-align: center;
width: 0;
}
.bar .bar-item:first-child {
border-bottom-left-radius: .1rem;
border-top-left-radius: .1rem;
}
.bar .bar-item:last-child {
border-bottom-right-radius: .1rem;
border-top-right-radius: .1rem;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.bar-slider {
height: .1rem;
margin: .4rem 0;
position: relative;
}
.bar-slider .bar-item {
left: 0;
padding: 0;
position: absolute;
}
.bar-slider .bar-item:not(:last-child):first-child {
background: #eef0f3;
z-index: 1;
}
.bar-slider .bar-slider-btn {
background: #5755d9;
border: 0;
border-radius: 50%;
height: .6rem;
padding: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
width: .6rem;
}
.bar-slider .bar-slider-btn:active {
box-shadow: 0 0 0 .1rem #5755d9;
}
.card {
background: #fff;
border: .05rem solid #dadee4;
border-radius: .1rem;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.card .card-header,
.card .card-body,
.card .card-footer {
padding: .8rem;
padding-bottom: 0;
}
.card .card-header:last-child,
.card .card-body:last-child,
.card .card-footer:last-child {
padding-bottom: .8rem;
}
.card .card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.card .card-image {
padding-top: .8rem;
}
.card .card-image:first-child {
padding-top: 0;
}
.card .card-image:first-child img {
border-top-left-radius: .1rem;
border-top-right-radius: .1rem;
}
.card .card-image:last-child img {
border-bottom-left-radius: .1rem;
border-bottom-right-radius: .1rem;
}
.chip {
align-items: center;
background: #eef0f3;
border-radius: 5rem;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
font-size: 90%;
height: 1.2rem;
line-height: .8rem;
margin: .1rem;
max-width: 320px;
overflow: hidden;
padding: .2rem .4rem;
text-decoration: none;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.chip.active {
background: #5755d9;
color: #fff;
}
.chip .avatar {
margin-left: -.4rem;
margin-right: .2rem;
}
.chip .btn-clear {
border-radius: 50%;
transform: scale(.75);
}
.dropdown {
display: inline-block;
position: relative;
}
.dropdown .menu {
animation: slide-down .15s ease 1;
display: none;
left: 0;
max-height: 50vh;
overflow-y: auto;
position: absolute;
top: 100%;
}
.dropdown.dropdown-right .menu {
left: auto;
right: 0;
}
.dropdown.active .menu,
.dropdown .dropdown-toggle:focus + .menu,
.dropdown .menu:hover {
display: block;
}
.dropdown .btn-group .dropdown-toggle:nth-last-child(2) {
border-bottom-right-radius: .1rem;
border-top-right-radius: .1rem;
}
.empty {
background: #f7f8f9;
border-radius: .1rem;
color: #66758c;
padding: 3.2rem 1.6rem;
text-align: center;
}
.empty .empty-icon {
margin-bottom: .8rem;
}
.empty .empty-title,
.empty .empty-subtitle {
margin: .4rem auto;
}
.empty .empty-action {
margin-top: .8rem;
}
.menu {
background: #fff;
border-radius: .1rem;
box-shadow: 0 .05rem .2rem rgba(48, 55, 66, .3);
list-style: none;
margin: 0;
min-width: 180px;
padding: .4rem;
transform: translateY(.2rem);
z-index: 300;
}
.menu.menu-nav {
background: transparent;
box-shadow: none;
}
.menu .menu-item {
margin-top: 0;
padding: 0 .4rem;
position: relative;
text-decoration: none;
}
.menu .menu-item > a {
border-radius: .1rem;
color: inherit;
display: block;
margin: 0 -.4rem;
padding: .2rem .4rem;
text-decoration: none;
}
.menu .menu-item > a:focus,
.menu .menu-item > a:hover {
background: #f1f1fc;
color: #5755d9;
}
.menu .menu-item > a:active,
.menu .menu-item > a.active {
background: #f1f1fc;
color: #5755d9;
}
.menu .menu-item .form-checkbox,
.menu .menu-item .form-radio,
.menu .menu-item .form-switch {
margin: .1rem 0;
}
.menu .menu-item + .menu-item {
margin-top: .2rem;
}
.menu .menu-badge {
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.menu .menu-badge .label {
margin-right: .4rem;
}
.modal {
align-items: center;
bottom: 0;
display: none;
-ms-flex-align: center;
-ms-flex-pack: center;
justify-content: center;
left: 0;
opacity: 0;
overflow: hidden;
padding: .4rem;
position: fixed;
right: 0;
top: 0;
}
.modal:target,
.modal.active {
display: -ms-flexbox;
display: flex;
opacity: 1;
z-index: 400;
}
.modal:target .modal-overlay,
.modal.active .modal-overlay {
background: rgba(247, 248, 249, .75);
bottom: 0;
cursor: default;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.modal:target .modal-container,
.modal.active .modal-container {
animation: slide-down .2s ease 1;
z-index: 1;
}
.modal.modal-sm .modal-container {
max-width: 320px;
padding: 0 .4rem;
}
.modal.modal-lg .modal-overlay {
background: #fff;
}
.modal.modal-lg .modal-container {
box-shadow: none;
max-width: 960px;
}
.modal-container {
background: #fff;
border-radius: .1rem;
box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
max-height: 75vh;
max-width: 640px;
padding: 0 .8rem;
width: 100%;
}
.modal-container.modal-fullheight {
max-height: 100vh;
}
.modal-container .modal-header {
color: #303742;
padding: .8rem;
}
.modal-container .modal-body {
overflow-y: auto;
padding: .8rem;
position: relative;
}
.modal-container .modal-footer {
padding: .8rem;
text-align: right;
}
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
list-style: none;
margin: .2rem 0;
}
.nav .nav-item a {
color: #66758c;
padding: .2rem .4rem;
text-decoration: none;
}
.nav .nav-item a:focus,
.nav .nav-item a:hover {
color: #5755d9;
}
.nav .nav-item.active > a {
color: #505c6e;
font-weight: bold;
}
.nav .nav-item.active > a:focus,
.nav .nav-item.active > a:hover {
color: #5755d9;
}
.nav .nav {
margin-bottom: .4rem;
margin-left: .8rem;
}
.pagination {
display: -ms-flexbox;
display: flex;
list-style: none;
margin: .2rem 0;
padding: .2rem 0;
}
.pagination .page-item {
margin: .2rem .05rem;
}
.pagination .page-item span {
display: inline-block;
padding: .2rem .2rem;
}
.pagination .page-item a {
border-radius: .1rem;
display: inline-block;
padding: .2rem .4rem;
text-decoration: none;
}
.pagination .page-item a:focus,
.pagination .page-item a:hover {
color: #5755d9;
}
.pagination .page-item.disabled a {
cursor: default;
opacity: .5;
pointer-events: none;
}
.pagination .page-item.active a {
background: #5755d9;
color: #fff;
}
.pagination .page-item.page-prev,
.pagination .page-item.page-next {
-ms-flex: 1 0 50%;
flex: 1 0 50%;
}
.pagination .page-item.page-next {
text-align: right;
}
.pagination .page-item .page-item-title {
margin: 0;
}
.pagination .page-item .page-item-subtitle {
margin: 0;
opacity: .5;
}
.panel {
border: .05rem solid #dadee4;
border-radius: .1rem;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.panel .panel-header,
.panel .panel-footer {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: .8rem;
}
.panel .panel-nav {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.panel .panel-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
overflow-y: auto;
padding: 0 .8rem;
}
.popover {
display: inline-block;
position: relative;
}
.popover .popover-container {
left: 50%;
opacity: 0;
padding: .4rem;
position: absolute;
top: 0;
transform: translate(-50%, -50%) scale(0);
transition: transform .2s;
width: 320px;
z-index: 300;
}
.popover *:focus + .popover-container,
.popover:hover .popover-container {
display: block;
opacity: 1;
transform: translate(-50%, -100%) scale(1);
}
.popover.popover-right .popover-container {
left: 100%;
top: 50%;
}
.popover.popover-right *:focus + .popover-container,
.popover.popover-right:hover .popover-container {
transform: translate(0, -50%) scale(1);
}
.popover.popover-bottom .popover-container {
left: 50%;
top: 100%;
}
.popover.popover-bottom *:focus + .popover-container,
.popover.popover-bottom:hover .popover-container {
transform: translate(-50%, 0) scale(1);
}
.popover.popover-left .popover-container {
left: 0;
top: 50%;
}
.popover.popover-left *:focus + .popover-container,
.popover.popover-left:hover .popover-container {
transform: translate(-100%, -50%) scale(1);
}
.popover .card {
border: 0;
box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
}
.step {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
list-style: none;
margin: .2rem 0;
width: 100%;
}
.step .step-item {
-ms-flex: 1 1 0;
flex: 1 1 0;
margin-top: 0;
min-height: 1rem;
position: relative;
text-align: center;
}
.step .step-item:not(:first-child)::before {
background: #5755d9;
content: "";
height: 2px;
left: -50%;
position: absolute;
top: 9px;
width: 100%;
}
.step .step-item a {
color: #5755d9;
display: inline-block;
padding: 20px 10px 0;
text-decoration: none;
}
.step .step-item a::before {
background: #5755d9;
border: .1rem solid #fff;
border-radius: 50%;
content: "";
display: block;
height: .6rem;
left: 50%;
position: absolute;
top: .2rem;
transform: translateX(-50%);
width: .6rem;
z-index: 1;
}
.step .step-item.active a::before {
background: #fff;
border: .1rem solid #5755d9;
}
.step .step-item.active ~ .step-item::before {
background: #dadee4;
}
.step .step-item.active ~ .step-item a {
color: #bcc3ce;
}
.step .step-item.active ~ .step-item a::before {
background: #dadee4;
}
.tab {
align-items: center;
border-bottom: .05rem solid #dadee4;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin: .2rem 0 .15rem 0;
}
.tab .tab-item {
margin-top: 0;
}
.tab .tab-item a {
border-bottom: .1rem solid transparent;
color: inherit;
display: block;
margin: 0 .4rem 0 0;
padding: .4rem .2rem .3rem .2rem;
text-decoration: none;
}
.tab .tab-item a:focus,
.tab .tab-item a:hover {
color: #5755d9;
}
.tab .tab-item.active a,
.tab .tab-item a.active {
border-bottom-color: #5755d9;
color: #5755d9;
}
.tab .tab-item.tab-action {
-ms-flex: 1 0 auto;
flex: 1 0 auto;
text-align: right;
}
.tab .tab-item .btn-clear {
margin-top: -.2rem;
}
.tab.tab-block .tab-item {
-ms-flex: 1 0 0;
flex: 1 0 0;
text-align: center;
}
.tab.tab-block .tab-item a {
margin: 0;
}
.tab.tab-block .tab-item .badge[data-badge]::after {
position: absolute;
right: .1rem;
top: .1rem;
transform: translate(0, 0);
}
.tab:not(.tab-block) .badge {
padding-right: 0;
}
.tile {
align-content: space-between;
align-items: flex-start;
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
-ms-flex-line-pack: justify;
}
.tile .tile-icon,
.tile .tile-action {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.tile .tile-content {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.tile .tile-content:not(:first-child) {
padding-left: .4rem;
}
.tile .tile-content:not(:last-child) {
padding-right: .4rem;
}
.tile .tile-title,
.tile .tile-subtitle {
line-height: 1.2rem;
}
.tile.tile-centered {
align-items: center;
-ms-flex-align: center;
}
.tile.tile-centered .tile-content {
overflow: hidden;
}
.tile.tile-centered .tile-title,
.tile.tile-centered .tile-subtitle {
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.toast {
background: rgba(48, 55, 66, .95);
border: .05rem solid #303742;
border-color: #303742;
border-radius: .1rem;
color: #fff;
display: block;
padding: .4rem;
width: 100%;
}
.toast.toast-primary {
background: rgba(87, 85, 217, .95);
border-color: #5755d9;
}
.toast.toast-success {
background: rgba(50, 182, 67, .95);
border-color: #32b643;
}
.toast.toast-warning {
background: rgba(255, 183, 0, .95);
border-color: #ffb700;
}
.toast.toast-error {
background: rgba(232, 86, 0, .95);
border-color: #e85600;
}
.toast a {
color: #fff;
text-decoration: underline;
}
.toast a:focus,
.toast a:hover,
.toast a:active,
.toast a.active {
opacity: .75;
}
.toast .btn-clear {
margin: .1rem;
}
.toast p:last-child {
margin-bottom: 0;
}
.tooltip {
position: relative;
}
.tooltip::after {
background: rgba(48, 55, 66, .95);
border-radius: .1rem;
bottom: 100%;
color: #fff;
content: attr(data-tooltip);
display: block;
font-size: .7rem;
left: 50%;
max-width: 320px;
opacity: 0;
overflow: hidden;
padding: .2rem .4rem;
pointer-events: none;
position: absolute;
text-overflow: ellipsis;
transform: translate(-50%, .4rem);
transition: opacity .2s, transform .2s;
white-space: pre;
z-index: 300;
}
.tooltip:focus::after,
.tooltip:hover::after {
opacity: 1;
transform: translate(-50%, -.2rem);
}
.tooltip[disabled],
.tooltip.disabled {
pointer-events: auto;
}
.tooltip.tooltip-right::after {
bottom: 50%;
left: 100%;
transform: translate(-.2rem, 50%);
}
.tooltip.tooltip-right:focus::after,
.tooltip.tooltip-right:hover::after {
transform: translate(.2rem, 50%);
}
.tooltip.tooltip-bottom::after {
bottom: auto;
top: 100%;
transform: translate(-50%, -.4rem);
}
.tooltip.tooltip-bottom:focus::after,
.tooltip.tooltip-bottom:hover::after {
transform: translate(-50%, .2rem);
}
.tooltip.tooltip-left::after {
bottom: 50%;
left: auto;
right: 100%;
transform: translate(.4rem, 50%);
}
.tooltip.tooltip-left:focus::after,
.tooltip.tooltip-left:hover::after {
transform: translate(-.2rem, 50%);
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(-1.6rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.text-primary {
color: #5755d9 !important;
}
a.text-primary:focus,
a.text-primary:hover {
color: #4240d4;
}
a.text-primary:visited {
color: #6c6ade;
}
.text-secondary {
color: #e5e5f9 !important;
}
a.text-secondary:focus,
a.text-secondary:hover {
color: #d1d0f4;
}
a.text-secondary:visited {
color: #fafafe;
}
.text-gray {
color: #bcc3ce !important;
}
a.text-gray:focus,
a.text-gray:hover {
color: #adb6c4;
}
a.text-gray:visited {
color: #cbd0d9;
}
.text-light {
color: #fff !important;
}
a.text-light:focus,
a.text-light:hover {
color: #f2f2f2;
}
a.text-light:visited {
color: white;
}
.text-dark {
color: #3b4351 !important;
}
a.text-dark:focus,
a.text-dark:hover {
color: #303742;
}
a.text-dark:visited {
color: #455060;
}
.text-success {
color: #32b643 !important;
}
a.text-success:focus,
a.text-success:hover {
color: #2da23c;
}
a.text-success:visited {
color: #39c94b;
}
.text-warning {
color: #ffb700 !important;
}
a.text-warning:focus,
a.text-warning:hover {
color: #e6a500;
}
a.text-warning:visited {
color: #ffbe1a;
}
.text-error {
color: #e85600 !important;
}
a.text-error:focus,
a.text-error:hover {
color: #cf4d00;
}
a.text-error:visited {
color: #ff6003;
}
.bg-primary {
background: #5755d9 !important;
color: #fff;
}
.bg-secondary {
background: #f1f1fc !important;
}
.bg-dark {
background: #303742 !important;
color: #fff;
}
.bg-gray {
background: #f7f8f9 !important;
}
.bg-success {
background: #32b643 !important;
color: #fff;
}
.bg-warning {
background: #ffb700 !important;
color: #fff;
}
.bg-error {
background: #e85600 !important;
color: #fff;
}
.c-hand {
cursor: pointer;
}
.c-move {
cursor: move;
}
.c-zoom-in {
cursor: zoom-in;
}
.c-zoom-out {
cursor: zoom-out;
}
.c-not-allowed {
cursor: not-allowed;
}
.c-auto {
cursor: auto;
}
.d-block {
display: block;
}
.d-inline {
display: inline;
}
.d-inline-block {
display: inline-block;
}
.d-flex {
display: -ms-flexbox;
display: flex;
}
.d-inline-flex {
display: -ms-inline-flexbox;
display: inline-flex;
}
.d-none,
.d-hide {
display: none !important;
}
.d-visible {
visibility: visible;
}
.d-invisible {
visibility: hidden;
}
.text-hide {
background: transparent;
border: 0;
color: transparent;
font-size: 0;
line-height: 0;
text-shadow: none;
}
.text-assistive {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.divider,
.divider-vert {
display: block;
position: relative;
}
.divider[data-content]::after,
.divider-vert[data-content]::after {
background: #fff;
color: #bcc3ce;
content: attr(data-content);
display: inline-block;
font-size: .7rem;
padding: 0 .4rem;
transform: translateY(-.65rem);
}
.divider {
border-top: .05rem solid #f1f3f5;
height: .05rem;
margin: .4rem 0;
}
.divider[data-content] {
margin: .8rem 0;
}
.divider-vert {
display: block;
padding: .8rem;
}
.divider-vert::before {
border-left: .05rem solid #dadee4;
bottom: .4rem;
content: "";
display: block;
left: 50%;
position: absolute;
top: .4rem;
transform: translateX(-50%);
}
.divider-vert[data-content]::after {
left: 50%;
padding: .2rem 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.loading {
color: transparent !important;
min-height: .8rem;
pointer-events: none;
position: relative;
}
.loading::after {
animation: loading 500ms infinite linear;
background: transparent;
border: .1rem solid #5755d9;
border-radius: 50%;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: .8rem;
left: 50%;
margin-left: -.4rem;
margin-top: -.4rem;
opacity: 1;
padding: 0;
position: absolute;
top: 50%;
width: .8rem;
z-index: 1;
}
.loading.loading-lg {
min-height: 2rem;
}
.loading.loading-lg::after {
height: 1.6rem;
margin-left: -.8rem;
margin-top: -.8rem;
width: 1.6rem;
}
.clearfix::after {
clear: both;
content: "";
display: table;
}
.float-left {
float: left !important;
}
.float-right {
float: right !important;
}
.p-relative {
position: relative !important;
}
.p-absolute {
position: absolute !important;
}
.p-fixed {
position: fixed !important;
}
.p-sticky {
position: -webkit-sticky !important;
position: sticky !important;
}
.p-centered {
display: block;
float: none;
margin-left: auto;
margin-right: auto;
}
.flex-centered {
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
justify-content: center;
}
.m-0 {
margin: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.ml-0 {
margin-left: 0 !important;
}
.mr-0 {
margin-right: 0 !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.my-0 {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.m-1 {
margin: .2rem !important;
}
.mb-1 {
margin-bottom: .2rem !important;
}
.ml-1 {
margin-left: .2rem !important;
}
.mr-1 {
margin-right: .2rem !important;
}
.mt-1 {
margin-top: .2rem !important;
}
.mx-1 {
margin-left: .2rem !important;
margin-right: .2rem !important;
}
.my-1 {
margin-bottom: .2rem !important;
margin-top: .2rem !important;
}
.m-2 {
margin: .4rem !important;
}
.mb-2 {
margin-bottom: .4rem !important;
}
.ml-2 {
margin-left: .4rem !important;
}
.mr-2 {
margin-right: .4rem !important;
}
.mt-2 {
margin-top: .4rem !important;
}
.mx-2 {
margin-left: .4rem !important;
margin-right: .4rem !important;
}
.my-2 {
margin-bottom: .4rem !important;
margin-top: .4rem !important;
}
.p-0 {
padding: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.py-0 {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.p-1 {
padding: .2rem !important;
}
.pb-1 {
padding-bottom: .2rem !important;
}
.pl-1 {
padding-left: .2rem !important;
}
.pr-1 {
padding-right: .2rem !important;
}
.pt-1 {
padding-top: .2rem !important;
}
.px-1 {
padding-left: .2rem !important;
padding-right: .2rem !important;
}
.py-1 {
padding-bottom: .2rem !important;
padding-top: .2rem !important;
}
.p-2 {
padding: .4rem !important;
}
.pb-2 {
padding-bottom: .4rem !important;
}
.pl-2 {
padding-left: .4rem !important;
}
.pr-2 {
padding-right: .4rem !important;
}
.pt-2 {
padding-top: .4rem !important;
}
.px-2 {
padding-left: .4rem !important;
padding-right: .4rem !important;
}
.py-2 {
padding-bottom: .4rem !important;
padding-top: .4rem !important;
}
.s-rounded {
border-radius: .1rem;
}
.s-circle {
border-radius: 50%;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
.text-normal {
font-weight: normal;
}
.text-bold {
font-weight: bold;
}
.text-italic {
font-style: italic;
}
.text-large {
font-size: 1.2em;
}
.text-small {
font-size: .9em;
}
.text-tiny {
font-size: .8em;
}
.text-muted {
opacity: .8;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-clip {
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}
.text-break {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-break: break-word;
word-wrap: break-word;
}
================================================
FILE: docs/components/accordions.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>Accordions - Components - Spectre.css CSS Framework</title>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
<meta name="author" content="Yan Zhu">
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/accordions.html">
<meta property="og:title" content="Accordions - Components - Spectre.css CSS Framework">
<meta property="og:description" content="Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@spectrecss">
<meta name="twitter:creator" content="@picturepan2">
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
<link rel="icon" href="../img/favicons/favicon.png">
<link rel="stylesheet" href="../dist/spectre.min.css">
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
<link rel="stylesheet" href="../dist/docs.min.css">
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/accordions.html">
</head>
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
<div class="btns d-flex">
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
</div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
</div>
<div class="docs-nav">
<div class="accordion-container">
<div class="accordion">
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
</li>
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
</li>
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
</li>
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
</li>
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
</li>
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
</li>
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
</li>
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
</li>
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
</li>
<li class="menu-item"><a href="../elements/code.html">Code</a>
</li>
<li class="menu-item"><a href="../elements/media.html">Media</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
</li>
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
</li>
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
</li>
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
<label class="accordion-header c-hand" for="accordion-components">Components</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
</li>
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
</li>
<li class="menu-item"><a href="../components/badges.html">Badges</a>
</li>
<li class="menu-item"><a href="../components/bars.html">Bars</a>
</li>
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
</li>
<li class="menu-item"><a href="../components/cards.html">Cards</a>
</li>
<li class="menu-item"><a href="../components/chips.html">Chips</a>
</li>
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
</li>
<li class="menu-item"><a href="../components/menu.html">Menu</a>
</li>
<li class="menu-item"><a href="../components/modals.html">Modals</a>
</li>
<li class="menu-item"><a href="../components/nav.html">Nav</a>
</li>
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
</li>
<li class="menu-item"><a href="../components/panels.html">Panels</a>
</li>
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
</li>
<li class="menu-item"><a href="../components/steps.html">Steps</a>
</li>
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
</li>
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
</li>
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
</li>
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
</li>
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
</li>
<li class="menu-item"><a href="../utilities/display.html">Display</a>
</li>
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
</li>
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
</li>
<li class="menu-item"><a href="../utilities/position.html">Position</a>
</li>
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
</li>
<li class="menu-item"><a href="../utilities/text.html">Text</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
</li>
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
</li>
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
</li>
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
</li>
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
</li>
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
</li>
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
</li>
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
</li>
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
</li>
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
</li>
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
</li>
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div><a class="off-canvas-overlay" href="#close"></a>
<div class="off-canvas-content">
<div class="docs-content" id="content">
<div class="container" id="accordions">
<h3 class="s-title">Accordions<a class="anchor" href="#accordions" aria-hidden="true">#</a></h3>
<div class="docs-ad">
<div class="hide-md text-center">
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<div class="show-md text-center">
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
<p>Accordions are used to toggle sections of content.</p>
<div class="docs-demo columns">
<div class="column col-6 col-md-12">
<div class="accordion">
<input id="accordion-1" type="radio" name="accordion-radio" hidden="" checked="">
<label class="accordion-header c-hand" for="accordion-1"><i class="icon icon-arrow-right mr-1"></i>Elements</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="#accordions">Element 1</a></li>
<li class="menu-item"><a href="#accordions">Element 2</a></li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-2" type="radio" name="accordion-radio" hidden="">
<label class="accordion-header c-hand" for="accordion-2"><i class="icon icon-arrow-right mr-1"></i>Layout</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="#accordions">Layout 1</a></li>
<li class="menu-item"><a href="#accordions">Layout 2</a></li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-3" type="radio" name="accordion-radio" hidden="">
<label class="accordion-header c-hand" for="accordion-3"><i class="icon icon-arrow-right mr-1"></i>Components</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="#accordions">Component 1</a></li>
<li class="menu-item"><a href="#accordions">Component 2</a></li>
</ul>
</div>
</div>
</div>
<div class="column col-6 col-md-12">
<div class="accordion">
<input id="accordion-4" type="checkbox" name="accordion-checkbox" hidden="" checked="">
<label class="accordion-header c-hand" for="accordion-4">Elements</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="#accordions">Element 1</a></li>
<li class="menu-item"><a href="#accordions">Element 2</a></li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-5" type="checkbox" name="accordion-checkbox" hidden="">
<label class="accordion-header c-hand" for="accordion-5">Layout</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="#accordions">Layout 1</a></li>
<li class="menu-item"><a href="#accordions">Layout 2</a></li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-6" type="checkbox" name="accordion-checkbox" hidden="">
<label class="accordion-header c-hand" for="accordion-6">Components</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="#accordions">Component 1</a></li>
<li class="menu-item"><a href="#accordions">Component 2</a></li>
</ul>
</div>
</div>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- standard Accordions example --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accordion-checkbox"</span> <span class="hljs-attr">hidden</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"accordion-1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
Title
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span>
<span class="hljs-comment"><!-- Accordions content --></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- mutually exclusive Accordions example (with same input names) --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accordion-radio"</span> <span class="hljs-attr">hidden</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"accordion-1"</span>></span>
Title
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span>
<span class="hljs-comment"><!-- Accordions content --></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick.
Add the <code>open</code> attribute to <code>details</code> to expand it.
Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">under consideration</a>.
</p>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- details and summary Accordions example --></span>
<span class="hljs-tag"><<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">open</span>></span>
<span class="hljs-tag"><<span class="hljs-name">summary</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
Title
<span class="hljs-tag"></<span class="hljs-name">summary</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span>
<span class="hljs-comment"><!-- Accordions content --></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">details</span>></span>
</code></pre>
</div>
<div class="docs-footer container grid-lg" id="copyright">
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
indexName: 'picturepan2_spectre',
inputSelector: '.docs-search',
debug: true
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2702768-8', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
================================================
FILE: docs/components/avatars.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avatars - Components - Spectre.css CSS Framework</title>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
<meta name="author" content="Yan Zhu">
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/avatars.html">
<meta property="og:title" content="Avatars - Components - Spectre.css CSS Framework">
<meta property="og:description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@spectrecss">
<meta name="twitter:creator" content="@picturepan2">
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
<link rel="icon" href="../img/favicons/favicon.png">
<link rel="stylesheet" href="../dist/spectre.min.css">
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
<link rel="stylesheet" href="../dist/docs.min.css">
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/avatars.html">
</head>
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
<div class="btns d-flex">
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
</div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
</div>
<div class="docs-nav">
<div class="accordion-container">
<div class="accordion">
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
</li>
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
</li>
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
</li>
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
</li>
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
</li>
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
</li>
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
</li>
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
</li>
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
</li>
<li class="menu-item"><a href="../elements/code.html">Code</a>
</li>
<li class="menu-item"><a href="../elements/media.html">Media</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
</li>
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
</li>
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
</li>
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
<label class="accordion-header c-hand" for="accordion-components">Components</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
</li>
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
</li>
<li class="menu-item"><a href="../components/badges.html">Badges</a>
</li>
<li class="menu-item"><a href="../components/bars.html">Bars</a>
</li>
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
</li>
<li class="menu-item"><a href="../components/cards.html">Cards</a>
</li>
<li class="menu-item"><a href="../components/chips.html">Chips</a>
</li>
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
</li>
<li class="menu-item"><a href="../components/menu.html">Menu</a>
</li>
<li class="menu-item"><a href="../components/modals.html">Modals</a>
</li>
<li class="menu-item"><a href="../components/nav.html">Nav</a>
</li>
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
</li>
<li class="menu-item"><a href="../components/panels.html">Panels</a>
</li>
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
</li>
<li class="menu-item"><a href="../components/steps.html">Steps</a>
</li>
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
</li>
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
</li>
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
</li>
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
</li>
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
</li>
<li class="menu-item"><a href="../utilities/display.html">Display</a>
</li>
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
</li>
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
</li>
<li class="menu-item"><a href="../utilities/position.html">Position</a>
</li>
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
</li>
<li class="menu-item"><a href="../utilities/text.html">Text</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
</li>
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
</li>
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
</li>
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
</li>
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
</li>
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
</li>
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
</li>
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
</li>
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
</li>
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
</li>
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
</li>
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div><a class="off-canvas-overlay" href="#close"></a>
<div class="off-canvas-content">
<div class="docs-content" id="content">
<div class="container" id="avatars">
<h3 class="s-title">Avatars<a class="anchor" href="#avatars" aria-hidden="true">#</a></h3>
<div class="docs-ad">
<div class="hide-md text-center">
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<div class="show-md text-center">
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
<p>Avatars are user profile pictures. </p>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar XL"></figure>
<figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar LG"></figure>
<figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"></figure>
<figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar SM"></figure>
<figure class="avatar avatar-xs mr-2"><img src="../img/avatar-5.png" alt="Avatar XS"></figure>
</div>
<div class="column col-6 col-xs-12">
<figure class="avatar avatar-xl mr-2" data-initial="YZ"></figure>
<figure class="avatar avatar-lg mr-2" data-initial="YZ"></figure>
<figure class="avatar mr-2" data-initial="YZ"></figure>
<figure class="avatar avatar-sm mr-2" data-initial="YZ"></figure>
<figure class="avatar avatar-xs mr-2" data-initial="YZ"></figure>
</div>
</div>
<p>Add the <code>avatar</code> class to <img> element.
There are 4 additional sizes available, including <code>avatar-xl</code>(64px), <code>avatar-lg</code>(48px), <code>avatar-sm</code>(24px), and <code>avatar-xs</code>(16px).
By default, the avatar size is 32px.
</p>
<p>
For users who don't have profile pictures, you may use their initials for avatars.
Add the <code>avatar</code> class and avatar size class to <div> element.
The <code>data-initial</code> attribute is the name appear inside the avatar.
</p>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- Basic avatar examples --></span>
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #5755d9;"</span>></span><span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
<span class="hljs-comment"><!-- Show initals when avatar image is unavailable or not fully loaded --></span>
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #5755d9;"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
</code></pre>
<h4 class="s-subtitle" id="avatars-icons">Avatar icons<a class="anchor" href="#avatars-icons" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-2.png" alt="Avatar"></figure>
<figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-3.png" alt="Avatar"></figure>
<figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-4.png" alt="Avatar"></figure>
<figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-5.png" alt="Avatar"></figure>
<figure class="avatar avatar-xs"><img src="../img/avatar-5.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-1.png" alt="Avatar"></figure>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-5.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-icon"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
</code></pre>
<h4 class="s-subtitle" id="avatars-presence">Avatar presence<a class="anchor" href="#avatars-presence" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<figure class="avatar avatar-xl mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure>
<figure class="avatar avatar-lg mr-2" data-initial="YZ"><i class="avatar-presence busy"></i></figure>
<figure class="avatar mr-2" data-initial="YZ"><i class="avatar-presence away"></i></figure>
<figure class="avatar avatar-sm mr-2" data-initial="YZ"><i class="avatar-presence offline"></i></figure>
<figure class="avatar avatar-xs mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure>
</div>
</div>
<p>
Avatars support presence indicators.
You can add an <i> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors.
The default is gray which means offline.
</p>
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-presence online"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
</code></pre>
</div>
<div class="docs-footer container grid-lg" id="copyright">
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
indexName: 'picturepan2_spectre',
inputSelector: '.docs-search',
debug: true
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2702768-8', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
================================================
FILE: docs/components/badges.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>Badges - Components - Spectre.css CSS Framework</title>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
<meta name="author" content="Yan Zhu">
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/badges.html">
<meta property="og:title" content="Badges - Components - Spectre.css CSS Framework">
<meta property="og:description" content="Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@spectrecss">
<meta name="twitter:creator" content="@picturepan2">
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
<link rel="icon" href="../img/favicons/favicon.png">
<link rel="stylesheet" href="../dist/spectre.min.css">
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
<link rel="stylesheet" href="../dist/docs.min.css">
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/badges.html">
</head>
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
<div class="btns d-flex">
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
</div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
</div>
<div class="docs-nav">
<div class="accordion-container">
<div class="accordion">
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
</li>
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
</li>
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
</li>
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
</li>
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
</li>
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
</li>
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
</li>
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
</li>
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
</li>
<li class="menu-item"><a href="../elements/code.html">Code</a>
</li>
<li class="menu-item"><a href="../elements/media.html">Media</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
</li>
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
</li>
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
</li>
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
<label class="accordion-header c-hand" for="accordion-components">Components</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
</li>
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
</li>
<li class="menu-item"><a href="../components/badges.html">Badges</a>
</li>
<li class="menu-item"><a href="../components/bars.html">Bars</a>
</li>
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
</li>
<li class="menu-item"><a href="../components/cards.html">Cards</a>
</li>
<li class="menu-item"><a href="../components/chips.html">Chips</a>
</li>
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
</li>
<li class="menu-item"><a href="../components/menu.html">Menu</a>
</li>
<li class="menu-item"><a href="../components/modals.html">Modals</a>
</li>
<li class="menu-item"><a href="../components/nav.html">Nav</a>
</li>
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
</li>
<li class="menu-item"><a href="../components/panels.html">Panels</a>
</li>
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
</li>
<li class="menu-item"><a href="../components/steps.html">Steps</a>
</li>
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
</li>
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
</li>
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
</li>
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
</li>
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
</li>
<li class="menu-item"><a href="../utilities/display.html">Display</a>
</li>
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
</li>
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
</li>
<li class="menu-item"><a href="../utilities/position.html">Position</a>
</li>
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
</li>
<li class="menu-item"><a href="../utilities/text.html">Text</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
</li>
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
</li>
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
</li>
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
</li>
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
</li>
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
</li>
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
</li>
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
</li>
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
</li>
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
</li>
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
</li>
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div><a class="off-canvas-overlay" href="#close"></a>
<div class="off-canvas-content">
<div class="docs-content" id="content">
<div class="container" id="badges">
<h3 class="s-title">Badges<a class="anchor" href="#badges" aria-hidden="true">#</a></h3>
<div class="docs-ad">
<div class="hide-md text-center">
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<div class="show-md text-center">
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
<p>Badges are often used as unread number indicators.</p>
<div class="docs-demo columns">
<div class="column col-3 col-xs-6"><span class="badge" data-badge="">Notifications</span></div>
<div class="column col-3 col-xs-6"><span class="badge" data-badge="8">Notifications</span></div>
<div class="column col-3 col-xs-6"><span class="badge" data-badge="88">Notifications</span></div>
<div class="column col-3 col-xs-6"><span class="badge" data-badge="888">Notifications</span></div>
</div>
<p>Add the <code>badge</code> class to non self closing elements.
And add the <code>data-badge</code> attribute to define the content of a badge.
The badge will appear in the top-right direction of the element.
</p>
<p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p>
<div class="docs-demo columns">
<div class="column col-sm-12">
<button class="btn badge" data-badge="">Button</button>
<button class="btn badge" data-badge="8">Button</button>
</div>
<div class="column col-sm-12">
<button class="btn btn-primary badge" data-badge="">Button</button>
<button class="btn btn-primary badge" data-badge="8">Button</button>
</div>
<div class="column col-sm-12">
<figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ"><img src="../img/avatar-1.png" alt="YZ"></figure>
<figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ"><img src="../img/avatar-2.png" alt="YZ"></figure>
<figure class="avatar badge" data-badge="8" data-initial="YZ"><img src="../img/avatar-3.png" alt="YZ"></figure>
</div>
</div>
<p>Badges support <code>button</code> and <code>avatars</code> elements as well.</p>
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span>></span>
Notifications
<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span>></span>
Notifications
<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span>></span>
Button
<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-3.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"YZ"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
</code></pre>
</div>
<div class="docs-footer container grid-lg" id="copyright">
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
indexName: 'picturepan2_spectre',
inputSelector: '.docs-search',
debug: true
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2702768-8', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
================================================
FILE: docs/components/bars.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bars - Components - Spectre.css CSS Framework</title>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
<meta name="author" content="Yan Zhu">
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/bars.html">
<meta property="og:title" content="Bars - Components - Spectre.css CSS Framework">
<meta property="og:description" content="Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@spectrecss">
<meta name="twitter:creator" content="@picturepan2">
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
<link rel="icon" href="../img/favicons/favicon.png">
<link rel="stylesheet" href="../dist/spectre.min.css">
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
<link rel="stylesheet" href="../dist/docs.min.css">
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/bars.html">
</head>
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
<div class="btns d-flex">
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
</div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
</div>
<div class="docs-nav">
<div class="accordion-container">
<div class="accordion">
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
</li>
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
</li>
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
</li>
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
</li>
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
</li>
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
</li>
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
</li>
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
</li>
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
</li>
<li class="menu-item"><a href="../elements/code.html">Code</a>
</li>
<li class="menu-item"><a href="../elements/media.html">Media</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
</li>
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
</li>
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
</li>
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
<label class="accordion-header c-hand" for="accordion-components">Components</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
</li>
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
</li>
<li class="menu-item"><a href="../components/badges.html">Badges</a>
</li>
<li class="menu-item"><a href="../components/bars.html">Bars</a>
</li>
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
</li>
<li class="menu-item"><a href="../components/cards.html">Cards</a>
</li>
<li class="menu-item"><a href="../components/chips.html">Chips</a>
</li>
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
</li>
<li class="menu-item"><a href="../components/menu.html">Menu</a>
</li>
<li class="menu-item"><a href="../components/modals.html">Modals</a>
</li>
<li class="menu-item"><a href="../components/nav.html">Nav</a>
</li>
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
</li>
<li class="menu-item"><a href="../components/panels.html">Panels</a>
</li>
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
</li>
<li class="menu-item"><a href="../components/steps.html">Steps</a>
</li>
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
</li>
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
</li>
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
</li>
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
</li>
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
</li>
<li class="menu-item"><a href="../utilities/display.html">Display</a>
</li>
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
</li>
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
</li>
<li class="menu-item"><a href="../utilities/position.html">Position</a>
</li>
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
</li>
<li class="menu-item"><a href="../utilities/text.html">Text</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
</li>
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
</li>
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
</li>
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
</li>
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
</li>
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
</li>
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
</li>
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
</li>
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
</li>
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
</li>
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
</li>
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div><a class="off-canvas-overlay" href="#close"></a>
<div class="off-canvas-content">
<div class="docs-content" id="content">
<div class="container" id="bars">
<h3 class="s-title">Bars<a class="anchor" href="
gitextract_t0vr0ru3/
├── .csscomb.json
├── .gitattributes
├── .gitignore
├── .hound.yml
├── .scss-lint.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── bower.json
├── dist/
│ ├── spectre-exp.css
│ ├── spectre-icons.css
│ └── spectre.css
├── docs/
│ ├── components/
│ │ ├── accordions.html
│ │ ├── avatars.html
│ │ ├── badges.html
│ │ ├── bars.html
│ │ ├── breadcrumbs.html
│ │ ├── cards.html
│ │ ├── chips.html
│ │ ├── empty.html
│ │ ├── menu.html
│ │ ├── modals.html
│ │ ├── nav.html
│ │ ├── pagination.html
│ │ ├── panels.html
│ │ ├── popovers.html
│ │ ├── steps.html
│ │ ├── tabs.html
│ │ ├── tiles.html
│ │ ├── toasts.html
│ │ └── tooltips.html
│ ├── components.html
│ ├── dist/
│ │ ├── docs.css
│ │ ├── spectre-exp.css
│ │ ├── spectre-icons.css
│ │ ├── spectre-rtl.css
│ │ └── spectre.css
│ ├── elements/
│ │ ├── buttons.html
│ │ ├── code.html
│ │ ├── forms.html
│ │ ├── icons.html
│ │ ├── labels.html
│ │ ├── media.html
│ │ ├── tables.html
│ │ └── typography.html
│ ├── elements.html
│ ├── examples/
│ │ └── starter.html
│ ├── experimentals/
│ │ ├── autocomplete.html
│ │ ├── calendars.html
│ │ ├── carousels.html
│ │ ├── comparison.html
│ │ ├── filters.html
│ │ ├── meters.html
│ │ ├── off-canvas.html
│ │ ├── parallax.html
│ │ ├── progress.html
│ │ ├── sliders.html
│ │ ├── timelines.html
│ │ └── viewer-360.html
│ ├── experimentals.html
│ ├── getting-started/
│ │ ├── browsers.html
│ │ ├── custom.html
│ │ ├── installation.html
│ │ └── whatsnew.html
│ ├── getting-started.html
│ ├── index.html
│ ├── layout/
│ │ ├── grid.html
│ │ ├── hero.html
│ │ ├── navbar.html
│ │ └── responsive.html
│ ├── layout.html
│ ├── rtl.html
│ ├── src/
│ │ ├── _layout/
│ │ │ ├── _ad-c.pug
│ │ │ ├── _ad-g.pug
│ │ │ ├── _docs-layout.pug
│ │ │ ├── _example-layout.pug
│ │ │ ├── _footer.pug
│ │ │ ├── _layout.pug
│ │ │ └── _mixins.pug
│ │ ├── components/
│ │ │ ├── accordions.pug
│ │ │ ├── avatars.pug
│ │ │ ├── badges.pug
│ │ │ ├── bars.pug
│ │ │ ├── breadcrumbs.pug
│ │ │ ├── cards.pug
│ │ │ ├── chips.pug
│ │ │ ├── empty.pug
│ │ │ ├── menu.pug
│ │ │ ├── modals.pug
│ │ │ ├── nav.pug
│ │ │ ├── pagination.pug
│ │ │ ├── panels.pug
│ │ │ ├── popovers.pug
│ │ │ ├── steps.pug
│ │ │ ├── tabs.pug
│ │ │ ├── tiles.pug
│ │ │ ├── toasts.pug
│ │ │ └── tooltips.pug
│ │ ├── components.pug
│ │ ├── elements/
│ │ │ ├── buttons.pug
│ │ │ ├── code.pug
│ │ │ ├── forms.pug
│ │ │ ├── icons.pug
│ │ │ ├── labels.pug
│ │ │ ├── media.pug
│ │ │ ├── tables.pug
│ │ │ └── typography.pug
│ │ ├── elements.pug
│ │ ├── examples/
│ │ │ └── starter.pug
│ │ ├── experimentals/
│ │ │ ├── autocomplete.pug
│ │ │ ├── calendars.pug
│ │ │ ├── carousels.pug
│ │ │ ├── comparison.pug
│ │ │ ├── filters.pug
│ │ │ ├── meters.pug
│ │ │ ├── off-canvas.pug
│ │ │ ├── parallax.pug
│ │ │ ├── progress.pug
│ │ │ ├── sliders.pug
│ │ │ ├── timelines.pug
│ │ │ └── viewer-360.pug
│ │ ├── experimentals.pug
│ │ ├── getting-started/
│ │ │ ├── browsers.pug
│ │ │ ├── custom.pug
│ │ │ ├── installation.pug
│ │ │ └── whatsnew.pug
│ │ ├── getting-started.pug
│ │ ├── index.pug
│ │ ├── layout/
│ │ │ ├── grid.pug
│ │ │ ├── hero.pug
│ │ │ ├── navbar.pug
│ │ │ └── responsive.pug
│ │ ├── layout.pug
│ │ ├── scss/
│ │ │ ├── docs.scss
│ │ │ └── spectre-rtl.scss
│ │ ├── utilities/
│ │ │ ├── colors.pug
│ │ │ ├── cursors.pug
│ │ │ ├── display.pug
│ │ │ ├── divider.pug
│ │ │ ├── loading.pug
│ │ │ ├── position.pug
│ │ │ ├── shapes.pug
│ │ │ └── text.pug
│ │ └── utilities.pug
│ ├── utilities/
│ │ ├── colors.html
│ │ ├── cursors.html
│ │ ├── display.html
│ │ ├── divider.html
│ │ ├── loading.html
│ │ ├── position.html
│ │ ├── shapes.html
│ │ └── text.html
│ └── utilities.html
├── gulpfile.js
├── package.json
└── src/
├── _accordions.scss
├── _animations.scss
├── _asian.scss
├── _autocomplete.scss
├── _avatars.scss
├── _badges.scss
├── _bars.scss
├── _base.scss
├── _breadcrumbs.scss
├── _buttons.scss
├── _calendars.scss
├── _cards.scss
├── _carousels.scss
├── _chips.scss
├── _codes.scss
├── _comparison-sliders.scss
├── _dropdowns.scss
├── _empty.scss
├── _filters.scss
├── _forms.scss
├── _hero.scss
├── _icons.scss
├── _labels.scss
├── _layout.scss
├── _media.scss
├── _menus.scss
├── _meters.scss
├── _mixins.scss
├── _modals.scss
├── _navbar.scss
├── _navs.scss
├── _normalize.scss
├── _off-canvas.scss
├── _pagination.scss
├── _panels.scss
├── _parallax.scss
├── _popovers.scss
├── _progress.scss
├── _sliders.scss
├── _steps.scss
├── _tables.scss
├── _tabs.scss
├── _tiles.scss
├── _timelines.scss
├── _toasts.scss
├── _tooltips.scss
├── _typography.scss
├── _utilities.scss
├── _variables.scss
├── _viewer-360.scss
├── icons/
│ ├── _icons-action.scss
│ ├── _icons-core.scss
│ ├── _icons-navigation.scss
│ └── _icons-object.scss
├── mixins/
│ ├── _avatar.scss
│ ├── _button.scss
│ ├── _clearfix.scss
│ ├── _color.scss
│ ├── _label.scss
│ ├── _position.scss
│ ├── _shadow.scss
│ ├── _text.scss
│ └── _toast.scss
├── spectre-exp.scss
├── spectre-icons.scss
├── spectre.scss
└── utilities/
├── _colors.scss
├── _cursors.scss
├── _display.scss
├── _divider.scss
├── _loading.scss
├── _position.scss
├── _shapes.scss
└── _text.scss
SYMBOL INDEX (4 symbols across 1 files)
FILE: gulpfile.js
function build (line 10) | function build() {
function docs_css (line 26) | function docs_css() {
function docs_pug (line 42) | function docs_pug() {
function watch (line 51) | function watch() {
Condensed preview — 229 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,227K chars).
[
{
"path": ".csscomb.json",
"chars": 767,
"preview": "{\n \"remove-empty-rulesets\": true,\n \"always-semicolon\": true,\n \"color-case\": \"lower\",\n \"block-indent\": \" \",\n \"color"
},
{
"path": ".gitattributes",
"chars": 33,
"preview": "**/*.html linguist-documentation\n"
},
{
"path": ".gitignore",
"chars": 123,
"preview": ".idea/\nnode_modules/\nyarn.lock\npackage-lock.json\n.*\n!.csscomb.json\n!.gitignore\n!.gitattributes\n!.hound.yml\n!.scss-lint.y"
},
{
"path": ".hound.yml",
"chars": 35,
"preview": "scss:\n config_file: .scss-lint.yml"
},
{
"path": ".scss-lint.yml",
"chars": 4866,
"preview": "# Default application configuration that all configurations inherit from.\n\nscss_files: \"**/*.scss\"\nplugin_directories: ["
},
{
"path": "CHANGELOG.md",
"chars": 10533,
"preview": "#### Spectre.css Changelog\n\n##### v0.5.9 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.9)\n\n- Update gulp "
},
{
"path": "LICENSE",
"chars": 1081,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2016 - 2020 Yan Zhu\n\nPermission is hereby granted, free of charge, to any person ob"
},
{
"path": "README.md",
"chars": 6311,
"preview": "<a href=\"https://picturepan2.github.io/spectre\">\n <img src=\"https://picturepan2.github.io/spectre/img/spectre-logo.svg\""
},
{
"path": "bower.json",
"chars": 580,
"preview": "{\n \"name\": \"spectre.css\",\n \"version\": \"0.5.9\",\n \"description\": \"Spectre.css: A lightweight, responsive and modern CSS"
},
{
"path": "dist/spectre-exp.css",
"chars": 27587,
"preview": "/*! Spectre.css Experimentals v0.5.9 | MIT License | github.com/picturepan2/spectre */\n.form-autocomplete {\n position: "
},
{
"path": "dist/spectre-icons.css",
"chars": 10616,
"preview": "/*! Spectre.css Icons v0.5.9 | MIT License | github.com/picturepan2/spectre */\n.icon {\n box-sizing: border-box;\n displ"
},
{
"path": "dist/spectre.css",
"chars": 62359,
"preview": "/*! Spectre.css v0.5.9 | MIT License | github.com/picturepan2/spectre */\n/* Manually forked from Normalize.css */\n/* nor"
},
{
"path": "docs/components/accordions.html",
"chars": 22437,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Accordions - Components - Spectre.css CSS Framework</title>\n <me"
},
{
"path": "docs/components/avatars.html",
"chars": 21571,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Avatars - Components - Spectre.css CSS Framework</title>\n <meta "
},
{
"path": "docs/components/badges.html",
"chars": 17606,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Badges - Components - Spectre.css CSS Framework</title>\n <meta c"
},
{
"path": "docs/components/bars.html",
"chars": 22304,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Bars - Components - Spectre.css CSS Framework</title>\n <meta cha"
},
{
"path": "docs/components/breadcrumbs.html",
"chars": 17489,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Breadcrumbs - Components - Spectre.css CSS Framework</title>\n <m"
},
{
"path": "docs/components/cards.html",
"chars": 20905,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Cards - Components - Spectre.css CSS Framework</title>\n <meta ch"
},
{
"path": "docs/components/chips.html",
"chars": 17029,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Chips - Components - Spectre.css CSS Framework</title>\n <meta ch"
},
{
"path": "docs/components/empty.html",
"chars": 18241,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Empty states - Components - Spectre.css CSS Framework</title>\n <"
},
{
"path": "docs/components/menu.html",
"chars": 28310,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Menu - Components - Spectre.css CSS Framework</title>\n <meta cha"
},
{
"path": "docs/components/modals.html",
"chars": 25369,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Modals - Components - Spectre.css CSS Framework</title>\n <meta c"
},
{
"path": "docs/components/nav.html",
"chars": 19602,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Nav - Components - Spectre.css CSS Framework</title>\n <meta char"
},
{
"path": "docs/components/pagination.html",
"chars": 22593,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Pagination - Components - Spectre.css CSS Framework</title>\n <me"
},
{
"path": "docs/components/panels.html",
"chars": 22093,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Panels - Components - Spectre.css CSS Framework</title>\n <meta c"
},
{
"path": "docs/components/popovers.html",
"chars": 20006,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Popovers - Components - Spectre.css CSS Framework</title>\n <meta"
},
{
"path": "docs/components/steps.html",
"chars": 18386,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Steps - Components - Spectre.css CSS Framework</title>\n <meta ch"
},
{
"path": "docs/components/tabs.html",
"chars": 22124,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Tabs - Components - Spectre.css CSS Framework</title>\n <meta cha"
},
{
"path": "docs/components/tiles.html",
"chars": 22141,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Tiles - Components - Spectre.css CSS Framework</title>\n <meta ch"
},
{
"path": "docs/components/toasts.html",
"chars": 16948,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Toasts - Components - Spectre.css CSS Framework</title>\n <meta c"
},
{
"path": "docs/components/tooltips.html",
"chars": 17285,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Tooltips - Components - Spectre.css CSS Framework</title>\n <meta"
},
{
"path": "docs/components.html",
"chars": 22986,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Components - Spectre.css CSS Framework</title>\n <meta charset=\"u"
},
{
"path": "docs/dist/docs.css",
"chars": 29245,
"preview": "/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */\n.version::after {\n content: \"0.5.9\";\n}\n\n.off-can"
},
{
"path": "docs/dist/spectre-exp.css",
"chars": 27587,
"preview": "/*! Spectre.css Experimentals v0.5.9 | MIT License | github.com/picturepan2/spectre */\n.form-autocomplete {\n position: "
},
{
"path": "docs/dist/spectre-icons.css",
"chars": 10616,
"preview": "/*! Spectre.css Icons v0.5.9 | MIT License | github.com/picturepan2/spectre */\n.icon {\n box-sizing: border-box;\n displ"
},
{
"path": "docs/dist/spectre-rtl.css",
"chars": 90020,
"preview": "/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre */\n/*! Spectre.css v0.5.9 | MIT License | github.com/"
},
{
"path": "docs/dist/spectre.css",
"chars": 62359,
"preview": "/*! Spectre.css v0.5.9 | MIT License | github.com/picturepan2/spectre */\n/* Manually forked from Normalize.css */\n/* nor"
},
{
"path": "docs/elements/buttons.html",
"chars": 28233,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Buttons - Elements - Spectre.css CSS Framework</title>\n <meta ch"
},
{
"path": "docs/elements/code.html",
"chars": 17326,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Code - Elements - Spectre.css CSS Framework</title>\n <meta chars"
},
{
"path": "docs/elements/forms.html",
"chars": 74089,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Forms - Elements - Spectre.css CSS Framework</title>\n <meta char"
},
{
"path": "docs/elements/icons.html",
"chars": 25146,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Icons - Elements - Spectre.css CSS Framework</title>\n <meta char"
},
{
"path": "docs/elements/labels.html",
"chars": 16318,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Labels - Elements - Spectre.css CSS Framework</title>\n <meta cha"
},
{
"path": "docs/elements/media.html",
"chars": 21057,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Media - Elements - Spectre.css CSS Framework</title>\n <meta char"
},
{
"path": "docs/elements/tables.html",
"chars": 23559,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Tables - Elements - Spectre.css CSS Framework</title>\n <meta cha"
},
{
"path": "docs/elements/typography.html",
"chars": 30971,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Typography - Elements - Spectre.css CSS Framework</title>\n <meta"
},
{
"path": "docs/elements.html",
"chars": 18187,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Elements - Spectre.css CSS Framework</title>\n <meta charset=\"utf"
},
{
"path": "docs/examples/starter.html",
"chars": 2165,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Starter Page Example - Spectre.css CSS Framework</title>\n <meta"
},
{
"path": "docs/experimentals/autocomplete.html",
"chars": 22561,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Autocomplete - Experimentals - Spectre.css CSS Framework</title>\n "
},
{
"path": "docs/experimentals/calendars.html",
"chars": 41696,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Calendars - Experimentals - Spectre.css CSS Framework</title>\n <"
},
{
"path": "docs/experimentals/carousels.html",
"chars": 28918,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Carousels - Experimentals - Spectre.css CSS Framework</title>\n <"
},
{
"path": "docs/experimentals/comparison.html",
"chars": 16942,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Comparison sliders - Experimentals - Spectre.css CSS Framework</tit"
},
{
"path": "docs/experimentals/filters.html",
"chars": 24693,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Filters - Experimentals - Spectre.css CSS Framework</title>\n <me"
},
{
"path": "docs/experimentals/meters.html",
"chars": 17508,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Meters - Experimentals - Spectre.css CSS Framework</title>\n <met"
},
{
"path": "docs/experimentals/off-canvas.html",
"chars": 17913,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Off-canvas - Experimentals - Spectre.css CSS Framework</title>\n "
},
{
"path": "docs/experimentals/parallax.html",
"chars": 17859,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Parallax - Experimentals - Spectre.css CSS Framework</title>\n <m"
},
{
"path": "docs/experimentals/progress.html",
"chars": 15491,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Progress - Experimentals - Spectre.css CSS Framework</title>\n <m"
},
{
"path": "docs/experimentals/sliders.html",
"chars": 15910,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Sliders - Experimentals - Spectre.css CSS Framework</title>\n <me"
},
{
"path": "docs/experimentals/timelines.html",
"chars": 20316,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Timelines - Experimentals - Spectre.css CSS Framework</title>\n <"
},
{
"path": "docs/experimentals/viewer-360.html",
"chars": 17573,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>360-Degree Viewer - Experimentals - Spectre.css CSS Framework</titl"
},
{
"path": "docs/experimentals.html",
"chars": 20177,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Experimentals - Spectre.css CSS Framework</title>\n <meta charset"
},
{
"path": "docs/getting-started/browsers.html",
"chars": 15320,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Browsers - Getting started - Spectre.css CSS Framework</title>\n "
},
{
"path": "docs/getting-started/custom.html",
"chars": 26766,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Custom - Getting started - Spectre.css CSS Framework</title>\n <m"
},
{
"path": "docs/getting-started/installation.html",
"chars": 17954,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Installation - Getting started - Spectre.css CSS Framework</title>\n"
},
{
"path": "docs/getting-started/whatsnew.html",
"chars": 26692,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>What's New - Getting started - Spectre.css CSS Framework</title>\n "
},
{
"path": "docs/getting-started.html",
"chars": 16714,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Getting started - Spectre.css CSS Framework</title>\n <meta chars"
},
{
"path": "docs/index.html",
"chars": 8282,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Spectre.css CSS Framework</title>\n <meta charset=\"utf-8\">\n <m"
},
{
"path": "docs/layout/grid.html",
"chars": 30556,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Flexbox grid - Layout - Spectre.css CSS Framework</title>\n <meta"
},
{
"path": "docs/layout/hero.html",
"chars": 16066,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Hero - Layout - Spectre.css CSS Framework</title>\n <meta charset"
},
{
"path": "docs/layout/navbar.html",
"chars": 20807,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Navbar - Layout - Spectre.css CSS Framework</title>\n <meta chars"
},
{
"path": "docs/layout/responsive.html",
"chars": 29802,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Responsive - Layout - Spectre.css CSS Framework</title>\n <meta c"
},
{
"path": "docs/layout.html",
"chars": 16350,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Layout - Spectre.css CSS Framework</title>\n <meta charset=\"utf-8"
},
{
"path": "docs/rtl.html",
"chars": 14448,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"robots\" content=\"index, follow\">\n <meta "
},
{
"path": "docs/src/_layout/_ad-c.pug",
"chars": 0,
"preview": ""
},
{
"path": "docs/src/_layout/_ad-g.pug",
"chars": 653,
"preview": "block ad-adsense\n .docs-ad\n .hide-md.text-center\n script(async='', src='https://pagead2.googlesyndication.com/p"
},
{
"path": "docs/src/_layout/_docs-layout.pug",
"chars": 4619,
"preview": "extends _layout.pug\ninclude _mixins.pug\n\nblock content\n .docs-container.off-canvas.off-canvas-sidebar-show\n .docs-na"
},
{
"path": "docs/src/_layout/_example-layout.pug",
"chars": 1629,
"preview": "block variables\n - var slug = ''\n - var parent = ''\n - var title = 'Spectre.css - A Lightweight, Responsive and Moder"
},
{
"path": "docs/src/_layout/_footer.pug",
"chars": 695,
"preview": "#copyright.docs-footer.container.grid-lg\n p\n a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub"
},
{
"path": "docs/src/_layout/_layout.pug",
"chars": 2666,
"preview": "block global\n - var domain = 'https://picturepan2.github.io/spectre/'\n - var url = domain\n\nblock variables\n - var slu"
},
{
"path": "docs/src/_layout/_mixins.pug",
"chars": 790,
"preview": "mixin docs-accordion(id, name, ...pages)\n .accordion\n input(id='accordion-' + id type='checkbox' name='docs-accordio"
},
{
"path": "docs/src/components/accordions.pug",
"chars": 4894,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'accordions'\n - var parent = 'components'\n - var t"
},
{
"path": "docs/src/components/avatars.pug",
"chars": 4715,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'avatars'\n - var parent = 'components'\n - var titl"
},
{
"path": "docs/src/components/badges.pug",
"chars": 2537,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'badges'\n - var parent = 'components'\n - var title"
},
{
"path": "docs/src/components/bars.pug",
"chars": 4150,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'bars'\n - var parent = 'components'\n - var title ="
},
{
"path": "docs/src/components/breadcrumbs.pug",
"chars": 2244,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'breadcrumbs'\n - var parent = 'components'\n - var "
},
{
"path": "docs/src/components/cards.pug",
"chars": 4259,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'cards'\n - var parent = 'components'\n - var title "
},
{
"path": "docs/src/components/chips.pug",
"chars": 1923,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'chips'\n - var parent = 'components'\n - var title "
},
{
"path": "docs/src/components/empty.pug",
"chars": 2577,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'empty'\n - var parent = 'components'\n - var title "
},
{
"path": "docs/src/components/menu.pug",
"chars": 7117,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'menu'\n - var parent = 'components'\n - var title ="
},
{
"path": "docs/src/components/modals.pug",
"chars": 7457,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'modals'\n - var parent = 'components'\n - var title"
},
{
"path": "docs/src/components/nav.pug",
"chars": 2423,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'nav'\n - var parent = 'components'\n - var title = "
},
{
"path": "docs/src/components/pagination.pug",
"chars": 3871,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'pagination'\n - var parent = 'components'\n - var t"
},
{
"path": "docs/src/components/panels.pug",
"chars": 5032,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'panels'\n - var parent = 'components'\n - var title"
},
{
"path": "docs/src/components/popovers.pug",
"chars": 3757,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'popovers'\n - var parent = 'components'\n - var tit"
},
{
"path": "docs/src/components/steps.pug",
"chars": 2354,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'steps'\n - var parent = 'components'\n - var title "
},
{
"path": "docs/src/components/tabs.pug",
"chars": 4324,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'tabs'\n - var parent = 'components'\n - var title ="
},
{
"path": "docs/src/components/tiles.pug",
"chars": 4012,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'tiles'\n - var parent = 'components'\n - var title "
},
{
"path": "docs/src/components/toasts.pug",
"chars": 2266,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'toasts'\n - var parent = 'components'\n - var title"
},
{
"path": "docs/src/components/tooltips.pug",
"chars": 2460,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'tooltips'\n - var parent = 'components'\n - var tit"
},
{
"path": "docs/src/components.pug",
"chars": 6126,
"preview": "extends _layout/_docs-layout.pug\n\nblock variables\n - var slug = 'components'\n - var parent = 'components'\n - var titl"
},
{
"path": "docs/src/elements/buttons.pug",
"chars": 7105,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'buttons'\n - var parent = 'elements'\n - var title "
},
{
"path": "docs/src/elements/code.pug",
"chars": 1712,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'code'\n - var parent = 'elements'\n - var title = '"
},
{
"path": "docs/src/elements/forms.pug",
"chars": 26771,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'forms'\n - var parent = 'elements'\n - var title = "
},
{
"path": "docs/src/elements/icons.pug",
"chars": 7143,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'icons'\n - var parent = 'elements'\n - var title = "
},
{
"path": "docs/src/elements/labels.pug",
"chars": 1913,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'labels'\n - var parent = 'elements'\n - var title ="
},
{
"path": "docs/src/elements/media.pug",
"chars": 4395,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'media'\n - var parent = 'elements'\n - var title = "
},
{
"path": "docs/src/elements/tables.pug",
"chars": 4858,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'tables'\n - var parent = 'elements'\n - var title ="
},
{
"path": "docs/src/elements/typography.pug",
"chars": 9199,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'typography'\n - var parent = 'elements'\n - var tit"
},
{
"path": "docs/src/elements.pug",
"chars": 3253,
"preview": "extends _layout/_docs-layout.pug\n\nblock variables\n - var slug = 'elements'\n - var parent = 'elements'\n - var title = "
},
{
"path": "docs/src/examples/starter.pug",
"chars": 1107,
"preview": "extends ../_layout/_example-layout.pug\n\nblock variables\n - var slug = 'starter'\n - var parent = 'examples'\n - var tit"
},
{
"path": "docs/src/experimentals/autocomplete.pug",
"chars": 5283,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'autocomplete'\n - var parent = 'experimentals'\n - "
},
{
"path": "docs/src/experimentals/calendars.pug",
"chars": 11852,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'calendars'\n - var parent = 'experimentals'\n - var"
},
{
"path": "docs/src/experimentals/carousels.pug",
"chars": 6007,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'carousels'\n - var parent = 'experimentals'\n - var"
},
{
"path": "docs/src/experimentals/comparison.pug",
"chars": 1836,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'comparison'\n - var parent = 'experimentals'\n - va"
},
{
"path": "docs/src/experimentals/filters.pug",
"chars": 5234,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'filters'\n - var parent = 'experimentals'\n - var t"
},
{
"path": "docs/src/experimentals/meters.pug",
"chars": 1660,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'meters'\n - var parent = 'experimentals'\n - var ti"
},
{
"path": "docs/src/experimentals/off-canvas.pug",
"chars": 2647,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'off-canvas'\n - var parent = 'experimentals'\n - va"
},
{
"path": "docs/src/experimentals/parallax.pug",
"chars": 1934,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'parallax'\n - var parent = 'experimentals'\n - var "
},
{
"path": "docs/src/experimentals/progress.pug",
"chars": 1138,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'progress'\n - var parent = 'experimentals'\n - var "
},
{
"path": "docs/src/experimentals/sliders.pug",
"chars": 1381,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'sliders'\n - var parent = 'experimentals'\n - var t"
},
{
"path": "docs/src/experimentals/timelines.pug",
"chars": 3816,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'timelines'\n - var parent = 'experimentals'\n - var"
},
{
"path": "docs/src/experimentals/viewer-360.pug",
"chars": 2704,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'viewer-360'\n - var parent = 'experimentals'\n - va"
},
{
"path": "docs/src/experimentals.pug",
"chars": 4358,
"preview": "extends _layout/_docs-layout.pug\n\nblock variables\n - var slug = 'experimentals'\n - var parent = 'experimentals'\n - va"
},
{
"path": "docs/src/getting-started/browsers.pug",
"chars": 1644,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'browsers'\n - var parent = 'getting-started'\n - va"
},
{
"path": "docs/src/getting-started/custom.pug",
"chars": 9811,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'custom'\n - var parent = 'getting-started'\n - var "
},
{
"path": "docs/src/getting-started/installation.pug",
"chars": 3070,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'installation'\n - var parent = 'getting-started'\n "
},
{
"path": "docs/src/getting-started/whatsnew.pug",
"chars": 855,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'whatsnew'\n - var parent = 'getting-started'\n - va"
},
{
"path": "docs/src/getting-started.pug",
"chars": 2342,
"preview": "extends _layout/_docs-layout.pug\n\nblock variables\n - var slug = 'getting-started'\n - var parent = 'getting-started'\n "
},
{
"path": "docs/src/index.pug",
"chars": 3902,
"preview": "extends _layout/_layout.pug\n\nblock variables\n - var slug = 'index'\n - var parent = 'index'\n - var title = 'Spectre.cs"
},
{
"path": "docs/src/layout/grid.pug",
"chars": 7410,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'grid'\n - var parent = 'layout'\n - var title = 'Fl"
},
{
"path": "docs/src/layout/hero.pug",
"chars": 1457,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'hero'\n - var parent = 'layout'\n - var title = 'He"
},
{
"path": "docs/src/layout/navbar.pug",
"chars": 3174,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'navbar'\n - var parent = 'layout'\n - var title = '"
},
{
"path": "docs/src/layout/responsive.pug",
"chars": 9197,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'responsive'\n - var parent = 'layout'\n - var title"
},
{
"path": "docs/src/layout.pug",
"chars": 2164,
"preview": "extends _layout/_docs-layout.pug\n\nblock variables\n - var slug = 'layout'\n - var parent = 'layout'\n - var title = 'Lay"
},
{
"path": "docs/src/scss/docs.scss",
"chars": 27089,
"preview": "/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */\n// Core variables and mixins\n@import \"../../../sr"
},
{
"path": "docs/src/scss/spectre-rtl.scss",
"chars": 169,
"preview": "/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre */\n$rtl: true;\n\n// Import Spectre\n@import \"../../../s"
},
{
"path": "docs/src/utilities/colors.pug",
"chars": 3766,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'colors'\n - var parent = 'utilities'\n - var title "
},
{
"path": "docs/src/utilities/cursors.pug",
"chars": 1588,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'cursors'\n - var parent = 'utilities'\n - var title"
},
{
"path": "docs/src/utilities/display.pug",
"chars": 1527,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'display'\n - var parent = 'utilities'\n - var title"
},
{
"path": "docs/src/utilities/divider.pug",
"chars": 2538,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'divider'\n - var parent = 'utilities'\n - var title"
},
{
"path": "docs/src/utilities/loading.pug",
"chars": 1092,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'loading'\n - var parent = 'utilities'\n - var title"
},
{
"path": "docs/src/utilities/position.pug",
"chars": 2334,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'position'\n - var parent = 'utilities'\n - var titl"
},
{
"path": "docs/src/utilities/shapes.pug",
"chars": 1078,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'shapes'\n - var parent = 'utilities'\n - var title "
},
{
"path": "docs/src/utilities/text.pug",
"chars": 1895,
"preview": "extends ../_layout/_docs-layout.pug\n\nblock variables\n - var slug = 'text'\n - var parent = 'utilities'\n - var title = "
},
{
"path": "docs/src/utilities.pug",
"chars": 3202,
"preview": "extends _layout/_docs-layout.pug\n\nblock variables\n - var slug = 'utilities'\n - var parent = 'utilities'\n - var title "
},
{
"path": "docs/utilities/colors.html",
"chars": 22877,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Color utilities - Utilities - Spectre.css CSS Framework</title>\n "
},
{
"path": "docs/utilities/cursors.html",
"chars": 16820,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Cursor utilities - Utilities - Spectre.css CSS Framework</title>\n "
},
{
"path": "docs/utilities/display.html",
"chars": 17360,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Display utilities - Utilities - Spectre.css CSS Framework</title>\n "
},
{
"path": "docs/utilities/divider.html",
"chars": 18296,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Divider - Utilities - Spectre.css CSS Framework</title>\n <meta c"
},
{
"path": "docs/utilities/loading.html",
"chars": 15202,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Loading - Utilities - Spectre.css CSS Framework</title>\n <meta c"
},
{
"path": "docs/utilities/position.html",
"chars": 20681,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Position utilities - Utilities - Spectre.css CSS Framework</title>\n"
},
{
"path": "docs/utilities/shapes.html",
"chars": 15122,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Shape utilities - Utilities - Spectre.css CSS Framework</title>\n "
},
{
"path": "docs/utilities/text.html",
"chars": 19297,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Text utilities - Utilities - Spectre.css CSS Framework</title>\n "
},
{
"path": "docs/utilities.html",
"chars": 18146,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Utilities - Spectre.css CSS Framework</title>\n <meta charset=\"ut"
},
{
"path": "gulpfile.js",
"chars": 1408,
"preview": "const gulp = require(\"gulp\");\nconst { parallel } = require(\"gulp\");\nconst sass = require('gulp-sass');\nconst cleancss = "
},
{
"path": "package.json",
"chars": 1092,
"preview": "{\n \"name\": \"spectre.css\",\n \"version\": \"0.5.9\",\n \"homepage\": \"http://picturepan2.github.io/spectre\",\n \"author\": \"Yan "
},
{
"path": "src/_accordions.scss",
"chars": 613,
"preview": "// Accordions\n.accordion {\n input:checked ~,\n &[open] {\n & .accordion-header > {\n .icon:first-child {\n "
},
{
"path": "src/_animations.scss",
"chars": 271,
"preview": "// Animations\n@keyframes loading {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}"
},
{
"path": "src/_asian.scss",
"chars": 586,
"preview": "// Optimized for East Asian CJK\nhtml:lang(zh),\nhtml:lang(zh-Hans),\n.lang-zh,\n.lang-zh-hans {\n font-family: $cjk-zh-hans"
},
{
"path": "src/_autocomplete.scss",
"chars": 795,
"preview": "// Autocomplete\n.form-autocomplete {\n position: relative;\n\n .form-autocomplete-input {\n align-content: flex-start;\n"
},
{
"path": "src/_avatars.scss",
"chars": 1405,
"preview": "// Avatars\n.avatar {\n @include avatar-base();\n background: $primary-color;\n border-radius: 50%;\n color: rgba($light-"
},
{
"path": "src/_badges.scss",
"chars": 1130,
"preview": "// Badges\n.badge {\n position: relative;\n white-space: nowrap;\n\n &[data-badge],\n &:not([data-badge]) {\n &::after {"
},
{
"path": "src/_bars.scss",
"chars": 1330,
"preview": "// Bars\n.bar {\n background: $bg-color-dark;\n border-radius: $border-radius;\n display: flex;\n flex-wrap: nowrap;\n he"
},
{
"path": "src/_base.scss",
"chars": 663,
"preview": "// Base\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n\nhtml {\n box-sizing: border-box;\n font-size: $html-font-size"
},
{
"path": "src/_breadcrumbs.scss",
"chars": 474,
"preview": "// Breadcrumbs\n.breadcrumb {\n list-style: none;\n margin: $unit-1 0;\n padding: $unit-1 0;\n\n .breadcrumb-item {\n co"
},
{
"path": "src/_buttons.scss",
"chars": 3762,
"preview": "// Buttons\n.btn {\n appearance: none;\n background: $bg-color-light;\n border: $border-width solid $primary-color;\n bor"
},
{
"path": "src/_calendars.scss",
"chars": 4425,
"preview": "// Calendars\n.calendar {\n border: $border-width solid $border-color;\n border-radius: $border-radius;\n display: block;"
},
{
"path": "src/_cards.scss",
"chars": 761,
"preview": "// Cards\n.card {\n background: $bg-color-light;\n border: $border-width solid $border-color;\n border-radius: $border-ra"
},
{
"path": "src/_carousels.scss",
"chars": 2598,
"preview": "// Carousels\n// The number of carousel images\n$carousel-number: 8;\n\n%carousel-image-checked { \n animation: carousel-sli"
},
{
"path": "src/_chips.scss",
"chars": 597,
"preview": "// Chips\n.chip {\n align-items: center;\n background: $bg-color-dark;\n border-radius: 5rem;\n display: inline-flex;\n f"
},
{
"path": "src/_codes.scss",
"chars": 556,
"preview": "// Codes\ncode {\n @include label-base();\n @include label-variant($code-color, lighten($code-color, 42.5%));\n font-size"
},
{
"path": "src/_comparison-sliders.scss",
"chars": 1997,
"preview": "// Image comparison slider\n// Credit: http://codepen.io/solipsistacp/pen/Gpmaq\n.comparison-slider {\n height: 50vh;\n ov"
},
{
"path": "src/_dropdowns.scss",
"chars": 633,
"preview": "// Dropdown\n.dropdown {\n display: inline-block;\n position: relative;\n\n .menu {\n animation: slide-down .15s ease 1;"
},
{
"path": "src/_empty.scss",
"chars": 375,
"preview": "// Empty states (or Blank slates)\n.empty {\n background: $bg-color;\n border-radius: $border-radius;\n color: $gray-colo"
},
{
"path": "src/_filters.scss",
"chars": 689,
"preview": "// Filters \n// The number of filter options \n$filter-number: 8 !default;\n\n%filter-checked-nav { \n background: $primary-"
},
{
"path": "src/_forms.scss",
"chars": 10992,
"preview": "// Forms\n.form-group {\n &:not(:last-child) {\n margin-bottom: $layout-spacing;\n }\n}\n\nfieldset {\n margin-bottom: $la"
},
{
"path": "src/_hero.scss",
"chars": 325,
"preview": "// Hero\n.hero {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding-bottom: 4rem;\n p"
},
{
"path": "src/_icons.scss",
"chars": 134,
"preview": "// CSS Icons\n@import \"icons/icons-core\";\n@import \"icons/icons-navigation\";\n@import \"icons/icons-action\";\n@import \"icons/"
},
{
"path": "src/_labels.scss",
"chars": 700,
"preview": "// Labels\n.label {\n @include label-base();\n @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);\n d"
},
{
"path": "src/_layout.scss",
"chars": 6120,
"preview": "// Layout\n.container {\n margin-left: auto;\n margin-right: auto;\n padding-left: $layout-spacing;\n padding-right: $lay"
},
{
"path": "src/_media.scss",
"chars": 1199,
"preview": "// Media\n// Image responsive\n.img-responsive {\n display: block;\n height: auto;\n max-width: 100%;\n}\n\n// object-fit sup"
},
{
"path": "src/_menus.scss",
"chars": 1186,
"preview": "// Menus\n.menu {\n @include shadow-variant(.05rem);\n background: $bg-color-light;\n border-radius: $border-radius;\n li"
},
{
"path": "src/_meters.scss",
"chars": 1127,
"preview": "// Meters\n// Credit: https://css-tricks.com/html5-meter-element/\n.meter {\n appearance: none;\n background: $bg-color;\n "
},
{
"path": "src/_mixins.scss",
"chars": 233,
"preview": "// Mixins\n@import \"mixins/avatar\";\n@import \"mixins/button\";\n@import \"mixins/clearfix\";\n@import \"mixins/color\";\n@import \""
},
{
"path": "src/_modals.scss",
"chars": 1413,
"preview": "// Modals\n.modal {\n align-items: center;\n bottom: 0;\n display: none;\n justify-content: center;\n left: 0;\n opacity:"
},
{
"path": "src/_navbar.scss",
"chars": 447,
"preview": "// Navbar\n.navbar {\n align-items: stretch;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n\n .na"
},
{
"path": "src/_navs.scss",
"chars": 560,
"preview": "// Navs\n.nav {\n display: flex;\n flex-direction: column;\n list-style: none;\n margin: $unit-1 0;\n\n .nav-item {\n a "
},
{
"path": "src/_normalize.scss",
"chars": 7813,
"preview": "/* Manually forked from Normalize.css */\n/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/*"
},
{
"path": "src/_off-canvas.scss",
"chars": 1746,
"preview": "// Off canvas menus\n$off-canvas-breakpoint: $size-lg !default;\n\n.off-canvas {\n display: flex;\n flex-flow: nowrap;\n he"
},
{
"path": "src/_pagination.scss",
"chars": 902,
"preview": "// Pagination\n.pagination {\n display: flex;\n list-style: none;\n margin: $unit-1 0;\n padding: $unit-1 0;\n\n .page-ite"
},
{
"path": "src/_panels.scss",
"chars": 373,
"preview": "// Panels\n.panel {\n border: $border-width solid $border-color;\n border-radius: $border-radius;\n display: flex;\n flex"
},
{
"path": "src/_parallax.scss",
"chars": 3323,
"preview": "// Parallax\n$parallax-deg: 3deg !default;\n$parallax-offset: 4.5px !default;\n$parallax-offset-z: 50px !default;\n$parallax"
},
{
"path": "src/_popovers.scss",
"chars": 1178,
"preview": "// Popovers\n.popover {\n display: inline-block;\n position: relative;\n\n .popover-container {\n left: 50%;\n opacity"
},
{
"path": "src/_progress.scss",
"chars": 966,
"preview": "// Progress\n// Credit: https://css-tricks.com/html5-progress-element/\n.progress {\n appearance: none;\n background: $bg-"
},
{
"path": "src/_sliders.scss",
"chars": 1965,
"preview": "// Sliders\n// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/\n.slider {\n appearance: "
},
{
"path": "src/_steps.scss",
"chars": 1322,
"preview": "// Steps\n.step {\n display: flex;\n flex-wrap: nowrap;\n list-style: none;\n margin: $unit-1 0;\n width: 100%;\n\n .step-"
},
{
"path": "src/_tables.scss",
"chars": 835,
"preview": "// Tables\n.table {\n border-collapse: collapse;\n border-spacing: 0;\n width: 100%;\n @if $rtl == true {\n text-align:"
},
{
"path": "src/_tabs.scss",
"chars": 1153,
"preview": "// Tabs\n.tab {\n align-items: center;\n border-bottom: $border-width solid $border-color;\n display: flex;\n flex-wrap: "
},
{
"path": "src/_tiles.scss",
"chars": 586,
"preview": "// Tiles\n.tile {\n align-content: space-between;\n align-items: flex-start;\n display: flex;\n\n .tile-icon,\n .tile-acti"
},
{
"path": "src/_timelines.scss",
"chars": 1105,
"preview": "// Timelines\n.timeline {\n .timeline-item {\n display: flex;\n margin-bottom: $unit-6;\n position: relative;\n &"
},
{
"path": "src/_toasts.scss",
"chars": 747,
"preview": "// Toasts\n.toast {\n @include toast-variant($dark-color);\n border: $border-width solid $dark-color;\n border-radius: $b"
}
]
// ... and 29 more files (download for full content)
About this extraction
This page contains the full source code of the picturepan2/spectre GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 229 files (2.0 MB), approximately 535.6k tokens, and a symbol index with 4 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.