These are chat archives for angular/material

2nd
May 2017
gerome0123
@gerome0123
May 02 2017 01:20
@dolthead sorry for late reply i'm in my vacation lol do u have a source code for the css??
gerome0123
@gerome0123
May 02 2017 01:34
@dolthead i saw the website thanks bro
Todd H
@dolthead
May 02 2017 04:04
@gerome0123 we use <table class='xa-md-table'> (defined below)
                    <table class="xa-md-table bordered highlight">
                        <thead><!-- this prevents highlighting the header row -->
                            <tr>
                                <th>test</th>
                                <th>test</th>
                            </tr>
                        </thead>
                        <tr>
                            <td>data</td>
                            <td>longer data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                    </table>
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
table.xa-md-table {
    border-collapse: collapse;
    border-spacing: 0;
}
table.xa-md-table td,
table.xa-md-table th {
    padding: 0;
}

/*!
 * Materialize v0.98.0 (http://materializecss.com)
 * Copyright 2014-2015 Materialize
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */
table.xa-md-table,
table.xa-md-table th,
table.xa-md-table td {
    border: none;
}
table.xa-md-table {
    width: 100%;
    display: table;
}
table.xa-md-table.bordered > thead > tr,
table.xa-md-table.bordered > tbody > tr {
    border-bottom: 1px solid #d0d0d0;
}
table.xa-md-table.striped > tbody > tr:nth-child(odd) {
    background-color: #f2f2f2;
}
table.xa-md-table.striped > tbody > tr > td {
    border-radius: 0;
}
table.xa-md-table.highlight > tbody > tr {
    transition: background-color .25s ease;
}
table.xa-md-table.highlight > tbody > tr:hover {
    background-color: #f2f2f2;
}
/* To highlight only certain rows */
table.xa-md-table tr.highlight {
    transition: background-color .25s ease;
}
table.xa-md-table tr.highlight:not([disabled]):hover {
    background-color: #f2f2f2;
}
table.xa-md-table.centered thead tr th,
table.xa-md-table.centered tbody tr td {
    text-align: center;
}
table.xa-md-table thead {
    border-bottom: 1px solid #d0d0d0;
}
table.xa-md-table td,
table.xa-md-table th {
    padding: 15px 5px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    border-radius: 2px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    color: #212121;
    font-size: 14px;
}
table.xa-md-table td.right,
table.xa-md-table th.right {
    text-align: right;
}
table.xa-md-table caption {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: .8em;
    color: #436caa;
    text-align: left;
    padding: 3px 5px;
}
table.xa-md-table.shrink-width {
    width: auto;
}
table.xa-md-table.condensed caption,
table.xa-md-table.condensed td,
table.xa-md-table.condensed th {
    padding: 3px 5px;
}
table.xa-md-table th {
    color: #212121;
    font-weight: normal;
    font-size: 12px;
}
table.xa-md-table td {
    color: #212121;
    font-weight: normal;
    font-size: 14px;
}
gerome0123
@gerome0123
May 02 2017 04:49
@dolthead sweet thanks
i will try this :)
Todd H
@dolthead
May 02 2017 16:13
The .condensed class is for less padding, .shrink-width is for not having 100% width
Tarmo Leppänen
@tarlepp
May 02 2017 16:21
anyone have a clue when datepicker component is going to be stable ?
or do you have any suggestions for datepicker component (while it's not ready within material2)
Tarmo Leppänen
@tarlepp
May 02 2017 19:38
quite "dead" channel :(
Todd H
@dolthead
May 02 2017 20:29
yeah @tarlepp , pretty dead. we're using datepicker from materialize.css, with a few tweaks. mostly non-angular, but we have a custom directive for an angular module
Lee Blazek
@surfjedi
May 02 2017 20:38
Any one have any idea how to get rid of unit test errors like: `
1. If 'md-tab-group' is an Angular component, then verify that it is part of this module.
2. If 'md-tab-group' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
</md-toolbar>`