Skip to content
This repository has been archived by the owner on Dec 5, 2022. It is now read-only.

Commit

Permalink
Merge pull request #156 from zalando/topic/ie-fixes
Browse files Browse the repository at this point in the history 
Fix IE compatibility issues
  • Loading branch information
@rbarilani
rbarilani committed Mar 22, 2016
2 parents e1c865d + 9d1259d commit 115d05e
Show file tree
Hide file tree
Showing 10 changed files with 55 additions and 48 deletions.
1 change: 1 addition & 0 deletions docs/demo/assets/fabricator/styles/partials/_exceptions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

.dc-dialog__overlay {
opacity: 1;
position: relative;
}

.dc-toast-container {
Expand Down
40 changes: 20 additions & 20 deletions docs/demo/materials/02-atoms/table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,35 +19,35 @@
<td class="dc-table__td" data-col="First Name">Eileen</td>
<td class="dc-table__td" data-col="Last Name">Holland</td>
<td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Duane</td>
<td class="dc-table__td" data-col="Last Name">Holmes</td>
<td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Kitty</td>
<td class="dc-table__td" data-col="Last Name">Murray</td>
<td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--new" status="New">New</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new" status="New">New</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Austin</td>
<td class="dc-table__td" data-col="Last Name">Carpenter</td>
<td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--new" status="New">New</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new" status="New">New</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Toni</td>
<td class="dc-table__td" data-col="Last Name">Nichols</td>
<td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
</tbody>
</table>
Expand All @@ -67,35 +67,35 @@
<td class="dc-table__td" data-col="First Name">Eileen</td>
<td class="dc-table__td" data-col="Last Name">Holland</td>
<td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Duane</td>
<td class="dc-table__td" data-col="Last Name">Holmes</td>
<td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Kitty</td>
<td class="dc-table__td" data-col="Last Name">Murray</td>
<td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--new" status="New">New</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new" status="New">New</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Austin</td>
<td class="dc-table__td" data-col="Last Name">Carpenter</td>
<td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--new" status="New">New</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new" status="New">New</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Toni</td>
<td class="dc-table__td" data-col="Last Name">Nichols</td>
<td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
</tbody>
</table>
Expand All @@ -116,35 +116,35 @@
<td class="dc-table__td" data-col="First Name">Eileen</td>
<td class="dc-table__td" data-col="Last Name">Holland</td>
<td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Duane</td>
<td class="dc-table__td" data-col="Last Name">Holmes</td>
<td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Kitty</td>
<td class="dc-table__td" data-col="Last Name">Murray</td>
<td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--new" status="New">New</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new" status="New">New</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Austin</td>
<td class="dc-table__td" data-col="Last Name">Carpenter</td>
<td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--new" status="New">New</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new" status="New">New</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Toni</td>
<td class="dc-table__td" data-col="Last Name">Nichols</td>
<td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
</tbody>
</table>
Expand All @@ -165,35 +165,35 @@
<td class="dc-table__td" data-col="First Name">Eileen</td>
<td class="dc-table__td" data-col="Last Name">Holland</td>
<td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Duane</td>
<td class="dc-table__td" data-col="Last Name">Holmes</td>
<td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Kitty</td>
<td class="dc-table__td" data-col="Last Name">Murray</td>
<td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--new" status="New">New</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new" status="New">New</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Austin</td>
<td class="dc-table__td" data-col="Last Name">Carpenter</td>
<td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--new" status="New">New</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new" status="New">New</span></td>
</tr>

<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Toni</td>
<td class="dc-table__td" data-col="Last Name">Nichols</td>
<td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="status nowrap status--active">Active</span></td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
</tbody>
</table>
18 changes: 9 additions & 9 deletions docs/demo/materials/03-molecules/04-input-groups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,31 @@
<div class="dc-input-addon">&euro;</div>
</div>

<label class="dc-label" for="urlInput">Addon - Prepended</label>
<label class="dc-label" for="urlInput1">Addon - Prepended</label>
<div class="dc-input-group">
<span class="dc-input-addon">http://</span>
<input class="dc-input" type="text" id="urlInput" placeholder="e. g. brands.zalando.com"/>
<input class="dc-input" type="text" id="urlInput1" placeholder="e. g. brands.zalando.com"/>
</div>

<label class="dc-label" for="urlInput">Button - Appended</label>
<label class="dc-label" for="urlInput2">Button - Appended</label>
<div class="dc-input-group">
<input class="dc-input" type="text" id="urlInput" placeholder="e. g. brands.zalando.com"/>
<input class="dc-input" type="text" id="urlInput2" placeholder="e. g. brands.zalando.com"/>
<button class="dc-btn dc-btn--primary"><i class="dc-icon dc-icon--search dc-icon--btn"></i></button>
</div>

<label class="dc-label" for="urlInput">Addon - Prepended & Button - Appended</label>
<label class="dc-label" for="userInput">Addon - Prepended & Button - Appended</label>
<div class="dc-input-group">
<span class="dc-input-addon">User 1</span>
<input class="dc-input" type="text" id="urlInput" placeholder="Full name"/>
<div class="dc-input-addon">User 1</div>
<input class="dc-input" type="text" id="userInput" placeholder="Full name"/>
<a class="dc-btn dc-btn--primary">Add</a>
</div>

<h4>BEM way (controversial)</h4>

<!-- BEM way -->
<label class="dc-label" for="urlInput2">Button - Appended</label>
<label class="dc-label" for="urlInput3">Button - Appended</label>
<div class="dc-input-group">
<input class="dc-input-group__input dc-input" type="text" id="urlInput2" placeholder="e. g. brands.zalando.com"/>
<input class="dc-input-group__input dc-input" type="text" id="urlInput3" placeholder="e. g. brands.zalando.com"/>
<button class="dc-input-group__btn dc-btn dc-btn--primary">
<i class="dc-icon dc-icon--search dc-icon--btn"></i>
</button>
Expand Down
10 changes: 5 additions & 5 deletions src/icons/history.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions src/icons/lock.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions src/icons/trash.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion src/styles/atoms/_select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
font-weight: $dc-normal-font-weight;
line-height: 1;
-webkit-appearance: none;
border-radius: $dc-radius100;

&:hover {
border-color: $dc-blue40;
Expand All @@ -22,11 +23,14 @@
border-color: $dc-blue40;
outline: 0;
}

&::-ms-expand {
display: none;
}
}

@mixin dc-select-selectors {
.dc-select {
@include dc-select;
}
}

2 changes: 1 addition & 1 deletion src/styles/atoms/_table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
@mixin dc-table__th {
font-weight: $dc-bold-font-weight;
text-transform: uppercase;
text-align: left;
}

@mixin dc-table__tr {
Expand Down Expand Up @@ -215,4 +216,3 @@
// }
//}
}

4 changes: 2 additions & 2 deletions src/styles/molecules/_input-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@
}

@mixin dc-input-addon {
margin-bottom: 0;

padding: $dc-space75 + .2 $dc-space100 $dc-space75;
border: 1px solid $dc-gray60;
background-color: $dc-gray80;
color: $dc-gray20;
line-height: 1;
display: inline-block;

&:first-child {
border-right-width: 0;
Expand Down Expand Up @@ -99,4 +100,3 @@
}

}

2 changes: 2 additions & 0 deletions src/styles/molecules/_tooltip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
background: rgba($dc-black, .7);
color: $dc-white;
line-height: $dc-body-line-height;
min-height: $dc-space150;
}

@mixin dc-tooltip__triangle {
Expand Down Expand Up @@ -40,6 +41,7 @@
left: 0;
content: attr(#{$content-attribute});
white-space: nowrap;
line-height: 1.6; // IE 10 fix (without unit)
}

@mixin dc-tooltip__triangle--lb-has-tooltip {
Expand Down

0 comments on commit 115d05e

Please sign in to comment.