Commit 351a1524 authored by Emma's avatar Emma 🦉

make all buttons use the same base class

parent e807749d
Pipeline #54927352 passed with stage
in 56 seconds
@import (reference) '../_mixins';
.button {
--font-size: 1.2rem;
--padding-v: 0.5rem;
--padding-h: 1rem;
.unbuttonize();
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-size: 1.2rem;
padding: 0.5rem 1rem;
font-size: var(--font-size);
padding: var(--padding-v) var(--padding-h);
text-align: center;
transition: background-color 0.3s;
white-space: nowrap;
......@@ -16,9 +19,10 @@
}
&--inline {
--font-size: 1em;
--padding-v: 0.25rem;
--padding-h: 0.5rem;
display: inline;
font-size: 1em;
padding: 0.25rem 0.5rem;
}
&:not(&--secondary) {
......
@import (reference) 'button';
.clear-notification-button {
.button;
font-size: 90%;
--font-size: 0.9rem;
float: right;
padding: 0.25rem 0.5rem;
}
@import (reference) '../_mixins';
// extension of .button
.subscribe-button {
.unbuttonize;
padding: 0;
cursor: pointer;
display: inline-block;
&:not(.button--inline) {
--font-size: 1rem;
}
&__inner {
display: flex;
}
&__label,
&__subscriber-count {
background-color: var(--primary);
color: var(--primary-fg);
padding: 0.5rem 1rem;
}
&__label {
border-radius: 4px 0 0 4px;
border-right: solid 1px currentColor;
padding: var(--padding-v) var(--padding-h);
}
&__subscriber-count {
border-radius: 0 4px 4px 0;
margin-left: 1px;
}
&:active {
.subscribe-button__label {
color: var(--fg-grey);
}
}
&:hover {
.subscribe-button__label {
background-color: var(--primary-alt);
}
}
/**
* Make widget suitable when space is tight, e.g. in table cells.
*/
&--inline {
vertical-align: top;
display: inline;
// todo: find out if it's better to let elements have their own modifiers
.subscribe-button__label,
.subscribe-button__subscriber-count {
padding: 0.25rem 0.5rem;
}
padding-left: var(--padding-h);
padding: var(--padding-v) var(--padding-h);
}
}
......@@ -40,7 +40,9 @@ $(() => {
}).fail(err => {
console && console.log('Failed to (un)subscribe', err);
}).always(() => {
$button.prop('disabled', false);
$button
.prop('disabled', false)
.blur();
});
});
});
......@@ -2,7 +2,7 @@
{%- set subscriber_count = subscriber_count ?? forum.subscriptions|length -%}
{%- from '_macros/icon.html.twig' import icon -%}
{%- from _self import subscribe_button, _subscribe_button_inner -%}
<button class="subscribe-button subscribe-button--{{ subscribed ? 'unsubscribe' : 'subscribe' }} {{ inline ? 'subscribe-button--inline' }}"
<button class="button {{ inline ? 'button--inline' }} subscribe-button subscribe-button--{{ subscribed ? 'un' }}subscribe"
data-toggle-prototype="{{ _subscribe_button_inner(not subscribed, subscriber_count + (subscribed ? -1 : 1))|e }}">
{{- _subscribe_button_inner(subscribed, subscriber_count) -}}
</button>
......@@ -14,7 +14,8 @@
{{- (subscribed ? 'forum.unsubscribe' : 'forum.subscribe')|trans -}}
</span>
<span class="subscribe-button__subscriber-count" aria-label="{{ 'forum.subscriber_count'|trans({'%count%': subscriber_count}) }}">
<span class="subscribe-button__subscriber-count"
aria-label="{{ 'forum.subscriber_count'|trans({'%count%': subscriber_count}) }}">
{{- subscriber_count|localizednumber -}}
</span>
</span>
......
......@@ -83,8 +83,6 @@
{% block clear_notification_button %}
<form action="{{ path('clear_notification', { id: notification.id }) }}" method="POST">
<input type="hidden" name="token" value="{{ csrf_token('clear_notification') }}">
<div>
<button type="submit" class="clear-notification-button">{{ 'action.clear'|trans }}</button>
</div>
<button type="submit" class="button button--inline clear-notification-button">{{ 'action.clear'|trans }}</button>
</form>
{% endblock clear_notification_button %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment