sonata_admin_css_sonata-page.back_14.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. /**
  2. *
  3. * This file is part of the Sonata package.
  4. *
  5. * (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
  6. *
  7. * For the full copyright and license information, please view the LICENSE
  8. * file that was distributed with this source code.
  9. *
  10. * generated on: Mon Feb 15 2016 18:19:17 GMT-0500 (Eastern Standard Time)
  11. * revision: 8ad214287d1ca4359bb958cec1ec0d7c153f2244
  12. *
  13. */
  14. @charset "UTF-8";
  15. /**
  16. *
  17. * CSS dedicated to 'page composer' component.
  18. *
  19. * composer.js rely heavily on these style
  20. * to handle forms show/hide and micro template preview.
  21. *
  22. */
  23. /*-------------------------------------------------------------+
  24. | SETUP (colors/sizes…) |
  25. +-------------------------------------------------------------*/
  26. .page-composer {
  27. /*---------------------------------------------------------------------------+
  28. | MAIN CONTENT VIEW (block selector + editable blocks |
  29. +---------------------------------------------------------------------------*/
  30. /*---------------------------------------------------------------------------+
  31. | ORPHAN BLOCKS (without container defined in current template |
  32. +---------------------------------------------------------------------------*/ }
  33. .page-composer__page-preview {
  34. padding: 3px;
  35. border-radius: 3px;
  36. background-color: #f9f9f9;
  37. border: 1px solid #dcdcdc;
  38. margin-bottom: 20px; }
  39. .page-composer__page-preview__containers {
  40. position: relative;
  41. min-height: 400px; }
  42. .page-composer__page-preview__container, .page-composer__page-preview__container--no-block {
  43. display: block;
  44. position: absolute;
  45. padding: 3px;
  46. color: #404040 !important;
  47. text-decoration: none !important; }
  48. .page-composer__page-preview__container__content {
  49. width: 100%;
  50. height: 100%;
  51. border: 3px solid;
  52. border-radius: 2px;
  53. box-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
  54. padding: 5px 7px;
  55. box-sizing: border-box;
  56. position: relative;
  57. overflow: hidden;
  58. cursor: pointer;
  59. color: #888;
  60. background: #fff;
  61. border-color: #fff; }
  62. .page-composer__page-preview__container__content .drop-indicator {
  63. font-size: 36px;
  64. position: absolute;
  65. top: 50%;
  66. left: 50%;
  67. width: 46px;
  68. height: 46px;
  69. line-height: 46px;
  70. margin-top: -23px;
  71. margin-left: -23px;
  72. background: #8dd8c3;
  73. color: #fff;
  74. border-radius: 2px;
  75. text-align: center;
  76. display: none; }
  77. .page-composer__page-preview__add-block {
  78. position: absolute;
  79. top: 6px;
  80. right: 10px; }
  81. .page-composer__page-preview__add-block .fa-dot-circle-o {
  82. display: none; }
  83. .page-composer__block-type-selector {
  84. padding: 7px 15px;
  85. background: #fff;
  86. border-top: 1px solid #ddd;
  87. border-bottom: 1px solid #ddd; }
  88. .page-composer__block-type-selector label {
  89. display: inline-block;
  90. margin: 0; }
  91. .page-composer__block-type-selector select {
  92. font-size: 12px;
  93. margin-bottom: 0;
  94. height: 26px;
  95. line-height: 26px; }
  96. .page-composer__container__view {
  97. border-radius: 2px;
  98. background-color: #f9f9f9;
  99. border: 1px solid #dcdcdc;
  100. position: relative; }
  101. .page-composer__container__view__header {
  102. padding: 10px 15px;
  103. margin: 0 !important;
  104. font-size: 24px !important;
  105. line-height: 1em !important;
  106. color: #3c8dbc !important; }
  107. .page-composer__container__view__notice {
  108. display: none;
  109. position: absolute;
  110. top: 10px;
  111. right: 15px;
  112. background: #cfc4a7;
  113. color: #fff;
  114. border-radius: 2px;
  115. padding: 3px 9px;
  116. font-size: 11px; }
  117. .page-composer__container__view__notice.persist {
  118. padding-right: 3px; }
  119. .page-composer__container__view__notice.success {
  120. background: #5cc4a7; }
  121. .page-composer__container__view__notice.error {
  122. background: #f56954; }
  123. .page-composer__container__view__notice .close-notice {
  124. display: inline-block;
  125. margin-left: 10px;
  126. cursor: pointer;
  127. background: rgba(0, 0, 0, 0.35);
  128. padding: 0 5px;
  129. border-radius: 2px; }
  130. .page-composer__container__view .nav-tabs {
  131. background-color: #f9f9f9;
  132. border-bottom: none; }
  133. .page-composer__container__view .nav-tabs > li > a {
  134. color: #5cc4a7;
  135. border: none !important;
  136. margin: 0;
  137. border-radius: 0; }
  138. .page-composer__container__view .tabbable {
  139. background: #fff; }
  140. .page-composer__container__view .well {
  141. margin: 0;
  142. box-shadow: none;
  143. background: #ededed;
  144. border-radius: 0;
  145. border: none; }
  146. .page-composer__orphan-containers {
  147. background-color: #f9f9f9;
  148. border: 1px solid #dcdcdc;
  149. border-radius: 2px; }
  150. .page-composer__orphan-containers__header {
  151. border-bottom: 1px solid #dcdcdc;
  152. margin: 0 !important;
  153. padding: 10px 15px;
  154. font-size: 20px !important;
  155. line-height: 1em !important; }
  156. .page-composer__orphan-containers ul {
  157. list-style: none;
  158. margin: 0;
  159. padding: 0; }
  160. .page-composer__orphan-container {
  161. padding: 5px 15px 5px 12px;
  162. border-top: 1px solid #dcdcdc;
  163. cursor: pointer;
  164. border-left: 3px solid #f9f9f9;
  165. display: block; }
  166. .page-composer__orphan-container.active {
  167. border-left-color: #3c8dbc; }
  168. .page-composer__orphan-container:hover {
  169. background: #fff;
  170. border-left-color: #3c8dbc; }
  171. .page-composer__orphan-container:first-child {
  172. border-top: none; }
  173. .page-composer__page-preview__container.hover .page-composer__page-preview__container__content {
  174. border-color: #5cc4a7 !important;
  175. border-style: dotted; }
  176. .page-composer__page-preview__container.hover .drop-indicator {
  177. display: block; }
  178. @-webkit-keyframes droppedin {
  179. 0% {
  180. background-color: #fff;
  181. border-color: #fff; }
  182. 50% {
  183. background-color: #abf8d9;
  184. border-color: #5cc4a7; }
  185. 100% {
  186. background-color: #fff;
  187. border-color: #fff; } }
  188. /* When we drop a block in a container */
  189. .page-composer__page-preview__container.dropped .page-composer__page-preview__container__content {
  190. -webkit-animation-duration: 600ms;
  191. -webkit-animation-name: droppedin; }
  192. .page-composer__page-preview__container__content:hover {
  193. box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  194. color: #404040; }
  195. .page-composer__page-preview__container.active .page-composer__page-preview__container__content {
  196. border-color: #3c8dbc;
  197. box-shadow: none;
  198. color: #404040; }
  199. .page-composer__page-preview__container--no-block .page-composer__page-preview__container__content {
  200. box-shadow: none;
  201. background: transparent;
  202. border: 1px dotted #ccc;
  203. color: #999;
  204. cursor: auto; }
  205. .page-composer__page-preview__container:hover .page-composer__page-preview__add-block .fa-dot-circle-o,
  206. .page-composer__page-preview__container.active .page-composer__page-preview__add-block .fa-dot-circle-o {
  207. display: inline-block; }
  208. .page-composer__page-preview__container:hover .page-composer__page-preview__add-block .fa-circle-o,
  209. .page-composer__page-preview__container.active .page-composer__page-preview__add-block .fa-circle-o {
  210. display: none; }
  211. .page-composer__page-preview__add-block:hover {
  212. background: #fff;
  213. text-decoration: none;
  214. color: #000; }
  215. .page-composer__container__child-count {
  216. margin-top: 4px;
  217. color: #999;
  218. font-size: 12px !important; }
  219. .page-composer__container__child-count .badge,
  220. .page-composer__container__child .badge {
  221. background-color: #3c8dbc;
  222. text-shadow: none; }
  223. .page-composer__container__child > .badge {
  224. position: absolute;
  225. top: 8px;
  226. right: 15px; }
  227. .page-composer__container__main-edition-area {
  228. background: #fff;
  229. border-top: 1px solid #ddd;
  230. border-bottom: 1px solid #ddd;
  231. position: relative;
  232. display: none; }
  233. .page-composer__container__main-edition-area form {
  234. margin: 0; }
  235. /*******************************************\
  236. Container children (detailed view)
  237. \*******************************************/
  238. .page-composer__container__children {
  239. margin: 0 0 10px 0 !important;
  240. list-style: none;
  241. padding: 0; }
  242. .page-composer__container__child {
  243. border-top: 1px solid #ddd;
  244. position: relative;
  245. min-height: 40px; }
  246. .page-composer__container__child__helper,
  247. .page-composer__container__child__content {
  248. border-left: 3px solid #3c8dbc; }
  249. .page-composer__container__child__helper {
  250. position: absolute;
  251. background: rgba(255, 255, 255, 0.85);
  252. padding: 0 10px;
  253. box-shadow: 0 0 2px rgba(0, 0, 0, 0.35); }
  254. .page-composer__container__child__helper h4 {
  255. font-size: 14px !important; }
  256. .page-composer__container__child:first-child {
  257. border-top: none; }
  258. .page-composer__container__child__content {
  259. display: none; }
  260. .page-composer__container__child__content form {
  261. margin: 0 !important; }
  262. .page-composer__container__child .box {
  263. border: none;
  264. border-radius: 0;
  265. margin-bottom: 0;
  266. -moz-box-shadow: none;
  267. box-shadow: none; }
  268. .page-composer__container__child--expanded .page-composer__container__child__content {
  269. display: block; }
  270. .page-composer__container__child__loader {
  271. position: absolute;
  272. top: 0;
  273. right: 0;
  274. bottom: 0;
  275. left: 0;
  276. background: rgba(255, 255, 255, 0.75);
  277. text-align: center;
  278. display: none; }
  279. .page-composer__block-type-selector__loader,
  280. .page-composer__container__child__loader span {
  281. display: inline-block;
  282. padding: 0 9px;
  283. background: #aaa;
  284. color: #fff;
  285. border-radius: 12px;
  286. height: 24px;
  287. line-height: 24px;
  288. font-size: 10px;
  289. box-sizing: border-box;
  290. -moz-box-sizing: border-box; }
  291. .page-composer__block-type-selector__loader {
  292. display: none; }
  293. .page-composer__container__child__loader span {
  294. margin-top: 11px; }
  295. .page-composer__container__child__edit {
  296. display: block;
  297. padding: 10px 15px 10px 27px;
  298. cursor: pointer;
  299. text-decoration: none !important;
  300. color: #404040 !important;
  301. border-left: 3px solid #f9f9f9; }
  302. .page-composer__container__child__right {
  303. position: absolute;
  304. top: 10px;
  305. right: 5px; }
  306. .page-composer__container__child__remove {
  307. display: none; }
  308. .page-composer__container__child__switch-enabled {
  309. display: none; }
  310. .page-composer__container__child__enabled {
  311. display: inline-block; }
  312. .page-composer__container__child:hover .page-composer__container__child__switch-enabled,
  313. .page-composer__container__child--expanded .page-composer__container__child__switch-enabled,
  314. .page-composer__container__child:hover .page-composer__container__child__remove,
  315. .page-composer__container__child--expanded .page-composer__container__child__remove {
  316. display: inline-block; }
  317. .page-composer__container__child__switch-enabled .badge,
  318. .page-composer__container__child__remove .badge {
  319. background-color: #f56954;
  320. cursor: pointer; }
  321. .page-composer__container__child__remove__confirm {
  322. display: none; }
  323. .page-composer__container__child__remove__confirm span {
  324. border-radius: 2px;
  325. background: #eee;
  326. display: inline-block;
  327. padding: 0 7px;
  328. color: #fff;
  329. cursor: pointer; }
  330. .page-composer__container__child__remove__confirm span.yes {
  331. background-color: #00a65a; }
  332. .page-composer__container__child__remove__confirm span.cancel {
  333. background-color: #f56954; }
  334. .page-composer__container__child__toggle {
  335. display: none;
  336. position: absolute;
  337. top: 10px;
  338. left: 10px; }
  339. .page-composer__container__child__toggle .fa-chevron-up {
  340. display: none; }
  341. .page-composer__container__child--expanded .page-composer__container__child__toggle .fa-chevron-up {
  342. display: inline-block; }
  343. .page-composer__container__child--expanded .page-composer__container__child__toggle .fa-chevron-down {
  344. display: none; }
  345. .page-composer__container__child__edit:hover {
  346. background: #fff;
  347. border-left-color: #3c8dbc; }
  348. .page-composer__container__child--expanded .page-composer__container__child__edit {
  349. border-left-color: #3c8dbc;
  350. box-shadow: 0 0 2px rgba(0, 0, 0, 0.35) inset; }
  351. .page-composer__container__child__edit:hover .page-composer__container__child__toggle {
  352. display: inline-block; }
  353. .page-composer__container__child h4 {
  354. margin: 0 !important;
  355. font-size: 14px !important; }
  356. a.sonata-block-type > span {
  357. max-width: 100%;
  358. display: inline-block;
  359. white-space: nowrap;
  360. overflow: hidden;
  361. text-overflow: ellipsis; }
  362. /********************************************************************\
  363. Page tree
  364. \********************************************************************/
  365. .page-tree {
  366. list-style: none;
  367. padding-left: 0;
  368. padding-bottom: 10px;
  369. margin-left: 15px;
  370. margin-right: 15px; }
  371. .page-tree ul {
  372. list-style: none;
  373. padding-left: 30px; }
  374. .page-tree__item {
  375. display: block;
  376. padding: 7px 15px 7px 7px;
  377. border: 1px solid #ddd;
  378. border-radius: 2px;
  379. position: relative;
  380. margin-bottom: 5px;
  381. color: #444; }
  382. .page-tree__item .label {
  383. font-size: 12px;
  384. margin-top: 2px;
  385. border-radius: 2px; }
  386. .page-tree__item .label-warning {
  387. margin-right: 5px; }
  388. .page-tree__item .fa-caret-right {
  389. position: absolute;
  390. top: 9px;
  391. left: -22px;
  392. color: #3c8dbc; }
  393. .page-tree__item:hover {
  394. background: #eee;
  395. color: #000; }
  396. .page-tree__item__is-hybrid {
  397. margin-right: 5px; }
  398. .page-tree__item.is-active {
  399. border: 1px solid #3c8dbc; }
  400. .page-tree__item.is-active:after,
  401. .page-tree__item.is-active:before {
  402. left: 100%;
  403. top: 50%;
  404. border: solid transparent;
  405. content: " ";
  406. height: 0;
  407. width: 0;
  408. position: absolute;
  409. pointer-events: none; }
  410. .page-tree__item.is-active:after {
  411. border-color: rgba(255, 255, 255, 0);
  412. border-left-color: #fff;
  413. border-width: 8px;
  414. margin-top: -8px; }
  415. .page-tree__item.is-active:before {
  416. border-color: rgba(255, 255, 255, 0);
  417. border-left-color: #3c8dbc;
  418. border-width: 9px;
  419. margin-top: -9px; }
  420. .page-tree__item.is-active:hover:after {
  421. border-left-color: #eee; }
  422. .page-tree__item.is-toggled .fa-caret-right {
  423. -webkit-transform: rotate(90deg);
  424. -moz-transform: rotate(90deg);
  425. -o-transform: rotate(90deg);
  426. -ms-transform: rotate(90deg);
  427. transform: rotate(90deg); }
  428. .page-tree__item__edit {
  429. font-weight: bold; }
  430. .page-tree__item__edit:hover {
  431. text-decoration: underline; }
  432. /**
  433. * Toggleable tree
  434. */
  435. .page-tree--toggleable li > ul {
  436. display: none; }
  437. .page-tree--toggleable .page-tree__item {
  438. margin-left: 25px; }
  439. .page-tree--toggleable .page-tree__item .fa-caret-right {
  440. cursor: pointer; }
  441. .page-tree--toggleable .page-tree__item .fa-caret-right:after {
  442. content: '';
  443. position: absolute;
  444. top: -5px;
  445. bottom: -5px;
  446. left: -10px;
  447. right: -10px; }