You are here

Home » API reference » UIkit Components 7.3

uikit-views-preview.css in UIkit Components 7.3

Same filename and directory in other branches
  1. 7.2 uikit_views/css/uikit-views-preview.css

UIkit Views styles for live views previews.

File

uikit_views/css/uikit-views-preview.css
View source 
  1. /**

  2.  * @file

  3.  * UIkit Views styles for live views previews.

  4.  */

  5. 

  6. /**

  7.  * UIkit List component.

  8.  */

  9. #views-live-preview .preview-section .uk-list {

  10.   padding: 0;

  11.   list-style: none

  12. }

  13. #views-live-preview .preview-section .uk-list>li::before,

  14. #views-live-preview .preview-section .uk-list>li::after {

  15.   content: "";

  16.   display: table

  17. }

  18. #views-live-preview .preview-section .uk-list>li::after {

  19.   clear: both

  20. }

  21. #views-live-preview .preview-section .uk-list>li>:last-child {

  22.   margin-bottom: 0

  23. }

  24. #views-live-preview .preview-section .uk-list ul {

  25.   margin: 0;

  26.   padding-left: 30px;

  27.   list-style: none

  28. }

  29. #views-live-preview .preview-section .uk-list>li:nth-child(n+2),

  30. #views-live-preview .preview-section .uk-list>li>ul {

  31.   margin-top: 10px

  32. }

  33. #views-live-preview .preview-section .uk-list-divider>li:nth-child(n+2) {

  34.   margin-top: 10px;

  35.   padding-top: 10px;

  36.   border-top: 1px solid #e5e5e5

  37. }

  38. #views-live-preview .preview-section .uk-list-striped>li {

  39.   padding: 10px 10px

  40. }

  41. #views-live-preview .preview-section .uk-list-striped>li:nth-of-type(odd) {

  42.   border-top: 1px solid #e5e5e5;

  43.   border-bottom: 1px solid #e5e5e5

  44. }

  45. #views-live-preview .preview-section .uk-list-striped>li:nth-of-type(odd) {

  46.   background: #f8f8f8

  47. }

  48. #views-live-preview .preview-section .uk-list-striped>li:nth-child(n+2) {

  49.   margin-top: 0

  50. }

  51. #views-live-preview .preview-section .uk-list-bullet>li {

  52.   position: relative;

  53.   padding-left: calc(1.5em + 10px)

  54. }

  55. #views-live-preview .preview-section .uk-list-bullet>li::before {

  56.   content: "";

  57.   position: absolute;

  58.   top: 0;

  59.   left: 0;

  60.   width: 1.5em;

  61.   height: 1.5em;

  62.   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E");

  63.   background-repeat: no-repeat;

  64.   background-position: 50% 50%;

  65.   float: left

  66. }

  67. #views-live-preview .preview-section .uk-list-large>li:nth-child(n+2),

  68. #views-live-preview .preview-section .uk-list-large>li>ul {

  69.   margin-top: 20px

  70. }

  71. #views-live-preview .preview-section .uk-list-large.uk-list-divider>li:nth-child(n+2) {

  72.   margin-top: 20px;

  73.   padding-top: 20px

  74. }

  75. #views-live-preview .preview-section .uk-list-large.uk-list-striped>li {

  76.   padding: 20px 10px

  77. }

  78. #views-live-preview .preview-section .uk-list-large.uk-list-striped>li:nth-of-type(odd) {

  79.   border-top: 1px solid #e5e5e5;

  80.   border-bottom: 1px solid #e5e5e5

  81. }

  82. #views-live-preview .preview-section .uk-list-large.uk-list-striped>li:nth-child(n+2) {

  83.   margin-top: 0

  84. }

  85. 

  86. /**

  87.  * UIkit Grid component.

  88.  */

  89. #views-live-preview .preview-section .uk-grid {

  90.   display: -ms-flexbox;

  91.   display: -webkit-flex;

  92.   display: flex;

  93.   -ms-flex-wrap: wrap;

  94.   -webkit-flex-wrap: wrap;

  95.   flex-wrap: wrap;

  96.   margin: 0;

  97.   padding: 0;

  98.   list-style: none

  99. }

  100. #views-live-preview .preview-section .uk-grid>* {

  101.   margin: 0

  102. }

  103. #views-live-preview .preview-section .uk-grid>*>:last-child {

  104.   margin-bottom: 0

  105. }

  106. #views-live-preview .preview-section .uk-grid {

  107.   margin-left: -30px

  108. }

  109. #views-live-preview .preview-section .uk-grid>* {

  110.   padding-left: 30px

  111. }

  112. #views-live-preview .preview-section .uk-grid+.uk-grid,

  113. #views-live-preview .preview-section .uk-grid>.uk-grid-margin,

  114. #views-live-preview .preview-section *+.uk-grid-margin {

  115.   margin-top: 30px

  116. }

  117. @media (min-width: 1200px) {

  118.   #views-live-preview .preview-section .uk-grid {

  119.     margin-left:-40px

  120.   }

  121.   #views-live-preview .preview-section .uk-grid>* {

  122.     padding-left: 40px

  123.   }

  124.   #views-live-preview .preview-section .uk-grid+.uk-grid,

  125.   #views-live-preview .preview-section .uk-grid>.uk-grid-margin,

  126.   #views-live-preview .preview-section *+.uk-grid-margin {

  127.     margin-top: 40px

  128.   }

  129. }

  130. #views-live-preview .preview-section .uk-grid-small {

  131.   margin-left: -15px

  132. }

  133. #views-live-preview .preview-section .uk-grid-small>* {

  134.   padding-left: 15px

  135. }

  136. #views-live-preview .preview-section .uk-grid+.uk-grid-small,

  137. #views-live-preview .preview-section .uk-grid-small>.uk-grid-margin,

  138. #views-live-preview .preview-section *+.uk-grid-margin-small {

  139.   margin-top: 15px

  140. }

  141. #views-live-preview .preview-section .uk-grid-medium {

  142.   margin-left: -30px

  143. }

  144. #views-live-preview .preview-section .uk-grid-medium>* {

  145.   padding-left: 30px

  146. }

  147. #views-live-preview .preview-section .uk-grid+.uk-grid-medium,

  148. #views-live-preview .preview-section .uk-grid-medium>.uk-grid-margin,

  149. #views-live-preview .preview-section *+.uk-grid-margin-medium {

  150.   margin-top: 30px

  151. }

  152. #views-live-preview .preview-section .uk-grid-large {

  153.   margin-left: -40px

  154. }

  155. #views-live-preview .preview-section .uk-grid-large>* {

  156.   padding-left: 40px

  157. }

  158. #views-live-preview .preview-section .uk-grid+.uk-grid-large,

  159. #views-live-preview .preview-section .uk-grid-large>.uk-grid-margin,

  160. #views-live-preview .preview-section *+.uk-grid-margin-large {

  161.   margin-top: 40px

  162. }

  163. @media (min-width: 1200px) {

  164.   #views-live-preview .preview-section .uk-grid-large {

  165.     margin-left:-70px

  166.   }

  167.   #views-live-preview .preview-section .uk-grid-large>* {

  168.     padding-left: 70px

  169.   }

  170.   #views-live-preview .preview-section .uk-grid+.uk-grid-large,

  171.   #views-live-preview .preview-section .uk-grid-large>.uk-grid-margin,

  172.   #views-live-preview .preview-section *+.uk-grid-margin-large {

  173.     margin-top: 70px

  174.   }

  175. }

  176. #views-live-preview .preview-section .uk-grid-collapse {

  177.   margin-left: 0

  178. }

  179. #views-live-preview .preview-section .uk-grid-collapse>* {

  180.   padding-left: 0

  181. }

  182. #views-live-preview .preview-section .uk-grid+.uk-grid-collapse,

  183. #views-live-preview .preview-section .uk-grid-collapse>.uk-grid-margin {

  184.   margin-top: 0

  185. }

  186. #views-live-preview .preview-section .uk-grid-divider>* {

  187.   position: relative

  188. }

  189. #views-live-preview .preview-section .uk-grid-divider>:not(.uk-first-column)::before {

  190.   content: "";

  191.   position: absolute;

  192.   top: 0;

  193.   bottom: 0;

  194.   border-left: 1px solid #e5e5e5

  195. }

  196. #views-live-preview .preview-section .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before {

  197.   content: "";

  198.   position: absolute;

  199.   left: 0;

  200.   right: 0;

  201.   border-top: 1px solid #e5e5e5

  202. }

  203. #views-live-preview .preview-section .uk-grid-divider {

  204.   margin-left: -60px

  205. }

  206. #views-live-preview .preview-section .uk-grid-divider>* {

  207.   padding-left: 60px

  208. }

  209. #views-live-preview .preview-section .uk-grid-divider>:not(.uk-first-column)::before {

  210.   left: 30px

  211. }

  212. #views-live-preview .preview-section .uk-grid-divider.uk-grid-stack>.uk-grid-margin {

  213.   margin-top: 60px

  214. }

  215. #views-live-preview .preview-section .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before {

  216.   top: -30px;

  217.   left: 60px

  218. }

  219. @media (min-width: 1200px) {

  220.   #views-live-preview .preview-section .uk-grid-divider {

  221.     margin-left:-80px

  222.   }

  223.   #views-live-preview .preview-section .uk-grid-divider>* {

  224.     padding-left: 80px

  225.   }

  226.   #views-live-preview .preview-section .uk-grid-divider>:not(.uk-first-column)::before {

  227.     left: 40px

  228.   }

  229.   #views-live-preview .preview-section .uk-grid-divider.uk-grid-stack>.uk-grid-margin {

  230.     margin-top: 80px

  231.   }

  232.   #views-live-preview .preview-section .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before {

  233.     top: -40px;

  234.     left: 80px

  235.   }

  236. }

  237. #views-live-preview .preview-section .uk-grid-divider.uk-grid-small {

  238.   margin-left: -30px

  239. }

  240. #views-live-preview .preview-section .uk-grid-divider.uk-grid-small>* {

  241.   padding-left: 30px

  242. }

  243. #views-live-preview .preview-section .uk-grid-divider.uk-grid-small>:not(.uk-first-column)::before {

  244.   left: 15px

  245. }

  246. #views-live-preview .preview-section .uk-grid-divider.uk-grid-small.uk-grid-stack>.uk-grid-margin {

  247.   margin-top: 30px

  248. }

  249. #views-live-preview .preview-section .uk-grid-divider.uk-grid-small.uk-grid-stack>.uk-grid-margin::before {

  250.   top: -15px;

  251.   left: 30px

  252. }

  253. #views-live-preview .preview-section .uk-grid-divider.uk-grid-medium {

  254.   margin-left: -60px

  255. }

  256. #views-live-preview .preview-section .uk-grid-divider.uk-grid-medium>* {

  257.   padding-left: 60px

  258. }

  259. #views-live-preview .preview-section .uk-grid-divider.uk-grid-medium>:not(.uk-first-column)::before {

  260.   left: 30px

  261. }

  262. #views-live-preview .preview-section .uk-grid-divider.uk-grid-medium.uk-grid-stack>.uk-grid-margin {

  263.   margin-top: 60px

  264. }

  265. #views-live-preview .preview-section .uk-grid-divider.uk-grid-medium.uk-grid-stack>.uk-grid-margin::before {

  266.   top: -30px;

  267.   left: 60px

  268. }

  269. #views-live-preview .preview-section .uk-grid-divider.uk-grid-large {

  270.   margin-left: -80px

  271. }

  272. #views-live-preview .preview-section .uk-grid-divider.uk-grid-large>* {

  273.   padding-left: 80px

  274. }

  275. #views-live-preview .preview-section .uk-grid-divider.uk-grid-large>:not(.uk-first-column)::before {

  276.   left: 40px

  277. }

  278. #views-live-preview .preview-section .uk-grid-divider.uk-grid-large.uk-grid-stack>.uk-grid-margin {

  279.   margin-top: 80px

  280. }

  281. #views-live-preview .preview-section .uk-grid-divider.uk-grid-large.uk-grid-stack>.uk-grid-margin::before {

  282.   top: -40px;

  283.   left: 80px

  284. }

  285. @media (min-width: 1200px) {

  286.   #views-live-preview .preview-section .uk-grid-divider.uk-grid-large {

  287.     margin-left:-140px

  288.   }

  289.   #views-live-preview .preview-section .uk-grid-divider.uk-grid-large>* {

  290.     padding-left: 140px

  291.   }

  292.   #views-live-preview .preview-section .uk-grid-divider.uk-grid-large>:not(.uk-first-column)::before {

  293.     left: 70px

  294.   }

  295.   #views-live-preview .preview-section .uk-grid-divider.uk-grid-large.uk-grid-stack>.uk-grid-margin {

  296.     margin-top: 140px

  297.   }

  298.   #views-live-preview .preview-section .uk-grid-divider.uk-grid-large.uk-grid-stack>.uk-grid-margin::before {

  299.     top: -70px;

  300.     left: 140px

  301.   }

  302. }

  303. #views-live-preview .preview-section [class*='uk-child-width']>* {

  304.   box-sizing: border-box;

  305.   width: 100%

  306. }

  307. #views-live-preview .preview-section .uk-child-width-1-2>* {

  308.   width: 50%

  309. }

  310. #views-live-preview .preview-section .uk-child-width-1-3>* {

  311.   width: calc(100% * 1 / 3.001)

  312. }

  313. #views-live-preview .preview-section .uk-child-width-1-4>* {

  314.   width: 25%

  315. }

  316. #views-live-preview .preview-section .uk-child-width-1-5>* {

  317.   width: 20%

  318. }

  319. #views-live-preview .preview-section .uk-child-width-1-6>* {

  320.   width: calc(100% * 1 / 6.001)

  321. }

  322. #views-live-preview .preview-section .uk-child-width-auto>* {

  323.   width: auto

  324. }

  325. #views-live-preview .preview-section .uk-child-width-expand>* {

  326.   width: 1px

  327. }

  328. #views-live-preview .preview-section .uk-child-width-expand>:not([class*='uk-width']) {

  329.   -ms-flex: 1;

  330.   -webkit-flex: 1;

  331.   flex: 1;

  332.   min-width: 0;

  333.   flex-basis: 1px

  334. }

  335. @media (min-width: 640px) {

  336.   #views-live-preview .preview-section .uk-child-width-1-1\@s>* {

  337.     width:100%

  338.   }

  339.   #views-live-preview .preview-section .uk-child-width-1-2\@s>* {

  340.     width: 50%

  341.   }

  342.   #views-live-preview .preview-section .uk-child-width-1-3\@s>* {

  343.     width: calc(100% * 1 / 3.001)

  344.   }

  345.   #views-live-preview .preview-section .uk-child-width-1-4\@s>* {

  346.     width: 25%

  347.   }

  348.   #views-live-preview .preview-section .uk-child-width-1-5\@s>* {

  349.     width: 20%

  350.   }

  351.   #views-live-preview .preview-section .uk-child-width-1-6\@s>* {

  352.     width: calc(100% * 1 / 6.001)

  353.   }

  354.   #views-live-preview .preview-section .uk-child-width-auto\@s>* {

  355.     width: auto

  356.   }

  357.   #views-live-preview .preview-section .uk-child-width-expand\@s>* {

  358.     width: 1px

  359.   }

  360.   #views-live-preview .preview-section .uk-child-width-expand\@s>:not([class*='uk-width']) {

  361.     -ms-flex: 1;

  362.     -webkit-flex: 1;

  363.     flex: 1;

  364.     min-width: 0;

  365.     flex-basis: 1px

  366.   }

  367. }

  368. @media (min-width: 960px) {

  369.   #views-live-preview .preview-section .uk-child-width-1-1\@m>* {

  370.     width:100%

  371.   }

  372.   #views-live-preview .preview-section .uk-child-width-1-2\@m>* {

  373.     width: 50%

  374.   }

  375.   #views-live-preview .preview-section .uk-child-width-1-3\@m>* {

  376.     width: calc(100% * 1 / 3.001)

  377.   }

  378.   #views-live-preview .preview-section .uk-child-width-1-4\@m>* {

  379.     width: 25%

  380.   }

  381.   #views-live-preview .preview-section .uk-child-width-1-5\@m>* {

  382.     width: 20%

  383.   }

  384.   #views-live-preview .preview-section .uk-child-width-1-6\@m>* {

  385.     width: calc(100% * 1 / 6.001)

  386.   }

  387.   #views-live-preview .preview-section .uk-child-width-auto\@m>* {

  388.     width: auto

  389.   }

  390.   #views-live-preview .preview-section .uk-child-width-expand\@m>* {

  391.     width: 1px

  392.   }

  393.   #views-live-preview .preview-section .uk-child-width-expand\@m>:not([class*='uk-width']) {

  394.     -ms-flex: 1;

  395.     -webkit-flex: 1;

  396.     flex: 1;

  397.     min-width: 0;

  398.     flex-basis: 1px

  399.   }

  400. }

  401. @media (min-width: 1200px) {

  402.   #views-live-preview .preview-section .uk-child-width-1-1\@l>* {

  403.     width:100%

  404.   }

  405.   #views-live-preview .preview-section .uk-child-width-1-2\@l>* {

  406.     width: 50%

  407.   }

  408.   #views-live-preview .preview-section .uk-child-width-1-3\@l>* {

  409.     width: calc(100% * 1 / 3.001)

  410.   }

  411.   #views-live-preview .preview-section .uk-child-width-1-4\@l>* {

  412.     width: 25%

  413.   }

  414.   #views-live-preview .preview-section .uk-child-width-1-5\@l>* {

  415.     width: 20%

  416.   }

  417.   #views-live-preview .preview-section .uk-child-width-1-6\@l>* {

  418.     width: calc(100% * 1 / 6.001)

  419.   }

  420.   #views-live-preview .preview-section .uk-child-width-auto\@l>* {

  421.     width: auto

  422.   }

  423.   #views-live-preview .preview-section .uk-child-width-expand\@l>* {

  424.     width: 1px

  425.   }

  426.   #views-live-preview .preview-section .uk-child-width-expand\@l>:not([class*='uk-width']) {

  427.     -ms-flex: 1;

  428.     -webkit-flex: 1;

  429.     flex: 1;

  430.     min-width: 0;

  431.     flex-basis: 1px

  432.   }

  433. }

  434. @media (min-width: 1600px) {

  435.   #views-live-preview .preview-section .uk-child-width-1-1\@xl>* {

  436.     width:100%

  437.   }

  438.   #views-live-preview .preview-section .uk-child-width-1-2\@xl>* {

  439.     width: 50%

  440.   }

  441.   #views-live-preview .preview-section .uk-child-width-1-3\@xl>* {

  442.     width: calc(100% * 1 / 3.001)

  443.   }

  444.   #views-live-preview .preview-section .uk-child-width-1-4\@xl>* {

  445.     width: 25%

  446.   }

  447.   #views-live-preview .preview-section .uk-child-width-1-5\@xl>* {

  448.     width: 20%

  449.   }

  450.   #views-live-preview .preview-section .uk-child-width-1-6\@xl>* {

  451.     width: calc(100% * 1 / 6.001)

  452.   }

  453.   #views-live-preview .preview-section .uk-child-width-auto\@xl>* {

  454.     width: auto

  455.   }

  456.   #views-live-preview .preview-section .uk-child-width-expand\@xl>* {

  457.     width: 1px

  458.   }

  459.   #views-live-preview .preview-section .uk-child-width-expand\@xl>:not([class*='uk-width']) {

  460.     -ms-flex: 1;

  461.     -webkit-flex: 1;

  462.     flex: 1;

  463.     min-width: 0;

  464.     flex-basis: 1px

  465.   }

  466. }

  467. 

  468. /**

  469.  * UIkit Table component.

  470.  */

  471. #views-live-preview .preview-section table {

  472.   font-size: 15px;

  473.   margin: 0;

  474.   border: 0;

  475. }

  476. #views-live-preview .preview-section table th {

  477.   text-transform: none;

  478.   background: initial;

  479.   font-weight: normal;

  480.   border: 0;

  481.   padding: 0;

  482. }

  483. #views-live-preview .preview-section tr.even,

  484. #views-live-preview .preview-section tr.odd {

  485.   border: 0;

  486.   background: initial;

  487. }

  488. #views-live-preview .preview-section tr.odd {

  489.   background: initial;

  490. }

  491. #views-live-preview .preview-section .uk-table {

  492.   border-collapse: collapse;

  493.   border-spacing: 0;

  494.   width: 100%;

  495.   margin-bottom: 20px

  496. }

  497. #views-live-preview .preview-section *+.uk-table {

  498.   margin-top: 20px

  499. }

  500. #views-live-preview .preview-section .uk-table th {

  501.   padding: 16px 12px;

  502.   text-align: left;

  503.   vertical-align: bottom;

  504.   font-size: .875rem;

  505.   font-weight: 400;

  506.   color: #999;

  507.   text-transform: uppercase;

  508. }

  509. #views-live-preview .preview-section .uk-table td {

  510.   padding: 16px 12px;

  511.   vertical-align: top

  512. }

  513. #views-live-preview .preview-section .uk-table td>:last-child {

  514.   margin-bottom: 0

  515. }

  516. #views-live-preview .preview-section .uk-table tfoot {

  517.   font-size: 14px

  518. }

  519. #views-live-preview .preview-section .uk-table caption {

  520.   font-size: 14px;

  521.   text-align: left;

  522.   color: #999

  523. }

  524. #views-live-preview .preview-section .uk-table>tr.uk-active,

  525. #views-live-preview .preview-section .uk-table tbody tr.uk-active {

  526.   background: #ffd

  527. }

  528. #views-live-preview .preview-section .uk-table-middle,

  529. #views-live-preview .preview-section .uk-table-middle td {

  530.   vertical-align: middle !important

  531. }

  532. #views-live-preview .preview-section .uk-table-divider>tr:not(:first-child),

  533. #views-live-preview .preview-section .uk-table-divider>:not(:first-child)>tr,

  534. #views-live-preview .preview-section .uk-table-divider>:first-child>tr:not(:first-child) {

  535.   border-top: 1px solid #e5e5e5

  536. }

  537. #views-live-preview .preview-section .uk-table-striped>tr:nth-of-type(odd),

  538. #views-live-preview .preview-section .uk-table-striped tbody tr:nth-of-type(odd) {

  539.   background: #f8f8f8;

  540.   border-top: 1px solid #e5e5e5;

  541.   border-bottom: 1px solid #e5e5e5

  542. }

  543. #views-live-preview .preview-section .uk-table-hover>tr:hover,

  544. #views-live-preview .preview-section .uk-table-hover tbody tr:hover {

  545.   background: #ffd

  546. }

  547. #views-live-preview .preview-section .uk-table-small th,

  548. #views-live-preview .preview-section .uk-table-small td {

  549.   padding: 10px 12px

  550. }

  551. #views-live-preview .preview-section .uk-table-justify th:first-child,

  552. #views-live-preview .preview-section .uk-table-justify td:first-child {

  553.   padding-left: 0

  554. }

  555. #views-live-preview .preview-section .uk-table-justify th:last-child,

  556. #views-live-preview .preview-section .uk-table-justify td:last-child {

  557.   padding-right: 0

  558. }

  559. #views-live-preview .preview-section .uk-table-shrink {

  560.   width: 1px

  561. }

  562. #views-live-preview .preview-section .uk-table-expand {

  563.   min-width: 300px

  564. }

  565. #views-live-preview .preview-section .uk-table-link {

  566.   padding: 0 !important

  567. }

  568. #views-live-preview .preview-section .uk-table-link>a {

  569.   display: block;

  570.   padding: 16px 12px

  571. }

  572. #views-live-preview .preview-section .uk-table-small .uk-table-link>a {

  573.   padding: 10px 12px

  574. }

  575. @media (max-width: 959px) {

  576.   #views-live-preview .preview-section .uk-table-responsive,

  577.   #views-live-preview .preview-section .uk-table-responsive tbody,

  578.   #views-live-preview .preview-section .uk-table-responsive th,

  579.   #views-live-preview .preview-section .uk-table-responsive td,

  580.   #views-live-preview .preview-section .uk-table-responsive tr {

  581.     display:block

  582.   }

  583.   #views-live-preview .preview-section .uk-table-responsive thead {

  584.     display: none

  585.   }

  586.   #views-live-preview .preview-section .uk-table-responsive th,

  587.   #views-live-preview .preview-section .uk-table-responsive td {

  588.     width: auto !important;

  589.     max-width: none !important;

  590.     min-width: 0 !important;

  591.     overflow: visible !important;

  592.     white-space: normal !important

  593.   }

  594.   #views-live-preview .preview-section .uk-table-responsive th:not(:first-child):not(.uk-table-link),

  595.   #views-live-preview .preview-section .uk-table-responsive td:not(:first-child):not(.uk-table-link),

  596.   #views-live-preview .preview-section .uk-table-responsive .uk-table-link:not(:first-child)>a {

  597.     padding-top: 5px !important

  598.   }

  599.   #views-live-preview .preview-section .uk-table-responsive th:not(:last-child):not(.uk-table-link),

  600.   #views-live-preview .preview-section .uk-table-responsive td:not(:last-child):not(.uk-table-link),

  601.   #views-live-preview .preview-section .uk-table-responsive .uk-table-link:not(:last-child)>a {

  602.     padding-bottom: 5px !important

  603.   }

  604.   #views-live-preview .preview-section .uk-table-justify.uk-table-responsive th,

  605.   #views-live-preview .preview-section .uk-table-justify.uk-table-responsive td {

  606.     padding-left: 0;

  607.     padding-right: 0

  608.   }

  609. }

  610. #views-live-preview .preview-section .uk-table tbody tr {

  611.   -webkit-transition: background-color .1s linear;

  612.   transition: background-color .1s linear

  613. }

  614. #views-live-preview .preview-section .uk-overflow-auto {

  615.   overflow: auto;

  616.   -webkit-overflow-scrolling: touch

  617. }

  618. #views-live-preview .preview-section .uk-overflow-auto>:last-child {

  619.   margin-bottom: 0

  620. }