DSS-6552 Create table styling mimicing ArtDeco table for Nacho, removes bs styling from dataset-author component table

This commit is contained in:
Seyi Adebajo 2017-03-25 17:47:22 -07:00 committed by Mars Lan
parent 86796b4a1d
commit a65aaa33e3
3 changed files with 55 additions and 14 deletions

View File

@ -5,3 +5,4 @@
@import "nacho-button";
@import "nacho-global-search";
@import "nacho-filter-rail";
@import "nacho-table";

View File

@ -0,0 +1,41 @@
@import "restyle";
@include restyle-define(table, (
restyle-var(border-color): set-color(grey, light),
restyle-var(header-color): set-color(grey, light),
restyle-var(horizontal-padding): 10px,
restyle-var(font-size): 16px,
border-collapse: collapse,
border-spacing: 0,
text-align: left,
width: 100%,
'& th': (
font-size: restyle-var(font-size),
background-color: restyle-var(header-color),
min-height: 36px,
padding: restyle-var(horizontal-padding),
vertical-align: middle,
white-space: nowrap,
),
'& td': (
restyle-var(cell-height): 52px,
box-sizing: border-box,
height: restyle-var(cell-height),
padding: (5px restyle-var(horizontal-padding)),
border-bottom: 1px solid set-color(grey, light),
vertical-align: middle,
),
restyle-modifiers: (
'with a border': (
border: 1px solid restyle-var(border-color)
)
)
));
.nacho-table {
@include restyle(table);
&--bordered {
@include restyle(table with a border);
}
}

View File

@ -1,5 +1,5 @@
<div class="row" style="margin-top: 5px; margin-bottom: 5px;">
<div class="col-xs-12">
<div class="row">
<div>
<div class="btn-group" role="group">
<button id="addownerbtn" type="button" class="btn btn-default" {{action "addOwner" owners}}>
<i class="fa fa-plus" title="add an owner">
@ -15,17 +15,17 @@
{{/if}}
</div>
</div>
<table class="table table-striped">
<table class="nacho-table nacho-table--bordered">
<thead>
<tr>
<th class="col-xs-2">User Name</th>
<th class="col-xs-2">Full Name</th>
<th class="col-xs-1">Owner ID Type</th>
<th class="col-xs-1">Owner Source</th>
<th class="col-xs-2">Owner Type</th>
<th class="col-xs-2">Owner Sub Type</th>
<th class="col-xs-1">Confirmed</th>
<th class="col-xs-1"></th>
<th>User Name</th>
<th>Full Name</th>
<th>ID Type</th>
<th>Source</th>
<th>Owner Type</th>
<th>Owner Sub Type</th>
<th>Confirmed</th>
<th>Remove</th>
</tr>
</thead>
<tbody data-attribute="owner-table">
@ -36,8 +36,7 @@
<td>{{owner.idType}}</td>
<td>{{owner.source}}</td>
<td>
{{#ember-selector values=ownerTypes selected=owner.type}}
{{/ember-selector}}
{{ember-selector values=ownerTypes selected=owner.type}}
</td>
<td>
{{input value=owner.subType}}