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.

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