fix issues with the icons column in DT/DL (#2277)

* fix issues with the icons column in DT/DL

- fix issue with screen reader label not being translated
- fix issue with column taking the width of the screen reader label

* fix custom selection icon position
This commit is contained in:
Denys Vuika
2017-09-01 15:04:06 +01:00
committed by Mario Romano
parent 480bef7ad9
commit 7f720fda3a
3 changed files with 26 additions and 27 deletions

View File

@@ -23,7 +23,7 @@
role="button"
tabindex="0"
title="{{ col.title }}">
<span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
<span *ngIf="col.srTitle" class="sr-only">{{ col.srTitle | translate }}</span>
<span *ngIf="col.title">{{ col.title | translate}}</span>
</th>
<!-- Actions (right) -->

View File

@@ -222,36 +222,35 @@
display: block;
}
}
}
/* Utils */
/* [Accessibility] For screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* [Accessibility] For screen reader only */
:host .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.hidden {
display: none;
}
/* mobile phone */
@media all and (max-width: 768px) {
.desktop-only {
/* Utils */
.hidden {
display: none;
}
}
@media (max-device-width: 768px) {
.desktop-only {
display: none;
/* mobile phone */
@media all and (max-width: 768px) {
.desktop-only {
display: none;
}
}
@media (max-device-width: 768px) {
.desktop-only {
display: none;
}
}
}