You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.0 KiB
104 lines
2.0 KiB
/* IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values */
|
|
/* Details: */
|
|
/* Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error. */
|
|
/* Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem). */
|
|
/* Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px */
|
|
|
|
@media screen\0 {
|
|
.flex {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media screen\0 {
|
|
.flex {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media screen\0
|
|
and (max-width: 599px) {
|
|
.flex-xs {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media screen\0
|
|
and (min-width: 600px) {
|
|
.flex-gt-xs {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media screen\0
|
|
and (min-width: 600px) and (max-width: 959px) {
|
|
.flex-sm {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media screen\0
|
|
and (min-width: 960px) {
|
|
.flex-gt-sm {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media screen\0
|
|
and (min-width: 960px) and (max-width: 1279px) {
|
|
.flex-md {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media screen\0
|
|
and (min-width: 1280px) {
|
|
.flex-gt-md {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media screen\0
|
|
and (min-width: 1280px) and (max-width: 1919px) {
|
|
.flex-lg {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media screen\0
|
|
and (min-width: 1920px) {
|
|
.flex-gt-lg {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media screen\0
|
|
and (min-width: 1920px) {
|
|
.flex-xl {
|
|
-webkit-flex: 1 1 0%;
|
|
-ms-flex: 1 1 0%;
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
|