You are here

Home » API reference » Panels Extra Layouts 7.2

bartlett-flipped.css in Panels Extra Layouts 7.2

Bartlett Flipped panel layout

File

plugins/layouts/bartlett_flipped/bartlett-flipped.css
View source 
  1. /**

  2.  * @file

  3.  * Bartlett Flipped panel layout

  4. **/

  5. 

  6. .bartlett-flipped-container,

  7. .bartlett-flipped-content-header {

  8.   margin-bottom: 1em;

  9. }

  10. 

  11. .bartlett-flipped-column {

  12.   width: 34.043%;

  13.   float: left;

  14. }

  15. 

  16.   .bartlett-flipped-column-inner {

  17.     margin-right: 20px;

  18.   }

  19.   

  20.   .bartlett-flipped-content-column2-inner,

  21.   .bartlett-flipped-sidebar-inner {

  22.     margin-right: 0;

  23.   }

  24.   

  25. .bartlett-flipped .bartlett-flipped-sidebar {

  26.   width: 31.915%;

  27. }

  28.   

  29. .bartlett-flipped-content-container { /* This is floated to the left of the sidebar,

  30.   which is styled by the generic "bartlett-flipped-column" class */

  31.   float: left;

  32.   width: 68.085%;

  33. }

  34. 

  35.   .bartlett-flipped-content-container-inner {

  36.     margin-right: 20px;

  37.   }

  38.   

  39.   .bartlett-flipped-content-container .bartlett-flipped-content-column1 {

  40.     width: 51.613%;

  41.   }

  42.   

  43.   .bartlett-flipped-content-container .bartlett-flipped-content-column2 {

  44.     width: 48.387%;

  45.   }

  46.   

  47. /* iPhone [portrait + landscape] */

  48. @media only screen and (max-width: 480px) {

  49.   .bartlett-flipped-column,

  50.   .bartlett-flipped-content-container,

  51.   .bartlett-flipped .bartlett-flipped-sidebar,

  52.   .bartlett-flipped-content-container .bartlett-flipped-content-column1,

  53.   .bartlett-flipped-content-container .bartlett-flipped-content-column2 {

  54.     width: 100%;

  55.     float: none;

  56.   }

  57.   

  58.   .bartlett-flipped-column-inner,

  59.   .bartlett-flipped-content-container-inner {

  60.     margin-right: 0;

  61.   }

  62. }