Update to UIKit 3 beta35

master
Sam Black 5 years ago
parent 0bac8e35c6
commit 02ec8cfd4b
  1. 8
      assets/uikit/scss/components/accordion.scss
  2. 7
      assets/uikit/scss/components/base.scss
  3. 9
      assets/uikit/scss/components/breadcrumb.scss
  4. 32
      assets/uikit/scss/components/button.scss
  5. 36
      assets/uikit/scss/components/close.scss
  6. 2
      assets/uikit/scss/components/cover.scss
  7. 26
      assets/uikit/scss/components/dotnav.scss
  8. 40
      assets/uikit/scss/components/form.scss
  9. 2
      assets/uikit/scss/components/grid.scss
  10. 53
      assets/uikit/scss/components/icon.scss
  11. 2
      assets/uikit/scss/components/iconnav.scss
  12. 31
      assets/uikit/scss/components/link.scss
  13. 96
      assets/uikit/scss/components/modal.scss
  14. 11
      assets/uikit/scss/components/navbar.scss
  15. 2
      assets/uikit/scss/components/pagination.scss
  16. 82
      assets/uikit/scss/components/position.scss
  17. 44
      assets/uikit/scss/components/search.scss
  18. 15
      assets/uikit/scss/components/section.scss
  19. 30
      assets/uikit/scss/components/slidenav.scss
  20. 2
      assets/uikit/scss/components/subnav.scss
  21. 2
      assets/uikit/scss/components/switcher.scss
  22. 4
      assets/uikit/scss/components/tab.scss
  23. 1
      assets/uikit/scss/components/table.scss
  24. 111
      assets/uikit/scss/components/tile.scss
  25. 23
      assets/uikit/scss/components/transition.scss
  26. 33
      assets/uikit/scss/components/utility.scss
  27. 27
      assets/uikit/scss/components/visibility.scss
  28. 2
      assets/uikit/scss/components/width.scss
  29. 465
      assets/uikit/scss/mixins-theme.scss
  30. 380
      assets/uikit/scss/mixins.scss
  31. 8
      assets/uikit/scss/theme/_import.scss
  32. 3
      assets/uikit/scss/theme/breadcrumb.scss
  33. 6
      assets/uikit/scss/theme/button.scss
  34. 28
      assets/uikit/scss/theme/dotnav.scss
  35. 10
      assets/uikit/scss/theme/link.scss
  36. 6
      assets/uikit/scss/theme/modal.scss
  37. 4
      assets/uikit/scss/theme/navbar.scss
  38. 2
      assets/uikit/scss/theme/section.scss
  39. 6
      assets/uikit/scss/theme/slidenav.scss
  40. 15
      assets/uikit/scss/uikit-theme.scss
  41. 15
      assets/uikit/scss/uikit.scss
  42. 333
      assets/uikit/scss/variables-theme.scss
  43. 319
      assets/uikit/scss/variables.scss
  44. 12433
      assets/uikit/uikit.js

@ -6,6 +6,8 @@
// Sub-objects: `uk-accordion-title`
// `uk-accordion-content`
//
// States: `uk-open`
//
// ========================================================================
@ -64,13 +66,13 @@ $accordion-content-margin-top: $global-margin !default;
* Micro clearfix
*/
.uk-accordion-content:before,
.uk-accordion-content:after {
.uk-accordion-content::before,
.uk-accordion-content::after {
content: "";
display: table;
}
.uk-accordion-content:after { clear: both; }
.uk-accordion-content::after { clear: both; }
/*
* Remove margin from the last-child

@ -130,7 +130,7 @@ a {
*/
a:active,
a:hover { outline: 0; }
a:hover { outline: none; }
/*
* Style
@ -420,7 +420,8 @@ dd { margin-left: 0; }
/*
* 1. Add the correct box sizing and height in Firefox.
* 2. Show the overflow in Edge and IE.
* 3. Style
* 3. Add the correct text-align in Edge and IE.
* 4. Style
*/
hr, .uk-hr {
@ -430,6 +431,8 @@ hr, .uk-hr {
/* 2 */
overflow: visible;
/* 3 */
text-align: inherit;
/* 4 */
margin: 0 0 $base-hr-margin-vertical 0;
border: 0;
border-top: $base-hr-border-width solid $base-hr-border;

@ -28,7 +28,7 @@ $breadcrumb-divider-color: $global-muted-color !defaul
/*
* 1. Allow items to wrap into the next line
* 2. Reset lists
* 2. Reset list
*/
.uk-breadcrumb {
@ -74,6 +74,11 @@ $breadcrumb-divider-color: $global-muted-color !defaul
@if(mixin-exists(hook-breadcrumb-item-hover)) {@include hook-breadcrumb-item-hover();}
}
/* Disabled */
.uk-breadcrumb > .uk-disabled > * {
@if(mixin-exists(hook-breadcrumb-item-disabled)) {@include hook-breadcrumb-item-disabled();}
}
/* Active */
.uk-breadcrumb > :last-child > * {
color: $breadcrumb-item-active-color;
@ -102,6 +107,7 @@ $breadcrumb-divider-color: $global-muted-color !defaul
// @mixin hook-breadcrumb(){}
// @mixin hook-breadcrumb-item(){}
// @mixin hook-breadcrumb-item-hover(){}
// @mixin hook-breadcrumb-item-disabled(){}
// @mixin hook-breadcrumb-item-active(){}
// @mixin hook-breadcrumb-divider(){}
// @mixin hook-breadcrumb-misc(){}
@ -119,5 +125,6 @@ $inverse-breadcrumb-divider-color: $inverse-global-muted-color !def
// @mixin hook-inverse-breadcrumb-item(){}
// @mixin hook-inverse-breadcrumb-item-hover(){}
// @mixin hook-inverse-breadcrumb-item-disabled(){}
// @mixin hook-inverse-breadcrumb-item-active(){}
// @mixin hook-inverse-breadcrumb-divider(){}

@ -84,14 +84,15 @@ $button-link-disabled-color: $global-muted-color !default;
/*
* 1. Remove margins in Chrome, Safari and Opera.
* 2. Remove borders for `button`.
* 3. Address `overflow` set to `hidden` in IE.
* 4. Correct `font` properties and `color` not being inherited for `button`.
* 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
* 6. Style
* 7. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
* 3. Remove border-radius in Chrome.
* 4. Address `overflow` set to `hidden` in IE.
* 5. Correct `font` properties and `color` not being inherited for `button`.
* 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
* 7. Style
* 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
* Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
* 8. Align text if button has a width
* 9. Required for `a`.
* 9. Align text if button has a width
* 10. Required for `a`.
*/
.uk-button {
@ -100,23 +101,25 @@ $button-link-disabled-color: $global-muted-color !default;
/* 2 */
border: none;
/* 3 */
overflow: visible;
border-radius: 0;
/* 4 */
overflow: visible;
/* 5 */
font: inherit;
color: inherit;
/* 5 */
text-transform: none;
/* 6 */
text-transform: none;
/* 7 */
display: inline-block;
box-sizing: border-box;
padding: 0 $button-padding-horizontal;
vertical-align: middle;
font-size: $button-font-size;
/* 7 */
line-height: $button-line-height;
/* 8 */
text-align: center;
line-height: $button-line-height;
/* 9 */
text-align: center;
/* 10 */
text-decoration: none;
@if(mixin-exists(hook-button)) {@include hook-button();}
}
@ -430,6 +433,8 @@ $inverse-button-secondary-active-color: $inverse-global-inverse-color !d
$inverse-button-text-color: $inverse-global-muted-color !default;
$inverse-button-text-hover-color: $inverse-global-color !default;
$inverse-button-text-disabled-color: $inverse-global-muted-color !default;
$inverse-button-link-color: $inverse-global-muted-color !default;
$inverse-button-link-hover-color: $inverse-global-color !default;
@ -445,3 +450,4 @@ $inverse-button-text-disabled-color: $inverse-global-muted-color !def
// @mixin hook-inverse-button-text(){}
// @mixin hook-inverse-button-text-hover(){}
// @mixin hook-inverse-button-text-disabled(){}
// @mixin hook-inverse-button-link(){}

@ -19,48 +19,14 @@ $close-hover-color: $global-color !default;
/*
* Adopts `uk-icon`
* 1. Remove margins in Chrome, Safari and Opera.
* 2. Remove borders for `button`.
* 3. Address `overflow` set to `hidden` in IE.
* 4. Correct `font` properties and `color` not being inherited for `button`.
* 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
* 6. Remove default `button` padding and background color
* 7. Required for `button`.
* 8. Re-reset `line-height` for icon
*/
.uk-close {
/* 1 */
margin: 0;
/* 2 */
border: none;
/* 3 */
overflow: visible;
/* 4 */
font: inherit;
color: $close-color;
/* 5 */
text-transform: none;
/* 6. */
padding: 0;
background-color: transparent;
/* 7 */
cursor: pointer;
/* 8 */
line-height: 0;
@if(mixin-exists(hook-close)) {@include hook-close();}
}
/*
* Remove the inner border and padding in Firefox.
*/
.uk-close::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Hover + Focus */
/* Hover + Focus */
.uk-close:hover,
.uk-close:focus {
color: $close-hover-color;

@ -31,6 +31,8 @@
transform: translate(-50%,-50%);
}
iframe.uk-cover { pointer-events: none; }
/* Container
========================================================================== */

@ -13,19 +13,17 @@
// Variables
// ========================================================================
$dotnav-margin-horizontal: 15px !default;
$dotnav-margin-horizontal: 12px !default;
$dotnav-margin-vertical: $dotnav-margin-horizontal !default;
$dotnav-item-width: 16px !default;
$dotnav-item-width: 10px !default;
$dotnav-item-height: $dotnav-item-width !default;
$dotnav-item-border-radius: 50% !default;
$dotnav-item-background: fade-out($global-color, 0.9) !default;
$dotnav-item-hover-background: fade-out($global-color, 0.6) !default;
$dotnav-item-onclick-background: fade-out($global-color, 0.4) !default;
$dotnav-item-active-background: fade-out($global-color, 0.6) !default;
$dotnav-item-background: rgba($global-color, 0.2) !default;
$dotnav-item-hover-background: rgba($global-color, 0.6) !default;
$dotnav-item-onclick-background: rgba($global-color, 0.2) !default;
$dotnav-item-active-background: rgba($global-color, 0.6) !default;
/* ========================================================================
@ -34,7 +32,7 @@ $dotnav-item-active-background: fade-out($global-color, 0.6) !d
/*
* 1. Allow items to wrap into the next line
* 2. Reset lists
* 2. Reset list
* 3. Gutter
*/
@ -80,7 +78,7 @@ $dotnav-item-active-background: fade-out($global-color, 0.6) !d
.uk-dotnav > * > * {
display: block;
box-sizing: content-box;
box-sizing: border-box;
width: $dotnav-item-width;
height: $dotnav-item-height;
border-radius: $dotnav-item-border-radius;
@ -154,10 +152,10 @@ $dotnav-item-active-background: fade-out($global-color, 0.6) !d
// Inverse
// ========================================================================
$inverse-dotnav-item-background: fade-out($inverse-global-color, 0.6) !default;
$inverse-dotnav-item-hover-background: fade-out($inverse-global-color, 0.3) !default;
$inverse-dotnav-item-onclick-background: fade-out($inverse-global-color, 0.1) !default;
$inverse-dotnav-item-active-background: fade-out($inverse-global-color, 0.1) !default;
$inverse-dotnav-item-background: rgba($inverse-global-color, 0.5) !default;
$inverse-dotnav-item-hover-background: rgba($inverse-global-color, 0.9) !default;
$inverse-dotnav-item-onclick-background: rgba($inverse-global-color, 0.5) !default;
$inverse-dotnav-item-active-background: rgba($inverse-global-color, 0.9) !default;

@ -37,7 +37,7 @@
$form-height: $global-control-height !default;
$form-line-height: $form-height !default;
$form-padding-horizontal: 6px !default;
$form-padding-horizontal: 10px !default;
$form-padding-vertical: 4px !default;
$form-background: $global-muted-background !default;
@ -52,16 +52,19 @@ $form-disabled-color: $global-muted-color !default;
$form-placeholder-color: $global-muted-color !default;
$form-small-height: $global-control-small-height !default;
$form-large-height: $global-control-large-height !default;
$form-small-padding-horizontal: 8px !default;
$form-small-line-height: $form-small-height !default;
$form-large-line-height: $form-large-height !default;
$form-small-font-size: $global-small-font-size !default;
$form-large-height: $global-control-large-height !default;
$form-large-padding-horizontal: 12px !default;
$form-large-line-height: $form-large-height !default;
$form-large-font-size: $global-medium-font-size !default;
$form-danger-color: $global-danger-background !default;
$form-success-color: $global-success-background !default;
$form-width-xsmall: 40px !default;
$form-width-xsmall: 50px !default;
$form-width-small: 130px !default;
$form-width-medium: 200px !default;
$form-width-large: 500px !default;
@ -92,12 +95,12 @@ $form-horizontal-label-margin-top: 7px !default;
$form-horizontal-controls-margin-left: 215px !default;
$form-horizontal-controls-text-padding-top: 7px !default;
$form-icon-width: 30px !default;
$form-icon-width: $form-height !default;
$form-icon-font-size: $global-font-size !default;
$form-icon-color: $global-muted-color !default;
$form-icon-hover-color: $global-color !default;
$internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%224%201%201%206%207%206%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%224%2013%201%208%207%208%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E" !default;
$internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E%0A" !default;
$internal-form-radio-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E" !default;
$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%2F%3E%0A%3C%2Fsvg%3E" !default;
$internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E" !default;
@ -249,9 +252,9 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
/*
* Single-line
* 1. Allow an `a` element to look like a `input` or `select` element
* 1. Allow any element to look like an `input` or `select` element
* 2. Make sure line-height is not larger than height
* Also needed to center the text vertically if `a` element is used
* Also needed to center the text vertically
*/
.uk-input,
@ -260,11 +263,13 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
vertical-align: middle;
/* 1 */
display: inline-block;
/* 2 */
line-height: $form-line-height;
@if(mixin-exists(hook-form-single-line)) {@include hook-form-single-line();}
}
/* 2 */
.uk-input:not(input),
.uk-select:not(select) { line-height: $form-line-height; }
/*
* Multi-line
*/
@ -282,7 +287,7 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
outline: 0;
outline: none;
background-color: $form-focus-background;
color: $form-focus-color;
@if(mixin-exists(hook-form-focus)) {@include hook-form-focus();}
@ -321,9 +326,12 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
.uk-form-small:not(textarea):not([multiple]):not([size]) {
height: $form-small-height;
line-height: $form-small-line-height;
padding-left: $form-small-padding-horizontal;
padding-right: $form-small-padding-horizontal;
}
.uk-form-small:not(select):not(input):not(textarea) { line-height: $form-small-line-height; }
/*
* Large
*/
@ -332,9 +340,12 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
.uk-form-large:not(textarea):not([multiple]):not([size]) {
height: $form-large-height;
line-height: $form-large-line-height;
padding-left: $form-large-padding-horizontal;
padding-right: $form-large-padding-horizontal;
}
.uk-form-large:not(select):not(input):not(textarea) { line-height: $form-large-line-height; }
/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
========================================================================== */
@ -423,7 +434,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
/* Radio and checkbox
* Note: Only works in Chrome, Safari, Opera and Edge
* Note: Does not work in IE11
========================================================================== */
/*
@ -448,6 +459,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
vertical-align: middle;
/* 4 */
-webkit-appearance: none;
-moz-appearance: none;
/* 5 */
background-color: $form-radio-background;
/* 6 */

@ -52,7 +52,7 @@ $grid-divider-border: $global-border !default;
/*
* 1. Allow cells to wrap into the next line
* 2. Reset lists
* 2. Reset list
*/
.uk-grid {

@ -38,24 +38,65 @@ $icon-button-active-color: $global-color !default;
========================================================================== */
/*
* 1. Fill all SVG elements with the current text color if no `fill` attribute is set
* 2. Let the container fit the height of the icon
* Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
* 1. Remove margins in Chrome, Safari and Opera.
* 2. Remove borders for `button`.
* 3. Remove border-radius in Chrome.
* 4. Address `overflow` set to `hidden` in IE.
* 5. Correct `font` properties and `color` not being inherited for `button`.
* 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
* 7. Remove default `button` padding and background color
* 8. Style
* 9. Fill all SVG elements with the current text color if no `fill` attribute is set
* 10. Let the container fit the height of the icon
*/
.uk-icon {
display: inline-block;
/* 1 */
fill: currentcolor;
margin: 0;
/* 2 */
border: none;
/* 3 */
border-radius: 0;
/* 4 */
overflow: visible;
/* 5 */
font: inherit;
color: inherit;
/* 6 */
text-transform: none;
/* 7. */
padding: 0;
background-color: transparent;
/* 8 */
display: inline-block;
/* 9 */
fill: currentcolor;
/* 10 */
line-height: 0;
}
/* Required for `button`. */
button.uk-icon:not(:disabled) { cursor: pointer; }
/*
* Remove the inner border and padding in Firefox.
*/
.uk-icon::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* Set the fill and stroke color of all SVG elements to the current text color
* 1. Fix for uppercase attribute names in Edge. Will be fixed in Windows 10 builds 16251+
*/
.uk-icon [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
.uk-icon [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
.uk-icon [fill*='#']:not(.uk-preserve),
.uk-icon [FILL*='#']:not(.uk-preserve) { fill: currentcolor; } // 1
.uk-icon [stroke*='#']:not(.uk-preserve),
.uk-icon [STROKE*='#']:not(.uk-preserve) { stroke: currentcolor; } // 1
/*
* Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835

@ -29,7 +29,7 @@ $iconnav-item-active-color: $global-color !default;
/*
* 1. Allow items to wrap into the next line
* 2. Reset lists
* 2. Reset list
* 3. Gutter
*/

@ -2,6 +2,7 @@
// Description: Styles for links
//
// Component: `uk-link-muted`
// `uk-link-text`
// `uk-link-reset`
//
// ========================================================================
@ -13,6 +14,8 @@
$link-muted-color: $global-muted-color !default;
$link-muted-hover-color: $global-color !default;
$link-text-hover-color: $global-muted-color !default;
/* ========================================================================
Component: Link
@ -35,6 +38,26 @@ a.uk-link-muted:hover,
}
/* Text
========================================================================== */
/*
* `!important` needed to override inverse component
*/
a.uk-link-text:not(:hover),
.uk-link-text a:not(:hover) {
color: inherit !important;
@if(mixin-exists(hook-link-text)) {@include hook-link-text();}
}
a.uk-link-text:hover,
.uk-link-text a:hover {
color: $link-text-hover-color;
@if(mixin-exists(hook-link-text-hover)) {@include hook-link-text-hover();}
}
/* Reset
========================================================================== */
@ -44,10 +67,8 @@ a.uk-link-muted:hover,
a.uk-link-reset,
a.uk-link-reset:hover,
a.uk-link-reset:focus,
.uk-link-reset a,
.uk-link-reset a:hover,
.uk-link-reset a:focus {
.uk-link-reset a:hover {
color: inherit !important;
text-decoration: none !important;
@if(mixin-exists(hook-link-reset)) {@include hook-link-reset();}
@ -61,6 +82,8 @@ a.uk-link-reset:focus,
// @mixin hook-link-muted(){}
// @mixin hook-link-muted-hover(){}
// @mixin hook-link-text(){}
// @mixin hook-link-text-hover(){}
// @mixin hook-link-reset(){}
// @mixin hook-link-misc(){}
@ -70,8 +93,10 @@ a.uk-link-reset:focus,
$inverse-link-muted-color: $inverse-global-muted-color !default;
$inverse-link-muted-hover-color: $inverse-global-color !default;
$inverse-link-text-hover-color: $inverse-global-muted-color !default;
// @mixin hook-inverse-link-muted(){}
// @mixin hook-inverse-link-muted-hover(){}
// @mixin hook-inverse-link-text-hover(){}

@ -10,7 +10,6 @@
// `uk-modal-footer`
// `uk-modal-title`
// `uk-modal-close`
// `uk-modal-caption`
//
// Adopted: `uk-modal-close-default`
// `uk-modal-close-outside`
@ -18,7 +17,6 @@
//
// Modifiers: `uk-modal-container`
// `uk-modal-full`
// `uk-modal-lightbox`
//
// States: `uk-open`
//
@ -34,10 +32,9 @@ $modal-background: rgba(0,0,0,0.6) !default;
$modal-padding-horizontal: 15px !default;
$modal-padding-horizontal-s: $global-gutter !default;
$modal-padding-horizontal-m: $global-medium-gutter !default;
$modal-padding-vertical: $modal-padding-horizontal !default;
$modal-padding-vertical-s: 50px !default;
$modal-dialog-margin-vertical: 50px !default;
$modal-dialog-margin-vertical-xs: 15px !default;
$modal-dialog-margin-horizontal: $modal-dialog-margin-vertical-xs !default;
$modal-dialog-width: 600px !default;
$modal-dialog-background: $global-background !default;
@ -65,9 +62,6 @@ $modal-close-outside-translate: 100% !default;
$modal-close-outside-color: lighten($global-inverse-color, 20%) !default;
$modal-close-outside-hover-color: $global-inverse-color !default;
$modal-caption-margin-top: $global-margin !default;
$modal-caption-color: #fff !default;
/* ========================================================================
Component: Modal
@ -96,8 +90,7 @@ $modal-caption-color: #fff !default;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* 4 */
padding-left: $modal-padding-horizontal;
padding-right: $modal-padding-horizontal;
padding: $modal-padding-vertical $modal-padding-horizontal;
/* 5 */
background: $modal-background;
/* 6 */
@ -110,10 +103,7 @@ $modal-caption-color: #fff !default;
/* Phone landscape and bigger */
@media (min-width: $breakpoint-small) {
.uk-modal {
padding-left: $modal-padding-horizontal-s;
padding-right: $modal-padding-horizontal-s;
}
.uk-modal { padding: $modal-padding-vertical-s $modal-padding-horizontal-s; }
}
@ -148,10 +138,12 @@ $modal-caption-color: #fff !default;
========================================================================== */
/*
* 1. Create position context for caption, spinner and close button
* 1. Create position context for spinner and close button
* 2. Dimensions
* 3. Style
* 4. Slide-in transition
* 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11
* `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
* 4. Style
* 5. Slide-in transition
*/
.uk-modal-dialog {
@ -159,30 +151,23 @@ $modal-caption-color: #fff !default;
position: relative;
/* 2 */
box-sizing: border-box;
margin: $modal-dialog-margin-vertical auto;
margin: 0 auto;
width: $modal-dialog-width;
max-width: 100%;
/* 3 */
background: $modal-dialog-background;
max-width: unquote('calc(100% - 0.01px)') !important;
/* 4 */
background: $modal-dialog-background;
/* 5 */
opacity: 0;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out;
transition: opacity 0.3s linear, transform 0.3s ease-out;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
-webkit-transition-property: opacity, transform;
transition-property: opacity, transform;
@if(mixin-exists(hook-modal-dialog)) {@include hook-modal-dialog();}
}
/* Phone portrait and smaller */
@media (max-width: $breakpoint-xsmall-max) {
.uk-modal-dialog {
margin-top: $modal-dialog-margin-vertical-xs;
margin-bottom: $modal-dialog-margin-vertical-xs;
}
}
/*
* Open
*/
@ -227,17 +212,6 @@ $modal-caption-color: #fff !default;
}
/* Lightbox modifier
========================================================================== */
.uk-modal-lightbox { background: rgba(0,0,0,0.9); }
.uk-modal-lightbox .uk-modal-dialog {
margin-left: $modal-dialog-margin-horizontal;
margin-right: $modal-dialog-margin-horizontal;
}
/* Sections
========================================================================== */
@ -336,13 +310,15 @@ $modal-caption-color: #fff !default;
/*
* Outside
* 1. Prevent scrollbar on small devices
*/
.uk-modal-close-outside {
top: $modal-close-outside-position;
right: $modal-close-outside-position;
-webkit-transform: translate($modal-close-outside-translate, -($modal-close-outside-translate));
transform: translate($modal-close-outside-translate, -($modal-close-outside-translate));
/* 1 */
right: (-$modal-close-padding);
-webkit-transform: translate(0, -($modal-close-outside-translate));
transform: translate(0, -($modal-close-outside-translate));
color: $modal-close-outside-color;
@if(mixin-exists(hook-modal-close-outside)) {@include hook-modal-close-outside();}
}
@ -352,6 +328,18 @@ $modal-caption-color: #fff !default;
@if(mixin-exists(hook-modal-close-outside-hover)) {@include hook-modal-close-outside-hover();}
}
/* Tablet landscape and bigger */
@media (min-width: $breakpoint-medium) {
/* 1 */
.uk-modal-close-outside {
right: $modal-close-outside-position;
-webkit-transform: translate($modal-close-outside-translate, -($modal-close-outside-translate));
transform: translate($modal-close-outside-translate, -($modal-close-outside-translate));
}
}
/*
* Full
*/
@ -365,21 +353,6 @@ $modal-caption-color: #fff !default;
}
/* Caption
========================================================================== */
.uk-modal-caption {
position: absolute;
left: 0;
right: 0;
top: 100%;
margin-top: $modal-caption-margin-top;
color: $modal-caption-color;
text-align: center;
@if(mixin-exists(hook-modal-caption)) {@include hook-modal-caption();}
}
// Hooks
// ========================================================================
@ -400,5 +373,4 @@ $modal-caption-color: #fff !default;
// @mixin hook-modal-close-outside-hover(){}
// @mixin hook-modal-close-full(){}
// @mixin hook-modal-close-full-hover(){}
// @mixin hook-modal-caption(){}
// @mixin hook-modal-misc(){}

@ -63,7 +63,8 @@ $navbar-dropdown-color: $global-color !default;
$navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
$navbar-dropdown-dropbar-margin-bottom: 30px !default;
$navbar-dropdown-dropbar-margin-top: 0 !default;
$navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
$navbar-dropdown-nav-item-color: $global-muted-color !default;
$navbar-dropdown-nav-item-hover-color: $global-color !default;
@ -130,7 +131,7 @@ $navbar-dropbar-z-index: $global-z-index + 20 !default;
// 2. [class*='uk-navbar-center'],
.uk-navbar-center,
.uk-navbar-center-left > *,
.uk-navbar-center-right > *, {
.uk-navbar-center-right > * {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
@ -192,7 +193,7 @@ $navbar-dropbar-z-index: $global-z-index + 20 !default;
========================================================================== */
/*
* 1. Reset lists
* 1. Reset list
*/
.uk-navbar-nav {
@ -417,6 +418,8 @@ $navbar-dropbar-z-index: $global-z-index + 20 !default;
*/
.uk-navbar-dropdown-dropbar {
top: 0 !important;
margin-top: $navbar-dropdown-dropbar-margin-top;
margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
@if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
}
@ -499,6 +502,7 @@ $navbar-dropbar-z-index: $global-z-index + 20 !default;
z-index: $navbar-dropbar-z-index;
left: 0;
right: 0;
@if(mixin-exists(hook-navbar-dropbar-slide)) {@include hook-navbar-dropbar-slide();}
}
@ -530,6 +534,7 @@ $navbar-dropbar-z-index: $global-z-index + 20 !default;
// @mixin hook-navbar-dropdown-nav-header(){}
// @mixin hook-navbar-dropdown-nav-divider(){}
// @mixin hook-navbar-dropbar(){}
// @mixin hook-navbar-dropbar-slide(){}
// @mixin hook-navbar-misc(){}

@ -31,7 +31,7 @@ $pagination-item-disabled-color: $global-muted-color !default;
/*
* 1. Allow items to wrap into the next line
* 2. Gutter
* 3. Reset lists
* 3. Reset list
*/
.uk-pagination {

@ -21,6 +21,7 @@
//
// Modifiers: `uk-position-small`
// `uk-position-medium`
// `uk-position-large`
//
// ========================================================================
@ -30,6 +31,8 @@
$position-small-margin: $global-small-gutter !default;
$position-medium-margin: $global-gutter !default;
$position-large-margin: $global-gutter !default;
$position-large-margin-l: 50px !default;
/* ========================================================================
@ -114,7 +117,8 @@ $position-medium-margin: $global-gutter !default;
display: table;
/* 2 */
width: -moz-max-content;
max-width: 100%
max-width: 100%;
box-sizing: border-box;
}
/* Vertical */
@ -136,6 +140,10 @@ $position-medium-margin: $global-gutter !default;
transform: translateX(-50%);
/* 1 */
display: table;
/* 2 */
width: -moz-max-content;
max-width: 100%;
box-sizing: border-box;
}
.uk-position-top-center { top: 0; }
@ -166,7 +174,6 @@ $position-medium-margin: $global-gutter !default;
.uk-position-z-index { z-index: 1; }
/* Margin modifier
========================================================================== */
@ -177,20 +184,20 @@ $position-medium-margin: $global-gutter !default;
.uk-position-small { margin: $position-small-margin; }
.uk-position-small.uk-position-center {
-webkit-transform: translate(unquote('calc(-50% - #{$position-small-margin})'), unquote('calc(-50% - #{$position-small-margin})'));
transform: translate(unquote('calc(-50% - #{$position-small-margin})'), unquote('calc(-50% - #{$position-small-margin})'));
-webkit-transform: translate(-50%, -50%) translate(-$position-small-margin, (-$position-small-margin));
transform: translate(-50%, -50%) translate(-$position-small-margin, (-$position-small-margin));
}
.uk-position-small.uk-position-center-left,
.uk-position-small.uk-position-center-right {
-webkit-transform: translateY(unquote('calc(-50% - #{$position-small-margin})'));
transform: translateY(unquote('calc(-50% - #{$position-small-margin})'));
-webkit-transform: translateY(-50%) translateY(-$position-small-margin);
transform: translateY(-50%) translateY(-$position-small-margin);
}
.uk-position-small.uk-position-top-center,
.uk-position-small.uk-position-bottom-center {
-webkit-transform: translateX(unquote('calc(-50% - #{$position-small-margin})'));
transform: translateX(unquote('calc(-50% - #{$position-small-margin})'));
-webkit-transform: translateX(-50%) translateX(-$position-small-margin);
transform: translateX(-50%) translateX(-$position-small-margin);
}
/*
@ -200,20 +207,67 @@ $position-medium-margin: $global-gutter !default;
.uk-position-medium { margin: $position-medium-margin; }
.uk-position-medium.uk-position-center {
-webkit-transform: translate(unquote('calc(-50% - #{$position-medium-margin})'), unquote('calc(-50% - #{$position-medium-margin})'));
transform: translate(unquote('calc(-50% - #{$position-medium-margin})'), unquote('calc(-50% - #{$position-medium-margin})'));
-webkit-transform: translate(-50%, -50%) translate(-$position-medium-margin, (-$position-medium-margin));
transform: translate(-50%, -50%) translate(-$position-medium-margin, (-$position-medium-margin));
}
.uk-position-medium.uk-position-center-left,
.uk-position-medium.uk-position-center-right {
-webkit-transform: translateY(unquote('calc(-50% - #{$position-medium-margin})'));
transform: translateY(unquote('calc(-50% - #{$position-medium-margin})'));
-webkit-transform: translateY(-50%) translateY(-$position-medium-margin);
transform: translateY(-50%) translateY(-$position-medium-margin);
}
.uk-position-medium.uk-position-top-center,
.uk-position-medium.uk-position-bottom-center {
-webkit-transform: translateX(unquote('calc(-50% - #{$position-medium-margin})'));
transform: translateX(unquote('calc(-50% - #{$position-medium-margin})'));
-webkit-transform: translateX(-50%) translateX(-$position-medium-margin);
transform: translateX(-50%) translateX(-$position-medium-margin);
}
/*
* Large
*/
.uk-position-large { margin: $position-large-margin; }
.uk-position-large.uk-position-center {
-webkit-transform: translate(-50%, -50%) translate(-$position-large-margin, (-$position-large-margin));
transform: translate(-50%, -50%) translate(-$position-large-margin, (-$position-large-margin));
}
.uk-position-large.uk-position-center-left,
.uk-position-large.uk-position-center-right {
-webkit-transform: translateY(-50%) translateY(-$position-large-margin);
transform: translateY(-50%) translateY(-$position-large-margin);
}
.uk-position-large.uk-position-top-center,
.uk-position-large.uk-position-bottom-center {
-webkit-transform: translateX(-50%) translateX(-$position-large-margin);
transform: translateX(-50%) translateX(-$position-large-margin);
}
/* Desktop and bigger */
@media (min-width: $breakpoint-large) {
.uk-position-large { margin: $position-large-margin-l; }
.uk-position-large.uk-position-center {
-webkit-transform: translate(-50%, -50%) translate(-$position-large-margin-l, (-$position-large-margin-l));
transform: translate(-50%, -50%) translate(-$position-large-margin-l, (-$position-large-margin-l));
}
.uk-position-large.uk-position-center-left,
.uk-position-large.uk-position-center-right {
-webkit-transform: translateY(-50%) translateY(-$position-large-margin-l);
transform: translateY(-50%) translateY(-$position-large-margin-l);
}
.uk-position-large.uk-position-top-center,
.uk-position-large.uk-position-bottom-center {
-webkit-transform: translateX(-50%) translateX(-$position-large-margin-l);
transform: translateX(-50%) translateX(-$position-large-margin-l);
}
}

@ -123,7 +123,7 @@ $search-toggle-hover-color: $global-color !default;
@if(mixin-exists(hook-search-input)) {@include hook-search-input();}
}
.uk-search-input:focus { outline: 0; }
.uk-search-input:focus { outline: none; }
/* Placeholder */
.uk-search-input:-ms-input-placeholder { color: $search-placeholder-color !important; }
@ -131,49 +131,9 @@ $search-toggle-hover-color: $global-color !default;
.uk-search-input::-webkit-input-placeholder { color: $search-placeholder-color; }
/* Icon
/* Icon (Adopts `uk-icon`)
========================================================================== */
/*
* Adopts `uk-icon`
* Required for `button`
* 1. Remove margins in Chrome, Safari and Opera.
* 2. Remove borders for `button`.
* 3. Address `overflow` set to `hidden` in IE.
* 4. Correct `font` properties and `color` not being inherited for `button`.
* 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
* 6. Remove default `button` padding and background color
* 7. Required for `button`.
*/
.uk-search-icon {
/* 1 */
margin: 0;
/* 2 */
border: none;
/* 3 */
overflow: visible;
/* 4 */
font: inherit;
color: inherit;
/* 5 */
text-transform: none;
/* 6. */
padding: 0;
background-color: transparent;
/* 7 */
cursor: pointer;
}
/*
* Remove the inner border and padding in Firefox. Required for `button`.
*/
.uk-search-icon::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* Remove default focus style
*/

@ -3,12 +3,14 @@
//
// Component: `uk-section`
//
// Modifiers: `uk-section-large`
// Modifiers: `uk-section-xsmall`
// `uk-section-small`
// `uk-section-large`
// `uk-section-xlarge`
// `uk-section-default`
// `uk-section-muted`
// `uk-section-primary`
// `uk-section-secondary`
// `uk-section-media`
// `uk-section-overlap`
//
// States: `uk-preserve-color`
@ -195,14 +197,6 @@ $section-secondary-color-mode: light !default;
@if ( $section-secondary-color-mode == dark ) { .uk-section-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
/*
* Indicate that an image or video is used as background
*/
.uk-section-media {
@if(mixin-exists(hook-section-media)) {@include hook-section-media();}
}
/* Overlap modifier
========================================================================== */
@ -226,6 +220,5 @@ $section-secondary-color-mode: light !default;
// @mixin hook-section-muted(){}
// @mixin hook-section-secondary(){}
// @mixin hook-section-primary(){}
// @mixin hook-section-media(){}
// @mixin hook-section-overlap(){}
// @mixin hook-section-misc(){}

@ -7,6 +7,7 @@
//
// Modifiers: `uk-slidenav-previous`
// `uk-slidenav-next`
// `uk-slidenav-large`
//
// ========================================================================
@ -14,12 +15,15 @@
// Variables
// ========================================================================
$slidenav-padding: 5px !default;
$slidenav-color: fade-out($global-color, 0.4) !default;
$slidenav-padding-vertical: 5px !default;
$slidenav-padding-horizontal: 10px !default;
$slidenav-hover-color: fade-out($global-color, 0.2) !default;
$slidenav-color: rgba($global-color, 0.5) !default;
$slidenav-hover-color: rgba($global-color, 0.9) !default;
$slidenav-active-color: rgba($global-color, 0.5) !default;
$slidenav-active-color: fade-out($global-color, 0.1) !default;
$slidenav-large-padding-vertical: 10px !default;
$slidenav-large-padding-horizontal: $slidenav-large-padding-vertical !default;
/* ================================================