layoutit-2.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. body {
  2. padding-top:50px;
  3. padding-bottom: 40px;
  4. margin-left:200px;
  5. -webkit-transition: margin 500ms ease;
  6. -moz-transition: margin 500ms ease;
  7. -ms-transition: margin 500ms ease;
  8. -o-transition: margin 500ms ease;
  9. transition: margin 500ms ease;
  10. }
  11. @media (max-width: 980px) {
  12. /* Enable use of floated navbar text */
  13. .navbar-text.pull-right {
  14. float: none;
  15. padding-left: 5px;
  16. padding-right: 5px;
  17. }
  18. }
  19. @media (max-width: 979px) {
  20. .navbar-fixed-top { position:fixed; }
  21. }
  22. .navbar-inverse .brand {width:180px; color:#fff; }
  23. .brand img {float:left; margin:2px 10px 0 0; }
  24. .brand .label {
  25. position:relative;
  26. left:10px;
  27. top:-3px;
  28. font-weight:normal;
  29. font-size:9px;
  30. background:#666;
  31. -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.7);
  32. -moz-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.7);
  33. box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.7);
  34. }
  35. .edit .demo { margin-left:0px; margin-top:10px; padding:30px 15px 15px; border: 1px solid #DDDDDD; border-radius: 4px; position:relative; word-wrap: break-word;}
  36. .edit .demo:after {
  37. background-color: #F5F5F5;
  38. border: 1px solid #DDDDDD;
  39. border-radius: 4px 0 4px 0;
  40. color: #9DA0A4;
  41. content: "Container";
  42. font-size: 12px;
  43. font-weight: bold;
  44. left: -1px;
  45. padding: 3px 7px;
  46. position: absolute;
  47. top: -1px;
  48. }
  49. .sidebar-nav {
  50. position:fixed;
  51. width:200px;
  52. left:0px;
  53. bottom:0;
  54. top:44px;
  55. background:#ccc;
  56. padding: 9px 0; z-index:10;
  57. -webkit-transition: all 500ms ease;
  58. -moz-transition: all 500ms ease;
  59. -ms-transition: all 500ms ease;
  60. -o-transition: all 500ms ease;
  61. transition: all 500ms ease;
  62. }
  63. .sidebar-nav .nav-header { cursor:pointer; font-size:14px; color:#fff; text-shadow:0 1px 0 rgba(0, 0, 0, 0.3);}
  64. .sidebar-nav .nav-header span.label { font-size:10px; /*padding-bottom:0;*/ position:relative; top:-1px;}
  65. .sidebar-nav .nav-header i.icon-plus {}
  66. .sidebar-nav .nav-header .popover {color:#999; text-shadow:none;}
  67. .popover-info {position:relative;}
  68. .popover-info .popover {display:none; top: -12.5px; left:15px; }
  69. .popover-info:hover .popover {display:block; opacity:1; width:400px;}
  70. .popover-info:hover .popover .arrow {top:23px;}
  71. .sidebar-nav .accordion-group { border:none; }
  72. .boxes {}
  73. .sidebar-nav li { line-height:25px; }
  74. .sidebar-nav .box { line-height:25px; width:170px; height:25px; }
  75. .sidebar-nav .preview { display: block; color:#666; font-size:12px; line-height:22px;}
  76. .sidebar-nav .preview input { width:90px; padding:0 10px; background:#bbb; font-size:10px; color:#999; line-height:20px; height:20px; position:relative; top:-1px; }
  77. .sidebar-nav .view { display: none; }
  78. .sidebar-nav .remove,
  79. .sidebar-nav .configuration { display: none; }
  80. .sidebar-nav .boxes { display:none;}
  81. .demo .preview { display: none; }
  82. .demo .box .view { display: block; padding-top:30px;}
  83. .ui-draggable-dragging .view { display:block;}
  84. /*.demo .ui-sortable-placeholder { outline: 5px dotted #ddd; visibility: visible!Important; border-radius: 4px; }*/
  85. .ui-sortable-placeholder { outline: 1px dashed #ddd;visibility: visible!Important; border-radius: 4px;}
  86. .edit .drag { position: absolute; top: 0;right: 0; cursor: pointer; }
  87. .box,.lyrow { position:relative;}
  88. .edit .demo .lyrow .drag { top:5px; right:80px; z-index:10; }
  89. .edit .demo .column .box .drag { top:5px; }
  90. .edit .demo .column .box .configuration {position: absolute; top: 3px; right: 140px;white-space:nowrap; }
  91. .edit .demo .remove { position: absolute; top: 5px; right: 5px; z-index:10; }
  92. .demo .configuration {
  93. filter: alpha(opacity=0);
  94. opacity: 0;
  95. -webkit-transition: all 500ms ease;
  96. -moz-transition: all 500ms ease;
  97. -ms-transition: all 500ms ease;
  98. -o-transition: all 500ms ease;
  99. transition: all 500ms ease;
  100. }
  101. .demo .drag, .demo .remove {
  102. filter: alpha(opacity=20); opacity: 0.2;
  103. -webkit-transition: all 500ms ease;
  104. -moz-transition: all 500ms ease;
  105. -ms-transition: all 500ms ease;
  106. -o-transition: all 500ms ease;
  107. transition: all 500ms ease;
  108. }
  109. .demo .lyrow:hover > .drag,
  110. .demo .lyrow:hover > .configuration,
  111. .demo .lyrow:hover > .remove,
  112. .demo .box:hover .drag,
  113. .demo .box:hover .configuration,
  114. .demo .box:hover .remove { filter: alpha(opacity=100); opacity: 1; }
  115. .edit .demo .row-fluid:before {
  116. background-color: #F5F5F5;
  117. border: 1px solid #DDDDDD;
  118. border-radius: 4px 0 4px 0;
  119. color: #9DA0A4;
  120. content: "Row";
  121. font-size: 12px;
  122. font-weight: bold;
  123. left: -1px;
  124. line-height:2;
  125. padding: 3px 7px;
  126. position: absolute;
  127. top: -1px;
  128. }
  129. .demo .row-fluid {
  130. background-color: #F5F5F5;
  131. -webkit-box-sizing: border-box;
  132. -moz-box-sizing: border-box;
  133. box-sizing: border-box;
  134. -webkit-box-shadow: inset 0 1px 13px rgba(0, 0, 0, 0.1);
  135. -moz-box-shadow: inset 0 1px 13px rgba(0, 0, 0, 0.1);
  136. box-shadow: inset 0 1px 13px rgba(0, 0, 0, 0.1);
  137. border: 1px solid #DDDDDD;
  138. border-radius: 4px 4px 4px 4px;
  139. margin: 15px 0;
  140. position: relative;
  141. padding: 25px 14px 0;
  142. }
  143. .edit .column:after {
  144. background-color: #F5F5F5;
  145. border: 1px solid #DDDDDD;
  146. border-radius: 4px 0 4px 0;
  147. color: #9DA0A4;
  148. content: "Column";
  149. font-size: 12px;
  150. font-weight: bold;
  151. left: -1px;
  152. padding: 3px 7px;
  153. position: absolute;
  154. top: -1px;
  155. }
  156. .column {
  157. background-color: #FFFFFF;
  158. border: 1px solid #DDDDDD;
  159. border-radius: 4px 4px 4px 4px;
  160. margin: 15px 0;
  161. padding: 39px 19px 24px;
  162. position: relative;
  163. }
  164. /* preview */
  165. body.devpreview { margin-left:0px;}
  166. .devpreview .sidebar-nav {
  167. left:-200px;
  168. -webkit-transition: all 0ms ease;
  169. -moz-transition: all 0ms ease;
  170. -ms-transition: all 0ms ease;
  171. -o-transition: all 0ms ease;
  172. transition: all 0ms ease;
  173. }
  174. .devpreview .drag, .devpreview .configuration, .devpreview .remove { display:none !Important; }
  175. .sourcepreview .column, .sourcepreview .row-fluid, .sourcepreview .demo .box {
  176. margin:0px 0;
  177. padding:0px;
  178. background:none;
  179. border:none;
  180. -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.00);
  181. -moz-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.00);
  182. box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.00);
  183. }
  184. .devpreview .demo .box, .devpreview .demo .row-fluid { padding-top:0; background:none; }
  185. .devpreview .demo .column { padding-top:19px; padding-bottom:19px; }
  186. #download-layout { display: none }
  187. #editorModal textarea,
  188. #downloadModal textarea { width:100%;height:280px;resize: none;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box; }
  189. #editorModal {width:640px;}
  190. a.language-selected { font-style: italic; font-weight: bold; }