Skip to content

Commit

Permalink
Style cleanup for table-bordered and warning-text (#173)
Browse files Browse the repository at this point in the history 
* adding alternate color

* adding alternate color

* updating flex layout

* fix all the padding with containers

* fixing merge issue

* code alignment

* code alignment

* code alignment

* updating package lock json

* reverting index lint

* taking out large container sizes to small sizes, updating responsive conatiner class, table: removing white-space class

* fixing the container width issue on increasing the font size

* fixing the container width issue on increasing the font size

* adding flag icons

* adding new flag icon dependency and removing url-loader from webpack loader

* fixing table-bordered: border issue and warning text color

* active color for the app header link

* uncommenting tables example

* adding comment for color code
  • Loading branch information
@mkayan @davezen1
mkayan authored and davezen1 committed Oct 26, 2017
1 parent b6b837f commit 58fa37f
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 229 deletions.
274 changes: 50 additions & 224 deletions app/kitchensink/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2430,233 +2430,59 @@ <h2 id="Tables" class="page-header">Tables
<div class="panel">
<div class="panel-body">
<h3>CBP Default Table</h3>
<h4>Includes Borderless and Hover stylings with MDL additions <small>Just by using the classnames: "table mdl-js-data-table"</small></h4>

<!-- <table class="table mdl-js-data-table">
<caption>Standard Table</caption>
<thead>
<tr>
<th scope="col" class="non-numeric">Project name</th>
<th scope="col" class="non-numeric">Description</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="non-numeric">Invoice</th>
<td class="non-numeric">
<span>Add invoice confirmation</span>
</td>
<td>
<span>$4,500</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric">Templates</th>
<td class="non-numeric">
<span>Refactor templates to use the new templating library</span>
</td>
<td>
<span>$9,000</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric">Payments</th>
<td class="non-numeric">
<span>Process payments using third party api</span>
</td>
<td>
<span>$5,400</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric">Account Management</th>
<td class="non-numeric">
<span>Improve account management workflow</span>
</td>
<td>
<span>$6,000</span>
</td>
</tr>
</tbody>
</table> -->
<h4>Includes Borderless and Hover stylings with MDL additions <small>Just by using the classnames: "table mdl-js-data-table"</small></h4>
<table class="table mdl-js-data-table">
<caption>Standard Table</caption>
<thead>
<tr>
<th scope="col" class="non-numeric">Project name</th>
<th scope="col" class="non-numeric">Description</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="non-numeric">Invoice</th>
<td class="non-numeric">
<span>Add invoice confirmation</span>
</td>
<td>
<span>$4,500</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric">Templates</th>
<td class="non-numeric">
<span>Refactor templates to use the new templating library</span>
</td>
<td>
<span>$9,000</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric">Payments</th>
<td class="non-numeric">
<span>Process payments using third party api</span>
</td>
<td>
<span>$5,400</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric">Account Management</th>
<td class="non-numeric">
<span>Improve account management workflow</span>
</td>
<td>
<span>$6,000</span>
</td>
</tr>
</tbody>
</table>

<p><a href="https://us-cbp.github.io/cbp-style-guide/docs/components/tables.html" target="_blank"><span class="sr-only">Link opens in new window</span>See CBP style guide for more table examples</a></p>

<!-- leaving it here as there is an issue for me to fix this -->
<!-- <h4>Floating header <small>Example w/o thirdparty fix</small></h4>
<div>
<table aria-hidden="true" class="table mdl-js-data-table floating-table-header">
<caption>Fixed Header Table</caption>
<thead>
<tr>
<th scope="col" class="non-numeric" style="width: 25%">Project name</th>
<th scope="col" class="non-numeric" style="width: 50%">Description</th>
<th scope="col">Price</th>
</tr>
</thead>
</table>
<div class="floating-table-body" style="max-height: 200px;">
<table class="table-selectable mdl-js-data-table">
<thead>
<tr>
<th scope="col" class="non-numeric" style="width: 25%;">Project name</th>
<th scope="col" class="non-numeric" style="width: 50%;">Description</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Invoice</th>
<td class="non-numeric" style="width: 50%;">
<span>Add invoice confirmation</span>
</td>
<td >
<span>$4,500</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Templates</th>
<td class="non-numeric" style="width: 50%;">
<span>Refactor templates to use the new templating library</span>
</td>
<td>
<span>$9,000</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Payments</th>
<td class="non-numeric" style="width: 50%;">
<span>Process payments using third party api</span>
</td>
<td>
<span>$5,400</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Account Management</th>
<td class="non-numeric" style="width: 50%;">
<span>Improve account management workflow</span>
</td>
<td>
<span>$6,000</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Invoice</th>
<td class="non-numeric" style="width: 50%;">
<span>Add invoice confirmation</span>
</td>
<td>
<span>$4,500</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Templates</th>
<td class="non-numeric" style="width: 50%;">
<span>Refactor templates to use the new templating library</span>
</td>
<td>
<span>$9,000</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Payments</th>
<td class="non-numeric" style="width: 50%;">
<span>Process payments using third party api</span>
</td>
<td>
<span>$5,400</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Account Management</th>
<td class="non-numeric" style="width: 50%;">
<span>Improve account management workflow</span>
</td>
<td>
<span>$6,000</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Invoice</th>
<td class="non-numeric" style="width: 50%;">
<span>Add invoice confirmation</span>
</td>
<td>
<span>$4,500</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Templates</th>
<td class="non-numeric" style="width: 50%;">
<span>Refactor templates to use the new templating library</span>
</td>
<td>
<span>$9,000</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Payments</th>
<td class="non-numeric" style="width: 50%;">
<span>Process payments using third party api</span>
</td>
<td>
<span>$5,400</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Account Management</th>
<td class="non-numeric" style="width: 50%;">
<span>Improve account management workflow</span>
</td>
<td>
<span>$6,000</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Invoice</th>
<td class="non-numeric" style="width: 50%;">
<span>Add invoice confirmation</span>
</td>
<td>
<span>$4,500</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Templates</th>
<td class="non-numeric" style="width: 50%;">
<span>Refactor templates to use the new templating library</span>
</td>
<td>
<span>$9,000</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Payments</th>
<td class="non-numeric" style="width: 50%;">
<span>Process payments using third party api</span>
</td>
<td>
<span>$5,400</span>
</td>
</tr>
<tr>
<th scope="row" class="non-numeric" style="width: 25%;">Account Management</th>
<td class="non-numeric" style="width: 50%;">
<span>Improve account management workflow</span>
</td>
<td>
<span>$6,000</span>
</td>
</tr>
</tbody>
</table>
</div>
</div> -->
</div>

</div>
</div>
<!-- Tabs -->
Expand Down
2 changes: 1 addition & 1 deletion app/styles/custom/_labels.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
}
.label-warning {
@include label-variant($brand-warning);
color: $brand-warning-text;
color: $text-color;
border: 1px solid $gray;
}

Expand Down
10 changes: 10 additions & 0 deletions app/styles/custom/_tables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// mdl table style
.mdl-data-table {
white-space: inherit;

tbody {
tr {
&.is-selected {
Expand Down Expand Up @@ -65,6 +66,14 @@
border-top: 1px solid $panel-default-border;
}

// Borderless version
//
// gets rid of all cell borders

.table-bordered {
border: 1px solid $table-border-color;
}

// Row hover effect
//
// Duplicated from Bootstrap for precedence over striping
Expand Down Expand Up @@ -117,6 +126,7 @@
}
}


// Adds a background color to the table header
.table > thead > tr {
background: $gray-lighter;
Expand Down
7 changes: 5 additions & 2 deletions app/styles/custom/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,15 @@
border-bottom-color: transparent;
}
}
> a:hover {
> a:hover , a:focus {
border: none;
background: transparent;
border-bottom: 2px solid $brand-info;
}

&.active > a{
color: $brand-primary;
font-weight: 500;
}
&.active > a,
&.active > a:hover,
&.active > a:focus,
Expand Down
2 changes: 2 additions & 0 deletions app/styles/custom/_type.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ h6, .h6 {
margin-bottom: ($line-height-computed / 2);
}

@include text-emphasis-variant('.text-warning', $brand-warning-text);

This comment has been minimized.

Sign in to view

Copy link
@yogeshgadge

yogeshgadge Nov 30, 2017 •
edited
Loading

Contributor

text-emphasis-variant does not import any mixins that contains text-emphasis-variant. Mixins and variables should be imported in every file that references those variables/mixin functions.
This causes #185

@media (max-width:$screen-sm) {
.page-header, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
padding-left: 6px;
Expand Down
5 changes: 3 additions & 2 deletions app/styles/custom/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ $brand-default-border: #adadad;
$brand-live-border: darken($brand-live, 10%);

// custom brand text
$brand-warning-text: darken($brand-warning, 45%);
//this color is adjusted-hue of brand-warning to create proper color contrast
$brand-warning-text: #A44900;

//
$brand-default-highlight: rgba(20,96,170,.1);
Expand Down Expand Up @@ -168,7 +169,7 @@ $btn-info-color: $gray-lighter;
$btn-info-bg: $brand-info;
$btn-info-border: darken($btn-info-bg, 9%);

$btn-warning-color: $brand-warning-text; //--$text-color;
$btn-warning-color: $brand-warning-text; //--$text-color;
$btn-warning-bg: $brand-warning;
$btn-warning-border: darken($btn-warning-bg, 9%);

Expand Down

0 comments on commit 58fa37f

Please sign in to comment.