jekyll-theme-unity 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +56 -0
- data/_config.yml +135 -0
- data/_includes/assets/Google-Analytics.html +12 -0
- data/_includes/assets/anchor-headings.html +164 -0
- data/_includes/assets/btt.html +5 -0
- data/_includes/assets/code-header.html +6 -0
- data/_includes/assets/noscript.html +3 -0
- data/_includes/assets/site-banner.html +9 -0
- data/_includes/assets/site-top-bar.html +10 -0
- data/_includes/assets/toc.html +174 -0
- data/_includes/assets/youtube-embed.html +6 -0
- data/_includes/footer.html +39 -0
- data/_includes/head.html +21 -0
- data/_includes/header.html +49 -0
- data/_layouts/default.html +23 -0
- data/_layouts/page.html +5 -0
- data/_layouts/post.html +52 -0
- data/_layouts/post_home.html +105 -0
- data/_sass/Material/baseline.scss +18 -0
- data/_sass/Material/colors.scss +130 -0
- data/_sass/Material/elevation.scss +62 -0
- data/_sass/Material/motion.scss +180 -0
- data/_sass/Material/palette.scss +118 -0
- data/_sass/Material/shape.scss +109 -0
- data/_sass/Material/state.scss +35 -0
- data/_sass/Material/typography.scss +505 -0
- data/_sass/custom/layout.scss +1 -0
- data/_sass/custom/styles_variables.scss +70 -0
- data/_sass/custom/variables.scss +1 -0
- data/_sass/jekyll-theme-unity.scss +1 -0
- data/_sass/layout/base.scss +525 -0
- data/_sass/layout/highlight-dark.scss +357 -0
- data/_sass/layout/highlight-light.scss +202 -0
- data/_sass/layout/layout.scss +581 -0
- data/_sass/layout/styles_variables.scss +156 -0
- data/_sass/variables.scss +170 -0
- data/assets/css/style.scss +10 -0
- data/assets/image/404.svg +34 -0
- data/assets/image/Unity.png +0 -0
- data/assets/image/bg-banner.png +0 -0
- data/assets/image/favicons/android-chrome-192x192.png +0 -0
- data/assets/image/favicons/android-chrome-512x512.png +0 -0
- data/assets/image/favicons/apple-touch-icon-120x120.png +0 -0
- data/assets/image/favicons/apple-touch-icon-152x152.png +0 -0
- data/assets/image/favicons/apple-touch-icon-180x180.png +0 -0
- data/assets/image/favicons/apple-touch-icon-60x60.png +0 -0
- data/assets/image/favicons/apple-touch-icon-76x76.png +0 -0
- data/assets/image/favicons/apple-touch-icon.png +0 -0
- data/assets/image/favicons/browserconfig.xml +12 -0
- data/assets/image/favicons/favicon-16x16.png +0 -0
- data/assets/image/favicons/favicon-32x32.png +0 -0
- data/assets/image/favicons/favicon.ico +0 -0
- data/assets/image/favicons/mstile-150x150.png +0 -0
- data/assets/image/favicons/mstile-310x150.png +0 -0
- data/assets/image/favicons/mstile-310x310.png +0 -0
- data/assets/image/favicons/mstile-70x70.png +0 -0
- data/assets/image/favicons/safari-pinned-tab.svg +22 -0
- data/assets/image/favicons/site.webmanifest +17 -0
- data/assets/image/mobile.png +0 -0
- data/assets/js/main.js +228 -0
- data/bin/run +196 -0
- metadata +195 -0
data/_includes/head.html
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400&display=swap" rel="stylesheet">
|
|
2
|
+
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
|
|
3
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" />
|
|
4
|
+
<link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
|
|
5
|
+
|
|
6
|
+
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/assets/image/favicons/apple-touch-icon.png" | relative_url }}">
|
|
7
|
+
<link rel="icon" type="image/png" sizes="32x32" href="{{ "/assets/image/favicons/favicon-32x32.png" | relative_url }}">
|
|
8
|
+
<link rel="icon" type="image/png" sizes="16x16" href="{{ "/assets/image/favicons/favicon-16x16.png" | relative_url }}">
|
|
9
|
+
<link rel="manifest" href="{{ "/assets/image/favicons/site.webmanifest" | relative_url }}">
|
|
10
|
+
<link rel="mask-icon" href="{{ "/assets/image/favicons/safari-pinned-tab.svg" | relative_url }}" color="#004494">
|
|
11
|
+
<meta name="msapplication-TileColor" content="#adc6ff">
|
|
12
|
+
<meta name="theme-color" content="#adc6ff">
|
|
13
|
+
|
|
14
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
15
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
16
|
+
{%- include assets/Google-Analytics.html -%}
|
|
17
|
+
{%- if page.home-%}
|
|
18
|
+
<title>{{site.title}}</title>
|
|
19
|
+
{%- else -%}
|
|
20
|
+
<title>{{page.site-title}} - {{site.title}}</title>
|
|
21
|
+
{%- endif -%}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<nav class="site-nav-side-bar " id="nav-side-bar">
|
|
2
|
+
<input type="checkbox" id="nav-side-bar-closebtn">
|
|
3
|
+
<label for="nav-side-bar-closebtn">
|
|
4
|
+
<span class="material-symbols-rounded">
|
|
5
|
+
menu_open
|
|
6
|
+
</span>
|
|
7
|
+
</label>
|
|
8
|
+
<div class="nav-links-container">
|
|
9
|
+
<a class="nav-links" href="{{site.header.header_1_link | relative_url }}">
|
|
10
|
+
<span class="material-symbols-rounded">
|
|
11
|
+
{{ site.header.header_1_icon }}
|
|
12
|
+
</span>
|
|
13
|
+
<p>{{ site.header.header_1_name}}</p>
|
|
14
|
+
</a>
|
|
15
|
+
<a href="{{site.header.header_home_link | relative_url }}" class="nav-links">
|
|
16
|
+
<span class="material-symbols-rounded">
|
|
17
|
+
home
|
|
18
|
+
</span>
|
|
19
|
+
<p>Home</p>
|
|
20
|
+
</a>
|
|
21
|
+
<a class="nav-links" href="{{site.header.header_2_link | relative_url }}">
|
|
22
|
+
<span class="material-symbols-rounded">
|
|
23
|
+
{{ site.header.header_2_icon }}
|
|
24
|
+
</span>
|
|
25
|
+
<p>{{ site.header.header_2_name}}</p>
|
|
26
|
+
</a>
|
|
27
|
+
<a class="nav-links" href="{{site.header.header_3_link | relative_url }}">
|
|
28
|
+
<span class="material-symbols-rounded">
|
|
29
|
+
{{ site.header.header_3_icon }}
|
|
30
|
+
</span>
|
|
31
|
+
<p>{{ site.header.header_3_name}}</p>
|
|
32
|
+
</a>
|
|
33
|
+
<!-- <a class="nav-links" href="{{site.header.header_4_link | relative_url }}">
|
|
34
|
+
<span class="material-symbols-rounded">
|
|
35
|
+
{{ site.header.header_4_icon }}
|
|
36
|
+
</span>
|
|
37
|
+
<p>{{ site.header.header_4_name}}</p>
|
|
38
|
+
</a> -->
|
|
39
|
+
</div>
|
|
40
|
+
<div class="nav-theme-toggle">
|
|
41
|
+
<div class="toggle">
|
|
42
|
+
<span class="material-symbols-rounded" id="nav-theme-toggle-icon">
|
|
43
|
+
light_mode
|
|
44
|
+
</span>
|
|
45
|
+
<p id="mode_text">Switch to light Mode</p>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</nav>
|
|
49
|
+
<div class="site-nav-scrim" id="nav-scrim"></div>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
{%- include head.html -%}
|
|
5
|
+
</head>
|
|
6
|
+
<body>
|
|
7
|
+
{%- include header.html -%}
|
|
8
|
+
{%- include assets/noscript.html -%}
|
|
9
|
+
<main class="content">
|
|
10
|
+
{%- include assets/site-top-bar.html -%}
|
|
11
|
+
<div class="wrapper" id="wrapper">
|
|
12
|
+
{% if page.hide_banner %}
|
|
13
|
+
{%- include assets/site-banner.html-%}
|
|
14
|
+
{% endif %}
|
|
15
|
+
{{ content }}
|
|
16
|
+
{% unless page.hide_footer %}
|
|
17
|
+
{%- include footer.html -%}
|
|
18
|
+
{% endunless %}
|
|
19
|
+
</div>
|
|
20
|
+
</main>
|
|
21
|
+
<script src="{{ "assets/js/main.js" | relative_url }}"></script>
|
|
22
|
+
</body>
|
|
23
|
+
</html>
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
{%- include head.html -%}
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
{%- include header.html -%}
|
|
9
|
+
{%- include assets/noscript.html -%}
|
|
10
|
+
<main class="post-content">
|
|
11
|
+
{%- include assets/site-top-bar.html -%}
|
|
12
|
+
<div class="wrapper-post">
|
|
13
|
+
<header class="post-header">
|
|
14
|
+
<div class="post-info-date">
|
|
15
|
+
<div class="post-meta">
|
|
16
|
+
{%- assign date_format = site.fica.date_format | default: "%b %-d, %Y" -%}
|
|
17
|
+
<time class="text-unmuted" datetime="{{ page.date | date_to_xmlschema }}">
|
|
18
|
+
{{ page.date | date: date_format }}
|
|
19
|
+
</time>
|
|
20
|
+
</div>
|
|
21
|
+
{%- if page.modified_date -%}
|
|
22
|
+
<div class="post-change-date post-meta">
|
|
23
|
+
{%- assign mdate = page.modified_date |
|
|
24
|
+
date_to_xmlschema -%}
|
|
25
|
+
<span class="material-symbols-rounded">
|
|
26
|
+
edit
|
|
27
|
+
</span>
|
|
28
|
+
<time class="text-unmuted" datetime="{{ mdate }}">
|
|
29
|
+
{{ mdate | date: date_format }}
|
|
30
|
+
</time>
|
|
31
|
+
</div>
|
|
32
|
+
{%- endif -%}
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<h1 class="post-title">{{ page.title | escape }}</h1>
|
|
36
|
+
<div class="post-author post-meta">
|
|
37
|
+
{% if site.post_author %} {% assign author = site.post_author %} {% endif %} {% if
|
|
38
|
+
page.author %} {% assign author = page.author %} {% endif %}
|
|
39
|
+
<span itemprop="name">{{ author }}</span>
|
|
40
|
+
</div>
|
|
41
|
+
</header>
|
|
42
|
+
{% include assets/anchor-headings.html html=content anchorBody="link" anchorClass="material-symbols-rounded" %}
|
|
43
|
+
</div>
|
|
44
|
+
<div class="post-toc" id="toc">
|
|
45
|
+
{% include assets/toc.html html=content h_min=1 h_max=3 %}
|
|
46
|
+
</div>
|
|
47
|
+
{% include assets/btt.html %}
|
|
48
|
+
</main>
|
|
49
|
+
<script src="{{ "assets/js/main.js" | relative_url }}"></script>
|
|
50
|
+
</body>
|
|
51
|
+
|
|
52
|
+
</html>
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<h1 class="post-title">{{ page.site-title }}</h1>
|
|
6
|
+
|
|
7
|
+
{%- if site.paginate -%}
|
|
8
|
+
{% assign pinned = site.posts | where: "pin", "true" %}
|
|
9
|
+
{% assign default = site.posts | where_exp: "item", "item.pin != true" %}
|
|
10
|
+
|
|
11
|
+
{% assign posts = "" | split: "" %}
|
|
12
|
+
|
|
13
|
+
<!-- Get pinned posts -->
|
|
14
|
+
|
|
15
|
+
{% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
|
|
16
|
+
{% assign pinned_num = pinned.size | minus: offset %}
|
|
17
|
+
|
|
18
|
+
{% if pinned_num > 0 %}
|
|
19
|
+
{% for i in (offset..pinned.size) limit: pinned_num %}
|
|
20
|
+
{% assign posts = posts | push: pinned[i] %}
|
|
21
|
+
{% endfor %}
|
|
22
|
+
{% else %}
|
|
23
|
+
{% assign pinned_num = 0 %}
|
|
24
|
+
{% endif %}
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
<!-- Get default posts -->
|
|
28
|
+
|
|
29
|
+
{% assign default_beg = offset | minus: pinned.size %}
|
|
30
|
+
|
|
31
|
+
{% if default_beg < 0 %}
|
|
32
|
+
{% assign default_beg = 0 %}
|
|
33
|
+
{% endif %}
|
|
34
|
+
|
|
35
|
+
{% assign default_num = paginator.posts | size | minus: pinned_num %}
|
|
36
|
+
{% assign default_end = default_beg | plus: default_num | minus: 1 %}
|
|
37
|
+
|
|
38
|
+
{% if default_num > 0 %}
|
|
39
|
+
{% for i in (default_beg..default_end) %}
|
|
40
|
+
{% assign posts = posts | push: default[i] %}
|
|
41
|
+
{% endfor %}
|
|
42
|
+
{% endif %}
|
|
43
|
+
{% else %}
|
|
44
|
+
{% assign posts = site.posts %}
|
|
45
|
+
{% endif %}
|
|
46
|
+
<div class="site-post-list">
|
|
47
|
+
{%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
|
|
48
|
+
<div class="posts-container">
|
|
49
|
+
{%- for post in posts -%} {% if post.pin %}
|
|
50
|
+
<a class="site-post pin" href="{{ post.url | relative_url }}">
|
|
51
|
+
<p class="post-title">{{ post.title | escape }}</p>
|
|
52
|
+
<div class="post-info">
|
|
53
|
+
{%- assign date_format_tooltip = site.date_format | default: "%b%-d, %Y" -%}
|
|
54
|
+
<span class="post-info-date">{{ post.date | date: date_format }}</span>
|
|
55
|
+
{% if post.pin %}
|
|
56
|
+
<span class="post-info-pin">
|
|
57
|
+
<span class="material-symbols-rounded"> push_pin </span>
|
|
58
|
+
</span>
|
|
59
|
+
{%- endif -%}
|
|
60
|
+
</div>
|
|
61
|
+
{%- if site.show_post_descriptions -%} {{ post.excerpt }} {%- endif -%}
|
|
62
|
+
</a>
|
|
63
|
+
{% endif %} {%- endfor -%}
|
|
64
|
+
</div>
|
|
65
|
+
{% if posts %}
|
|
66
|
+
<div class="posts-container">
|
|
67
|
+
{%- for post in posts -%} {% unless post.pin %}
|
|
68
|
+
<a class="site-post" href="{{ post.url | relative_url }}">
|
|
69
|
+
<p class="post-title">{{ post.title | escape }}</p>
|
|
70
|
+
<div class="post-info">
|
|
71
|
+
{%- assign date_format_tooltip = site.fica.date_format | default: "%b%-d, %Y" -%}
|
|
72
|
+
<span class="post-info-date">{{ post.date | date: date_format }}</span>
|
|
73
|
+
{% if post.pin %}
|
|
74
|
+
<span class="post-info-pin">
|
|
75
|
+
<span class="material-symbols-rounded"> push_pin </span>
|
|
76
|
+
<p>pinned</p>
|
|
77
|
+
</span>
|
|
78
|
+
{%- endif -%}
|
|
79
|
+
</div>
|
|
80
|
+
{%- if site.show_post_descriptions -%} {{ post.excerpt }} {%- endif -%}
|
|
81
|
+
</a>
|
|
82
|
+
{% endunless %} {%- endfor -%}
|
|
83
|
+
</div>
|
|
84
|
+
{% endif %}
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
{%- if site.paginate -%}
|
|
88
|
+
<ul class="site-post-nav">
|
|
89
|
+
<li>
|
|
90
|
+
{% if paginator.previous_page %}
|
|
91
|
+
<a href="{{ paginator.previous_page_path | relative_url }}" class="material-symbols-rounded"> arrow_back_ios </a>
|
|
92
|
+
{% else %}
|
|
93
|
+
<a class="material-symbols-rounded disable"> arrow_back_ios </a>
|
|
94
|
+
{% endif %}
|
|
95
|
+
</li>
|
|
96
|
+
<li class="post-nav-num">{{ paginator.page }} / {{ paginator.total_pages }}</li>
|
|
97
|
+
<li>
|
|
98
|
+
{%- if paginator.next_page %}
|
|
99
|
+
<a href="{{ paginator.next_page_path | relative_url }}" class="material-symbols-rounded "> arrow_forward_ios </a>
|
|
100
|
+
{%- else %}
|
|
101
|
+
<a class="material-symbols-rounded disable"> arrow_forward_ios </a>
|
|
102
|
+
{%- endif %}
|
|
103
|
+
</li>
|
|
104
|
+
</ul>
|
|
105
|
+
{%- endif %}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
|
|
2
|
+
// Copyright 2016 Google Inc. All rights reserved.
|
|
3
|
+
|
|
4
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
// you may not use this file except in compliance with the License.
|
|
6
|
+
// You may obtain a copy of the License at
|
|
7
|
+
|
|
8
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
|
|
10
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
// See the License for the specific language governing permissions and
|
|
14
|
+
// limitations under the License.
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
@import "palette","typography", "colors", "shape", "motion", "elevation", "state";
|
|
18
|
+
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
|
|
2
|
+
// Copyright 2016 Google Inc. All rights reserved.
|
|
3
|
+
|
|
4
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
// you may not use this file except in compliance with the License.
|
|
6
|
+
// You may obtain a copy of the License at
|
|
7
|
+
|
|
8
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
|
|
10
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
// See the License for the specific language governing permissions and
|
|
14
|
+
// limitations under the License.
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
@mixin primary {
|
|
18
|
+
color: var(--md-sys-color-on-primary);
|
|
19
|
+
background-color: var(--md-sys-color-primary);
|
|
20
|
+
}
|
|
21
|
+
@mixin on-primary {
|
|
22
|
+
color: var(--md-sys-color-primary);
|
|
23
|
+
background-color: var(--md-sys-color-on-primary);
|
|
24
|
+
}
|
|
25
|
+
@mixin primary-container {
|
|
26
|
+
color: var(--md-sys-color-on-primary-container);
|
|
27
|
+
background-color: var(--md-sys-color-primary-container);
|
|
28
|
+
}
|
|
29
|
+
@mixin on-primary-container {
|
|
30
|
+
color: var(--md-sys-color-primary-container);
|
|
31
|
+
background-color: var(--md-sys-color-on-primary-container);
|
|
32
|
+
}
|
|
33
|
+
@mixin secondary {
|
|
34
|
+
color: var(--md-sys-color-on-secondary);
|
|
35
|
+
background-color: var(--md-sys-color-secondary);
|
|
36
|
+
}
|
|
37
|
+
@mixin on-secondary {
|
|
38
|
+
color: var(--md-sys-color-secondary);
|
|
39
|
+
background-color: var(--md-sys-color-on-secondary);
|
|
40
|
+
}
|
|
41
|
+
@mixin secondary-container {
|
|
42
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
43
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
44
|
+
}
|
|
45
|
+
@mixin on-secondary-container {
|
|
46
|
+
color: var(--md-sys-color-secondary-container);
|
|
47
|
+
background-color: var(--md-sys-color-on-secondary-container);
|
|
48
|
+
}
|
|
49
|
+
@mixin tertiary {
|
|
50
|
+
color: var(--md-sys-color-on-tertiary);
|
|
51
|
+
background-color: var(--md-sys-color-tertiary);
|
|
52
|
+
}
|
|
53
|
+
@mixin on-tertiary {
|
|
54
|
+
color: var(--md-sys-color-tertiary);
|
|
55
|
+
background-color: var(--md-sys-color-on-tertiary);
|
|
56
|
+
}
|
|
57
|
+
@mixin tertiary-container {
|
|
58
|
+
color: var(--md-sys-color-on-tertiary-container);
|
|
59
|
+
background-color: var(--md-sys-color-tertiary-container);
|
|
60
|
+
}
|
|
61
|
+
@mixin on-tertiary-container {
|
|
62
|
+
color: var(--md-sys-color-tertiary-container);
|
|
63
|
+
background-color: var(--md-sys-color-on-tertiary-container);
|
|
64
|
+
}
|
|
65
|
+
@mixin background {
|
|
66
|
+
color: var(--md-sys-color-on-background);
|
|
67
|
+
background-color: var(--md-sys-color-background);
|
|
68
|
+
}
|
|
69
|
+
@mixin surface {
|
|
70
|
+
color: var(--md-sys-color-on-surface);
|
|
71
|
+
background-color: var(--md-sys-color-surface);
|
|
72
|
+
}
|
|
73
|
+
@mixin surface-variant {
|
|
74
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
75
|
+
background-color: var(--md-sys-color-surface-variant);
|
|
76
|
+
}
|
|
77
|
+
@mixin on-surface-variant {
|
|
78
|
+
color: var(--md-sys-color-surface-variant);
|
|
79
|
+
background-color: var(--md-sys-color-on-surface-variant);
|
|
80
|
+
}
|
|
81
|
+
@mixin outline {
|
|
82
|
+
border: 1px solid var(--md-sys-color-outline);
|
|
83
|
+
}
|
|
84
|
+
@mixin inverse-surface {
|
|
85
|
+
color: var(--md-sys-color-on-inverse-surface);
|
|
86
|
+
background-color: var(--md-sys-color-inverse-surface);
|
|
87
|
+
}
|
|
88
|
+
@mixin on-inverse-surface {
|
|
89
|
+
color: var(--md-sys-color-inverse-surface);
|
|
90
|
+
background-color: var(--md-sys-color-on-inverse-surface);
|
|
91
|
+
}
|
|
92
|
+
@mixin inverse-primary {
|
|
93
|
+
color: var(--md-sys-color-on-inverse-primary);
|
|
94
|
+
background-color: var(--md-sys-color-inverse-primary);
|
|
95
|
+
}
|
|
96
|
+
@mixin on-inverse-primary {
|
|
97
|
+
color: var(--md-sys-color-inverse-primary);
|
|
98
|
+
background-color: var(--md-sys-color-on-inverse-primary);
|
|
99
|
+
}
|
|
100
|
+
@mixin surface-tint {
|
|
101
|
+
background-color: var(--md-sys-color-on-surface-tint);
|
|
102
|
+
}
|
|
103
|
+
@mixin error {
|
|
104
|
+
color: var(--md-sys-color-on-error);
|
|
105
|
+
background-color: var(--md-sys-color-error);
|
|
106
|
+
}
|
|
107
|
+
@mixin on-error {
|
|
108
|
+
color: var(--md-sys-color-error);
|
|
109
|
+
background-color: var(--md-sys-color-on-error);
|
|
110
|
+
}
|
|
111
|
+
@mixin error-container {
|
|
112
|
+
color: var(--md-sys-color-on-error-container);
|
|
113
|
+
background-color: var(--md-sys-color-error-container);
|
|
114
|
+
}
|
|
115
|
+
@mixin on-error-container {
|
|
116
|
+
color: var(--md-sys-color-error-container);
|
|
117
|
+
background-color: var(--md-sys-color-on-error-container);
|
|
118
|
+
}
|
|
119
|
+
@mixin black {
|
|
120
|
+
background-color: var(--md-ref-palette-black);
|
|
121
|
+
}
|
|
122
|
+
@mixin black-text {
|
|
123
|
+
color: var(--md-ref-palette-black);
|
|
124
|
+
}
|
|
125
|
+
@mixin white {
|
|
126
|
+
background-color: var(--md-ref-palette-white);
|
|
127
|
+
}
|
|
128
|
+
@mixin white-text {
|
|
129
|
+
color: var(--md-ref-palette-white);
|
|
130
|
+
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2016 Google Inc. All rights reserved.
|
|
3
|
+
|
|
4
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
// you may not use this file except in compliance with the License.
|
|
6
|
+
// You may obtain a copy of the License at
|
|
7
|
+
|
|
8
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
|
|
10
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
// See the License for the specific language governing permissions and
|
|
14
|
+
// limitations under the License.
|
|
15
|
+
//
|
|
16
|
+
|
|
17
|
+
:root {
|
|
18
|
+
/* Surface tint color */
|
|
19
|
+
--md-sys-elevation-surface-tint-color: var(--md-sys-color-primary);
|
|
20
|
+
/* +5 */
|
|
21
|
+
--md-sys-elevation-level5-value: 12px;
|
|
22
|
+
--md-sys-elevation-level5-unit: 1px;
|
|
23
|
+
--md-sys-elevation-level5: 12px;
|
|
24
|
+
/* +4 */
|
|
25
|
+
--md-sys-elevation-level4-value: 8px;
|
|
26
|
+
--md-sys-elevation-level4-unit: 1px;
|
|
27
|
+
--md-sys-elevation-level4: 8px;
|
|
28
|
+
/* +3 */
|
|
29
|
+
--md-sys-elevation-level3-value: 6px;
|
|
30
|
+
--md-sys-elevation-level3-unit: 1px;
|
|
31
|
+
--md-sys-elevation-level3: 6px;
|
|
32
|
+
/* +2 */
|
|
33
|
+
--md-sys-elevation-level2-value: 3px;
|
|
34
|
+
--md-sys-elevation-level2-unit: 1px;
|
|
35
|
+
--md-sys-elevation-level2: 3px;
|
|
36
|
+
/* +1 */
|
|
37
|
+
--md-sys-elevation-level1-value: 1px;
|
|
38
|
+
--md-sys-elevation-level1-unit: 1px;
|
|
39
|
+
--md-sys-elevation-level1: 1px;
|
|
40
|
+
/* 0 */
|
|
41
|
+
--md-sys-elevation-level0-value: 0px;
|
|
42
|
+
--md-sys-elevation-level0-unit: 1px;
|
|
43
|
+
--md-sys-elevation-level0: 0px;
|
|
44
|
+
}
|
|
45
|
+
.elevation-0 {
|
|
46
|
+
box-shadow: var(--md-sys-elevation-level0);
|
|
47
|
+
}
|
|
48
|
+
.elevation-1 {
|
|
49
|
+
box-shadow: var(--md-sys-elevation-level1);
|
|
50
|
+
}
|
|
51
|
+
.elevation-2 {
|
|
52
|
+
box-shadow: var(--md-sys-elevation-level2);
|
|
53
|
+
}
|
|
54
|
+
.elevation-3 {
|
|
55
|
+
box-shadow: var(--md-sys-elevation-level3);
|
|
56
|
+
}
|
|
57
|
+
.elevation-4 {
|
|
58
|
+
box-shadow: var(--md-sys-elevation-level4);
|
|
59
|
+
}
|
|
60
|
+
.elevation-5 {
|
|
61
|
+
box-shadow: var(--md-sys-elevation-level5);
|
|
62
|
+
}
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
// Copyright 2016 Google Inc. All rights reserved.
|
|
2
|
+
|
|
3
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
/* Emphasized decelerate easing (out) */
|
|
17
|
+
$md-sys-motion-easing-emphasized-decelerate-x0: 0.05000000074505806;
|
|
18
|
+
$md-sys-motion-easing-emphasized-decelerate-y0: 0.699999988079071;
|
|
19
|
+
$md-sys-motion-easing-emphasized-decelerate-x1: 0.10000000149011612;
|
|
20
|
+
$md-sys-motion-easing-emphasized-decelerate-y1: 1;
|
|
21
|
+
/* Emphasized accelerate easing (in) */
|
|
22
|
+
$md-sys-motion-easing-emphasized-accelerate-x0: 0.30000001192092896;
|
|
23
|
+
$md-sys-motion-easing-emphasized-accelerate-y0: 0;
|
|
24
|
+
$md-sys-motion-easing-emphasized-accelerate-x1: 0.800000011920929;
|
|
25
|
+
$md-sys-motion-easing-emphasized-accelerate-y1: 0.15000000596046448;
|
|
26
|
+
/* Standard decelerate easing (out) */
|
|
27
|
+
$md-sys-motion-easing-standard-decelerate-x0: 0;
|
|
28
|
+
$md-sys-motion-easing-standard-decelerate-y0: 0;
|
|
29
|
+
$md-sys-motion-easing-standard-decelerate-x1: 0;
|
|
30
|
+
$md-sys-motion-easing-standard-decelerate-y1: 1;
|
|
31
|
+
/* Standard accelerate easing (in) */
|
|
32
|
+
$md-sys-motion-easing-standard-accelerate-x0: 0.30000001192092896;
|
|
33
|
+
$md-sys-motion-easing-standard-accelerate-y0: 0;
|
|
34
|
+
$md-sys-motion-easing-standard-accelerate-x1: 1;
|
|
35
|
+
$md-sys-motion-easing-standard-accelerate-y1: 1;
|
|
36
|
+
/* Duration 1000ms */
|
|
37
|
+
$md-sys-motion-duration-1000: 1000ms;
|
|
38
|
+
/* Duration 900ms */
|
|
39
|
+
$md-sys-motion-duration-900: 900ms;
|
|
40
|
+
/* Duration 800ms */
|
|
41
|
+
$md-sys-motion-duration-800: 800ms;
|
|
42
|
+
/* Duration 700ms */
|
|
43
|
+
$md-sys-motion-duration-700: 700ms;
|
|
44
|
+
/* Duration 600ms */
|
|
45
|
+
$md-sys-motion-duration-600: 600ms;
|
|
46
|
+
/* Duration 550ms */
|
|
47
|
+
$md-sys-motion-duration-550: 550ms;
|
|
48
|
+
/* Duration 500ms */
|
|
49
|
+
$md-sys-motion-duration-500: 500ms;
|
|
50
|
+
/* Duration 450ms */
|
|
51
|
+
$md-sys-motion-duration-450: 450ms;
|
|
52
|
+
/* Duration 400ms */
|
|
53
|
+
$md-sys-motion-duration-400: 400ms;
|
|
54
|
+
/* Duration 350ms */
|
|
55
|
+
$md-sys-motion-duration-350: 350ms;
|
|
56
|
+
/* Duration 300ms */
|
|
57
|
+
$md-sys-motion-duration-300: 300ms;
|
|
58
|
+
/* Duration 250ms */
|
|
59
|
+
$md-sys-motion-duration-250: 250ms;
|
|
60
|
+
/* Duration 200ms */
|
|
61
|
+
$md-sys-motion-duration-200: 200ms;
|
|
62
|
+
/* Duration 150ms */
|
|
63
|
+
$md-sys-motion-duration-150: 150ms;
|
|
64
|
+
/* Duration 100ms */
|
|
65
|
+
$md-sys-motion-duration-100: 100ms;
|
|
66
|
+
/* Duration 50ms */
|
|
67
|
+
$md-sys-motion-duration-50: 50ms;
|
|
68
|
+
/* Standard easing (in and out) */
|
|
69
|
+
$md-sys-motion-easing-standard-x0: 0.20000000298023224;
|
|
70
|
+
$md-sys-motion-easing-standard-y0: 0;
|
|
71
|
+
$md-sys-motion-easing-standard-x1: 0;
|
|
72
|
+
$md-sys-motion-easing-standard-y1: 1;
|
|
73
|
+
/* Linear easing */
|
|
74
|
+
$md-sys-motion-easing-linear-x0: 0;
|
|
75
|
+
$md-sys-motion-easing-linear-y0: 0;
|
|
76
|
+
$md-sys-motion-easing-linear-x1: 1;
|
|
77
|
+
$md-sys-motion-easing-linear-y1: 1;
|
|
78
|
+
/* Emphasized */
|
|
79
|
+
$md-sys-motion-easing-emphasized-x0: 0.20000000298023224;
|
|
80
|
+
$md-sys-motion-easing-emphasized-y0: 0;
|
|
81
|
+
$md-sys-motion-easing-emphasized-x1: 0;
|
|
82
|
+
$md-sys-motion-easing-emphasized-y1: 1;
|
|
83
|
+
/* Motion path */
|
|
84
|
+
$md-sys-motion-path-standard-path: 1;
|
|
85
|
+
@mixin duration-50 {
|
|
86
|
+
transition-duration: $md-sys-motion-duration-50;
|
|
87
|
+
}
|
|
88
|
+
@mixin duration-100 {
|
|
89
|
+
transition-duration: $md-sys-motion-duration-100;
|
|
90
|
+
}
|
|
91
|
+
@mixin duration-150 {
|
|
92
|
+
transition-duration: $md-sys-motion-duration-150;
|
|
93
|
+
}
|
|
94
|
+
@mixin duration-200 {
|
|
95
|
+
transition-duration: $md-sys-motion-duration-200;
|
|
96
|
+
}
|
|
97
|
+
@mixin duration-250 {
|
|
98
|
+
transition-duration: $md-sys-motion-duration-250;
|
|
99
|
+
}
|
|
100
|
+
@mixin duration-300 {
|
|
101
|
+
transition-duration: $md-sys-motion-duration-300;
|
|
102
|
+
}
|
|
103
|
+
@mixin duration-350 {
|
|
104
|
+
transition-duration: $md-sys-motion-duration-350;
|
|
105
|
+
}
|
|
106
|
+
@mixin duration-400 {
|
|
107
|
+
transition-duration: $md-sys-motion-duration-400;
|
|
108
|
+
}
|
|
109
|
+
@mixin duration-450 {
|
|
110
|
+
transition-duration: $md-sys-motion-duration-450;
|
|
111
|
+
}
|
|
112
|
+
@mixin duration-500 {
|
|
113
|
+
transition-duration: $md-sys-motion-duration-500;
|
|
114
|
+
}
|
|
115
|
+
@mixin duration-550 {
|
|
116
|
+
transition-duration: $md-sys-motion-duration-550;
|
|
117
|
+
}
|
|
118
|
+
@mixin duration-600 {
|
|
119
|
+
transition-duration: $md-sys-motion-duration-600;
|
|
120
|
+
}
|
|
121
|
+
@mixin duration-700 {
|
|
122
|
+
transition-duration: $md-sys-motion-duration-700;
|
|
123
|
+
}
|
|
124
|
+
@mixin duration-800 {
|
|
125
|
+
transition-duration: $md-sys-motion-duration-800;
|
|
126
|
+
}
|
|
127
|
+
@mixin duration-900 {
|
|
128
|
+
transition-duration: $md-sys-motion-duration-900;
|
|
129
|
+
}
|
|
130
|
+
@mixin duration-1000 {
|
|
131
|
+
transition-duration: $md-sys-motion-duration-1000;
|
|
132
|
+
}
|
|
133
|
+
@mixin easing-standard {
|
|
134
|
+
transition-timing-function: cubic-bezier(
|
|
135
|
+
$md-sys-motion-easing-standard-x0,
|
|
136
|
+
$md-sys-motion-easing-standard-y0,
|
|
137
|
+
$md-sys-motion-easing-standard-x1,
|
|
138
|
+
$md-sys-motion-easing-standard-y1)
|
|
139
|
+
;
|
|
140
|
+
}
|
|
141
|
+
@mixin easing-linear {
|
|
142
|
+
transition-timing-function: cubic-bezier(
|
|
143
|
+
$md-sys-motion-easing-linear-x0,
|
|
144
|
+
$md-sys-motion-easing-linear-y0,
|
|
145
|
+
$md-sys-motion-easing-linear-x1,
|
|
146
|
+
$md-sys-motion-easing-linear-y1)
|
|
147
|
+
;
|
|
148
|
+
}
|
|
149
|
+
@mixin easing-standard-accelerate {
|
|
150
|
+
transition-timing-function: cubic-bezier(
|
|
151
|
+
$md-sys-motion-easing-standard-accelerate-x0,
|
|
152
|
+
$md-sys-motion-easing-standard-accelerate-y0,
|
|
153
|
+
$md-sys-motion-easing-standard-accelerate-x1,
|
|
154
|
+
$md-sys-motion-easing-standard-accelerate-y1)
|
|
155
|
+
;
|
|
156
|
+
}
|
|
157
|
+
@mixin easing-standard-decelerate {
|
|
158
|
+
transition-timing-function: cubic-bezier(
|
|
159
|
+
$md-sys-motion-easing-standard-decelerate-x0,
|
|
160
|
+
$md-sys-motion-easing-standard-decelerate-y0,
|
|
161
|
+
$md-sys-motion-easing-standard-decelerate-x1,
|
|
162
|
+
$md-sys-motion-easing-standard-decelerate-y1)
|
|
163
|
+
;
|
|
164
|
+
}
|
|
165
|
+
@mixin easing-emphasized {
|
|
166
|
+
transition-timing-function: cubic-bezier(
|
|
167
|
+
$md-sys-motion-easing-emphasized-x0,
|
|
168
|
+
$md-sys-motion-easing-emphasized-y0,
|
|
169
|
+
$md-sys-motion-easing-emphasized-x1,
|
|
170
|
+
$md-sys-motion-easing-emphasized-y1)
|
|
171
|
+
;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
@mixin remove-transition {
|
|
175
|
+
transition-timing-function: none
|
|
176
|
+
;
|
|
177
|
+
}
|
|
178
|
+
@mixin remove-duration {
|
|
179
|
+
transition-duration: 0ms;
|
|
180
|
+
}
|