Buttons: simplify .btn selectors

This commit is contained in:
Felix Niklas 2017-09-26 09:25:42 +02:00
parent 1cb4db2448
commit ebc478a3c0
3 changed files with 32 additions and 31 deletions

View file

@ -2,7 +2,7 @@
<% if @params.timeRange is 'day': %>
<div class="btn-group btn-group--full" role="group" aria-label="">
<% for item in @timeRangeDay: %>
<div class="btn btn--textLarge js-timePickerDay<%- ' is-selected' if @params.day is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<div class="btn btn--text btn--large js-timePickerDay<%- ' is-selected' if @params.day is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<% end %>
</div>
<% end %>
@ -10,7 +10,7 @@
<% if @params.timeRange is 'day' || @params.timeRange is 'month': %>
<div class="btn-group btn-group--full" role="group" aria-label="">
<% for item in @timeRangeMonth: %>
<div class="btn btn--textLarge js-timePickerMonth<%- ' is-selected' if @params.month is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<div class="btn btn--text btn--large js-timePickerMonth<%- ' is-selected' if @params.month is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<% end %>
</div>
<% end %>
@ -18,7 +18,7 @@
<% if @params.timeRange is 'week': %>
<div class="btn-group btn-group--full" role="group" aria-label="">
<% for item in @timeRangeWeek: %>
<div class="btn btn--textLarge js-timePickerWeek<%- ' is-selected' if @params.week is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<div class="btn btn--text btn--large js-timePickerWeek<%- ' is-selected' if @params.week is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<% end %>
</div>
<% end %>
@ -26,7 +26,7 @@
<% if @params.timeRange isnt 'realtime': %>
<div class="btn-group btn-group--full" role="group" aria-label="">
<% for item in @timeRangeYear: %>
<div class="btn btn--textLarge js-timePickerYear<%- ' is-selected' if @params.year is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<div class="btn btn--text btn--large js-timePickerYear<%- ' is-selected' if @params.year is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<% end %>
</div>
<% end %>

View file

@ -25,13 +25,13 @@
<div class="well">
<div class="btn-group btn-group--full" role="group" aria-label="">
<% for item in @timeRangeYear: %>
<div class="btn btn--textLarge js-timePickerYear<%- ' is-selected' if @year is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<div class="btn btn--text btn--large js-timePickerYear<%- ' is-selected' if @year is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<% end %>
</div>
<div class="btn-group btn-group--full" role="group" aria-label="">
<% for item in @timeRangeMonth: %>
<div class="btn btn--textLarge js-timePickerMonth<%- ' is-selected' if @month is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<div class="btn btn--text btn--large js-timePickerMonth<%- ' is-selected' if @month is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<% end %>
</div>
</div>

View file

@ -385,7 +385,7 @@ pre code.hljs {
fill: currentColor;
}
&.btn--icon--last .icon {
&--icon--last .icon {
@include bidi-style(margin-left, 5px, margin-right, 0); // so far only used in ticket_zoom secondaryAction dropup
}
@ -393,23 +393,23 @@ pre code.hljs {
box-shadow: 0 0 0 3px hsl(201,62%,90%);
}
&.btn--small {
&--small {
padding-top: 5px;
padding-bottom: 4px;
}
&.btn--slim {
&--slim {
padding-left: 12px;
padding-right: 12px;
}
&.btn--fullWidth {
&--fullWidth {
width: 100%;
text-align: center;
justify-content: center;
}
&.btn--table {
&--table {
padding: 4px 9px;
border: none;
margin: 5px 6px 0;
@ -434,7 +434,7 @@ pre code.hljs {
background: hsl(0,0%,98%);
}
&.btn--action {
&--action {
text-transform: uppercase;
color: hsl(0,0%,60%);
font-size: 12px;
@ -471,7 +471,7 @@ pre code.hljs {
}
// used in .recipientList-controls and in breadcrumbs
&.btn--onDark {
&--onDark {
background: hsla(200,100%,97%,0.15);
border-color: hsl(250,7%,16%);
color: white;
@ -481,7 +481,7 @@ pre code.hljs {
}
}
&.btn--primary {
&--primary {
color: white;
background: hsl(203,65%,55%);
&:active {
@ -493,13 +493,13 @@ pre code.hljs {
}
}
&.btn--secondary {
&--secondary {
color: hsl(202,68%,54%);
}
&.btn--positive,
&.btn--create,
&.btn--success {
&--positive,
&--create,
&--success {
color: white;
background: hsl(145,51%,45%);
@ -521,7 +521,7 @@ pre code.hljs {
}
}
&.btn--danger {
&--danger {
color: white;
background: hsl(0,65%,55%);
@ -539,7 +539,7 @@ pre code.hljs {
}
}
&.btn--text {
&--text {
font-size: inherit;
margin: -10px;
padding: 10px;
@ -603,12 +603,13 @@ pre code.hljs {
}
}
&.btn--textLarge {
@extend .btn--text;
margin: 0px;
&--large {
&.btn--text {
margin: 0;
}
}
&.btn--quad {
&--quad {
padding: 10px 12px 9px;
.icon {
@ -616,21 +617,21 @@ pre code.hljs {
}
}
&.btn--split--first {
&--split--first {
@include bidi-style(border-radius, 3px 0 0 3px, border-radius, 0 3px 3px 0);
}
&.btn--split,
&.btn--split--last {
&--split,
&--split--last {
border-radius: 0;
@include bidi-style(border-left-width, 0, border-right-width, 1px);
@include ltr(margin-left, 0 !important);
@include rtl(margin-right, 0 !important);
}
&.btn--split--last {
&--split--last {
@include bidi-style(border-radius, 0 3px 3px 0, border-radius, 3px 0 0 3px);
}
&.btn--dropdown {
&--dropdown {
position: relative;
select {
@ -717,7 +718,7 @@ pre code.hljs {
display: inline-flex;
flex-wrap: wrap;
&.btn-group--full {
&--full {
display: flex;
}
@ -744,7 +745,7 @@ pre code.hljs {
}
}
.btn--text, .btn--textLarge {
.btn--text {
padding: 6px 10px 5px; /* reporting main.eco */
display: inline-block;
border-radius: 3px;