summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-07-21 18:23:53 +0200
committerVolpeon <git@volpeon.ink>2025-07-21 18:23:53 +0200
commit71da0fd8d8da2efdef33a2e21f8421890c06e468 (patch)
treeec2c35bbf94175d4b90769d5e6145e3170f12d88
parentFlat card (diff)
downloadiro-design-71da0fd8d8da2efdef33a2e21f8421890c06e468.tar.gz
iro-design-71da0fd8d8da2efdef33a2e21f8421890c06e468.tar.bz2
iro-design-71da0fd8d8da2efdef33a2e21f8421890c06e468.zip
Action button: add static mod
Diffstat
-rw-r--r--src/objects/_action-button.scss43
-rw-r--r--tpl/objects/action-button.pug2
-rw-r--r--tpl/views/action-button.pug43
3 files changed, 73 insertions, 15 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 7863f50..f4a9a46 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -52,6 +52,35 @@
52 } 52 }
53 } 53 }
54 54
55 @include bem.modifier('static') {
56 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
57 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
58 border-color: transparent;
59 box-shadow: none;
60
61 &:link,
62 &:visited,
63 &:enabled {
64 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
65 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
66 border-color: transparent;
67 box-shadow: none;
68
69 &:hover,
70 &:focus-visible {
71 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
72 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
73 border-color: transparent;
74 }
75
76 &:active {
77 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
79 border-color: transparent;
80 }
81 }
82 }
83
55 @include bem.modifier('quiet') { 84 @include bem.modifier('quiet') {
56 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); 85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
57 background-color: transparent; 86 background-color: transparent;
@@ -80,11 +109,17 @@
80 } 109 }
81 } 110 }
82 111
83 @include bem.is('selected', 'badge') { 112 @include bem.is('selected') {
84 color: props.get($theme, list.join($key, --selected --disabled --label-color)...); 113 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
85 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); 114 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
86 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); 115 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
87 116
117 @include bem.modifier('static') {
118 color: props.get($theme, list.join($key, --selected --label-color)...);
119 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
120 border-color: props.get($theme, list.join($key, --selected --border-color)...);
121 }
122
88 &:link, 123 &:link,
89 &:visited, 124 &:visited,
90 &:enabled { 125 &:enabled {
@@ -106,12 +141,6 @@
106 } 141 }
107 } 142 }
108 } 143 }
109
110 @include bem.is('badge') {
111 color: props.get($theme, list.join($key, --selected --label-color)...);
112 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
113 border-color: props.get($theme, list.join($key, --selected --border-color)...);
114 }
115} 144}
116 145
117@mixin styles { 146@mixin styles {
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index 0ab084e..0e77e58 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -8,7 +8,7 @@ mixin action-button
8 'o-action-button--secondary': attributes.secondary, 8 'o-action-button--secondary': attributes.secondary,
9 'o-action-button--quiet': attributes.quiet, 9 'o-action-button--quiet': attributes.quiet,
10 'o-action-button--pill': attributes.pill, 10 'o-action-button--pill': attributes.pill,
11 'o-action-button--badge': attributes.badge, 11 'o-action-button--static': attributes.static,
12 'o-action-button--icon': !!attributes.icon && !block, 12 'o-action-button--icon': !!attributes.icon && !block,
13 'is-selected': attributes.selected, 13 'is-selected': attributes.selected,
14 } 14 }
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 025bd78..4d2ffb6 100644
--- a/tpl/views/action-button.pug
+++ b/tpl/views/action-button.pug
@@ -62,13 +62,6 @@ mixin view-action-button
62 +action-button(icon='trash') 62 +action-button(icon='trash')
63 br 63 br
64 br 64 br
65 +action-button(secondary=true)= 'Label'
66 = ' '
67 +action-button(secondary=true icon='trash')= 'Label'
68 = ' '
69 +action-button(secondary=true icon='trash')
70 br
71 br
72 +action-button(quiet=true)= 'Label' 65 +action-button(quiet=true)= 'Label'
73 = ' ' 66 = ' '
74 +action-button(quiet=true icon='trash')= 'Label' 67 +action-button(quiet=true icon='trash')= 'Label'
@@ -85,6 +78,15 @@ mixin view-action-button
85 +action-button(selected=true disabled=true)= 'Selected + disabled' 78 +action-button(selected=true disabled=true)= 'Selected + disabled'
86 br 79 br
87 br 80 br
81 +action-button(static=true )= 'Idle'
82 = ' '
83 +action-button(static=true selected=true)= 'Selected'
84 = ' '
85 +action-button(static=true disabled=true)= 'Disabled'
86 = ' '
87 +action-button(static=true selected=true disabled=true)= 'Selected + disabled'
88 br
89 br
88 +action-button(quiet=true )= 'Idle' 90 +action-button(quiet=true )= 'Idle'
89 = ' ' 91 = ' '
90 +action-button(quiet=true selected=true)= 'Selected' 92 +action-button(quiet=true selected=true)= 'Selected'
@@ -103,6 +105,15 @@ mixin view-action-button
103 +action-button(pill=true selected=true disabled=true)= 'Selected + disabled' 105 +action-button(pill=true selected=true disabled=true)= 'Selected + disabled'
104 br 106 br
105 br 107 br
108 +action-button(pill=true static=true)= 'Idle'
109 = ' '
110 +action-button(pill=true static=true selected=true)= 'Selected'
111 = ' '
112 +action-button(pill=true static=true disabled=true)= 'Disabled'
113 = ' '
114 +action-button(pill=true static=true selected=true disabled=true)= 'Selected + disabled'
115 br
116 br
106 +action-button(pill=true quiet=true)= 'Idle' 117 +action-button(pill=true quiet=true)= 'Idle'
107 = ' ' 118 = ' '
108 +action-button(pill=true quiet=true selected=true)= 'Selected' 119 +action-button(pill=true quiet=true selected=true)= 'Selected'
@@ -122,6 +133,15 @@ mixin view-action-button
122 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' 133 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
123 br 134 br
124 br 135 br
136 +action-button(theme=theme static=true)= 'Idle'
137 = ' '
138 +action-button(theme=theme static=true selected=true)= 'Selected'
139 = ' '
140 +action-button(theme=theme static=true disabled=true)= 'Disabled'
141 = ' '
142 +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
143 br
144 br
125 +action-button(theme=theme quiet=true)= 'Idle' 145 +action-button(theme=theme quiet=true)= 'Idle'
126 = ' ' 146 = ' '
127 +action-button(theme=theme quiet=true selected=true)= 'Selected' 147 +action-button(theme=theme quiet=true selected=true)= 'Selected'
@@ -144,6 +164,15 @@ mixin view-action-button
144 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' 164 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
145 br 165 br
146 br 166 br
167 +action-button(theme=theme static=true)= 'Idle'
168 = ' '
169 +action-button(theme=theme static=true selected=true)= 'Selected'
170 = ' '
171 +action-button(theme=theme static=true disabled=true)= 'Disabled'
172 = ' '
173 +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
174 br
175 br
147 +action-button(theme=theme quiet=true)= 'Idle' 176 +action-button(theme=theme quiet=true)= 'Idle'
148 = ' ' 177 = ' '
149 +action-button(theme=theme quiet=true selected=true)= 'Selected' 178 +action-button(theme=theme quiet=true selected=true)= 'Selected'
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-24 16:30:26 +0000