material_design 0.9.0 → 0.9.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
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5cd4edaa73836367a47688dc4c71958243d528a4dc98d3c72d8994d62d51394d
|
|
4
|
+
data.tar.gz: 37caf5262a8ab7f6b362355153e8a2f366f1f2eb8cbd3e104eb53ae11e3d7bf8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9b27f10fd39f2c79654ff56002e52979171647272140f9764494bf42b2af5539c18b11860f5d9505eb23435c895b8f364d33d7b7d3bd47bb135d4f0d4648eb07
|
|
7
|
+
data.tar.gz: 2f9f0bb2e39c1956a1a3517bea036fe68c31211578ca1f20258e40ebfdbee1583b5fd0586b7984c659c3dda1279d43d33d2b9746e76edd99986d6eaa232a1f93
|
|
@@ -32,6 +32,27 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.chip {
|
|
35
|
+
display: inline-flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
height: 32px;
|
|
38
|
+
padding: 8px 12px;
|
|
39
|
+
border-radius: 8px;
|
|
40
|
+
font-size: 14px;
|
|
41
|
+
font-weight: 500;
|
|
42
|
+
white-space: nowrap;
|
|
43
|
+
|
|
44
|
+
@media (prefers-color-scheme: light) {
|
|
45
|
+
background: rgb(var(--md-sys-light-secondary-fixed));
|
|
46
|
+
color: rgb(var(--md-sys-dark-on-secondary-fixed));
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@media (prefers-color-scheme: dark) {
|
|
50
|
+
background: rgb(var(--md-sys-dark-secondary-fixed));
|
|
51
|
+
color: rgb(var(--md-sys-dark-on-secondary-fixed));
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.filter-chip {
|
|
35
56
|
align-items: center;
|
|
36
57
|
border-radius: 8px;
|
|
37
58
|
cursor: pointer;
|
|
@@ -50,13 +71,13 @@
|
|
|
50
71
|
}
|
|
51
72
|
}
|
|
52
73
|
|
|
53
|
-
.chip:hover {
|
|
74
|
+
.filter-chip:hover {
|
|
54
75
|
background: var(--md-sys-hover-layer-state)
|
|
55
76
|
radial-gradient(circle, transparent 1%, var(--md-sys-hover-layer-state) 1%)
|
|
56
77
|
center/15000%;
|
|
57
78
|
}
|
|
58
79
|
|
|
59
|
-
.chip.selected {
|
|
80
|
+
.filter-chip.selected {
|
|
60
81
|
border-color: transparent;
|
|
61
82
|
@media (prefers-color-scheme: light) {
|
|
62
83
|
background: rgb(var(--md-sys-light-secondary-container));
|
|
@@ -69,7 +90,7 @@
|
|
|
69
90
|
}
|
|
70
91
|
}
|
|
71
92
|
|
|
72
|
-
.chip.selected:hover {
|
|
93
|
+
.filter-chip.selected:hover {
|
|
73
94
|
background: var(--md-sys-hover-selected-state)
|
|
74
95
|
radial-gradient(
|
|
75
96
|
circle,
|
|
@@ -79,7 +100,7 @@
|
|
|
79
100
|
center/15000%;
|
|
80
101
|
}
|
|
81
102
|
|
|
82
|
-
.chip__container {
|
|
103
|
+
.filter-chip__container {
|
|
83
104
|
box-sizing: border-box;
|
|
84
105
|
display: inline-block;
|
|
85
106
|
margin: 0;
|
|
@@ -87,7 +108,7 @@
|
|
|
87
108
|
vertical-align: middle;
|
|
88
109
|
}
|
|
89
110
|
|
|
90
|
-
.chip__dropdown {
|
|
111
|
+
.filter-chip__dropdown {
|
|
91
112
|
box-sizing: border-box;
|
|
92
113
|
display: block;
|
|
93
114
|
max-width: calc(100vw - 60px);
|
|
@@ -98,12 +119,12 @@
|
|
|
98
119
|
}
|
|
99
120
|
|
|
100
121
|
@media (min-width: 768px) {
|
|
101
|
-
.chip__dropdown {
|
|
122
|
+
.filter-chip__dropdown {
|
|
102
123
|
max-width: calc(100vw - 140px);
|
|
103
124
|
}
|
|
104
125
|
}
|
|
105
126
|
|
|
106
|
-
.chip__label {
|
|
127
|
+
.filter-chip__label {
|
|
107
128
|
font-size: 14px;
|
|
108
129
|
font-weight: 500;
|
|
109
130
|
padding: 0px 8px;
|
|
@@ -3,15 +3,15 @@ module MaterialDesign
|
|
|
3
3
|
def md_filter_chip(label=nil, leading_icon: nil, trailing_icon: nil, selected: false, data: {}, style: nil, &block)
|
|
4
4
|
merged_data = data.merge(controller: "filter-chip", filter_chip_selected_value: selected, action: "#{block_given? ? "click->filter-chip#toggleDropdown" : "click->filter-chip#toggleSelect"}")
|
|
5
5
|
|
|
6
|
-
chip_content = content_tag(:div, class: "chip__container", data: merged_data) do
|
|
7
|
-
concat(content_tag(:div, class: class_names("chip", selected: selected), data: { filter_chip_target: "chip"}, style: style) do
|
|
6
|
+
chip_content = content_tag(:div, class: "filter-chip__container", data: merged_data) do
|
|
7
|
+
concat(content_tag(:div, class: class_names("filter-chip", selected: selected), data: { filter_chip_target: "chip"}, style: style) do
|
|
8
8
|
concat(content_tag(:span, class: "dropdown--hidden", data: {filter_chip_target: "selectedIcon"}) do
|
|
9
9
|
render("material_design/icons/icon", locals: { icon: "check", size: 18 })
|
|
10
10
|
end)
|
|
11
11
|
concat(content_tag(:span, data: {filter_chip_target: "leadingIcon"}) do
|
|
12
12
|
render("material_design/icons/icon", locals: { icon: leading_icon, size: 18 }) if leading_icon
|
|
13
13
|
end)
|
|
14
|
-
concat(content_tag(:p, label, class: "chip__label", data: {filter_chip_target: "label"}))
|
|
14
|
+
concat(content_tag(:p, label, class: "filter-chip__label", data: {filter_chip_target: "label"}))
|
|
15
15
|
concat(content_tag(:span, data: {filter_chip_target: "chevronIcon"}) do
|
|
16
16
|
render("material_design/icons/icon", locals: { icon: "arrow_drop_down", size: 18 })
|
|
17
17
|
end) if block_given?
|
|
@@ -20,7 +20,7 @@ module MaterialDesign
|
|
|
20
20
|
end)
|
|
21
21
|
end)
|
|
22
22
|
if block_given?
|
|
23
|
-
concat(content_tag(:div, class: "dropdown--hidden chip__dropdown", data: {filter_chip_target: "dropdown"}) do
|
|
23
|
+
concat(content_tag(:div, class: "dropdown--hidden filter-chip__dropdown", data: {filter_chip_target: "dropdown"}) do
|
|
24
24
|
capture(&block)
|
|
25
25
|
end)
|
|
26
26
|
end
|