jekyll-theme-unity 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}
|