arbo
This commit is contained in:
+8
-1
@@ -1,5 +1,12 @@
|
|||||||
|
# v1.5.8
|
||||||
|
## 02/07/2019
|
||||||
|
|
||||||
|
1. [](#improved)
|
||||||
|
* Improved `User` unserialize to not to break the object if serialized data is not what expected
|
||||||
|
* Removed unused parameter [#2357](https://github.com/getgrav/grav/pull/2357)
|
||||||
|
|
||||||
# v1.5.7
|
# v1.5.7
|
||||||
## 01/25/2018
|
## 01/25/2019
|
||||||
|
|
||||||
1. [](#new)
|
1. [](#new)
|
||||||
* Support for AWS Cloudfront forwarded scheme header [#2297](https://github.com/getgrav/grav/pull/2297)
|
* Support for AWS Cloudfront forwarded scheme header [#2297](https://github.com/getgrav/grav/pull/2297)
|
||||||
|
|||||||
@@ -16,6 +16,13 @@ form:
|
|||||||
placeholder: PLUGIN_ADMIN.SITE_TITLE_PLACEHOLDER
|
placeholder: PLUGIN_ADMIN.SITE_TITLE_PLACEHOLDER
|
||||||
help: PLUGIN_ADMIN.SITE_TITLE_HELP
|
help: PLUGIN_ADMIN.SITE_TITLE_HELP
|
||||||
|
|
||||||
|
header.status:
|
||||||
|
type: text
|
||||||
|
label: Status
|
||||||
|
size: large
|
||||||
|
placeholder: PLUGIN_ADMIN.SITE_TITLE_PLACEHOLDER
|
||||||
|
help: PLUGIN_ADMIN.SITE_TITLE_HELP
|
||||||
|
|
||||||
default_lang:
|
default_lang:
|
||||||
type: text
|
type: text
|
||||||
label: PLUGIN_ADMIN.SITE_DEFAULT_LANG
|
label: PLUGIN_ADMIN.SITE_DEFAULT_LANG
|
||||||
|
|||||||
+1
-1
@@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
// Some standard defines
|
// Some standard defines
|
||||||
define('GRAV', true);
|
define('GRAV', true);
|
||||||
define('GRAV_VERSION', '1.5.7');
|
define('GRAV_VERSION', '1.5.8');
|
||||||
define('GRAV_TESTING', false);
|
define('GRAV_TESTING', false);
|
||||||
define('DS', '/');
|
define('DS', '/');
|
||||||
|
|
||||||
|
|||||||
@@ -946,7 +946,7 @@ class Pages
|
|||||||
$this->grav['debugger']->addMessage('Page cache missed, rebuilding pages..');
|
$this->grav['debugger']->addMessage('Page cache missed, rebuilding pages..');
|
||||||
|
|
||||||
// recurse pages and cache result
|
// recurse pages and cache result
|
||||||
$this->resetPages($pages_dir, $this->pages_cache_id);
|
$this->resetPages($pages_dir);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// If pages was found in cache, set the taxonomy
|
// If pages was found in cache, set the taxonomy
|
||||||
|
|||||||
@@ -306,6 +306,10 @@ class User extends Data
|
|||||||
$this->gettersVariable = 'items';
|
$this->gettersVariable = 'items';
|
||||||
$this->nestedSeparator = '.';
|
$this->nestedSeparator = '.';
|
||||||
|
|
||||||
|
if (null === $this->items) {
|
||||||
|
$this->items = [];
|
||||||
|
}
|
||||||
|
|
||||||
if (null === $this->blueprints) {
|
if (null === $this->blueprints) {
|
||||||
$blueprints = new Blueprints;
|
$blueprints = new Blueprints;
|
||||||
$this->blueprints = $blueprints->get('user/account');
|
$this->blueprints = $blueprints->get('user/account');
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
title: 'Gilles Acezat'
|
title: Burodesformes
|
||||||
default_lang: fr
|
default_lang: fr
|
||||||
author:
|
author:
|
||||||
name: 'Gilles Acezat'
|
name: 'Gilles Acezat'
|
||||||
@@ -15,3 +15,5 @@ summary:
|
|||||||
delimiter: '==='
|
delimiter: '==='
|
||||||
blog:
|
blog:
|
||||||
route: /blog
|
route: /blog
|
||||||
|
header:
|
||||||
|
status: 'Designer graphique'
|
||||||
|
|||||||
+16
-4
@@ -1,14 +1,17 @@
|
|||||||
absolute_urls: false
|
absolute_urls: false
|
||||||
timezone: Europe/Paris
|
timezone: Europe/Paris
|
||||||
|
default_locale: null
|
||||||
param_sep: ':'
|
param_sep: ':'
|
||||||
wrapped_site: false
|
wrapped_site: false
|
||||||
reverse_proxy_setup: false
|
reverse_proxy_setup: false
|
||||||
force_ssl: false
|
force_ssl: false
|
||||||
force_lowercase_urls: true
|
force_lowercase_urls: true
|
||||||
|
custom_base_url: ''
|
||||||
username_regex: '^[a-z0-9_-]{3,16}$'
|
username_regex: '^[a-z0-9_-]{3,16}$'
|
||||||
pwd_regex: '(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}'
|
pwd_regex: '(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}'
|
||||||
intl_enabled: true
|
intl_enabled: true
|
||||||
languages:
|
languages:
|
||||||
|
supported: { }
|
||||||
include_default_lang: true
|
include_default_lang: true
|
||||||
translations: true
|
translations: true
|
||||||
translations_fallback: true
|
translations_fallback: true
|
||||||
@@ -16,16 +19,17 @@ languages:
|
|||||||
http_accept_language: false
|
http_accept_language: false
|
||||||
override_locale: false
|
override_locale: false
|
||||||
home:
|
home:
|
||||||
alias: /home
|
alias: /projets
|
||||||
hide_in_urls: true
|
hide_in_urls: true
|
||||||
pages:
|
pages:
|
||||||
theme: quark
|
theme: gilles_acezat
|
||||||
order:
|
order:
|
||||||
by: default
|
by: default
|
||||||
dir: asc
|
dir: asc
|
||||||
list:
|
list:
|
||||||
count: 20
|
count: 20
|
||||||
dateformat:
|
dateformat:
|
||||||
|
default: null
|
||||||
short: 'jS M Y'
|
short: 'jS M Y'
|
||||||
long: 'F jS \a\t g:ia'
|
long: 'F jS \a\t g:ia'
|
||||||
publish_dates: true
|
publish_dates: true
|
||||||
@@ -53,7 +57,9 @@ pages:
|
|||||||
- json
|
- json
|
||||||
- rss
|
- rss
|
||||||
- atom
|
- atom
|
||||||
|
append_url_extension: ''
|
||||||
expires: 604800
|
expires: 604800
|
||||||
|
cache_control: null
|
||||||
last_modified: false
|
last_modified: false
|
||||||
etag: false
|
etag: false
|
||||||
vary_accept_encoding: false
|
vary_accept_encoding: false
|
||||||
@@ -73,16 +79,18 @@ pages:
|
|||||||
- form
|
- form
|
||||||
- forms
|
- forms
|
||||||
cache:
|
cache:
|
||||||
enabled: true
|
enabled: false
|
||||||
check:
|
check:
|
||||||
method: file
|
method: file
|
||||||
driver: auto
|
driver: auto
|
||||||
prefix: g
|
prefix: g
|
||||||
clear_images_by_default: true
|
clear_images_by_default: false
|
||||||
cli_compatibility: false
|
cli_compatibility: false
|
||||||
lifetime: 604800
|
lifetime: 604800
|
||||||
gzip: false
|
gzip: false
|
||||||
allow_webserver_gzip: false
|
allow_webserver_gzip: false
|
||||||
|
redis:
|
||||||
|
socket: false
|
||||||
twig:
|
twig:
|
||||||
cache: false
|
cache: false
|
||||||
debug: true
|
debug: true
|
||||||
@@ -121,6 +129,8 @@ images:
|
|||||||
auto_fix_orientation: false
|
auto_fix_orientation: false
|
||||||
media:
|
media:
|
||||||
enable_media_timestamp: false
|
enable_media_timestamp: false
|
||||||
|
unsupported_inline_types: { }
|
||||||
|
allowed_fallback_types: { }
|
||||||
auto_metadata_exif: false
|
auto_metadata_exif: false
|
||||||
upload_limit: 2097152
|
upload_limit: 2097152
|
||||||
session:
|
session:
|
||||||
@@ -131,8 +141,10 @@ session:
|
|||||||
secure: false
|
secure: false
|
||||||
httponly: true
|
httponly: true
|
||||||
split: true
|
split: true
|
||||||
|
path: null
|
||||||
gpm:
|
gpm:
|
||||||
releases: stable
|
releases: stable
|
||||||
|
proxy_url: null
|
||||||
method: auto
|
method: auto
|
||||||
verify_peer: true
|
verify_peer: true
|
||||||
official_gpm_only: true
|
official_gpm_only: true
|
||||||
|
|||||||
@@ -1,42 +0,0 @@
|
|||||||
---
|
|
||||||
title: Home
|
|
||||||
body_classes: title-center title-h1h2
|
|
||||||
---
|
|
||||||
|
|
||||||
# Say Hello to Grav!
|
|
||||||
## installation successful...
|
|
||||||
|
|
||||||
Congratulations! You have installed the **Base Grav Package** that provides a **simple page** and the default **Quark** theme to get you started.
|
|
||||||
|
|
||||||
!! If you see a **404 Error** when you click `Typography` in the menu, please refer to the [troubleshooting guide](http://learn.getgrav.org/troubleshooting/page-not-found).
|
|
||||||
|
|
||||||
### Find out all about Grav
|
|
||||||
|
|
||||||
* Learn about **Grav** by checking out our dedicated [Learn Grav](http://learn.getgrav.org) site.
|
|
||||||
* Download **plugins**, **themes**, as well as other Grav **skeleton** packages from the [Grav Downloads](http://getgrav.org/downloads) page.
|
|
||||||
* Check out our [Grav Development Blog](http://getgrav.org/blog) to find out the latest goings on in the Grav-verse.
|
|
||||||
|
|
||||||
!!! If you want a more **full-featured** base install, you should check out [**Skeleton** packages available in the downloads](http://getgrav.org/downloads).
|
|
||||||
|
|
||||||
### Edit this Page
|
|
||||||
|
|
||||||
To edit this page, simply navigate to the folder you installed **Grav** into, and then browse to the `user/pages/01.home` folder and open the `default.md` file in your [editor of choice](http://learn.getgrav.org/basics/requirements). You will see the content of this page in [Markdown format](http://learn.getgrav.org/content/markdown).
|
|
||||||
|
|
||||||
### Create a New Page
|
|
||||||
|
|
||||||
Creating a new page is a simple affair in **Grav**. Simply follow these simple steps:
|
|
||||||
|
|
||||||
1. Navigate to your pages folder: `user/pages/` and create a new folder. In this example, we will use [explicit default ordering](http://learn.getgrav.org/content/content-pages) and call the folder `02.mypage`.
|
|
||||||
2. Launch your text editor and paste in the following sample code:
|
|
||||||
|
|
||||||
---
|
|
||||||
title: My New Page
|
|
||||||
---
|
|
||||||
# My New Page!
|
|
||||||
|
|
||||||
This is the body of **my new page** and I can easily use _Markdown_ syntax here.
|
|
||||||
|
|
||||||
3. Save this file in the `user/pages/02.mypage/` folder as `default.md`. This will tell **Grav** to render the page using the **default** template.
|
|
||||||
4. That is it! Reload your browser to see your new page in the menu.
|
|
||||||
|
|
||||||
! NOTE: The page will automatically show up in the Menu after the "Home" menu item. If you wish to change the name that shows up in the Menu, simple add: `menu: My Page` between the dashes in the page content. This is called the YAML front matter, and it is where you configure page-specific options.
|
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
---
|
||||||
|
title: Projets
|
||||||
|
content:
|
||||||
|
items:
|
||||||
|
- '@self.children'
|
||||||
|
limit: 0
|
||||||
|
order:
|
||||||
|
by: date
|
||||||
|
dir: desc
|
||||||
|
pagination: true
|
||||||
|
url_taxonomy_filters: true
|
||||||
|
---
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
@@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
title: 'Projet N°1'
|
||||||
|
media_order: affiche_grainesdelecteurs_2014.jpg
|
||||||
|
mea: true
|
||||||
|
categories: test
|
||||||
|
---
|
||||||
|
|
||||||
|
Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices.
|
||||||
|
|
||||||
|
On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". Ils sont également connus sous les noms de texte blanc, faux-texte, bolo bolo, pseudo texte, texte factice, vrai faux texte, faux contenu, texte de remplissage, de remplacement, ou d'attente. Outre son usage dans les milieux de l'imprimerie et du graphisme, certains chansonniers en font l'utilisation lors de la composition de mélodies, chantant ces textes en amont de l'écriture de leur textes. L'utilisation de faux-textes aurait déjà été une pratique courante depuis le 16ème siècle dans les milieux de l'imprimerie et de la composition.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
@@ -0,0 +1,12 @@
|
|||||||
|
---
|
||||||
|
title: 'projet n°2'
|
||||||
|
media_order: 'brochure ESADHaR 2017.jpg'
|
||||||
|
mea: true
|
||||||
|
taxonomy:
|
||||||
|
category:
|
||||||
|
- Éditions
|
||||||
|
---
|
||||||
|
|
||||||
|
Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices.
|
||||||
|
|
||||||
|
On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". Ils sont également connus sous les noms de texte blanc, faux-texte, bolo bolo, pseudo texte, texte factice, vrai faux texte, faux contenu, texte de remplissage, de remplacement, ou d'attente. Outre son usage dans les milieux de l'imprimerie et du graphisme, certains chansonniers en font l'utilisation lors de la composition de mélodies, chantant ces textes en amont de l'écriture de leur textes. L'utilisation de faux-textes aurait déjà été une pratique courante depuis le 16ème siècle dans les milieux de l'imprimerie et de la composition.
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
---
|
||||||
|
title: 'projet n°3'
|
||||||
|
media_order: logo-Alliance_gris.svg
|
||||||
|
taxonomy:
|
||||||
|
category:
|
||||||
|
- logo
|
||||||
|
tag:
|
||||||
|
- mea
|
||||||
|
---
|
||||||
|
|
||||||
|
Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices.
|
||||||
|
|
||||||
|
On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". Ils sont également connus sous les noms de texte blanc, faux-texte, bolo bolo, pseudo texte, texte factice, vrai faux texte, faux contenu, texte de remplissage, de remplacement, ou d'attente. Outre son usage dans les milieux de l'imprimerie et du graphisme, certains chansonniers en font l'utilisation lors de la composition de mélodies, chantant ces textes en amont de l'écriture de leur textes. L'utilisation de faux-textes aurait déjà été une pratique courante depuis le 16ème siècle dans les milieux de l'imprimerie et de la composition.
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 841.89 595.28" style="enable-background:new 0 0 841.89 595.28;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#4D4D4F;}
|
||||||
|
.st1{fill:#919396;}
|
||||||
|
.st2{fill:url(#SVGID_1_);}
|
||||||
|
.st3{fill:url(#SVGID_2_);}
|
||||||
|
.st4{fill:url(#SVGID_3_);}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<path d="M335.99,334.74l30.55-75.25h11.59l30.1,75.25l-9.7,3.9l-8.7-22.3h-36.12l-8.7,22.08L335.99,334.74z M357.07,307.43h29.32
|
||||||
|
l-14.6-37.46L357.07,307.43z"/>
|
||||||
|
<path d="M424.96,318.35c0,8.03,3.57,11.82,9.48,11.82c2.79,0,5.68-0.78,7.69-1.67l2.45,8.14c-2.68,1.23-6.69,2.23-11.48,2.23
|
||||||
|
c-10.26,0-18.17-5.58-18.17-19.51v-64.33h10.03V318.35z"/>
|
||||||
|
<path d="M462.41,318.35c0,8.03,3.57,11.82,9.48,11.82c2.79,0,5.69-0.78,7.69-1.67l2.45,8.14c-2.68,1.23-6.69,2.23-11.48,2.23
|
||||||
|
c-10.26,0-18.17-5.58-18.17-19.51v-64.33h10.03V318.35z"/>
|
||||||
|
<path d="M489.5,262.61c0-4.24,2.68-7.02,7.02-7.02c3.9,0,7.02,3.23,7.02,7.02c0,4.24-2.68,7.02-7.02,7.02
|
||||||
|
C492.62,269.63,489.5,266.4,489.5,262.61z M501.54,337.53h-10.03v-57.97h10.03V337.53z"/>
|
||||||
|
<path d="M542.9,278.22c6.69,0,12.15,2.68,16.17,6.02v-4.68h9.14v43.92c0,5.69,3.34,6.8,6.58,6.8l-2.12,7.8
|
||||||
|
c-7.25,0-11.48-3.01-12.93-8.7c-3.45,4.79-9.14,9.48-18.17,9.48c-14.49,0-26.09-11.71-26.09-29.99
|
||||||
|
C515.47,291.6,526.73,278.22,542.9,278.22z M558.17,322.7V291.6c-4.01-2.79-8.92-4.68-14.27-4.68c-10.7,0-18.17,8.7-18.17,21.63
|
||||||
|
c0,12.6,7.69,21.41,18.06,21.41C549.37,329.95,554.72,326.94,558.17,322.7z"/>
|
||||||
|
<path d="M597.86,289.25c4.12-6.24,10.59-11.04,19.51-11.04c13.04,0,19.51,8.58,19.51,21.52v37.79h-10.03v-36.68
|
||||||
|
c0-8.36-4.12-13.82-11.15-13.82c-6.91,0-13.27,5.57-17.5,12.15v38.35h-10.03v-57.97h9.7V289.25z"/>
|
||||||
|
<path d="M691.17,290.15c-4.24-2.12-7.69-3.01-12.26-3.01c-10.48,0-18.39,7.92-18.39,21.18c0,12.04,7.14,21.63,17.73,21.63
|
||||||
|
c5.58,0,9.14-1.23,13.71-3.68l3.12,8.47c-4.68,2.56-10.26,4.12-17.5,4.12c-16.61,0-27.32-12.49-27.32-30.32
|
||||||
|
c0-16.72,10.81-30.32,28.09-30.32c6.58,0,11.26,1.23,15.83,3.46L691.17,290.15z"/>
|
||||||
|
<path d="M712.01,312.67c1.34,10.81,7.81,17.28,18.06,17.28c6.69,0,11.82-1.56,16.72-3.79l2.34,8.59
|
||||||
|
c-5.35,2.45-12.04,4.12-20.29,4.12c-16.61,0-27.09-11.15-27.09-30.32c0-17.39,10.59-30.32,26.2-30.32
|
||||||
|
c16.61,0,24.97,12.15,24.97,26.87c0,2.68-0.11,5.13-0.33,7.58H712.01z M711.9,304.53h31.77c0-11.26-6.02-17.61-15.94-17.61
|
||||||
|
C719.03,286.91,713.01,293.04,711.9,304.53z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M342.94,223.1c2.47,2.06,5.45,3.5,9.57,3.5c4.94,0,8.03-2.21,8.03-5.71c0-2.93-1.34-4.68-8.23-7.31
|
||||||
|
c-7.46-2.83-10.03-5.51-10.03-10.7c0-5.09,4.37-9.26,12.25-9.26c4.22,0,7.46,0.88,10.7,2.47l-1.8,4.17
|
||||||
|
c-2.32-1.34-5.61-2.42-9-2.42c-4.53,0-7.31,1.96-7.31,4.79c0,2.68,1.13,4.12,7.82,6.59c8.03,2.98,10.65,6.23,10.65,11.11
|
||||||
|
c0,6.69-5.45,10.55-13.07,10.55c-4.99,0-9.26-1.44-12.04-3.65L342.94,223.1z"/>
|
||||||
|
<path class="st0" d="M397.11,226.6c3.34,0,5.66-0.87,7.98-2.21l1.49,4.06c-2.52,1.39-5.71,2.42-10.03,2.42
|
||||||
|
c-9.42,0-15.9-7.1-15.9-18.47c0-11.01,6.48-18.78,16.52-18.78c3.45,0,6.17,0.67,8.64,1.85l-1.49,4.12c-2.11-1.03-4.22-1.7-7.2-1.7
|
||||||
|
c-6.64,0-11.47,5.25-11.47,14.3C385.64,220.83,390.42,226.6,397.11,226.6z"/>
|
||||||
|
<path class="st0" d="M451.95,200.46l-9.62,21.66h-4.84l-9.67-21.66v29.79h-4.63v-36.02h6.84l9.98,22.79l9.83-22.79h7v36.02h-4.89
|
||||||
|
V200.46z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="st1" d="M339.36,377.26l3.98-1.54l9.43,26.01l9.47-25.88l3.68,1.41l-10.97,28.92h-4.58L339.36,377.26z"/>
|
||||||
|
<path class="st1" d="M380.97,376.19h17.99v3.51h-13.92v9.13h12v3.43h-12v10.41h13.92v3.51h-17.99V376.19z"/>
|
||||||
|
<path class="st1" d="M432.99,406.69l-3.73-8.14c-1.89-4.07-4.58-5.61-9.04-5.61h-0.64v13.24h-4.07v-29.9
|
||||||
|
c3.04-0.3,5.61-0.43,8.78-0.43c7.28,0,11.01,3.3,11.01,7.97c0,4.16-2.57,6.64-7.24,7.88c2.31,1.03,3.73,2.4,5.48,6.17l3.26,7.03
|
||||||
|
L432.99,406.69z M419.58,379.45v10.07h4.71c4.11,0,6.94-1.89,6.94-5.31c0-2.83-2.48-4.93-6.94-4.93
|
||||||
|
C422.36,379.28,420.82,379.36,419.58,379.45z"/>
|
||||||
|
<path class="st1" d="M452.19,400.23c2.06,1.71,4.54,2.91,7.97,2.91c4.11,0,6.68-1.84,6.68-4.76c0-2.44-1.11-3.9-6.85-6.08
|
||||||
|
c-6.21-2.36-8.35-4.58-8.35-8.91c0-4.24,3.64-7.71,10.2-7.71c3.51,0,6.21,0.73,8.91,2.06l-1.5,3.47c-1.93-1.11-4.67-2.01-7.5-2.01
|
||||||
|
c-3.77,0-6.08,1.63-6.08,3.98c0,2.23,0.94,3.43,6.51,5.48c6.68,2.48,8.87,5.18,8.87,9.25c0,5.57-4.54,8.78-10.88,8.78
|
||||||
|
c-4.16,0-7.71-1.2-10.03-3.04L452.19,400.23z"/>
|
||||||
|
<path class="st1" d="M500.22,375.68c8.83,0,14.18,6.94,14.18,15.47c0,8.57-5.31,15.55-14.18,15.55c-8.87,0-14.14-6.98-14.14-15.55
|
||||||
|
C486.08,382.36,491.35,375.68,500.22,375.68z M500.22,403.18c6.6,0,10.03-5.18,10.03-12.04c0-6.13-3.73-11.95-10.03-11.95
|
||||||
|
s-9.98,5.18-9.98,11.95C490.24,397.35,493.93,403.18,500.22,403.18z"/>
|
||||||
|
<path class="st1" d="M535.02,381.42v24.76h-3.86v-29.99h5.4l13.24,24.93v-24.93h3.86v29.99h-5.31L535.02,381.42z"/>
|
||||||
|
<path class="st1" d="M597.46,393.24v-3.51h14.57v3.51H597.46z"/>
|
||||||
|
<path class="st1" d="M655.82,376.28c2.36-0.26,5.23-0.43,8.27-0.43c7.45,0,11.7,3.81,11.7,9.13c0,6.43-5.1,10.03-12.55,10.03
|
||||||
|
c-1.2,0-2.31-0.04-3.34-0.13v11.31h-4.07V376.28z M671.76,385.32c0-3.68-2.78-6.04-7.75-6.04c-1.54,0-2.91,0.04-4.11,0.17v11.95
|
||||||
|
c0.9,0.13,2.23,0.21,3.86,0.21C668.85,391.61,671.76,389.17,671.76,385.32z"/>
|
||||||
|
<path class="st1" d="M690.53,400.23c2.06,1.71,4.54,2.91,7.97,2.91c4.11,0,6.68-1.84,6.68-4.76c0-2.44-1.11-3.9-6.85-6.08
|
||||||
|
c-6.21-2.36-8.35-4.58-8.35-8.91c0-4.24,3.64-7.71,10.2-7.71c3.51,0,6.21,0.73,8.91,2.06l-1.5,3.47c-1.93-1.11-4.67-2.01-7.5-2.01
|
||||||
|
c-3.77,0-6.08,1.63-6.08,3.98c0,2.23,0.94,3.43,6.51,5.48c6.68,2.48,8.87,5.18,8.87,9.25c0,5.57-4.54,8.78-10.88,8.78
|
||||||
|
c-4.16,0-7.71-1.2-10.03-3.04L690.53,400.23z"/>
|
||||||
|
<path class="st1" d="M734.88,391.01l9-15.04l3.21,1.89l-10.32,16.92v11.4h-4.07v-11.4l-10.41-16.92l3.43-2.06L734.88,391.01z"/>
|
||||||
|
</g>
|
||||||
|
<path class="st0" d="M147.13,411.89c3.31,1.19,6.68,2.26,10.12,3.16c0.54,0.18,2.68,0.79,4.49,1.08
|
||||||
|
c12.04,1.72,12.12-19.35,12.12-19.35v-16.54v-9.17l-21.26-13.29c-48.08-32.2-49.1-46.32-49.67-54.02
|
||||||
|
c-0.56-7.7,6.22-55.51,6.59-63.28c0.28-5.84-11.56-11.52-17.46-13.99c-15.09,20.13-24.04,45.14-24.04,72.24
|
||||||
|
c0,52.02,32.94,96.34,79.1,113.24V411.89z"/>
|
||||||
|
<path class="st1" d="M285.08,226.49c-5.9,2.46-17.74,8.15-17.46,13.99c0.37,7.77,7.15,55.58,6.59,63.28
|
||||||
|
c-0.56,7.7-1.59,21.82-49.67,54.02l-20.37,12.73v9.7l-0.03,0.02v16.54c0,0,0.1,20.51,11.69,19.36
|
||||||
|
c53.43-12.36,93.28-60.22,93.28-117.41C309.12,271.63,300.17,246.63,285.08,226.49z"/>
|
||||||
|
<path d="M281.5,221.94c-22.11-26.73-55.53-43.76-92.93-43.76c-37.4,0-70.82,17.03-92.93,43.76l33.15,14.12
|
||||||
|
c0,0-6.13,50.34-4.38,66.56c1.75,16.22,40.91,31.43,40.91,31.43l8.53,3.12v-34.23c4.11,2.9,9.18,5.06,15.15,5.06
|
||||||
|
c6.01,0,11.08-2.14,15.17-5.01v33.85l7.64-2.8c0,0,39.16-15.21,40.91-31.43c1.76-16.22-4.38-66.56-4.38-66.56L281.5,221.94z
|
||||||
|
M214.5,255.93c0,3.81-2.93,19.35-4.81,22.12c-0.16,0.44-0.32,0.88-0.5,1.32c-0.01,0.01-0.02,0.06-0.03,0.07l0,0
|
||||||
|
c-3.57,8.18-11.45,13.91-20.58,13.91c-9.13,0-17.01-5.72-20.57-13.89c0,0,0,0,0,0c-0.01-0.01-0.02-0.06-0.03-0.08
|
||||||
|
c-0.19-0.45-0.37-0.9-0.54-1.36c-1.87-2.77-4.79-18.29-4.79-22.09c-0.1-1.37-0.12-2.74-0.04-4.11c0.9-14.85,12.19-26.59,25.97-26.59
|
||||||
|
c13.78,0,25.07,11.73,25.97,26.59C214.62,253.2,214.6,254.56,214.5,255.93z"/>
|
||||||
|
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="168.2021" y1="328.6225" x2="168.2021" y2="370.7565">
|
||||||
|
<stop offset="0" style="stop-color:#000000"/>
|
||||||
|
<stop offset="1" style="stop-color:#4D4D4F"/>
|
||||||
|
</linearGradient>
|
||||||
|
<rect x="162.55" y="328.62" class="st2" width="11.31" height="42.13"/>
|
||||||
|
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="209.7989" y1="328.6225" x2="209.7989" y2="370.7565">
|
||||||
|
<stop offset="0" style="stop-color:#000000"/>
|
||||||
|
<stop offset="1" style="stop-color:#919396"/>
|
||||||
|
</linearGradient>
|
||||||
|
<rect x="204.15" y="328.62" class="st3" width="11.31" height="42.13"/>
|
||||||
|
<path d="M149.42,207.95"/>
|
||||||
|
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="189.0456" y1="226.458" x2="189.0456" y2="189.325">
|
||||||
|
<stop offset="0" style="stop-color:#000000"/>
|
||||||
|
<stop offset="0.3726" style="stop-color:#070708"/>
|
||||||
|
<stop offset="0.5069" style="stop-color:#1E1E1F"/>
|
||||||
|
<stop offset="0.6026" style="stop-color:#383839"/>
|
||||||
|
<stop offset="0.68" style="stop-color:#4C4C4E"/>
|
||||||
|
<stop offset="0.7463" style="stop-color:#5F6062"/>
|
||||||
|
<stop offset="0.805" style="stop-color:#757679"/>
|
||||||
|
<stop offset="0.8581" style="stop-color:#8D8F91"/>
|
||||||
|
<stop offset="0.9069" style="stop-color:#AAACAF"/>
|
||||||
|
<stop offset="0.9523" style="stop-color:#CECFD1"/>
|
||||||
|
<stop offset="0.9926" style="stop-color:#F4F4F5"/>
|
||||||
|
<stop offset="1" style="stop-color:#FFFFFF"/>
|
||||||
|
</linearGradient>
|
||||||
|
<path class="st4" d="M193.24,216.29c25.18,0,46.4,2.85,66.99,7.84c-6.98-16.18-32.21-34.8-71.33-34.8
|
||||||
|
c-40.89,0-64.95,18.62-70.91,37.13c0,0.01-0.13-1.88-0.13-1.87C140.42,218.14,164.32,216.29,193.24,216.29z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.6 KiB |
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
title: 'projet n°4'
|
||||||
|
---
|
||||||
|
|
||||||
|
Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices.
|
||||||
|
|
||||||
|
On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". Ils sont également connus sous les noms de texte blanc, faux-texte, bolo bolo, pseudo texte, texte factice, vrai faux texte, faux contenu, texte de remplissage, de remplacement, ou d'attente. Outre son usage dans les milieux de l'imprimerie et du graphisme, certains chansonniers en font l'utilisation lors de la composition de mélodies, chantant ces textes en amont de l'écriture de leur textes. L'utilisation de faux-textes aurait déjà été une pratique courante depuis le 16ème siècle dans les milieux de l'imprimerie et de la composition.
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
title: Contact
|
||||||
|
---
|
||||||
|
|
||||||
|
Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices.
|
||||||
@@ -1,155 +0,0 @@
|
|||||||
---
|
|
||||||
title: Typography
|
|
||||||
---
|
|
||||||
|
|
||||||
! Details on the full capabilities of Spectre.css can be found in the [Official Spectre Documentation](https://picturepan2.github.io/spectre/elements.html)
|
|
||||||
|
|
||||||
The [Quark theme](https://github.com/getgrav/grav-theme-quark) is the new default theme for Grav built with [Spectre.css](https://picturepan2.github.io/spectre/) the lightweight, responsive and modern CSS framework. Spectre provides basic styles for typography, elements, and a responsive layout system that utilizes best practices and consistent language design.
|
|
||||||
|
|
||||||
### Headings
|
|
||||||
|
|
||||||
# H1 Heading `40px`
|
|
||||||
|
|
||||||
## H2 Heading `32px`
|
|
||||||
|
|
||||||
### H3 Heading `28px`
|
|
||||||
|
|
||||||
#### H4 Heading `24px`
|
|
||||||
|
|
||||||
##### H5 Heading `20px`
|
|
||||||
|
|
||||||
###### H6 Heading `16px`
|
|
||||||
|
|
||||||
```html
|
|
||||||
# H1 Heading
|
|
||||||
# H1 Heading `40px`</small>`
|
|
||||||
|
|
||||||
<span class="h1">H1 Heading</span>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Paragraphs
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur [adipiscing elit. Praesent risus leo, dictum in vehicula sit amet](#), feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
|
|
||||||
|
|
||||||
Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
|
|
||||||
|
|
||||||
### Markdown Semantic Text Elements
|
|
||||||
|
|
||||||
**Bold** `**Bold**`
|
|
||||||
|
|
||||||
_Italic_ `_Italic_`
|
|
||||||
|
|
||||||
~~Deleted~~ `~~Deleted~~`
|
|
||||||
|
|
||||||
`Inline Code` `` `Inline Code` ``
|
|
||||||
|
|
||||||
### HTML Semantic Text Elements
|
|
||||||
|
|
||||||
<abbr>I18N</abbr> `<abbr>`
|
|
||||||
|
|
||||||
<cite>Citation</cite> `<cite>`
|
|
||||||
|
|
||||||
<kbd>Ctrl + S</kbd> `<kbd>`
|
|
||||||
|
|
||||||
Text<sup>Superscripted</sup> `<sup>`
|
|
||||||
|
|
||||||
Text<sub>Subscripted</sub> `<sub>`
|
|
||||||
|
|
||||||
<u>Underlined</u> `<u>`
|
|
||||||
|
|
||||||
<mark>Highlighted</mark> `<mark>`
|
|
||||||
|
|
||||||
<time>20:14</time> `<time>`
|
|
||||||
|
|
||||||
<var>x = y + 2</var> `<var>`
|
|
||||||
|
|
||||||
### Blockquote
|
|
||||||
|
|
||||||
> The advance of technology is based on making it fit in so that you don't really even notice it,
|
|
||||||
> so it's part of everyday life.
|
|
||||||
>
|
|
||||||
> <cite>- Bill Gates</cite>
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
> The advance of technology is based on making it fit in so that you don't really even notice it,
|
|
||||||
> so it's part of everyday life.
|
|
||||||
>
|
|
||||||
> <cite>- Bill Gates</cite>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Unordered List
|
|
||||||
|
|
||||||
* list item 1
|
|
||||||
* list item 2
|
|
||||||
* list item 2.1
|
|
||||||
* list item 2.2
|
|
||||||
* list item 2.3
|
|
||||||
* list item 3
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
* list item 1
|
|
||||||
* list item 2
|
|
||||||
* list item 2.1
|
|
||||||
* list item 2.2
|
|
||||||
* list item 2.3
|
|
||||||
* list item 3
|
|
||||||
```
|
|
||||||
|
|
||||||
### Ordered List
|
|
||||||
|
|
||||||
1. list item 1
|
|
||||||
1. list item 2
|
|
||||||
1. list item 2.1
|
|
||||||
1. list item 2.2
|
|
||||||
1. list item 2.3
|
|
||||||
1. list item 3
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
1. list item 1
|
|
||||||
1. list item 2
|
|
||||||
1. list item 2.1
|
|
||||||
1. list item 2.2
|
|
||||||
1. list item 2.3
|
|
||||||
1. list item 3
|
|
||||||
```
|
|
||||||
|
|
||||||
### Table
|
|
||||||
|
|
||||||
| Name | Genre | Release date |
|
|
||||||
| :-------------------------- | :---------------------------: | -------------------: |
|
|
||||||
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
|
|
||||||
| The Godfather | Crime, Drama | 24 March 1972 |
|
|
||||||
| Schindler's List | Biography, Drama, History | 4 February 1994 |
|
|
||||||
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
| Name | Genre | Release date |
|
|
||||||
| :-------------------------- | :---------------------------: | -------------------: |
|
|
||||||
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
|
|
||||||
| The Godfather | Crime, Drama | 24 March 1972 |
|
|
||||||
| Schindler's List | Biography, Drama, History | 4 February 1994 |
|
|
||||||
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
|
|
||||||
```
|
|
||||||
|
|
||||||
### Notices
|
|
||||||
|
|
||||||
The notices styles are actually provided by the `markdown-notices` plugin but are useful enough to include here:
|
|
||||||
|
|
||||||
! This is a warning notification
|
|
||||||
|
|
||||||
!! This is a error notification
|
|
||||||
|
|
||||||
!!! This is a default notification
|
|
||||||
|
|
||||||
!!!! This is a success notification
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
! This is a warning notification
|
|
||||||
|
|
||||||
!! This is a error notification
|
|
||||||
|
|
||||||
!!! This is a default notification
|
|
||||||
|
|
||||||
!!!! This is a success notification
|
|
||||||
```
|
|
||||||
|
|
||||||
@@ -5,6 +5,18 @@ form:
|
|||||||
tabs:
|
tabs:
|
||||||
|
|
||||||
fields:
|
fields:
|
||||||
|
content:
|
||||||
|
fields:
|
||||||
|
header.mea:
|
||||||
|
type: toggle
|
||||||
|
label: Mettre en avant le projet
|
||||||
|
highlight: 1
|
||||||
|
options:
|
||||||
|
1: PLUGIN_ADMIN.YES
|
||||||
|
0: PLUGIN_ADMIN.NO
|
||||||
|
validate:
|
||||||
|
type: bool
|
||||||
|
|
||||||
blog:
|
blog:
|
||||||
type: tab
|
type: tab
|
||||||
title: Blog Item
|
title: Blog Item
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
-1
@@ -4,7 +4,7 @@ namespace Grav\Theme;
|
|||||||
use Grav\Common\Grav;
|
use Grav\Common\Grav;
|
||||||
use Grav\Common\Theme;
|
use Grav\Common\Theme;
|
||||||
|
|
||||||
class gilles-acezat extends Theme
|
class gilles_acezat extends Theme
|
||||||
{
|
{
|
||||||
public static function getSubscribedEvents()
|
public static function getSubscribedEvents()
|
||||||
{
|
{
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
// Variables and mixins
|
|
||||||
@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,10 +0,0 @@
|
|||||||
// Variables and mixins
|
|
||||||
@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,51 +0,0 @@
|
|||||||
// Variables and mixins
|
|
||||||
@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/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 "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, 42.5%));
|
|
||||||
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: 1.2rem;
|
|
||||||
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,423 +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 {
|
|
||||||
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 {
|
|
||||||
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%;
|
|
||||||
}
|
|
||||||
.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 {
|
|
||||||
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%;
|
|
||||||
}
|
|
||||||
.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 {
|
|
||||||
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%;
|
|
||||||
}
|
|
||||||
.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 {
|
|
||||||
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%;
|
|
||||||
}
|
|
||||||
.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 {
|
|
||||||
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%;
|
|
||||||
}
|
|
||||||
.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,62 +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;
|
|
||||||
text-decoration: none;
|
|
||||||
user-select: 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 {
|
|
||||||
float: right;
|
|
||||||
padding: $unit-1 0;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
margin-top: -$unit-h;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
// Popovers
|
|
||||||
.popover {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.popover-container {
|
|
||||||
left: 50%;
|
|
||||||
opacity: 0;
|
|
||||||
padding: $layout-spacing;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
transform: translate(-50%, -50%) scale(0);
|
|
||||||
transition: transform .2s;
|
|
||||||
width: $control-width-sm;
|
|
||||||
z-index: $zindex-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
*:focus + .popover-container,
|
|
||||||
&:hover .popover-container {
|
|
||||||
display: block;
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(-50%, -100%) scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.popover-right {
|
|
||||||
.popover-container {
|
|
||||||
left: 100%;
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
*:focus + .popover-container,
|
|
||||||
&:hover .popover-container {
|
|
||||||
transform: translate(0, -50%) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.popover-bottom {
|
|
||||||
.popover-container {
|
|
||||||
left: 50%;
|
|
||||||
top: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
*:focus + .popover-container,
|
|
||||||
&:hover .popover-container {
|
|
||||||
transform: translate(-50%, 0) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.popover-left {
|
|
||||||
.popover-container {
|
|
||||||
left: 0;
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
*:focus + .popover-container,
|
|
||||||
&:hover .popover-container {
|
|
||||||
transform: translate(-100%, -50%) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
@include shadow-variant(.2rem);
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
// Progress
|
|
||||||
// Credit: https://css-tricks.com/html5-progress-element/
|
|
||||||
.progress {
|
|
||||||
appearance: none;
|
|
||||||
background: $bg-color-dark;
|
|
||||||
border: 0;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
color: $primary-color;
|
|
||||||
height: $unit-1;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::-webkit-progress-bar {
|
|
||||||
background: transparent;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-progress-value {
|
|
||||||
background: $primary-color;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-progress-bar {
|
|
||||||
background: $primary-color;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:indeterminate {
|
|
||||||
animation: progress-indeterminate 1.5s linear infinite;
|
|
||||||
background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
|
|
||||||
|
|
||||||
&::-moz-progress-bar {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes progress-indeterminate {
|
|
||||||
0% {
|
|
||||||
background-position: 200% 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: -200% 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
// Sliders
|
|
||||||
// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
|
|
||||||
.slider {
|
|
||||||
appearance: none;
|
|
||||||
background: transparent;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: $unit-6;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow();
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip:not([data-tooltip]) {
|
|
||||||
&::after {
|
|
||||||
content: attr(value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Slider Thumb
|
|
||||||
&::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
background: $primary-color;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: $unit-3;
|
|
||||||
margin-top: -($unit-3 - $unit-h) / 2;
|
|
||||||
transition: transform .2s;
|
|
||||||
width: $unit-3;
|
|
||||||
}
|
|
||||||
&::-moz-range-thumb {
|
|
||||||
background: $primary-color;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: $unit-3;
|
|
||||||
transition: transform .2s;
|
|
||||||
width: $unit-3;
|
|
||||||
}
|
|
||||||
&::-ms-thumb {
|
|
||||||
background: $primary-color;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: $unit-3;
|
|
||||||
transition: transform .2s;
|
|
||||||
width: $unit-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
&::-webkit-slider-thumb {
|
|
||||||
transform: scale(1.25);
|
|
||||||
}
|
|
||||||
&::-moz-range-thumb {
|
|
||||||
transform: scale(1.25);
|
|
||||||
}
|
|
||||||
&::-ms-thumb {
|
|
||||||
transform: scale(1.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled,
|
|
||||||
&.disabled {
|
|
||||||
&::-webkit-slider-thumb {
|
|
||||||
background: $gray-color-light;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
&::-moz-range-thumb {
|
|
||||||
background: $gray-color-light;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
&::-ms-thumb {
|
|
||||||
background: $gray-color-light;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Slider Track
|
|
||||||
&::-webkit-slider-runnable-track {
|
|
||||||
background: $bg-color-dark;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
height: $unit-h;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
&::-moz-range-track {
|
|
||||||
background: $bg-color-dark;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
height: $unit-h;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
&::-ms-track {
|
|
||||||
background: $bg-color-dark;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
height: $unit-h;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
&::-ms-fill-lower {
|
|
||||||
background: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
// Steps
|
|
||||||
.step {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
list-style: none;
|
|
||||||
margin: $unit-1 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.step-item {
|
|
||||||
flex: 1 1 0;
|
|
||||||
margin-top: 0;
|
|
||||||
min-height: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:not(:first-child)::before {
|
|
||||||
background: $primary-color;
|
|
||||||
content: "";
|
|
||||||
height: 2px;
|
|
||||||
left: -50%;
|
|
||||||
position: absolute;
|
|
||||||
top: 9px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $primary-color;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 20px 10px 0;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: $primary-color;
|
|
||||||
border: $border-width-lg solid $light-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: $unit-3;
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
top: $unit-1;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: $unit-3;
|
|
||||||
z-index: $zindex-0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
a {
|
|
||||||
&::before {
|
|
||||||
background: $light-color;
|
|
||||||
border: $border-width-lg solid $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& ~ .step-item {
|
|
||||||
&::before {
|
|
||||||
background: $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $gray-color;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: $border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
// Tables
|
|
||||||
.table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
width: 100%;
|
|
||||||
@if $rtl == true {
|
|
||||||
text-align: right;
|
|
||||||
} @else {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.table-striped {
|
|
||||||
tbody {
|
|
||||||
tr:nth-of-type(odd) {
|
|
||||||
background: $bg-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&,
|
|
||||||
&.table-striped {
|
|
||||||
tbody {
|
|
||||||
tr {
|
|
||||||
&.active {
|
|
||||||
background: $bg-color-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.table-hover {
|
|
||||||
tbody {
|
|
||||||
tr {
|
|
||||||
&:hover {
|
|
||||||
background: $bg-color-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Scollable tables
|
|
||||||
&.table-scroll {
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
border-bottom: $border-width solid $border-color;
|
|
||||||
padding: $unit-3 $unit-2;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
border-bottom-width: $border-width-lg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
// Tabs
|
|
||||||
.tab {
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: $border-width solid $border-color;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
list-style: none;
|
|
||||||
margin: $unit-1 0 ($unit-1 - $border-width) 0;
|
|
||||||
|
|
||||||
.tab-item {
|
|
||||||
margin-top: 0;
|
|
||||||
|
|
||||||
a {
|
|
||||||
border-bottom: $border-width-lg solid transparent;
|
|
||||||
color: inherit;
|
|
||||||
display: block;
|
|
||||||
margin: 0 $unit-2 0 0;
|
|
||||||
padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
|
|
||||||
text-decoration: none;
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
color: $link-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active a,
|
|
||||||
a.active {
|
|
||||||
border-bottom-color: $primary-color;
|
|
||||||
color: $link-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tab-action {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-clear {
|
|
||||||
margin-top: -$unit-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tab-block {
|
|
||||||
.tab-item {
|
|
||||||
flex: 1 0 0;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
a {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
&[data-badge]::after {
|
|
||||||
position: absolute;
|
|
||||||
right: $unit-h;
|
|
||||||
top: $unit-h;
|
|
||||||
transform: translate(0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.tab-block) {
|
|
||||||
.badge {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
// Tiles
|
|
||||||
.tile {
|
|
||||||
align-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.tile-icon,
|
|
||||||
.tile-action {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
.tile-content {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
&:not(:first-child) {
|
|
||||||
padding-left: $unit-2;
|
|
||||||
}
|
|
||||||
&:not(:last-child) {
|
|
||||||
padding-right: $unit-2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tile-title,
|
|
||||||
.tile-subtitle {
|
|
||||||
line-height: $line-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tile-centered {
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.tile-content {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile-title,
|
|
||||||
.tile-subtitle {
|
|
||||||
@include text-ellipsis();
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
// Timelines
|
|
||||||
.timeline {
|
|
||||||
.timeline-item {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: $unit-6;
|
|
||||||
position: relative;
|
|
||||||
&::before {
|
|
||||||
background: $border-color;
|
|
||||||
content: "";
|
|
||||||
height: 100%;
|
|
||||||
left: 11px;
|
|
||||||
position: absolute;
|
|
||||||
top: $unit-6;
|
|
||||||
width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-left {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-content {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
padding: 2px 0 2px $layout-spacing-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-icon {
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
color: $light-color;
|
|
||||||
display: flex;
|
|
||||||
height: $unit-6;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
width: $unit-6;
|
|
||||||
&::before {
|
|
||||||
border: $border-width-lg solid $primary-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: $unit-2;
|
|
||||||
left: $unit-2;
|
|
||||||
position: absolute;
|
|
||||||
top: $unit-2;
|
|
||||||
width: $unit-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.icon-lg {
|
|
||||||
background: $primary-color;
|
|
||||||
line-height: $line-height;
|
|
||||||
&::before {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
// Toasts
|
|
||||||
.toast {
|
|
||||||
@include toast-variant($dark-color);
|
|
||||||
border: $border-width solid $dark-color;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
color: $light-color;
|
|
||||||
display: block;
|
|
||||||
padding: $layout-spacing;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&.toast-primary {
|
|
||||||
@include toast-variant($primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-success {
|
|
||||||
@include toast-variant($success-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-warning {
|
|
||||||
@include toast-variant($warning-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-error {
|
|
||||||
@include toast-variant($error-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $light-color;
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
opacity: .75;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-clear {
|
|
||||||
margin: $unit-h;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
// Tooltips
|
|
||||||
.tooltip {
|
|
||||||
position: relative;
|
|
||||||
&::after {
|
|
||||||
background: rgba($dark-color, .95);
|
|
||||||
border-radius: $border-radius;
|
|
||||||
bottom: 100%;
|
|
||||||
color: $light-color;
|
|
||||||
content: attr(data-tooltip);
|
|
||||||
display: block;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
left: 50%;
|
|
||||||
max-width: $control-width-sm;
|
|
||||||
opacity: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: $unit-1 $unit-2;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
transform: translate(-50%, $unit-2);
|
|
||||||
transition: opacity .2s, transform .2s;
|
|
||||||
white-space: pre;
|
|
||||||
z-index: $zindex-3;
|
|
||||||
}
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(-50%, -$unit-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[disabled],
|
|
||||||
&.disabled {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip-right {
|
|
||||||
&::after {
|
|
||||||
bottom: 50%;
|
|
||||||
left: 100%;
|
|
||||||
transform: translate(-$unit-1, 50%);
|
|
||||||
}
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
transform: translate($unit-1, 50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip-bottom {
|
|
||||||
&::after {
|
|
||||||
bottom: auto;
|
|
||||||
top: 100%;
|
|
||||||
transform: translate(-50%, -$unit-2);
|
|
||||||
}
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
transform: translate(-50%, $unit-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip-left {
|
|
||||||
&::after {
|
|
||||||
bottom: 50%;
|
|
||||||
left: auto;
|
|
||||||
right: 100%;
|
|
||||||
transform: translate($unit-2, 50%);
|
|
||||||
}
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
transform: translate(-$unit-1, 50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
// Typography
|
|
||||||
// Headings
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
color: inherit;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin-bottom: .5em;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.h1,
|
|
||||||
.h2,
|
|
||||||
.h3,
|
|
||||||
.h4,
|
|
||||||
.h5,
|
|
||||||
.h6 {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
h1,
|
|
||||||
.h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
h2,
|
|
||||||
.h2 {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
h3,
|
|
||||||
.h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
h4,
|
|
||||||
.h4 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
h5,
|
|
||||||
.h5 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
h6,
|
|
||||||
.h6 {
|
|
||||||
font-size: .8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Paragraphs
|
|
||||||
p {
|
|
||||||
margin: 0 0 $line-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Semantic text elements
|
|
||||||
a,
|
|
||||||
ins,
|
|
||||||
u {
|
|
||||||
text-decoration-skip: ink edges;
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: $border-width dotted;
|
|
||||||
cursor: help;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd {
|
|
||||||
@include label-base();
|
|
||||||
@include label-variant($light-color, $dark-color);
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
@include label-variant($body-font-color, $highlight-color);
|
|
||||||
border-bottom: $unit-o solid darken($highlight-color, 15%);
|
|
||||||
border-radius: $border-radius;
|
|
||||||
padding: $unit-o $unit-h 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Blockquote
|
|
||||||
blockquote {
|
|
||||||
border-left: $border-width-lg solid $border-color;
|
|
||||||
margin-left: 0;
|
|
||||||
padding: $unit-2 $unit-4;
|
|
||||||
|
|
||||||
p:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lists
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
margin: $unit-4 0 $unit-4 $unit-4;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
margin: $unit-4 0 $unit-4 $unit-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-top: $unit-2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: disc inside;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: circle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
list-style: decimal inside;
|
|
||||||
|
|
||||||
ol {
|
|
||||||
list-style-type: lower-alpha;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dl {
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
dd {
|
|
||||||
margin: $unit-2 0 $unit-4 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
@import "utilities/colors";
|
|
||||||
@import "utilities/cursors";
|
|
||||||
@import "utilities/display";
|
|
||||||
@import "utilities/divider";
|
|
||||||
@import "utilities/loading";
|
|
||||||
@import "utilities/position";
|
|
||||||
@import "utilities/shapes";
|
|
||||||
@import "utilities/text";
|
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
// Core variables
|
|
||||||
$version: "0.5.7";
|
|
||||||
|
|
||||||
// Core features
|
|
||||||
$rtl: false !default;
|
|
||||||
|
|
||||||
// Core colors
|
|
||||||
$primary-color: #3085EE !default;
|
|
||||||
$primary-color-dark: darken($primary-color, 3%) !default;
|
|
||||||
$primary-color-light: lighten($primary-color, 3%) !default;
|
|
||||||
$secondary-color: lighten($primary-color, 37.5%) !default;
|
|
||||||
$secondary-color-dark: darken($secondary-color, 3%) !default;
|
|
||||||
$secondary-color-light: lighten($secondary-color, 3%) !default;
|
|
||||||
|
|
||||||
// Gray colors
|
|
||||||
$dark-color: #454d5d !default;
|
|
||||||
$light-color: #fff !default;
|
|
||||||
$gray-color: lighten($dark-color, 40%) !default;
|
|
||||||
$gray-color-dark: darken($gray-color, 25%) !default;
|
|
||||||
$gray-color-light: lighten($gray-color, 20%) !default;
|
|
||||||
|
|
||||||
$border-color: lighten($dark-color, 60%) !default;
|
|
||||||
$border-color-dark: darken($border-color, 10%) !default;
|
|
||||||
$bg-color: lighten($dark-color, 66%) !default;
|
|
||||||
$bg-color-dark: darken($bg-color, 3%) !default;
|
|
||||||
$bg-color-light: $light-color !default;
|
|
||||||
|
|
||||||
// Control colors
|
|
||||||
$success-color: #32b643 !default;
|
|
||||||
$warning-color: #ffb700 !default;
|
|
||||||
$error-color: #e85600 !default;
|
|
||||||
|
|
||||||
// Other colors
|
|
||||||
$code-color: #d73e48 !default;
|
|
||||||
$highlight-color: #ffe9b3 !default;
|
|
||||||
$body-bg: $bg-color-light !default;
|
|
||||||
$body-font-color: lighten($dark-color, 5%) !default;
|
|
||||||
$link-color: $primary-color !default;
|
|
||||||
$link-color-dark: darken($link-color, 10%) !default;
|
|
||||||
$link-color-light: lighten($link-color, 10%) !default;
|
|
||||||
|
|
||||||
// Fonts
|
|
||||||
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
|
|
||||||
$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
|
|
||||||
$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
|
|
||||||
$fallback-font-family: "Helvetica Neue", sans-serif !default;
|
|
||||||
$cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
|
|
||||||
$cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default;
|
|
||||||
$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default;
|
|
||||||
$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default;
|
|
||||||
$body-font-family: $base-font-family, $fallback-font-family !default;
|
|
||||||
|
|
||||||
// Unit sizes
|
|
||||||
$unit-o: .05rem !default;
|
|
||||||
$unit-h: .1rem !default;
|
|
||||||
$unit-1: .2rem !default;
|
|
||||||
$unit-2: .4rem !default;
|
|
||||||
$unit-3: .6rem !default;
|
|
||||||
$unit-4: .8rem !default;
|
|
||||||
$unit-5: 1rem !default;
|
|
||||||
$unit-6: 1.2rem !default;
|
|
||||||
$unit-7: 1.4rem !default;
|
|
||||||
$unit-8: 1.6rem !default;
|
|
||||||
$unit-9: 1.8rem !default;
|
|
||||||
$unit-10: 2rem !default;
|
|
||||||
$unit-12: 2.4rem !default;
|
|
||||||
$unit-16: 3.2rem !default;
|
|
||||||
|
|
||||||
// Font sizes
|
|
||||||
$html-font-size: 20px !default;
|
|
||||||
$html-line-height: 1.5 !default;
|
|
||||||
$font-size: .8rem !default;
|
|
||||||
$font-size-sm: .7rem !default;
|
|
||||||
$font-size-lg: .9rem !default;
|
|
||||||
$line-height: 1.2rem !default;
|
|
||||||
|
|
||||||
// Sizes
|
|
||||||
$layout-spacing: $unit-2 !default;
|
|
||||||
$layout-spacing-sm: $unit-1 !default;
|
|
||||||
$layout-spacing-lg: $unit-4 !default;
|
|
||||||
$border-radius: $unit-h !default;
|
|
||||||
$border-width: $unit-o !default;
|
|
||||||
$border-width-lg: $unit-h !default;
|
|
||||||
$control-size: $unit-9 !default;
|
|
||||||
$control-size-sm: $unit-7 !default;
|
|
||||||
$control-size-lg: $unit-10 !default;
|
|
||||||
$control-padding-x: $unit-2 !default;
|
|
||||||
$control-padding-x-sm: $unit-2 * .75 !default;
|
|
||||||
$control-padding-x-lg: $unit-2 * 1.5 !default;
|
|
||||||
$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
|
|
||||||
$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
|
|
||||||
$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
|
|
||||||
$control-icon-size: .8rem !default;
|
|
||||||
|
|
||||||
$control-width-xs: 180px !default;
|
|
||||||
$control-width-sm: 320px !default;
|
|
||||||
$control-width-md: 640px !default;
|
|
||||||
$control-width-lg: 960px !default;
|
|
||||||
$control-width-xl: 1280px !default;
|
|
||||||
|
|
||||||
// Responsive breakpoints
|
|
||||||
$size-xs: 480px !default;
|
|
||||||
$size-sm: 600px !default;
|
|
||||||
$size-md: 840px !default;
|
|
||||||
$size-lg: 960px !default;
|
|
||||||
$size-xl: 1280px !default;
|
|
||||||
$size-2x: 1440px !default;
|
|
||||||
|
|
||||||
$responsive-breakpoint: $size-xs !default;
|
|
||||||
|
|
||||||
// Z-index
|
|
||||||
$zindex-0: 1 !default;
|
|
||||||
$zindex-1: 100 !default;
|
|
||||||
$zindex-2: 200 !default;
|
|
||||||
$zindex-3: 300 !default;
|
|
||||||
$zindex-4: 400 !default;
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
// 360 Degree Viewer
|
|
||||||
// The number of images
|
|
||||||
$image-height: 9rem;
|
|
||||||
$image-number: 36 !default;
|
|
||||||
$image-width: 24rem;
|
|
||||||
|
|
||||||
.viewer-360 {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
@for $s from 1 through ($image-number) {
|
|
||||||
.viewer-slider[value='#{$s}'] + .viewer-image {
|
|
||||||
background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewer-slider {
|
|
||||||
cursor: ew-resize;
|
|
||||||
margin: 1rem;
|
|
||||||
order: 2;
|
|
||||||
width: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewer-image {
|
|
||||||
background-position-y: 0;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100%;
|
|
||||||
height: $image-height;
|
|
||||||
order: 1;
|
|
||||||
width: $image-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,315 +0,0 @@
|
|||||||
// Icon resize
|
|
||||||
.icon-resize-horiz,
|
|
||||||
.icon-resize-vert {
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-right: 0;
|
|
||||||
height: .45em;
|
|
||||||
width: .45em;
|
|
||||||
}
|
|
||||||
&::before {
|
|
||||||
transform: translate(-50%, -90%) rotate(45deg);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
transform: translate(-50%, -10%) rotate(225deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-resize-horiz {
|
|
||||||
&::before {
|
|
||||||
transform: translate(-90%, -50%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
transform: translate(-10%, -50%) rotate(135deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon more
|
|
||||||
.icon-more-horiz,
|
|
||||||
.icon-more-vert {
|
|
||||||
&::before {
|
|
||||||
background: currentColor;
|
|
||||||
box-shadow: -.4em 0, .4em 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 3px;
|
|
||||||
width: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-more-vert {
|
|
||||||
&::before {
|
|
||||||
box-shadow: 0 -.4em, 0 .4em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon plus, minus, cross
|
|
||||||
.icon-plus,
|
|
||||||
.icon-minus,
|
|
||||||
.icon-cross {
|
|
||||||
&::before {
|
|
||||||
background: currentColor;
|
|
||||||
height: $icon-border-width;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-plus,
|
|
||||||
.icon-cross {
|
|
||||||
&::after {
|
|
||||||
background: currentColor;
|
|
||||||
height: 100%;
|
|
||||||
width: $icon-border-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-cross {
|
|
||||||
&::before {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
transform: translate(-50%, -50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon check
|
|
||||||
.icon-check {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-right: 0;
|
|
||||||
border-top: 0;
|
|
||||||
height: .5em;
|
|
||||||
width: .9em;
|
|
||||||
transform: translate(-50%, -75%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon stop
|
|
||||||
.icon-stop {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
&::before {
|
|
||||||
background: currentColor;
|
|
||||||
height: $icon-border-width;
|
|
||||||
transform: translate(-50%, -50%) rotate(45deg);
|
|
||||||
width: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon shutdown
|
|
||||||
.icon-shutdown {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-top-color: transparent;
|
|
||||||
&::before {
|
|
||||||
background: currentColor;
|
|
||||||
content: "";
|
|
||||||
height: .5em;
|
|
||||||
top: .1em;
|
|
||||||
width: $icon-border-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon refresh
|
|
||||||
.icon-refresh {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-right-color: transparent;
|
|
||||||
height: 1em;
|
|
||||||
width: 1em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: .2em solid currentColor;
|
|
||||||
border-top-color: transparent;
|
|
||||||
border-left-color: transparent;
|
|
||||||
height: 0;
|
|
||||||
left: 80%;
|
|
||||||
top: 20%;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon search
|
|
||||||
.icon-search {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: .75em;
|
|
||||||
left: 5%;
|
|
||||||
top: 5%;
|
|
||||||
transform: translate(0, 0) rotate(45deg);
|
|
||||||
width: .75em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
background: currentColor;
|
|
||||||
height: $icon-border-width;
|
|
||||||
left: 80%;
|
|
||||||
top: 80%;
|
|
||||||
transform: translate(-50%, -50%) rotate(45deg);
|
|
||||||
width: .4em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon edit
|
|
||||||
.icon-edit {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
height: .4em;
|
|
||||||
transform: translate(-40%, -60%) rotate(-45deg);
|
|
||||||
width: .85em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: .15em solid currentColor;
|
|
||||||
border-top-color: transparent;
|
|
||||||
border-right-color: transparent;
|
|
||||||
height: 0;
|
|
||||||
left: 5%;
|
|
||||||
top: 95%;
|
|
||||||
transform: translate(0, -100%);
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon delete
|
|
||||||
.icon-delete {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom-left-radius: $border-radius;
|
|
||||||
border-bottom-right-radius: $border-radius;
|
|
||||||
border-top: 0;
|
|
||||||
height: .75em;
|
|
||||||
top: 60%;
|
|
||||||
width: .75em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
background: currentColor;
|
|
||||||
box-shadow: -.25em .2em, .25em .2em;
|
|
||||||
height: $icon-border-width;
|
|
||||||
top: $icon-border-width/2;
|
|
||||||
width: .5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon share
|
|
||||||
.icon-share {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
border-right: 0;
|
|
||||||
border-top: 0;
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-left: 0;
|
|
||||||
border-top: 0;
|
|
||||||
height: .4em;
|
|
||||||
left: 100%;
|
|
||||||
top: .25em;
|
|
||||||
transform: translate(-125%, -50%) rotate(-45deg);
|
|
||||||
width: .4em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-right: 0;
|
|
||||||
border-radius: 75% 0;
|
|
||||||
height: .5em;
|
|
||||||
width: .6em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon flag
|
|
||||||
.icon-flag {
|
|
||||||
&::before {
|
|
||||||
background: currentColor;
|
|
||||||
height: 1em;
|
|
||||||
left: 15%;
|
|
||||||
width: $icon-border-width;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom-right-radius: $border-radius;
|
|
||||||
border-left: 0;
|
|
||||||
border-top-right-radius: $border-radius;
|
|
||||||
height: .65em;
|
|
||||||
top: 35%;
|
|
||||||
left: 60%;
|
|
||||||
width: .8em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon bookmark
|
|
||||||
.icon-bookmark {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-top-left-radius: $border-radius;
|
|
||||||
border-top-right-radius: $border-radius;
|
|
||||||
height: .9em;
|
|
||||||
width: .8em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-left: 0;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
height: .5em;
|
|
||||||
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
|
|
||||||
width: .5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon download & upload
|
|
||||||
.icon-download,
|
|
||||||
.icon-upload {
|
|
||||||
border-bottom: $icon-border-width solid currentColor;
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-right: 0;
|
|
||||||
height: .5em;
|
|
||||||
width: .5em;
|
|
||||||
transform: translate(-50%, -60%) rotate(-135deg);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
background: currentColor;
|
|
||||||
height: .6em;
|
|
||||||
top: 40%;
|
|
||||||
width: $icon-border-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-upload {
|
|
||||||
&::before {
|
|
||||||
transform: translate(-50%, -60%) rotate(45deg);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon copy
|
|
||||||
.icon-copy {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
border-right: 0;
|
|
||||||
border-bottom: 0;
|
|
||||||
height: .8em;
|
|
||||||
left: 40%;
|
|
||||||
top: 35%;
|
|
||||||
width: .8em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
height: .8em;
|
|
||||||
left: 60%;
|
|
||||||
top: 60%;
|
|
||||||
width: .8em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
// Icon variables
|
|
||||||
$icon-border-width: $border-width-lg;
|
|
||||||
$icon-prefix: "icon";
|
|
||||||
|
|
||||||
// Icon base style
|
|
||||||
.#{$icon-prefix} {
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: inherit;
|
|
||||||
font-style: normal;
|
|
||||||
height: 1em;
|
|
||||||
position: relative;
|
|
||||||
text-indent: -9999px;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 1em;
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon sizes
|
|
||||||
&.icon-2x {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.icon-3x {
|
|
||||||
font-size: 2.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.icon-4x {
|
|
||||||
font-size: 3.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Component icon support
|
|
||||||
.accordion,
|
|
||||||
.btn,
|
|
||||||
.toast,
|
|
||||||
.menu {
|
|
||||||
.#{$icon-prefix} {
|
|
||||||
vertical-align: -10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-lg {
|
|
||||||
.#{$icon-prefix} {
|
|
||||||
vertical-align: -15%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,127 +0,0 @@
|
|||||||
// Icon arrows
|
|
||||||
.icon-arrow-down,
|
|
||||||
.icon-arrow-left,
|
|
||||||
.icon-arrow-right,
|
|
||||||
.icon-arrow-up,
|
|
||||||
.icon-downward,
|
|
||||||
.icon-back,
|
|
||||||
.icon-forward,
|
|
||||||
.icon-upward {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-right: 0;
|
|
||||||
height: .65em;
|
|
||||||
width: .65em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-arrow-down {
|
|
||||||
&::before {
|
|
||||||
transform: translate(-50%, -75%) rotate(225deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-arrow-left {
|
|
||||||
&::before {
|
|
||||||
transform: translate(-25%, -50%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-arrow-right {
|
|
||||||
&::before {
|
|
||||||
transform: translate(-75%, -50%) rotate(135deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-arrow-up {
|
|
||||||
&::before {
|
|
||||||
transform: translate(-50%, -25%) rotate(45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-back,
|
|
||||||
.icon-forward {
|
|
||||||
&::after {
|
|
||||||
background: currentColor;
|
|
||||||
height: $icon-border-width;
|
|
||||||
width: .8em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-downward,
|
|
||||||
.icon-upward {
|
|
||||||
&::after {
|
|
||||||
background: currentColor;
|
|
||||||
height: .8em;
|
|
||||||
width: $icon-border-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-back {
|
|
||||||
&::after {
|
|
||||||
left: 55%;
|
|
||||||
}
|
|
||||||
&::before {
|
|
||||||
transform: translate(-50%, -50%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-downward {
|
|
||||||
&::after {
|
|
||||||
top: 45%;
|
|
||||||
}
|
|
||||||
&::before {
|
|
||||||
transform: translate(-50%, -50%) rotate(-135deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-forward {
|
|
||||||
&::after {
|
|
||||||
left: 45%;
|
|
||||||
}
|
|
||||||
&::before {
|
|
||||||
transform: translate(-50%, -50%) rotate(135deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-upward {
|
|
||||||
&::after {
|
|
||||||
top: 55%;
|
|
||||||
}
|
|
||||||
&::before {
|
|
||||||
transform: translate(-50%, -50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon caret
|
|
||||||
.icon-caret {
|
|
||||||
&::before {
|
|
||||||
border-top: .3em solid currentColor;
|
|
||||||
border-right: .3em solid transparent;
|
|
||||||
border-left: .3em solid transparent;
|
|
||||||
height: 0;
|
|
||||||
transform: translate(-50%, -25%);
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon menu
|
|
||||||
.icon-menu {
|
|
||||||
&::before {
|
|
||||||
background: currentColor;
|
|
||||||
box-shadow: 0 -.35em, 0 .35em;
|
|
||||||
height: $icon-border-width;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon apps
|
|
||||||
.icon-apps {
|
|
||||||
&::before {
|
|
||||||
background: currentColor;
|
|
||||||
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
|
|
||||||
height: 3px;
|
|
||||||
width: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,161 +0,0 @@
|
|||||||
// Icon time
|
|
||||||
.icon-time {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
&::before {
|
|
||||||
background: currentColor;
|
|
||||||
height: .4em;
|
|
||||||
transform: translate(-50%, -75%);
|
|
||||||
width: $icon-border-width;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
background: currentColor;
|
|
||||||
height: .3em;
|
|
||||||
transform: translate(-50%, -75%) rotate(90deg);
|
|
||||||
transform-origin: 50% 90%;
|
|
||||||
width: $icon-border-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon mail
|
|
||||||
.icon-mail {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
height: .8em;
|
|
||||||
width: 1em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-right: 0;
|
|
||||||
border-top: 0;
|
|
||||||
height: .5em;
|
|
||||||
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
|
|
||||||
width: .5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon people
|
|
||||||
.icon-people {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: .45em;
|
|
||||||
top: 25%;
|
|
||||||
width: .45em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50% 50% 0 0;
|
|
||||||
height: .4em;
|
|
||||||
top: 75%;
|
|
||||||
width: .9em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon message
|
|
||||||
.icon-message {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
border-right: 0;
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom-right-radius: $border-radius;
|
|
||||||
border-left: 0;
|
|
||||||
border-top: 0;
|
|
||||||
height: .8em;
|
|
||||||
left: 65%;
|
|
||||||
top: 40%;
|
|
||||||
width: .7em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
background: currentColor;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
height: .3em;
|
|
||||||
left: 10%;
|
|
||||||
top: 100%;
|
|
||||||
transform: translate(0, -90%) rotate(45deg);
|
|
||||||
width: $icon-border-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon photo
|
|
||||||
.icon-photo {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: .25em;
|
|
||||||
left: 35%;
|
|
||||||
top: 35%;
|
|
||||||
width: .25em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-left: 0;
|
|
||||||
height: .5em;
|
|
||||||
left: 60%;
|
|
||||||
transform: translate(-50%, 25%) rotate(-45deg);
|
|
||||||
width: .5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon link
|
|
||||||
.icon-link {
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 5em 0 0 5em;
|
|
||||||
border-right: 0;
|
|
||||||
height: .5em;
|
|
||||||
width: .75em;
|
|
||||||
}
|
|
||||||
&::before {
|
|
||||||
transform: translate(-70%, -45%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
transform: translate(-30%, -55%) rotate(135deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon location
|
|
||||||
.icon-location {
|
|
||||||
&::before {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50% 50% 50% 0;
|
|
||||||
height: .8em;
|
|
||||||
transform: translate(-50%, -60%) rotate(-45deg);
|
|
||||||
width: .8em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: .2em;
|
|
||||||
transform: translate(-50%, -80%);
|
|
||||||
width: .2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon emoji
|
|
||||||
.icon-emoji {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
&::before {
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: -.17em -.1em, .17em -.1em;
|
|
||||||
height: .15em;
|
|
||||||
width: .15em;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border: $icon-border-width solid currentColor;
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-right-color: transparent;
|
|
||||||
height: .5em;
|
|
||||||
transform: translate(-50%, -40%) rotate(-135deg);
|
|
||||||
width: .5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
// Avatar mixin
|
|
||||||
@mixin avatar-base($size: $unit-8) {
|
|
||||||
font-size: $size / 2;
|
|
||||||
height: $size;
|
|
||||||
width: $size;
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
// Button variant mixin
|
|
||||||
@mixin button-variant($color: $primary-color) {
|
|
||||||
background: $color;
|
|
||||||
border-color: darken($color, 3%);
|
|
||||||
color: $light-color;
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow($color);
|
|
||||||
}
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background: darken($color, 2%);
|
|
||||||
border-color: darken($color, 5%);
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: darken($color, 7%);
|
|
||||||
border-color: darken($color, 10%);
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
&.loading {
|
|
||||||
&::after {
|
|
||||||
border-bottom-color: $light-color;
|
|
||||||
border-left-color: $light-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin button-outline-variant($color: $primary-color) {
|
|
||||||
background: $light-color;
|
|
||||||
border-color: $color;
|
|
||||||
color: $color;
|
|
||||||
&:focus {
|
|
||||||
@include control-shadow($color);
|
|
||||||
}
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background: lighten($color, 50%);
|
|
||||||
border-color: darken($color, 2%);
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: $color;
|
|
||||||
border-color: darken($color, 5%);
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
&.loading {
|
|
||||||
&::after {
|
|
||||||
border-bottom-color: $color;
|
|
||||||
border-left-color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
// Clearfix mixin
|
|
||||||
@mixin clearfix() {
|
|
||||||
&::after {
|
|
||||||
clear: both;
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
// Background color utility mixin
|
|
||||||
@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
|
|
||||||
#{$name} {
|
|
||||||
background: $color !important;
|
|
||||||
|
|
||||||
@if (lightness($color) < 60) {
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Text color utility mixin
|
|
||||||
@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
|
|
||||||
#{$name} {
|
|
||||||
color: $color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
a#{$name} {
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
color: darken($color, 5%);
|
|
||||||
}
|
|
||||||
&:visited {
|
|
||||||
color: lighten($color, 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
// Label base style
|
|
||||||
@mixin label-base() {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
line-height: 1.2;
|
|
||||||
padding: .1rem .2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
|
|
||||||
background: $bg-color;
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
// Margin utility mixin
|
|
||||||
@mixin margin-variant($id: 1, $size: $unit-1) {
|
|
||||||
.m-#{$id} {
|
|
||||||
margin: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb-#{$id} {
|
|
||||||
margin-bottom: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ml-#{$id} {
|
|
||||||
margin-left: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr-#{$id} {
|
|
||||||
margin-right: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-#{$id} {
|
|
||||||
margin-top: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-#{$id} {
|
|
||||||
margin-left: $size !important;
|
|
||||||
margin-right: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-#{$id} {
|
|
||||||
margin-bottom: $size !important;
|
|
||||||
margin-top: $size !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Padding utility mixin
|
|
||||||
@mixin padding-variant($id: 1, $size: $unit-1) {
|
|
||||||
.p-#{$id} {
|
|
||||||
padding: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-#{$id} {
|
|
||||||
padding-bottom: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pl-#{$id} {
|
|
||||||
padding-left: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pr-#{$id} {
|
|
||||||
padding-right: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pt-#{$id} {
|
|
||||||
padding-top: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-#{$id} {
|
|
||||||
padding-left: $size !important;
|
|
||||||
padding-right: $size !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-#{$id} {
|
|
||||||
padding-bottom: $size !important;
|
|
||||||
padding-top: $size !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
// Component focus shadow
|
|
||||||
@mixin control-shadow($color: $primary-color) {
|
|
||||||
box-shadow: 0 0 0 .1rem rgba($color, .2);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Shadow mixin
|
|
||||||
@mixin shadow-variant($offset) {
|
|
||||||
box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
// Text Ellipsis
|
|
||||||
@mixin text-ellipsis() {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
// Toast variant mixin
|
|
||||||
@mixin toast-variant($color: $dark-color) {
|
|
||||||
background: rgba($color, .95);
|
|
||||||
border-color: $color;
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
// Text colors
|
|
||||||
@include text-color-variant(".text-primary", $primary-color);
|
|
||||||
|
|
||||||
@include text-color-variant(".text-secondary", $secondary-color-dark);
|
|
||||||
|
|
||||||
@include text-color-variant(".text-gray", $gray-color);
|
|
||||||
|
|
||||||
@include text-color-variant(".text-light", $light-color);
|
|
||||||
|
|
||||||
@include text-color-variant(".text-dark", $body-font-color);
|
|
||||||
|
|
||||||
@include text-color-variant(".text-success", $success-color);
|
|
||||||
|
|
||||||
@include text-color-variant(".text-warning", $warning-color);
|
|
||||||
|
|
||||||
@include text-color-variant(".text-error", $error-color);
|
|
||||||
|
|
||||||
// Background colors
|
|
||||||
@include bg-color-variant(".bg-primary", $primary-color);
|
|
||||||
|
|
||||||
@include bg-color-variant(".bg-secondary", $secondary-color);
|
|
||||||
|
|
||||||
@include bg-color-variant(".bg-dark", $dark-color);
|
|
||||||
|
|
||||||
@include bg-color-variant(".bg-gray", $bg-color);
|
|
||||||
|
|
||||||
@include bg-color-variant(".bg-success", $success-color);
|
|
||||||
|
|
||||||
@include bg-color-variant(".bg-warning", $warning-color);
|
|
||||||
|
|
||||||
@include bg-color-variant(".bg-error", $error-color);
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
// Cursors
|
|
||||||
.c-hand {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-move {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-zoom-in {
|
|
||||||
cursor: zoom-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-zoom-out {
|
|
||||||
cursor: zoom-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-not-allowed {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-auto {
|
|
||||||
cursor: auto;
|
|
||||||
}
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
// Display
|
|
||||||
.d-block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.d-inline {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
.d-inline-block {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.d-flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.d-inline-flex {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
.d-none,
|
|
||||||
.d-hide {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.d-visible {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
.d-invisible {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
.text-hide {
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
color: transparent;
|
|
||||||
font-size: 0;
|
|
||||||
line-height: 0;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
.text-assistive {
|
|
||||||
border: 0;
|
|
||||||
clip: rect(0,0,0,0);
|
|
||||||
height: 1px;
|
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
// Divider
|
|
||||||
.divider,
|
|
||||||
.divider-vert {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&[data-content]::after {
|
|
||||||
background: $bg-color-light;
|
|
||||||
color: $gray-color;
|
|
||||||
content: attr(data-content);
|
|
||||||
display: inline-block;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
padding: 0 $unit-2;
|
|
||||||
transform: translateY(-$font-size-sm + $border-width);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
border-top: $border-width solid $border-color;
|
|
||||||
height: $border-width;
|
|
||||||
margin: $unit-2 0;
|
|
||||||
|
|
||||||
&[data-content] {
|
|
||||||
margin: $unit-4 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider-vert {
|
|
||||||
display: block;
|
|
||||||
padding: $unit-4;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
border-left: $border-width solid $border-color;
|
|
||||||
bottom: $unit-2;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
top: $unit-2;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-content]::after {
|
|
||||||
left: 50%;
|
|
||||||
padding: $unit-1 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
// Loading
|
|
||||||
.loading {
|
|
||||||
color: transparent !important;
|
|
||||||
min-height: $unit-4;
|
|
||||||
pointer-events: none;
|
|
||||||
position: relative;
|
|
||||||
&::after {
|
|
||||||
animation: loading 500ms infinite linear;
|
|
||||||
border: $border-width-lg solid $primary-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-right-color: transparent;
|
|
||||||
border-top-color: transparent;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: $unit-4;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -$unit-2;
|
|
||||||
margin-top: -$unit-2;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
width: $unit-4;
|
|
||||||
z-index: $zindex-0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.loading-lg {
|
|
||||||
min-height: $unit-10;
|
|
||||||
&::after {
|
|
||||||
height: $unit-8;
|
|
||||||
margin-left: -$unit-4;
|
|
||||||
margin-top: -$unit-4;
|
|
||||||
width: $unit-8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
// Position
|
|
||||||
.clearfix {
|
|
||||||
@include clearfix();
|
|
||||||
}
|
|
||||||
|
|
||||||
.float-left {
|
|
||||||
float: left !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float-right {
|
|
||||||
float: right !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-relative {
|
|
||||||
position: relative !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-absolute {
|
|
||||||
position: absolute !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fixed {
|
|
||||||
position: fixed !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sticky {
|
|
||||||
position: sticky !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-centered {
|
|
||||||
display: block;
|
|
||||||
float: none;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-centered {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
@include margin-variant(0, 0);
|
|
||||||
|
|
||||||
@include margin-variant(1, $unit-1);
|
|
||||||
|
|
||||||
@include margin-variant(2, $unit-2);
|
|
||||||
|
|
||||||
@include padding-variant(0, 0);
|
|
||||||
|
|
||||||
@include padding-variant(1, $unit-1);
|
|
||||||
|
|
||||||
@include padding-variant(2, $unit-2);
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
// Shapes
|
|
||||||
.s-rounded {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
// Text
|
|
||||||
// Text alignment utilities
|
|
||||||
.text-left {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-justify {
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Text transform utilities
|
|
||||||
.text-lowercase {
|
|
||||||
text-transform: lowercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-uppercase {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-capitalize {
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Text style utilities
|
|
||||||
.text-normal {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-large {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Text overflow utilities
|
|
||||||
.text-ellipsis {
|
|
||||||
@include text-ellipsis();
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-clip {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: clip;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-break {
|
|
||||||
hyphens: auto;
|
|
||||||
word-break: break-word;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
@@ -1,13 +1,6 @@
|
|||||||
// Core variables and mixins
|
|
||||||
@import 'spectre/variables';
|
|
||||||
@import 'spectre/mixins';
|
|
||||||
|
|
||||||
@import 'theme/variables';
|
@import 'theme/variables';
|
||||||
@import 'theme/mixins';
|
@import 'theme/mixins';
|
||||||
@import 'theme/framework';
|
|
||||||
@import 'theme/typography';
|
@import 'theme/typography';
|
||||||
@import 'theme/forms';
|
|
||||||
@import 'theme/mobile';
|
|
||||||
@import 'theme/animation';
|
@import 'theme/animation';
|
||||||
|
|
||||||
@import 'theme/header';
|
@import 'theme/header';
|
||||||
@@ -17,4 +10,3 @@
|
|||||||
// Extra Skeleton Styling
|
// Extra Skeleton Styling
|
||||||
@import 'theme/blog';
|
@import 'theme/blog';
|
||||||
@import 'theme/onepage';
|
@import 'theme/onepage';
|
||||||
|
|
||||||
|
|||||||
@@ -1,23 +0,0 @@
|
|||||||
.default-animation {
|
|
||||||
transition: all 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pulse Animation
|
|
||||||
.pulse {
|
|
||||||
animation-name: pulse_animation;
|
|
||||||
animation-duration: 2000ms;
|
|
||||||
transform-origin:70% 70%;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse_animation {
|
|
||||||
0% { transform: scale(1); }
|
|
||||||
30% { transform: scale(1); }
|
|
||||||
40% { transform: scale(1.08); }
|
|
||||||
50% { transform: scale(1); }
|
|
||||||
60% { transform: scale(1); }
|
|
||||||
70% { transform: scale(1.05); }
|
|
||||||
80% { transform: scale(1); }
|
|
||||||
100% { transform: scale(1); }
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,113 +0,0 @@
|
|||||||
/** Extra columns spacing **/
|
|
||||||
.extra-spacing:not(.col-12), :not(.col12) > .e-content {
|
|
||||||
padding-right: 1rem;
|
|
||||||
|
|
||||||
@include breakpoint(md) {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Breadcrumbs styling **/
|
|
||||||
#breadcrumbs {
|
|
||||||
padding-left: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: -1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
span, a {
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
&:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span, a {
|
|
||||||
&:not(:first-child)::before {
|
|
||||||
color: #e7e9ed;
|
|
||||||
content: "/";
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Blog Listing **/
|
|
||||||
.blog-listing {
|
|
||||||
|
|
||||||
.bricklayer-column {
|
|
||||||
padding-left: 0px;
|
|
||||||
padding-right: 25px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
margin-bottom: 25px;
|
|
||||||
border: 0;
|
|
||||||
box-shadow: 0 10px 45px -9px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-footer {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-date {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Blog Item **/
|
|
||||||
.content-title {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 12px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Pagination **/
|
|
||||||
ul.pagination {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prev-next {
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Sidebar specific tweaks **/
|
|
||||||
#sidebar {
|
|
||||||
|
|
||||||
ul.related-pages {
|
|
||||||
box-shadow: none;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.archives {
|
|
||||||
list-style: none;
|
|
||||||
margin-left: 0;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
vertical-align: text-top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user