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.

1066 lines
25 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: #009dd8;
  281. color: #ffffff;
  282. /* 1 */
  283. outline: none;
  284. box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  285. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  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. background-origin: border-box;
  381. }
  382. /*
  383. * Sub-object: `uk-datepicker-table-muted`
  384. */
  385. a.uk-datepicker-table-muted {
  386. color: #999999;
  387. }
  388. /*
  389. * Hover
  390. * 1. Apply hover style also to focus state
  391. * 2. Remove default focus style
  392. */
  393. .uk-datepicker-table a:hover,
  394. .uk-datepicker-table a:focus {
  395. background-color: #fafafa;
  396. color: #444444;
  397. /* 2 */
  398. outline: none;
  399. border-color: rgba(0, 0, 0, 0.2);
  400. border-bottom-color: rgba(0, 0, 0, 0.3);
  401. text-shadow: 0 1px 0 #ffffff;
  402. }
  403. /* OnClick */
  404. .uk-datepicker-table a:active {
  405. background-color: #f5f5f5;
  406. color: #444444;
  407. border-color: rgba(0, 0, 0, 0.2);
  408. border-top-color: rgba(0, 0, 0, 0.3);
  409. background-image: none;
  410. box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  411. }
  412. /*
  413. * Active
  414. */
  415. .uk-datepicker-table a.uk-active {
  416. background: #009dd8;
  417. color: #ffffff;
  418. border: 1px solid rgba(0, 0, 0, 0.2);
  419. border-bottom-color: rgba(0, 0, 0, 0.4);
  420. background-origin: border-box;
  421. background-image: -webkit-linear-gradient(top, #00b4f5, #008dc5);
  422. background-image: linear-gradient(to bottom, #00b4f5, #008dc5);
  423. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  424. }
  425. /* ========================================================================
  426. Component: Markdownarea
  427. ========================================================================== */
  428. /* Sub-object `uk-markdownarea-navbar`
  429. ========================================================================== */
  430. .uk-markdownarea-navbar {
  431. background: #f7f7f7;
  432. border: 1px solid rgba(0, 0, 0, 0.1);
  433. border-bottom-color: rgba(0, 0, 0, 0.2);
  434. border-top-left-radius: 4px;
  435. border-top-right-radius: 4px;
  436. background-origin: border-box;
  437. background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
  438. background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
  439. }
  440. /*
  441. * Micro clearfix
  442. */
  443. .uk-markdownarea-navbar:before,
  444. .uk-markdownarea-navbar:after {
  445. content: " ";
  446. display: table;
  447. }
  448. .uk-markdownarea-navbar:after {
  449. clear: both;
  450. }
  451. /* Sub-object `uk-markdownarea-navbar-nav`
  452. ========================================================================== */
  453. .uk-markdownarea-navbar-nav {
  454. margin: 0;
  455. padding: 0;
  456. list-style: none;
  457. float: left;
  458. }
  459. .uk-markdownarea-navbar-nav > li {
  460. float: left;
  461. }
  462. /*
  463. * 1. Dimensions
  464. * 2. Style
  465. */
  466. .uk-markdownarea-navbar-nav > li > a {
  467. display: block;
  468. -moz-box-sizing: border-box;
  469. box-sizing: border-box;
  470. text-decoration: none;
  471. /* 1 */
  472. height: 41px;
  473. padding: 0 15px;
  474. line-height: 40px;
  475. /* 2 */
  476. color: #444444;
  477. font-size: 11px;
  478. cursor: pointer;
  479. margin-top: -1px;
  480. margin-left: -1px;
  481. border: 1px solid transparent;
  482. border-bottom-width: 0;
  483. text-shadow: 0 1px 0 #ffffff;
  484. }
  485. /*
  486. * Hover
  487. * 1. Apply hover style also to focus state
  488. * 2. Remove default focus style
  489. */
  490. .uk-markdownarea-navbar-nav > li:hover > a,
  491. .uk-markdownarea-navbar-nav > li > a:focus {
  492. background-color: transparent;
  493. color: #444444;
  494. outline: none;
  495. /* 2 */
  496. position: relative;
  497. z-index: 1;
  498. border-left-color: rgba(0, 0, 0, 0.1);
  499. border-right-color: rgba(0, 0, 0, 0.1);
  500. border-top-color: rgba(0, 0, 0, 0.1);
  501. box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  502. }
  503. /* OnClick */
  504. .uk-markdownarea-navbar-nav > li > a:active {
  505. background-color: #f5f5f5;
  506. color: #444444;
  507. border-left-color: rgba(0, 0, 0, 0.1);
  508. border-right-color: rgba(0, 0, 0, 0.1);
  509. border-top-color: rgba(0, 0, 0, 0.2);
  510. box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  511. }
  512. /* Active */
  513. .uk-markdownarea-navbar-nav > li.uk-active > a {
  514. background-color: #fafafa;
  515. color: #444444;
  516. border-left-color: rgba(0, 0, 0, 0.1);
  517. border-right-color: rgba(0, 0, 0, 0.1);
  518. border-top-color: rgba(0, 0, 0, 0.2);
  519. box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  520. }
  521. /* Sub-object: `uk-markdownarea-navbar-flip`
  522. ========================================================================== */
  523. .uk-markdownarea-navbar-flip {
  524. float: right;
  525. }
  526. /* Sub-object for special buttons
  527. ========================================================================== */
  528. [data-mode='split'] .uk-markdown-button-markdown,
  529. [data-mode='split'] .uk-markdown-button-preview {
  530. display: none;
  531. }
  532. /* Sub-object `uk-markdownarea-content`
  533. ========================================================================== */
  534. .uk-markdownarea-content {
  535. border-left: 1px solid #dddddd;
  536. border-right: 1px solid #dddddd;
  537. border-bottom: 1px solid #dddddd;
  538. background: #ffffff;
  539. border-bottom-left-radius: 4px;
  540. border-bottom-right-radius: 4px;
  541. }
  542. /*
  543. * Micro clearfix
  544. */
  545. .uk-markdownarea-content:before,
  546. .uk-markdownarea-content:after {
  547. content: " ";
  548. display: table;
  549. }
  550. .uk-markdownarea-content:after {
  551. clear: both;
  552. }
  553. /* Modifier `uk-markdownarea-fullscreen`
  554. ========================================================================== */
  555. .uk-markdownarea-fullscreen {
  556. position: fixed;
  557. top: 0;
  558. left: 0;
  559. right: 0;
  560. bottom: 0;
  561. z-index: 990;
  562. }
  563. .uk-markdownarea-fullscreen .uk-markdownarea-content {
  564. position: absolute;
  565. top: 41px;
  566. left: 0;
  567. right: 0;
  568. bottom: 0;
  569. }
  570. .uk-markdownarea-fullscreen .uk-icon-expand:before {
  571. content: "\f066";
  572. }
  573. /* Sub-objects `uk-markdownarea-code` and `uk-markdownarea-preview`
  574. ========================================================================== */
  575. .uk-markdownarea-code,
  576. .uk-markdownarea-preview {
  577. -moz-box-sizing: border-box;
  578. box-sizing: border-box;
  579. }
  580. .uk-markdownarea-preview {
  581. padding: 20px;
  582. overflow-y: scroll;
  583. }
  584. /*
  585. * Tab view
  586. */
  587. [data-mode='tab'][data-active-tab='code'] .uk-markdownarea-preview,
  588. [data-mode='tab'][data-active-tab='preview'] .uk-markdownarea-code {
  589. display: none;
  590. }
  591. /*
  592. * Split view
  593. */
  594. [data-mode='split'] .uk-markdownarea-code,
  595. [data-mode='split'] .uk-markdownarea-preview {
  596. float: left;
  597. width: 50%;
  598. }
  599. [data-mode='split'] .uk-markdownarea-code {
  600. border-right: 1px solid #eeeeee;
  601. }
  602. /* CodeMirror modifications
  603. ========================================================================== */
  604. .uk-markdownarea .CodeMirror {
  605. padding: 10px;
  606. -moz-box-sizing: border-box;
  607. box-sizing: border-box;
  608. }
  609. /*
  610. * Apply same `border-radius` as `uk-markdownarea-navbar`
  611. */
  612. .uk-markdownarea-navbar-nav:first-child > li:first-child > a {
  613. border-top-left-radius: 4px;
  614. }
  615. /*
  616. * Sub-modifier `uk-markdownarea-navbar-flip`
  617. */
  618. /* Collapse border */
  619. .uk-markdownarea-navbar-flip .uk-markdownarea-navbar-nav > li > a {
  620. margin-left: 0;
  621. margin-right: -1px;
  622. }
  623. /* Apply same `border-radius` as `uk-markdownarea-navbar` */
  624. .uk-markdownarea-navbar-flip .uk-markdownarea-navbar-nav:first-child > li:first-child > a {
  625. border-top-left-radius: 0;
  626. }
  627. .uk-markdownarea-navbar-flip .uk-markdownarea-navbar-nav:last-child > li:last-child > a {
  628. border-top-right-radius: 4px;
  629. }
  630. /*
  631. * Sub-modifier `uk-markdownarea-fullscreen`
  632. */
  633. .uk-markdownarea-fullscreen .uk-markdownarea-navbar {
  634. border-top: none;
  635. border-left: none;
  636. border-right: none;
  637. border-radius: 0;
  638. }
  639. .uk-markdownarea-fullscreen .uk-markdownarea-content {
  640. border: none;
  641. border-radius: 0;
  642. }
  643. .uk-markdownarea-fullscreen .uk-markdownarea-navbar-nav > li > a {
  644. border-radius: 0 !important;
  645. }
  646. /* ========================================================================
  647. Component: Notify
  648. ========================================================================== */
  649. /*
  650. * Message container for positioning
  651. */
  652. .uk-notify {
  653. position: fixed;
  654. top: 10px;
  655. left: 10px;
  656. z-index: 980;
  657. -moz-box-sizing: border-box;
  658. box-sizing: border-box;
  659. width: 350px;
  660. }
  661. /* Position modifiers
  662. ========================================================================== */
  663. .uk-notify-top-right,
  664. .uk-notify-bottom-right {
  665. left: auto;
  666. right: 10px;
  667. }
  668. .uk-notify-top-center,
  669. .uk-notify-bottom-center {
  670. left: 50%;
  671. margin-left: -175px;
  672. }
  673. .uk-notify-bottom-left,
  674. .uk-notify-bottom-right,
  675. .uk-notify-bottom-center {
  676. top: auto;
  677. bottom: 10px;
  678. }
  679. /* Responsiveness
  680. ========================================================================== */
  681. /* Phones portrait and smaller */
  682. @media (max-width: 479px) {
  683. /*
  684. * Fit in small screen
  685. */
  686. .uk-notify {
  687. left: 10px;
  688. right: 10px;
  689. width: auto;
  690. margin: 0;
  691. }
  692. }
  693. /* Sub-object: `uk-notify-message`
  694. ========================================================================== */
  695. .uk-notify-message {
  696. position: relative;
  697. margin-bottom: 10px;
  698. padding: 15px;
  699. background: #444444;
  700. color: #ffffff;
  701. font-size: 16px;
  702. line-height: 22px;
  703. cursor: pointer;
  704. border: 1px solid #444444;
  705. border-radius: 4px;
  706. }
  707. /* Close in notify
  708. ========================================================================== */
  709. .uk-notify-message > .uk-close {
  710. visibility: hidden;
  711. float: right;
  712. }
  713. .uk-notify-message:hover > .uk-close {
  714. visibility: visible;
  715. }
  716. /* Modifier: `uk-alert-info`
  717. ========================================================================== */
  718. .uk-notify-message-primary {
  719. background: #ebf7fd;
  720. color: #2d7091;
  721. border-color: rgba(45, 112, 145, 0.3);
  722. }
  723. /* Modifier: `uk-alert-success`
  724. ========================================================================== */
  725. .uk-notify-message-success {
  726. background: #f2fae3;
  727. color: #659f13;
  728. border-color: rgba(101, 159, 19, 0.3);
  729. }
  730. /* Modifier: `uk-notify-message-warning`
  731. ========================================================================== */
  732. .uk-notify-message-warning {
  733. background: #fffceb;
  734. color: #e28327;
  735. border-color: rgba(226, 131, 39, 0.3);
  736. }
  737. /* Modifier: `uk-notify-message-danger`
  738. ========================================================================== */
  739. .uk-notify-message-danger {
  740. background: #fff1f0;
  741. color: #d85030;
  742. border-color: rgba(216, 80, 48, 0.3);
  743. }
  744. /* ========================================================================
  745. Component: Search
  746. ========================================================================== */
  747. /*
  748. * 1. Create position context for dropdowns
  749. * 2. Needed for `form` element
  750. */
  751. .uk-search {
  752. display: inline-block;
  753. /* 1 */
  754. position: relative;
  755. /* 2 */
  756. margin: 0;
  757. }
  758. /*
  759. * Icon
  760. */
  761. .uk-search:before {
  762. content: "\f002";
  763. position: absolute;
  764. top: 0;
  765. left: 0;
  766. width: 30px;
  767. line-height: 30px;
  768. text-align: center;
  769. font-family: FontAwesome;
  770. font-size: 14px;
  771. color: rgba(0, 0, 0, 0.2);
  772. }
  773. /* Sub-object `uk-search-field`
  774. ========================================================================== */
  775. /*
  776. * 1. Needed to reset iOS `input[type="search"]` appearance
  777. */
  778. .uk-search-field {
  779. width: 120px;
  780. height: 30px;
  781. padding: 0 30px;
  782. border: 1px solid rgba(0, 0, 0, 0);
  783. background: rgba(0, 0, 0, 0);
  784. color: #444444;
  785. -webkit-transition: all linear 0.2s;
  786. transition: all linear 0.2s;
  787. /* 1 */
  788. border-radius: 0;
  789. }
  790. /*
  791. * Needed to reset iOS `input[type="search"]` appearance
  792. * Higher specificity to override appearance set by normalize.less
  793. */
  794. input.uk-search-field {
  795. -webkit-appearance: none;
  796. }
  797. /* Placeholder */
  798. .uk-search-field:-ms-input-placeholder {
  799. color: #999999;
  800. }
  801. .uk-search-field::-moz-placeholder {
  802. color: #999999;
  803. }
  804. .uk-search-field::-webkit-input-placeholder {
  805. color: #999999;
  806. }
  807. /* Removes cancel button in IE10 */
  808. .uk-search-field::-ms-clear {
  809. display: none;
  810. }
  811. /* Focus */
  812. .uk-search-field:focus {
  813. outline: 0;
  814. }
  815. /* Focus + active */
  816. .uk-search-field:focus,
  817. .uk-active .uk-search-field {
  818. width: 180px;
  819. }
  820. /* Sub-object `uk-search-close`
  821. ========================================================================== */
  822. /*
  823. * 1. Required for `button` elements
  824. * 2. Needed for Safari
  825. */
  826. .uk-search-close {
  827. display: none;
  828. position: absolute;
  829. top: 0;
  830. right: 0;
  831. width: 30px;
  832. line-height: 30px;
  833. text-align: center;
  834. font-size: 14px;
  835. color: rgba(0, 0, 0, 0.2);
  836. /* 1. */
  837. padding: 0;
  838. border: 0;
  839. -webkit-appearance: none;
  840. /* 2. */
  841. background: transparent;
  842. }
  843. .uk-loading > .uk-search-close,
  844. .uk-active > .uk-search-close {
  845. display: block;
  846. }
  847. /*
  848. * Icon
  849. */
  850. .uk-search-close:after {
  851. display: block;
  852. content: "\f00d";
  853. font-family: FontAwesome;
  854. }
  855. /* Loading icon */
  856. .uk-loading > .uk-search-close:after {
  857. content: "\f110";
  858. -webkit-animation: uk-spin 2s infinite linear;
  859. animation: uk-spin 2s infinite linear;
  860. }
  861. /* Dropdown modifier: `uk-dropdown-search`
  862. ========================================================================== */
  863. .uk-dropdown-search {
  864. width: 300px;
  865. margin-top: 0;
  866. background: #ffffff;
  867. color: #444444;
  868. }
  869. .uk-open > .uk-dropdown-search {
  870. -webkit-animation: uk-slide-top-fixed 0.2s ease-in-out;
  871. animation: uk-slide-top-fixed 0.2s ease-in-out;
  872. }
  873. /*
  874. * Dependency `uk-navbar-flip`
  875. */
  876. .uk-navbar-flip .uk-dropdown-search {
  877. margin-top: 12px;
  878. margin-right: -16px;
  879. }
  880. /* Nav modifier `uk-nav-search`
  881. ========================================================================== */
  882. /*
  883. * Items
  884. */
  885. .uk-nav-search > li > a {
  886. color: #444444;
  887. }
  888. /*
  889. * Active
  890. * 1. Remove default focus style
  891. */
  892. .uk-nav-search > li.uk-active > a {
  893. background: #009dd8;
  894. color: #ffffff;
  895. /* 1 */
  896. outline: none;
  897. box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  898. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  899. }
  900. /*
  901. * Sub-object: `uk-nav-header`
  902. */
  903. .uk-nav-search .uk-nav-header {
  904. color: #999999;
  905. }
  906. /*
  907. * Sub-object: `uk-nav-divider`
  908. */
  909. .uk-nav-search .uk-nav-divider {
  910. border-top: 1px solid #dddddd;
  911. }
  912. /*
  913. * Nested items
  914. */
  915. .uk-nav-search ul a {
  916. color: #0077dd;
  917. }
  918. .uk-nav-search ul a:hover {
  919. color: #005599;
  920. }
  921. /* Search in offcanvas
  922. ========================================================================== */
  923. .uk-offcanvas .uk-search {
  924. display: block;
  925. margin: 20px 15px;
  926. }
  927. .uk-offcanvas .uk-search:before {
  928. color: #777777;
  929. }
  930. .uk-offcanvas .uk-search-field {
  931. width: 100%;
  932. border-color: rgba(0, 0, 0, 0);
  933. background: #1a1a1a;
  934. color: #cccccc;
  935. }
  936. .uk-offcanvas .uk-search-field:-ms-input-placeholder {
  937. color: #777777;
  938. }
  939. .uk-offcanvas .uk-search-field::-moz-placeholder {
  940. color: #777777;
  941. }
  942. .uk-offcanvas .uk-search-field::-webkit-input-placeholder {
  943. color: #777777;
  944. }
  945. /* ========================================================================
  946. Component: Sortable
  947. ========================================================================== */
  948. .uk-sortable {
  949. padding: 0;
  950. list-style: none;
  951. }
  952. /* Sub-object `uk-sortable-list`
  953. ========================================================================== */
  954. .uk-sortable-list {
  955. margin: 0;
  956. padding-left: 40px;
  957. list-style: none;
  958. }
  959. /* Sub-modifier `uk-sortable-list-dragged`
  960. ========================================================================== */
  961. .uk-sortable-list-dragged {
  962. position: absolute;
  963. z-index: 1050;
  964. padding-left: 0;
  965. pointer-events: none;
  966. }
  967. /* Sub-object `uk-sortable-item`
  968. ========================================================================== */
  969. .uk-sortable-item {
  970. margin-bottom: 10px;
  971. padding: 5px;
  972. background: #f7f7f7;
  973. border-radius: 4px;
  974. border: 1px solid rgba(0, 0, 0, 0.2);
  975. border-bottom-color: rgba(0, 0, 0, 0.3);
  976. background-origin: border-box;
  977. background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
  978. background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
  979. text-shadow: 0 1px 0 #ffffff;
  980. }
  981. /* Sub-object `uk-sortable-placeholder`
  982. * The placeholder which marks the drop area
  983. ========================================================================== */
  984. .uk-sortable-placeholder {
  985. -moz-box-sizing: border-box;
  986. box-sizing: border-box;
  987. margin-bottom: 10px;
  988. border: 1px dashed #dddddd;
  989. }
  990. /* Sub-object `uk-sortable-empty`
  991. * The style of an empty list
  992. ========================================================================== */
  993. .uk-sortable-empty {
  994. min-height: 40px;
  995. }
  996. /* Sub-object `uk-sortable-handle`
  997. ========================================================================== */
  998. .uk-sortable-handle {
  999. display: inline-block;
  1000. font-size: 18px;
  1001. color: #dddddd;
  1002. }
  1003. /* Hover */
  1004. .uk-sortable-handle:hover {
  1005. cursor: move;
  1006. }
  1007. /* Icon */
  1008. .uk-sortable-handle:after {
  1009. content: "\f0c9";
  1010. font-family: FontAwesome;
  1011. }
  1012. /* Sub-object `uk-sortable-moving`
  1013. ========================================================================== */
  1014. .uk-sortable-moving,
  1015. .uk-sortable-moving * {
  1016. cursor: move;
  1017. }
  1018. /* Sub-object `[data-action='toggle']`
  1019. ========================================================================== */
  1020. /* Hidden by default */
  1021. [data-sortable-action='toggle'] {
  1022. display: inline-block;
  1023. color: #999999;
  1024. visibility: hidden;
  1025. }
  1026. /* Hover */
  1027. [data-sortable-action='toggle']:hover {
  1028. color: #444444;
  1029. cursor: pointer;
  1030. }
  1031. /* Icon */
  1032. [data-sortable-action='toggle']:after {
  1033. content: "\f147";
  1034. font-family: FontAwesome;
  1035. }
  1036. /*
  1037. * Show if nested
  1038. */
  1039. .uk-parent > .uk-sortable-item [data-sortable-action='toggle'] {
  1040. visibility: visible;
  1041. }
  1042. /*
  1043. * Collapsed
  1044. */
  1045. .uk-collapsed > .uk-sortable-item [data-sortable-action='toggle']:after {
  1046. content: "\f196";
  1047. }
  1048. .uk-collapsed .uk-sortable-list {
  1049. display: none;
  1050. }
  1051. /* ========================================================================
  1052. Component: Sticky
  1053. ========================================================================== */
  1054. .uk-sticky {
  1055. z-index: 980;
  1056. }
  1057. /* ========================================================================
  1058. Component: Upload
  1059. ========================================================================== */
  1060. /*
  1061. * Create a box-shadow when dragging a file over the upload area
  1062. */
  1063. .uk-dragover {
  1064. box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
  1065. }