off-canvas.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /**
  2. * @file
  3. * CSS for off-canvas dialog.
  4. */
  5. .ui-dialog-off-canvas {
  6. border-left: 1px solid #e6e4df;
  7. }
  8. .ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
  9. padding: 0;
  10. }
  11. .ui-dialog-off-canvas .ui-tabs .ui-tabs-panel {
  12. padding: 20px;
  13. }
  14. .ui-dialog-off-canvas .ui-tabs .ui-tabs-nav {
  15. border-bottom: 0;
  16. padding: 0;
  17. background: #f5f5f5;
  18. }
  19. .ui-dialog-off-canvas .ui-tabs .ui-tabs-nav li.ui-tabs-active {
  20. margin: 0;
  21. padding-bottom: 0;
  22. background: white;
  23. border: none;
  24. }
  25. .ui-dialog-off-canvas .ui-tabs .ui-tabs-nav li.ui-tabs-active a:hover {
  26. background: white;
  27. }
  28. .ui-dialog-off-canvas .ui-tabs .ui-tabs-nav li {
  29. padding: 0;
  30. border: none;
  31. margin: 0;
  32. }
  33. .ui-dialog-off-canvas .ui-tabs .ui-tabs-nav li a {
  34. padding: 10px 20px;
  35. line-height: 1.8;
  36. display: flex;
  37. }
  38. .ui-dialog-off-canvas .ui-tabs .ui-tabs-nav li a:hover {
  39. background: #f9f9f9;
  40. }
  41. .ui-dialog-off-canvas fieldset:not(.fieldgroup) {
  42. background: none;
  43. margin: 0;
  44. }
  45. .ui-dialog-off-canvas details fieldset:not(.fieldgroup) {
  46. padding: 55px 0 0 0;
  47. }
  48. .ui-dialog-off-canvas .ui-dialog-content .form-actions {
  49. padding: 20px;
  50. position: relative;
  51. right: 0;
  52. }
  53. .ui-dialog-off-canvas details {
  54. margin: 0 0 5px 0;
  55. }
  56. .ui-dialog-off-canvas table,
  57. .ui-dialog-off-canvas .form-wrapper {
  58. margin-bottom: 20px;
  59. }
  60. .ui-dialog-off-canvas .form-wrapper {
  61. flex-wrap: wrap;
  62. }
  63. .ui-dialog-off-canvas .form-wrapper:last-child {
  64. margin-bottom: 0;
  65. }
  66. .ui-dialog-content .container-inline .form-item {
  67. width: 100%;
  68. margin-bottom: 20px;
  69. }
  70. @media screen and (min-width: 640px) {
  71. .ui-dialog-off-canvas .form-wrapper {
  72. flex-wrap: nowrap;
  73. }
  74. .ui-dialog-off-canvas .form-item,
  75. .ui-dialog-content .container-inline .form-item,
  76. .ui-dialog-off-canvas .button.button--small {
  77. margin-left: 20px;
  78. }
  79. .ui-dialog-off-canvas .details-wrapper .form-item,
  80. .ui-dialog-off-canvas fieldset .form-item {
  81. margin-left: 0;
  82. }
  83. }
  84. .ui-dialog-content .container-inline .form-item:first-child {
  85. margin-left: 0;
  86. }
  87. .ui-dialog-off-canvas .button {
  88. margin-left: 0;
  89. margin-right: 20px;
  90. }
  91. .ui-dialog-off-canvas .button:last-child {
  92. margin-right: 0;
  93. }