API tools faq
paste
Guest User

base-theme.less

a guest
Jul 4th, 2017
487
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.67 KB | None | 0 0
raw download clone embed print report
  1. @import "../../../node_modules/uikit/src/less/uikit.theme.less";
  2.  
  3. // IMPORTANT: Change links below and on line 350
  4. @font-face {
  5.     font-family: 'ProximaNova';
  6.     src: url('https://getuikit.com/fonts/ProximaNova-Light-webfont.eot');
  7.     src: url('https://getuikit.com/fonts/ProximaNova-Light-webfont.eot?#iefix') format('embedded-opentype'),
  8.          url('https://getuikit.com/fonts/ProximaNova-Light-webfont.woff') format('woff'),
  9.          url('https://getuikit.com/fonts/ProximaNova-Light-webfont.ttf') format('truetype'),
  10.          url('https://getuikit.com/fonts/ProximaNova-Light-webfont.svg#ProximaNovaLight') format('svg');
  11.     font-weight: 300;
  12.     font-style: normal;
  13. }
  14.  
  15. @font-face {
  16.     font-family: 'ProximaNova';
  17.     src: url('https://getuikit.com//fonts/ProximaNova-Light-webfont.eot');
  18.     src: url('https://getuikit.com//fonts/ProximaNova-Light-webfont.eot?#iefix') format('embedded-opentype'),
  19.          url('https://getuikit.com//fonts/ProximaNova-Light-webfont.woff') format('woff'),
  20.          url('https://getuikit.com//fonts/ProximaNova-Light-webfont.ttf') format('truetype'),
  21.          url('https://getuikit.com//fonts/ProximaNova-Light-webfont.svg#ProximaNovaLight') format('svg');
  22.     font-weight: 400;
  23.     font-style: normal;
  24. }
  25.  
  26. @import 'https://fonts.googleapis.com/css?family=Montserrat|Roboto+Mono';
  27. @import 'http://fonts.googleapis.com/css?family=Cantata+One';
  28. @import 'https://fonts.googleapis.com/css?family=Source+Code+Pro|Oswald';
  29. @global-font-family:                            ProximaNova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  30. @global-font-size:                              15px;
  31.  
  32. @global-xxlarge-font-size:                      38px;
  33. @global-xlarge-font-size:                       30px;
  34. @global-large-font-size:                        24px;
  35. @global-medium-font-size:                       20px;
  36. @global-small-font-size:                        14px;
  37.  
  38. @global-emphasis-color:                         #222;
  39.  
  40.  
  41. //
  42. // Base
  43. //
  44.  
  45. @base-code-font-family:                         'Roboto Mono', monospace;;
  46. @base-code-font-size:                           12px;
  47.  
  48. @base-heading-font-weight:                      300;
  49.  
  50. @base-pre-font-size:                            12px;
  51. @base-pre-padding:                              25px;
  52. @base-pre-background:                           @global-muted-background;
  53. @base-pre-border-width:                         0;
  54. @base-pre-border-radius:                        0;
  55.  
  56. .hook-base-body() {
  57.     -webkit-font-smoothing: antialiased;
  58.     -moz-osx-font-smoothing: grayscale;
  59.     text-rendering: optimizeLegibility;
  60. }
  61.  
  62. //
  63. // Container
  64. //
  65.  
  66. @container-max-width:                           1380px;
  67. @container-small-max-width:                     650px;
  68.  
  69. //
  70. // Navbar
  71. //
  72.  
  73. @inverse-navbar-nav-item-color:                @inverse-global-color;
  74. @inverse-navbar-nav-item-hover-color:          @inverse-global-emphasis-color;
  75.  
  76. //
  77. // Nav
  78. //
  79.  
  80. @nav-header-font-size:                          12px;
  81.  
  82. //
  83. // Subnav
  84. //
  85.  
  86. @inverse-subnav-item-color:                     @inverse-global-color;
  87. @inverse-subnav-item-hover-color:               @inverse-global-emphasis-color;
  88.  
  89. //
  90. // Tab
  91. //
  92.  
  93. @tab-item-padding-horizontal:                   20px;
  94. @tab-item-padding-vertical:                     9px;
  95. @tab-item-border-width:                         2px;
  96. @tab-item-font-size:                            12px;
  97.  
  98. .hook-tab-item() { line-height: 20px; }
  99.  
  100. //
  101. // Table
  102. //
  103.  
  104. @table-header-cell-font-size:                   12px;
  105.  
  106. //
  107. // Label
  108. //
  109.  
  110. @label-font-size:                               12px;
  111.  
  112. //
  113. // Text
  114. //
  115.  
  116. .hook-text-lead() { font-weight: 300; }
  117. .hook-text-large() { font-weight: 300; }
  118.  
  119. //
  120. // Utility
  121. //
  122.  
  123. @inverse-logo-color:                           @inverse-global-emphasis-color;
  124. @inverse-logo-hover-color:                     @inverse-global-emphasis-color;
  125.  
  126. //
  127. // Off-canvas
  128. //
  129.  
  130. @offcanvas-bar-background:                      #fff;
  131. @offcanvas-bar-color-mode:                      dark;
  132.  
  133. //
  134. // Inverse
  135. //
  136.  
  137. @inverse-global-color:                          fade(@global-inverse-color, 80%);
  138. @inverse-global-muted-color:                    fade(@global-inverse-color, 60%);
  139.  
  140.  
  141.  
  142. /* ========================================================================
  143.    Theme
  144.  ========================================================================== */
  145.  
  146. @sidebar-left-width:     240px;
  147. @sidebar-left-width-xl:  300px;
  148.  
  149. @sidebar-right-width:    200px;
  150. @sidebar-right-left:     0px;
  151. @sidebar-right-left-xl:  60px;
  152.  
  153.  
  154. /* HTML
  155.  ========================================================================== */
  156.  
  157. /*
  158.  * Force vertical scrollbar
  159.  */
  160.  
  161. html { overflow-y: scroll; }
  162.  
  163.  
  164. /* Documentation Sidebars
  165.  ========================================================================== */
  166.  
  167. /*
  168.  * Sidebar Left
  169.  */
  170.  
  171. .tm-sidebar-left {
  172.     position: fixed;
  173.     top: @navbar-nav-item-height;
  174.     bottom: 0;
  175.     box-sizing: border-box;
  176.     width: @sidebar-left-width !important;
  177.     padding: 40px 40px 60px 40px;
  178.     border-right: 1px @global-border solid;
  179.     overflow: auto;
  180. }
  181.  
  182. /*
  183.  * Sidebar Right
  184.  */
  185.  
  186. .tm-sidebar-right {
  187.     position: absolute;
  188.     top: 0;
  189.     left: ~'calc(100% + @{sidebar-right-left})';
  190.     width: @sidebar-right-width;
  191. }
  192.  
  193. /* Tablet landscape and bigger */
  194. @media (min-width: @breakpoint-medium) {
  195.  
  196.     .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width; }
  197.  
  198. }
  199.  
  200. /* Desktop and bigger */
  201. @media (min-width: @breakpoint-large) {
  202.  
  203.     .tm-sidebar-right { left: ~'calc(100% + @{sidebar-right-left})'; }
  204.  
  205.     .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width - (@sidebar-right-width + @sidebar-right-left); }
  206.  
  207. }
  208.  
  209. /* Large screen and bigger */
  210. @media (min-width: 1400px) {
  211.  
  212.     .tm-sidebar-left {
  213.         width: @sidebar-left-width-xl !important;
  214.         padding: 45px 45px 60px 45px;
  215.     }
  216.  
  217.     .tm-sidebar-right { left: ~'calc(100% + @{sidebar-right-left-xl})'; }
  218.  
  219.     .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width-xl - (@sidebar-right-width + @sidebar-right-left-xl); }
  220.  
  221. }
  222.  
  223.  
  224. /* UIkit modifier
  225.  ========================================================================== */
  226.  
  227. /*
  228.  * Navbar
  229.  */
  230.  
  231. .tm-navbar-container:not(.uk-navbar-transparent) {
  232.     background: linear-gradient(to left, #28a5f5, @global-primary-background);
  233. }
  234.  
  235. .tm-navbar-container .uk-navbar-nav > li > a,
  236. .tm-navbar-container .uk-navbar-item:not(.uk-logo),
  237. .tm-navbar-container .uk-navbar-toggle {
  238.     height: 70px;
  239.     font-size: 13px;
  240. }
  241.  
  242. // Color Mode
  243. .tm-navbar-container:not(.uk-navbar-transparent):extend(.uk-light all) {}
  244.  
  245. // Line Mode
  246. @navbar-nav-item-line-margin-vertical:          20px;
  247. @navbar-nav-item-line-margin-horizontal:        @navbar-nav-item-padding-horizontal;
  248. @navbar-nav-item-line-height:                   1px;
  249. @navbar-nav-item-line-background:               currentColor;
  250. @navbar-nav-item-line-transition-duration:      0.3s;
  251.  
  252. .tm-navbar-container .uk-navbar-nav > li > a {
  253.     position: relative;
  254.  
  255.     &::before {
  256.         content: '';
  257.         display: block;
  258.         position: absolute;
  259.         left: @navbar-nav-item-line-margin-horizontal;
  260.         right: ~'calc(102% - @{navbar-nav-item-line-margin-horizontal})';
  261.         bottom: @navbar-nav-item-line-margin-vertical;
  262.         height: @navbar-nav-item-line-height;
  263.         background-color: @navbar-nav-item-line-background;
  264.         -webkit-transition: @navbar-nav-item-line-transition-duration ease-in-out;
  265.         transition: @navbar-nav-item-line-transition-duration ease-in-out;
  266.         -webkit-transition-property: right;
  267.         transition-property: right;
  268.     }
  269. }
  270.  
  271. .tm-navbar-container .uk-navbar-nav > li > a:hover::before { right: @navbar-nav-item-line-margin-horizontal; }
  272.  
  273. /*
  274.  * Nav
  275.  */
  276.  
  277. .tm-nav > li.uk-active > a { position: relative; }
  278.  
  279. .tm-nav > li.uk-active > a:before {
  280.     content: "";
  281.     position: absolute;
  282.     top: 15px;
  283.     left: -25px;
  284.     width: 15px;
  285.     border-top: 1px solid @global-primary-background;
  286. }
  287.  
  288. .tm-nav .uk-nav-header {
  289.     padding: 8px 0;
  290.     border-bottom: 1px solid @global-border;
  291. }
  292.  
  293. /*
  294.  * Subnav
  295.  */
  296.  
  297. /* Tablet landscape and bigger */
  298. @media (min-width: @breakpoint-medium) {
  299.  
  300.     .tm-subnav { margin-left: -50px; }
  301.     .tm-subnav > * { padding-left: 50px; }
  302.  
  303. }
  304.  
  305. .tm-subnav > * > :first-child { text-transform: capitalize; }
  306.  
  307. /*
  308.  * Width
  309.  */
  310.  
  311. .tm-width-small { width: 80px; }
  312.  
  313. /*
  314.  * Button
  315.  */
  316.  
  317. .tm-button-default,
  318. .tm-button-primary { border-radius: 500px; }
  319.  
  320. .tm-button-default {}
  321.  
  322. .tm-button-large { line-height: 48px; }
  323.  
  324. .tm-button-primary {}
  325.  
  326. .hook-inverse() {
  327.  
  328.     .tm-button-default {
  329.         color: @inverse-global-color;
  330.         border-color: @inverse-global-muted-color;
  331.     }
  332.  
  333.     .tm-button-primary {
  334.         background: #fff !important;
  335.         color: @global-primary-background !important;
  336.     }
  337.  
  338.     .tm-button-primary:hover { box-shadow: 0 10px 40px rgba(30,135,240,1); }
  339.  
  340. }
  341.  
  342. /*
  343.  * Section
  344.  */
  345.  
  346. .tm-section-primary {
  347.     background: linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat;
  348. }
  349.  
  350. .tm-section-texture {
  351.     background: url("https://getuikit.com/images/section-background.svg") 50% 17vh no-repeat,
  352.                 linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat;
  353. }
  354.  
  355. .tm-section-intro {
  356.     background: linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat,
  357.                 #fff;
  358.     background-size: 100% 75%;
  359. }
  360.  
  361. /*
  362.  * Heading
  363.  */
  364.  
  365. .tm-h4,
  366. .tm-h5,
  367. .tm-h6 {
  368.     font-family: Montserrat;
  369.     text-transform: uppercase;
  370.     letter-spacing: 2px;
  371.     color: @global-muted-color;
  372. }
  373.  
  374. .tm-h4 { font-size: 14px; }
  375. .tm-h5 { font-size: 12px; }
  376. .tm-h6 { font-size: 11px; }
  377.  
  378. .hook-inverse() {
  379.  
  380.     .tm-h4,
  381.     .tm-h5,
  382.     .tm-h6 { color: rgba(255, 255, 255, 0.7); }
  383.  
  384. }
  385.  
  386. /*
  387.  * Text
  388.  */
  389.  
  390. .tm-text-large { font-size: 18px; }
  391.  
  392. /*
  393.  * Box shadow
  394.  */
  395.  
  396. .tm-box-shadow-medium {
  397.     box-shadow: 2px 12px 35px rgba(0,0,0,0.1),
  398.                 0 1px 6px rgba(0,0,0,0.05);
  399. }
  400.  
  401. .tm-box-shadow-large {
  402.     box-shadow: -40px 40px 160px 0 rgba(0,0,0,0.08),
  403.                 -8px 8px 15px 0 rgba(120,120,120,0.04),
  404.                 3px 3px 30px 0 rgba(0,0,0,0.04);
  405. }
  406.  
  407. .tm-box-shadow-modal { box-shadow: 3px 3px 40px 0 rgba(0,0,0,0.06); }
  408.  
  409. /*
  410.  * Overlay
  411.  */
  412.  
  413. .tm-overlay-default { background: fade(@global-background, 50%); }
  414.  
  415. /*
  416.  * Modal
  417.  */
  418.  
  419. .tm-modal-dialog { background: @global-muted-background; }
  420.  
  421. .tm-modal-header { padding: 20px 30px; }
  422. .tm-modal-body { padding: 0; }
  423.  
  424. /* Phone landscape and bigger */
  425. @media (min-width: @breakpoint-small) {
  426.  
  427.     .tm-modal-header { padding: 25px 50px; }
  428.     .tm-modal-body { padding: 0 50px; }
  429.  
  430. }
  431.  
  432. /* Desktop and bigger */
  433. @media (min-width: @breakpoint-xlarge) {
  434.  
  435.     .tm-modal-header { padding: 50px 120px; }
  436.     .tm-modal-body { padding: 0 120px; }
  437.  
  438. }
  439.  
  440. .tm-modal-close-full {
  441.     background: transparent;
  442.     padding: 30px;
  443. }
  444.  
  445. /* Phone landscape and bigger */
  446. @media (min-width: @breakpoint-small) {
  447.  
  448.     .tm-modal-close-full { padding: @global-medium-margin; }
  449.  
  450. }
  451.  
  452. /* Utilities
  453.  ========================================================================== */
  454.  
  455. /*
  456.  * Heading fragment
  457.  */
  458.  
  459. .tm-heading-fragment > a {
  460.     color: inherit;
  461.     text-decoration: none;
  462. }
  463.  
  464. /* Phone landscape and bigger */
  465. @media (min-width: @breakpoint-small) {
  466.  
  467.     h2.tm-heading-fragment > a {
  468.         display: block;
  469.         margin-left: -25px;
  470.     }
  471.  
  472.     h2.tm-heading-fragment > a:before {
  473.         content: "#";
  474.         width: 25px;
  475.         float: left;
  476.         color: @global-muted-color;
  477.     }
  478.  
  479. }
  480.  
  481.  
  482. /* Reset container for docs
  483.  ========================================================================== */
  484.  
  485. .tm-main .uk-container {
  486.     padding-left: @container-padding-horizontal;
  487.     padding-right: @container-padding-horizontal;
  488. }
  489.  
  490. /* Phone landscape and bigger */
  491. @media (min-width: @breakpoint-small) {
  492.  
  493.     .tm-main .uk-container {
  494.         padding-left: @container-padding-horizontal-s;
  495.         padding-right: @container-padding-horizontal-s;
  496.     }
  497.  
  498. }
  499.  
  500. /* Tablet landscape and bigger */
  501. @media (min-width: @breakpoint-medium) {
  502.  
  503.     .tm-main .uk-container {
  504.         padding-left: @container-padding-horizontal-m;
  505.         padding-right: @container-padding-horizontal-m;
  506.     }
  507.  
  508. }
  509.  
  510.  
  511. /* Pro
  512.  ========================================================================== */
  513.  
  514. /* Desktop and bigger */
  515. @media (min-width: @breakpoint-large) {
  516.  
  517.     .tm-intro-text { margin-top: 30px; }
  518.  
  519. }
  520.  
  521. /* Large screen and bigger */
  522. @media (min-width: @breakpoint-xlarge) {
  523.  
  524.     .tm-intro-text { margin-top: 90px; }
  525.     .tm-intro-image { margin-right: -75px; }
  526.  
  527. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!