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

  1. /* IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values */
  2. /* Details: */
  3. /* Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error. */
  4. /* Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem). */
  5. /* Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px */
  6. @media screen\0 {
  7. .flex {
  8. -webkit-flex: 1 1 0%;
  9. -ms-flex: 1 1 0%;
  10. flex: 1 1 0%;
  11. }
  12. }
  13. @media screen\0 {
  14. .flex {
  15. -webkit-flex: 1 1 0%;
  16. -ms-flex: 1 1 0%;
  17. flex: 1 1 0%;
  18. }
  19. }
  20. @media screen\0
  21. and (max-width: 599px) {
  22. .flex-xs {
  23. -webkit-flex: 1 1 0%;
  24. -ms-flex: 1 1 0%;
  25. flex: 1 1 0%;
  26. }
  27. }
  28. @media screen\0
  29. and (min-width: 600px) {
  30. .flex-gt-xs {
  31. -webkit-flex: 1 1 0%;
  32. -ms-flex: 1 1 0%;
  33. flex: 1 1 0%;
  34. }
  35. }
  36. @media screen\0
  37. and (min-width: 600px) and (max-width: 959px) {
  38. .flex-sm {
  39. -webkit-flex: 1 1 0%;
  40. -ms-flex: 1 1 0%;
  41. flex: 1 1 0%;
  42. }
  43. }
  44. @media screen\0
  45. and (min-width: 960px) {
  46. .flex-gt-sm {
  47. -webkit-flex: 1 1 0%;
  48. -ms-flex: 1 1 0%;
  49. flex: 1 1 0%;
  50. }
  51. }
  52. @media screen\0
  53. and (min-width: 960px) and (max-width: 1279px) {
  54. .flex-md {
  55. -webkit-flex: 1 1 0%;
  56. -ms-flex: 1 1 0%;
  57. flex: 1 1 0%;
  58. }
  59. }
  60. @media screen\0
  61. and (min-width: 1280px) {
  62. .flex-gt-md {
  63. -webkit-flex: 1 1 0%;
  64. -ms-flex: 1 1 0%;
  65. flex: 1 1 0%;
  66. }
  67. }
  68. @media screen\0
  69. and (min-width: 1280px) and (max-width: 1919px) {
  70. .flex-lg {
  71. -webkit-flex: 1 1 0%;
  72. -ms-flex: 1 1 0%;
  73. flex: 1 1 0%;
  74. }
  75. }
  76. @media screen\0
  77. and (min-width: 1920px) {
  78. .flex-gt-lg {
  79. -webkit-flex: 1 1 0%;
  80. -ms-flex: 1 1 0%;
  81. flex: 1 1 0%;
  82. }
  83. }
  84. @media screen\0
  85. and (min-width: 1920px) {
  86. .flex-xl {
  87. -webkit-flex: 1 1 0%;
  88. -ms-flex: 1 1 0%;
  89. flex: 1 1 0%;
  90. }
  91. }