Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

create button layout ref and split subtle button into "btn--text btn--secondary" (darker) and "btn--text btn--subtle" (lighter)

Browse source
This commit is contained in:
Felix Niklas 2015-06-26 11:47:28 +02:00
parent 05048921de
commit 65db49831d
26 changed files with 167 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
View file

@ -5,8 +5,7 @@ class App.TicketCreate extends App.Controller
events: events:
'click .type-tabs .tab': 'changeFormType' 'click .type-tabs .tab': 'changeFormType'
'submit form': 'submit' 'submit form': 'submit'
'click .submit': 'submit' 'click .js-cancel': 'cancel'
'click .cancel': 'cancel'
constructor: (params) -> constructor: (params) ->
super super

12
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -1501,4 +1501,16 @@ class calendarSubscriptionsRef extends App.ControllerContent
App.Config.set( 'layout_ref/calendar_subscriptions', calendarSubscriptionsRef, 'Routes' ) App.Config.set( 'layout_ref/calendar_subscriptions', calendarSubscriptionsRef, 'Routes' )
class ButtonsRef extends App.ControllerContent
constructor: ->
super
@render()
render: ->
@html App.view('layout_ref/buttons')
App.Config.set( 'layout_ref/buttons', ButtonsRef, 'Routes' )
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' ) App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

8
app/assets/javascripts/app/views/agent_ticket_create.jst.eco
View file

@ -36,9 +36,9 @@
<div class="ticket-form-bottom"></div> <div class="ticket-form-bottom"></div>
</div> </div>
<div class="form-actions horizontal"> <div class="form-controls">
<a class="subtle-link standalone cancel" href="#/"><%- @T('Cancel & Go Back') %></a> <a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T('Cancel & Go Back') %></a>
<button type="submit" class="btn btn--success submit align-right"><%- @T('Create') %></button> <button type="submit" class="btn btn--success align-right"><%- @T('Create') %></button>
</div> </div>
</form> </form>
</div> </div>
@ -147,7 +147,7 @@
</ul> </ul>
<div class="horizontal"> <div class="horizontal">
<button class="btn btn-primary" type="submit"><%- @T('Save Template') %></button> <button class="btn btn-primary" type="submit"><%- @T('Save Template') %></button>
<a class="subtle-link standalone cancel align-right u-clickable"><%- @T('Cancel') %></a> <a class="btn btn--text btn--secondary js-cancel align-right u-clickable"><%- @T('Cancel') %></a>
</div> </div>
</form> </form>
</div> </div>

2
app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco
View file

@ -8,7 +8,7 @@
<div class="horizontal"> <div class="horizontal">
<div id="form-ticket-bulk-typeVisibility" class="form-inline"></div> <div id="form-ticket-bulk-typeVisibility" class="form-inline"></div>
<div class="bulkAction-controls align-right"> <div class="bulkAction-controls align-right">
<a class="subtle-link standalone js-cancel"><%- @T( 'Go Back' ) %></a> <a class="btn btn--text btn--secondary js-cancel"><%- @T( 'Go Back' ) %></a>
<input type="submit" class="btn btn--primary js-submit" value="<%- @T('Update') %>"> <input type="submit" class="btn btn--primary js-submit" value="<%- @T('Update') %>">
</div> </div>
</div> </div>

2
app/assets/javascripts/app/views/agent_user_create.jst.eco
View file

@ -9,7 +9,7 @@
</div> </div>
<div class="modal-body" id="form-user"></div> <div class="modal-body" id="form-user"></div>
<div class="modal-footer"> <div class="modal-footer">
<a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a> <a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn--success js-submit align-right"><%- @T( 'Create' ) %></button> <button type="submit" class="btn btn--success js-submit align-right"><%- @T( 'Create' ) %></button>
</div> </div>
</div> </div>

4
app/assets/javascripts/app/views/customer_ticket_create.jst.eco
View file

@ -17,8 +17,8 @@
</div> </div>
<div class="form-actions horizontal"> <div class="form-controls">
<a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a> <a class="btn btn--text btn--subtle cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn--success submit align-right"><%- @T( 'Create' ) %></button> <button type="submit" class="btn btn--success submit align-right"><%- @T( 'Create' ) %></button>
</div> </div>
</form> </form>

2
app/assets/javascripts/app/views/getting_started/admin.jst.eco
View file

@ -5,7 +5,7 @@
<h2><%- @T('Administrator Account') %></h2> <h2><%- @T('Administrator Account') %></h2>
<div class="wizard-body vertical justified js-admin-form"></div> <div class="wizard-body vertical justified js-admin-form"></div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<a class="subtle-link" href="#getting_started"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary" href="#getting_started"><%- @T('Go Back') %></a>
<button class="btn btn--success align-right"><%- @T( 'Create' ) %></button> <button class="btn btn--success align-right"><%- @T( 'Create' ) %></button>
</div> </div>
</div> </div>

2
app/assets/javascripts/app/views/getting_started/channel.jst.eco
View file

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<a class="subtle-link" href="#getting_started/base"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary" href="#getting_started/base"><%- @T('Go Back') %></a>
<a class="btn align-right" href="#getting_started/finish"><%- @T( 'Skip' ) %></a> <a class="btn align-right" href="#getting_started/finish"><%- @T( 'Skip' ) %></a>
</div> </div>
</div> </div>

6
app/assets/javascripts/app/views/getting_started/email.jst.eco
View file

@ -22,7 +22,7 @@
</fieldset> </fieldset>
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<a class="subtle-link" href="#getting_started/channel"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary" href="#getting_started/channel"><%- @T('Go Back') %></a>
<button class="btn btn--primary align-right"><%- @T( 'Connect' ) %></button> <button class="btn btn--primary align-right"><%- @T( 'Connect' ) %></button>
</div> </div>
</div> </div>
@ -70,7 +70,7 @@
<div class="base-inbound-settings"></div> <div class="base-inbound-settings"></div>
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<a class="subtle-link js-back" data-slide="js-intro"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary js-back" data-slide="js-intro"><%- @T('Go Back') %></a>
<button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button> <button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button>
</div> </div>
</div> </div>
@ -85,7 +85,7 @@
<div class="base-outbound-settings"></div> <div class="base-outbound-settings"></div>
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<a class="subtle-link js-back" data-slide="js-inbound"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary js-back" data-slide="js-inbound"><%- @T('Go Back') %></a>
<button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button> <button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button>
</div> </div>
</div> </div>

2
app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco
View file

@ -13,7 +13,7 @@
<p class="help-block help-block--center"><%- @T('If you want to use more email adresses, you can configure them later.') %></p> <p class="help-block help-block--center"><%- @T('If you want to use more email adresses, you can configure them later.') %></p>
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<a class="subtle-link" href="#getting_started/base"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary" href="#getting_started/base"><%- @T('Go Back') %></a>
<a class="btn align-right" href="#getting_started/finish"><%- @T( 'Finish' ) %></a> <a class="btn align-right" href="#getting_started/finish"><%- @T( 'Finish' ) %></a>
</div> </div>
</div> </div>

2
app/assets/javascripts/app/views/import/index.jst.eco
View file

@ -11,7 +11,7 @@
</div> </div>
</div> </div>
<div class="wizard-controls horizontal center"> <div class="wizard-controls horizontal center">
<a class="subtle-link" href="#getting_started"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary" href="#getting_started"><%- @T('Go Back') %></a>
</div> </div>
</div> </div>
</div> </div>

6
app/assets/javascripts/app/views/import/otrs.jst.eco
View file

@ -9,7 +9,7 @@
</p> </p>
</div> </div>
<div class="wizard-controls horizontal center"> <div class="wizard-controls horizontal center">
<a class="subtle-link" href="#import"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
</div> </div>
</div> </div>
<div class="wizard-slide vertical hide" data-slide="otrs-plugin"> <div class="wizard-slide vertical hide" data-slide="otrs-plugin">
@ -21,7 +21,7 @@
<a class="btn btn--primary btn--download js-download" download><svg class="icon-download"><use xlink:href="#icon-download" /></svg> <%- @T('Personal Migration Plugin') %></a> <a class="btn btn--primary btn--download js-download" download><svg class="icon-download"><use xlink:href="#icon-download" /></svg> <%- @T('Personal Migration Plugin') %></a>
</div> </div>
<div class="wizard-controls horizontal center"> <div class="wizard-controls horizontal center">
<a class="subtle-link" href="#import"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
<div class="btn btn--primary align-right hide js-otrs-link"><%- @T('Next') %></div> <div class="btn btn--primary align-right hide js-otrs-link"><%- @T('Next') %></div>
</div> </div>
</div> </div>
@ -45,7 +45,7 @@
</div> </div>
</div> </div>
<div class="wizard-controls horizontal center"> <div class="wizard-controls horizontal center">
<a class="subtle-link" href="#import"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
<div class="btn btn--primary align-right hide js-migration-start" data-target="otrs-start-migration"><%- @T('Migrate OTRS Data') %></div> <div class="btn btn--primary align-right hide js-migration-start" data-target="otrs-start-migration"><%- @T('Migrate OTRS Data') %></div>
</div> </div>
</div> </div>

57
app/assets/javascripts/app/views/layout_ref/buttons.jst.eco Normal file
View file

@ -0,0 +1,57 @@
<div class="main flex">
<h1>Buttons</h1>
<h2>Normal Buttons</h2>
<h3>Default</h3>
<div class="btn">Default Button</div>
<div class="btn btn--slim">Slim Button</div>
<div class="btn is-disabled">Disabled Button</div>
<h3>Primary</h3>
<div class="btn btn--primary">Primary Button</div>
<div class="btn btn--secondary">Secondary Button</div>
<h3>Positive</h3>
<div class="btn btn--positive">Positive Button</div>
<div class="btn btn--positive btn--secondary">Positive Secondary Button</div>
<h3>Dangerous</h3>
<div class="btn btn--danger">Dangerous Button</div>
<div class="btn btn--danger btn--secondary">Dangerous Secondary Button</div>
<h3>Split</h3>
<div class="horizontal">
<div class="btn btn--split--first">Split First Button</div>
<div class="btn btn--split">Split Button</div>
<div class="btn btn--split--last">Split Last Button</div>
</div>
<h2>Text Buttons</h2>
<h3>Default</h3>
<div class="btn btn--text">Text Button</div>
<div class="btn btn--secondary btn--text">Secondary Text Button</div>
<h3>Positive</h3>
<div class="btn btn--positive btn--text">Positive Text Button</div>
<h3>Dangerous</h3>
<div class="btn btn--danger btn--text">Dangerous Text Button</div>
<h3>Subtle</h3>
<div class="btn btn--text btn--secondary">Subtle Button</div>
<h2>Action Buttons</h2>
<h3>Default</h3>
<div class="btn btn--action">Action Button</div>
<h3>Split</h3>
<div class="horizontal">
<div class="btn btn--action btn--split--first">Split First</div>
<div class="btn btn--action btn--split">Split</div>
<div class="btn btn--action btn--split--last">Split Last</div>
</div>
</div>

6
app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
View file

@ -16,7 +16,7 @@
</p> </p>
</div> </div>
<div class="wizard-controls horizontal center"> <div class="wizard-controls horizontal center">
<a class="subtle-link" data-target="home">Go Back</a> <a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
</div> </div>
</div> </div>
<div class="wizard-slide hide" data-slide="otrs-plugin"> <div class="wizard-slide hide" data-slide="otrs-plugin">
@ -29,7 +29,7 @@
<svg class="icon-download"><use xlink:href="#icon-download" /></svg> Personal Migration Plugin</a> <svg class="icon-download"><use xlink:href="#icon-download" /></svg> Personal Migration Plugin</a>
</div> </div>
<div class="wizard-controls horizontal center"> <div class="wizard-controls horizontal center">
<a class="subtle-link" data-target="home">Go Back</a> <a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
<div class="btn btn--primary align-right hide" data-target="otrs-link">Next</div> <div class="btn btn--primary align-right hide" data-target="otrs-link">Next</div>
</div> </div>
</div> </div>
@ -52,7 +52,7 @@
</div> </div>
</div> </div>
<div class="wizard-controls horizontal center"> <div class="wizard-controls horizontal center">
<a class="subtle-link" data-target="otrs-plugin">Go Back</a> <a class="btn btn--text btn--secondary" data-target="otrs-plugin">Go Back</a>
<div class="btn btn--primary align-right hide" data-target="otrs-export">Migrate OTRS Data</div> <div class="btn btn--primary align-right hide" data-target="otrs-export">Migrate OTRS Data</div>
</div> </div>
</div> </div>

1
app/assets/javascripts/app/views/layout_ref/index.jst.eco
View file

@ -4,6 +4,7 @@
<ul> <ul>
<li><a href="#layout_ref/buttons">👇👉👈👆 All the Buttons</a></li>
<li><a href="#layout_ref/calendar_subscription">Calendar Subscription</a></li> <li><a href="#layout_ref/calendar_subscription">Calendar Subscription</a></li>
<li><a href="#layout_ref/search_select">Searchable Select</a></li> <li><a href="#layout_ref/search_select">Searchable Select</a></li>
<li><a href="#layout_ref/schedulers">Schedulers</a></li> <li><a href="#layout_ref/schedulers">Schedulers</a></li>

2
app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
View file

@ -290,7 +290,7 @@
</fieldset> </fieldset>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a class="subtle-link standalone js-cancel" href="#/">Cancel & Go Back</a> <a class="btn btn--text btn--subtle js-cancel" href="#/">Cancel & Go Back</a>
<button type="submit" class="btn btn--success js-submit align-right">Update & Back</button> <button type="submit" class="btn btn--success js-submit align-right">Update & Back</button>
</div> </div>
</div> </div>

16
app/assets/javascripts/app/views/layout_ref/setup.jst.eco
View file

@ -41,7 +41,7 @@
</fieldset> </fieldset>
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<a class="subtle-link" data-target="home">Go Back</a> <a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
<div class="btn btn--success align-right" data-target="company">Create</div> <div class="btn btn--success align-right" data-target="company">Create</div>
</div> </div>
</div> </div>
@ -67,7 +67,7 @@
</fieldset> </fieldset>
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<a class="subtle-link" data-target="home">Go Back</a> <a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
<div class="btn btn--primary align-right" data-target="channels">Next</div> <div class="btn btn--primary align-right" data-target="channels">Next</div>
</div> </div>
</div> </div>
@ -91,7 +91,7 @@
</div> </div>
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<a class="subtle-link" data-target="company">Go Back</a> <a class="btn btn--text btn--secondary" data-target="company">Go Back</a>
<div class="btn align-right" data-target="agent">Skip</div> <div class="btn align-right" data-target="agent">Skip</div>
</div> </div>
</div> </div>
@ -115,7 +115,7 @@
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<div class="btn" data-target="channels">Cancel</div> <div class="btn" data-target="channels">Cancel</div>
<a class="subtle-link align-right" data-target="channels">Go Back</a> <a class="btn btn--text btn--secondary align-right" data-target="channels">Go Back</a>
<div class="btn btn--primary" data-target="emailCheck">Connect</div> <div class="btn btn--primary" data-target="emailCheck">Connect</div>
</div> </div>
</div> </div>
@ -161,7 +161,7 @@
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<div class="btn js-cancelChannelSetup" data-target="channels">Cancel</div> <div class="btn js-cancelChannelSetup" data-target="channels">Cancel</div>
<a class="subtle-link align-right" data-target="emailStart">Go Back</a> <a class="btn btn--text btn--secondary align-right" data-target="emailStart">Go Back</a>
<div class="btn btn--primary" data-target="inboundCheck">Connect</div> <div class="btn btn--primary" data-target="inboundCheck">Connect</div>
</div> </div>
</div> </div>
@ -195,8 +195,8 @@
</fieldset> </fieldset>
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<div class="btn btn--subtle js-cancelChannelSetup" data-target="channels">Cancel</div> <div class="btn btn--text btn--secondary js-cancelChannelSetup" data-target="channels">Cancel</div>
<div class="btn btn--subtle align-right" data-target="emailStart">Go Back</div> <div class="btn btn--text btn--secondary align-right" data-target="emailStart">Go Back</div>
<div class="btn btn--primary" data-target="outboundCheck">Connect</div> <div class="btn btn--primary" data-target="outboundCheck">Connect</div>
</div> </div>
</div> </div>
@ -263,7 +263,7 @@
</fieldset> </fieldset>
</div> </div>
<div class="wizard-controls center"> <div class="wizard-controls center">
<a class="subtle-link" data-target="moreChannels">Go Back</a> <a class="btn btn--text btn--secondary" data-target="moreChannels">Go Back</a>
<div class="btn btn--primary align-right" data-target="setupFinished">Continue</div> <div class="btn btn--primary align-right" data-target="setupFinished">Continue</div>
<div class="btn btn--success js-inviteAgent">Invite</div> <div class="btn btn--success js-inviteAgent">Invite</div>
</div> </div>

2
app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
View file

@ -180,7 +180,7 @@
</div> </div>
<h2>Schedule</h2> <h2>Schedule</h2>
<h3>Business Hours <span class="subtitle">in European Central Time <a class="btn btn--text btn--subtle" href="#">(change)</a></span></h3> <h3>Business Hours <span class="subtitle">in European Central Time (<a class="btn btn--text btn--subtle" href="#">change</a>)</span></h3>
<table class="settings-list settings-list--toggleColumn"> <table class="settings-list settings-list--toggleColumn">
<thead> <thead>
<tr> <tr>

4
app/assets/javascripts/app/views/login.jst.eco
View file

@ -24,11 +24,11 @@
<label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label> <label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label>
</div> </div>
<div class="form-controls"> <div class="form-controls horizontal">
<button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button> <button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
<% if @C('user_lost_password'): %> <% if @C('user_lost_password'): %>
<a href="#password_reset" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a> <a href="#password_reset" class="btn btn--text btn--secondary align-right"><%- @T( 'Forgot password?' ) %></a>
<% end %> <% end %>
</div> </div>

2
app/assets/javascripts/app/views/modal.jst.eco
View file

@ -23,7 +23,7 @@
<div class="modal-footer"> <div class="modal-footer">
<% if @cancel: %> <% if @cancel: %>
<div class="modal-leftFooter"> <div class="modal-leftFooter">
<a class="subtle-link standalone js-cancel align-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a> <a class="btn btn--text btn--subtle js-cancel align-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
</div> </div>
<% end %> <% end %>
<% for button in @centerButtons: %> <% for button in @centerButtons: %>

2
app/assets/javascripts/app/views/object_manager/index.jst.eco
View file

@ -11,7 +11,7 @@
<h2>Database Update required</h2> <h2>Database Update required</h2>
<p><%- @T( 'Changes were made that require a database update. This might take some time.' ) %></p> <p><%- @T( 'Changes were made that require a database update. This might take some time.' ) %></p>
<div class="box-controls"> <div class="box-controls">
<div class="subtle-link standalone js-discard">Discard Changes</div> <div class="btn btn--text btn--secondary js-discard">Discard Changes</div>
<div class="btn btn--primary js-sync align-right"><%- @T( 'Update Database' ) %></div> <div class="btn btn--primary js-sync align-right"><%- @T( 'Update Database' ) %></div>
</div> </div>
</div> </div>

4
app/assets/javascripts/app/views/password/reset.jst.eco
View file

@ -10,8 +10,8 @@
<form class="form-password"> <form class="form-password">
<div class="form-password-item"></div> <div class="form-password-item"></div>
<div class="form-controls"> <div class="form-controls">
<a class="subtle-link standalone pull-left cancel" href="#login"><%- @T( 'Cancel & Go Back' ) %></a> <a class="btn btn--text btn--subtle cancel" href="#login"><%- @T( 'Cancel & Go Back' ) %></a>
<button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button> <button class="btn btn--primary submit align-right"><%- @T( 'Submit' ) %></button>
</div> </div>
</form> </form>
<% end %> <% end %>

4
app/assets/javascripts/app/views/password/reset_change.jst.eco
View file

@ -4,8 +4,8 @@
<form> <form>
<div class="form-password-change"></div> <div class="form-password-change"></div>
<div class="form-controls"> <div class="form-controls">
<a class="subtle-link standalone pull-left cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a> <a class="btn btn--text btn--subtle cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button> <button class="btn btn--primary submit align-right"><%- @T( 'Submit' ) %></button>
</div> </div>
</form> </form>
</div> </div>

2
app/assets/javascripts/app/views/password/reset_failed.jst.eco
View file

@ -3,7 +3,7 @@
<div class="hero-unit fullscreen-body"> <div class="hero-unit fullscreen-body">
<h2><%- @T( @head ) %><small></small></h2> <h2><%- @T( @head ) %><small></small></h2>
<p><%- @message %></p> <p><%- @message %></p>
<a href="#password_reset" class="subtle retry">&raquo; <%- @T('try again') %> &laquo;</a> <a href="#password_reset" class="btn btn--text btn--secondary retry">&raquo; <%- @T('try again') %> &laquo;</a>
</div> </div>
</div> </div>
</div> </div>

4
app/assets/javascripts/app/views/signup.jst.eco
View file

@ -4,8 +4,8 @@
<h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1> <h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
<form> <form>
<div class="form-controls"> <div class="form-controls">
<a class="subtle-link standalone pull-left" href="#login"><%- @T( 'Cancel & Go Back' ) %></a> <a class="btn btn--text btn--subtle" href="#login"><%- @T( 'Cancel & Go Back' ) %></a>
<button class="btn btn--primary submit pull-right"><%- @T( 'Create my account' ) %></button> <button class="btn btn--primary submit align-right"><%- @T( 'Create my account' ) %></button>
</div> </div>
</form> </form>
</div> </div>

91
app/assets/stylesheets/zammad.css.scss
View file

@ -317,7 +317,7 @@ span[data-tooltip]:hover:before {
text-transform: uppercase; text-transform: uppercase;
color: hsl(0,0%,60%); color: hsl(0,0%,60%);
font-size: 12px; font-size: 12px;
letter-spacing: 0.1em; letter-spacing: 0.05em;
height: 31px; height: 31px;
padding: 6px 11px !important; padding: 6px 11px !important;
display: inline-flex; display: inline-flex;
@ -356,10 +356,13 @@ span[data-tooltip]:hover:before {
background: hsl(145,51%,35%); background: hsl(145,51%,35%);
} }
&.btn--secondary, &.btn--secondary {
&.btn--secondary:active {
background: white; background: white;
color: hsl(145,51%,45%); color: hsl(145,51%,45%);
&:active {
background: hsl(0,0%,98%);
}
} }
} }
@ -370,10 +373,13 @@ span[data-tooltip]:hover:before {
background: hsl(0,65%,45%); background: hsl(0,65%,45%);
} }
&.btn--secondary, &.btn--secondary {
&.btn--secondary:active {
background: white; background: white;
color: hsl(0,65%,55%); color: hsl(0,65%,55%);
&:active {
background: hsl(0,0%,98%);
}
} }
} }
@ -385,29 +391,44 @@ span[data-tooltip]:hover:before {
background: none; background: none;
vertical-align: baseline; vertical-align: baseline;
&:active { &:active {
color: hsl(203,65%,45%); color: hsl(203,65%,40%);
}
}
&.btn--subtle {
padding-left: 0;
padding-right: 0;
border: none;
color: rgba(0,0,0,.32);
text-decoration: underline;
background: none;
@extend .u-clickable;
&:active {
color: rgba(0,0,0,.42);
} }
&:hover { &.btn--secondary {
color: rgba(0,0,0,.5); color: hsl(0,0%,68%);
text-decoration: underline;
&:active {
color: hsl(0,0%,53%);
}
} }
+ .btn:not(.align-right) { &.btn--positive {
margin-left: 20px; color: hsl(145,51%,45%);
&:active {
color: hsl(145,51%,30%);
background: none;
}
}
&.btn--danger {
color: hsl(0,65%,55%);
&:active {
color: hsl(0,65%,40%);
background: none;
}
}
&.btn--subtle {
text-decoration: underline;
letter-spacing: 0.04em;
color: hsl(0,0%,85%);
&:active {
color: hsl(0,0%,75%);
}
} }
} }
@ -418,7 +439,7 @@ span[data-tooltip]:hover:before {
&.btn--split--last { &.btn--split--last {
border-radius: 0; border-radius: 0;
border-left: none; border-left: none;
margin-left: 0; margin-left: 0 !important;
} }
&.btn--split--last { &.btn--split--last {
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
@ -433,7 +454,6 @@ span[data-tooltip]:hover:before {
margin-left: auto; margin-left: auto;
} }
.subtle-link.align-right ~ .btn,
.btn.align-right ~ .btn { .btn.align-right ~ .btn {
margin-left: 15px; margin-left: 15px;
} }
@ -1345,16 +1365,6 @@ kbd {
display: inline-block; display: inline-block;
} }
.subtle-link {
color: rgba(0,0,0,.32);
text-decoration: underline;
@extend .u-clickable;
}
.subtle-link:hover {
color: rgba(0,0,0,.5);
}
ol.tabs { ol.tabs {
list-style: decimal inside; list-style: decimal inside;
} }
@ -1588,7 +1598,13 @@ form {
.form-controls { .form-controls {
@extend .clearfix; @extend .clearfix;
display: flex;
align-items: center;
margin-top: 10px; margin-top: 10px;
.btn + .btn:not(.align-right) {
margin-left: 20px;
}
} }
form a.standalone { form a.standalone {
@ -3944,9 +3960,6 @@ footer {
.newTicket .form-control:not(:focus):not(.focus) { .newTicket .form-control:not(:focus):not(.focus) {
border-color: hsl(0,0%,90%); border-color: hsl(0,0%,90%);
} }
.newTicket .subtle-link {
color: hsl(0,0%,89%);
}
.newTicket .article-form-top { .newTicket .article-form-top {
margin-top: 15px; margin-top: 15px;
} }