introduce .u-unclickable, refactor .u-clickable

new camelCase sole purpose utility classes
This commit is contained in:
Felix Niklas 2014-09-01 13:23:36 +02:00
parent 091504eeb4
commit 9999caf2d9
5 changed files with 34 additions and 28 deletions

View file

@ -33,7 +33,7 @@
<div class="sidebar bottom-form-shadow flex">
<div class="horizontal center">
<h2 class="flex contain-text"></h2>
<div class="close-sidebar centered clickable">
<div class="close-sidebar centered u-clickable">
<div class="arrow-right icon"></div>
</div>
</div>
@ -75,7 +75,7 @@
<form class="bottom-form form-inline horizontal" role="form">
<div class="form-group">
<label for="update_ticket_1_state_id123" class="input-group-addon clickable">State</label>
<label for="update_ticket_1_state_id123" class="input-group-addon u-clickable">State</label>
<select id="update_ticket_1_state_id123" class="form-control level-1" name="state_id">
<option value="4">closed</option>
<option value="1" selected="">new</option>
@ -84,7 +84,7 @@
</select>
</div>
<div class="form-group is-changed">
<label for="update_ticket_1_priority_id123" class="input-group-addon clickable">Priority</label>
<label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
<select id="update_ticket_1_priority_id123" class="form-control" name="priority_id">
<option value="1">1 low</option>
<option value="2" selected="">2 normal</option>
@ -92,7 +92,7 @@
</select>
</div>
<div class="form-group">
<label for="update_ticket_1_group_id123" class="input-group-addon clickable">Group</label>
<label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
<select id="update_ticket_1_group_id123" class="form-control" name="group_id">
<option value="4">FillGroup::450863</option>
<option value="3">FillGroup::918672</option>
@ -101,7 +101,7 @@
</select>
</div>
<div class="form-group">
<label for="update_ticket_1_owner_id123" class="input-group-addon clickable">Owner</label>
<label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
<select id="update_ticket_1_owner_id123" class="form-control" name="owner_id">
<option value="">-</option>
<option value="3">Felix Niklas</option>

View file

@ -63,7 +63,7 @@
<% if article.actions: %>
<div class="article-actions horizontal stretch">
<% for action in article.actions: %>
<a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action clickable<% if action.class: %> <%= action.class %><% end %>">
<a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action u-clickable<% if action.class: %> <%= action.class %><% end %>">
<span class="<%= action.type %> action icon"></span><%- @T( action.name ) %>
</a>
<% end %>

View file

@ -4,28 +4,28 @@
<div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
<div class="edit-controls">
<div class="dark pop-select">
<div class="pop-selected clickable centered">
<div class="pop-selected u-clickable centered">
<div class="gray <%- @type %> channel icon"></div>
</div>
<div class="pop-selector hide">
<div class="horizontal">
<div class="pop-selectable clickable centered" data-value="email">
<div class="pop-selectable u-clickable centered" data-value="email">
<div class="white email channel icon"></div>
</div>
<div class="pop-selectable clickable centered" data-value="facebook">
<div class="pop-selectable u-clickable centered" data-value="facebook">
<div class="white facebook channel icon"></div>
</div>
<div class="pop-selectable clickable centered" data-value="twitter">
<div class="pop-selectable u-clickable centered" data-value="twitter">
<div class="white twitter channel icon"></div>
</div>
<div class="pop-selectable clickable centered" data-value="phone">
<div class="pop-selectable u-clickable centered" data-value="phone">
<div class="white phone channel icon"></div>
</div>
</div>
</div>
</div>
<hr>
<div class="recipient-picker clickable horizontal centered">
<div class="recipient-picker u-clickable horizontal centered">
<div class="recipients icon"></div>
<div class="recipient-count">3</div>
<div class="recipient-list hide">
@ -37,7 +37,7 @@
<div class="list-entry horizontal centered">
<div class="avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
<div class="list-entry-name flex">Hans Peter Baxxter</div>
<div class="list-entry-type clickable horizontal">
<div class="list-entry-type u-clickable horizontal">
<div class="active" data-value="to">To</div>
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
</div>
@ -45,7 +45,7 @@
<!-- <div class="list-entry horizontal centered">
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/48.jpg)"></div>
<div class="list-entry-name flex">Julia Maier</div>
<div class="list-entry-type clickable horizontal">
<div class="list-entry-type u-clickable horizontal">
<div class="active" data-value="to">To</div>
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
</div>
@ -53,7 +53,7 @@
<div class="list-entry horizontal centered">
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/sindresorhus/48.jpg)"></div>
<div class="list-entry-name flex">Remo Batlogg</div>
<div class="list-entry-type clickable horizontal">
<div class="list-entry-type u-clickable horizontal">
<div class="active" data-value="to">To</div>
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
</div>
@ -71,12 +71,15 @@
<div class="text-bubble">
<div class="bubble-arrow"></div>
<textarea></textarea>
<span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
<div class="bubble-placeholder">
<span class="u-unclickable">Antwort eingeben oder </span>
<span class="highlight u-clickable js-upload">Dateien wählen</span>
</div>
</div>
</div>
<div class="edit-controls">
<div class="horizontal justify-end center">
<div class="visibility toggle clickable centered">
<div class="visibility toggle u-clickable centered">
<div class="internal-visibility">
<div class="internal visibility icon"></div>
<div class="visibility-label">internal</div>

View file

@ -5,21 +5,21 @@
<li class="horizontal center">
<span class="flex">Midi Notes</span>
<span>3</span>
<span class="tag-delete js-delete centered clickable">
<span class="tag-delete js-delete centered u-clickable">
<span class="delete icon"></span>
</span>
<li class="horizontal center">
<span class="flex">Transitions</span>
<span>23</span>
<span class="tag-delete js-delete centered clickable">
<span class="tag-delete js-delete centered u-clickable">
<span class="delete icon"></span>
</span>
<li class="horizontal center">
<span class="flex">New UI</span>
<span>3</span>
<span class="tag-delete js-delete centered clickable">
<span class="tag-delete js-delete centered u-clickable">
<span class="delete icon"></span>
</span>
</ul>
<div class="text-muted js-newTag clickable">+ <%- @T('Add Tag') %></div>
<div class="text-muted js-newTag u-clickable">+ <%- @T('Add Tag') %></div>
</div>

View file

@ -14,6 +14,16 @@ small {
color: hsl(202,68%,54%);
}
.u-unclickable {
pointer-events: none;
}
.u-clickable {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
#app > nav {
position: relative;
z-index: 1;
@ -1483,12 +1493,6 @@ footer {
margin-bottom: 5px;
}
.clickable {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.customer_info {
}
@ -2937,7 +2941,6 @@ footer {
color: #b3b3b3;
left: 20px;
top: 10px;
pointer-events: none;
}
.pop-select {