DotaNoobs main site.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

964 lines
21 KiB

  1. /*! UIkit 2.5.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
  2. /* ========================================================================
  3. Component: Dotnav
  4. ========================================================================== */
  5. /*
  6. * 1. Remove default list style
  7. * 2. Remove whitespace between child elements when using `inline-block`
  8. */
  9. .uk-dotnav {
  10. /* 1 */
  11. padding: 0;
  12. list-style: none;
  13. /* 2 */
  14. font-size: 0.001px;
  15. }
  16. /* Items
  17. ========================================================================== */
  18. /*
  19. * 1. Reset whitespace hack
  20. * 2. Remove the gap at the bottom of it container
  21. */
  22. .uk-dotnav > li {
  23. display: inline-block;
  24. /* 1 */
  25. font-size: 1rem;
  26. /* 2 */
  27. vertical-align: top;
  28. }
  29. .uk-dotnav > li:nth-child(n+2) {
  30. margin-left: 15px;
  31. }
  32. /*
  33. * Items
  34. * 1. Remove the gap at the bottom of it container
  35. * 2. Hide text if present
  36. */
  37. .uk-dotnav > li > a {
  38. display: inline-block;
  39. -moz-box-sizing: content-box;
  40. box-sizing: content-box;
  41. width: 20px;
  42. height: 20px;
  43. border-radius: 50%;
  44. background: rgba(50, 50, 50, 0.1);
  45. /* 1 */
  46. vertical-align: top;
  47. /* 2 */
  48. overflow: hidden;
  49. text-indent: -999%;
  50. }
  51. /*
  52. * Hover
  53. * 1. Apply hover style also to focus state
  54. * 2. Remove default focus style
  55. */
  56. .uk-dotnav > li > a:hover,
  57. .uk-dotnav > li > a:focus {
  58. background: rgba(50, 50, 50, 0.4);
  59. /* 2 */
  60. outline: none;
  61. }
  62. /* OnClick */
  63. .uk-dotnav > li > a:active {
  64. background: rgba(50, 50, 50, 0.6);
  65. }
  66. /* Active */
  67. .uk-dotnav > li.uk-active > a {
  68. background: rgba(50, 50, 50, 0.4);
  69. }
  70. /* Modifier: 'dotnav-vertical'
  71. ========================================================================== */
  72. .uk-dotnav-vertical > li {
  73. display: block;
  74. }
  75. .uk-dotnav-vertical > li:nth-child(n+2) {
  76. margin-left: 0;
  77. margin-top: 15px;
  78. }
  79. /* ========================================================================
  80. Component: Slidenav
  81. ========================================================================== */
  82. /*
  83. * 1. Required for `a` elements
  84. * 2. Dimension
  85. * 3. Style
  86. */
  87. .uk-slidenav {
  88. /* 1 */
  89. display: inline-block;
  90. /* 2 */
  91. -moz-box-sizing: border-box;
  92. box-sizing: border-box;
  93. width: 60px;
  94. height: 60px;
  95. /* 3 */
  96. line-height: 60px;
  97. color: rgba(50, 50, 50, 0.4);
  98. font-size: 60px;
  99. text-align: center;
  100. }
  101. /*
  102. * Hover
  103. * 1. Apply hover style also to focus state
  104. * 2. Remove default focus style
  105. * 3. Required for `a` elements
  106. * 4. Style
  107. */
  108. .uk-slidenav:hover,
  109. .uk-slidenav:focus {
  110. /* 2 */
  111. outline: none;
  112. /* 3 */
  113. text-decoration: none;
  114. /* 4 */
  115. color: rgba(50, 50, 50, 0.7);
  116. cursor: pointer;
  117. }
  118. /* Active */
  119. .uk-slidenav:active {
  120. color: rgba(50, 50, 50, 0.9);
  121. }
  122. /*
  123. * Icons
  124. */
  125. .uk-slidenav-previous:before {
  126. content: "\f104";
  127. font-family: FontAwesome;
  128. }
  129. .uk-slidenav-next:before {
  130. content: "\f105";
  131. font-family: FontAwesome;
  132. }
  133. /* Sub-object: `uk-slidenav-position`
  134. ========================================================================== */
  135. /*
  136. * 1. Container width fits its content
  137. * 2. Corrects max-width behavior (3.) if padding and border are used
  138. * 3. Responsive behavior
  139. * 4. Create position context for dropdowns
  140. */
  141. .uk-slidenav-position {
  142. /* 1 */
  143. display: inline-block;
  144. /* 2 */
  145. -moz-box-sizing: border-box;
  146. box-sizing: border-box;
  147. /* 3 */
  148. max-width: 100%;
  149. /* 4 */
  150. position: relative;
  151. }
  152. /*
  153. * Center vertically
  154. */
  155. .uk-slidenav-position .uk-slidenav {
  156. display: none;
  157. position: absolute;
  158. top: 50%;
  159. margin-top: -30px;
  160. }
  161. .uk-slidenav-position:hover .uk-slidenav {
  162. display: block;
  163. }
  164. .uk-slidenav-position .uk-slidenav-previous {
  165. left: 20px;
  166. }
  167. .uk-slidenav-position .uk-slidenav-next {
  168. right: 20px;
  169. }
  170. /* ========================================================================
  171. Component: Form file
  172. ========================================================================== */
  173. .uk-form-file {
  174. position: relative;
  175. display: inline-block;
  176. vertical-align: middle;
  177. overflow: hidden;
  178. }
  179. /*
  180. * 1. Required for Firefox
  181. * 2. Required for the cursor
  182. */
  183. .uk-form-file input[type="file"] {
  184. position: absolute;
  185. top: 0;
  186. bottom: 0;
  187. z-index: 1;
  188. width: 100%;
  189. opacity: 0;
  190. cursor: pointer;
  191. /* 1 */
  192. left: 0;
  193. /* 2 */
  194. font-size: 50px;
  195. }
  196. /* ========================================================================
  197. Component: Form password
  198. ========================================================================== */
  199. .uk-form-password {
  200. position: relative;
  201. display: inline-block;
  202. max-width: 100%;
  203. }
  204. .uk-form-password-toggle {
  205. display: block;
  206. position: absolute;
  207. top: 50%;
  208. right: 10px;
  209. margin-top: -6px;
  210. font-size: 13px;
  211. line-height: 13px;
  212. color: #999999;
  213. }
  214. .uk-form-password-toggle:hover {
  215. color: #999999;
  216. text-decoration: none;
  217. }
  218. .uk-form-password > input {
  219. padding-right: 50px !important;
  220. }
  221. /* ========================================================================
  222. Component: Placeholder
  223. ========================================================================== */
  224. .uk-placeholder {
  225. margin-bottom: 15px;
  226. padding: 20px;
  227. border: 1px dashed #dddddd;
  228. background: #fafafa;
  229. color: #444444;
  230. }
  231. /*
  232. * Add margin if adjacent element
  233. */
  234. * + .uk-placeholder {
  235. margin-top: 15px;
  236. }
  237. /*
  238. * Remove margin from the last-child
  239. */
  240. .uk-placeholder > :last-child {
  241. margin-bottom: 0;
  242. }
  243. /* Modifier: `uk-placeholder-large`
  244. ========================================================================== */
  245. .uk-placeholder-large {
  246. padding-top: 80px;
  247. padding-bottom: 80px;
  248. }
  249. /* ========================================================================
  250. Component: Autocomplete
  251. ========================================================================== */
  252. /*
  253. * 1. Behave like form elements
  254. * 2. Create position context for dropdowns
  255. */
  256. .uk-autocomplete {
  257. /* 1 */
  258. display: inline-block;
  259. vertical-align: middle;
  260. /* 2 */
  261. position: relative;
  262. }
  263. /* Nav modifier `uk-nav-autocomplete`
  264. ========================================================================== */
  265. /*
  266. * Items
  267. */
  268. .uk-nav-autocomplete > li > a {
  269. color: #444444;
  270. }
  271. /*
  272. * Active
  273. * 1. Remove default focus style
  274. */
  275. .uk-nav-autocomplete > li.uk-active > a {
  276. background: #00a8e6;
  277. color: #ffffff;
  278. /* 1 */
  279. outline: none;
  280. }
  281. /*
  282. * Sub-object: `uk-nav-header`
  283. */
  284. .uk-nav-autocomplete .uk-nav-header {
  285. color: #999999;
  286. }
  287. /*
  288. * Sub-object: `uk-nav-divider`
  289. */
  290. .uk-nav-autocomplete .uk-nav-divider {
  291. border-top: 1px solid #dddddd;
  292. }
  293. /* ========================================================================
  294. Component: Datepicker
  295. ========================================================================== */
  296. /*
  297. * Reset dropdown width
  298. */
  299. .uk-datepicker {
  300. width: auto;
  301. }
  302. /* Sub-object: `uk-datepicker-nav`
  303. ========================================================================== */
  304. .uk-datepicker-nav {
  305. margin-bottom: 15px;
  306. text-align: center;
  307. line-height: 20px;
  308. }
  309. /*
  310. * Micro clearfix
  311. */
  312. .uk-datepicker-nav:before,
  313. .uk-datepicker-nav:after {
  314. content: " ";
  315. display: table;
  316. }
  317. .uk-datepicker-nav:after {
  318. clear: both;
  319. }
  320. /*
  321. * Previous and next navigation
  322. */
  323. .uk-datepicker-nav a {
  324. color: #444444;
  325. text-decoration: none;
  326. }
  327. .uk-datepicker-nav a:hover {
  328. color: #444444;
  329. }
  330. .uk-datepicker-previous {
  331. float: left;
  332. }
  333. .uk-datepicker-next {
  334. float: right;
  335. }
  336. .uk-datepicker-previous:after,
  337. .uk-datepicker-next:after {
  338. width: 20px;
  339. font-family: FontAwesome;
  340. }
  341. .uk-datepicker-previous:after {
  342. content: "\f053";
  343. }
  344. .uk-datepicker-next:after {
  345. content: "\f054";
  346. }
  347. /* Sub-object: `uk-datepicker-heading`
  348. ========================================================================== */
  349. /* Sub-object: `uk-datepicker-table`
  350. ========================================================================== */
  351. /* Block element behavior */
  352. .uk-datepicker-table {
  353. width: 100%;
  354. }
  355. .uk-datepicker-table th,
  356. .uk-datepicker-table td {
  357. padding: 2px;
  358. }
  359. .uk-datepicker-table th {
  360. font-size: 12px;
  361. }
  362. /*
  363. * Item
  364. */
  365. .uk-datepicker-table a {
  366. display: block;
  367. width: 26px;
  368. line-height: 24px;
  369. text-align: center;
  370. color: #444444;
  371. text-decoration: none;
  372. }
  373. /*
  374. * Sub-object: `uk-datepicker-table-muted`
  375. */
  376. a.uk-datepicker-table-muted {
  377. color: #999999;
  378. }
  379. /*
  380. * Hover
  381. * 1. Apply hover style also to focus state
  382. * 2. Remove default focus style
  383. */
  384. .uk-datepicker-table a:hover,
  385. .uk-datepicker-table a:focus {
  386. background-color: #dddddd;
  387. color: #444444;
  388. /* 2 */
  389. outline: none;
  390. }
  391. /* OnClick */
  392. .uk-datepicker-table a:active {
  393. background-color: #cccccc;
  394. color: #444444;
  395. }
  396. /*
  397. * Active
  398. */
  399. .uk-datepicker-table a.uk-active {
  400. background: #00a8e6;
  401. color: #ffffff;
  402. }
  403. /* ========================================================================
  404. Component: Markdownarea
  405. ========================================================================== */
  406. /* Sub-object `uk-markdownarea-navbar`
  407. ========================================================================== */
  408. .uk-markdownarea-navbar {
  409. background: #eeeeee;
  410. }
  411. /*
  412. * Micro clearfix
  413. */
  414. .uk-markdownarea-navbar:before,
  415. .uk-markdownarea-navbar:after {
  416. content: " ";
  417. display: table;
  418. }
  419. .uk-markdownarea-navbar:after {
  420. clear: both;
  421. }
  422. /* Sub-object `uk-markdownarea-navbar-nav`
  423. ========================================================================== */
  424. .uk-markdownarea-navbar-nav {
  425. margin: 0;
  426. padding: 0;
  427. list-style: none;
  428. float: left;
  429. }
  430. .uk-markdownarea-navbar-nav > li {
  431. float: left;
  432. }
  433. /*
  434. * 1. Dimensions
  435. * 2. Style
  436. */
  437. .uk-markdownarea-navbar-nav > li > a {
  438. display: block;
  439. -moz-box-sizing: border-box;
  440. box-sizing: border-box;
  441. text-decoration: none;
  442. /* 1 */
  443. height: 40px;
  444. padding: 0 15px;
  445. line-height: 40px;
  446. /* 2 */
  447. color: #444444;
  448. font-size: 11px;
  449. cursor: pointer;
  450. }
  451. /*
  452. * Hover
  453. * 1. Apply hover style also to focus state
  454. * 2. Remove default focus style
  455. */
  456. .uk-markdownarea-navbar-nav > li:hover > a,
  457. .uk-markdownarea-navbar-nav > li > a:focus {
  458. background-color: #f5f5f5;
  459. color: #444444;
  460. outline: none;
  461. /* 2 */
  462. }
  463. /* OnClick */
  464. .uk-markdownarea-navbar-nav > li > a:active {
  465. background-color: #dddddd;
  466. color: #444444;
  467. }
  468. /* Active */
  469. .uk-markdownarea-navbar-nav > li.uk-active > a {
  470. background-color: #f5f5f5;
  471. color: #444444;
  472. }
  473. /* Sub-object: `uk-markdownarea-navbar-flip`
  474. ========================================================================== */
  475. .uk-markdownarea-navbar-flip {
  476. float: right;
  477. }
  478. /* Sub-object for special buttons
  479. ========================================================================== */
  480. [data-mode='split'] .uk-markdown-button-markdown,
  481. [data-mode='split'] .uk-markdown-button-preview {
  482. display: none;
  483. }
  484. /* Sub-object `uk-markdownarea-content`
  485. ========================================================================== */
  486. .uk-markdownarea-content {
  487. border-left: 1px solid #dddddd;
  488. border-right: 1px solid #dddddd;
  489. border-bottom: 1px solid #dddddd;
  490. background: #ffffff;
  491. }
  492. /*
  493. * Micro clearfix
  494. */
  495. .uk-markdownarea-content:before,
  496. .uk-markdownarea-content:after {
  497. content: " ";
  498. display: table;
  499. }
  500. .uk-markdownarea-content:after {
  501. clear: both;
  502. }
  503. /* Modifier `uk-markdownarea-fullscreen`
  504. ========================================================================== */
  505. .uk-markdownarea-fullscreen {
  506. position: fixed;
  507. top: 0;
  508. left: 0;
  509. right: 0;
  510. bottom: 0;
  511. z-index: 990;
  512. }
  513. .uk-markdownarea-fullscreen .uk-markdownarea-content {
  514. position: absolute;
  515. top: 40px;
  516. left: 0;
  517. right: 0;
  518. bottom: 0;
  519. }
  520. .uk-markdownarea-fullscreen .uk-icon-expand:before {
  521. content: "\f066";
  522. }
  523. /* Sub-objects `uk-markdownarea-code` and `uk-markdownarea-preview`
  524. ========================================================================== */
  525. .uk-markdownarea-code,
  526. .uk-markdownarea-preview {
  527. -moz-box-sizing: border-box;
  528. box-sizing: border-box;
  529. }
  530. .uk-markdownarea-preview {
  531. padding: 20px;
  532. overflow-y: scroll;
  533. }
  534. /*
  535. * Tab view
  536. */
  537. [data-mode='tab'][data-active-tab='code'] .uk-markdownarea-preview,
  538. [data-mode='tab'][data-active-tab='preview'] .uk-markdownarea-code {
  539. display: none;
  540. }
  541. /*
  542. * Split view
  543. */
  544. [data-mode='split'] .uk-markdownarea-code,
  545. [data-mode='split'] .uk-markdownarea-preview {
  546. float: left;
  547. width: 50%;
  548. }
  549. [data-mode='split'] .uk-markdownarea-code {
  550. border-right: 1px solid #eeeeee;
  551. }
  552. /* CodeMirror modifications
  553. ========================================================================== */
  554. .uk-markdownarea .CodeMirror {
  555. padding: 10px;
  556. -moz-box-sizing: border-box;
  557. box-sizing: border-box;
  558. }
  559. /* ========================================================================
  560. Component: Notify
  561. ========================================================================== */
  562. /*
  563. * Message container for positioning
  564. */
  565. .uk-notify {
  566. position: fixed;
  567. top: 10px;
  568. left: 10px;
  569. z-index: 980;
  570. -moz-box-sizing: border-box;
  571. box-sizing: border-box;
  572. width: 350px;
  573. }
  574. /* Position modifiers
  575. ========================================================================== */
  576. .uk-notify-top-right,
  577. .uk-notify-bottom-right {
  578. left: auto;
  579. right: 10px;
  580. }
  581. .uk-notify-top-center,
  582. .uk-notify-bottom-center {
  583. left: 50%;
  584. margin-left: -175px;
  585. }
  586. .uk-notify-bottom-left,
  587. .uk-notify-bottom-right,
  588. .uk-notify-bottom-center {
  589. top: auto;
  590. bottom: 10px;
  591. }
  592. /* Responsiveness
  593. ========================================================================== */
  594. /* Phones portrait and smaller */
  595. @media (max-width: 479px) {
  596. /*
  597. * Fit in small screen
  598. */
  599. .uk-notify {
  600. left: 10px;
  601. right: 10px;
  602. width: auto;
  603. margin: 0;
  604. }
  605. }
  606. /* Sub-object: `uk-notify-message`
  607. ========================================================================== */
  608. .uk-notify-message {
  609. position: relative;
  610. margin-bottom: 10px;
  611. padding: 15px;
  612. background: #444444;
  613. color: #ffffff;
  614. font-size: 16px;
  615. line-height: 22px;
  616. cursor: pointer;
  617. }
  618. /* Close in notify
  619. ========================================================================== */
  620. .uk-notify-message > .uk-close {
  621. visibility: hidden;
  622. float: right;
  623. }
  624. .uk-notify-message:hover > .uk-close {
  625. visibility: visible;
  626. }
  627. /* Modifier: `uk-alert-info`
  628. ========================================================================== */
  629. .uk-notify-message-primary {
  630. background: #ebf7fd;
  631. color: #2d7091;
  632. }
  633. /* Modifier: `uk-alert-success`
  634. ========================================================================== */
  635. .uk-notify-message-success {
  636. background: #f2fae3;
  637. color: #659f13;
  638. }
  639. /* Modifier: `uk-notify-message-warning`
  640. ========================================================================== */
  641. .uk-notify-message-warning {
  642. background: #fffceb;
  643. color: #e28327;
  644. }
  645. /* Modifier: `uk-notify-message-danger`
  646. ========================================================================== */
  647. .uk-notify-message-danger {
  648. background: #fff1f0;
  649. color: #d85030;
  650. }
  651. /* ========================================================================
  652. Component: Search
  653. ========================================================================== */
  654. /*
  655. * 1. Create position context for dropdowns
  656. * 2. Needed for `form` element
  657. */
  658. .uk-search {
  659. display: inline-block;
  660. /* 1 */
  661. position: relative;
  662. /* 2 */
  663. margin: 0;
  664. }
  665. /*
  666. * Icon
  667. */
  668. .uk-search:before {
  669. content: "\f002";
  670. position: absolute;
  671. top: 0;
  672. left: 0;
  673. width: 30px;
  674. line-height: 30px;
  675. text-align: center;
  676. font-family: FontAwesome;
  677. font-size: 14px;
  678. color: rgba(0, 0, 0, 0.2);
  679. }
  680. /* Sub-object `uk-search-field`
  681. ========================================================================== */
  682. /*
  683. * 1. Needed to reset iOS `input[type="search"]` appearance
  684. */
  685. .uk-search-field {
  686. width: 120px;
  687. height: 30px;
  688. padding: 0 30px;
  689. border: 1px solid rgba(0, 0, 0, 0);
  690. background: rgba(0, 0, 0, 0);
  691. color: #444444;
  692. -webkit-transition: all linear 0.2s;
  693. transition: all linear 0.2s;
  694. /* 1 */
  695. border-radius: 0;
  696. }
  697. /*
  698. * Needed to reset iOS `input[type="search"]` appearance
  699. * Higher specificity to override appearance set by normalize.less
  700. */
  701. input.uk-search-field {
  702. -webkit-appearance: none;
  703. }
  704. /* Placeholder */
  705. .uk-search-field:-ms-input-placeholder {
  706. color: #999999;
  707. }
  708. .uk-search-field::-moz-placeholder {
  709. color: #999999;
  710. }
  711. .uk-search-field::-webkit-input-placeholder {
  712. color: #999999;
  713. }
  714. /* Removes cancel button in IE10 */
  715. .uk-search-field::-ms-clear {
  716. display: none;
  717. }
  718. /* Focus */
  719. .uk-search-field:focus {
  720. outline: 0;
  721. }
  722. /* Focus + active */
  723. .uk-search-field:focus,
  724. .uk-active .uk-search-field {
  725. width: 180px;
  726. }
  727. /* Sub-object `uk-search-close`
  728. ========================================================================== */
  729. /*
  730. * 1. Required for `button` elements
  731. * 2. Needed for Safari
  732. */
  733. .uk-search-close {
  734. display: none;
  735. position: absolute;
  736. top: 0;
  737. right: 0;
  738. width: 30px;
  739. line-height: 30px;
  740. text-align: center;
  741. font-size: 14px;
  742. color: rgba(0, 0, 0, 0.2);
  743. /* 1. */
  744. padding: 0;
  745. border: 0;
  746. -webkit-appearance: none;
  747. /* 2. */
  748. background: transparent;
  749. }
  750. .uk-loading > .uk-search-close,
  751. .uk-active > .uk-search-close {
  752. display: block;
  753. }
  754. /*
  755. * Icon
  756. */
  757. .uk-search-close:after {
  758. display: block;
  759. content: "\f00d";
  760. font-family: FontAwesome;
  761. }
  762. /* Loading icon */
  763. .uk-loading > .uk-search-close:after {
  764. content: "\f110";
  765. -webkit-animation: uk-spin 2s infinite linear;
  766. animation: uk-spin 2s infinite linear;
  767. }
  768. /* Dropdown modifier: `uk-dropdown-search`
  769. ========================================================================== */
  770. .uk-dropdown-search {
  771. width: 300px;
  772. margin-top: 0;
  773. background: #f5f5f5;
  774. color: #444444;
  775. }
  776. .uk-open > .uk-dropdown-search {
  777. -webkit-animation: uk-slide-top-fixed 0.2s ease-in-out;
  778. animation: uk-slide-top-fixed 0.2s ease-in-out;
  779. }
  780. /*
  781. * Dependency `uk-navbar-flip`
  782. */
  783. .uk-navbar-flip .uk-dropdown-search {
  784. margin-top: 5px;
  785. margin-right: -15px;
  786. }
  787. /* Nav modifier `uk-nav-search`
  788. ========================================================================== */
  789. /*
  790. * Items
  791. */
  792. .uk-nav-search > li > a {
  793. color: #444444;
  794. }
  795. /*
  796. * Active
  797. * 1. Remove default focus style
  798. */
  799. .uk-nav-search > li.uk-active > a {
  800. background: #00a8e6;
  801. color: #ffffff;
  802. /* 1 */
  803. outline: none;
  804. }
  805. /*
  806. * Sub-object: `uk-nav-header`
  807. */
  808. .uk-nav-search .uk-nav-header {
  809. color: #999999;
  810. }
  811. /*
  812. * Sub-object: `uk-nav-divider`
  813. */
  814. .uk-nav-search .uk-nav-divider {
  815. border-top: 1px solid #dddddd;
  816. }
  817. /*
  818. * Nested items
  819. */
  820. .uk-nav-search ul a {
  821. color: #0077dd;
  822. }
  823. .uk-nav-search ul a:hover {
  824. color: #005599;
  825. }
  826. /* Search in offcanvas
  827. ========================================================================== */
  828. .uk-offcanvas .uk-search {
  829. display: block;
  830. margin: 20px 15px;
  831. }
  832. .uk-offcanvas .uk-search:before {
  833. color: #777777;
  834. }
  835. .uk-offcanvas .uk-search-field {
  836. width: 100%;
  837. border-color: rgba(0, 0, 0, 0);
  838. background: #1a1a1a;
  839. color: #cccccc;
  840. }
  841. .uk-offcanvas .uk-search-field:-ms-input-placeholder {
  842. color: #777777;
  843. }
  844. .uk-offcanvas .uk-search-field::-moz-placeholder {
  845. color: #777777;
  846. }
  847. .uk-offcanvas .uk-search-field::-webkit-input-placeholder {
  848. color: #777777;
  849. }
  850. /* ========================================================================
  851. Component: Sortable
  852. ========================================================================== */
  853. .uk-sortable {
  854. padding: 0;
  855. list-style: none;
  856. }
  857. /* Sub-object `uk-sortable-list`
  858. ========================================================================== */
  859. .uk-sortable-list {
  860. margin: 0;
  861. padding-left: 40px;
  862. list-style: none;
  863. }
  864. /* Sub-modifier `uk-sortable-list-dragged`
  865. ========================================================================== */
  866. .uk-sortable-list-dragged {
  867. position: absolute;
  868. z-index: 1050;
  869. padding-left: 0;
  870. pointer-events: none;
  871. }
  872. /* Sub-object `uk-sortable-item`
  873. ========================================================================== */
  874. .uk-sortable-item {
  875. margin-bottom: 10px;
  876. padding: 5px;
  877. background: #f5f5f5;
  878. }
  879. /* Sub-object `uk-sortable-placeholder`
  880. * The placeholder which marks the drop area
  881. ========================================================================== */
  882. .uk-sortable-placeholder {
  883. -moz-box-sizing: border-box;
  884. box-sizing: border-box;
  885. margin-bottom: 10px;
  886. border: 1px dashed #dddddd;
  887. }
  888. /* Sub-object `uk-sortable-empty`
  889. * The style of an empty list
  890. ========================================================================== */
  891. .uk-sortable-empty {
  892. min-height: 40px;
  893. }
  894. /* Sub-object `uk-sortable-handle`
  895. ========================================================================== */
  896. .uk-sortable-handle {
  897. display: inline-block;
  898. font-size: 18px;
  899. color: #dddddd;
  900. }
  901. /* Hover */
  902. .uk-sortable-handle:hover {
  903. cursor: move;
  904. }
  905. /* Icon */
  906. .uk-sortable-handle:after {
  907. content: "\f0c9";
  908. font-family: FontAwesome;
  909. }
  910. /* Sub-object `uk-sortable-moving`
  911. ========================================================================== */
  912. .uk-sortable-moving,
  913. .uk-sortable-moving * {
  914. cursor: move;
  915. }
  916. /* Sub-object `[data-action='toggle']`
  917. ========================================================================== */
  918. /* Hidden by default */
  919. [data-sortable-action='toggle'] {
  920. display: inline-block;
  921. color: #999999;
  922. visibility: hidden;
  923. }
  924. /* Hover */
  925. [data-sortable-action='toggle']:hover {
  926. color: #444444;
  927. cursor: pointer;
  928. }
  929. /* Icon */
  930. [data-sortable-action='toggle']:after {
  931. content: "\f147";
  932. font-family: FontAwesome;
  933. }
  934. /*
  935. * Show if nested
  936. */
  937. .uk-parent > .uk-sortable-item [data-sortable-action='toggle'] {
  938. visibility: visible;
  939. }
  940. /*
  941. * Collapsed
  942. */
  943. .uk-collapsed > .uk-sortable-item [data-sortable-action='toggle']:after {
  944. content: "\f196";
  945. }
  946. .uk-collapsed .uk-sortable-list {
  947. display: none;
  948. }
  949. /* ========================================================================
  950. Component: Sticky
  951. ========================================================================== */
  952. .uk-sticky {
  953. z-index: 980;
  954. }
  955. /* ========================================================================
  956. Component: Upload
  957. ========================================================================== */
  958. /*
  959. * Create a box-shadow when dragging a file over the upload area
  960. */
  961. .uk-dragover {
  962. box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
  963. }