You are here

Home » API reference » Commerce Recurring Framework 8

subscription.form.css in Commerce Recurring Framework 8

Styles for the subscription add/edit form.

Copied from node-module.css

File

css/subscription.form.css
View source 
  1. /**

  2.  * @file

  3.  * Styles for the subscription add/edit form.

  4.  *

  5.  * Copied from node-module.css

  6.  */

  7. 

  8. /* Narrow screens */

  9. .layout-region {

  10.   box-sizing: border-box;

  11. }

  12. 

  13. /* Wide screens */

  14. @media

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

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

  17. 

  18.   .layout-region-subscription-main,

  19.   .layout-region-subscription-footer {

  20.     float: left; /* LTR */

  21.     width: 65%;

  22.     padding-right: 2em; /* LTR */

  23.     box-sizing: border-box;

  24.   }

  25. 

  26.   [dir="rtl"] .layout-region-subscription-main,

  27.   [dir="rtl"] .layout-region-subscription-footer {

  28.     float: right;

  29.     padding-left: 2em;

  30.     padding-right: 0;

  31.   }

  32. 

  33.   .layout-region-subscription-secondary {

  34.     float: right; /* LTR */

  35.     width: 35%;

  36.   }

  37. 

  38.   [dir="rtl"] .layout-region-subscription-secondary {

  39.     float: left;

  40.   }

  41. }

  42. 

  43. /**

  44.  * The vertical toolbar mode gets triggered for narrow screens, which throws off

  45.  * the intent of media queries written for the viewport width. When the vertical

  46.  * toolbar is on, we need to suppress layout for the original media width + the

  47.  * toolbar width (240px). In this case, 240px + 780px.

  48.  */

  49. @media

  50. screen and (max-width: 1020px) {

  51. 

  52.   .toolbar-vertical.toolbar-tray-open .layout-region-subscription-main,

  53.   .toolbar-vertical.toolbar-tray-open .layout-region-subscription-footer,

  54.   .toolbar-vertical.toolbar-tray-open .layout-region-subscription-secondary {

  55.     float: none;

  56.     width: auto;

  57.     padding-right: 0;

  58.   }

  59. }