/skin/frontend/ultimo/default/css/infortis/_shared/grid12.css

https://gitlab.com/Tung/magento · CSS · 193 lines · 139 code · 19 blank · 35 comment · 0 complexity · 93135c24a2c385d27f5ef9c1a04827d5 MD5 · raw file

  1. /*
  2. * 12-column grid system
  3. */
  4. /* Container */
  5. .container {
  6. margin-left:auto;
  7. margin-right:auto;
  8. }
  9. .nested-container {
  10. width:102%;
  11. margin-left:-1%;
  12. }
  13. /* Grid units */
  14. .grid12-1,
  15. .grid12-2,
  16. .grid12-3,
  17. .grid12-4,
  18. .grid12-5,
  19. .grid12-6,
  20. .grid12-7,
  21. .grid12-8,
  22. .grid12-9,
  23. .grid12-10,
  24. .grid12-11,
  25. .grid12-12,
  26. .grid-full, /* Alias for full-width unit */
  27. /* Special grid units */
  28. .grid-col2-sidebar,
  29. .grid-col2-main
  30. {
  31. /*position:relative;*/
  32. display:inline;
  33. float:left;
  34. margin-left:1%;
  35. margin-right:1%;
  36. }
  37. /* Basic grid units width */
  38. .grid12-1 { width:6.33%; }
  39. .grid12-2 { width:14.66%; }
  40. .grid12-3 { width:23%; }
  41. .grid12-4 { width:31.33%; }
  42. .grid12-5 { width:39.67%; }
  43. .grid12-6 { width:48%; }
  44. .grid12-7 { width:56.33%; }
  45. .grid12-8 { width:64.67%; }
  46. .grid12-9 { width:73%; }
  47. .grid12-10 { width:81.33%; }
  48. .grid12-11 { width:89.67%; }
  49. .grid12-12,
  50. .grid-full { width:98%; }
  51. /* Grid units without left gutter (margin) */
  52. .no-left-gutter.grid12-1 { margin-left:0; width:7.33%; }
  53. .no-left-gutter.grid12-2 { margin-left:0; width:15.66%; }
  54. .no-left-gutter.grid12-3 { margin-left:0; width:24%; }
  55. .no-left-gutter.grid12-4 { margin-left:0; width:32.33%; }
  56. .no-left-gutter.grid12-5 { margin-left:0; width:40.67%; }
  57. .no-left-gutter.grid12-6 { margin-left:0; width:49%; }
  58. .no-left-gutter.grid12-7 { margin-left:0; width:57.33%; }
  59. .no-left-gutter.grid12-8 { margin-left:0; width:65.67%; }
  60. .no-left-gutter.grid12-9 { margin-left:0; width:74%; }
  61. .no-left-gutter.grid12-10 { margin-left:0; width:82.33%; }
  62. .no-left-gutter.grid12-11 { margin-left:0; width:90.67%; }
  63. .no-left-gutter.grid12-12,
  64. .no-left-gutter.grid-full { margin-left:0; width:99%; }
  65. /* Grid units without right gutter (margin) */
  66. .no-right-gutter.grid12-1 { margin-right:0; width:7.33%; }
  67. .no-right-gutter.grid12-2 { margin-right:0; width:15.66%; }
  68. .no-right-gutter.grid12-3 { margin-right:0; width:24%; }
  69. .no-right-gutter.grid12-4 { margin-right:0; width:32.33%; }
  70. .no-right-gutter.grid12-5 { margin-right:0; width:40.67%; }
  71. .no-right-gutter.grid12-6 { margin-right:0; width:49%; }
  72. .no-right-gutter.grid12-7 { margin-right:0; width:57.33%; }
  73. .no-right-gutter.grid12-8 { margin-right:0; width:65.67%; }
  74. .no-right-gutter.grid12-9 { margin-right:0; width:74%; }
  75. .no-right-gutter.grid12-10 { margin-right:0; width:82.33%; }
  76. .no-right-gutter.grid12-11 { margin-right:0; width:90.67%; }
  77. .no-right-gutter.grid12-12,
  78. .no-right-gutter.grid-full { margin-right:0; width:99%; }
  79. /* Grid units without any gutter (margin) */
  80. .no-gutter.grid12-1 { margin-left:0; margin-right:0; width:8.33%; }
  81. .no-gutter.grid12-2 { margin-left:0; margin-right:0; width:16.66%; }
  82. .no-gutter.grid12-3 { margin-left:0; margin-right:0; width:25%; }
  83. .no-gutter.grid12-4 { margin-left:0; margin-right:0; width:33.33%; }
  84. .no-gutter.grid12-5 { margin-left:0; margin-right:0; width:41.67%; }
  85. .no-gutter.grid12-6 { margin-left:0; margin-right:0; width:50%; }
  86. .no-gutter.grid12-7 { margin-left:0; margin-right:0; width:58.33%; }
  87. .no-gutter.grid12-8 { margin-left:0; margin-right:0; width:66.67%; }
  88. .no-gutter.grid12-9 { margin-left:0; margin-right:0; width:75%; }
  89. .no-gutter.grid12-10 { margin-left:0; margin-right:0; width:83.33%; }
  90. .no-gutter.grid12-11 { margin-left:0; margin-right:0; width:91.67%; }
  91. .no-gutter.grid12-12,
  92. .no-gutter.grid-full { margin-left:0; margin-right:0; width:100%; }
  93. /* Special grid units: basic structure of pages with 1 and 2 sidebars
  94. -------------------------------------------------------------- */
  95. /* 2 columns: fixed-width sidebar unit and fluid main unit.
  96. Sidebar unit has the same width for all screen sizes equal or greater than 1280px.
  97. Width of the main unit is fluid.
  98. */
  99. .grid-col2-sidebar { width:23%; }
  100. .grid-col2-main { width:73%; }
  101. /* Another 2 columns inside ".grid-col2-main": fixed-width sidebar unit and fluid main unit */
  102. .grid-col3-sidebar { width:31.52%; }
  103. .grid-col3-main { width:65.90%; }
  104. /* Vertically aligned grid
  105. -------------------------------------------------------------- */
  106. .v-grid-container {
  107. display:table;
  108. width:100%;
  109. }
  110. .v-grid {
  111. float:none;
  112. display:table-cell;
  113. vertical-align:middle;
  114. }
  115. /* Utility classes
  116. -------------------------------------------------------------- */
  117. /* Units with no gutter (margin): alpha - first unit in a row, omega - last unit in a row */
  118. .alpha { margin-left:0; }
  119. .omega { margin-right:0; }
  120. /* Hide element if screen width is lower than the width specified in the class name */
  121. .hide-below-1680 { display:none !important; }
  122. .hide-below-1440 { display:none !important; }
  123. .hide-below-1360 { display:none !important; }
  124. .hide-below-1280 { display:none !important; }
  125. /* Container: stretched, without side margin
  126. -------------------------------------------------------------- */
  127. /* Remove padding from stretched container (it is added for narrow screens via media queries) */
  128. .container.stretched { width:96%; padding-left:0; padding-right:0; }
  129. /* Stretch inner grid unit (full width) */
  130. .container.stretched > .grid-full { width:100%; margin-left:0; margin-right:0; }
  131. /* Grid units container: clears floats
  132. (place grid units inside "div" with this class)
  133. -------------------------------------------------------------- */
  134. .grid-container { *zoom: 1; clear: both; }
  135. .grid-container:before,
  136. .grid-container:after { display: table; line-height: 0; content: ""; }
  137. .grid-container:after { clear: both; }
  138. /* Grid unit container: clears floats and adds vertical margin between units
  139. -------------------------------------------------------------- */
  140. .grid-container-spaced { *zoom: 1; clear: both; }
  141. .grid-container-spaced:before,
  142. .grid-container-spaced:after { display: table; line-height: 0; content: ""; }
  143. .grid-container-spaced:after { clear: both; }
  144. .grid-container-spaced .grid12-1,
  145. .grid-container-spaced .grid12-2,
  146. .grid-container-spaced .grid12-3,
  147. .grid-container-spaced .grid12-4,
  148. .grid-container-spaced .grid12-5,
  149. .grid-container-spaced .grid12-6,
  150. .grid-container-spaced .grid12-7,
  151. .grid-container-spaced .grid12-8,
  152. .grid-container-spaced .grid12-9,
  153. .grid-container-spaced .grid12-10,
  154. .grid-container-spaced .grid12-11,
  155. .grid-container-spaced .grid12-12,
  156. .grid-container-spaced .grid-full
  157. {
  158. margin-bottom: 2%;
  159. }
  160. /* Grid presentation
  161. -------------------------------------------------------------- */
  162. .show-grid [class*="grid12-"] {
  163. background-color: #eee;
  164. text-align: center;
  165. min-height: 40px;
  166. line-height: 40px;
  167. transition: all 300ms ease-in-out;
  168. -moz-transition: all 300ms ease-in-out;
  169. -webkit-transition: all 300ms ease-in-out;
  170. -o-transition: all 300ms ease-in-out;
  171. }
  172. .show-grid [class*="grid12-"]:hover {
  173. background-color: #F08080;
  174. }