material_design 0.3.0 → 0.4.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 +4 -4
- data/app/assets/stylesheets/material_design/app_bars.css +27 -0
- data/app/assets/stylesheets/material_design/application.css +104 -100
- data/app/assets/stylesheets/material_design/buttons.css +4 -0
- data/app/assets/stylesheets/material_design/cards.css +14 -0
- data/app/assets/stylesheets/material_design/dividers.css +14 -0
- data/app/assets/stylesheets/material_design/icons.css +8 -0
- data/app/assets/stylesheets/material_design/{list.css → lists.css} +5 -4
- data/app/assets/stylesheets/material_design/navigation.css +12 -6
- data/app/assets/stylesheets/material_design/tabs.css +35 -0
- data/app/assets/stylesheets/material_design/typography.css +40 -25
- data/app/views/material_design/app_bars/_top_bar.html.erb +8 -0
- data/app/views/material_design/buttons/_fab.html.erb +0 -0
- data/app/views/material_design/buttons/icon_button.html.erb +3 -0
- data/app/views/material_design/cards/_outlined.html.erb +3 -0
- data/app/views/material_design/dividers/_horizontal.html.erb +1 -0
- data/app/views/material_design/icons/_arrow_back.html.erb +3 -0
- data/app/views/material_design/icons/_icon.html.erb +1 -0
- data/app/views/material_design/{list → lists}/_list.html.erb +1 -1
- data/app/views/material_design/lists/_list_item.html.erb +8 -0
- data/app/views/material_design/navigation/navigation_drawer/_headline.html.erb +1 -1
- data/app/views/material_design/tabs/_secondary.html.erb +6 -0
- data/app/views/material_design/tabs/secondary/_tab.html.erb +3 -0
- data/app/views/material_design/typography/_headline_medium.html.erb +3 -0
- data/app/views/material_design/typography/_headline_small.html.erb +3 -0
- data/app/views/material_design/typography/_label_large.html.erb +1 -1
- data/app/views/material_design/typography/_title_large.html.erb +3 -0
- data/app/views/material_design/typography/_title_small.html.erb +1 -1
- data/lib/material_design/version.rb +1 -1
- metadata +23 -5
- data/app/views/material_design/list/_list_item.html.erb +0 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fdedbd46913c96dafad6153c39682d265f54bd969524574446f54834b4ad8bc0
|
|
4
|
+
data.tar.gz: 042470e092e0decd4413fff66558aabae30f4cedd07de0e659c9925eb3ac1800
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2757f26718e5598c341343779f273562e55a2ebfdb1c46d09f8f639ea9a1f85a4a93d501aa3d80109e8bd13fff7d0b6004067b15d530c1e041e5c600961bd348
|
|
7
|
+
data.tar.gz: 68f7e5d1628b69ec2fc644dfed2ef18a34f58c83b3d1b5e26dfa1de0eb6d376ad97f93aec5214e758c35d0c0d3c720912d913363a382a898f73a5df6f2301bbd
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
.top-bar--container {
|
|
2
|
+
position: sticky;
|
|
3
|
+
top: 0px;
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: 16px;
|
|
7
|
+
padding: 20px 16px 24px 16px;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 112px;
|
|
10
|
+
@media (prefers-color-scheme: light) {
|
|
11
|
+
background: rgb(var(--md-sys-light-surface));
|
|
12
|
+
}
|
|
13
|
+
@media (prefers-color-scheme: dark) {
|
|
14
|
+
background: rgb(var(--md-sys-dark-surface));
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.top-bar--container > .typography--title-large {
|
|
19
|
+
flex: 1 0 auto;
|
|
20
|
+
line-height: 64px;
|
|
21
|
+
@media (prefers-color-scheme: light) {
|
|
22
|
+
color: rgb(var(--md-sys-light-on-surface));
|
|
23
|
+
}
|
|
24
|
+
@media (prefers-color-scheme: dark) {
|
|
25
|
+
color: rgb(var(--md-sys-dark-on-surface));
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -1,107 +1,111 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* color-scheme: light dark; */
|
|
3
|
-
--md-sys-light-state-hover-state-layer-opacity:
|
|
4
|
-
--md-sys-dark-state-hover-state-layer-opacity:
|
|
3
|
+
--md-sys-light-state-hover-state-layer-opacity: 0.08;
|
|
4
|
+
--md-sys-dark-state-hover-state-layer-opacity: 0.08;
|
|
5
5
|
|
|
6
6
|
/* Light scheme */
|
|
7
|
-
--md-sys-light-primary:
|
|
8
|
-
--md-sys-light-surface-tint:
|
|
9
|
-
--md-sys-light-on-primary:
|
|
10
|
-
--md-sys-light-primary-container:
|
|
11
|
-
--md-sys-light-on-primary-container:
|
|
12
|
-
--md-sys-light-secondary:
|
|
13
|
-
--md-sys-light-on-secondary:
|
|
14
|
-
--md-sys-light-secondary-container:
|
|
15
|
-
--md-sys-light-on-secondary-container:
|
|
16
|
-
--md-sys-light-tertiary:
|
|
17
|
-
--md-sys-light-on-tertiary:
|
|
18
|
-
--md-sys-light-tertiary-container:
|
|
19
|
-
--md-sys-light-on-tertiary-container:
|
|
20
|
-
--md-sys-light-error:
|
|
21
|
-
--md-sys-light-on-error:
|
|
22
|
-
--md-sys-light-error-container:
|
|
23
|
-
--md-sys-light-on-error-container:
|
|
24
|
-
--md-sys-light-background:
|
|
25
|
-
--md-sys-light-on-background:
|
|
26
|
-
--md-sys-light-surface:
|
|
27
|
-
--md-sys-light-on-surface:
|
|
28
|
-
--md-sys-light-surface-variant:
|
|
29
|
-
--md-sys-light-on-surface-variant:
|
|
30
|
-
--md-sys-light-outline:
|
|
31
|
-
--md-sys-light-outline-variant:
|
|
32
|
-
--md-sys-light-shadow:
|
|
33
|
-
--md-sys-light-scrim:
|
|
34
|
-
--md-sys-light-inverse-surface:
|
|
35
|
-
--md-sys-light-inverse-on-surface:
|
|
36
|
-
--md-sys-light-inverse-primary:
|
|
37
|
-
--md-sys-light-primary-fixed:
|
|
38
|
-
--md-sys-light-on-primary-fixed:
|
|
39
|
-
--md-sys-light-primary-fixed-dim:
|
|
40
|
-
--md-sys-light-on-primary-fixed-variant:
|
|
41
|
-
--md-sys-light-secondary-fixed:
|
|
42
|
-
--md-sys-light-on-secondary-fixed:
|
|
43
|
-
--md-sys-light-secondary-fixed-dim:
|
|
44
|
-
--md-sys-light-on-secondary-fixed-variant:
|
|
45
|
-
--md-sys-light-tertiary-fixed:
|
|
46
|
-
--md-sys-light-on-tertiary-fixed:
|
|
47
|
-
--md-sys-light-tertiary-fixed-dim:
|
|
48
|
-
--md-sys-light-on-tertiary-fixed-variant:
|
|
49
|
-
--md-sys-light-surface-dim:
|
|
50
|
-
--md-sys-light-surface-bright:
|
|
51
|
-
--md-sys-light-surface-container-lowest:
|
|
52
|
-
--md-sys-light-surface-container-low:
|
|
53
|
-
--md-sys-light-surface-container:
|
|
54
|
-
--md-sys-light-surface-container-high:
|
|
55
|
-
--md-sys-light-surface-container-highest:
|
|
7
|
+
--md-sys-light-primary: 101, 85, 143;
|
|
8
|
+
--md-sys-light-surface-tint: 101 85 143;
|
|
9
|
+
--md-sys-light-on-primary: 255 255 255;
|
|
10
|
+
--md-sys-light-primary-container: 233 221 255;
|
|
11
|
+
--md-sys-light-on-primary-container: 32 16 71;
|
|
12
|
+
--md-sys-light-secondary: 98 91 113;
|
|
13
|
+
--md-sys-light-on-secondary: 255 255 255;
|
|
14
|
+
--md-sys-light-secondary-container: 232 222 248;
|
|
15
|
+
--md-sys-light-on-secondary-container: 30 25 43;
|
|
16
|
+
--md-sys-light-tertiary: 126 82 96;
|
|
17
|
+
--md-sys-light-on-tertiary: 255 255 255;
|
|
18
|
+
--md-sys-light-tertiary-container: 255 217 227;
|
|
19
|
+
--md-sys-light-on-tertiary-container: 49 16 29;
|
|
20
|
+
--md-sys-light-error: 186 26 26;
|
|
21
|
+
--md-sys-light-on-error: 255 255 255;
|
|
22
|
+
--md-sys-light-error-container: 255 218 214;
|
|
23
|
+
--md-sys-light-on-error-container: 65 0 2;
|
|
24
|
+
--md-sys-light-background: 253 247 255;
|
|
25
|
+
--md-sys-light-on-background: 29 27 32;
|
|
26
|
+
--md-sys-light-surface: 253 247 255;
|
|
27
|
+
--md-sys-light-on-surface: 29 27 32;
|
|
28
|
+
--md-sys-light-surface-variant: 231 224 235;
|
|
29
|
+
--md-sys-light-on-surface-variant: 73 69 78;
|
|
30
|
+
--md-sys-light-outline: 122 117 127;
|
|
31
|
+
--md-sys-light-outline-variant: 202 196 207;
|
|
32
|
+
--md-sys-light-shadow: 0 0 0;
|
|
33
|
+
--md-sys-light-scrim: 0 0 0;
|
|
34
|
+
--md-sys-light-inverse-surface: 50 47 53;
|
|
35
|
+
--md-sys-light-inverse-on-surface: 245 239 247;
|
|
36
|
+
--md-sys-light-inverse-primary: 207 189 254;
|
|
37
|
+
--md-sys-light-primary-fixed: 233 221 255;
|
|
38
|
+
--md-sys-light-on-primary-fixed: 32 16 71;
|
|
39
|
+
--md-sys-light-primary-fixed-dim: 207 189 254;
|
|
40
|
+
--md-sys-light-on-primary-fixed-variant: 77 61 117;
|
|
41
|
+
--md-sys-light-secondary-fixed: 232 222 248;
|
|
42
|
+
--md-sys-light-on-secondary-fixed: 30 25 43;
|
|
43
|
+
--md-sys-light-secondary-fixed-dim: 203 194 219;
|
|
44
|
+
--md-sys-light-on-secondary-fixed-variant: 74 68 88;
|
|
45
|
+
--md-sys-light-tertiary-fixed: 255 217 227;
|
|
46
|
+
--md-sys-light-on-tertiary-fixed: 49 16 29;
|
|
47
|
+
--md-sys-light-tertiary-fixed-dim: 239 184 200;
|
|
48
|
+
--md-sys-light-on-tertiary-fixed-variant: 99 59 72;
|
|
49
|
+
--md-sys-light-surface-dim: 222 216 224;
|
|
50
|
+
--md-sys-light-surface-bright: 253 247 255;
|
|
51
|
+
--md-sys-light-surface-container-lowest: 255 255 255;
|
|
52
|
+
--md-sys-light-surface-container-low: 248 242 250;
|
|
53
|
+
--md-sys-light-surface-container: 242 236 244;
|
|
54
|
+
--md-sys-light-surface-container-high: 236 230 238;
|
|
55
|
+
--md-sys-light-surface-container-highest: 230 224 233;
|
|
56
56
|
|
|
57
57
|
/* Dark scheme */
|
|
58
|
-
--md-sys-dark-primary:
|
|
59
|
-
--md-sys-dark-surface-tint:
|
|
60
|
-
--md-sys-dark-on-primary:
|
|
61
|
-
--md-sys-dark-primary-container:
|
|
62
|
-
--md-sys-dark-on-primary-container:
|
|
63
|
-
--md-sys-dark-secondary:
|
|
64
|
-
--md-sys-dark-on-secondary:
|
|
65
|
-
--md-sys-dark-secondary-container:
|
|
66
|
-
--md-sys-dark-on-secondary-container:
|
|
67
|
-
--md-sys-dark-tertiary:
|
|
68
|
-
--md-sys-dark-on-tertiary:
|
|
69
|
-
--md-sys-dark-tertiary-container:
|
|
70
|
-
--md-sys-dark-on-tertiary-container:
|
|
71
|
-
--md-sys-dark-error:
|
|
72
|
-
--md-sys-dark-on-error:
|
|
73
|
-
--md-sys-dark-error-container:
|
|
74
|
-
--md-sys-dark-on-error-container:
|
|
75
|
-
--md-sys-dark-background:
|
|
76
|
-
--md-sys-dark-on-background:
|
|
77
|
-
--md-sys-dark-surface:
|
|
78
|
-
--md-sys-dark-on-surface:
|
|
79
|
-
--md-sys-dark-surface-variant:
|
|
80
|
-
--md-sys-dark-on-surface-variant:
|
|
81
|
-
--md-sys-dark-outline:
|
|
82
|
-
--md-sys-dark-outline-variant:
|
|
83
|
-
--md-sys-dark-shadow:
|
|
84
|
-
--md-sys-dark-scrim:
|
|
85
|
-
--md-sys-dark-inverse-surface:
|
|
86
|
-
--md-sys-dark-inverse-on-surface:
|
|
87
|
-
--md-sys-dark-inverse-primary:
|
|
88
|
-
--md-sys-dark-primary-fixed:
|
|
89
|
-
--md-sys-dark-on-primary-fixed:
|
|
90
|
-
--md-sys-dark-primary-fixed-dim:
|
|
91
|
-
--md-sys-dark-on-primary-fixed-variant:
|
|
92
|
-
--md-sys-dark-secondary-fixed:
|
|
93
|
-
--md-sys-dark-on-secondary-fixed:
|
|
94
|
-
--md-sys-dark-secondary-fixed-dim:
|
|
95
|
-
--md-sys-dark-on-secondary-fixed-variant:
|
|
96
|
-
--md-sys-dark-tertiary-fixed:
|
|
97
|
-
--md-sys-dark-on-tertiary-fixed:
|
|
98
|
-
--md-sys-dark-tertiary-fixed-dim:
|
|
99
|
-
--md-sys-dark-on-tertiary-fixed-variant:
|
|
100
|
-
--md-sys-dark-surface-dim:
|
|
101
|
-
--md-sys-dark-surface-bright:
|
|
102
|
-
--md-sys-dark-surface-container-lowest:
|
|
103
|
-
--md-sys-dark-surface-container-low:
|
|
104
|
-
--md-sys-dark-surface-container:
|
|
105
|
-
--md-sys-dark-surface-container-high:
|
|
106
|
-
--md-sys-dark-surface-container-highest:
|
|
58
|
+
--md-sys-dark-primary: 207 189 254;
|
|
59
|
+
--md-sys-dark-surface-tint: 207 189 254;
|
|
60
|
+
--md-sys-dark-on-primary: 54 39 93;
|
|
61
|
+
--md-sys-dark-primary-container: 77 61 117;
|
|
62
|
+
--md-sys-dark-on-primary-container: 233 221 255;
|
|
63
|
+
--md-sys-dark-secondary: 203 194 219;
|
|
64
|
+
--md-sys-dark-on-secondary: 51 45 65;
|
|
65
|
+
--md-sys-dark-secondary-container: 74 68 88;
|
|
66
|
+
--md-sys-dark-on-secondary-container: 232 222 248;
|
|
67
|
+
--md-sys-dark-tertiary: 239 184 200;
|
|
68
|
+
--md-sys-dark-on-tertiary: 74 37 50;
|
|
69
|
+
--md-sys-dark-tertiary-container: 99 59 72;
|
|
70
|
+
--md-sys-dark-on-tertiary-container: 255 217 227;
|
|
71
|
+
--md-sys-dark-error: 255 180 171;
|
|
72
|
+
--md-sys-dark-on-error: 105 0 5;
|
|
73
|
+
--md-sys-dark-error-container: 147 0 10;
|
|
74
|
+
--md-sys-dark-on-error-container: 255 218 214;
|
|
75
|
+
--md-sys-dark-background: 20 18 24;
|
|
76
|
+
--md-sys-dark-on-background: 230 224 233;
|
|
77
|
+
--md-sys-dark-surface: 20 18 24;
|
|
78
|
+
--md-sys-dark-on-surface: 230 224 233;
|
|
79
|
+
--md-sys-dark-surface-variant: 73 69 78;
|
|
80
|
+
--md-sys-dark-on-surface-variant: 202 196 207;
|
|
81
|
+
--md-sys-dark-outline: 148 143 153;
|
|
82
|
+
--md-sys-dark-outline-variant: 73 69 78;
|
|
83
|
+
--md-sys-dark-shadow: 0 0 0;
|
|
84
|
+
--md-sys-dark-scrim: 0 0 0;
|
|
85
|
+
--md-sys-dark-inverse-surface: 230 224 233;
|
|
86
|
+
--md-sys-dark-inverse-on-surface: 50 47 53;
|
|
87
|
+
--md-sys-dark-inverse-primary: 101 85 143;
|
|
88
|
+
--md-sys-dark-primary-fixed: 233 221 255;
|
|
89
|
+
--md-sys-dark-on-primary-fixed: 32 16 71;
|
|
90
|
+
--md-sys-dark-primary-fixed-dim: 207 189 254;
|
|
91
|
+
--md-sys-dark-on-primary-fixed-variant: 77 61 117;
|
|
92
|
+
--md-sys-dark-secondary-fixed: 232 222 248;
|
|
93
|
+
--md-sys-dark-on-secondary-fixed: 30 25 43;
|
|
94
|
+
--md-sys-dark-secondary-fixed-dim: 203 194 219;
|
|
95
|
+
--md-sys-dark-on-secondary-fixed-variant: 74 68 88;
|
|
96
|
+
--md-sys-dark-tertiary-fixed: 255 217 227;
|
|
97
|
+
--md-sys-dark-on-tertiary-fixed: 49 16 29;
|
|
98
|
+
--md-sys-dark-tertiary-fixed-dim: 239 184 200;
|
|
99
|
+
--md-sys-dark-on-tertiary-fixed-variant: 99 59 72;
|
|
100
|
+
--md-sys-dark-surface-dim: 20 18 24;
|
|
101
|
+
--md-sys-dark-surface-bright: 59 56 62;
|
|
102
|
+
--md-sys-dark-surface-container-lowest: 15 13 19;
|
|
103
|
+
--md-sys-dark-surface-container-low: 29 27 32;
|
|
104
|
+
--md-sys-dark-surface-container: 33 31 36;
|
|
105
|
+
--md-sys-dark-surface-container-high: 43 41 47;
|
|
106
|
+
--md-sys-dark-surface-container-highest: 54 52 58;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.text-center {
|
|
110
|
+
text-align: center;
|
|
107
111
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
.card--container {
|
|
2
|
+
border-radius: 12px;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.card--container__outlined {
|
|
6
|
+
@media (prefers-color-scheme: light) {
|
|
7
|
+
background: rgb(var(--md-sys-light-surface-container));
|
|
8
|
+
border: 1px solid rgb(var(--md-sys-light-outline-variant));
|
|
9
|
+
}
|
|
10
|
+
@media (prefers-color-scheme: dark) {
|
|
11
|
+
background: rgb(var(--md-sys-dark-surface-container));
|
|
12
|
+
border: 1px solid rgb(var(--md-sys-dark-outline-variant));
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
.horizontal-divider {
|
|
2
|
+
width: 100%;
|
|
3
|
+
margin-top: 0;
|
|
4
|
+
@media (prefers-color-scheme: light) {
|
|
5
|
+
border: 1px solid rgb(var(--md-sys-light-outline-variant));
|
|
6
|
+
}
|
|
7
|
+
@media (prefers-color-scheme: dark) {
|
|
8
|
+
border: 1px solid rgb(var(--md-sys-dark-outline-variant));
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.divider__inset {
|
|
13
|
+
margin: 0 16px;
|
|
14
|
+
}
|
|
@@ -5,19 +5,20 @@
|
|
|
5
5
|
gap: 16px;
|
|
6
6
|
padding: 8px 16px;
|
|
7
7
|
@media (prefers-color-scheme: light) {
|
|
8
|
-
background: var(--md-sys-light-surface-container);
|
|
8
|
+
background: rgb(var(--md-sys-light-surface-container));
|
|
9
9
|
}
|
|
10
10
|
@media (prefers-color-scheme: dark) {
|
|
11
|
-
background: var(--md-sys-dark-surface-container);
|
|
11
|
+
background: rgb(var(--md-sys-dark-surface-container));
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.list-item:hover {
|
|
16
|
+
cursor: pointer;
|
|
16
17
|
@media (prefers-color-scheme: light) {
|
|
17
|
-
background: var(--md-sys-light-state-hover-state-layer-opacity);
|
|
18
|
+
background: rgb(var(--md-sys-light-on-surface) / var(--md-sys-light-state-hover-state-layer-opacity));
|
|
18
19
|
}
|
|
19
20
|
@media (prefers-color-scheme: dark) {
|
|
20
|
-
background: var(--md-sys-dark-state-hover-state-layer-opacity);
|
|
21
|
+
background: rgb(var(--md-sys-dark-on-surface) / var(--md-sys-light-state-hover-state-layer-opacity));
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
24
|
|
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
align-items: flex-start;
|
|
9
9
|
border-radius: 16px;
|
|
10
10
|
@media (prefers-color-scheme: light) {
|
|
11
|
-
background: var(--md-sys-light-surface-container-low);
|
|
11
|
+
background: rgb(var(--md-sys-light-surface-container-low));
|
|
12
12
|
}
|
|
13
13
|
@media (prefers-color-scheme: dark) {
|
|
14
|
-
background: var(--md-sys-dark-surface-container-low);
|
|
14
|
+
background: rgb(var(--md-sys-dark-surface-container-low));
|
|
15
15
|
}
|
|
16
16
|
@media (max-width: 840px) {
|
|
17
17
|
display: none;
|
|
@@ -27,6 +27,12 @@
|
|
|
27
27
|
align-items: flex-start;
|
|
28
28
|
gap: 10px;
|
|
29
29
|
align-self: stretch;
|
|
30
|
+
@media (prefers-color-scheme: light) {
|
|
31
|
+
color: rgb(var(--md-sys-light-on-surface-variant));
|
|
32
|
+
}
|
|
33
|
+
@media (prefers-color-scheme: dark) {
|
|
34
|
+
color: rgb(var(--md-sys-dark-on-surface-variant));
|
|
35
|
+
}
|
|
30
36
|
}
|
|
31
37
|
|
|
32
38
|
.navigation-drawer__secion-header {
|
|
@@ -48,19 +54,19 @@
|
|
|
48
54
|
|
|
49
55
|
.navigation-drawer__nav_item:hover {
|
|
50
56
|
@media (prefers-color-scheme: light) {
|
|
51
|
-
background: var(--md-sys-light-secondary-container);
|
|
57
|
+
background: rgb(var(--md-sys-light-secondary-container));
|
|
52
58
|
}
|
|
53
59
|
@media (prefers-color-scheme: dark) {
|
|
54
|
-
background: var(--md-sys-dark-secondary-container);
|
|
60
|
+
background: rgb(var(--md-sys-dark-secondary-container));
|
|
55
61
|
}
|
|
56
62
|
}
|
|
57
63
|
|
|
58
64
|
.navigation-drawer__nav_item.active {
|
|
59
65
|
@media (prefers-color-scheme: light) {
|
|
60
|
-
background: var(--md-sys-light-secondary-container);
|
|
66
|
+
background: rgb(var(--md-sys-light-secondary-container));
|
|
61
67
|
}
|
|
62
68
|
@media (prefers-color-scheme: dark) {
|
|
63
|
-
background: var(--md-sys-dark-secondary-container);
|
|
69
|
+
background: rgb(var(--md-sys-dark-secondary-container));
|
|
64
70
|
}
|
|
65
71
|
}
|
|
66
72
|
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
.secondary-tabs--container {
|
|
2
|
+
display: flex;
|
|
3
|
+
height: 48px;
|
|
4
|
+
width: 100%;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.secondary-tabs--tab {
|
|
8
|
+
flex: 1;
|
|
9
|
+
align-self: center;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.secondary-tabs--tab:hover {
|
|
13
|
+
@media (prefers-color-scheme: light) {
|
|
14
|
+
background: rgb(var(--md-sys-light-primary) / var(--md-sys-light-state-hover-state-layer-opacity));
|
|
15
|
+
}
|
|
16
|
+
@media (prefers-color-scheme: dark) {
|
|
17
|
+
background: rgb(var(--md-sys-dark-primary) / var(--md-sys-dark-state-hover-state-layer-opacity));
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.secondary-tabs--tab.active {
|
|
22
|
+
flex: 1;
|
|
23
|
+
align-self: center;
|
|
24
|
+
@media (prefers-color-scheme: light) {
|
|
25
|
+
box-shadow: inset 0 -2px 0 rgb(var(--md-sys-light-primary));
|
|
26
|
+
}
|
|
27
|
+
@media (prefers-color-scheme: dark) {
|
|
28
|
+
box-shadow: inset 0 -2px 0 rgb(var(--md-sys-dark-primary));
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.secondary-tabs--tab > .typography__title-small {
|
|
33
|
+
text-align: center;
|
|
34
|
+
line-height: 48px;
|
|
35
|
+
}
|
|
@@ -1,46 +1,61 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
.typography__headline-medium {
|
|
2
|
+
font-size: 28px;
|
|
3
|
+
line-height: 36px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.typography__headline-small {
|
|
7
|
+
font-size: 24px;
|
|
8
|
+
line-height: 32px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.typography--title-large {
|
|
12
|
+
font-size: 22px;
|
|
13
|
+
line-height: 28px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.typography__title-medium {
|
|
17
|
+
font-size: 16px;
|
|
18
|
+
font-weight: 500;
|
|
19
|
+
line-height: 24px;
|
|
20
|
+
letter-spacing:0.15px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.typography__title-small {
|
|
12
24
|
font-size: 14px;
|
|
13
|
-
font-style: normal;
|
|
14
25
|
font-weight: 500;
|
|
15
|
-
line-height: 20px;
|
|
26
|
+
line-height: 20px;
|
|
16
27
|
letter-spacing: 0.1px;
|
|
17
|
-
}
|
|
18
28
|
|
|
19
|
-
.typography__label--large {
|
|
20
29
|
@media (prefers-color-scheme: light) {
|
|
21
|
-
color: var(--md-sys-light-on-
|
|
30
|
+
color: rgb(var(--md-sys-light-on-surface-variant));
|
|
22
31
|
}
|
|
23
32
|
@media (prefers-color-scheme: dark) {
|
|
24
|
-
color: var(--md-sys-dark-on-
|
|
33
|
+
color: rgb(var(--md-sys-dark-on-surface-variant));
|
|
25
34
|
}
|
|
35
|
+
}
|
|
26
36
|
|
|
27
|
-
|
|
28
|
-
/* font-family: Roboto; */
|
|
37
|
+
.typography__label-large {
|
|
29
38
|
font-size: 14px;
|
|
30
|
-
font-style: normal;
|
|
31
39
|
font-weight: 600;
|
|
32
|
-
line-height: 20px;
|
|
40
|
+
line-height: 20px;
|
|
33
41
|
letter-spacing: 0.1px;
|
|
42
|
+
|
|
43
|
+
@media (prefers-color-scheme: light) {
|
|
44
|
+
color: rgb(var(--md-sys-light-on-secondary-container));
|
|
45
|
+
}
|
|
46
|
+
@media (prefers-color-scheme: dark) {
|
|
47
|
+
color: rgb(var(--md-sys-dark-on-secondary-container));
|
|
48
|
+
}
|
|
34
49
|
}
|
|
35
50
|
|
|
36
51
|
.typography__body-large {
|
|
37
52
|
font-size: 16px;
|
|
38
53
|
line-height: 24px;
|
|
39
54
|
@media (prefers-color-scheme: light) {
|
|
40
|
-
color: var(--md-sys-light-on-surface);
|
|
55
|
+
color: rgb(var(--md-sys-light-on-surface));
|
|
41
56
|
}
|
|
42
57
|
@media (prefers-color-scheme: dark) {
|
|
43
|
-
color: var(--md-sys-dark-on-surface);
|
|
58
|
+
color: rgb(var(--md-sys-dark-on-surface));
|
|
44
59
|
}
|
|
45
60
|
}
|
|
46
61
|
|
|
@@ -48,9 +63,9 @@
|
|
|
48
63
|
font-size: 14px;
|
|
49
64
|
line-height: 20px;
|
|
50
65
|
@media (prefers-color-scheme: light) {
|
|
51
|
-
color: var(--md-sys-light-on-surface-variant);
|
|
66
|
+
color: rgb(var(--md-sys-light-on-surface-variant));
|
|
52
67
|
}
|
|
53
68
|
@media (prefers-color-scheme: dark) {
|
|
54
|
-
color: var(--md-sys-dark-on-surface-variant);
|
|
69
|
+
color: rgb(var(--md-sys-dark-on-surface-variant));
|
|
55
70
|
}
|
|
56
71
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<div class="top-bar--container">
|
|
2
|
+
<% if locals[:back_path] %>
|
|
3
|
+
<%= link_to locals[:back_path] do %>
|
|
4
|
+
<%= render "material_design/icons/icon", locals: { icon: "arrow_back", size: "40" } %>
|
|
5
|
+
<% end %>
|
|
6
|
+
<% end %>
|
|
7
|
+
<%= render "material_design/typography/title_large", locals: { title: locals[:headline], center: locals[:center] } %>
|
|
8
|
+
</div>
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<hr class="<%= class_names('horizontal-divider', divider__inset: locals[:inset]) %>">
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<%= render "material_design/icons/#{locals[:icon]}", locals: { size: locals[:size] || "24" } %>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<%= link_to locals[:path], target: "_top" do %>
|
|
2
|
+
<div class="list-item list-item__one-line">
|
|
3
|
+
<div class="list-item--content">
|
|
4
|
+
<%= render "material_design/typography/body_large", locals: { body: locals[:headline] } %>
|
|
5
|
+
<%= render "material_design/typography/body_medium", locals: { body: locals[:supporting_text] } %>
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
<% end %>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<div class="secondary-tabs--container">
|
|
2
|
+
<% locals[:tabs].each do |tab| %>
|
|
3
|
+
<%= render "material_design/tabs/secondary/tab", locals: { label: tab[:label], path: tab[:path], controller: tab[:controller] } %>
|
|
4
|
+
<% end %>
|
|
5
|
+
</div>
|
|
6
|
+
<%= render "material_design/dividers/horizontal", locals: { inset: false } %>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: material_design
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.4.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Eduardo Yutaka Nakanishi
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-02-
|
|
11
|
+
date: 2024-02-04 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -35,9 +35,15 @@ files:
|
|
|
35
35
|
- MIT-LICENSE
|
|
36
36
|
- README.md
|
|
37
37
|
- Rakefile
|
|
38
|
+
- app/assets/stylesheets/material_design/app_bars.css
|
|
38
39
|
- app/assets/stylesheets/material_design/application.css
|
|
39
|
-
- app/assets/stylesheets/material_design/
|
|
40
|
+
- app/assets/stylesheets/material_design/buttons.css
|
|
41
|
+
- app/assets/stylesheets/material_design/cards.css
|
|
42
|
+
- app/assets/stylesheets/material_design/dividers.css
|
|
43
|
+
- app/assets/stylesheets/material_design/icons.css
|
|
44
|
+
- app/assets/stylesheets/material_design/lists.css
|
|
40
45
|
- app/assets/stylesheets/material_design/navigation.css
|
|
46
|
+
- app/assets/stylesheets/material_design/tabs.css
|
|
41
47
|
- app/assets/stylesheets/material_design/typography.css
|
|
42
48
|
- app/controllers/material_design/application_controller.rb
|
|
43
49
|
- app/helpers/material_design/application_helper.rb
|
|
@@ -45,14 +51,26 @@ files:
|
|
|
45
51
|
- app/mailers/material_design/application_mailer.rb
|
|
46
52
|
- app/models/material_design/application_record.rb
|
|
47
53
|
- app/views/layouts/material_design/application.html.erb
|
|
48
|
-
- app/views/material_design/
|
|
49
|
-
- app/views/material_design/
|
|
54
|
+
- app/views/material_design/app_bars/_top_bar.html.erb
|
|
55
|
+
- app/views/material_design/buttons/_fab.html.erb
|
|
56
|
+
- app/views/material_design/buttons/icon_button.html.erb
|
|
57
|
+
- app/views/material_design/cards/_outlined.html.erb
|
|
58
|
+
- app/views/material_design/dividers/_horizontal.html.erb
|
|
59
|
+
- app/views/material_design/icons/_arrow_back.html.erb
|
|
60
|
+
- app/views/material_design/icons/_icon.html.erb
|
|
61
|
+
- app/views/material_design/lists/_list.html.erb
|
|
62
|
+
- app/views/material_design/lists/_list_item.html.erb
|
|
50
63
|
- app/views/material_design/navigation/_navigation_drawer.html.erb
|
|
51
64
|
- app/views/material_design/navigation/navigation_drawer/_headline.html.erb
|
|
52
65
|
- app/views/material_design/navigation/navigation_drawer/_section_header.html.erb
|
|
66
|
+
- app/views/material_design/tabs/_secondary.html.erb
|
|
67
|
+
- app/views/material_design/tabs/secondary/_tab.html.erb
|
|
53
68
|
- app/views/material_design/typography/_body_large.html.erb
|
|
54
69
|
- app/views/material_design/typography/_body_medium.html.erb
|
|
70
|
+
- app/views/material_design/typography/_headline_medium.html.erb
|
|
71
|
+
- app/views/material_design/typography/_headline_small.html.erb
|
|
55
72
|
- app/views/material_design/typography/_label_large.html.erb
|
|
73
|
+
- app/views/material_design/typography/_title_large.html.erb
|
|
56
74
|
- app/views/material_design/typography/_title_small.html.erb
|
|
57
75
|
- config/routes.rb
|
|
58
76
|
- lib/material_design.rb
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
<div class="list-item list-item__one-line">
|
|
2
|
-
<div class="list-item--content">
|
|
3
|
-
<%= render "material_design/typography/body_large", locals: { body: locals[:headline] } %>
|
|
4
|
-
<%= render "material_design/typography/body_medium", locals: { body: locals[:supporting_text] } %>
|
|
5
|
-
</div>
|
|
6
|
-
</div>
|