material_design 0.7.0 → 0.8.0
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/chips.css +21 -0
- data/app/assets/stylesheets/material_design/segmented_button.css +56 -0
- data/app/views/material_design/_chip.html.erb +3 -0
- data/app/views/material_design/buttons/_segmented_button.html.erb +13 -0
- data/lib/material_design/version.rb +1 -1
- metadata +9 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 792bfc436512bc05110a5a4b071705924153899300bfa0c5252c921b61fa687a
|
|
4
|
+
data.tar.gz: 58b034a146b93d4e4d63e99bd5ae7dbff01b9f989fbcfb9fa0856e19a1539778
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fb4c395a4b9907be2e9698327aa26172c7c1c71864667765a2c4a5503924b240e5adb94a455de110ab1eac84e0090dc6885a3b6dbfb53780afa8fcbedce09d71
|
|
7
|
+
data.tar.gz: edfb8cc9b0b0bec9832f571fc8d44be92ba5dad792212573adb14e6dda3d2df76674eb3a6b95a800320cfdeed334f818c9665dfd2cb5fda4045d5ddfa10adcb7
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
.chip {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
height: 32px;
|
|
5
|
+
padding: 8px 12px;
|
|
6
|
+
border-radius: 8px;
|
|
7
|
+
font-size: 14px;
|
|
8
|
+
font-weight: 500;
|
|
9
|
+
margin-right: 8px;
|
|
10
|
+
white-space: nowrap;
|
|
11
|
+
|
|
12
|
+
@media (prefers-color-scheme: light) {
|
|
13
|
+
background: rgb(var(--md-sys-light-secondary-fixed));
|
|
14
|
+
color: rgb(var(--md-sys-dark-on-secondary-fixed));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@media (prefers-color-scheme: dark) {
|
|
18
|
+
background: rgb(var(--md-sys-dark-secondary-fixed));
|
|
19
|
+
color: rgb(var(--md-sys-dark-on-secondary-fixed));
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
.segmented-control {
|
|
2
|
+
display: flex;
|
|
3
|
+
border: 1px solid #ccc;
|
|
4
|
+
border-radius: 30px;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
background-color: var(--md-sys-surface);
|
|
7
|
+
width: fit-content;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.segmented-control label {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
padding: 8px 16px;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
border-left: 1px solid #ccc;
|
|
16
|
+
transition: background-color 0.3s ease;
|
|
17
|
+
font-size: 14px;
|
|
18
|
+
color: var(--md-sys-on-surface);
|
|
19
|
+
background-color: transparent;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.segmented-control label:first-child {
|
|
23
|
+
border-left: none;
|
|
24
|
+
border-radius: 12px 0 0 12px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.segmented-control label:last-child {
|
|
28
|
+
border-radius: 0 12px 12px 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.segmented-control input[type="radio"] {
|
|
32
|
+
display: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.segmented-control input[type="radio"]:checked + label {
|
|
36
|
+
background-color: rgb(var(--md-sys-light-primary-container)) !important;
|
|
37
|
+
color: rgb(var(--md-sys-on-primary-container));
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.segmented-control label.active {
|
|
41
|
+
background-color: rgb(var(--md-sys-light-primary-container)) !important;
|
|
42
|
+
color: rgb(var(--md-sys-on-primary-container));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.checkmark {
|
|
46
|
+
margin-right: 8px;
|
|
47
|
+
visibility: hidden;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.segmented-control input[type="radio"]:checked + label .checkmark {
|
|
51
|
+
visibility: visible;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.segmented-control label:hover {
|
|
55
|
+
background-color: rgba(0, 0, 0, 0.04);
|
|
56
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<div class="segmented-control">
|
|
2
|
+
<% options.each do |option| %>
|
|
3
|
+
<%= form.radio_button field_name, option[:value], checked: option[:checked], id: "#{field_name}_#{option[:value]}" %>
|
|
4
|
+
<%= form.label "#{field_name}_#{option[:value]}", class: "segmented-btn grey-hover #{option[:class]}" do %>
|
|
5
|
+
<% if option[:checked] %>
|
|
6
|
+
<div class="mr-2">
|
|
7
|
+
<%= render "material_design/icons/icon", locals: { size: 18, icon: "check" } %>
|
|
8
|
+
</div>
|
|
9
|
+
<% end %>
|
|
10
|
+
<%= option[:label] %>
|
|
11
|
+
<% end %>
|
|
12
|
+
<% end %>
|
|
13
|
+
</div>
|
metadata
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: material_design
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.8.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Eduardo Yutaka Nakanishi
|
|
8
8
|
- Fabiana Ramos
|
|
9
9
|
- Mariana Negrão Trancoso
|
|
10
|
+
- Prscila Sabino
|
|
11
|
+
- Bianca Cristina Ramos
|
|
10
12
|
autorequire:
|
|
11
13
|
bindir: bin
|
|
12
14
|
cert_chain: []
|
|
13
|
-
date: 2024-10-
|
|
15
|
+
date: 2024-10-09 00:00:00.000000000 Z
|
|
14
16
|
dependencies:
|
|
15
17
|
- !ruby/object:Gem::Dependency
|
|
16
18
|
name: rails
|
|
@@ -41,10 +43,12 @@ files:
|
|
|
41
43
|
- app/assets/stylesheets/material_design/application.css
|
|
42
44
|
- app/assets/stylesheets/material_design/buttons.css
|
|
43
45
|
- app/assets/stylesheets/material_design/cards.css
|
|
46
|
+
- app/assets/stylesheets/material_design/chips.css
|
|
44
47
|
- app/assets/stylesheets/material_design/dividers.css
|
|
45
48
|
- app/assets/stylesheets/material_design/icons.css
|
|
46
49
|
- app/assets/stylesheets/material_design/lists.css
|
|
47
50
|
- app/assets/stylesheets/material_design/navigation.css
|
|
51
|
+
- app/assets/stylesheets/material_design/segmented_button.css
|
|
48
52
|
- app/assets/stylesheets/material_design/tabs.css
|
|
49
53
|
- app/assets/stylesheets/material_design/typography.css
|
|
50
54
|
- app/controllers/material_design/application_controller.rb
|
|
@@ -54,9 +58,11 @@ files:
|
|
|
54
58
|
- app/mailers/material_design/application_mailer.rb
|
|
55
59
|
- app/models/material_design/application_record.rb
|
|
56
60
|
- app/views/layouts/material_design/application.html.erb
|
|
61
|
+
- app/views/material_design/_chip.html.erb
|
|
57
62
|
- app/views/material_design/app_bars/_top_bar.html.erb
|
|
58
63
|
- app/views/material_design/buttons/_fab.html.erb
|
|
59
64
|
- app/views/material_design/buttons/_icon_button.html.erb
|
|
65
|
+
- app/views/material_design/buttons/_segmented_button.html.erb
|
|
60
66
|
- app/views/material_design/cards/_outlined.html.erb
|
|
61
67
|
- app/views/material_design/dividers/_horizontal.html.erb
|
|
62
68
|
- app/views/material_design/icons/_10k.html.erb
|
|
@@ -2226,7 +2232,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
2226
2232
|
- !ruby/object:Gem::Version
|
|
2227
2233
|
version: '0'
|
|
2228
2234
|
requirements: []
|
|
2229
|
-
rubygems_version: 3.5.
|
|
2235
|
+
rubygems_version: 3.5.13
|
|
2230
2236
|
signing_key:
|
|
2231
2237
|
specification_version: 4
|
|
2232
2238
|
summary: Material Design
|