Merge pull request #1715 from YunoHost/simplify-dependencies
Do not include Learn4 directory
|
@ -1,168 +0,0 @@
|
||||||
{
|
|
||||||
"env": {
|
|
||||||
"browser": true,
|
|
||||||
"node": true,
|
|
||||||
"es6": true
|
|
||||||
},
|
|
||||||
|
|
||||||
"parser": "babel-eslint",
|
|
||||||
|
|
||||||
"parserOptions": {
|
|
||||||
"ecmaVersion": 7,
|
|
||||||
"sourceType": "module"
|
|
||||||
},
|
|
||||||
|
|
||||||
"rules": {
|
|
||||||
"accessor-pairs": 2,
|
|
||||||
"array-bracket-spacing": 0,
|
|
||||||
"block-scoped-var": 0,
|
|
||||||
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
|
|
||||||
"camelcase": 0,
|
|
||||||
"comma-dangle": [2, "never"],
|
|
||||||
"comma-spacing": [2, { "before": false, "after": true }],
|
|
||||||
"comma-style": [2, "last"],
|
|
||||||
"complexity": 0,
|
|
||||||
"computed-property-spacing": 0,
|
|
||||||
"consistent-return": 0,
|
|
||||||
"consistent-this": 0,
|
|
||||||
"constructor-super": 2,
|
|
||||||
"curly": [2, "multi-line"],
|
|
||||||
"default-case": 0,
|
|
||||||
"dot-location": [2, "property"],
|
|
||||||
"dot-notation": 0,
|
|
||||||
"eol-last": 2,
|
|
||||||
"eqeqeq": [2, "allow-null"],
|
|
||||||
"func-names": 0,
|
|
||||||
"func-style": 0,
|
|
||||||
"generator-star-spacing": [2, { "before": true, "after": true }],
|
|
||||||
"guard-for-in": 0,
|
|
||||||
"handle-callback-err": [2, "^(err|error)$" ],
|
|
||||||
"indent": [2, 4, { "SwitchCase": 1 }],
|
|
||||||
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
|
|
||||||
"linebreak-style": 0,
|
|
||||||
"lines-around-comment": 0,
|
|
||||||
"max-nested-callbacks": 0,
|
|
||||||
"new-cap": [2, { "newIsCap": true, "capIsNew": false }],
|
|
||||||
"new-parens": 2,
|
|
||||||
"newline-after-var": 0,
|
|
||||||
"no-alert": 0,
|
|
||||||
"no-array-constructor": 2,
|
|
||||||
"no-caller": 2,
|
|
||||||
"no-catch-shadow": 0,
|
|
||||||
"no-cond-assign": 2,
|
|
||||||
"no-console": 0,
|
|
||||||
"no-constant-condition": 0,
|
|
||||||
"no-continue": 0,
|
|
||||||
"no-control-regex": 2,
|
|
||||||
"no-debugger": 2,
|
|
||||||
"no-delete-var": 2,
|
|
||||||
"no-div-regex": 0,
|
|
||||||
"no-dupe-args": 2,
|
|
||||||
"no-dupe-keys": 2,
|
|
||||||
"no-duplicate-case": 2,
|
|
||||||
"no-else-return": 0,
|
|
||||||
"no-empty": 0,
|
|
||||||
"no-empty-character-class": 2,
|
|
||||||
"no-eq-null": 0,
|
|
||||||
"no-eval": 2,
|
|
||||||
"no-ex-assign": 2,
|
|
||||||
"no-extend-native": 2,
|
|
||||||
"no-extra-bind": 2,
|
|
||||||
"no-extra-boolean-cast": 2,
|
|
||||||
"no-extra-parens": 0,
|
|
||||||
"no-extra-semi": 0,
|
|
||||||
"no-fallthrough": 2,
|
|
||||||
"no-floating-decimal": 2,
|
|
||||||
"no-func-assign": 2,
|
|
||||||
"no-implied-eval": 2,
|
|
||||||
"no-inline-comments": 0,
|
|
||||||
"no-inner-declarations": [2, "functions"],
|
|
||||||
"no-invalid-regexp": 2,
|
|
||||||
"no-irregular-whitespace": 2,
|
|
||||||
"no-iterator": 2,
|
|
||||||
"no-label-var": 2,
|
|
||||||
"no-labels": 2,
|
|
||||||
"no-lone-blocks": 2,
|
|
||||||
"no-lonely-if": 0,
|
|
||||||
"no-loop-func": 0,
|
|
||||||
"no-mixed-requires": 0,
|
|
||||||
"no-mixed-spaces-and-tabs": 2,
|
|
||||||
"no-multi-spaces": 2,
|
|
||||||
"no-multi-str": 2,
|
|
||||||
"no-multiple-empty-lines": [2, { "max": 1 }],
|
|
||||||
"no-native-reassign": 2,
|
|
||||||
"no-negated-in-lhs": 2,
|
|
||||||
"no-nested-ternary": 0,
|
|
||||||
"no-new": 2,
|
|
||||||
"no-new-func": 0,
|
|
||||||
"no-new-object": 2,
|
|
||||||
"no-new-require": 2,
|
|
||||||
"no-new-wrappers": 2,
|
|
||||||
"no-obj-calls": 2,
|
|
||||||
"no-octal": 2,
|
|
||||||
"no-octal-escape": 2,
|
|
||||||
"no-param-reassign": 0,
|
|
||||||
"no-path-concat": 0,
|
|
||||||
"no-process-env": 0,
|
|
||||||
"no-process-exit": 0,
|
|
||||||
"no-proto": 0,
|
|
||||||
"no-redeclare": 2,
|
|
||||||
"no-regex-spaces": 2,
|
|
||||||
"no-restricted-modules": 0,
|
|
||||||
"no-return-assign": 2,
|
|
||||||
"no-script-url": 0,
|
|
||||||
"no-self-compare": 2,
|
|
||||||
"no-sequences": 2,
|
|
||||||
"no-shadow": 0,
|
|
||||||
"no-shadow-restricted-names": 2,
|
|
||||||
"no-spaced-func": 2,
|
|
||||||
"no-sparse-arrays": 2,
|
|
||||||
"no-sync": 0,
|
|
||||||
"no-ternary": 0,
|
|
||||||
"no-this-before-super": 2,
|
|
||||||
"no-throw-literal": 2,
|
|
||||||
"no-trailing-spaces": 2,
|
|
||||||
"no-undef": 2,
|
|
||||||
"no-undef-init": 2,
|
|
||||||
"no-undefined": 0,
|
|
||||||
"no-underscore-dangle": 0,
|
|
||||||
"no-unexpected-multiline": 2,
|
|
||||||
"no-unneeded-ternary": 2,
|
|
||||||
"no-unreachable": 2,
|
|
||||||
"no-unused-expressions": 0,
|
|
||||||
"no-unused-vars": [2, { "vars": "all", "args": "none" }],
|
|
||||||
"no-use-before-define": 0,
|
|
||||||
"no-var": 0,
|
|
||||||
"no-void": 0,
|
|
||||||
"no-warning-comments": 0,
|
|
||||||
"no-with": 2,
|
|
||||||
"object-curly-spacing": 0,
|
|
||||||
"object-shorthand": 0,
|
|
||||||
"one-var": [2, { "initialized": "never" }],
|
|
||||||
"operator-assignment": 0,
|
|
||||||
"operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
|
|
||||||
"padded-blocks": 0,
|
|
||||||
"prefer-const": 0,
|
|
||||||
"quote-props": 0,
|
|
||||||
"quotes": [2, "single", "avoid-escape"],
|
|
||||||
"radix": 2,
|
|
||||||
"semi": [2, "always"],
|
|
||||||
"semi-spacing": 0,
|
|
||||||
"sort-vars": 0,
|
|
||||||
"keyword-spacing": [2, {"after": true, "overrides": {"throw": { "after": true}, "return": { "before": true }}}],
|
|
||||||
"space-before-blocks": [2, "always"],
|
|
||||||
"space-before-function-paren": [2, "never"],
|
|
||||||
"space-in-parens": [2, "never"],
|
|
||||||
"space-infix-ops": 2,
|
|
||||||
"space-unary-ops": [2, { "words": true, "nonwords": false }],
|
|
||||||
"spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }],
|
|
||||||
"strict": 0,
|
|
||||||
"use-isnan": 2,
|
|
||||||
"valid-jsdoc": 0,
|
|
||||||
"valid-typeof": 2,
|
|
||||||
"vars-on-top": 0,
|
|
||||||
"wrap-iife": [2, "any"],
|
|
||||||
"wrap-regex": 0,
|
|
||||||
"yoda": [2, "never"]
|
|
||||||
}
|
|
||||||
}
|
|
1
themes/learn4/.gitignore
vendored
|
@ -1 +0,0 @@
|
||||||
/node_modules
|
|
|
@ -1,167 +0,0 @@
|
||||||
# v2.0.0-rc.2
|
|
||||||
## mm/dd/2019
|
|
||||||
|
|
||||||
1. [](#improved)
|
|
||||||
* Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.8` version
|
|
||||||
|
|
||||||
# v2.0.0-rc.1
|
|
||||||
## 02/07/2019
|
|
||||||
|
|
||||||
1. [](#improved)
|
|
||||||
* Support for 2FA panel styling
|
|
||||||
* Updated to Yarn 4.0 syntax
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Some checkboxes fixes for Forms 3.0
|
|
||||||
|
|
||||||
# v2.0.0-beta.4
|
|
||||||
## 12/07/2018
|
|
||||||
|
|
||||||
1. [](#improved)
|
|
||||||
* Updated to include latest `v1.2.5` improvements
|
|
||||||
|
|
||||||
# v2.0.0-beta.3
|
|
||||||
## 11/12/2018
|
|
||||||
|
|
||||||
1. [](#improved)
|
|
||||||
* Updated to include latest `v1.2.4` improvements
|
|
||||||
1. [](#bugfix)
|
|
||||||
* More Twig 2.0 compatibility fixes
|
|
||||||
|
|
||||||
# v2.0.0-beta.2
|
|
||||||
## 11/05/2018
|
|
||||||
|
|
||||||
1. [](#improved)
|
|
||||||
* Updated to include latest `v1.2.3` improvements
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Fixed a Twig 2.0 issue with assets rendering
|
|
||||||
|
|
||||||
# v2.0.0-beta.1
|
|
||||||
## 10/24/2018
|
|
||||||
|
|
||||||
1. [](#new)
|
|
||||||
* Use new `deferred` Twig blocks (requires Grav 1.6+)
|
|
||||||
1. [](#improved)
|
|
||||||
* Updated to use new `GRAV` core language prefix
|
|
||||||
|
|
||||||
# v1.2.5
|
|
||||||
## 12/07/2018
|
|
||||||
|
|
||||||
1. [](#improved)
|
|
||||||
* Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.7` version
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Fixed missing `</html>` close tag in bae template [#76](https://github.com/getgrav/grav-theme-quark/pull/)
|
|
||||||
|
|
||||||
# v1.2.4
|
|
||||||
## 11/12/2018
|
|
||||||
|
|
||||||
1. [](#improved)
|
|
||||||
* Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.5` version
|
|
||||||
* Added link support to modular `features` [#39](https://github.com/getgrav/grav-theme-quark/pull/39/)
|
|
||||||
* Remove desktop menu when in mobile mode [#59](https://github.com/getgrav/grav-theme-quark/pull/59/)
|
|
||||||
* Support modular `text` full-width if no image [#70](https://github.com/getgrav/grav-theme-quark/issues/70)
|
|
||||||
* Shim for IE support of BrickLayer.js [#64](https://github.com/getgrav/grav-theme-quark/issues/64)
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Fixed `continue_link:` showing up as toggled [#65](https://github.com/getgrav/grav-theme-quark/issues/65)
|
|
||||||
* Fixed issue with modular pages not hidden in on-page menu with `visible: false` [#71](https://github.com/getgrav/grav-theme-quark/issues/71)
|
|
||||||
|
|
||||||
|
|
||||||
# v1.2.3
|
|
||||||
## 11/05/2018
|
|
||||||
|
|
||||||
1. [](#improved)
|
|
||||||
* Moved footer into standalone twig to allow for easier extensibility [#63](https://github.com/getgrav/grav-theme-quark/pull/63)
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Fix variable name for prouction mode [#61](https://github.com/getgrav/grav-theme-quark/pull/61)
|
|
||||||
* Fix layout size in features blueprint [#67](https://github.com/getgrav/grav-theme-quark/pull/67)
|
|
||||||
* Fix active page logic in `nav` so there's no empty class attributes [#68](https://github.com/getgrav/grav-theme-quark/pull/68)
|
|
||||||
* Fix for features blueprint because `class` didn't work [#69](https://github.com/getgrav/grav-theme-quark/pull/69)
|
|
||||||
|
|
||||||
# v1.2.2
|
|
||||||
## 10/24/2018
|
|
||||||
|
|
||||||
1. [](#improved)
|
|
||||||
* Changed nav macro to format supported by Twig 2.0
|
|
||||||
* Updated `partials/form-messages.html.twig` to be more inline with latest Forms plugin
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Make the theme to work with Twig auto-escaping turned on
|
|
||||||
* Moved language strings under `THEME_QUARK`
|
|
||||||
|
|
||||||
# v1.2.1
|
|
||||||
## 08/23/2018
|
|
||||||
|
|
||||||
1. [](#improved)
|
|
||||||
* Added additional "mobile custom logo" support
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Addressed some CSS issues by forcing logo height
|
|
||||||
|
|
||||||
# v1.2.0
|
|
||||||
## 08/23/2018
|
|
||||||
|
|
||||||
1. [](#new)
|
|
||||||
* Added new "custom logo" support [#3](https://github.com/getgrav/grav-theme-quark/issues/3)
|
|
||||||
* Added option JSON feed syndication support in sidebar [#47](https://github.com/getgrav/grav-theme-quark/pull/47)
|
|
||||||
* Added basic form field `array` styling
|
|
||||||
|
|
||||||
# v1.1.0
|
|
||||||
## 07/25/2018
|
|
||||||
|
|
||||||
1. [](#new)
|
|
||||||
* Responsive font sizing [#28](https://github.com/getgrav/grav-theme-quark/issues/28)
|
|
||||||
1. [](#improved)
|
|
||||||
* Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.3` version
|
|
||||||
* Make blog settings toggleable [#38](https://github.com/getgrav/grav-theme-quark/pull/38)
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Proper fix for sticky footer in IE10 and IE11 [#21](https://github.com/getgrav/grav-theme-quark/issues/21)
|
|
||||||
* Fix for lists wrapping weirdly due to `outside` attribute
|
|
||||||
* Updated checkbox + radio to take into account `client_side_validation` form option
|
|
||||||
* Fixes for fallback values [#37](https://github.com/getgrav/grav-theme-quark/pull/37)
|
|
||||||
* Fix inheritance for images folder [#30](https://github.com/getgrav/grav-theme-quark/pull/30)
|
|
||||||
* Added blueprint option for `continue_link` [#45](https://github.com/getgrav/grav-theme-quark/issues/45)
|
|
||||||
* Added blueprint option for Feature `class` [#14](https://github.com/getgrav/grav-theme-quark/issues/14)
|
|
||||||
* Fixed `Duplicate ID` issues with modular sections. Might break CSS on first load, need to refresh to pick up new CSS [#24](https://github.com/getgrav/grav-theme-quark/issues/24)
|
|
||||||
* Fixed Text feature alignment issue [#4](https://github.com/getgrav/grav-theme-quark/issues/4)
|
|
||||||
* Overlapping menu and mobile button [#7](https://github.com/getgrav/grav-theme-quark/issues/7)
|
|
||||||
|
|
||||||
# v1.0.3
|
|
||||||
## 05/11/2018
|
|
||||||
|
|
||||||
1. [](#new)
|
|
||||||
* Added new primary button mixin
|
|
||||||
1. [](#improved)
|
|
||||||
* Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.1` version
|
|
||||||
* Improved default login styling
|
|
||||||
* Removed core Spectre.css override to make upgrading Spectre easier
|
|
||||||
* Added screenshot to README.md
|
|
||||||
* Override focus to prevent overzealous blue blurs
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Fix for `highlight` plugin not changing background of code blocks
|
|
||||||
* Removed extraneous `dump()` in Twig output
|
|
||||||
|
|
||||||
# v1.0.2
|
|
||||||
## 02/19/2018
|
|
||||||
|
|
||||||
1. [](#new)
|
|
||||||
* Added toggle options to enable Spectre.css _experimentals_ and _icons_ CSS files
|
|
||||||
* Switched to a fork of LineAwesome icons compatible with FontAwesome 4.7.0
|
|
||||||
1. [](#improved)
|
|
||||||
* Font tweaks
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Pagination fixes
|
|
||||||
|
|
||||||
# v1.0.1
|
|
||||||
## 01/22/2018
|
|
||||||
|
|
||||||
1. [](#new)
|
|
||||||
* Added blueprints for admin editing
|
|
||||||
1. [](#improved)
|
|
||||||
* Use default lang from `site.yaml`
|
|
||||||
1. [](#bugfix)
|
|
||||||
* Fixed Current path to address issues with extending Quark
|
|
||||||
* Fixed parallax to start in same position as standard
|
|
||||||
* Fixed modular image size
|
|
||||||
|
|
||||||
# v1.0.0
|
|
||||||
## 12/28/2017
|
|
||||||
|
|
||||||
1. [](#new)
|
|
||||||
* ChangeLog started...
|
|
|
@ -1,21 +0,0 @@
|
||||||
The MIT License (MIT)
|
|
||||||
|
|
||||||
Copyright (c) 2018 Trilby Media
|
|
||||||
|
|
||||||
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.
|
|
|
@ -1,152 +0,0 @@
|
||||||
# Learn4 Theme
|
|
||||||
|
|
||||||
![](assets/learn4-screenshots.jpg)
|
|
||||||
|
|
||||||
**Learn4** is the new default theme for [Grav CMS](http://github.com/getgrav/grav). This theme is built with the [Spectre.css](https://picturepan2.github.io/spectre/) framework and provides a powerful base for developing your own themes. Learn4 uses functionality that is only available in Grav 1.4+, as such you cannot run Learn4 on earlier versions of Grav.
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
* Lightweight and minimal for optimal performance
|
|
||||||
* Spectre CSS Framework
|
|
||||||
* Fully responsive with full-page mobile navigation
|
|
||||||
* SCSS based CSS source files for easy customization
|
|
||||||
* Built-in support for on-page navigation
|
|
||||||
* Multiple page template types
|
|
||||||
* Fontawesome icon support
|
|
||||||
|
|
||||||
### Supported Page Templates
|
|
||||||
|
|
||||||
* Default view template `default.md`
|
|
||||||
* Error view template `error.md`
|
|
||||||
* Blog view template `blog.md`
|
|
||||||
* Blog item view template `item.md`
|
|
||||||
* Modular view templates: `modular.md`
|
|
||||||
* Features Modular view template `features.md`
|
|
||||||
* Hero Modular view template `hero.md`
|
|
||||||
* Text Modular view template `text.md`
|
|
||||||
|
|
||||||
# Installation
|
|
||||||
|
|
||||||
Installing the Learn4 theme can be done in one of two ways. Our GPM (Grav Package Manager) installation method enables you to quickly and easily install the theme with a simple terminal command, while the manual method enables you to do so via a zip file.
|
|
||||||
|
|
||||||
The theme by itself is useful, but you may have an easier time getting up and running by installing a skeleton. The Learn4 theme can be found in both the [One-page](https://github.com/getgrav/grav-skeleton-onepage-site) and [Blog Site](https://github.com/getgrav/grav-skeleton-blog-site) which are self-contained repositories for a complete sites which include: sample content, configuration, theme, and plugins.
|
|
||||||
|
|
||||||
## GPM Installation (Preferred)
|
|
||||||
|
|
||||||
The simplest way to install this theme is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm) through your system's Terminal (also called the command line). From the root of your Grav install type:
|
|
||||||
|
|
||||||
bin/gpm install learn4
|
|
||||||
|
|
||||||
This will install the Learn4 theme into your `/user/themes` directory within Grav. Its files can be found under `/your/site/grav/user/themes/learn4`.
|
|
||||||
|
|
||||||
## Manual Installation
|
|
||||||
|
|
||||||
To install this theme, just download the zip version of this repository and unzip it under `/your/site/grav/user/themes`. Then, rename the folder to `learn4`. You can find these files either on [GitHub](https://github.com/getgrav/grav-theme-learn4) or via [GetGrav.org](http://getgrav.org/downloads/themes).
|
|
||||||
|
|
||||||
You should now have all the theme files under
|
|
||||||
|
|
||||||
/your/site/grav/user/themes/learn4
|
|
||||||
|
|
||||||
## Default Options
|
|
||||||
|
|
||||||
Learn4 comes with a few default options that can be set site-wide. These options are:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
enabled: true # Enable the theme
|
|
||||||
production-mode: true # In production mode, only minified CSS is used. When disabled, nested CSS with sourcemaps are enabled
|
|
||||||
grid-size: grid-lg # The max-width of the theme, options include: `grid-xl`, `grid-lg`, and `grid-md`
|
|
||||||
header-fixed: true # Cause the header to be fixed at the top of the browser
|
|
||||||
header-animated: true # Allows the fixed header to resize to a smaller header when scrolled
|
|
||||||
header-dark: false # Inverts the text/logo to work better on dark backgrounds
|
|
||||||
header-transparent: false # Allows the fixed header to be transparent over the page
|
|
||||||
sticky-footer: true # Causes the footer to be sticky at the bottom of the page
|
|
||||||
blog-page: '/blog' # The route to the blog listing page, useful for a blog style layout with sidebar
|
|
||||||
custom_logo: # A custom logo rather than the default (see below)
|
|
||||||
custom_logo_mobile: # A custom logo to use for mobile navigation
|
|
||||||
```
|
|
||||||
|
|
||||||
To make modifications, you can copy the `user/themes/learn4/learn4.yaml` file to `user/config/themes/` folder and modify, or you can use the admin plugin.
|
|
||||||
|
|
||||||
> NOTE: Do not modify the `user/themes/learn4/learn4.yaml` file directly or your changes will be lost with any updates
|
|
||||||
|
|
||||||
## Custom Logos
|
|
||||||
|
|
||||||
To add a custom logo, you should put the log into the `user/themes/learn4/images/logo` folder. Standard image formats are support (`.png`,`.jpg`, `.gif`, `.svg`, etc.). Then reference the logo via the YAML like so:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
custom_logo:
|
|
||||||
- name: 'my-logo.png'
|
|
||||||
custom_logo_mobile:
|
|
||||||
- name: 'my-mobile-logo.png'
|
|
||||||
```
|
|
||||||
|
|
||||||
Alternatively, you can you use the drag-n-drop "Custom Logo" field in the Learn4 theme options.
|
|
||||||
|
|
||||||
## Page Overrides
|
|
||||||
|
|
||||||
Learn4 has the ability to allow pages to override some of the default options by letting the user set `body_classes` for any page. The theme will merge the combination of the defaults with any `body_classes` set. For example:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
body_classes: "header-dark header-transparent"
|
|
||||||
```
|
|
||||||
|
|
||||||
On a particular page will ensure that page has those options enabled (assuming they are false by default).
|
|
||||||
|
|
||||||
## Hero Options
|
|
||||||
|
|
||||||
The hero template allows some options to be set in the page frontmatter. This is used by the modular `hero` as well as the blog and item templates to provide a more dynamic header.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
hero_classes: text-light title-h1h2 parallax overlay-dark-gradient hero-large
|
|
||||||
hero_image: road.jpg
|
|
||||||
hero_align: center
|
|
||||||
```
|
|
||||||
|
|
||||||
The `hero_classes` option allows a variety of hero classes to be set dynamically these include:
|
|
||||||
|
|
||||||
* `text-light` | `text-dark` - Controls if the text should be light or dark depending on the content
|
|
||||||
* `title-h1h2` - Enforced a close matched h1/h2 title pairing
|
|
||||||
* `parallax` - Enables a CSS-powered parallax effect
|
|
||||||
* `overlay-dark-gradient` - Displays a transparent gradient which further darkens the underlying image
|
|
||||||
* `overlay-light-gradient` - Displays a transparent gradient which further lightens the underlying image
|
|
||||||
* `overlay-dark` - Displays a solid transparent overlay which further darkens the underlying image
|
|
||||||
* `overlay-light` - Displays a solid transparent overlay which further darkens the underlying image
|
|
||||||
* `hero-fullscreen` | `hero-large` | `hero-medium` | `hero-small` | `hero-tiny` - Size of the hero block
|
|
||||||
|
|
||||||
The `hero_image` should point to an image file in the current page folder.
|
|
||||||
|
|
||||||
## Features Modular Options
|
|
||||||
|
|
||||||
The features modular template provides the ability to set a class on the features, as well as an array of feature items. For example:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
class: offset-box
|
|
||||||
features:
|
|
||||||
- header: Crazy Fast
|
|
||||||
text: "Performance is not just an afterthought, we baked it in from the start!"
|
|
||||||
icon: fighter-jet
|
|
||||||
- header: Easy to build
|
|
||||||
text: "Simple text files means Grav is trivial to install, and easy to maintain"
|
|
||||||
icon: database
|
|
||||||
- header: Awesome Technology
|
|
||||||
text: "Grav employs best-in-class technologies such as Twig, Markdown & Yaml"
|
|
||||||
icon: cubes
|
|
||||||
- header: Super Flexible
|
|
||||||
text: "From the ground up, with many plugin hooks, Grav is extremely extensible"
|
|
||||||
icon: object-ungroup
|
|
||||||
- header: Abundant Plugins
|
|
||||||
text: "A vibrant developer community means over 200 themes available to download"
|
|
||||||
icon: puzzle-piece
|
|
||||||
- header: Free / Open Source
|
|
||||||
text: "Grav is an open source project, so you can spend your money on other stuff"
|
|
||||||
icon: money
|
|
||||||
```
|
|
||||||
|
|
||||||
## Text Modular Options
|
|
||||||
|
|
||||||
The text box provides a single option to control if any image found in the page folder should be left or right aligned:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
image_align: right
|
|
||||||
```
|
|
||||||
|
|
|
@ -1,9 +0,0 @@
|
||||||
import $ from 'jquery';
|
|
||||||
|
|
||||||
// History
|
|
||||||
$(document).on('click', '[data-clear-history-toggle]', (event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
window.sessionStorage.clear();
|
|
||||||
window.location.reload();
|
|
||||||
});
|
|
|
@ -1,20 +0,0 @@
|
||||||
import $ from 'jquery';
|
|
||||||
import './utils';
|
|
||||||
import './toc';
|
|
||||||
import './history';
|
|
||||||
import './search';
|
|
||||||
import './nav';
|
|
||||||
|
|
||||||
$(window).on('load', function() {
|
|
||||||
// store this page in session
|
|
||||||
window.sessionStorage.setItem($('body').data('url'), '1');
|
|
||||||
|
|
||||||
// loop through the sessionStorage and see if something should be marked as visited
|
|
||||||
for (let url in window.sessionStorage) {
|
|
||||||
if (window.sessionStorage.getItem(url) === '1') {
|
|
||||||
$(`[data-nav-id="${url}"]`).addClass('visited');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.highlightable').highlight(window.sessionStorage.getItem('search-value'), { element: 'mark' });
|
|
||||||
});
|
|
|
@ -1,19 +0,0 @@
|
||||||
import $ from 'jquery';
|
|
||||||
|
|
||||||
if (window.sessionStorage.getItem('search-value')) {
|
|
||||||
$(document.body).removeClass('searchbox-hidden');
|
|
||||||
$('[data-search-input]').val(sessionStorage.getItem('search-value')).trigger('input');
|
|
||||||
}
|
|
||||||
|
|
||||||
// allow keyboard control for prev/next links
|
|
||||||
$(document).on('click', '.nav-prev, .nav-next', (event) => {
|
|
||||||
const target = $(event.currentTarget);
|
|
||||||
window.location.href = target.attr('href');
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on('keydown', (event) => {
|
|
||||||
const item = event.which === 37 ? $('a.nav-prev') : (event.which === 39 ? $('a.nav-next') : null);
|
|
||||||
if (item) {
|
|
||||||
item.click();
|
|
||||||
}
|
|
||||||
});
|
|
|
@ -1,49 +0,0 @@
|
||||||
import $ from 'jquery';
|
|
||||||
|
|
||||||
let ajax;
|
|
||||||
$(document).on('input', '[data-search-input]', (event) => {
|
|
||||||
const target = $(event.currentTarget);
|
|
||||||
const value = target.val();
|
|
||||||
const items = $('[data-nav-id]');
|
|
||||||
|
|
||||||
items.removeClass('search-match');
|
|
||||||
|
|
||||||
const topics = $('ul.topics');
|
|
||||||
const highlightable = $('.highlightable');
|
|
||||||
if (!value.length) {
|
|
||||||
topics.removeClass('searched');
|
|
||||||
items.css('display', 'block');
|
|
||||||
window.sessionStorage.removeItem('search-value');
|
|
||||||
|
|
||||||
highlightable.unhighlight({ element: 'mark' });
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.sessionStorage.setItem('search-value', value);
|
|
||||||
highlightable.unhighlight({ element: 'mark' }).highlight(value, { element: 'mark' });
|
|
||||||
|
|
||||||
if (ajax && ajax.abort) {
|
|
||||||
ajax.abort();
|
|
||||||
}
|
|
||||||
|
|
||||||
ajax = $.ajax({
|
|
||||||
url: `${target.data('search-input')}:${value}`
|
|
||||||
}).done((data) => {
|
|
||||||
if (data && data.results && data.results.length) {
|
|
||||||
items.css('display', 'none');
|
|
||||||
topics.addClass('searched');
|
|
||||||
data.results.forEach((item) => {
|
|
||||||
const navItem = $(`[data-nav-id="${item}"]`);
|
|
||||||
navItem.css('display', 'block').addClass('search-match');
|
|
||||||
navItem.parents('li').css('display', 'block');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on('click', '[data-search-clear]', () => {
|
|
||||||
$('[data-search-input]').val('').trigger('input');
|
|
||||||
window.sessionStorage.removeItem('search-input');
|
|
||||||
$('.highlightable').unhighlight({ element: 'mark' });
|
|
||||||
});
|
|
|
@ -1,6 +0,0 @@
|
||||||
import $ from 'jquery';
|
|
||||||
|
|
||||||
// TOC
|
|
||||||
$(document).on('click', '.toc-toggle', () => {
|
|
||||||
$('.page-toc').toggleClass('toc-closed');
|
|
||||||
});
|
|
|
@ -1,81 +0,0 @@
|
||||||
import $ from 'jquery';
|
|
||||||
|
|
||||||
$.extend({
|
|
||||||
highlight: function(node, re, nodeName, className) {
|
|
||||||
if (node.nodeType === 3) {
|
|
||||||
const match = node.data.match(re);
|
|
||||||
if (match) {
|
|
||||||
const highlight = document.createElement(nodeName || 'span');
|
|
||||||
highlight.className = className || 'highlight';
|
|
||||||
const wordNode = node.splitText(match.index);
|
|
||||||
wordNode.splitText(match[0].length);
|
|
||||||
const wordClone = wordNode.cloneNode(true);
|
|
||||||
highlight.appendChild(wordClone);
|
|
||||||
wordNode.parentNode.replaceChild(highlight, wordNode);
|
|
||||||
return 1; // skip added node in parent
|
|
||||||
}
|
|
||||||
} else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
|
|
||||||
!/(script|style)/i.test(node.tagName) && // ignore script and style nodes
|
|
||||||
!(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
|
|
||||||
for (let i = 0; i < node.childNodes.length; i++) {
|
|
||||||
i += $.highlight(node.childNodes[i], re, nodeName, className);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$.fn.unhighlight = function(options) {
|
|
||||||
const settings = {
|
|
||||||
className: 'highlight',
|
|
||||||
element: 'span'
|
|
||||||
};
|
|
||||||
|
|
||||||
$.extend(settings, options);
|
|
||||||
|
|
||||||
return this.find(`${settings.element}.${settings.className}`).each(function() {
|
|
||||||
const parent = this.parentNode;
|
|
||||||
parent.replaceChild(this.firstChild, this);
|
|
||||||
parent.normalize();
|
|
||||||
}).end();
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.highlight = function(words, options) {
|
|
||||||
const settings = {
|
|
||||||
className: 'highlight',
|
|
||||||
element: 'span',
|
|
||||||
caseSensitive: false,
|
|
||||||
wordsOnly: false
|
|
||||||
};
|
|
||||||
|
|
||||||
$.extend(settings, options);
|
|
||||||
|
|
||||||
if (!words) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (words.constructor === String) {
|
|
||||||
words = [words];
|
|
||||||
}
|
|
||||||
words = $.grep(words, function(word) {
|
|
||||||
return word !== '';
|
|
||||||
});
|
|
||||||
words = $.map(words, function(word) {
|
|
||||||
return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
|
|
||||||
});
|
|
||||||
if (words.length === 0) {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
const flag = settings.caseSensitive ? '' : 'i';
|
|
||||||
let pattern = `(${words.join('|')})`;
|
|
||||||
if (settings.wordsOnly) {
|
|
||||||
pattern = '\\b' + pattern + '\\b';
|
|
||||||
}
|
|
||||||
|
|
||||||
const re = new RegExp(pattern, flag);
|
|
||||||
|
|
||||||
return this.each(function() {
|
|
||||||
$.highlight(this, re, settings.element, settings.className);
|
|
||||||
});
|
|
||||||
};
|
|
|
@ -1,2 +0,0 @@
|
||||||
import './highlight';
|
|
||||||
import './progress';
|
|
|
@ -1,11 +0,0 @@
|
||||||
const h = document.documentElement;
|
|
||||||
const b = document.body;
|
|
||||||
const st = 'scrollTop';
|
|
||||||
const sh = 'scrollHeight';
|
|
||||||
const progress = document.querySelector('.progress');
|
|
||||||
let scroll;
|
|
||||||
|
|
||||||
document.addEventListener('scroll', function() {
|
|
||||||
scroll = (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
|
|
||||||
progress.style.setProperty('--scroll', scroll + '%');
|
|
||||||
});
|
|
Before Width: | Height: | Size: 193 KiB |
|
@ -1,73 +0,0 @@
|
||||||
name: Learn4
|
|
||||||
version: 2.0.0-rc.1
|
|
||||||
testing: true
|
|
||||||
description: New Grav Default Theme
|
|
||||||
icon: microchip
|
|
||||||
author:
|
|
||||||
name: Team Grav
|
|
||||||
email: devs@getgrav.org
|
|
||||||
url: http://getgrav.org
|
|
||||||
homepage: https://github.com/getgrav/grav-theme-learn4
|
|
||||||
demo: https://demo.getgrav.org/onepage-skeleton
|
|
||||||
keywords: learn4, spectre, theme, core, modern, fast, responsive, html5, css3
|
|
||||||
bugs: https://github.com/getgrav/grav-theme-learn4/issues
|
|
||||||
license: MIT
|
|
||||||
|
|
||||||
dependencies:
|
|
||||||
- { name: grav, version: '>=1.6.0-rc.2' }
|
|
||||||
|
|
||||||
form:
|
|
||||||
validation: loose
|
|
||||||
|
|
||||||
fields:
|
|
||||||
production-mode:
|
|
||||||
type: toggle
|
|
||||||
label: Production mode
|
|
||||||
help: When enabled, Learn4 will render with minified CSS
|
|
||||||
highlight: 1
|
|
||||||
default: 1
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
validate:
|
|
||||||
type: bool
|
|
||||||
|
|
||||||
grid-size:
|
|
||||||
type: select
|
|
||||||
label: Grid size
|
|
||||||
help: The maximum width of the theme
|
|
||||||
size: small
|
|
||||||
options:
|
|
||||||
'': None (full width)
|
|
||||||
grid-xl: Extra Large
|
|
||||||
grid-lg: Large
|
|
||||||
grid-md: Medium
|
|
||||||
|
|
||||||
spectre_section:
|
|
||||||
type: section
|
|
||||||
title: Spectre.css Options
|
|
||||||
underline: true
|
|
||||||
|
|
||||||
spectre.exp:
|
|
||||||
type: toggle
|
|
||||||
label: Experimentals CSS
|
|
||||||
help: When enabled, the `spectre-exp.css` file will be included
|
|
||||||
highlight: 0
|
|
||||||
default: 0
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
validate:
|
|
||||||
type: bool
|
|
||||||
|
|
||||||
spectre.icons:
|
|
||||||
type: toggle
|
|
||||||
label: Icons CSS
|
|
||||||
help: When enabled, the `spectre-icons.css` file will be included
|
|
||||||
highlight: 0
|
|
||||||
default: 0
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
validate:
|
|
||||||
type: bool
|
|
|
@ -1,94 +0,0 @@
|
||||||
extends@: default
|
|
||||||
child_type: item
|
|
||||||
|
|
||||||
rules:
|
|
||||||
slug:
|
|
||||||
pattern: "[a-z][a-z0-9_\-]+"
|
|
||||||
min: 2
|
|
||||||
max: 80
|
|
||||||
|
|
||||||
form:
|
|
||||||
fields:
|
|
||||||
tabs:
|
|
||||||
type: tabs
|
|
||||||
active: 1
|
|
||||||
|
|
||||||
fields:
|
|
||||||
advanced:
|
|
||||||
fields:
|
|
||||||
overrides:
|
|
||||||
fields:
|
|
||||||
header.child_type:
|
|
||||||
default: item
|
|
||||||
blog:
|
|
||||||
type: tab
|
|
||||||
title: Blog Config
|
|
||||||
|
|
||||||
fields:
|
|
||||||
|
|
||||||
content_title:
|
|
||||||
type: spacer
|
|
||||||
title: Content Definition
|
|
||||||
|
|
||||||
header.content.items:
|
|
||||||
type: textarea
|
|
||||||
yaml: true
|
|
||||||
label: Items
|
|
||||||
default: '@self.children'
|
|
||||||
validate:
|
|
||||||
type: yaml
|
|
||||||
|
|
||||||
header.content.limit:
|
|
||||||
type: text
|
|
||||||
label: Max Item Count
|
|
||||||
default: 5
|
|
||||||
validate:
|
|
||||||
required: true
|
|
||||||
type: int
|
|
||||||
min: 1
|
|
||||||
|
|
||||||
header.content.order.by:
|
|
||||||
type: select
|
|
||||||
label: Order By
|
|
||||||
default: date
|
|
||||||
options:
|
|
||||||
folder: Folder
|
|
||||||
title: Title
|
|
||||||
date: Date
|
|
||||||
default: Default
|
|
||||||
|
|
||||||
header.content.order.dir:
|
|
||||||
type: select
|
|
||||||
label: Order
|
|
||||||
default: desc
|
|
||||||
options:
|
|
||||||
asc: Ascending
|
|
||||||
desc: Descending
|
|
||||||
|
|
||||||
header.content.pagination:
|
|
||||||
type: toggle
|
|
||||||
label: Pagination
|
|
||||||
highlight: 1
|
|
||||||
default: 1
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
validate:
|
|
||||||
type: bool
|
|
||||||
|
|
||||||
header.content.url_taxonomy_filters:
|
|
||||||
type: toggle
|
|
||||||
label: URL Taxonomy Filters
|
|
||||||
highlight: 1
|
|
||||||
default: 1
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
validate:
|
|
||||||
type: bool
|
|
||||||
|
|
||||||
import@:
|
|
||||||
type: partials/blog-bits
|
|
||||||
context: blueprints://pages
|
|
||||||
|
|
||||||
|
|
|
@ -1,15 +0,0 @@
|
||||||
extends@: default
|
|
||||||
|
|
||||||
form:
|
|
||||||
fields:
|
|
||||||
tabs:
|
|
||||||
fields:
|
|
||||||
advanced:
|
|
||||||
fields:
|
|
||||||
columns:
|
|
||||||
fields:
|
|
||||||
column1:
|
|
||||||
fields:
|
|
||||||
header.body_classes:
|
|
||||||
markdown: true
|
|
||||||
description: 'Available classes in Quark Theme (space separated):<br />`header-fixed`, `header-animated`, `header-dark`, `header-transparent`, `sticky-footer`'
|
|
|
@ -1,113 +0,0 @@
|
||||||
extends@: default
|
|
||||||
|
|
||||||
form:
|
|
||||||
fields:
|
|
||||||
tabs:
|
|
||||||
|
|
||||||
fields:
|
|
||||||
blog:
|
|
||||||
type: tab
|
|
||||||
title: Blog Item
|
|
||||||
|
|
||||||
fields:
|
|
||||||
|
|
||||||
header_options:
|
|
||||||
type: section
|
|
||||||
title: Header Options
|
|
||||||
underline: true
|
|
||||||
|
|
||||||
header.continue_link:
|
|
||||||
type: toggle
|
|
||||||
toggleable: true
|
|
||||||
label: DF Style Link
|
|
||||||
help: Daring Fireball style title link
|
|
||||||
highlight: 1
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
validate:
|
|
||||||
type: bool
|
|
||||||
|
|
||||||
header.header_image:
|
|
||||||
type: toggle
|
|
||||||
toggleable: true
|
|
||||||
label: Display Header Image
|
|
||||||
help: Enabled displaying of a header image
|
|
||||||
highlight: 1
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
|
|
||||||
header.header_image_file:
|
|
||||||
type: text
|
|
||||||
toggleable: true
|
|
||||||
label: Image File
|
|
||||||
help: image filename that exists in the page folder. If not provided, will use the first image found.
|
|
||||||
placeholder: For example: myimage.jpg
|
|
||||||
|
|
||||||
header.header_image_width:
|
|
||||||
type: text
|
|
||||||
toggleable: true
|
|
||||||
label: Image Width
|
|
||||||
size: small
|
|
||||||
help: Header width in px
|
|
||||||
placeholder: Default is 900
|
|
||||||
validate:
|
|
||||||
type: int
|
|
||||||
min: 0
|
|
||||||
max: 5000
|
|
||||||
|
|
||||||
header.header_image_height:
|
|
||||||
type: text
|
|
||||||
toggleable: true
|
|
||||||
label: Image Height
|
|
||||||
size: small
|
|
||||||
help: Header height in px
|
|
||||||
placeholder: Default is 300
|
|
||||||
validate:
|
|
||||||
type: int
|
|
||||||
min: 0
|
|
||||||
max: 5000
|
|
||||||
|
|
||||||
summary:
|
|
||||||
type: section
|
|
||||||
title: Summary
|
|
||||||
underline: true
|
|
||||||
|
|
||||||
header.summary.enabled:
|
|
||||||
type: toggle
|
|
||||||
toggleable: true
|
|
||||||
label: Summary
|
|
||||||
highlight: 1
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
|
|
||||||
header.summary.format:
|
|
||||||
type: select
|
|
||||||
toggleable: true
|
|
||||||
label: Format
|
|
||||||
classes: fancy
|
|
||||||
options:
|
|
||||||
'short': 'Use the first occurence of delimter or size'
|
|
||||||
'long': 'Summary delimiter will be ignored'
|
|
||||||
|
|
||||||
header.summary.size:
|
|
||||||
type: text
|
|
||||||
toggleable: true
|
|
||||||
label: Size
|
|
||||||
classes: large
|
|
||||||
placeholder: 300
|
|
||||||
validate:
|
|
||||||
type: int
|
|
||||||
min: 1
|
|
||||||
|
|
||||||
header.summary.delimiter:
|
|
||||||
type: text
|
|
||||||
toggleable: true
|
|
||||||
label: Summary delimiter
|
|
||||||
classes: large
|
|
||||||
placeholder: ===
|
|
||||||
|
|
||||||
import@:
|
|
||||||
type: partials/blog-bits
|
|
|
@ -1,38 +0,0 @@
|
||||||
title: Features
|
|
||||||
'@extends': default
|
|
||||||
|
|
||||||
form:
|
|
||||||
fields:
|
|
||||||
tabs:
|
|
||||||
fields:
|
|
||||||
features:
|
|
||||||
type: tab
|
|
||||||
title: Features
|
|
||||||
fields:
|
|
||||||
header.class:
|
|
||||||
type: select
|
|
||||||
label: Layout
|
|
||||||
default: small
|
|
||||||
size: medium
|
|
||||||
options:
|
|
||||||
small: Small = 4 / 3 / 2 columns
|
|
||||||
standard: Standard = 3 / 2 / 1 columns
|
|
||||||
|
|
||||||
header.features:
|
|
||||||
name: features
|
|
||||||
type: list
|
|
||||||
label: Features
|
|
||||||
|
|
||||||
fields:
|
|
||||||
.icon:
|
|
||||||
type: iconpicker
|
|
||||||
label: Icon
|
|
||||||
.header:
|
|
||||||
type: text
|
|
||||||
label: Header
|
|
||||||
.text:
|
|
||||||
type: text
|
|
||||||
label: Text
|
|
||||||
.url:
|
|
||||||
type: text
|
|
||||||
label: Link
|
|
|
@ -1,23 +0,0 @@
|
||||||
title: Hero
|
|
||||||
'@extends': default
|
|
||||||
|
|
||||||
form:
|
|
||||||
fields:
|
|
||||||
tabs:
|
|
||||||
fields:
|
|
||||||
buttons:
|
|
||||||
type: tab
|
|
||||||
title: Hero
|
|
||||||
fields:
|
|
||||||
header.hero_classes:
|
|
||||||
type: text
|
|
||||||
label: Hero Classes
|
|
||||||
markdown: true
|
|
||||||
description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
|
|
||||||
header.hero_image:
|
|
||||||
type: filepicker
|
|
||||||
label: Hero Image
|
|
||||||
preview_images: true
|
|
||||||
description: 'If not specified, this defaults to the first image found in the page''s folder'
|
|
||||||
|
|
||||||
|
|
|
@ -1,19 +0,0 @@
|
||||||
title: Text
|
|
||||||
'@extends': default
|
|
||||||
|
|
||||||
form:
|
|
||||||
fields:
|
|
||||||
tabs:
|
|
||||||
fields:
|
|
||||||
content:
|
|
||||||
fields:
|
|
||||||
header.media_order:
|
|
||||||
label: Page Media (first one will be displayed next to your content)
|
|
||||||
header.image_align:
|
|
||||||
type: select
|
|
||||||
label: Image position
|
|
||||||
classes: fancy
|
|
||||||
default: left
|
|
||||||
options:
|
|
||||||
'left': 'Left'
|
|
||||||
'right': 'Right'
|
|
|
@ -1,64 +0,0 @@
|
||||||
form:
|
|
||||||
fields:
|
|
||||||
|
|
||||||
hero_title:
|
|
||||||
type: spacer
|
|
||||||
title: Hero Section
|
|
||||||
|
|
||||||
header.hero_classes:
|
|
||||||
type: text
|
|
||||||
label: Hero Classes
|
|
||||||
markdown: true
|
|
||||||
description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
|
|
||||||
|
|
||||||
header.hero_image:
|
|
||||||
type: filepicker
|
|
||||||
label: Hero Image
|
|
||||||
preview_images: true
|
|
||||||
description: 'If not specified, this defaults to the first image found in the page''s folder'
|
|
||||||
|
|
||||||
toggles_title:
|
|
||||||
type: spacer
|
|
||||||
title: Configuration
|
|
||||||
|
|
||||||
header.blog_url:
|
|
||||||
type: text
|
|
||||||
toggleable: true
|
|
||||||
label: Blog Route
|
|
||||||
help: The route to the main blog page that contains the "Show ..." configuration
|
|
||||||
default: '/blog'
|
|
||||||
placeholder: '/blog'
|
|
||||||
size: medium
|
|
||||||
|
|
||||||
header.show_sidebar:
|
|
||||||
type: toggle
|
|
||||||
toggleable: true
|
|
||||||
label: Show Sidebar
|
|
||||||
highlight: 1
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
validate:
|
|
||||||
type: bool
|
|
||||||
|
|
||||||
header.show_breadcrumbs:
|
|
||||||
type: toggle
|
|
||||||
toggleable: true
|
|
||||||
label: Show Breadcrumbs
|
|
||||||
highlight: 1
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
validate:
|
|
||||||
type: bool
|
|
||||||
|
|
||||||
header.show_pagination:
|
|
||||||
type: toggle
|
|
||||||
toggleable: true
|
|
||||||
label: Show Pagination
|
|
||||||
highlight: 1
|
|
||||||
options:
|
|
||||||
1: PLUGIN_ADMIN.ENABLED
|
|
||||||
0: PLUGIN_ADMIN.DISABLED
|
|
||||||
validate:
|
|
||||||
type: bool
|
|
|
@ -1,31 +0,0 @@
|
||||||
<?php
|
|
||||||
namespace Grav\Plugin\Shortcodes;
|
|
||||||
|
|
||||||
use Grav\Common\Language\Language;
|
|
||||||
use Thunder\Shortcode\Shortcode\ShortcodeInterface;
|
|
||||||
|
|
||||||
class VersionShortcode extends Shortcode
|
|
||||||
{
|
|
||||||
|
|
||||||
public function init()
|
|
||||||
{
|
|
||||||
$this->shortcode->getHandlers()->add('version', function(ShortcodeInterface $sc) {
|
|
||||||
$lang = $this->getBbCode($sc);
|
|
||||||
|
|
||||||
if ($lang) {
|
|
||||||
$list = explode(',', $lang);
|
|
||||||
array_walk($list, 'trim');
|
|
||||||
|
|
||||||
/** @var Language $language */
|
|
||||||
$language = $this->grav['language'];
|
|
||||||
$current = $language->getLanguage();
|
|
||||||
|
|
||||||
if (in_array($current, $list, true)) {
|
|
||||||
return $sc->getContent();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return '';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
1
themes/learn4/css-compiled/spectre.min.css
vendored
1
themes/learn4/css-compiled/theme.min.css
vendored
|
@ -1,49 +0,0 @@
|
||||||
.bricklayer {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-align: start;
|
|
||||||
-webkit-align-items: flex-start;
|
|
||||||
-ms-flex-align: start;
|
|
||||||
align-items: flex-start;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
-webkit-flex-wrap: wrap;
|
|
||||||
-ms-flex-wrap: wrap;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bricklayer-column-sizer {
|
|
||||||
width: 100%;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 640px) {
|
|
||||||
.bricklayer-column-sizer {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 980px) {
|
|
||||||
.bricklayer-column-sizer {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*@media screen and (min-width: 1200px) {*/
|
|
||||||
/*.bricklayer-column-sizer {*/
|
|
||||||
/*width: 33.33333%;*/
|
|
||||||
/*}*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
.bricklayer-column {
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
-webkit-flex: 1;
|
|
||||||
-ms-flex: 1;
|
|
||||||
flex: 1;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
12
themes/learn4/css/fork-awesome.min.css
vendored
Before Width: | Height: | Size: 470 KiB |
|
@ -1,43 +0,0 @@
|
||||||
var gulp = require('gulp');
|
|
||||||
var sass = require('gulp-sass');
|
|
||||||
var cleancss = require('gulp-clean-css');
|
|
||||||
var csscomb = require('gulp-csscomb');
|
|
||||||
var rename = require('gulp-rename');
|
|
||||||
var autoprefixer = require('gulp-autoprefixer');
|
|
||||||
var sourcemaps = require('gulp-sourcemaps');
|
|
||||||
|
|
||||||
// configure the paths
|
|
||||||
var watch_dir = './scss/**/*.scss';
|
|
||||||
var src_dir = './scss/*.scss';
|
|
||||||
var dest_dir = './css-compiled';
|
|
||||||
|
|
||||||
var paths = {
|
|
||||||
source: src_dir
|
|
||||||
};
|
|
||||||
|
|
||||||
function watch() {
|
|
||||||
return gulp.watch(watch_dir, build);
|
|
||||||
}
|
|
||||||
|
|
||||||
function build() {
|
|
||||||
return gulp.src(paths.source)
|
|
||||||
.pipe(sourcemaps.init())
|
|
||||||
.pipe(sass({
|
|
||||||
outputStyle: 'compact',
|
|
||||||
precision: 10
|
|
||||||
}).on('error', sass.logError)
|
|
||||||
)
|
|
||||||
.pipe(sourcemaps.write())
|
|
||||||
.pipe(autoprefixer())
|
|
||||||
.pipe(gulp.dest(dest_dir))
|
|
||||||
.pipe(csscomb())
|
|
||||||
.pipe(cleancss())
|
|
||||||
.pipe(rename({
|
|
||||||
suffix: '.min'
|
|
||||||
}))
|
|
||||||
.pipe(gulp.dest(dest_dir));
|
|
||||||
}
|
|
||||||
|
|
||||||
exports.watch = watch;
|
|
||||||
exports.build = build;
|
|
||||||
exports.default = build;
|
|
Before Width: | Height: | Size: 13 KiB |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" viewBox="0 0 504 140" clip-rule="evenodd"><path d="M235.83 71.56h-7.98c-1.2 0-2.2 1-2.2 2.2V89.1l-.15.13c-4.7 3.96-10.64 6.14-16.72 6.14-14.36 0-26.04-11.68-26.04-26.04s11.68-26.04 26.04-26.04c5.58 0 10.92 1.76 15.44 5.1.87.66 2.1.57 2.86-.2l5.7-5.7c.44-.44.67-1.05.63-1.68-.02-.62-.32-1.2-.82-1.6-6.76-5.35-15.2-8.3-23.8-8.3-21.18 0-38.42 17.23-38.42 38.4 0 21.2 17.24 38.42 38.42 38.42 10.93 0 21.4-4.7 28.7-12.9.35-.4.55-.93.55-1.47v-19.6c0-1.22-.98-2.2-2.2-2.2M502.8 34.44c-.4-.6-1.1-.98-1.84-.98h-8.7c-.87 0-1.66.52-2 1.32l-24.5 56.84-24.9-56.85c-.36-.8-1.15-1.3-2.02-1.3h-8.72c-.74 0-1.44.36-1.84.98-.4.62-.48 1.4-.17 2.1l30.2 68.85c.34.8 1.13 1.32 2 1.32h11c.88 0 1.67-.53 2.02-1.33l29.66-68.87c.3-.68.22-1.47-.2-2.1"/><path d="M388.68 34.77c-.35-.8-1.14-1.32-2-1.32h-11c-.88 0-1.67.53-2.02 1.33L344 103.64c-.3.68-.22 1.47.18 2.08.4.62 1.1 1 1.84 1h8.7c.86 0 1.66-.53 2-1.33l24.5-56.86 24.9 56.86c.36.8 1.15 1.32 2.02 1.32h8.72c.74 0 1.44-.38 1.84-1 .4-.62.47-1.4.17-2.1l-30.2-68.85zM309.2 81.52l.47-.22c8.68-4.2 14.28-13.1 14.28-22.67 0-13.88-11.3-25.18-25.17-25.18H266.9c-1.2 0-2.2 1-2.2 2.2v68.86c0 1.23 1 2.22 2.2 2.22h8c1.2 0 2.2-1 2.2-2.2V45.8h21.68c7.05 0 12.8 5.75 12.8 12.8 0 5.9-4 11-9.73 12.42-1.04.26-2.07.4-3.07.4h-7.98c-.83 0-1.6.46-1.96 1.2-.38.73-.3 1.62.2 2.3l22.6 30.87c.42.58 1.08.92 1.78.92h9.9c.84 0 1.6-.47 1.97-1.2.37-.75.3-1.64-.2-2.3l-15.9-21.7zM107.2 80.97c-7.26-4.8-11.4-8.85-15.02-16.1-2.47 4.97-8.24 12.37-17.96 18.2-4.86 15.1-27.96 44-35.43 39.9-2.22-1.2-2.64-2.8-2.15-4.45.54-4.13 9.08-13.62 9.08-13.62s.18 2 2.92 6.18c-3.6-11.2 5.96-25.03 8.5-29.73 3.98-1.27 4.27-6.4 4.27-6.4.26-7.9-3.28-13.63-6.7-17.05 2.46 3 3.25 7.54 3.37 11.7v.02c0 .47 0 .93 0 1.4-.12 3.43-1.16 8.18-3.38 8.18v.03c-2.28-.1-5.1.4-7.63 1.18l-5.6 1.34s2.98-.13 4.6 1.25c-1.8 2.9-5.78 6.53-10.22 8.58-6.45 3-8.3-2.96-5.03-6.84.8-.94 1.62-1.74 2.38-2.4-.5-.5-.8-1.2-.88-2.06 0 0 0 0 0-.02-.46-1.97-.2-4.54 2.6-8.62.54-.86 1.2-1.75 2-2.65.02-.04.04-.07.07-.1.03-.04.07-.08.1-.12.02-.02.04-.04.06-.06.2-.23.42-.45.64-.67 3.34-3.4 8.6-6.96 16.9-10.15C64.4 43.68 67.94 41 67.94 41c1.07-1.1 2.94-2.45 3.63-2.8-5.05-8.77-6.07-21.15-4.75-24.5-.1.2-.2.38-.3.57.5-1.14.83-1.5 1.34-2.1 1.38-1.64 6.06-2.5 7.74.96.9 1.84 1.06 4.23 1.03 6.02-3.7-.2-7.06 4.04-7.06 4.04s3.07-1.46 6.88-1.5c0 0 1 .9 2.28 2.56-1.7 3.2-4.52 10.02-2.5 17.16.35 1.4.86 2.62 1.5 3.65.02.05.04.1.07.14.05.07.1.13.14.2 3.37 5.06 9.54 5.66 9.54 5.66-2.9-1.45-5.27-3.76-6.8-6.56-.82-1.5-1.3-2.77-1.6-3.77-1.64-6.3.77-10 2.14-12.47 3.17-4.9 8.95-7.9 15.15-7.18 8.72 1 14.97 8.86 13.98 17.57-.6 5.32-3.78 9.72-8.15 12.12 1.05 2.84-.07 6.28-.07 6.28 2.64 3.32 2.76 5.23 2.67 7-3.36-.55-6.62 1.7-6.62 1.7s6.48-1.53 10.24 1.82c2.44 2.64 4.08 5 5.05 6.77 1.4 2.5 7.86 2.68 7.12 7.2-.74 4.5-5.68 4.53-13.4-.57M69.56 0C31.15 0 0 31.15 0 69.57c0 38.42 31.15 69.57 69.57 69.57 38.42 0 69.57-31.15 69.57-69.57C139.14 31.15 108 0 69.57 0M73.8 51.7c.8-.82.8-2.14 0-2.95-.82-.82-2.14-.82-2.95 0-.82.8-.82 2.13 0 2.94.8.8 2.13.8 2.95 0M66.45 53.15c-.82.8-.82 2.13 0 2.95.8.8 2.13.8 2.94 0 .8-.82.8-2.14 0-2.95-.82-.8-2.14-.8-2.95 0"/><path d="M79.23 54.23c-1.27-1.27-3.34-1.27-4.6 0l-2.72 2.7c-1.27 1.3-1.27 3.35 0 4.63l3 2.97c1.26 1.28 3.32 1.28 4.6 0l2.7-2.7c1.28-1.28 1.28-3.35 0-4.62l-2.97-2.97zM95.76 41.44c-2.15-2.57 1.87-7.25 4.4-4.46 4.64 5.15-2.25 7.04-4.4 4.46m9.24 2.7c3.45-6.56-1.42-10.4-4.77-13.53-5.36-5.03-10.7-7.2-16.8-.23-6.1 6.98-2.24 15.07 3.35 19.06 5.58 4 14.78 1.25 18.22-5.3"/></svg>
|
|
Before Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 17 KiB |
|
@ -1,9 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="256px" height="215px" viewBox="0 0 256 215" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
|
||||||
<g>
|
|
||||||
<path d="M114.25873,2.70101695 L18.8604023,42.1756384 C13.5552723,44.3711638 13.6102328,51.9065311 18.9486282,54.0225085 L114.746142,92.0117514 C123.163769,95.3498757 132.537419,95.3498757 140.9536,92.0117514 L236.75256,54.0225085 C242.08951,51.9065311 242.145916,44.3711638 236.83934,42.1756384 L141.442459,2.70101695 C132.738459,-0.900338983 122.961284,-0.900338983 114.25873,2.70101695" fill="#FFBF00"></path>
|
|
||||||
<path d="M136.349071,112.756863 L136.349071,207.659101 C136.349071,212.173089 140.900664,215.263892 145.096461,213.600615 L251.844122,172.166219 C254.281184,171.200072 255.879376,168.845451 255.879376,166.224705 L255.879376,71.3224678 C255.879376,66.8084791 251.327783,63.7176768 247.131986,65.3809537 L140.384325,106.815349 C137.94871,107.781496 136.349071,110.136118 136.349071,112.756863" fill="#26B5F8"></path>
|
|
||||||
<path d="M111.422771,117.65355 L79.742409,132.949912 L76.5257763,134.504714 L9.65047684,166.548104 C5.4112904,168.593211 0.000578531073,165.503855 0.000578531073,160.794612 L0.000578531073,71.7210757 C0.000578531073,70.0173017 0.874160452,68.5463864 2.04568588,67.4384994 C2.53454463,66.9481944 3.08848814,66.5446689 3.66412655,66.2250305 C5.26231864,65.2661153 7.54173107,65.0101153 9.47981017,65.7766689 L110.890522,105.957098 C116.045234,108.002206 116.450206,115.225166 111.422771,117.65355" fill="#ED3049"></path>
|
|
||||||
<path d="M111.422771,117.65355 L79.742409,132.949912 L2.04568588,67.4384994 C2.53454463,66.9481944 3.08848814,66.5446689 3.66412655,66.2250305 C5.26231864,65.2661153 7.54173107,65.0101153 9.47981017,65.7766689 L110.890522,105.957098 C116.045234,108.002206 116.450206,115.225166 111.422771,117.65355" fill-opacity="0.25" fill="#000000"></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 152 KiB |
|
@ -1,37 +0,0 @@
|
||||||
!function(a){var n={};function r(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return a[e].call(t.exports,t,t.exports,r),t.l=!0,t.exports}r.m=a,r.c=n,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)r.d(a,n,function(e){return t[e]}.bind(null,n));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s="./app/main.js")}({"./app/history.js":
|
|
||||||
/*!************************!*\
|
|
||||||
!*** ./app/history.js ***!
|
|
||||||
\************************/
|
|
||||||
/*! no static exports found */function(e,t,a){"use strict";var n,r=a(/*! jquery */"jquery");(0,((n=r)&&n.__esModule?n:{default:n}).default)(document).on("click","[data-clear-history-toggle]",function(e){e.preventDefault(),window.sessionStorage.clear(),window.location.reload()})},"./app/main.js":
|
|
||||||
/*!*********************!*\
|
|
||||||
!*** ./app/main.js ***!
|
|
||||||
\*********************/
|
|
||||||
/*! no static exports found */function(e,t,a){"use strict";var n,r=a(/*! jquery */"jquery"),i=(n=r)&&n.__esModule?n:{default:n};a(/*! ./utils */"./app/utils/index.js"),a(/*! ./toc */"./app/toc.js"),a(/*! ./history */"./app/history.js"),a(/*! ./search */"./app/search.js"),a(/*! ./nav */"./app/nav.js"),(0,i.default)(window).on("load",function(){for(var e in window.sessionStorage.setItem((0,i.default)("body").data("url"),"1"),window.sessionStorage)"1"===window.sessionStorage.getItem(e)&&(0,i.default)('[data-nav-id="'+e+'"]').addClass("visited");(0,i.default)(".highlightable").highlight(window.sessionStorage.getItem("search-value"),{element:"mark"})})},"./app/nav.js":
|
|
||||||
/*!********************!*\
|
|
||||||
!*** ./app/nav.js ***!
|
|
||||||
\********************/
|
|
||||||
/*! no static exports found */function(e,t,a){"use strict";var n,r=a(/*! jquery */"jquery"),i=(n=r)&&n.__esModule?n:{default:n};window.sessionStorage.getItem("search-value")&&((0,i.default)(document.body).removeClass("searchbox-hidden"),(0,i.default)("[data-search-input]").val(sessionStorage.getItem("search-value")).trigger("input")),(0,i.default)(document).on("click",".nav-prev, .nav-next",function(e){var t=(0,i.default)(e.currentTarget);window.location.href=t.attr("href")}),(0,i.default)(document).on("keydown",function(e){var t=37===e.which?(0,i.default)("a.nav-prev"):39===e.which?(0,i.default)("a.nav-next"):null;t&&t.click()})},"./app/search.js":
|
|
||||||
/*!***********************!*\
|
|
||||||
!*** ./app/search.js ***!
|
|
||||||
\***********************/
|
|
||||||
/*! no static exports found */function(e,t,a){"use strict";var n,r=a(/*! jquery */"jquery"),s=(n=r)&&n.__esModule?n:{default:n};var l=void 0;(0,s.default)(document).on("input","[data-search-input]",function(e){var t=(0,s.default)(e.currentTarget),a=t.val(),n=(0,s.default)("[data-nav-id]");n.removeClass("search-match");var r=(0,s.default)("ul.topics"),i=(0,s.default)(".highlightable");if(!a.length)return r.removeClass("searched"),n.css("display","block"),window.sessionStorage.removeItem("search-value"),void i.unhighlight({element:"mark"});window.sessionStorage.setItem("search-value",a),i.unhighlight({element:"mark"}).highlight(a,{element:"mark"}),l&&l.abort&&l.abort(),l=s.default.ajax({url:t.data("search-input")+":"+a}).done(function(e){e&&e.results&&e.results.length&&(n.css("display","none"),r.addClass("searched"),e.results.forEach(function(e){var t=(0,s.default)('[data-nav-id="'+e+'"]');t.css("display","block").addClass("search-match"),t.parents("li").css("display","block")}))})}),(0,s.default)(document).on("click","[data-search-clear]",function(){(0,s.default)("[data-search-input]").val("").trigger("input"),window.sessionStorage.removeItem("search-input"),(0,s.default)(".highlightable").unhighlight({element:"mark"})})},"./app/toc.js":
|
|
||||||
/*!********************!*\
|
|
||||||
!*** ./app/toc.js ***!
|
|
||||||
\********************/
|
|
||||||
/*! no static exports found */function(e,t,a){"use strict";var n,r=a(/*! jquery */"jquery"),i=(n=r)&&n.__esModule?n:{default:n};(0,i.default)(document).on("click",".toc-toggle",function(){(0,i.default)(".page-toc").toggleClass("toc-closed")})},"./app/utils/highlight.js":
|
|
||||||
/*!********************************!*\
|
|
||||||
!*** ./app/utils/highlight.js ***!
|
|
||||||
\********************************/
|
|
||||||
/*! no static exports found */function(e,t,a){"use strict";var n,r=a(/*! jquery */"jquery"),u=(n=r)&&n.__esModule?n:{default:n};u.default.extend({highlight:function(e,t,a,n){if(3===e.nodeType){var r=e.data.match(t);if(r){var i=document.createElement(a||"span");i.className=n||"highlight";var s=e.splitText(r.index);s.splitText(r[0].length);var l=s.cloneNode(!0);return i.appendChild(l),s.parentNode.replaceChild(i,s),1}}else if(1===e.nodeType&&e.childNodes&&!/(script|style)/i.test(e.tagName)&&(e.tagName!==a.toUpperCase()||e.className!==n))for(var o=0;o<e.childNodes.length;o++)o+=u.default.highlight(e.childNodes[o],t,a,n);return 0}}),u.default.fn.unhighlight=function(e){var t={className:"highlight",element:"span"};return u.default.extend(t,e),this.find(t.element+"."+t.className).each(function(){var e=this.parentNode;e.replaceChild(this.firstChild,this),e.normalize()}).end()},u.default.fn.highlight=function(e,t){var a={className:"highlight",element:"span",caseSensitive:!1,wordsOnly:!1};if(u.default.extend(a,t),e){if(e.constructor===String&&(e=[e]),e=u.default.grep(e,function(e){return""!==e}),0===(e=u.default.map(e,function(e){return e.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&")})).length)return this;var n=a.caseSensitive?"":"i",r="("+e.join("|")+")";a.wordsOnly&&(r="\\b"+r+"\\b");var i=new RegExp(r,n);return this.each(function(){u.default.highlight(this,i,a.element,a.className)})}}},"./app/utils/index.js":
|
|
||||||
/*!****************************!*\
|
|
||||||
!*** ./app/utils/index.js ***!
|
|
||||||
\****************************/
|
|
||||||
/*! no static exports found */function(e,t,a){"use strict";a(/*! ./highlight */"./app/utils/highlight.js"),a(/*! ./progress */"./app/utils/progress.js")},"./app/utils/progress.js":
|
|
||||||
/*!*******************************!*\
|
|
||||||
!*** ./app/utils/progress.js ***!
|
|
||||||
\*******************************/
|
|
||||||
/*! no static exports found */function(e,t,a){"use strict";var n=document.documentElement,r=document.body,i="scrollTop",s="scrollHeight",l=document.querySelector(".progress"),o=void 0;document.addEventListener("scroll",function(){o=(n[i]||r[i])/((n[s]||r[s])-n.clientHeight)*100,l.style.setProperty("--scroll",o+"%")})},jquery:
|
|
||||||
/*!*************************!*\
|
|
||||||
!*** external "jQuery" ***!
|
|
||||||
\*************************/
|
|
||||||
/*! no static exports found */function(e,t){e.exports=jQuery}});
|
|
|
@ -1,41 +0,0 @@
|
||||||
en:
|
|
||||||
THEME_LEARN4_GITHUB_EDIT: Edit
|
|
||||||
THEME_LEARN4_GITHUB_NOTE: "Found errors? Think you can improve this documentation? Simply click the <strong><i class=\"fa fa-pencil-square\"></i> Edit</strong> link at the top of the page, and then the <strong><i class=\"fa fa-pencil\"></i></strong> icon on Github to make your changes."
|
|
||||||
THEME_LEARN4_CLEAR_HISTORY: Clear History
|
|
||||||
THEME_LEARN4_BUILT_WITH_GRAV: Built with <a href="http://getgrav.org">Grav</a> - The Modern Flat File CMS
|
|
||||||
THEME_LEARN4_SEARCH_DOCUMENTATION: Search...
|
|
||||||
cn:
|
|
||||||
THEME_LEARN4_GITHUB_NOTE: 发现错误?请帮忙改进,谢谢!
|
|
||||||
THEME_LEARN4_CLEAR_HISTORY: 清除历史
|
|
||||||
THEME_LEARN4_BUILT_WITH_GRAV: Built with <a href="http://getgrav.org">Grav</a> - The Modern Flat File CMS
|
|
||||||
THEME_LEARN4_SEARCH_DOCUMENTATION: 搜索文档
|
|
||||||
cs:
|
|
||||||
THEME_LEARN4_GITHUB_NOTE: Našli jste chybu? Myslíte, že můžete vylepšit tuto dokumentaci?
|
|
||||||
THEME_LEARN4_CLEAR_HISTORY: Smazat historii
|
|
||||||
THEME_LEARN4_BUILT_WITH_GRAV: Postaveno na <a href="http://getgrav.org">Grav</a> - Moderní správce obsahu pomocí souborů prostých textů
|
|
||||||
THEME_LEARN4_SEARCH_DOCUMENTATION: Vyhledat v dokumentaci
|
|
||||||
de:
|
|
||||||
THEME_LEARN4_GITHUB_NOTE: Fehler gefunden? Möchten Sie diese Seite verbessern?
|
|
||||||
THEME_LEARN4_CLEAR_HISTORY: Verlauf löschen
|
|
||||||
THEME_LEARN4_BUILT_WITH_GRAV: Seite erstellt mit <a href="http://getgrav.org">Grav</a> - The Modern Flat File CMS
|
|
||||||
THEME_LEARN4_SEARCH_DOCUMENTATION: Dokumentation durchsuchen
|
|
||||||
es:
|
|
||||||
THEME_LEARN4_GITHUB_NOTE: ¿Encontraste errores? ¿Crees que puedes mejorar esta documentación?
|
|
||||||
THEME_LEARN4_CLEAR_HISTORY: Limpiar historial
|
|
||||||
THEME_LEARN4_BUILT_WITH_GRAV: Hecho con <a href="http://getgrav.org">Grav</a> - El CMS moderno de archivos planos
|
|
||||||
THEME_LEARN4_SEARCH_DOCUMENTATION: Buscar en la documentación
|
|
||||||
fr:
|
|
||||||
THEME_LEARN4_GITHUB_NOTE: Vous avez découvert des erreurs ? Vous pensez pouvoir améliorer cette documentation ?
|
|
||||||
THEME_LEARN4_CLEAR_HISTORY: Effacer l'historique
|
|
||||||
THEME_LEARN4_BUILT_WITH_GRAV: Créé avec <a href="http://getgrav.org">Grav</a> - Le CMS moderne sans base de données
|
|
||||||
THEME_LEARN4_SEARCH_DOCUMENTATION: Rechercher dans la documentation
|
|
||||||
it:
|
|
||||||
THEME_LEARN4_GITHUB_NOTE: Hai trovato degli errori? Pensi di poter migliorare questa documentazione?
|
|
||||||
THEME_LEARN4_CLEAR_HISTORY: Cancella Cronologia
|
|
||||||
THEME_LEARN4_BUILT_WITH_GRAV: Built with <a href="http://getgrav.org">Grav</a> - The Modern Flat File CMS
|
|
||||||
THEME_LEARN4_SEARCH_DOCUMENTATION: Cerca nella Documentatione
|
|
||||||
ru:
|
|
||||||
THEME_LEARN4_GITHUB_NOTE: Нашли ошибки? Думаете, что можете улучшить документацию?
|
|
||||||
THEME_LEARN4_CLEAR_HISTORY: Очистить историю
|
|
||||||
THEME_LEARN4_BUILT_WITH_GRAV: Сделано на <a href="http://getgrav.org">Grav</a> — современной файловой CMS
|
|
||||||
THEME_LEARN4_SEARCH_DOCUMENTATION: Поиск по документации
|
|
|
@ -1,81 +0,0 @@
|
||||||
<?php
|
|
||||||
namespace Grav\Theme;
|
|
||||||
|
|
||||||
use Grav\Common\Theme;
|
|
||||||
use Grav\Plugin\ShortcodeManager;
|
|
||||||
use Grav\Theme\Learn4\Shortcodes\VersionShortcode;
|
|
||||||
use Pimple\Exception\UnknownIdentifierException;
|
|
||||||
use RocketTheme\Toolbox\Event\Event;
|
|
||||||
|
|
||||||
class Learn4 extends Theme
|
|
||||||
{
|
|
||||||
public static function getSubscribedEvents(): array
|
|
||||||
{
|
|
||||||
return [
|
|
||||||
'onShortcodeHandlers' => ['onShortcodeHandlers', 0],
|
|
||||||
'onTwigInitialized' => ['onTwigInitialized', 0],
|
|
||||||
'onTwigPageVariables' => ['onTwigPageVariables', 0],
|
|
||||||
'onTNTSearchQuery' => ['onTNTSearchQuery', 1000],
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
public function onTwigPageVariables()
|
|
||||||
{
|
|
||||||
$this->grav['twig']->twig_vars['grav_version'] = GRAV_VERSION;
|
|
||||||
}
|
|
||||||
|
|
||||||
public function onTNTSearchQuery(Event $e): void
|
|
||||||
{
|
|
||||||
$query = $this->grav['uri']->param('q');
|
|
||||||
|
|
||||||
if ($query) {
|
|
||||||
$page = $e['page'];
|
|
||||||
$fields = $e['fields'];
|
|
||||||
|
|
||||||
$fields->results[] = $page->route();
|
|
||||||
$e->stopPropagation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public function onShortcodeHandlers(): void
|
|
||||||
{
|
|
||||||
/** @var ShortcodeManager $sc */
|
|
||||||
$sc = $this->grav['shortcode'];
|
|
||||||
$sc->registerAllShortcodes(__DIR__ . '/classes/Shortcodes');
|
|
||||||
}
|
|
||||||
|
|
||||||
public function onTwigInitialized(): void
|
|
||||||
{
|
|
||||||
$twig = $this->grav['twig'];
|
|
||||||
|
|
||||||
$form_class_variables = [
|
|
||||||
// 'form_outer_classes' => 'form-horizontal',
|
|
||||||
'form_button_outer_classes' => 'button-wrapper',
|
|
||||||
'form_button_classes' => 'btn',
|
|
||||||
'form_errors_classes' => '',
|
|
||||||
'form_field_outer_classes' => 'form-group',
|
|
||||||
'form_field_outer_label_classes' => 'form-label-wrapper',
|
|
||||||
'form_field_label_classes' => 'form-label',
|
|
||||||
// 'form_field_outer_data_classes' => 'col-9',
|
|
||||||
'form_field_input_classes' => 'form-input',
|
|
||||||
'form_field_textarea_classes' => 'form-input',
|
|
||||||
'form_field_select_classes' => 'form-select',
|
|
||||||
'form_field_radio_classes' => 'form-radio',
|
|
||||||
'form_field_checkbox_classes' => 'form-checkbox',
|
|
||||||
];
|
|
||||||
|
|
||||||
$twig->twig_vars = array_merge($twig->twig_vars, $form_class_variables);
|
|
||||||
|
|
||||||
$color = $this->grav['uri']->query('color');
|
|
||||||
|
|
||||||
if (in_array($color, ['purple', 'green', 'blue', 'contrast'])) {
|
|
||||||
setcookie("sidebar-pref", $color, 0, '/');
|
|
||||||
} else {
|
|
||||||
$color = filter_input(INPUT_COOKIE, 'sidebar-pref') ?: 'purple';
|
|
||||||
}
|
|
||||||
|
|
||||||
$twig->twig_vars['sidebar_color'] = "sidebar-$color";
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -1,11 +0,0 @@
|
||||||
enabled: true
|
|
||||||
production-mode: false
|
|
||||||
grid-size: grid-lg
|
|
||||||
github:
|
|
||||||
note: true
|
|
||||||
link: true
|
|
||||||
tree: https://github.com/getgrav/grav-learn/blob/develop/
|
|
||||||
commits: https://github.com/getgrav/grav-learn/commits/develop/
|
|
||||||
spectre:
|
|
||||||
exp: false
|
|
||||||
icons: false
|
|
|
@ -1,46 +0,0 @@
|
||||||
{
|
|
||||||
"name": "Learn4",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"main": "app/main.js",
|
|
||||||
"author": "Team Grav",
|
|
||||||
"license": "MIT",
|
|
||||||
"scripts": {
|
|
||||||
"watch": "NODE_ENV=development webpack --watch --progress --colors --mode development --config webpack.conf.js",
|
|
||||||
"dev": "NODE_ENV=development webpack --progress --colors --config webpack.conf.js",
|
|
||||||
"prod": "NODE_ENV=production-wip webpack --mode development --config webpack.conf.js"
|
|
||||||
},
|
|
||||||
"dependencies": {},
|
|
||||||
"devDependencies": {
|
|
||||||
"babel-core": "^6.26.3",
|
|
||||||
"babel-eslint": "^8.2.6",
|
|
||||||
"babel-loader": "^7.1.5",
|
|
||||||
"babel-polyfill": "^6.26.0",
|
|
||||||
"babel-preset-es2015": "^6.24.1",
|
|
||||||
"babel-preset-stage-3": "^6.24.1",
|
|
||||||
"css-loader": "^1.0.0",
|
|
||||||
"eslint": "^5.2.0",
|
|
||||||
"eslint-loader": "^2.1.0",
|
|
||||||
"exports-loader": "^0.7.0",
|
|
||||||
"gulp": "^4.0.0",
|
|
||||||
"gulp-autoprefixer": "^6.0.0",
|
|
||||||
"gulp-clean-css": "^3.9.4",
|
|
||||||
"gulp-csscomb": "^3.0.8",
|
|
||||||
"gulp-rename": "^1.3.0",
|
|
||||||
"gulp-sass": "^4.0.1",
|
|
||||||
"gulp-sourcemaps": "^2.6.4",
|
|
||||||
"imports-loader": "^0.8.0",
|
|
||||||
"json-loader": "^0.5.7",
|
|
||||||
"style-loader": "^0.21.0",
|
|
||||||
"uglifyjs-webpack-plugin": "^2.1.1",
|
|
||||||
"webpack": "^4.16.2",
|
|
||||||
"webpack-cli": "^3.1.0"
|
|
||||||
},
|
|
||||||
"browserslist": [
|
|
||||||
"last 4 Chrome versions",
|
|
||||||
"Edge >= 12",
|
|
||||||
"Firefox ESR",
|
|
||||||
"last 4 Safari versions",
|
|
||||||
"last 4 Opera versions",
|
|
||||||
"Explorer >= 10"
|
|
||||||
]
|
|
||||||
}
|
|
Before Width: | Height: | Size: 156 KiB |
|
@ -1,19 +0,0 @@
|
||||||
// Variables and mixins
|
|
||||||
@import "theme/variables";
|
|
||||||
@import "spectre/variables";
|
|
||||||
@import "spectre/mixins";
|
|
||||||
|
|
||||||
/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
|
|
||||||
// Experimentals
|
|
||||||
@import "spectre/autocomplete";
|
|
||||||
@import "spectre/calendars";
|
|
||||||
@import "spectre/carousels";
|
|
||||||
@import "spectre/comparison-sliders";
|
|
||||||
@import "spectre/filters";
|
|
||||||
@import "spectre/meters";
|
|
||||||
@import "spectre/off-canvas";
|
|
||||||
@import "spectre/parallax";
|
|
||||||
@import "spectre/progress";
|
|
||||||
@import "spectre/sliders";
|
|
||||||
@import "spectre/timelines";
|
|
||||||
@import "spectre/viewer-360";
|
|
|
@ -1,11 +0,0 @@
|
||||||
// Variables and mixins
|
|
||||||
@import "theme/variables";
|
|
||||||
@import "spectre/variables";
|
|
||||||
@import "spectre/mixins";
|
|
||||||
|
|
||||||
/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
|
|
||||||
// Icons
|
|
||||||
@import "spectre/icons/icons-core";
|
|
||||||
@import "spectre/icons/icons-navigation";
|
|
||||||
@import "spectre/icons/icons-action";
|
|
||||||
@import "spectre/icons/icons-object";
|
|
|
@ -1,55 +0,0 @@
|
||||||
// Variables and mixins
|
|
||||||
@import "theme/variables";
|
|
||||||
@import "spectre/variables";
|
|
||||||
@import "spectre/mixins";
|
|
||||||
|
|
||||||
/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
|
|
||||||
// Reset and dependencies
|
|
||||||
@import "spectre/normalize";
|
|
||||||
@import "spectre/base";
|
|
||||||
|
|
||||||
// Elements
|
|
||||||
@import "spectre/typography";
|
|
||||||
@import "spectre/asian";
|
|
||||||
@import "spectre/tables";
|
|
||||||
@import "spectre/buttons";
|
|
||||||
@import "spectre/forms";
|
|
||||||
@import "spectre/labels";
|
|
||||||
@import "spectre/codes";
|
|
||||||
@import "spectre/media";
|
|
||||||
|
|
||||||
// Layout
|
|
||||||
@import "spectre/layout";
|
|
||||||
@import "spectre/hero";
|
|
||||||
@import "spectre/navbar";
|
|
||||||
|
|
||||||
// Components
|
|
||||||
@import "spectre/accordions";
|
|
||||||
@import "spectre/avatars";
|
|
||||||
@import "spectre/badges";
|
|
||||||
@import "spectre/breadcrumbs";
|
|
||||||
@import "spectre/bars";
|
|
||||||
@import "spectre/cards";
|
|
||||||
@import "spectre/chips";
|
|
||||||
@import "spectre/dropdowns";
|
|
||||||
@import "spectre/empty";
|
|
||||||
@import "spectre/menus";
|
|
||||||
@import "spectre/modals";
|
|
||||||
@import "spectre/navs";
|
|
||||||
@import "spectre/pagination";
|
|
||||||
@import "spectre/panels";
|
|
||||||
@import "spectre/popovers";
|
|
||||||
@import "spectre/steps";
|
|
||||||
//@import "spectre/tabs";
|
|
||||||
@import "spectre/tiles";
|
|
||||||
@import "spectre/toasts";
|
|
||||||
@import "spectre/tooltips";
|
|
||||||
|
|
||||||
|
|
||||||
// Utility classes
|
|
||||||
@import "spectre/animations";
|
|
||||||
@import "spectre/utilities";
|
|
||||||
|
|
||||||
// Extras
|
|
||||||
@import "spectre/off-canvas";
|
|
||||||
@import "theme/extensions";
|
|
|
@ -1,38 +0,0 @@
|
||||||
// Accordions
|
|
||||||
.accordion {
|
|
||||||
input:checked ~,
|
|
||||||
&[open] {
|
|
||||||
& .accordion-header {
|
|
||||||
.icon {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .accordion-body {
|
|
||||||
max-height: 50rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion-header {
|
|
||||||
display: block;
|
|
||||||
padding: $unit-1 $unit-2;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
transition: transform .25s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion-body {
|
|
||||||
margin-bottom: $layout-spacing;
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height .25s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove default details marker in Webkit
|
|
||||||
summary.accordion-header {
|
|
||||||
&::-webkit-details-marker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,20 +0,0 @@
|
||||||
// Animations
|
|
||||||
@keyframes loading {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-down {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-$unit-8);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,43 +0,0 @@
|
||||||
// Optimized for East Asian CJK
|
|
||||||
html:lang(zh),
|
|
||||||
html:lang(zh-Hans),
|
|
||||||
.lang-zh,
|
|
||||||
.lang-zh-hans {
|
|
||||||
font-family: $cjk-zh-hans-font-family;
|
|
||||||
}
|
|
||||||
|
|
||||||
html:lang(zh-Hant),
|
|
||||||
.lang-zh-hant {
|
|
||||||
font-family: $cjk-zh-hant-font-family;
|
|
||||||
}
|
|
||||||
|
|
||||||
html:lang(ja),
|
|
||||||
.lang-ja {
|
|
||||||
font-family: $cjk-jp-font-family;
|
|
||||||
}
|
|
||||||
|
|
||||||
html:lang(ko),
|
|
||||||
.lang-ko {
|
|
||||||
font-family: $cjk-ko-font-family;
|
|
||||||
}
|
|
||||||
|
|
||||||
:lang(zh),
|
|
||||||
:lang(ja),
|
|
||||||
.lang-cjk {
|
|
||||||
ins,
|
|
||||||
u {
|
|
||||||
border-bottom: $border-width solid;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
del + del,
|
|
||||||
del + s,
|
|
||||||
ins + ins,
|
|
||||||
ins + u,
|
|
||||||
s + del,
|
|
||||||
s + s,
|
|
||||||
u + ins,
|
|
||||||
u + u {
|
|
||||||
margin-left: .125em;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,47 +0,0 @@
|
||||||
// Autocomplete
|
|
||||||
.form-autocomplete {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.form-autocomplete-input {
|
|
||||||
align-content: flex-start;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
height: auto;
|
|
||||||
min-height: $unit-8;
|
|
||||||
padding: $unit-h;
|
|
||||||
|
|
||||||
&.is-focused {
|
|
||||||
@include control-shadow();
|
|
||||||
border-color: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
border-color: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
display: inline-block;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
height: $unit-6;
|
|
||||||
line-height: $unit-4;
|
|
||||||
margin: $unit-h;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.autocomplete-oneline {
|
|
||||||
.form-autocomplete-input {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chip {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,77 +0,0 @@
|
||||||
// Avatars
|
|
||||||
.avatar {
|
|
||||||
@include avatar-base();
|
|
||||||
background: $primary-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
color: rgba($light-color, .85);
|
|
||||||
display: inline-block;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.25;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
&.avatar-xs {
|
|
||||||
@include avatar-base($unit-4);
|
|
||||||
}
|
|
||||||
&.avatar-sm {
|
|
||||||
@include avatar-base($unit-6);
|
|
||||||
}
|
|
||||||
&.avatar-lg {
|
|
||||||
@include avatar-base($unit-12);
|
|
||||||
}
|
|
||||||
&.avatar-xl {
|
|
||||||
@include avatar-base($unit-16);
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
z-index: $zindex-0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-icon,
|
|
||||||
.avatar-presence {
|
|
||||||
background: $bg-color-light;
|
|
||||||
bottom: 14.64%;
|
|
||||||
height: 50%;
|
|
||||||
padding: $border-width-lg;
|
|
||||||
position: absolute;
|
|
||||||
right: 14.64%;
|
|
||||||
transform: translate(50%, 50%);
|
|
||||||
width: 50%;
|
|
||||||
z-index: $zindex-0 + 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-presence {
|
|
||||||
background: $gray-color;
|
|
||||||
box-shadow: 0 0 0 $border-width-lg $light-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: .5em;
|
|
||||||
width: .5em;
|
|
||||||
|
|
||||||
&.online {
|
|
||||||
background: $success-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.busy {
|
|
||||||
background: $error-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.away {
|
|
||||||
background: $warning-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-initial]::before {
|
|
||||||
color: currentColor;
|
|
||||||
content: attr(data-initial);
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
z-index: $zindex-0;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,60 +0,0 @@
|
||||||
// Badges
|
|
||||||
.badge {
|
|
||||||
position: relative;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&[data-badge],
|
|
||||||
&:not([data-badge]) {
|
|
||||||
&::after {
|
|
||||||
background: $primary-color;
|
|
||||||
background-clip: padding-box;
|
|
||||||
border-radius: .5rem;
|
|
||||||
box-shadow: 0 0 0 .1rem $bg-color-light;
|
|
||||||
color: $light-color;
|
|
||||||
content: attr(data-badge);
|
|
||||||
display: inline-block;
|
|
||||||
transform: translate(-.05rem, -.5rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[data-badge] {
|
|
||||||
&::after {
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
height: .9rem;
|
|
||||||
line-height: 1;
|
|
||||||
min-width: .9rem;
|
|
||||||
padding: .1rem .2rem;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:not([data-badge]),
|
|
||||||
&[data-badge=""] {
|
|
||||||
&::after {
|
|
||||||
height: 6px;
|
|
||||||
min-width: 6px;
|
|
||||||
padding: 0;
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Badges for Buttons
|
|
||||||
&.btn {
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: translate(50%, -50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Badges for Avatars
|
|
||||||
&.avatar {
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 14.64%;
|
|
||||||
right: 14.64%;
|
|
||||||
transform: translate(50%, -50%);
|
|
||||||
z-index: $zindex-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,71 +0,0 @@
|
||||||
// Bars
|
|
||||||
.bar {
|
|
||||||
background: $bg-color-dark;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
height: $unit-4;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&.bar-sm {
|
|
||||||
height: $unit-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: attr() support
|
|
||||||
.bar-item {
|
|
||||||
background: $primary-color;
|
|
||||||
color: $light-color;
|
|
||||||
display: block;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
flex-shrink: 0;
|
|
||||||
line-height: $unit-4;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
width: 0;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-bottom-left-radius: $border-radius;
|
|
||||||
border-top-left-radius: $border-radius;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
border-bottom-right-radius: $border-radius;
|
|
||||||
border-top-right-radius: $border-radius;
|
|
||||||
flex-shrink: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Slider bar
|
|
||||||
.bar-slider {
|
|
||||||
height: $border-width-lg;
|
|
||||||
margin: $layout-spacing 0;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.bar-item {
|
|
||||||
left: 0;
|
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
|
||||||
&:not(:last-child):first-child {
|
|
||||||
background: $bg-color-dark;
|
|
||||||
z-index: $zindex-0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-slider-btn {
|
|
||||||
background: $primary-color;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: $unit-3;
|
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(50%, -50%);
|
|
||||||
width: $unit-3;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
box-shadow: 0 0 0 .1rem $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,44 +0,0 @@
|
||||||
// Base
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: $html-font-size;
|
|
||||||
line-height: $html-line-height;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: $body-bg;
|
|
||||||
color: $body-font-color;
|
|
||||||
font-family: $body-font-family;
|
|
||||||
font-size: $font-size;
|
|
||||||
overflow-x: hidden;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $link-color;
|
|
||||||
outline: none;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow();
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
color: $link-color-dark;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:visited {
|
|
||||||
color: $link-color-light;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,29 +0,0 @@
|
||||||
// Breadcrumbs
|
|
||||||
.breadcrumb {
|
|
||||||
list-style: none;
|
|
||||||
margin: $unit-1 0;
|
|
||||||
padding: $unit-1 0;
|
|
||||||
|
|
||||||
.breadcrumb-item {
|
|
||||||
color: $gray-color-dark;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
|
||||||
padding: $unit-1 0;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-right: $unit-1;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $gray-color-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
&::before {
|
|
||||||
color: $gray-color-dark;
|
|
||||||
content: "/";
|
|
||||||
padding-right: $unit-2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,193 +0,0 @@
|
||||||
// Buttons
|
|
||||||
.btn {
|
|
||||||
appearance: none;
|
|
||||||
background: $bg-color-light;
|
|
||||||
border: $border-width solid $primary-color;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
color: $primary-color;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: $font-size;
|
|
||||||
height: $control-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
outline: none;
|
|
||||||
padding: $control-padding-y $control-padding-x;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
|
||||||
user-select: none;
|
|
||||||
vertical-align: middle;
|
|
||||||
white-space: nowrap;
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow();
|
|
||||||
}
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background: $secondary-color;
|
|
||||||
border-color: $primary-color-dark;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: $primary-color-dark;
|
|
||||||
border-color: darken($primary-color-dark, 5%);
|
|
||||||
color: $light-color;
|
|
||||||
text-decoration: none;
|
|
||||||
&.loading {
|
|
||||||
&::after {
|
|
||||||
border-bottom-color: $light-color;
|
|
||||||
border-left-color: $light-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[disabled],
|
|
||||||
&:disabled,
|
|
||||||
&.disabled {
|
|
||||||
cursor: default;
|
|
||||||
opacity: .5;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Button Primary
|
|
||||||
&.btn-primary {
|
|
||||||
background: $primary-color;
|
|
||||||
border-color: $primary-color-dark;
|
|
||||||
color: $light-color;
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background: darken($primary-color-dark, 2%);
|
|
||||||
border-color: darken($primary-color-dark, 5%);
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: darken($primary-color-dark, 4%);
|
|
||||||
border-color: darken($primary-color-dark, 7%);
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
&.loading {
|
|
||||||
&::after {
|
|
||||||
border-bottom-color: $light-color;
|
|
||||||
border-left-color: $light-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Button Colors
|
|
||||||
&.btn-success {
|
|
||||||
@include button-variant($success-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-error {
|
|
||||||
@include button-variant($error-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Button Link
|
|
||||||
&.btn-link {
|
|
||||||
background: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
color: $link-color;
|
|
||||||
&:focus,
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
color: $link-color-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Button Sizes
|
|
||||||
&.btn-sm {
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
height: $control-size-sm;
|
|
||||||
padding: $control-padding-y-sm $control-padding-x-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-lg {
|
|
||||||
font-size: $font-size-lg;
|
|
||||||
height: $control-size-lg;
|
|
||||||
padding: $control-padding-y-lg $control-padding-x-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Button Block
|
|
||||||
&.btn-block {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Button Action
|
|
||||||
&.btn-action {
|
|
||||||
width: $control-size;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
|
|
||||||
&.btn-sm {
|
|
||||||
width: $control-size-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-lg {
|
|
||||||
width: $control-size-lg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Button Clear
|
|
||||||
&.btn-clear {
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
color: currentColor;
|
|
||||||
height: $unit-5;
|
|
||||||
line-height: $unit-4;
|
|
||||||
margin-left: $unit-1;
|
|
||||||
margin-right: -2px;
|
|
||||||
opacity: 1;
|
|
||||||
padding: $unit-h;
|
|
||||||
text-decoration: none;
|
|
||||||
width: $unit-5;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background: rgba($bg-color, .5);
|
|
||||||
opacity: .95;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "\2715";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Button groups
|
|
||||||
.btn-group {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
&:first-child:not(:last-child) {
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
&:not(:first-child):not(:last-child) {
|
|
||||||
border-radius: 0;
|
|
||||||
margin-left: -$border-width;
|
|
||||||
}
|
|
||||||
&:last-child:not(:first-child) {
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
margin-left: -$border-width;
|
|
||||||
}
|
|
||||||
&:focus,
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
z-index: $zindex-0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-group-block {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
flex: 1 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,222 +0,0 @@
|
||||||
// Calendars
|
|
||||||
.calendar {
|
|
||||||
border: $border-width solid $border-color;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
display: block;
|
|
||||||
min-width: 280px;
|
|
||||||
|
|
||||||
.calendar-nav {
|
|
||||||
align-items: center;
|
|
||||||
background: $bg-color;
|
|
||||||
border-top-left-radius: $border-radius;
|
|
||||||
border-top-right-radius: $border-radius;
|
|
||||||
display: flex;
|
|
||||||
font-size: $font-size-lg;
|
|
||||||
padding: $layout-spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-header,
|
|
||||||
.calendar-body {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
padding: $layout-spacing 0;
|
|
||||||
|
|
||||||
.calendar-date {
|
|
||||||
flex: 0 0 14.28%; // 7 calendar-items each row
|
|
||||||
max-width: 14.28%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-header {
|
|
||||||
background: $bg-color;
|
|
||||||
border-bottom: $border-width solid $border-color;
|
|
||||||
color: $gray-color;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-body {
|
|
||||||
color: $gray-color-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-date {
|
|
||||||
border: 0;
|
|
||||||
padding: $unit-1;
|
|
||||||
|
|
||||||
.date-item {
|
|
||||||
appearance: none;
|
|
||||||
background: transparent;
|
|
||||||
border: $border-width solid transparent;
|
|
||||||
border-radius: 50%;
|
|
||||||
color: $gray-color-dark;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
height: $unit-7;
|
|
||||||
line-height: $unit-5;
|
|
||||||
outline: none;
|
|
||||||
padding: $unit-h;
|
|
||||||
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: $unit-7;
|
|
||||||
|
|
||||||
&.date-today {
|
|
||||||
border-color: $secondary-color-dark;
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow();
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background: $secondary-color-light;
|
|
||||||
border-color: $secondary-color-dark;
|
|
||||||
color: $primary-color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: $primary-color-dark;
|
|
||||||
border-color: darken($primary-color-dark, 5%);
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Calendar badge support
|
|
||||||
&.badge {
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 3px;
|
|
||||||
right: 3px;
|
|
||||||
transform: translate(50%, -50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-item,
|
|
||||||
.calendar-event {
|
|
||||||
&:disabled,
|
|
||||||
&.disabled {
|
|
||||||
cursor: default;
|
|
||||||
opacity: .25;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.prev-month,
|
|
||||||
&.next-month {
|
|
||||||
.date-item,
|
|
||||||
.calendar-event {
|
|
||||||
opacity: .25;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-range {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: $secondary-color;
|
|
||||||
content: "";
|
|
||||||
height: $unit-7;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
&.range-start {
|
|
||||||
&::before {
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.range-end {
|
|
||||||
&::before {
|
|
||||||
right: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.range-start,
|
|
||||||
&.range-end {
|
|
||||||
.date-item {
|
|
||||||
background: $primary-color-dark;
|
|
||||||
border-color: darken($primary-color-dark, 5%);
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-item {
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Calendars size
|
|
||||||
&.calendar-lg {
|
|
||||||
.calendar-body {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.calendar-date {
|
|
||||||
border-bottom: $border-width solid $border-color;
|
|
||||||
border-right: $border-width solid $border-color;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 5.5rem;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&:nth-child(7n) {
|
|
||||||
border-right: 0;
|
|
||||||
}
|
|
||||||
&:nth-last-child(-n+7) {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-item {
|
|
||||||
align-self: flex-end;
|
|
||||||
height: $unit-7;
|
|
||||||
margin-right: $layout-spacing-sm;
|
|
||||||
margin-top: $layout-spacing-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-range {
|
|
||||||
&::before {
|
|
||||||
top: 19px;
|
|
||||||
}
|
|
||||||
&.range-start {
|
|
||||||
&::before {
|
|
||||||
left: auto;
|
|
||||||
width: 19px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.range-end {
|
|
||||||
&::before {
|
|
||||||
right: 19px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-events {
|
|
||||||
flex-grow: 1;
|
|
||||||
line-height: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: $layout-spacing-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-event {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
display: block;
|
|
||||||
margin: $unit-h auto;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 3px 4px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,43 +0,0 @@
|
||||||
// Cards
|
|
||||||
.card {
|
|
||||||
background: $bg-color-light;
|
|
||||||
border: $border-width solid $border-color;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.card-header,
|
|
||||||
.card-body,
|
|
||||||
.card-footer {
|
|
||||||
padding: $layout-spacing-lg;
|
|
||||||
padding-bottom: 0;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-bottom: $layout-spacing-lg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-image {
|
|
||||||
padding-top: $layout-spacing-lg;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-top: 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-top-left-radius: $border-radius;
|
|
||||||
border-top-right-radius: $border-radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
img {
|
|
||||||
border-bottom-left-radius: $border-radius;
|
|
||||||
border-bottom-right-radius: $border-radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,136 +0,0 @@
|
||||||
// Carousels
|
|
||||||
// The number of carousel images
|
|
||||||
$carousel-number: 8;
|
|
||||||
|
|
||||||
%carousel-image-checked {
|
|
||||||
animation: carousel-slidein .75s ease-in-out 1;
|
|
||||||
opacity: 1;
|
|
||||||
z-index: $zindex-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
%carousel-nav-checked {
|
|
||||||
color: $gray-color-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel {
|
|
||||||
background: $bg-color;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
z-index: $zindex-0;
|
|
||||||
|
|
||||||
.carousel-container {
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
position: relative;
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 56.25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item {
|
|
||||||
animation: carousel-slideout 1s ease-in-out 1;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
margin: 0;
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.item-prev,
|
|
||||||
.item-next {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-prev,
|
|
||||||
.item-next {
|
|
||||||
background: rgba($gray-color-light, .25);
|
|
||||||
border-color: rgba($gray-color-light, .5);
|
|
||||||
color: $gray-color-light;
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transition: all .4s;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
z-index: $zindex-1;
|
|
||||||
}
|
|
||||||
.item-prev {
|
|
||||||
left: 1rem;
|
|
||||||
}
|
|
||||||
.item-next {
|
|
||||||
right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-locator {
|
|
||||||
@for $i from 1 through ($carousel-number) {
|
|
||||||
&:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
|
|
||||||
@extend %carousel-image-checked;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@for $i from 1 through ($carousel-number) {
|
|
||||||
&:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
|
|
||||||
@extend %carousel-nav-checked;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-nav {
|
|
||||||
bottom: $layout-spacing;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 10rem;
|
|
||||||
z-index: $zindex-1;
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
color: rgba($gray-color-light, .5);
|
|
||||||
display: block;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
height: $unit-8;
|
|
||||||
margin: $unit-1;
|
|
||||||
max-width: 2.5rem;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: currentColor;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: $unit-h;
|
|
||||||
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%);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,33 +0,0 @@
|
||||||
// Chips
|
|
||||||
.chip {
|
|
||||||
align-items: center;
|
|
||||||
background: $bg-color-dark;
|
|
||||||
border-radius: 5rem;
|
|
||||||
display: inline-flex;
|
|
||||||
font-size: 90%;
|
|
||||||
height: $unit-6;
|
|
||||||
line-height: $unit-4;
|
|
||||||
margin: $unit-h;
|
|
||||||
max-width: $control-width-sm;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: $unit-1 $unit-2;
|
|
||||||
text-decoration: none;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
vertical-align: middle;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: $primary-color;
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
margin-left: -$unit-2;
|
|
||||||
margin-right: $unit-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-clear {
|
|
||||||
border-radius: 50%;
|
|
||||||
transform: scale(.75);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,31 +0,0 @@
|
||||||
// Codes
|
|
||||||
code {
|
|
||||||
@include label-base();
|
|
||||||
@include label-variant($code-color, lighten($code-color, 26%));
|
|
||||||
font-size: 85%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
color: $body-font-color;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
color: $gray-color;
|
|
||||||
content: attr(data-lang);
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
position: absolute;
|
|
||||||
right: $layout-spacing;
|
|
||||||
top: $unit-h;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
background: $bg-color;
|
|
||||||
color: inherit;
|
|
||||||
display: block;
|
|
||||||
line-height: 1.5;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,115 +0,0 @@
|
||||||
// Image comparison slider
|
|
||||||
// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
|
|
||||||
.comparison-slider {
|
|
||||||
height: 50vh;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
.comparison-before,
|
|
||||||
.comparison-after {
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
object-position: left center;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparison-before {
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
.comparison-label {
|
|
||||||
right: $unit-4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparison-after {
|
|
||||||
max-width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: transparent;
|
|
||||||
content: "";
|
|
||||||
cursor: default;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
right: $unit-4;
|
|
||||||
top: 0;
|
|
||||||
z-index: $zindex-0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
background: currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0 -5px, 0 5px;
|
|
||||||
color: $light-color;
|
|
||||||
content: "";
|
|
||||||
height: 3px;
|
|
||||||
position: absolute;
|
|
||||||
right: $unit-2;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(50%, -50%);
|
|
||||||
width: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparison-label {
|
|
||||||
left: $unit-4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparison-resizer {
|
|
||||||
animation: first-run 1.5s 1 ease-in-out;
|
|
||||||
cursor: ew-resize;
|
|
||||||
height: $unit-4;
|
|
||||||
left: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
min-width: $unit-4;
|
|
||||||
opacity: 0;
|
|
||||||
outline: none;
|
|
||||||
position: relative;
|
|
||||||
resize: horizontal;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%) scaleY(30);
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comparison-label {
|
|
||||||
background: rgba($dark-color, .5);
|
|
||||||
bottom: $unit-4;
|
|
||||||
color: $light-color;
|
|
||||||
padding: $unit-1 $unit-2;
|
|
||||||
position: absolute;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes first-run {
|
|
||||||
0% {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
width: $unit-12;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
width: $unit-4;
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
width: $unit-6;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,36 +0,0 @@
|
||||||
// Dropdown
|
|
||||||
.dropdown {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
animation: slide-down .15s ease 1;
|
|
||||||
display: none;
|
|
||||||
left: 0;
|
|
||||||
max-height: 50vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dropdown-right {
|
|
||||||
.menu {
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active .menu,
|
|
||||||
.dropdown-toggle:focus + .menu,
|
|
||||||
.menu:hover {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fix dropdown-toggle border radius in button groups
|
|
||||||
.btn-group {
|
|
||||||
.dropdown-toggle:nth-last-child(2) {
|
|
||||||
border-bottom-right-radius: $border-radius;
|
|
||||||
border-top-right-radius: $border-radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,21 +0,0 @@
|
||||||
// Empty states (or Blank slates)
|
|
||||||
.empty {
|
|
||||||
background: $bg-color;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
color: $gray-color-dark;
|
|
||||||
text-align: center;
|
|
||||||
padding: $unit-16 $unit-8;
|
|
||||||
|
|
||||||
.empty-icon {
|
|
||||||
margin-bottom: $layout-spacing-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-title,
|
|
||||||
.empty-subtitle {
|
|
||||||
margin: $layout-spacing auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-action {
|
|
||||||
margin-top: $layout-spacing-lg;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,37 +0,0 @@
|
||||||
// Filters
|
|
||||||
// The number of filter options
|
|
||||||
$filter-number: 8 !default;
|
|
||||||
|
|
||||||
%filter-checked-nav {
|
|
||||||
background: $primary-color;
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
%filter-checked-body {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter {
|
|
||||||
.filter-nav {
|
|
||||||
margin: $layout-spacing 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-body {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-tag {
|
|
||||||
@for $i from 0 through ($filter-number) {
|
|
||||||
&#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
|
|
||||||
@extend %filter-checked-nav;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@for $i from 1 through ($filter-number) {
|
|
||||||
&#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
|
|
||||||
@extend %filter-checked-body;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,555 +0,0 @@
|
||||||
// Forms
|
|
||||||
.form-group {
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: $layout-spacing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
margin-bottom: $layout-spacing-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
font-size: $font-size-lg;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: $layout-spacing-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form element: Label
|
|
||||||
.form-label {
|
|
||||||
display: block;
|
|
||||||
line-height: $line-height;
|
|
||||||
padding: $control-padding-y + $border-width 0;
|
|
||||||
|
|
||||||
&.label-sm {
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
padding: $control-padding-y-sm + $border-width 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.label-lg {
|
|
||||||
font-size: $font-size-lg;
|
|
||||||
padding: $control-padding-y-lg + $border-width 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form element: Input
|
|
||||||
.form-input {
|
|
||||||
appearance: none;
|
|
||||||
background: $bg-color-light;
|
|
||||||
background-image: none;
|
|
||||||
border: $border-width solid $border-color-dark;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
color: $body-font-color;
|
|
||||||
display: block;
|
|
||||||
font-size: $font-size;
|
|
||||||
height: $control-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
max-width: 100%;
|
|
||||||
outline: none;
|
|
||||||
padding: $control-padding-y $control-padding-x;
|
|
||||||
position: relative;
|
|
||||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
|
||||||
width: 100%;
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow();
|
|
||||||
border-color: $primary-color;
|
|
||||||
}
|
|
||||||
&::placeholder {
|
|
||||||
color: $gray-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input sizes
|
|
||||||
&.input-sm {
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
height: $control-size-sm;
|
|
||||||
padding: $control-padding-y-sm $control-padding-x-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.input-lg {
|
|
||||||
font-size: $font-size-lg;
|
|
||||||
height: $control-size-lg;
|
|
||||||
padding: $control-padding-y-lg $control-padding-x-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.input-inline {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input types
|
|
||||||
&[type="file"] {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form element: Textarea
|
|
||||||
textarea.form-input {
|
|
||||||
&,
|
|
||||||
&.input-lg,
|
|
||||||
&.input-sm {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form element: Input hint
|
|
||||||
.form-input-hint {
|
|
||||||
color: $gray-color;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
margin-top: $unit-1;
|
|
||||||
|
|
||||||
.has-success &,
|
|
||||||
.is-success + & {
|
|
||||||
color: $success-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-error &,
|
|
||||||
.is-error + & {
|
|
||||||
color: $error-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form element: Select
|
|
||||||
.form-select {
|
|
||||||
appearance: none;
|
|
||||||
border: $border-width solid $border-color-dark;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
color: inherit;
|
|
||||||
font-size: $font-size;
|
|
||||||
height: $control-size;
|
|
||||||
line-height: $line-height;
|
|
||||||
outline: none;
|
|
||||||
padding: $control-padding-y $control-padding-x;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 100%;
|
|
||||||
background: $bg-color-light;
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow();
|
|
||||||
border-color: $primary-color;
|
|
||||||
}
|
|
||||||
&::-ms-expand {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Select sizes
|
|
||||||
&.select-sm {
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
height: $control-size-sm;
|
|
||||||
padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.select-lg {
|
|
||||||
font-size: $font-size-lg;
|
|
||||||
height: $control-size-lg;
|
|
||||||
padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Multiple select
|
|
||||||
&[size],
|
|
||||||
&[multiple] {
|
|
||||||
height: auto;
|
|
||||||
padding: $control-padding-y $control-padding-x;
|
|
||||||
|
|
||||||
option {
|
|
||||||
padding: $unit-h $unit-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:not([multiple]):not([size]) {
|
|
||||||
background: $bg-color-light 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: $control-icon-size + $control-padding-x;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form Icons
|
|
||||||
.has-icon-left,
|
|
||||||
.has-icon-right {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.form-icon {
|
|
||||||
height: $control-icon-size;
|
|
||||||
margin: 0 $control-padding-y;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: $control-icon-size;
|
|
||||||
z-index: $zindex-0 + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-icon-left {
|
|
||||||
.form-icon {
|
|
||||||
left: $border-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
padding-left: $control-icon-size + $control-padding-y * 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-icon-right {
|
|
||||||
.form-icon {
|
|
||||||
right: $border-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
padding-right: $control-icon-size + $control-padding-y * 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form element: Checkbox and Radio
|
|
||||||
.form-checkbox,
|
|
||||||
.form-radio,
|
|
||||||
.form-switch {
|
|
||||||
display: block;
|
|
||||||
line-height: $line-height;
|
|
||||||
margin: ($control-size - $control-size-sm) / 2 0;
|
|
||||||
min-height: $control-size-sm;
|
|
||||||
padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
input {
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
height: 1px;
|
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
&:focus + .form-icon {
|
|
||||||
@include control-shadow();
|
|
||||||
border-color: $primary-color;
|
|
||||||
}
|
|
||||||
&:checked + .form-icon {
|
|
||||||
background: $primary-color;
|
|
||||||
border-color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-icon {
|
|
||||||
border: $border-width solid $border-color-dark;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input checkbox, radio and switch sizes
|
|
||||||
&.input-sm {
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.input-lg {
|
|
||||||
font-size: $font-size-lg;
|
|
||||||
margin: ($control-size-lg - $control-size-sm) / 2 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-checkbox,
|
|
||||||
.form-radio {
|
|
||||||
.form-icon {
|
|
||||||
background: $bg-color-light;
|
|
||||||
height: $control-icon-size;
|
|
||||||
left: 0;
|
|
||||||
top: ($control-size-sm - $control-icon-size) / 2;
|
|
||||||
width: $control-icon-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
&:active + .form-icon {
|
|
||||||
background: $bg-color-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.form-checkbox {
|
|
||||||
.form-icon {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
&:checked + .form-icon {
|
|
||||||
&::before {
|
|
||||||
background-clip: padding-box;
|
|
||||||
border: $border-width-lg solid $light-color;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:indeterminate + .form-icon {
|
|
||||||
background: $primary-color;
|
|
||||||
border-color: $primary-color;
|
|
||||||
&::before {
|
|
||||||
background: $bg-color-light;
|
|
||||||
content: "";
|
|
||||||
height: 2px;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -5px;
|
|
||||||
margin-top: -1px;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
width: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.form-radio {
|
|
||||||
.form-icon {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
&:checked + .form-icon {
|
|
||||||
&::before {
|
|
||||||
background: $bg-color-light;
|
|
||||||
border-radius: 50%;
|
|
||||||
content: "";
|
|
||||||
height: 6px;
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form element: Switch
|
|
||||||
.form-switch {
|
|
||||||
padding-left: ($unit-8 + $control-padding-x);
|
|
||||||
|
|
||||||
.form-icon {
|
|
||||||
background: $gray-color;
|
|
||||||
background-clip: padding-box;
|
|
||||||
border-radius: $unit-2 + $border-width;
|
|
||||||
height: $unit-4 + $border-width * 2;
|
|
||||||
left: 0;
|
|
||||||
top: ($control-size-sm - $unit-4) / 2 - $border-width;
|
|
||||||
width: $unit-8;
|
|
||||||
&::before {
|
|
||||||
background: $bg-color-light;
|
|
||||||
border-radius: 50%;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: $unit-4;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
|
|
||||||
width: $unit-4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
&:checked + .form-icon {
|
|
||||||
&::before {
|
|
||||||
left: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:active + .form-icon {
|
|
||||||
&::before {
|
|
||||||
background: $bg-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form element: Input groups
|
|
||||||
.input-group {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.input-group-addon {
|
|
||||||
background: $bg-color;
|
|
||||||
border: $border-width solid $border-color-dark;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
line-height: $line-height;
|
|
||||||
padding: $control-padding-y $control-padding-x;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&.addon-sm {
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
padding: $control-padding-y-sm $control-padding-x-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.addon-lg {
|
|
||||||
font-size: $font-size-lg;
|
|
||||||
padding: $control-padding-y-lg $control-padding-x-lg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input,
|
|
||||||
.form-select {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group-btn {
|
|
||||||
z-index: $zindex-0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input,
|
|
||||||
.form-select,
|
|
||||||
.input-group-addon,
|
|
||||||
.input-group-btn {
|
|
||||||
&:first-child:not(:last-child) {
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
&:not(:first-child):not(:last-child) {
|
|
||||||
border-radius: 0;
|
|
||||||
margin-left: -$border-width;
|
|
||||||
}
|
|
||||||
&:last-child:not(:first-child) {
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
margin-left: -$border-width;
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
z-index: $zindex-0 + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.input-inline {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form validation states
|
|
||||||
.form-input,
|
|
||||||
.form-select {
|
|
||||||
.has-success &,
|
|
||||||
&.is-success {
|
|
||||||
background: lighten($success-color, 53%);
|
|
||||||
border-color: $success-color;
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow($success-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-error &,
|
|
||||||
&.is-error {
|
|
||||||
background: lighten($error-color, 53%);
|
|
||||||
border-color: $error-color;
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow($error-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-checkbox,
|
|
||||||
.form-radio,
|
|
||||||
.form-switch {
|
|
||||||
.has-error &,
|
|
||||||
&.is-error {
|
|
||||||
.form-icon {
|
|
||||||
border-color: $error-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
&:checked + .form-icon {
|
|
||||||
background: $error-color;
|
|
||||||
border-color: $error-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus + .form-icon {
|
|
||||||
@include control-shadow($error-color);
|
|
||||||
border-color: $error-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-checkbox {
|
|
||||||
.has-error &,
|
|
||||||
&.is-error {
|
|
||||||
input {
|
|
||||||
&:indeterminate + .form-icon {
|
|
||||||
background: $error-color;
|
|
||||||
border-color: $error-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// validation based on :placeholder-shown (Edge doesn't support it yet)
|
|
||||||
.form-input {
|
|
||||||
&:not(:placeholder-shown) {
|
|
||||||
&:invalid {
|
|
||||||
border-color: $error-color;
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow($error-color);
|
|
||||||
background: lighten($error-color, 53%);
|
|
||||||
}
|
|
||||||
|
|
||||||
& + .form-input-hint {
|
|
||||||
color: $error-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form disabled and readonly
|
|
||||||
.form-input,
|
|
||||||
.form-select {
|
|
||||||
&:disabled,
|
|
||||||
&.disabled {
|
|
||||||
background-color: $bg-color-dark;
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
&[readonly] {
|
|
||||||
background-color: $bg-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
&:disabled,
|
|
||||||
&.disabled {
|
|
||||||
& + .form-icon {
|
|
||||||
background: $bg-color-dark;
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-switch {
|
|
||||||
input {
|
|
||||||
&:disabled,
|
|
||||||
&.disabled {
|
|
||||||
& + .form-icon::before {
|
|
||||||
background: $bg-color-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form horizontal
|
|
||||||
.form-horizontal {
|
|
||||||
padding: $layout-spacing 0;
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form inline
|
|
||||||
.form-inline {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
|
@ -1,22 +0,0 @@
|
||||||
// Hero
|
|
||||||
.hero {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-bottom: 4rem;
|
|
||||||
padding-top: 4rem;
|
|
||||||
|
|
||||||
&.hero-sm {
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
padding-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hero-lg {
|
|
||||||
padding-bottom: 8rem;
|
|
||||||
padding-top: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-body {
|
|
||||||
padding: $layout-spacing;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,5 +0,0 @@
|
||||||
// CSS Icons
|
|
||||||
@import "icons/icons-core";
|
|
||||||
@import "icons/icons-navigation";
|
|
||||||
@import "icons/icons-action";
|
|
||||||
@import "icons/icons-object";
|
|
|
@ -1,34 +0,0 @@
|
||||||
// Labels
|
|
||||||
.label {
|
|
||||||
@include label-base();
|
|
||||||
@include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
// Label rounded
|
|
||||||
&.label-rounded {
|
|
||||||
border-radius: 5rem;
|
|
||||||
padding-left: .4rem;
|
|
||||||
padding-right: .4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Label colors
|
|
||||||
&.label-primary {
|
|
||||||
@include label-variant($light-color, $primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.label-secondary {
|
|
||||||
@include label-variant($primary-color, $secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.label-success {
|
|
||||||
@include label-variant($light-color, $success-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.label-warning {
|
|
||||||
@include label-variant($light-color, $warning-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.label-error {
|
|
||||||
@include label-variant($light-color, $error-color);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,444 +0,0 @@
|
||||||
// Layout
|
|
||||||
.container {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
padding-left: $layout-spacing;
|
|
||||||
padding-right: $layout-spacing;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
$grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
|
|
||||||
|
|
||||||
&.grid-xl {
|
|
||||||
max-width: $grid-spacing * 2 + $size-xl;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.grid-lg {
|
|
||||||
max-width: $grid-spacing * 2 + $size-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.grid-md {
|
|
||||||
max-width: $grid-spacing * 2 + $size-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.grid-sm {
|
|
||||||
max-width: $grid-spacing * 2 + $size-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.grid-xs {
|
|
||||||
max-width: $grid-spacing * 2 + $size-xs;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive breakpoint system
|
|
||||||
.show-xs,
|
|
||||||
.show-sm,
|
|
||||||
.show-md,
|
|
||||||
.show-lg,
|
|
||||||
.show-xl {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive grid system
|
|
||||||
.columns {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-left: -$layout-spacing;
|
|
||||||
margin-right: -$layout-spacing;
|
|
||||||
|
|
||||||
&.col-gapless {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
|
|
||||||
& > .column {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.col-oneline {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.column {
|
|
||||||
flex: 1;
|
|
||||||
max-width: 100%;
|
|
||||||
padding-left: $layout-spacing;
|
|
||||||
padding-right: $layout-spacing;
|
|
||||||
|
|
||||||
&.col-12,
|
|
||||||
&.col-11,
|
|
||||||
&.col-10,
|
|
||||||
&.col-9,
|
|
||||||
&.col-8,
|
|
||||||
&.col-7,
|
|
||||||
&.col-6,
|
|
||||||
&.col-5,
|
|
||||||
&.col-4,
|
|
||||||
&.col-3,
|
|
||||||
&.col-2,
|
|
||||||
&.col-1,
|
|
||||||
&.col-auto {
|
|
||||||
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 {
|
|
||||||
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: $size-xl) {
|
|
||||||
.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 {
|
|
||||||
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: $size-lg) {
|
|
||||||
.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 {
|
|
||||||
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: $size-md) {
|
|
||||||
.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 {
|
|
||||||
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: $size-sm) {
|
|
||||||
.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 {
|
|
||||||
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: $size-xs) {
|
|
||||||
.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 {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,75 +0,0 @@
|
||||||
// Media
|
|
||||||
// Image responsive
|
|
||||||
.img-responsive {
|
|
||||||
display: block;
|
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// object-fit support is coming to Microsoft Edge
|
|
||||||
// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
|
|
||||||
.img-fit-cover {
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-fit-contain {
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Video responsive
|
|
||||||
.video-responsive {
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe,
|
|
||||||
object,
|
|
||||||
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%;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-responsive-4-3 {
|
|
||||||
&::before {
|
|
||||||
padding-bottom: 75%; // Ratio 4:3
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-responsive-1-1 {
|
|
||||||
&::before {
|
|
||||||
padding-bottom: 100%; // Ratio 1:1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Figure
|
|
||||||
.figure {
|
|
||||||
margin: 0 0 $layout-spacing 0;
|
|
||||||
|
|
||||||
.figure-caption {
|
|
||||||
color: $gray-color-dark;
|
|
||||||
margin-top: $layout-spacing;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,66 +0,0 @@
|
||||||
// Menus
|
|
||||||
.menu {
|
|
||||||
@include shadow-variant(.05rem);
|
|
||||||
background: $bg-color-light;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
min-width: $control-width-xs;
|
|
||||||
padding: $unit-2;
|
|
||||||
transform: translateY($layout-spacing-sm);
|
|
||||||
z-index: $zindex-3;
|
|
||||||
|
|
||||||
&.menu-nav {
|
|
||||||
background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item {
|
|
||||||
margin-top: 0;
|
|
||||||
padding: 0 $unit-2;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
& > a {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
color: inherit;
|
|
||||||
display: block;
|
|
||||||
margin: 0 (-$unit-2);
|
|
||||||
padding: $unit-1 $unit-2;
|
|
||||||
text-decoration: none;
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background: $secondary-color;
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: $secondary-color;
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-checkbox,
|
|
||||||
.form-radio,
|
|
||||||
.form-switch {
|
|
||||||
margin: $unit-h 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
& + .menu-item {
|
|
||||||
margin-top: $unit-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-badge {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
margin-right: $unit-2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,57 +0,0 @@
|
||||||
// Meters
|
|
||||||
// Credit: https://css-tricks.com/html5-meter-element/
|
|
||||||
.meter {
|
|
||||||
appearance: none;
|
|
||||||
background: $bg-color;
|
|
||||||
border: 0;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: $unit-4;
|
|
||||||
|
|
||||||
&::-webkit-meter-inner-element {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-meter-bar,
|
|
||||||
&::-webkit-meter-optimum-value,
|
|
||||||
&::-webkit-meter-suboptimum-value,
|
|
||||||
&::-webkit-meter-even-less-good-value {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-meter-bar {
|
|
||||||
background: $bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-meter-optimum-value {
|
|
||||||
background: $success-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-meter-suboptimum-value {
|
|
||||||
background: $warning-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-meter-even-less-good-value {
|
|
||||||
background: $error-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-meter-bar,
|
|
||||||
&:-moz-meter-optimum,
|
|
||||||
&:-moz-meter-sub-optimum,
|
|
||||||
&:-moz-meter-sub-sub-optimum {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:-moz-meter-optimum::-moz-meter-bar {
|
|
||||||
background: $success-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:-moz-meter-sub-optimum::-moz-meter-bar {
|
|
||||||
background: $warning-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
|
|
||||||
background: $error-color;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,10 +0,0 @@
|
||||||
// Mixins
|
|
||||||
@import "mixins/avatar";
|
|
||||||
@import "mixins/button";
|
|
||||||
@import "mixins/clearfix";
|
|
||||||
@import "mixins/color";
|
|
||||||
@import "mixins/label";
|
|
||||||
@import "mixins/position";
|
|
||||||
@import "mixins/shadow";
|
|
||||||
@import "mixins/text";
|
|
||||||
@import "mixins/toast";
|
|
|
@ -1,87 +0,0 @@
|
||||||
// Modals
|
|
||||||
.modal {
|
|
||||||
align-items: center;
|
|
||||||
bottom: 0;
|
|
||||||
display: none;
|
|
||||||
justify-content: center;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: $layout-spacing;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
&:target,
|
|
||||||
&.active {
|
|
||||||
display: flex;
|
|
||||||
opacity: 1;
|
|
||||||
z-index: $zindex-4;
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
background: rgba($bg-color, .75);
|
|
||||||
bottom: 0;
|
|
||||||
cursor: default;
|
|
||||||
display: block;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
animation: slide-down .2s ease 1;
|
|
||||||
z-index: $zindex-0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.modal-sm {
|
|
||||||
.modal-container {
|
|
||||||
max-width: $control-width-sm;
|
|
||||||
padding: 0 $unit-2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.modal-lg {
|
|
||||||
.modal-overlay {
|
|
||||||
background: $bg-color-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
box-shadow: none;
|
|
||||||
max-width: $control-width-lg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
@include shadow-variant(.2rem);
|
|
||||||
background: $bg-color-light;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-height: 75vh;
|
|
||||||
max-width: $control-width-md;
|
|
||||||
padding: 0 $unit-4;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&.modal-fullheight {
|
|
||||||
max-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
color: $dark-color;
|
|
||||||
padding: $unit-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: $unit-4;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
padding: $unit-4;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,28 +0,0 @@
|
||||||
// Navbar
|
|
||||||
.navbar {
|
|
||||||
align-items: stretch;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.navbar-section {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex: 1 0 0;
|
|
||||||
|
|
||||||
&:not(:first-child):last-child {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-center {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
font-size: $font-size-lg;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,34 +0,0 @@
|
||||||
// Navs
|
|
||||||
.nav {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
list-style: none;
|
|
||||||
margin: $unit-1 0;
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
a {
|
|
||||||
color: $gray-color-dark;
|
|
||||||
padding: $unit-1 $unit-2;
|
|
||||||
text-decoration: none;
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
& > a {
|
|
||||||
color: darken($gray-color-dark, 10%);
|
|
||||||
font-weight: bold;
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .nav {
|
|
||||||
margin-bottom: $unit-2;
|
|
||||||
margin-left: $unit-4;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,446 +0,0 @@
|
||||||
/* 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 */
|
|
||||||
-ms-text-size-adjust: 100%; /* 3 */
|
|
||||||
-webkit-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: 0.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: $mono-font-family; /* 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: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.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"], /* 1 */
|
|
||||||
[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, /* 1 */
|
|
||||||
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;
|
|
||||||
}
|
|
|
@ -1,95 +0,0 @@
|
||||||
// Off canvas menus
|
|
||||||
$off-canvas-breakpoint: $size-lg !default;
|
|
||||||
|
|
||||||
.off-canvas {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: nowrap;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.off-canvas-toggle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: $layout-spacing;
|
|
||||||
transition: none;
|
|
||||||
z-index: $zindex-0;
|
|
||||||
@if $rtl == true {
|
|
||||||
right: $layout-spacing;
|
|
||||||
} @else {
|
|
||||||
left: $layout-spacing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.off-canvas-sidebar {
|
|
||||||
background: $bg-color;
|
|
||||||
bottom: 0;
|
|
||||||
min-width: 10rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
transition: transform .25s;
|
|
||||||
z-index: $zindex-2;
|
|
||||||
@if $rtl == true {
|
|
||||||
right: 0;
|
|
||||||
transform: translateX(100%);
|
|
||||||
} @else {
|
|
||||||
left: 0;
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.off-canvas-content {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
height: 100%;
|
|
||||||
padding: $layout-spacing $layout-spacing $layout-spacing 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.off-canvas-overlay {
|
|
||||||
background: rgba($dark-color, .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-sidebar {
|
|
||||||
&:target,
|
|
||||||
&.active {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:target ~ .off-canvas-overlay,
|
|
||||||
&.active ~ .off-canvas-overlay {
|
|
||||||
display: block;
|
|
||||||
z-index: $zindex-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive layout
|
|
||||||
@media (min-width: $off-canvas-breakpoint) {
|
|
||||||
.off-canvas {
|
|
||||||
&.off-canvas-sidebar-show {
|
|
||||||
.off-canvas-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.off-canvas-sidebar {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
position: relative;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.off-canvas-overlay {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,60 +0,0 @@
|
||||||
// Pagination
|
|
||||||
.pagination {
|
|
||||||
display: flex;
|
|
||||||
list-style: none;
|
|
||||||
margin: $unit-1 0;
|
|
||||||
padding: $unit-1 0;
|
|
||||||
|
|
||||||
.page-item {
|
|
||||||
margin: $unit-1 $unit-o;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
padding: $unit-1 $unit-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
display: inline-block;
|
|
||||||
padding: $unit-1 $unit-2;
|
|
||||||
text-decoration: none;
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
a {
|
|
||||||
cursor: default;
|
|
||||||
opacity: .5;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
a {
|
|
||||||
background: $primary-color;
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.page-prev,
|
|
||||||
&.page-next {
|
|
||||||
flex: 1 0 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.page-next {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-item-title {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-item-subtitle {
|
|
||||||
margin: 0;
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,23 +0,0 @@
|
||||||
// Panels
|
|
||||||
.panel {
|
|
||||||
border: $border-width solid $border-color;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.panel-header,
|
|
||||||
.panel-footer {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: $layout-spacing-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-nav {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-body {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 0 $layout-spacing-lg;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,135 +0,0 @@
|
||||||
// Parallax
|
|
||||||
$parallax-deg: 3deg !default;
|
|
||||||
$parallax-offset: 4.5px !default;
|
|
||||||
$parallax-offset-z: 50px !default;
|
|
||||||
$parallax-perspective: 1000px !default;
|
|
||||||
$parallax-scale: .95 !default;
|
|
||||||
$parallax-fade-color: rgba(255, 255, 255, .35) !default;
|
|
||||||
|
|
||||||
// Mixin: Parallax direction
|
|
||||||
@mixin parallax-dir() {
|
|
||||||
height: 50%;
|
|
||||||
outline: none;
|
|
||||||
position: absolute;
|
|
||||||
width: 50%;
|
|
||||||
z-index: $zindex-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax {
|
|
||||||
display: block;
|
|
||||||
height: auto;
|
|
||||||
position: relative;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
.parallax-content {
|
|
||||||
@include shadow-variant(1rem);
|
|
||||||
height: auto;
|
|
||||||
transform: perspective($parallax-perspective);
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
transition: all .4s ease;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax-front {
|
|
||||||
align-items: center;
|
|
||||||
color: $light-color;
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0 0 20px rgba($dark-color, .75);
|
|
||||||
top: 0;
|
|
||||||
transform: translateZ($parallax-offset-z) scale($parallax-scale);
|
|
||||||
transition: transform .4s;
|
|
||||||
width: 100%;
|
|
||||||
z-index: $zindex-0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax-top-left {
|
|
||||||
@include parallax-dir();
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
&:focus ~ .parallax-content,
|
|
||||||
&:hover ~ .parallax-content {
|
|
||||||
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax-front {
|
|
||||||
transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax-top-right {
|
|
||||||
@include parallax-dir();
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
&:focus ~ .parallax-content,
|
|
||||||
&:hover ~ .parallax-content {
|
|
||||||
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax-front {
|
|
||||||
transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax-bottom-left {
|
|
||||||
@include parallax-dir();
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
&:focus ~ .parallax-content,
|
|
||||||
&:hover ~ .parallax-content {
|
|
||||||
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax-front {
|
|
||||||
transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax-bottom-right {
|
|
||||||
@include parallax-dir();
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
&:focus ~ .parallax-content,
|
|
||||||
&:hover ~ .parallax-content {
|
|
||||||
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax-front {
|
|
||||||
transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|