You are here

Home » API reference » Page Manager 8

page-manager-ui.admin.css in Page Manager 8

Same filename and directory in other branches
  1. 8.4 page_manager_ui/css/page-manager-ui.admin.css

Styles for Page Manager admin.

File

page_manager_ui/css/page-manager-ui.admin.css
View source 
  1. /**

  2.  * @file

  3.  * Styles for Page Manager admin.

  4.  */

  5. 

  6. /* Narrow screens */

  7. 

  8. .page-manager-wizard-tree,

  9. .page-manager-wizard-form {

  10.   box-sizing: border-box;

  11. }

  12. 

  13. /**

  14.  * Wizard actions across the top.

  15.  */

  16. .page-manager-wizard-actions {

  17.   text-align: right; /* LTR */

  18. }

  19. .page-manager-wizard-actions ul.inline,

  20. .page-manager-wizard-actions ul.inline li {

  21.   display: inline-block;

  22.   margin: 0;

  23. }

  24. .page-manager-wizard-actions ul.inline {

  25.   border-top: 1px solid black;

  26.   border-left: 1px solid black;

  27. }

  28. .page-manager-wizard-actions ul.inline li {

  29.   border-right: 1px solid black;

  30.   padding: .5em;

  31. }

  32. 

  33. /**

  34.  * The tree of wizard steps.

  35.  */

  36. .page-manager-wizard-tree ul {

  37.   margin: 0;

  38.   padding: 0;

  39.   list-style: none;

  40. }

  41. .page-manager-wizard-tree ul > li > ul {

  42.   margin-left: 1em;

  43. }

  44. .page-manager-wizard-tree > ul {

  45.   border: 1px solid black;

  46.   padding-bottom: .5em;

  47.   margin-bottom: 20px;

  48. }

  49. .page-manager-wizard-tree li {

  50.   border-bottom: 1px solid black;

  51.   padding: .5em;

  52.   padding-right: 0;

  53. }

  54. .page-manager-wizard-tree li:last-child {

  55.   border-bottom: 0;

  56.   padding-bottom: 0;

  57. }

  58. 

  59. /**

  60.  * The wizard form.

  61.  */

  62. .page-manager-wizard-form {

  63.   border: 1px solid black;

  64.   padding: 1em;

  65.   margin-bottom: 20px;

  66. }

  67. 

  68. /* Wide screens */

  69. @media

  70.   screen and (min-width: 780px),

  71.   (orientation: landscape) and (min-device-height: 780px) {

  72. 

  73.   /**

  74.    * Overall layout.

  75.    */

  76.   .page-manager-wizard-tree {

  77.     float: left; /* LTR */

  78.     width: 20%;

  79.   }

  80.   .page-manager-wizard-form {

  81.     float: left; /* LTR */

  82.     width: 80%;

  83.   }

  84.   .page-manager-wizard-form-actions {

  85.     margin-left: 20%; /* LTR */

  86.   }

  87. 

  88.   /**

  89.    * Make the borders look nice.

  90.    */

  91.   .page-manager-wizard-tree > ul {

  92.     border-right: 0; /* LTR */

  93.   }

  94.   .page-manager-wizard-form {

  95.     min-height: 700px;

  96.   }

  97. 

  98.   /**

  99.    * Right-to-left support.

  100.    */

  101.   [dir="rtl"] .page-manager-wizard-tree,

  102.   [dir="rtl"] .page-manager-wizard-form {

  103.     float: right;

  104.   }

  105.   [dir="rtl"] .page-manager-wizard-form-actions {

  106.     margin-left: 0;

  107.     margin-right: 20%;

  108.   }

  109.   [dir="rtl"] .page-manager-wizard-tree > ul {

  110.     border-right: 1px solid black;

  111.     border-left: 0;

  112.   }

  113. }