left-align admin buttons, add back btn-danger style

This commit is contained in:
Jeff Atwood 2013-02-13 23:47:19 -08:00
parent 87d83802b9
commit fe7cb0be05
3 changed files with 53 additions and 12 deletions

View File

@ -4,55 +4,55 @@
<ul>
<li>
<button {{action toggleMultiSelect}} class='btn btn-info'><i class='icon-tasks'></i> {{i18n topic.actions.multi_select}}</button>
<button {{action toggleMultiSelect}} class='btn btn-admin'><i class='icon-tasks'></i> {{i18n topic.actions.multi_select}}</button>
</li>
{{#if content.can_delete}}
<li>
<button {{action deleteTopic}} class='btn btn-danger'><i class='icon-trash'></i> {{i18n topic.actions.delete}}</button>
<button {{action deleteTopic}} class='btn btn-admin btn-danger'><i class='icon-trash'></i> {{i18n topic.actions.delete}}</button>
</li>
{{/if}}
<li>
{{#if content.closed}}
<button {{action toggleClosed}} class='btn'><i class='icon-unlock'></i> {{i18n topic.actions.open}}</button>
<button {{action toggleClosed}} class='btn btn-admin'><i class='icon-unlock'></i> {{i18n topic.actions.open}}</button>
{{else}}
<button {{action toggleClosed}} class='btn'><i class='icon-lock'></i> {{i18n topic.actions.close}}</button>
<button {{action toggleClosed}} class='btn btn-admin'><i class='icon-lock'></i> {{i18n topic.actions.close}}</button>
{{/if}}
</li>
<li>
{{#if content.pinned}}
<button {{action togglePinned}} class='btn'><i class='icon-pushpin'></i> {{i18n topic.actions.unpin}}</button>
<button {{action togglePinned}} class='btn btn-admin'><i class='icon-pushpin'></i> {{i18n topic.actions.unpin}}</button>
{{else}}
<button {{action togglePinned}} class='btn'><i class='icon-pushpin'></i> {{i18n topic.actions.pin}}</button>
<button {{action togglePinned}} class='btn btn-admin'><i class='icon-pushpin'></i> {{i18n topic.actions.pin}}</button>
{{/if}}
</li>
<li>
{{#if content.archived}}
<button {{action toggleArchived}} class='btn'><i class='icon-folder-close'></i> {{i18n topic.actions.unarchive}}</button>
<button {{action toggleArchived}} class='btn btn-admin'><i class='icon-folder-close'></i> {{i18n topic.actions.unarchive}}</button>
{{else}}
<button {{action toggleArchived}} class='btn'><i class='icon-folder-close'></i> {{i18n topic.actions.archive}}</button>
<button {{action toggleArchived}} class='btn btn-admin'><i class='icon-folder-close'></i> {{i18n topic.actions.archive}}</button>
{{/if}}
</li>
<li>
{{#if content.visible}}
<button {{action toggleVisibility}} class='btn'><i class='icon-eye-close'></i> {{i18n topic.actions.invisible}}</button>
<button {{action toggleVisibility}} class='btn btn-admin'><i class='icon-eye-close'></i> {{i18n topic.actions.invisible}}</button>
{{else}}
<button {{action toggleVisibility}} class='btn'><i class='icon-eye-open'></i> {{i18n topic.actions.visible}}</button>
<button {{action toggleVisibility}} class='btn btn-admin'><i class='icon-eye-open'></i> {{i18n topic.actions.visible}}</button>
{{/if}}
</li>
{{#if view.topic.canConvertToRegular}}
<li>
<button {{action convertToRegular}} class='btn'><i class='icon-minus'></i> {{i18n topic.actions.convert_to_topic}}</button>
<button {{action convertToRegular}} class='btn btn-admin'><i class='icon-minus'></i> {{i18n topic.actions.convert_to_topic}}</button>
</li>
{{/if}}
<li>
<button class='btn' {{action resetRead target="view.parentView"}}><i class='icon-remove'></i> {{i18n topic.actions.reset_read}}</button>
<button class='btn btn-admin' {{action resetRead target="view.parentView"}}><i class='icon-remove'></i> {{i18n topic.actions.reset_read}}</button>
</li>
</ul>
</div>

View File

@ -59,6 +59,12 @@
}
}
// Buttons used in admin panel
// --------------------------------------------------
.btn-admin {
text-align:left;
}
// Primary button
// --------------------------------------------------
@ -86,6 +92,34 @@
@include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark);
@include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2)));
}
// Danger button
// --------------------------------------------------
.btn-danger {
border: 1px solid $btn-danger-border-color;
color: $white;
text-shadow: 0 1px 0 rgba($black, 0.2);
font-weight: bold;
@include linear-gradient($btn-danger-background-color, $btn-danger-background-color-dark);
@include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2)));
&[href] {
color: $white;
}
&:hover,
&:focus {
@include linear-gradient($btn-danger-background-color, $btn-danger-background-color-light);
@include box-shadow(inset 0 1px 0 rgba($white, 0.33));
}
&:active {
@include linear-gradient($btn-danger-background-color-dark, $btn-danger-background-color);
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
}
&[disabled] {
text-shadow: 0 1px 0 rgba($black, 0.2);
@include linear-gradient($btn-danger-background-color, $btn-danger-background-color-dark);
@include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2)));
}
}
// Social buttons

View File

@ -48,6 +48,13 @@ $btn-primary-background-color: #00aeef !default;
$btn-primary-background-color-dark: #009dd8 !default;
$btn-primary-background-color-light: #00b0f0 !default;
// Danger button (delete, etc)
$btn-danger-border-color: #7D1D16 !default;
$btn-danger-background-color: #EE1C0B !default;
$btn-danger-background-color-dark: #D81100 !default;
$btn-danger-background-color-light: #EE1C0B !default;
// Navigation menus
// --------------------------------------------------