Просмотр исходного кода

Add some compatibility style rules for IE10.

Paulo Reis 9 лет назад
Родитель
Сommit
5489514d7a

+ 1 - 0
services/web/app/views/project/editor/review-panel.jade

@@ -1,6 +1,7 @@
 #review-panel
 	.review-panel-toolbar
 		resolved-comments-dropdown(
+			class="rp-flex-block"
 			entries="reviewPanel.resolvedComments"
 			threads="reviewPanel.commentThreads"
 			resolved-ids="reviewPanel.resolvedThreadIds"

+ 12 - 1
services/web/public/stylesheets/app/editor/review-panel.less

@@ -32,6 +32,7 @@
 
 
 .rp-button() {
+	display: block; // IE doesn't do flex with inline items.
 	background-color: @rp-highlight-blue;
 	color: #FFF;
 	text-align: center;
@@ -119,6 +120,7 @@
 	.rp-size-expanded & {
 		display: flex;
 		align-items: center;
+		justify-content: space-around;
 		padding: 0 5px;
 	}
 	// .rp-state-current-file & {
@@ -592,6 +594,7 @@
 	z-index: 2;
 }
 	.rp-nav-item {
+		display: block;
 		color: lighten(@rp-type-blue, 25%);
 		flex: 0 0 50%;
 		border-top: solid 3px transparent;
@@ -813,7 +816,8 @@
 	}
 }
 	.resolved-comments-scroller {
-		flex: 0 0 100%;
+		flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding.
+		width: 100%; // We need to set the width explicitly, as flex-basis won't work.
 		padding: 5px;
 		overflow-y: auto;
 	}
@@ -865,3 +869,10 @@
 		display: block;
 	}
 }
+
+// Helper class for elements which aren't treated as flex-items by IE10, e.g:
+// * inline items;
+// * unknown elements (elements which aren't standard DOM elements, such as custom element directives)
+.rp-flex-block {
+	display: block;
+}