Merge styles of <a>.button/<button>/<input type="submit"> into .button

Remove flash button Fix some multi-selector specificity differences
2026-03-04 17:13:11 +01:00
parent 4175d31b9d
commit a9091d76a8
5 changed files with 86 additions and 99 deletions
--- a/app/assets/images/pictograms/alert-outline.svg
+++ b/app/assets/images/pictograms/alert-outline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
--- a/app/assets/images/pictograms/check-circle-outline.svg
+++ b/app/assets/images/pictograms/check-circle-outline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -91,55 +91,17 @@ input,
 select {
  text-align: inherit;
 }
-a,
-button,
-input[type=submit] {
-  cursor: pointer;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.button,
-button,
-input[type=submit],
-.tab {
-  align-items: center;
-  color: var(--color-gray);
-  display: flex;
-  fill: var(--color-gray);
-  font-weight: bold;
-}
-.button,
-button,
-input[type=submit] {
-  font-size: 0.8rem;
-  padding: 0.6em 0.5em;
-  width: fit-content;
-}
-input:not([type=submit]):not([type=checkbox]),
-select,
-summary,
-textarea {
-  padding: 0.2em 0.4em;
-}
-.button,
-button,
 input,
 select,
 summary,
 textarea {
  border: solid 1px var(--color-gray);
  border-radius: 0.25em;
+  padding: 0.2em 0.4em;
 }
-[name=cancel],
-.auxiliary {
-  border-color: var(--color-border-gray);
-  color: var(--color-nav-gray);
-  fill: var(--color-nav-gray);
-}
-input[type=checkbox],
 svg,
 textarea {
-  margin: 0
+  margin: 0;
 }
 input[type=checkbox] {
  accent-color: var(--color-blue);
@@ -147,6 +109,8 @@ input[type=checkbox] {
  -webkit-appearance: none;
  display: flex;
  height: 1.1em;
+  margin: 0;
+  padding: 0;
  width: 1.1em;
 }
 input[type=checkbox]:checked {
@@ -166,37 +130,54 @@ input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
 }
+
+/* `.button`: button-styled <a>, <button>, <input type=submit>.
+ * `.link`: any other <a>.
+ * `.tab`: tab-styled <a>.
+ */
+.button,
+.link,
+.tab {
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.button,
+.tab {
+  align-items: center;
+  color: var(--color-gray);
+  display: flex;
+  fill: var(--color-gray);
+  font-weight: bold;
+}
+.button {
+  border: solid 1px var(--color-gray);
+  border-radius: 0.25em;
+  font-size: 0.8rem;
+  padding: 0.6em 0.5em;
+  width: fit-content;
+}
+[name=cancel],
+.auxiliary {
+  border-color: var(--color-border-gray);
+  color: var(--color-nav-gray);
+  fill: var(--color-nav-gray);
+}
 .button > svg,
-.tab > svg,
-button > svg {
+.tab > svg {
  height: 1.4em;
  width: 1.4em;
 }
 .button > svg:not(:last-child),
-.tab > svg:not(:last-child),
-button > svg:not(:last-child) {
+.tab > svg:not(:last-child) {
  margin-right: 0.2em;
 }
-/* TODO: move normal, non-button links (<a>:hover/:focus) styling here (i.e.
- * page-wide, top-level) and remove from `table.items` - as the style should be
- * same everywhere. */
 .button:focus-visible,
-button:focus-visible,
-input[type=submit]:focus-visible {
+.tab:focus-visible,
+.tab:hover {
  background-color: var(--color-focus-gray);
 }
-input:focus-visible,
-select:focus-visible,
-select:focus-within,
-/* TODO: how to achieve `summary:focus-within` for `::details-content`? */
-summary:focus-visible,
-textarea:focus-visible {
-  accent-color: var(--color-dark-blue);
-  background-color: var(--color-focus-gray);
-}
-.button:hover,
-button:hover,
-input[type=submit]:hover {
+.button:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: white;
@@ -206,6 +187,18 @@ input[type=submit]:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
 }
+/* TODO: move normal, non-button links (<a>:hover/:focus) styling here (i.e.
+ * page-wide, top-level) and remove from `table.items` - as the style should be
+ * same everywhere. */
+input:focus-visible,
+select:focus-visible,
+select:focus-within,
+/* TODO: how to achieve `summary:focus-within` for `::details-content`? */
+summary:focus-visible,
+textarea:focus-visible {
+  accent-color: var(--color-dark-blue);
+  background-color: var(--color-focus-gray);
+}
 input:hover,
 select:hover,
 summary:hover,
@@ -270,10 +263,6 @@ header {
  justify-content: center;
  padding-block: 0.4em;
 }
-.navigation > .tab:hover,
-.navigation > .tab:focus-visible {
-  background-color: var(--color-focus-gray);
-}
 .navigation > .tab.active {
  border-bottom: solid 4px var(--color-blue);
  color: var(--color-blue);
@@ -307,7 +296,7 @@ header {

 #flashes {
  display: grid;
-  gap: 0.2em;
+  row-gap: 0.4em;
  grid-template-columns: 1fr auto auto auto 1fr;
  left: 0;
  pointer-events: none;
@@ -323,44 +312,38 @@ header {
  display: grid;
  grid-column: 2/5;
  grid-template-columns: subgrid;
+  line-height: 2.2em;
  pointer-events: auto;
 }
-.flash.alert:before {
-  content: url('pictograms/alert-outline.svg');
+.flash:before {
+  filter: invert();
  height: 1.4em;
  margin: 0 0.5em;
  width: 1.4em;
 }
+.flash.alert:before {
+  content: url('pictograms/alert-outline.svg');
+}
 .flash.alert {
  border-color: var(--color-red);
  background-color: var(--color-red);
 }
 .flash.notice:before {
  content: url('pictograms/check-circle-outline.svg');
-  height: 1.4em;
-  margin: 0 0.5em;
-  width: 1.4em;
 }
 .flash.notice {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
 }
-.flash > div {
-  grid-column: 2;
-}
-/* NOTE: currently flash <button> inherits some unnecessary styles from generic
- * <button>. */
-.flash > button {
-  border: none;
-  color: inherit;
+.flash svg {
  cursor: pointer;
-  font-size: 1.4em;
-  font-weight: bold;
-  grid-column: 3;
+  fill: white;
+  height: 2.2em;
  opacity: 0.6;
-  padding: 0.2em 0.4em;
+  padding: 0.4em 0.5em;
+  width: 2.4em;
 }
-.flash > button:hover {
+.flash svg:hover {
  opacity: 1;
 }

@@ -535,9 +518,7 @@ table.items td.svg {
 table.items td.number {
  text-align: right;
 }
-table.items .button,
-table.items button,
-table.items input[type=submit] {
+table.items .button {
  font-weight: normal;
  height: 100%;
  padding: 0.4em;
@@ -550,15 +531,12 @@ table.items textarea {
 /* TODO: find a way (layers?) to style <input>s differently while making sure
 * hover works properly without using `:not(:hover)` selectors here. */
 table.items .button:not(:hover),
-table.items button:not(:hover),
 table.items input:not(:hover),
 table.items select:not(:hover),
 table.items textarea:not(:hover) {
  border-color: var(--color-border-gray);
 }
 table.items .button:not(:hover),
-table.items button:not(:hover),
-table.items input[type=submit]:not(:hover),
 table.items select:not(:hover) {
  color: var(--color-table-gray);
 }
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -12,6 +12,12 @@ module ApplicationHelper
      labeled_field_for(method, options) { super }
    end

+    def submit(value = nil, options = {})
+      value, options = nil, value if value.is_a?(Hash)
+      options[:class] = @template.class_names('button', options[:class])
+      super
+    end
+
    private

    def labeled_field_for(method, options)
@@ -108,8 +114,12 @@ module ApplicationHelper
    end

    def button(value = nil, options = {}, &block)
-      # button does not use #objectify_options
-      options.merge!(@options.slice(:form))
+      # #button does not use #objectify_options/@default_options
+      value, options = nil, value if value.is_a?(Hash)
+      options = options.merge(
+        @default_options.slice(:form),
+        class: @template.class_names('button', options[:class])
+      )
      super
    end

@@ -143,7 +153,8 @@ module ApplicationHelper
  end

  def svg_tag(source, label = nil, options = {})
-    svg_tag = tag.svg(options) do
+    label, options = nil, label if label.is_a? Hash
+    svg_tag = tag.svg(**options) do
      tag.use(href: "#{image_path(source + ".svg")}#icon")
    end
    label.blank? ? svg_tag : svg_tag + tag.span(label)
@@ -212,9 +223,8 @@ module ApplicationHelper
      # Conversion of flash to Array only required because of Devise
      Array(messages).map do |message|
        tag.div class: "flash #{entry}" do
-          # TODO: change button text to svg to make it aligned vertically
-          tag.div(sanitize(message)) + tag.button(sanitize("&times;"), tabindex: -1,
-                                                  onclick: "this.parentElement.remove();")
+          tag.span(sanitize(message)) +
+            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
        end
      end
    end.join.html_safe
--- a/app/views/users/profiles/new.html.erb
+++ b/app/views/users/profiles/new.html.erb
@@ -10,7 +10,6 @@

  <%= f.submit t(:register), data: {turbo: false} %>

-  <%# TODO: fix button text color after change link -> button %>
  <%= image_button_tag t(:resend_confirmation), 'email-sync-outline',
    class: 'auxiliary', formaction: user_confirmation_path, formnovalidate: true,
    data: {validate: f.field_id(:email)} %>