vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Styles much better

old
@soyjavi 2015-11-04 10:42:57 +07:00
parent f6267165b0
commit 5c1489a0f2
2 changed files with 10 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/table/_config.scss
View File

@ -1,6 +1,5 @@
$table-row-height: 48px;
$table-row-divider: solid 1px $color-divider;
$table-row-divider: solid 1px rgba(0,0,0,.12);
$table-row-offset: 1.8 * $unit;
$table-text-color: rgba(0, 0, 0, 0.541176);
$table-change-icon-size: 0.8 * $unit;
$table-change-icon-color: unquote("rgb(#{$color-primary-dark})") !default;
$table-row-highlight: #eee;
$table-text-color: #757575;

25
components/table/style.scss
View File

@ -4,15 +4,13 @@
.root {
width: 100%;
font-size: $font-size-tiny;
color: $color-text;
color: $table-text-color;
text-align: left;
tr {
height: $table-row-height;
line-height: $table-row-height;
border-bottom: $table-row-divider;
&:hover {
background-color: $color-divider;
}
}
th {
font-weight: $font-weight-bold;
@ -27,6 +25,10 @@
}
.row {
transition: background-color $animation-duration $animation-curve-default;
&:hover {
background-color: $table-row-highlight;
}
&:last-child {
border-color: transparent;
}
@ -45,18 +47,5 @@
}
.changed {
td:first-child:before {
position: absolute;
top: ($table-row-height / 2.5);
left: ($table-row-height / 10);
width: $table-change-icon-size;
height: $table-change-icon-size;
font-size: 50%;
line-height: $font-size-small;
background-color: $table-change-icon-color;
color: white;
text-align: center;
content: " ";
border-radius: 50%;
}
// @TODO: We've to create a style for changed rows.
}