diff --git a/code/libraries/joomlatools/component/koowa/resources/assets/css/admin-dark.css b/code/libraries/joomlatools/component/koowa/resources/assets/css/admin-dark.css index c965739c0..64ea7e638 100644 --- a/code/libraries/joomlatools/component/koowa/resources/assets/css/admin-dark.css +++ b/code/libraries/joomlatools/component/koowa/resources/assets/css/admin-dark.css @@ -3,18 +3,18 @@ button span.k-scopebar__item--filter__title, button span.k-scopebar__item--filte color: white; } -.k-ui-namespace .k-button--default, .k-ui-namespace .btn, .k-ui-namespace .btn { +.k-ui-namespace .k-button--default, .k-ui-namespace .btn { color: #212121 !important; } /* HTML - ========================================================================== */ + ========================================================================== */ /** - * 1. By using 100% we can work with full-height auto overflowing flexbox pages - * 2. Remove all spacing - * 3. Set basic font here. Other systems could set font on `
` element to override this. - * We're just making sure there's alwas a default font available - */ + * 1. By using 100% we can work with full-height auto overflowing flexbox pages + * 2. Remove all spacing + * 3. Set basic font here. Other systems could set font on `` element to override this. + * We're just making sure there's alwas a default font available + */ html { min-height: 100%; /* 1 */ @@ -38,13 +38,13 @@ html { } /* Body - ========================================================================== */ + ========================================================================== */ /** - * 1. By using 100% we can work with full-height auto overflowing flexbox pages - * 2. Remove all spacing - * 3. Setting up flexbox - * 4. Hide overflowing content on resizing to make sure we never get any weird jumping scrollbar issues - */ + * 1. By using 100% we can work with full-height auto overflowing flexbox pages + * 2. Remove all spacing + * 3. Setting up flexbox + * 4. Hide overflowing content on resizing to make sure we never get any weird jumping scrollbar issues + */ body { min-height: 100%; /* 1 */ @@ -55,29 +55,25 @@ body { margin: 0; /* 2 */ /** - * Setup flexbox - */ - display: -ms-flexbox; + * Setup flexbox + */ display: flex; /* 3 */ - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; /* 3 */ - -ms-flex: 1 1 auto; - flex: 1 1 auto; + flex: 1 1 auto; /* 3 */ /** - * When resizing - */ + * When resizing + */ } - body.k-is-resizing { overflow: hidden; /* 4 */ } /* Custom icon font - ========================================================================== */ + ========================================================================== */ @font-face { font-family: "k-icons"; src: url("../fonts/k-icons/k-icons.eot"); @@ -85,20 +81,18 @@ body.k-is-resizing { font-weight: normal; font-style: normal; } - /** - * Use SVG - * - * Always use SVG on touch / mobile - */ + * Use SVG + * + * Always use SVG on touch / mobile + */ @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "k-icons"; src: url("../fonts/k-icons/k-icons.svg#k-icons") format("svg"); } } - -.k-icon-account-login, .k-icon-account-logout, .k-icon-action-redo, .k-icon-action-undo, .k-icon-align-center, .k-icon-align-left, .k-icon-align-right, .k-icon-aperture, .k-icon-arrow-bottom, .k-icon-arrow-circle-bottom, .k-icon-arrow-circle-left, .k-icon-arrow-circle-right, .k-icon-arrow-circle-top, .k-icon-arrow-left, .k-icon-arrow-right, .k-icon-arrow-thick-bottom, .k-icon-arrow-thick-left, .k-icon-arrow-thick-right, .k-icon-arrow-thick-top, .k-icon-arrow-top, .k-icon-audio-spectrum, .k-icon-audio, .k-icon-badge, .k-icon-ban, .k-icon-bar-chart, .k-icon-basket, .k-icon-battery-empty, .k-icon-battery-full, .k-icon-beaker, .k-icon-bell, .k-icon-bluetooth, .k-icon-bold, .k-icon-bolt, .k-icon-book, .k-icon-bookmark, .k-icon-box, .k-icon-briefcase, .k-icon-british-pound, .k-icon-browser, .k-icon-brush, .k-icon-bug, .k-icon-bullhorn, .k-icon-calculator, .k-icon-calendar, .k-icon-camera-slr, .k-icon-caret-bottom, .k-icon-caret-left, .k-icon-caret-right, .k-icon-caret-top, .k-icon-cart, .k-icon-chat, .k-icon-check, .k-icon-chevron-bottom, .k-icon-chevron-left, .k-icon-chevron-right, .k-icon-chevron-top, .k-icon-circle-check, .k-icon-circle-x, .k-icon-clipboard, .k-icon-clock, .k-icon-cloud-download, .k-icon-cloud-upload, .k-icon-cloud, .k-icon-cloudy, .k-icon-code, .k-icon-cog, .k-icon-collapse-down, .k-icon-collapse-left, .k-icon-collapse-right, .k-icon-collapse-up, .k-icon-command, .k-icon-comment-square, .k-icon-compass, .k-icon-contrast, .k-icon-copywriting, .k-icon-credit-card, .k-icon-crop, .k-icon-dashboard, .k-icon-data-transfer-download, .k-icon-data-transfer-upload, .k-icon-delete, .k-icon-dial, .k-icon-document, .k-icon-dollar, .k-icon-double-quote-sans-left, .k-icon-double-quote-sans-right, .k-icon-double-quote-serif-left, .k-icon-double-quote-serif-right, .k-icon-droplet, .k-icon-eject, .k-icon-elevator, .k-icon-ellipses, .k-icon-envelope-closed, .k-icon-envelope-open, .k-icon-euro, .k-icon-excerpt, .k-icon-expand-down, .k-icon-expand-left, .k-icon-expand-right, .k-icon-expand-up, .k-icon-external-link, .k-icon-eye, .k-icon-eyedropper, .k-icon-file, .k-icon-fire, .k-icon-flag, .k-icon-flash, .k-icon-folder, .k-icon-fork, .k-icon-fullscreen-enter, .k-icon-fullscreen-exit, .k-icon-globe, .k-icon-graph, .k-icon-grid-four-up, .k-icon-grid-three-up, .k-icon-grid-two-up, .k-icon-hard-drive, .k-icon-header, .k-icon-headphones, .k-icon-heart, .k-icon-home, .k-icon-image, .k-icon-inbox, .k-icon-infinity, .k-icon-info, .k-icon-italic, .k-icon-justify-center, .k-icon-justify-left, .k-icon-justify-right, .k-icon-key, .k-icon-laptop, .k-icon-layers, .k-icon-lightbulb, .k-icon-link-broken, .k-icon-link-intact, .k-icon-list-rich, .k-icon-list, .k-icon-location, .k-icon-lock-locked, .k-icon-lock-unlocked, .k-icon-loop-circular, .k-icon-loop-square, .k-icon-loop, .k-icon-magnifying-glass, .k-icon-map-marker, .k-icon-map, .k-icon-media-pause, .k-icon-media-play, .k-icon-media-record, .k-icon-media-skip-backward, .k-icon-media-skip-forward, .k-icon-media-step-backward, .k-icon-media-step-forward, .k-icon-media-stop, .k-icon-medical-cross, .k-icon-menu, .k-icon-microphone, .k-icon-minus, .k-icon-monitor, .k-icon-moon, .k-icon-move, .k-icon-musical-note, .k-icon-paperclip, .k-icon-pencil, .k-icon-people, .k-icon-person, .k-icon-phone, .k-icon-pie-chart, .k-icon-pin, .k-icon-play-circle, .k-icon-plus, .k-icon-power-standby, .k-icon-print, .k-icon-project, .k-icon-pulse, .k-icon-puzzle-piece, .k-icon-question-mark, .k-icon-rain, .k-icon-random, .k-icon-reload, .k-icon-resize-both, .k-icon-resize-height, .k-icon-resize-width, .k-icon-rss-alt, .k-icon-rss, .k-icon-script, .k-icon-share-boxed, .k-icon-share, .k-icon-shield, .k-icon-signal, .k-icon-signpost, .k-icon-sort-ascending, .k-icon-sort-descending, .k-icon-spreadsheet, .k-icon-star, .k-icon-sun, .k-icon-tablet, .k-icon-tag, .k-icon-tags, .k-icon-target, .k-icon-task, .k-icon-terminal, .k-icon-text, .k-icon-thumb-down, .k-icon-thumb-up, .k-icon-timer, .k-icon-transfer, .k-icon-trash, .k-icon-underline, .k-icon-vertical-align-bottom, .k-icon-vertical-align-center, .k-icon-vertical-align-top, .k-icon-video, .k-icon-volume-high, .k-icon-volume-low, .k-icon-volume-off, .k-icon-warning, .k-icon-wifi, .k-icon-wrench, .k-icon-x, .k-icon-yen, .k-icon-zoom-in, .k-icon-zoom-out, .k-icon-close, .k-icon-disabled, .k-icon-document-archive, .k-icon-document-audio, .k-icon-document-default, .k-icon-document-document, .k-icon-document-folder, .k-icon-document-image, .k-icon-document-pdf, .k-icon-document-spreadsheet, .k-icon-document-video, .k-icon-documents, .k-icon-enabled, .k-icon-filter, .k-icon-folder-closed, .k-icon-folder-opened, .k-icon-menu-closed, .k-icon-menu-opened, .k-icon-open, .k-appearance .k-ui-namespace input[type="checkbox"]:before, .k-ui-namespace .k-sidebar-item--toggle .k-sidebar-item__toggle:after, .footable.breakpoint .footable-toggle:after { +.footable.breakpoint .footable-toggle:after, .k-ui-namespace .k-sidebar-item--toggle .k-sidebar-item__toggle:after, .k-appearance .k-ui-namespace input[type=checkbox]:before, .k-icon-open, .k-icon-menu-opened, .k-icon-menu-closed, .k-icon-folder-opened, .k-icon-folder-closed, .k-icon-filter, .k-icon-enabled, .k-icon-documents, .k-icon-document-video, .k-icon-document-spreadsheet, .k-icon-document-pdf, .k-icon-document-image, .k-icon-document-folder, .k-icon-document-document, .k-icon-document-default, .k-icon-document-audio, .k-icon-document-archive, .k-icon-disabled, .k-icon-close, .k-icon-zoom-out, .k-icon-zoom-in, .k-icon-yen, .k-icon-x, .k-icon-wrench, .k-icon-wifi, .k-icon-warning, .k-icon-volume-off, .k-icon-volume-low, .k-icon-volume-high, .k-icon-video, .k-icon-vertical-align-top, .k-icon-vertical-align-center, .k-icon-vertical-align-bottom, .k-icon-underline, .k-icon-trash, .k-icon-transfer, .k-icon-timer, .k-icon-thumb-up, .k-icon-thumb-down, .k-icon-text, .k-icon-terminal, .k-icon-task, .k-icon-target, .k-icon-tags, .k-icon-tag, .k-icon-tablet, .k-icon-sun, .k-icon-star, .k-icon-spreadsheet, .k-icon-sort-descending, .k-icon-sort-ascending, .k-icon-signpost, .k-icon-signal, .k-icon-shield, .k-icon-share, .k-icon-share-boxed, .k-icon-script, .k-icon-rss, .k-icon-rss-alt, .k-icon-resize-width, .k-icon-resize-height, .k-icon-resize-both, .k-icon-reload, .k-icon-random, .k-icon-rain, .k-icon-question-mark, .k-icon-puzzle-piece, .k-icon-pulse, .k-icon-project, .k-icon-print, .k-icon-power-standby, .k-icon-plus, .k-icon-play-circle, .k-icon-pin, .k-icon-pie-chart, .k-icon-phone, .k-icon-person, .k-icon-people, .k-icon-pencil, .k-icon-paperclip, .k-icon-musical-note, .k-icon-move, .k-icon-moon, .k-icon-monitor, .k-icon-minus, .k-icon-microphone, .k-icon-menu, .k-icon-medical-cross, .k-icon-media-stop, .k-icon-media-step-forward, .k-icon-media-step-backward, .k-icon-media-skip-forward, .k-icon-media-skip-backward, .k-icon-media-record, .k-icon-media-play, .k-icon-media-pause, .k-icon-map, .k-icon-map-marker, .k-icon-magnifying-glass, .k-icon-loop, .k-icon-loop-square, .k-icon-loop-circular, .k-icon-lock-unlocked, .k-icon-lock-locked, .k-icon-location, .k-icon-list, .k-icon-list-rich, .k-icon-link-intact, .k-icon-link-broken, .k-icon-lightbulb, .k-icon-layers, .k-icon-laptop, .k-icon-key, .k-icon-justify-right, .k-icon-justify-left, .k-icon-justify-center, .k-icon-italic, .k-icon-info, .k-icon-infinity, .k-icon-inbox, .k-icon-image, .k-icon-home, .k-icon-heart, .k-icon-headphones, .k-icon-header, .k-icon-hard-drive, .k-icon-grid-two-up, .k-icon-grid-three-up, .k-icon-grid-four-up, .k-icon-graph, .k-icon-globe, .k-icon-fullscreen-exit, .k-icon-fullscreen-enter, .k-icon-fork, .k-icon-folder, .k-icon-flash, .k-icon-flag, .k-icon-fire, .k-icon-file, .k-icon-eyedropper, .k-icon-eye, .k-icon-external-link, .k-icon-expand-up, .k-icon-expand-right, .k-icon-expand-left, .k-icon-expand-down, .k-icon-excerpt, .k-icon-euro, .k-icon-envelope-open, .k-icon-envelope-closed, .k-icon-ellipses, .k-icon-elevator, .k-icon-eject, .k-icon-droplet, .k-icon-double-quote-serif-right, .k-icon-double-quote-serif-left, .k-icon-double-quote-sans-right, .k-icon-double-quote-sans-left, .k-icon-dollar, .k-icon-document, .k-icon-dial, .k-icon-delete, .k-icon-data-transfer-upload, .k-icon-data-transfer-download, .k-icon-dashboard, .k-icon-crop, .k-icon-credit-card, .k-icon-copywriting, .k-icon-contrast, .k-icon-compass, .k-icon-comment-square, .k-icon-command, .k-icon-collapse-up, .k-icon-collapse-right, .k-icon-collapse-left, .k-icon-collapse-down, .k-icon-cog, .k-icon-code, .k-icon-cloudy, .k-icon-cloud, .k-icon-cloud-upload, .k-icon-cloud-download, .k-icon-clock, .k-icon-clipboard, .k-icon-circle-x, .k-icon-circle-check, .k-icon-chevron-top, .k-icon-chevron-right, .k-icon-chevron-left, .k-icon-chevron-bottom, .k-icon-check, .k-icon-chat, .k-icon-cart, .k-icon-caret-top, .k-icon-caret-right, .k-icon-caret-left, .k-icon-caret-bottom, .k-icon-camera-slr, .k-icon-calendar, .k-icon-calculator, .k-icon-bullhorn, .k-icon-bug, .k-icon-brush, .k-icon-browser, .k-icon-british-pound, .k-icon-briefcase, .k-icon-box, .k-icon-bookmark, .k-icon-book, .k-icon-bolt, .k-icon-bold, .k-icon-bluetooth, .k-icon-bell, .k-icon-beaker, .k-icon-battery-full, .k-icon-battery-empty, .k-icon-basket, .k-icon-bar-chart, .k-icon-ban, .k-icon-badge, .k-icon-audio, .k-icon-audio-spectrum, .k-icon-arrow-top, .k-icon-arrow-thick-top, .k-icon-arrow-thick-right, .k-icon-arrow-thick-left, .k-icon-arrow-thick-bottom, .k-icon-arrow-right, .k-icon-arrow-left, .k-icon-arrow-circle-top, .k-icon-arrow-circle-right, .k-icon-arrow-circle-left, .k-icon-arrow-circle-bottom, .k-icon-arrow-bottom, .k-icon-aperture, .k-icon-align-right, .k-icon-align-left, .k-icon-align-center, .k-icon-action-undo, .k-icon-action-redo, .k-icon-account-logout, .k-icon-account-login { speak: none; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; @@ -109,10 +103,9 @@ body.k-is-resizing { font-style: normal; font-variant: normal; font-weight: normal; - font-family: 'k-icons'; + font-family: "k-icons"; } - -.k-icon-account-login:before, .k-icon-account-logout:before, .k-icon-action-redo:before, .k-icon-action-undo:before, .k-icon-align-center:before, .k-icon-align-left:before, .k-icon-align-right:before, .k-icon-aperture:before, .k-icon-arrow-bottom:before, .k-icon-arrow-circle-bottom:before, .k-icon-arrow-circle-left:before, .k-icon-arrow-circle-right:before, .k-icon-arrow-circle-top:before, .k-icon-arrow-left:before, .k-icon-arrow-right:before, .k-icon-arrow-thick-bottom:before, .k-icon-arrow-thick-left:before, .k-icon-arrow-thick-right:before, .k-icon-arrow-thick-top:before, .k-icon-arrow-top:before, .k-icon-audio-spectrum:before, .k-icon-audio:before, .k-icon-badge:before, .k-icon-ban:before, .k-icon-bar-chart:before, .k-icon-basket:before, .k-icon-battery-empty:before, .k-icon-battery-full:before, .k-icon-beaker:before, .k-icon-bell:before, .k-icon-bluetooth:before, .k-icon-bold:before, .k-icon-bolt:before, .k-icon-book:before, .k-icon-bookmark:before, .k-icon-box:before, .k-icon-briefcase:before, .k-icon-british-pound:before, .k-icon-browser:before, .k-icon-brush:before, .k-icon-bug:before, .k-icon-bullhorn:before, .k-icon-calculator:before, .k-icon-calendar:before, .k-icon-camera-slr:before, .k-icon-caret-bottom:before, .k-icon-caret-left:before, .k-icon-caret-right:before, .k-icon-caret-top:before, .k-icon-cart:before, .k-icon-chat:before, .k-icon-check:before, .k-icon-chevron-bottom:before, .k-icon-chevron-left:before, .k-icon-chevron-right:before, .k-icon-chevron-top:before, .k-icon-circle-check:before, .k-icon-circle-x:before, .k-icon-clipboard:before, .k-icon-clock:before, .k-icon-cloud-download:before, .k-icon-cloud-upload:before, .k-icon-cloud:before, .k-icon-cloudy:before, .k-icon-code:before, .k-icon-cog:before, .k-icon-collapse-down:before, .k-icon-collapse-left:before, .k-icon-collapse-right:before, .k-icon-collapse-up:before, .k-icon-command:before, .k-icon-comment-square:before, .k-icon-compass:before, .k-icon-contrast:before, .k-icon-copywriting:before, .k-icon-credit-card:before, .k-icon-crop:before, .k-icon-dashboard:before, .k-icon-data-transfer-download:before, .k-icon-data-transfer-upload:before, .k-icon-delete:before, .k-icon-dial:before, .k-icon-document:before, .k-icon-dollar:before, .k-icon-double-quote-sans-left:before, .k-icon-double-quote-sans-right:before, .k-icon-double-quote-serif-left:before, .k-icon-double-quote-serif-right:before, .k-icon-droplet:before, .k-icon-eject:before, .k-icon-elevator:before, .k-icon-ellipses:before, .k-icon-envelope-closed:before, .k-icon-envelope-open:before, .k-icon-euro:before, .k-icon-excerpt:before, .k-icon-expand-down:before, .k-icon-expand-left:before, .k-icon-expand-right:before, .k-icon-expand-up:before, .k-icon-external-link:before, .k-icon-eye:before, .k-icon-eyedropper:before, .k-icon-file:before, .k-icon-fire:before, .k-icon-flag:before, .k-icon-flash:before, .k-icon-folder:before, .k-icon-fork:before, .k-icon-fullscreen-enter:before, .k-icon-fullscreen-exit:before, .k-icon-globe:before, .k-icon-graph:before, .k-icon-grid-four-up:before, .k-icon-grid-three-up:before, .k-icon-grid-two-up:before, .k-icon-hard-drive:before, .k-icon-header:before, .k-icon-headphones:before, .k-icon-heart:before, .k-icon-home:before, .k-icon-image:before, .k-icon-inbox:before, .k-icon-infinity:before, .k-icon-info:before, .k-icon-italic:before, .k-icon-justify-center:before, .k-icon-justify-left:before, .k-icon-justify-right:before, .k-icon-key:before, .k-icon-laptop:before, .k-icon-layers:before, .k-icon-lightbulb:before, .k-icon-link-broken:before, .k-icon-link-intact:before, .k-icon-list-rich:before, .k-icon-list:before, .k-icon-location:before, .k-icon-lock-locked:before, .k-icon-lock-unlocked:before, .k-icon-loop-circular:before, .k-icon-loop-square:before, .k-icon-loop:before, .k-icon-magnifying-glass:before, .k-icon-map-marker:before, .k-icon-map:before, .k-icon-media-pause:before, .k-icon-media-play:before, .k-icon-media-record:before, .k-icon-media-skip-backward:before, .k-icon-media-skip-forward:before, .k-icon-media-step-backward:before, .k-icon-media-step-forward:before, .k-icon-media-stop:before, .k-icon-medical-cross:before, .k-icon-menu:before, .k-icon-microphone:before, .k-icon-minus:before, .k-icon-monitor:before, .k-icon-moon:before, .k-icon-move:before, .k-icon-musical-note:before, .k-icon-paperclip:before, .k-icon-pencil:before, .k-icon-people:before, .k-icon-person:before, .k-icon-phone:before, .k-icon-pie-chart:before, .k-icon-pin:before, .k-icon-play-circle:before, .k-icon-plus:before, .k-icon-power-standby:before, .k-icon-print:before, .k-icon-project:before, .k-icon-pulse:before, .k-icon-puzzle-piece:before, .k-icon-question-mark:before, .k-icon-rain:before, .k-icon-random:before, .k-icon-reload:before, .k-icon-resize-both:before, .k-icon-resize-height:before, .k-icon-resize-width:before, .k-icon-rss-alt:before, .k-icon-rss:before, .k-icon-script:before, .k-icon-share-boxed:before, .k-icon-share:before, .k-icon-shield:before, .k-icon-signal:before, .k-icon-signpost:before, .k-icon-sort-ascending:before, .k-icon-sort-descending:before, .k-icon-spreadsheet:before, .k-icon-star:before, .k-icon-sun:before, .k-icon-tablet:before, .k-icon-tag:before, .k-icon-tags:before, .k-icon-target:before, .k-icon-task:before, .k-icon-terminal:before, .k-icon-text:before, .k-icon-thumb-down:before, .k-icon-thumb-up:before, .k-icon-timer:before, .k-icon-transfer:before, .k-icon-trash:before, .k-icon-underline:before, .k-icon-vertical-align-bottom:before, .k-icon-vertical-align-center:before, .k-icon-vertical-align-top:before, .k-icon-video:before, .k-icon-volume-high:before, .k-icon-volume-low:before, .k-icon-volume-off:before, .k-icon-warning:before, .k-icon-wifi:before, .k-icon-wrench:before, .k-icon-x:before, .k-icon-yen:before, .k-icon-zoom-in:before, .k-icon-zoom-out:before, .k-icon-close:before, .k-icon-disabled:before, .k-icon-document-archive:before, .k-icon-document-audio:before, .k-icon-document-default:before, .k-icon-document-document:before, .k-icon-document-folder:before, .k-icon-document-image:before, .k-icon-document-pdf:before, .k-icon-document-spreadsheet:before, .k-icon-document-video:before, .k-icon-documents:before, .k-icon-enabled:before, .k-icon-filter:before, .k-icon-folder-closed:before, .k-icon-folder-opened:before, .k-icon-menu-closed:before, .k-icon-menu-opened:before, .k-icon-open:before, .k-appearance .k-ui-namespace input[type="checkbox"]:before { +.k-appearance .k-ui-namespace input[type=checkbox]:before, .k-icon-open:before, .k-icon-menu-opened:before, .k-icon-menu-closed:before, .k-icon-folder-opened:before, .k-icon-folder-closed:before, .k-icon-filter:before, .k-icon-enabled:before, .k-icon-documents:before, .k-icon-document-video:before, .k-icon-document-spreadsheet:before, .k-icon-document-pdf:before, .k-icon-document-image:before, .k-icon-document-folder:before, .k-icon-document-document:before, .k-icon-document-default:before, .k-icon-document-audio:before, .k-icon-document-archive:before, .k-icon-disabled:before, .k-icon-close:before, .k-icon-zoom-out:before, .k-icon-zoom-in:before, .k-icon-yen:before, .k-icon-x:before, .k-icon-wrench:before, .k-icon-wifi:before, .k-icon-warning:before, .k-icon-volume-off:before, .k-icon-volume-low:before, .k-icon-volume-high:before, .k-icon-video:before, .k-icon-vertical-align-top:before, .k-icon-vertical-align-center:before, .k-icon-vertical-align-bottom:before, .k-icon-underline:before, .k-icon-trash:before, .k-icon-transfer:before, .k-icon-timer:before, .k-icon-thumb-up:before, .k-icon-thumb-down:before, .k-icon-text:before, .k-icon-terminal:before, .k-icon-task:before, .k-icon-target:before, .k-icon-tags:before, .k-icon-tag:before, .k-icon-tablet:before, .k-icon-sun:before, .k-icon-star:before, .k-icon-spreadsheet:before, .k-icon-sort-descending:before, .k-icon-sort-ascending:before, .k-icon-signpost:before, .k-icon-signal:before, .k-icon-shield:before, .k-icon-share:before, .k-icon-share-boxed:before, .k-icon-script:before, .k-icon-rss:before, .k-icon-rss-alt:before, .k-icon-resize-width:before, .k-icon-resize-height:before, .k-icon-resize-both:before, .k-icon-reload:before, .k-icon-random:before, .k-icon-rain:before, .k-icon-question-mark:before, .k-icon-puzzle-piece:before, .k-icon-pulse:before, .k-icon-project:before, .k-icon-print:before, .k-icon-power-standby:before, .k-icon-plus:before, .k-icon-play-circle:before, .k-icon-pin:before, .k-icon-pie-chart:before, .k-icon-phone:before, .k-icon-person:before, .k-icon-people:before, .k-icon-pencil:before, .k-icon-paperclip:before, .k-icon-musical-note:before, .k-icon-move:before, .k-icon-moon:before, .k-icon-monitor:before, .k-icon-minus:before, .k-icon-microphone:before, .k-icon-menu:before, .k-icon-medical-cross:before, .k-icon-media-stop:before, .k-icon-media-step-forward:before, .k-icon-media-step-backward:before, .k-icon-media-skip-forward:before, .k-icon-media-skip-backward:before, .k-icon-media-record:before, .k-icon-media-play:before, .k-icon-media-pause:before, .k-icon-map:before, .k-icon-map-marker:before, .k-icon-magnifying-glass:before, .k-icon-loop:before, .k-icon-loop-square:before, .k-icon-loop-circular:before, .k-icon-lock-unlocked:before, .k-icon-lock-locked:before, .k-icon-location:before, .k-icon-list:before, .k-icon-list-rich:before, .k-icon-link-intact:before, .k-icon-link-broken:before, .k-icon-lightbulb:before, .k-icon-layers:before, .k-icon-laptop:before, .k-icon-key:before, .k-icon-justify-right:before, .k-icon-justify-left:before, .k-icon-justify-center:before, .k-icon-italic:before, .k-icon-info:before, .k-icon-infinity:before, .k-icon-inbox:before, .k-icon-image:before, .k-icon-home:before, .k-icon-heart:before, .k-icon-headphones:before, .k-icon-header:before, .k-icon-hard-drive:before, .k-icon-grid-two-up:before, .k-icon-grid-three-up:before, .k-icon-grid-four-up:before, .k-icon-graph:before, .k-icon-globe:before, .k-icon-fullscreen-exit:before, .k-icon-fullscreen-enter:before, .k-icon-fork:before, .k-icon-folder:before, .k-icon-flash:before, .k-icon-flag:before, .k-icon-fire:before, .k-icon-file:before, .k-icon-eyedropper:before, .k-icon-eye:before, .k-icon-external-link:before, .k-icon-expand-up:before, .k-icon-expand-right:before, .k-icon-expand-left:before, .k-icon-expand-down:before, .k-icon-excerpt:before, .k-icon-euro:before, .k-icon-envelope-open:before, .k-icon-envelope-closed:before, .k-icon-ellipses:before, .k-icon-elevator:before, .k-icon-eject:before, .k-icon-droplet:before, .k-icon-double-quote-serif-right:before, .k-icon-double-quote-serif-left:before, .k-icon-double-quote-sans-right:before, .k-icon-double-quote-sans-left:before, .k-icon-dollar:before, .k-icon-document:before, .k-icon-dial:before, .k-icon-delete:before, .k-icon-data-transfer-upload:before, .k-icon-data-transfer-download:before, .k-icon-dashboard:before, .k-icon-crop:before, .k-icon-credit-card:before, .k-icon-copywriting:before, .k-icon-contrast:before, .k-icon-compass:before, .k-icon-comment-square:before, .k-icon-command:before, .k-icon-collapse-up:before, .k-icon-collapse-right:before, .k-icon-collapse-left:before, .k-icon-collapse-down:before, .k-icon-cog:before, .k-icon-code:before, .k-icon-cloudy:before, .k-icon-cloud:before, .k-icon-cloud-upload:before, .k-icon-cloud-download:before, .k-icon-clock:before, .k-icon-clipboard:before, .k-icon-circle-x:before, .k-icon-circle-check:before, .k-icon-chevron-top:before, .k-icon-chevron-right:before, .k-icon-chevron-left:before, .k-icon-chevron-bottom:before, .k-icon-check:before, .k-icon-chat:before, .k-icon-cart:before, .k-icon-caret-top:before, .k-icon-caret-right:before, .k-icon-caret-left:before, .k-icon-caret-bottom:before, .k-icon-camera-slr:before, .k-icon-calendar:before, .k-icon-calculator:before, .k-icon-bullhorn:before, .k-icon-bug:before, .k-icon-brush:before, .k-icon-browser:before, .k-icon-british-pound:before, .k-icon-briefcase:before, .k-icon-box:before, .k-icon-bookmark:before, .k-icon-book:before, .k-icon-bolt:before, .k-icon-bold:before, .k-icon-bluetooth:before, .k-icon-bell:before, .k-icon-beaker:before, .k-icon-battery-full:before, .k-icon-battery-empty:before, .k-icon-basket:before, .k-icon-bar-chart:before, .k-icon-ban:before, .k-icon-badge:before, .k-icon-audio:before, .k-icon-audio-spectrum:before, .k-icon-arrow-top:before, .k-icon-arrow-thick-top:before, .k-icon-arrow-thick-right:before, .k-icon-arrow-thick-left:before, .k-icon-arrow-thick-bottom:before, .k-icon-arrow-right:before, .k-icon-arrow-left:before, .k-icon-arrow-circle-top:before, .k-icon-arrow-circle-right:before, .k-icon-arrow-circle-left:before, .k-icon-arrow-circle-bottom:before, .k-icon-arrow-bottom:before, .k-icon-aperture:before, .k-icon-align-right:before, .k-icon-align-left:before, .k-icon-align-center:before, .k-icon-action-undo:before, .k-icon-action-redo:before, .k-icon-account-logout:before, .k-icon-account-login:before { display: inline-block; margin: auto; width: 1em; @@ -121,41 +114,41 @@ body.k-is-resizing { } /** - * Icon classes - * - * Creating a class name for each individual icon to be used in markup like: - * - */ + * Icon classes + * + * Creating a class name for each individual icon to be used in markup like: + * + */ .k-icon-account-login:before { content: ""; } - -[dir="rtl"] .k-icon-account-login:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-account-login:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-account-logout:before { content: ""; } - -[dir="rtl"] .k-icon-account-logout:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-account-logout:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-action-redo:before { content: ""; } - -[dir="rtl"] .k-icon-action-redo:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-action-redo:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-action-undo:before { content: ""; } - -[dir="rtl"] .k-icon-action-undo:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-action-undo:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-align-center:before { @@ -165,17 +158,17 @@ body.k-is-resizing { .k-icon-align-left:before { content: ""; } - -[dir="rtl"] .k-icon-align-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-align-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-align-right:before { content: ""; } - -[dir="rtl"] .k-icon-align-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-align-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-aperture:before { @@ -193,17 +186,17 @@ body.k-is-resizing { .k-icon-arrow-circle-left:before { content: ""; } - -[dir="rtl"] .k-icon-arrow-circle-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-arrow-circle-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-arrow-circle-right:before { content: ""; } - -[dir="rtl"] .k-icon-arrow-circle-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-arrow-circle-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-arrow-circle-top:before { @@ -213,17 +206,17 @@ body.k-is-resizing { .k-icon-arrow-left:before { content: ""; } - -[dir="rtl"] .k-icon-arrow-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-arrow-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-arrow-right:before { content: ""; } - -[dir="rtl"] .k-icon-arrow-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-arrow-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-arrow-thick-bottom:before { @@ -233,17 +226,17 @@ body.k-is-resizing { .k-icon-arrow-thick-left:before { content: ""; } - -[dir="rtl"] .k-icon-arrow-thick-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-arrow-thick-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-arrow-thick-right:before { content: ""; } - -[dir="rtl"] .k-icon-arrow-thick-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-arrow-thick-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-arrow-thick-top:before { @@ -273,9 +266,9 @@ body.k-is-resizing { .k-icon-bar-chart:before { content: ""; } - -[dir="rtl"] .k-icon-bar-chart:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-bar-chart:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-basket:before { @@ -313,9 +306,9 @@ body.k-is-resizing { .k-icon-book:before { content: ""; } - -[dir="rtl"] .k-icon-book:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-book:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-bookmark:before { @@ -337,17 +330,17 @@ body.k-is-resizing { .k-icon-browser:before { content: ""; } - -[dir="rtl"] .k-icon-browser:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-browser:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-brush:before { content: ""; } - -[dir="rtl"] .k-icon-brush:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-brush:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-bug:before { @@ -357,25 +350,25 @@ body.k-is-resizing { .k-icon-bullhorn:before { content: ""; } - -[dir="rtl"] .k-icon-bullhorn:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-bullhorn:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-calculator:before { content: ""; } - -[dir="rtl"] .k-icon-calculator:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-calculator:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-calendar:before { content: ""; } - -[dir="rtl"] .k-icon-calendar:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-calendar:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-camera-slr:before { @@ -389,17 +382,17 @@ body.k-is-resizing { .k-icon-caret-left:before { content: ""; } - -[dir="rtl"] .k-icon-caret-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-caret-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-caret-right:before { content: ""; } - -[dir="rtl"] .k-icon-caret-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-caret-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-caret-top:before { @@ -425,17 +418,17 @@ body.k-is-resizing { .k-icon-chevron-left:before { content: ""; } - -[dir="rtl"] .k-icon-chevron-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-chevron-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-chevron-right:before { content: ""; } - -[dir="rtl"] .k-icon-chevron-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-chevron-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-chevron-top:before { @@ -489,17 +482,17 @@ body.k-is-resizing { .k-icon-collapse-left:before { content: ""; } - -[dir="rtl"] .k-icon-collapse-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-collapse-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-collapse-right:before { content: ""; } - -[dir="rtl"] .k-icon-collapse-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-collapse-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-collapse-up:before { @@ -513,9 +506,9 @@ body.k-is-resizing { .k-icon-comment-square:before { content: ""; } - -[dir="rtl"] .k-icon-comment-square:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-comment-square:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-compass:before { @@ -529,9 +522,9 @@ body.k-is-resizing { .k-icon-copywriting:before { content: ""; } - -[dir="rtl"] .k-icon-copywriting:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-copywriting:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-credit-card:before { @@ -557,9 +550,9 @@ body.k-is-resizing { .k-icon-delete:before { content: ""; } - -[dir="rtl"] .k-icon-delete:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-delete:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-dial:before { @@ -569,9 +562,9 @@ body.k-is-resizing { .k-icon-document:before { content: ""; } - -[dir="rtl"] .k-icon-document:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-document:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-dollar:before { @@ -581,33 +574,33 @@ body.k-is-resizing { .k-icon-double-quote-sans-left:before { content: ""; } - -[dir="rtl"] .k-icon-double-quote-sans-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-double-quote-sans-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-double-quote-sans-right:before { content: ""; } - -[dir="rtl"] .k-icon-double-quote-sans-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-double-quote-sans-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-double-quote-serif-left:before { content: ""; } - -[dir="rtl"] .k-icon-double-quote-serif-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-double-quote-serif-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-double-quote-serif-right:before { content: ""; } - -[dir="rtl"] .k-icon-double-quote-serif-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-double-quote-serif-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-droplet:before { @@ -649,17 +642,17 @@ body.k-is-resizing { .k-icon-expand-left:before { content: ""; } - -[dir="rtl"] .k-icon-expand-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-expand-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-expand-right:before { content: ""; } - -[dir="rtl"] .k-icon-expand-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-expand-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-expand-up:before { @@ -669,9 +662,9 @@ body.k-is-resizing { .k-icon-external-link:before { content: ""; } - -[dir="rtl"] .k-icon-external-link:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-external-link:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-eye:before { @@ -681,33 +674,33 @@ body.k-is-resizing { .k-icon-eyedropper:before { content: ""; } - -[dir="rtl"] .k-icon-eyedropper:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-eyedropper:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-file:before { content: ""; } - -[dir="rtl"] .k-icon-file:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-file:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-fire:before { content: ""; } - -[dir="rtl"] .k-icon-fire:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-fire:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-flag:before { content: ""; } - -[dir="rtl"] .k-icon-flag:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-flag:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-flash:before { @@ -717,9 +710,9 @@ body.k-is-resizing { .k-icon-folder:before { content: ""; } - -[dir="rtl"] .k-icon-folder:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-folder:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-fork:before { @@ -741,9 +734,9 @@ body.k-is-resizing { .k-icon-graph:before { content: ""; } - -[dir="rtl"] .k-icon-graph:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-graph:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-grid-four-up:before { @@ -793,17 +786,17 @@ body.k-is-resizing { .k-icon-info:before { content: ""; } - -[dir="rtl"] .k-icon-info:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-info:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-italic:before { content: ""; } - -[dir="rtl"] .k-icon-italic:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-italic:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-justify-center:before { @@ -813,25 +806,25 @@ body.k-is-resizing { .k-icon-justify-left:before { content: ""; } - -[dir="rtl"] .k-icon-justify-left:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-justify-left:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-justify-right:before { content: ""; } - -[dir="rtl"] .k-icon-justify-right:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-justify-right:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-key:before { content: ""; } - -[dir="rtl"] .k-icon-key:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-key:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-laptop:before { @@ -841,9 +834,9 @@ body.k-is-resizing { .k-icon-layers:before { content: ""; } - -[dir="rtl"] .k-icon-layers:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-layers:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-lightbulb:before { @@ -853,33 +846,33 @@ body.k-is-resizing { .k-icon-link-broken:before { content: ""; } - -[dir="rtl"] .k-icon-link-broken:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-link-broken:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-link-intact:before { content: ""; } - -[dir="rtl"] .k-icon-link-intact:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-link-intact:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-list-rich:before { content: ""; } - -[dir="rtl"] .k-icon-list-rich:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-list-rich:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-list:before { content: ""; } - -[dir="rtl"] .k-icon-list:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-list:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-location:before { @@ -909,9 +902,9 @@ body.k-is-resizing { .k-icon-magnifying-glass:before { content: ""; } - -[dir="rtl"] .k-icon-magnifying-glass:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-magnifying-glass:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-map-marker:before { @@ -929,9 +922,9 @@ body.k-is-resizing { .k-icon-media-play:before { content: ""; } - -[dir="rtl"] .k-icon-media-play:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-media-play:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-media-record:before { @@ -941,33 +934,33 @@ body.k-is-resizing { .k-icon-media-skip-backward:before { content: ""; } - -[dir="rtl"] .k-icon-media-skip-backward:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-media-skip-backward:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-media-skip-forward:before { content: ""; } - -[dir="rtl"] .k-icon-media-skip-forward:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-media-skip-forward:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-media-step-backward:before { content: ""; } - -[dir="rtl"] .k-icon-media-step-backward:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-media-step-backward:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-media-step-forward:before { content: ""; } - -[dir="rtl"] .k-icon-media-step-forward:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-media-step-forward:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-media-stop:before { @@ -1009,25 +1002,25 @@ body.k-is-resizing { .k-icon-paperclip:before { content: ""; } - -[dir="rtl"] .k-icon-paperclip:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-paperclip:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-pencil:before { content: ""; } - -[dir="rtl"] .k-icon-pencil:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-pencil:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-people:before { content: ""; } - -[dir="rtl"] .k-icon-people:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-people:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-person:before { @@ -1041,9 +1034,9 @@ body.k-is-resizing { .k-icon-pie-chart:before { content: ""; } - -[dir="rtl"] .k-icon-pie-chart:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-pie-chart:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-pin:before { @@ -1053,9 +1046,9 @@ body.k-is-resizing { .k-icon-play-circle:before { content: ""; } - -[dir="rtl"] .k-icon-play-circle:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-play-circle:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-plus:before { @@ -1073,9 +1066,9 @@ body.k-is-resizing { .k-icon-project:before { content: ""; } - -[dir="rtl"] .k-icon-project:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-project:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-pulse:before { @@ -1089,9 +1082,9 @@ body.k-is-resizing { .k-icon-question-mark:before { content: ""; } - -[dir="rtl"] .k-icon-question-mark:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-question-mark:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-rain:before { @@ -1105,9 +1098,9 @@ body.k-is-resizing { .k-icon-reload:before { content: ""; } - -[dir="rtl"] .k-icon-reload:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-reload:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-resize-both:before { @@ -1137,17 +1130,17 @@ body.k-is-resizing { .k-icon-share-boxed:before { content: ""; } - -[dir="rtl"] .k-icon-share-boxed:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-share-boxed:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-share:before { content: ""; } - -[dir="rtl"] .k-icon-share:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-share:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-shield:before { @@ -1157,9 +1150,9 @@ body.k-is-resizing { .k-icon-signal:before { content: ""; } - -[dir="rtl"] .k-icon-signal:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-signal:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-signpost:before { @@ -1169,25 +1162,25 @@ body.k-is-resizing { .k-icon-sort-ascending:before { content: ""; } - -[dir="rtl"] .k-icon-sort-ascending:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-sort-ascending:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-sort-descending:before { content: ""; } - -[dir="rtl"] .k-icon-sort-descending:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-sort-descending:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-spreadsheet:before { content: ""; } - -[dir="rtl"] .k-icon-spreadsheet:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-spreadsheet:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-star:before { @@ -1205,17 +1198,17 @@ body.k-is-resizing { .k-icon-tag:before { content: ""; } - -[dir="rtl"] .k-icon-tag:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-tag:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-tags:before { content: ""; } - -[dir="rtl"] .k-icon-tags:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-tags:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-target:before { @@ -1273,33 +1266,33 @@ body.k-is-resizing { .k-icon-video:before { content: ""; } - -[dir="rtl"] .k-icon-video:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-video:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-volume-high:before { content: ""; } - -[dir="rtl"] .k-icon-volume-high:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-volume-high:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-volume-low:before { content: ""; } - -[dir="rtl"] .k-icon-volume-low:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-volume-low:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-volume-off:before { content: ""; } - -[dir="rtl"] .k-icon-volume-off:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-volume-off:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-warning:before { @@ -1313,9 +1306,9 @@ body.k-is-resizing { .k-icon-wrench:before { content: ""; } - -[dir="rtl"] .k-icon-wrench:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-wrench:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-x:before { @@ -1329,17 +1322,17 @@ body.k-is-resizing { .k-icon-zoom-in:before { content: ""; } - -[dir="rtl"] .k-icon-zoom-in:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-zoom-in:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-zoom-out:before { content: ""; } - -[dir="rtl"] .k-icon-zoom-out:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-zoom-out:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-close:before { @@ -1357,9 +1350,9 @@ body.k-is-resizing { .k-icon-document-audio:before { content: ""; } - -[dir="rtl"] .k-icon-document-audio:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-document-audio:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-document-default:before { @@ -1373,9 +1366,9 @@ body.k-is-resizing { .k-icon-document-folder:before { content: ""; } - -[dir="rtl"] .k-icon-document-folder:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-document-folder:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-document-image:before { @@ -1405,41 +1398,41 @@ body.k-is-resizing { .k-icon-filter:before { content: ""; } - -[dir="rtl"] .k-icon-filter:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-filter:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-folder-closed:before { content: ""; } - -[dir="rtl"] .k-icon-folder-closed:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-folder-closed:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-folder-opened:before { content: ""; } - -[dir="rtl"] .k-icon-folder-opened:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-folder-opened:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-menu-closed:before { content: ""; } - -[dir="rtl"] .k-icon-menu-closed:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-menu-closed:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-menu-opened:before { content: ""; } - -[dir="rtl"] .k-icon-menu-opened:before { - transform: scaleX(-1); +[dir=rtl] .k-icon-menu-opened:before { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .k-icon-open:before { @@ -2560,11 +2553,9 @@ body.k-is-resizing { * Try not to use `.k-visually-hidden` and `.k-visually-shown` classes together if possible. */ } - .k-ui-namespace, .k-ui-namespace *, .k-ui-namespace *:before, .k-ui-namespace *:after { box-sizing: border-box; } - .k-ui-namespace html { line-height: 1.15; /* 1 */ @@ -2573,11 +2564,9 @@ body.k-is-resizing { -webkit-text-size-adjust: 100%; /* 2 */ } - .k-ui-namespace body { margin: 0; } - .k-ui-namespace article, .k-ui-namespace aside, .k-ui-namespace footer, @@ -2586,23 +2575,19 @@ body.k-is-resizing { .k-ui-namespace section { display: block; } - .k-ui-namespace h1 { font-size: 2em; margin: 0.67em 0; } - .k-ui-namespace figcaption, .k-ui-namespace figure, .k-ui-namespace main { /* 1 */ display: block; } - .k-ui-namespace figure { margin: 1em 40px; } - .k-ui-namespace hr { box-sizing: content-box; /* 1 */ @@ -2611,40 +2596,35 @@ body.k-is-resizing { overflow: visible; /* 2 */ } - .k-ui-namespace pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } - .k-ui-namespace a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } - .k-ui-namespace abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ - text-decoration: underline dotted; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; /* 2 */ } - .k-ui-namespace b, .k-ui-namespace strong { font-weight: inherit; } - .k-ui-namespace b, .k-ui-namespace strong { font-weight: bolder; } - .k-ui-namespace code, .k-ui-namespace kbd, .k-ui-namespace samp { @@ -2653,20 +2633,16 @@ body.k-is-resizing { font-size: 1em; /* 2 */ } - .k-ui-namespace dfn { font-style: italic; } - .k-ui-namespace mark { background-color: #ff0; color: #000; } - .k-ui-namespace small { font-size: 80%; } - .k-ui-namespace sub, .k-ui-namespace sup { font-size: 75%; @@ -2674,33 +2650,26 @@ body.k-is-resizing { position: relative; vertical-align: baseline; } - .k-ui-namespace sub { bottom: -0.25em; } - .k-ui-namespace sup { top: -0.5em; } - .k-ui-namespace audio, .k-ui-namespace video { display: inline-block; } - .k-ui-namespace audio:not([controls]) { display: none; height: 0; } - .k-ui-namespace img { border-style: none; } - .k-ui-namespace svg:not(:root) { overflow: hidden; } - .k-ui-namespace button, .k-ui-namespace input, .k-ui-namespace optgroup, @@ -2715,46 +2684,39 @@ body.k-is-resizing { margin: 0; /* 2 */ } - .k-ui-namespace button, .k-ui-namespace input { /* 1 */ overflow: visible; } - .k-ui-namespace button, .k-ui-namespace select { /* 1 */ text-transform: none; } - .k-ui-namespace button, -.k-ui-namespace html [type="button"], -.k-ui-namespace [type="reset"], -.k-ui-namespace [type="submit"] { +.k-ui-namespace html [type=button], +.k-ui-namespace [type=reset], +.k-ui-namespace [type=submit] { -webkit-appearance: button; /* 2 */ } - .k-ui-namespace button::-moz-focus-inner, -.k-ui-namespace [type="button"]::-moz-focus-inner, -.k-ui-namespace [type="reset"]::-moz-focus-inner, -.k-ui-namespace [type="submit"]::-moz-focus-inner { +.k-ui-namespace [type=button]::-moz-focus-inner, +.k-ui-namespace [type=reset]::-moz-focus-inner, +.k-ui-namespace [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } - .k-ui-namespace button:-moz-focusring, -.k-ui-namespace [type="button"]:-moz-focusring, -.k-ui-namespace [type="reset"]:-moz-focusring, -.k-ui-namespace [type="submit"]:-moz-focusring { +.k-ui-namespace [type=button]:-moz-focusring, +.k-ui-namespace [type=reset]:-moz-focusring, +.k-ui-namespace [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } - .k-ui-namespace fieldset { padding: 0.35em 0.75em 0.625em; } - .k-ui-namespace legend { box-sizing: border-box; /* 1 */ @@ -2769,92 +2731,77 @@ body.k-is-resizing { white-space: normal; /* 1 */ } - .k-ui-namespace progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } - .k-ui-namespace textarea { overflow: auto; } - -.k-ui-namespace [type="checkbox"], -.k-ui-namespace [type="radio"] { +.k-ui-namespace [type=checkbox], +.k-ui-namespace [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } - -.k-ui-namespace [type="number"]::-webkit-inner-spin-button, -.k-ui-namespace [type="number"]::-webkit-outer-spin-button { +.k-ui-namespace [type=number]::-webkit-inner-spin-button, +.k-ui-namespace [type=number]::-webkit-outer-spin-button { height: auto; } - -.k-ui-namespace [type="search"] { +.k-ui-namespace [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } - -.k-ui-namespace [type="search"]::-webkit-search-cancel-button, -.k-ui-namespace [type="search"]::-webkit-search-decoration { +.k-ui-namespace [type=search]::-webkit-search-cancel-button, +.k-ui-namespace [type=search]::-webkit-search-decoration { -webkit-appearance: none; } - .k-ui-namespace ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } - .k-ui-namespace details, .k-ui-namespace menu { display: block; } - .k-ui-namespace summary { display: list-item; } - .k-ui-namespace canvas { display: inline-block; } - .k-ui-namespace template { display: none; } - .k-ui-namespace [hidden] { display: none; } - .k-ui-namespace .k-component { position: relative; /* 1 */ - background: #3b3a3a; + background: #3b3b3b; margin: 0; /* 2 */ padding: 0; /* 2 */ - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + flex-direction: column; + flex: 1 1 auto; overflow: auto; backface-visibility: hidden; + transition: -webkit-transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); transition: transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); + transition: transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83), -webkit-transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); -webkit-backface-visibility: hidden; /* 3 */ } - .k-is-resizing .k-ui-namespace .k-component { overflow: hidden; } @@ -2865,28 +2812,28 @@ body.k-is-resizing { .k-ui-namespace .k-show-right-menu { /** - * Set opacity - */ + * Set opacity + */ } - .k-ui-namespace .k-show-right-menu .k-component { - transform: translateX(-272px); + -webkit-transform: translateX(-272px); + transform: translateX(-272px); } - @media screen and (min-width: 600px) { .k-ui-namespace .k-show-right-menu .k-component { - transform: translateX(0); + -webkit-transform: translateX(0); + transform: translateX(0); /* 2 */ } } - -[dir="rtl"] .k-ui-namespace .k-show-right-menu .k-component { - transform: translateX(272px); +[dir=rtl] .k-ui-namespace .k-show-right-menu .k-component { + -webkit-transform: translateX(272px); + transform: translateX(272px); } - @media screen and (min-width: 600px) { - [dir="rtl"] .k-ui-namespace .k-show-right-menu .k-component { - transform: translateX(0); + [dir=rtl] .k-ui-namespace .k-show-right-menu .k-component { + -webkit-transform: translateX(0); + transform: translateX(0); } } @@ -2894,40 +2841,32 @@ body.k-is-resizing { opacity: 0.75; /* 1 */ } - @media screen and (min-width: 600px) { .k-ui-namespace .k-show-right-menu .k-component .k-off-canvas-overlay-right { opacity: 0; } } - .k-ui-namespace .k-is-opened-right .k-component .k-off-canvas-overlay-right { z-index: 9; /* 1 */ } - @media screen and (min-width: 600px) { .k-ui-namespace .k-is-opened-right .k-component .k-off-canvas-overlay-right { z-index: -1; } } - .k-ui-namespace .k-component-wrapper { position: relative; - background: #3b3a3a; - display: -ms-flexbox; + background: #3b3b3b; display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + flex-direction: row; + flex: 1 1 auto; overflow: auto; min-height: 0; /** - * Hide overflow when resizing the window - */ + * Hide overflow when resizing the window + */ } - .k-is-resizing .k-ui-namespace .k-component-wrapper { overflow: hidden; } @@ -2937,47 +2876,43 @@ body.k-is-resizing { /* 1 */ background: white; /* 2 */ - display: -ms-flexbox; display: flex; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -ms-flex-direction: column; - flex-direction: column; + flex: 1 1 auto; + flex-direction: column; overflow: hidden; /* Set overflow for breadcrumbs to properly work */ min-height: 0; backface-visibility: hidden; + transition: -webkit-transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); transition: transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); + transition: transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83), -webkit-transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); -webkit-backface-visibility: hidden; /* 3 */ } - .k-is-transitioning .k-ui-namespace .k-content { z-index: 2; } .k-ui-namespace .k-content-area { /** - * When content has a sub content sibling - */ + * When content has a sub content sibling + */ } - .k-ui-namespace .k-content-area .k-content:not(:last-child) { /** - * Set width and make room for resizer - */ + * Set width and make room for resizer + */ /** - * When there's also a right sidebar make sure the right sidebar is only 50% of the width - * and reset this when querie is reached - */ + * When there's also a right sidebar make sure the right sidebar is only 50% of the width + * and reset this when querie is reached + */ /** - * The resizer - */ + * The resizer + */ /** - * Search container adjustments - */ + * Search container adjustments + */ } - @media screen and (min-width: 1024px) { .k-ui-namespace .k-content-area .k-content:not(:last-child) { min-width: 280px; @@ -2987,16 +2922,17 @@ body.k-is-resizing { .k-js-enabled .k-ui-namespace .k-content-area .k-content:not(:last-child) { padding-right: 8px; } - .k-js-enabled [dir="rtl"] .k-ui-namespace .k-content-area .k-content:not(:last-child) { + + .k-js-enabled [dir=rtl] .k-ui-namespace .k-content-area .k-content:not(:last-child) { padding-right: 0; padding-left: 8px; } - .k-js-enabled[dir="rtl"] .k-ui-namespace .k-content-area .k-content:not(:last-child) { + + .k-js-enabled[dir=rtl] .k-ui-namespace .k-content-area .k-content:not(:last-child) { padding-right: 0; padding-left: 8px; } } - @media screen and (min-width: 600px) { .k-ui-namespace .k-content-area .k-content:not(:last-child) .k-sidebar-right { min-width: 0; @@ -3004,13 +2940,11 @@ body.k-is-resizing { max-width: 50%; } } - @media screen and (min-width: 1024px) { .k-ui-namespace .k-content-area .k-content:not(:last-child) .k-sidebar-right { width: 272px; } } - .k-ui-namespace .k-content-area .k-content:not(:last-child) .k-pane-resizer { width: 8px; height: 100%; @@ -3024,8 +2958,7 @@ body.k-is-resizing { cursor: col-resize; display: none; } - -[dir="rtl"] .k-ui-namespace .k-content-area .k-content:not(:last-child) .k-pane-resizer { +[dir=rtl] .k-ui-namespace .k-content-area .k-content:not(:last-child) .k-pane-resizer { right: auto; left: 0; border-left: none; @@ -3037,99 +2970,91 @@ body.k-is-resizing { display: block; } } - .k-ui-namespace .k-content-area .k-content:not(:last-child) .k-scopebar__item--search { min-width: 100%; width: 100%; max-width: 100%; } - .k-ui-namespace .k-content-area .k-content:not(:last-child) .k-scopebar__item--search .k-search__field { border-left: none; border-right: none; } - .k-ui-namespace .k-show-left-menu { /** - * Set opacity - */ + * Set opacity + */ } - .k-ui-namespace .k-show-left-menu .k-content-area, .k-ui-namespace .k-show-left-menu .k-content { - transform: translate(272px, 0); + -webkit-transform: translate(272px, 0); + transform: translate(272px, 0); /* 1 */ /** - * Reset transform when .k-content is inside a .k-content-area - */ + * Reset transform when .k-content is inside a .k-content-area + */ } - @media screen and (min-width: 768px) { .k-ui-namespace .k-show-left-menu .k-content-area, - .k-ui-namespace .k-show-left-menu .k-content { - transform: translate(0, 0); +.k-ui-namespace .k-show-left-menu .k-content { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); /* 2 */ } } - .k-ui-namespace .k-show-left-menu .k-content-area .k-content, .k-ui-namespace .k-show-left-menu .k-content .k-content { - transform: none; + -webkit-transform: none; + transform: none; } - -[dir="rtl"] .k-ui-namespace .k-show-left-menu .k-content-area, -[dir="rtl"] .k-ui-namespace .k-show-left-menu .k-content { - transform: translate(-272px, 0); +[dir=rtl] .k-ui-namespace .k-show-left-menu .k-content-area, +[dir=rtl] .k-ui-namespace .k-show-left-menu .k-content { + -webkit-transform: translate(-272px, 0); + transform: translate(-272px, 0); } - @media screen and (min-width: 768px) { - [dir="rtl"] .k-ui-namespace .k-show-left-menu .k-content-area, - [dir="rtl"] .k-ui-namespace .k-show-left-menu .k-content { - transform: translate(0, 0); + [dir=rtl] .k-ui-namespace .k-show-left-menu .k-content-area, +[dir=rtl] .k-ui-namespace .k-show-left-menu .k-content { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } } - -[dir="rtl"] .k-ui-namespace .k-show-left-menu .k-content-area .k-content, -[dir="rtl"] .k-ui-namespace .k-show-left-menu .k-content .k-content { - transform: none; +[dir=rtl] .k-ui-namespace .k-show-left-menu .k-content-area .k-content, +[dir=rtl] .k-ui-namespace .k-show-left-menu .k-content .k-content { + -webkit-transform: none; + transform: none; } .k-ui-namespace .k-show-left-menu .k-content-area .k-off-canvas-overlay-left, .k-ui-namespace .k-show-left-menu .k-content .k-off-canvas-overlay-left { opacity: 0.75; } - @media screen and (min-width: 768px) { .k-ui-namespace .k-show-left-menu .k-content-area .k-off-canvas-overlay-left, - .k-ui-namespace .k-show-left-menu .k-content .k-off-canvas-overlay-left { +.k-ui-namespace .k-show-left-menu .k-content .k-off-canvas-overlay-left { opacity: 0; } } - .k-ui-namespace .k-is-opened-left .k-content-area, .k-ui-namespace .k-is-opened-left .k-content { overflow: hidden; /** - * Set z-index so it will become visible - */ + * Set z-index so it will become visible + */ } - @media screen and (min-width: 768px) { .k-ui-namespace .k-is-opened-left .k-content-area, - .k-ui-namespace .k-is-opened-left .k-content { +.k-ui-namespace .k-is-opened-left .k-content { overflow: auto; } } - @media screen and (min-width: 600px) { .k-ui-namespace .k-is-opened-left .k-content-area, - .k-ui-namespace .k-is-opened-left .k-content { +.k-ui-namespace .k-is-opened-left .k-content { overflow: auto; } } - -.k-is-resizing .k-ui-namespace .k-is-opened-left .k-content-area, .k-is-resizing -.k-ui-namespace .k-is-opened-left .k-content { +.k-is-resizing .k-ui-namespace .k-is-opened-left .k-content-area, +.k-is-resizing .k-ui-namespace .k-is-opened-left .k-content { overflow: hidden; } @@ -3137,28 +3062,25 @@ body.k-is-resizing { .k-ui-namespace .k-is-opened-left .k-content .k-off-canvas-overlay-left { z-index: 9; } - @media screen and (min-width: 768px) { .k-ui-namespace .k-is-opened-left .k-content-area .k-off-canvas-overlay-left, - .k-ui-namespace .k-is-opened-left .k-content .k-off-canvas-overlay-left { +.k-ui-namespace .k-is-opened-left .k-content .k-off-canvas-overlay-left { z-index: -1; } } - .k-ui-namespace .k-content-area { position: relative; overflow: hidden; - display: -ms-flexbox; display: flex; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + flex: 1 1 auto; width: auto; min-height: 0; backface-visibility: hidden; + transition: -webkit-transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); transition: transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); + transition: transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83), -webkit-transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); -webkit-backface-visibility: hidden; } - .k-is-transitioning .k-ui-namespace .k-content-area { z-index: 3; } @@ -3166,88 +3088,77 @@ body.k-is-resizing { .k-ui-namespace .k-show-subcontent-area .k-button.k-subcontent-toggle, .k-ui-namespace .k-show-subcontent-area .k-subcontent-toggle.btn { opacity: 1; } - .k-ui-namespace .k-show-subcontent-area .k-content-area__child { - transform: translateX(-100%) translateX(48px); + -webkit-transform: translateX(-100%) translateX(48px); + transform: translateX(-100%) translateX(48px); } - @media screen and (min-width: 1024px) { .k-ui-namespace .k-show-subcontent-area .k-content-area__child { - transform: none; + -webkit-transform: none; + transform: none; } } - -[dir="rtl"] .k-ui-namespace .k-show-subcontent-area .k-content-area__child { - transform: translateX(100%) translateX(-48px); +[dir=rtl] .k-ui-namespace .k-show-subcontent-area .k-content-area__child { + -webkit-transform: translateX(100%) translateX(-48px); + transform: translateX(100%) translateX(-48px); } - @media screen and (min-width: 1024px) { - [dir="rtl"] .k-ui-namespace .k-show-subcontent-area .k-content-area__child { - transform: none; + [dir=rtl] .k-ui-namespace .k-show-subcontent-area .k-content-area__child { + -webkit-transform: none; + transform: none; } } .k-ui-namespace .k-show-subcontent-area .k-off-canvas-overlay-subcontent { opacity: 0.75; } - @media screen and (min-width: 1024px) { .k-ui-namespace .k-show-subcontent-area .k-off-canvas-overlay-subcontent { opacity: 0; } } - .k-ui-namespace .k-is-opened-subcontent .k-content-area { z-index: 3; } - .k-ui-namespace .k-is-opened-subcontent .k-button.k-subcontent-toggle, .k-ui-namespace .k-is-opened-subcontent .k-subcontent-toggle.btn { visibility: visible; z-index: 10; } - .k-ui-namespace .k-is-opened-subcontent .k-off-canvas-overlay-subcontent { z-index: 9; } - @media screen and (min-width: 1024px) { .k-ui-namespace .k-is-opened-subcontent .k-off-canvas-overlay-subcontent { z-index: -1; } } - .k-ui-namespace .k-content-area__child { position: relative; display: none; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + flex: 1 1 auto; width: auto; min-height: 0; overflow: visible; max-width: 100%; /* 1 */ backface-visibility: hidden; + transition: -webkit-transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); transition: transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); + transition: transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83), -webkit-transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); -webkit-backface-visibility: hidden; /** - * Inherit z-index to make sure toggle button wins over the overlay - */ + * Inherit z-index to make sure toggle button wins over the overlay + */ } - .k-ui-namespace .k-content-area__child.k-is-active { - display: -ms-flexbox; display: flex; } - .k-ui-namespace .k-content-area__child:nth-last-child(2):first-child, .k-ui-namespace .k-content-area__child:only-child { - display: -ms-flexbox; display: flex; } - .k-ui-namespace .k-content-area__child .k-content { z-index: inherit; } - .k-ui-namespace .k-content-wrapper { position: relative; /* 1 */ @@ -3255,71 +3166,61 @@ body.k-is-resizing { /* 2 */ margin: 0; overflow: hidden; - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + flex-direction: row; + flex: 1 1 auto; border-bottom: none; min-height: 0; } - .k-ui-namespace .k-flex-wrapper { margin: 0; padding: 0; list-style: none; border: none; background: transparent; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + flex-direction: column; + flex: 1 1 auto; overflow: auto; } - .k-is-resizing .k-ui-namespace .k-flex-wrapper { overflow: hidden; } .k-ui-namespace .k-container { - overflow: hidden; width: 100%; margin: 0 auto; - -ms-flex: 0 0 auto; - flex: 0 0 auto; + flex: 0 0 auto; background-color: inherit; /* 1 */ /* When resizing */ } - .k-ui-namespace .k-container:before, .k-ui-namespace .k-container:after { display: table; content: " "; } - .k-ui-namespace .k-container:after { clear: both; } - .k-is-resizing .k-ui-namespace .k-container { overflow: hidden; } +@media screen and (min-width: 768px) { + .k-ui-namespace .k-container { + overflow: hidden; + } +} .k-ui-namespace .k-container + .k-container .k-container__full, .k-ui-namespace .k-container + .k-container .k-container__main, .k-ui-namespace .k-container + .k-container .k-container__sub { padding-top: 0; } - .k-ui-namespace .k-container__main { padding: 16px; background-color: inherit; /* 1 */ } - @media screen and (min-width: 768px) { .k-ui-namespace .k-container__main { float: left; @@ -3331,25 +3232,23 @@ body.k-is-resizing { .k-ui-namespace .k-container__main:last-child:not(:first-child) { padding-left: 8px; } - [dir="rtl"] .k-ui-namespace .k-container__main { + [dir=rtl] .k-ui-namespace .k-container__main { float: right; } - [dir="rtl"] .k-ui-namespace .k-container__main:first-child { + [dir=rtl] .k-ui-namespace .k-container__main:first-child { padding-right: 16px; padding-left: 8px; } - [dir="rtl"] .k-ui-namespace .k-container__main:last-child:not(:first-child) { + [dir=rtl] .k-ui-namespace .k-container__main:last-child:not(:first-child) { padding-left: 16px; padding-right: 8px; } } - .k-ui-namespace .k-container__sub { padding: 16px; background-color: inherit; /* 1 */ } - @media screen and (min-width: 768px) { .k-ui-namespace .k-container__sub { float: left; @@ -3361,29 +3260,26 @@ body.k-is-resizing { .k-ui-namespace .k-container__sub:last-child:not(:first-child) { padding-left: 8px; } - [dir="rtl"] .k-ui-namespace .k-container__sub { + [dir=rtl] .k-ui-namespace .k-container__sub { float: right; } - [dir="rtl"] .k-ui-namespace .k-container__sub:first-child { + [dir=rtl] .k-ui-namespace .k-container__sub:first-child { padding-right: 16px; padding-left: 8px; } - [dir="rtl"] .k-ui-namespace .k-container__sub:last-child:not(:first-child) { + [dir=rtl] .k-ui-namespace .k-container__sub:last-child:not(:first-child) { padding-left: 16px; padding-right: 8px; } } - .k-ui-namespace .k-container__full { clear: both; width: auto; padding: 16px; } - .k-ui-namespace .k-container__full--spaced-top.k-container__full--spaced-top { padding: 16px 0 0; } - .k-ui-namespace.k-ui-container { max-width: 400px; /* 1 */ @@ -3398,25 +3294,20 @@ body.k-is-resizing { /* 3 */ color: #FFFFFF; /* 3 */ - display: -ms-flexbox; display: flex; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -ms-flex-direction: column; - flex-direction: column; + flex: 1 1 auto; + flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; } - @media screen and (min-width: 400px) { .k-ui-namespace.k-ui-container { max-width: none; /* 2 */ } } - -[dir="rtl"] .k-ui-namespace.k-ui-container { +[dir=rtl] .k-ui-namespace.k-ui-container { direction: rtl; } @@ -3428,40 +3319,32 @@ body.k-is-resizing { white-space: nowrap; /* 1 */ padding: 16px; - display: -ms-flexbox; display: flex; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -ms-flex-align: center; - align-items: center; + flex: 1 1 auto; + align-items: center; } - .k-ui-namespace .k-sidebar-left, .k-ui-namespace .k-sidebar-right { position: relative; overflow: auto; -webkit-overflow-scrolling: touch; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex: 0 0 auto; - flex: 0 0 auto; + flex-direction: column; + flex: 0 0 auto; /** - * When resizing - */ + * When resizing + */ /** - * When JavaScript is enabled - */ + * When JavaScript is enabled + */ } - -.k-is-resizing .k-ui-namespace .k-sidebar-left, .k-is-resizing -.k-ui-namespace .k-sidebar-right { +.k-is-resizing .k-ui-namespace .k-sidebar-left, +.k-is-resizing .k-ui-namespace .k-sidebar-right { overflow: hidden; } -.k-js-enabled .k-ui-namespace .k-sidebar-left, .k-js-enabled -.k-ui-namespace .k-sidebar-right { +.k-js-enabled .k-ui-namespace .k-sidebar-left, +.k-js-enabled .k-ui-namespace .k-sidebar-right { position: absolute; z-index: -1; top: 0; @@ -3474,17 +3357,16 @@ body.k-is-resizing { color: #FFFFFF; border-right: 1px solid #4D4C4D; /** - * Sidebar width - */ + * Sidebar width + */ /** - * Larger sidebar when space is available - */ + * Larger sidebar when space is available + */ /** - * When JavaScript is enabled - */ + * When JavaScript is enabled + */ } - -[dir="rtl"] .k-ui-namespace .k-sidebar-left { +[dir=rtl] .k-ui-namespace .k-sidebar-left { border-right: none; border-left: 1px solid #4D4C4D; } @@ -3493,12 +3375,12 @@ body.k-is-resizing { left: 0; } -.k-js-enabled [dir="rtl"] .k-ui-namespace .k-sidebar-left { +.k-js-enabled [dir=rtl] .k-ui-namespace .k-sidebar-left { left: auto; right: 0; } -.k-js-enabled[dir="rtl"] .k-ui-namespace .k-sidebar-left { +.k-js-enabled[dir=rtl] .k-ui-namespace .k-sidebar-left { left: auto; right: 0; } @@ -3510,7 +3392,6 @@ body.k-is-resizing { max-width: 208px; } } - @media screen and (min-width: 1024px) { .k-ui-namespace .k-sidebar-left { min-width: 272px; @@ -3518,23 +3399,20 @@ body.k-is-resizing { max-width: 272px; } } - .k-js-enabled .k-ui-namespace .k-sidebar-left { min-width: 272px; width: 272px; max-width: 272px; /** - * On 'desktop' we 'open' the sidebar by default - */ + * On 'desktop' we 'open' the sidebar by default + */ /** - * And we make it even larger when there's enough space - */ + * And we make it even larger when there's enough space + */ } - @media screen and (min-width: 768px) { .k-js-enabled .k-ui-namespace .k-sidebar-left { position: relative; - display: -ms-flexbox; display: flex; height: auto; min-width: 208px; @@ -3543,7 +3421,6 @@ body.k-is-resizing { z-index: 1; } } - @media screen and (min-width: 1024px) { .k-js-enabled .k-ui-namespace .k-sidebar-left { min-width: 272px; @@ -3554,26 +3431,23 @@ body.k-is-resizing { .k-ui-namespace .k-is-opened-left .k-sidebar-left { z-index: 1; - display: -ms-flexbox; display: flex; } - .k-ui-namespace .k-sidebar-right { background: #2e2e2e; color: #FFFFFF; border-left: 1px solid #4D4C4D; /** - * Sidebar width - */ + * Sidebar width + */ /** - * Larger sidebar when space is available - */ + * Larger sidebar when space is available + */ /** - * When JavaScript is enabled - */ + * When JavaScript is enabled + */ } - -[dir="rtl"] .k-ui-namespace .k-sidebar-right { +[dir=rtl] .k-ui-namespace .k-sidebar-right { border-left: none; border-right: 1px solid #4D4C4D; } @@ -3582,12 +3456,12 @@ body.k-is-resizing { right: 0; } -.k-js-enabled [dir="rtl"] .k-ui-namespace .k-sidebar-right { +.k-js-enabled [dir=rtl] .k-ui-namespace .k-sidebar-right { right: auto; left: 0; } -.k-js-enabled[dir="rtl"] .k-ui-namespace .k-sidebar-right { +.k-js-enabled[dir=rtl] .k-ui-namespace .k-sidebar-right { right: auto; left: 0; } @@ -3599,7 +3473,6 @@ body.k-is-resizing { max-width: 208px; } } - @media screen and (min-width: 600px) { .k-ui-namespace .k-sidebar-right { min-width: 272px; @@ -3607,23 +3480,20 @@ body.k-is-resizing { max-width: 272px; } } - .k-js-enabled .k-ui-namespace .k-sidebar-right { min-width: 272px; width: 272px; max-width: 272px; /** - * On 'desktop' we 'open' the sidebar by default - */ + * On 'desktop' we 'open' the sidebar by default + */ /** - * And we make it even larger when there's enough space - */ + * And we make it even larger when there's enough space + */ } - @media screen and (min-width: 600px) { .k-js-enabled .k-ui-namespace .k-sidebar-right { position: relative; - display: -ms-flexbox; display: flex; height: auto; min-width: 208px; @@ -3632,7 +3502,6 @@ body.k-is-resizing { z-index: 1; } } - @media screen and (min-width: 1024px) { .k-js-enabled .k-ui-namespace .k-sidebar-right { min-width: 272px; @@ -3642,20 +3511,15 @@ body.k-is-resizing { } .k-ui-namespace .k-is-opened-right .k-sidebar-right { - display: -ms-flexbox; display: flex; z-index: 1; } - .k-ui-namespace .k-subcontent { background: white; border-left: 1px solid #212121; - display: -ms-flexbox; display: flex; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -ms-flex-direction: column; - flex-direction: column; + flex: 1 1 auto; + flex-direction: column; overflow: hidden; /* 2 */ min-height: 0; @@ -3666,8 +3530,7 @@ body.k-is-resizing { top: 0; bottom: 0; } - -[dir="rtl"] .k-ui-namespace .k-subcontent { +[dir=rtl] .k-ui-namespace .k-subcontent { left: auto; right: 100%; border-left: none; @@ -3681,38 +3544,29 @@ body.k-is-resizing { width: auto; z-index: 1; } - [dir="rtl"] .k-ui-namespace .k-subcontent { + [dir=rtl] .k-ui-namespace .k-subcontent { right: auto; } } - @media screen and (min-width: 1024px) { .k-ui-namespace .k-button.k-subcontent-toggle, .k-ui-namespace .k-subcontent-toggle.btn { display: none; } } - .k-ui-namespace .k-subcontent__child { - display: -ms-flexbox; display: flex; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -ms-flex-direction: column; - flex-direction: column; + flex: 1 1 auto; + flex-direction: column; width: auto; overflow: hidden; min-height: 0; } - .k-ui-namespace .k-subcontent__child:not(:only-child) { display: none; } - .k-ui-namespace .k-subcontent__child:not(:only-child).k-is-active { - display: -ms-flexbox; display: flex; } - .k-ui-namespace .k-button.k-subcontent-toggle, .k-ui-namespace .k-subcontent-toggle.btn { position: absolute; visibility: hidden; @@ -3727,14 +3581,12 @@ body.k-is-resizing { transition: all 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); -webkit-backface-visibility: hidden; } - @media screen and (min-width: 1024px) { .k-ui-namespace .k-button.k-subcontent-toggle, .k-ui-namespace .k-subcontent-toggle.btn { display: none; } } - -[dir="rtl"] .k-ui-namespace .k-button.k-subcontent-toggle, [dir="rtl"] .k-ui-namespace .k-subcontent-toggle.btn { +[dir=rtl] .k-ui-namespace .k-button.k-subcontent-toggle, [dir=rtl] .k-ui-namespace .k-subcontent-toggle.btn { margin: 0; right: auto; left: 8px; @@ -3742,42 +3594,37 @@ body.k-is-resizing { .k-ui-namespace .k-wrapper { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + flex-direction: column; + flex: 1 1 auto; overflow: hidden; backface-visibility: hidden; + transition: -webkit-transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); transition: transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); + transition: transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83), -webkit-transform 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); -webkit-backface-visibility: hidden; } - .k-ui-namespace .k-is-opened-left, .k-ui-namespace .k-is-opened-right { overflow: hidden; /* 1 */ } - @media screen and (min-width: 768px) { .k-ui-namespace .k-is-opened-left, - .k-ui-namespace .k-is-opened-right { +.k-ui-namespace .k-is-opened-right { overflow: auto; /* 2 */ } } - @media screen and (min-width: 600px) { .k-ui-namespace .k-is-opened-left, - .k-ui-namespace .k-is-opened-right { +.k-ui-namespace .k-is-opened-right { overflow: auto; /* 2 */ } } - -.k-is-resizing .k-ui-namespace .k-is-opened-left, .k-is-resizing -.k-ui-namespace .k-is-opened-right { +.k-is-resizing .k-ui-namespace .k-is-opened-left, +.k-is-resizing .k-ui-namespace .k-is-opened-right { overflow: hidden; /* 3 */ } @@ -3803,20 +3650,17 @@ body.k-is-resizing { transition: opacity 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83); -webkit-backface-visibility: hidden; } - .k-ui-namespace a { color: #FFFFFF; cursor: pointer; } - .k-ui-namespace a:focus, .k-ui-namespace a:hover { color: #FFFFFF; } - .k-ui-namespace, .k-ui-namespace *, .k-ui-namespace *:before, .k-ui-namespace *:after { - backface-visibility: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } - .k-ui-namespace body { min-height: 100%; /* 1 */ @@ -3827,45 +3671,36 @@ body.k-is-resizing { margin: 0; /* 2 */ /** - * Setup flexbox - */ - display: -ms-flexbox; + * Setup flexbox + */ display: flex; /* 3 */ - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; /* 3 */ - -ms-flex: 1 1 auto; - flex: 1 1 auto; + flex: 1 1 auto; /* 3 */ /** - * When resizing - */ + * When resizing + */ } - .k-ui-namespace body.k-is-resizing { overflow: hidden; /* 4 */ } - .k-ui-namespace dl { margin-top: 0; margin-bottom: 16px; } - .k-ui-namespace dl:before, .k-ui-namespace dl:after { display: table; content: " "; } - .k-ui-namespace dl:after { clear: both; } - .k-ui-namespace dl:last-child { margin-bottom: 0; } - .k-ui-namespace dt { margin: 0; padding: 0; @@ -3878,12 +3713,10 @@ body.k-is-resizing { margin-right: 4px; margin-bottom: 4px; } - .k-ui-namespace dt:last-child { margin-bottom: 0; } - -[dir="rtl"] .k-ui-namespace dt { +[dir=rtl] .k-ui-namespace dt { float: right; clear: right; margin-right: 0; @@ -3899,19 +3732,15 @@ body.k-is-resizing { margin-bottom: 4px; max-width: 100%; } - .k-ui-namespace dd:last-child { margin-bottom: 0; } - .k-ui-namespace dd.k-ellipsis { vertical-align: bottom; } - .k-ui-namespace dd.k-ellipsis .k-ellipsis__item { vertical-align: inherit; } - .k-ui-namespace fieldset { margin: 0; padding: 0; @@ -3922,21 +3751,17 @@ body.k-is-resizing { min-width: 0; /* 1 */ } - .k-ui-namespace fieldset:last-child { margin-bottom: 0; } - .k-ui-namespace h1, .k-ui-namespace h2, .k-ui-namespace h3, .k-ui-namespace h4, .k-ui-namespace h5, .k-ui-namespace h6 { margin-top: 0; /* 1 */ margin-bottom: 16px; } - .k-ui-namespace h1:last-child, .k-ui-namespace h2:last-child, .k-ui-namespace h3:last-child, .k-ui-namespace h4:last-child, .k-ui-namespace h5:last-child, .k-ui-namespace h6:last-child { margin-bottom: 0; } - .k-ui-namespace html { min-height: 100%; /* 1 */ @@ -3958,135 +3783,126 @@ body.k-is-resizing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - .k-ui-namespace img { max-width: 100%; /* 1 */ height: auto; } - .k-ui-namespace img:only-child { vertical-align: middle; /* 2 */ - backface-visibility: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; /* 3 */ } - .k-ui-namespace .k-image-16 { min-width: 16px; width: 16px; max-width: 16px; } - -.k-ui-namespace input[type="search"] { +.k-ui-namespace input[type=search] { box-sizing: border-box; /* 1 */ } - -.k-ui-namespace input[type="radio"], -.k-ui-namespace input[type="checkbox"] { +.k-ui-namespace input[type=radio], +.k-ui-namespace input[type=checkbox] { margin: 4px 0 0; /* 2 */ line-height: normal; /* 2 */ } - -.k-ui-namespace input[type="file"] { +.k-ui-namespace input[type=file] { display: block; /* 2 */ } - -.k-ui-namespace input[type="range"] { +.k-ui-namespace input[type=range] { display: block; /* 3 */ width: 100%; /* 3 */ } - -.k-ui-namespace input[type="file"]:focus, -.k-ui-namespace input[type="radio"]:focus, -.k-ui-namespace input[type="checkbox"]:focus { +.k-ui-namespace input[type=file]:focus, +.k-ui-namespace input[type=radio]:focus, +.k-ui-namespace input[type=checkbox]:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; /* 4 */ } - .k-ui-namespace select, .k-ui-namespace textarea, -.k-ui-namespace input[type="text"], -.k-ui-namespace input[type="password"], -.k-ui-namespace input[type="datetime"], -.k-ui-namespace input[type="datetime-local"], -.k-ui-namespace input[type="date"], -.k-ui-namespace input[type="month"], -.k-ui-namespace input[type="time"], -.k-ui-namespace input[type="week"], -.k-ui-namespace input[type="number"], -.k-ui-namespace input[type="email"], -.k-ui-namespace input[type="url"], -.k-ui-namespace input[type="search"], -.k-ui-namespace input[type="tel"], -.k-ui-namespace input[type="color"], +.k-ui-namespace input[type=text], +.k-ui-namespace input[type=password], +.k-ui-namespace input[type=datetime], +.k-ui-namespace input[type=datetime-local], +.k-ui-namespace input[type=date], +.k-ui-namespace input[type=month], +.k-ui-namespace input[type=time], +.k-ui-namespace input[type=week], +.k-ui-namespace input[type=number], +.k-ui-namespace input[type=email], +.k-ui-namespace input[type=url], +.k-ui-namespace input[type=search], +.k-ui-namespace input[type=tel], +.k-ui-namespace input[type=color], .k-ui-namespace .uneditable-input { height: 32px; /* 5 */ } - -.k-touchevents .k-ui-namespace select:focus, .k-touchevents .k-ui-namespace select:active, .k-touchevents -.k-ui-namespace textarea:focus, .k-touchevents -.k-ui-namespace textarea:active, .k-touchevents -.k-ui-namespace input[type="text"]:focus, .k-touchevents -.k-ui-namespace input[type="text"]:active, .k-touchevents -.k-ui-namespace input[type="password"]:focus, .k-touchevents -.k-ui-namespace input[type="password"]:active, .k-touchevents -.k-ui-namespace input[type="datetime"]:focus, .k-touchevents -.k-ui-namespace input[type="datetime"]:active, .k-touchevents -.k-ui-namespace input[type="datetime-local"]:focus, .k-touchevents -.k-ui-namespace input[type="datetime-local"]:active, .k-touchevents -.k-ui-namespace input[type="date"]:focus, .k-touchevents -.k-ui-namespace input[type="date"]:active, .k-touchevents -.k-ui-namespace input[type="month"]:focus, .k-touchevents -.k-ui-namespace input[type="month"]:active, .k-touchevents -.k-ui-namespace input[type="time"]:focus, .k-touchevents -.k-ui-namespace input[type="time"]:active, .k-touchevents -.k-ui-namespace input[type="week"]:focus, .k-touchevents -.k-ui-namespace input[type="week"]:active, .k-touchevents -.k-ui-namespace input[type="number"]:focus, .k-touchevents -.k-ui-namespace input[type="number"]:active, .k-touchevents -.k-ui-namespace input[type="email"]:focus, .k-touchevents -.k-ui-namespace input[type="email"]:active, .k-touchevents -.k-ui-namespace input[type="url"]:focus, .k-touchevents -.k-ui-namespace input[type="url"]:active, .k-touchevents -.k-ui-namespace input[type="search"]:focus, .k-touchevents -.k-ui-namespace input[type="search"]:active, .k-touchevents -.k-ui-namespace input[type="tel"]:focus, .k-touchevents -.k-ui-namespace input[type="tel"]:active, .k-touchevents -.k-ui-namespace input[type="color"]:focus, .k-touchevents -.k-ui-namespace input[type="color"]:active, .k-touchevents -.k-ui-namespace .uneditable-input:focus, .k-touchevents -.k-ui-namespace .uneditable-input:active { +.k-touchevents .k-ui-namespace select:focus, .k-touchevents .k-ui-namespace select:active, +.k-touchevents .k-ui-namespace textarea:focus, +.k-touchevents .k-ui-namespace textarea:active, +.k-touchevents .k-ui-namespace input[type=text]:focus, +.k-touchevents .k-ui-namespace input[type=text]:active, +.k-touchevents .k-ui-namespace input[type=password]:focus, +.k-touchevents .k-ui-namespace input[type=password]:active, +.k-touchevents .k-ui-namespace input[type=datetime]:focus, +.k-touchevents .k-ui-namespace input[type=datetime]:active, +.k-touchevents .k-ui-namespace input[type=datetime-local]:focus, +.k-touchevents .k-ui-namespace input[type=datetime-local]:active, +.k-touchevents .k-ui-namespace input[type=date]:focus, +.k-touchevents .k-ui-namespace input[type=date]:active, +.k-touchevents .k-ui-namespace input[type=month]:focus, +.k-touchevents .k-ui-namespace input[type=month]:active, +.k-touchevents .k-ui-namespace input[type=time]:focus, +.k-touchevents .k-ui-namespace input[type=time]:active, +.k-touchevents .k-ui-namespace input[type=week]:focus, +.k-touchevents .k-ui-namespace input[type=week]:active, +.k-touchevents .k-ui-namespace input[type=number]:focus, +.k-touchevents .k-ui-namespace input[type=number]:active, +.k-touchevents .k-ui-namespace input[type=email]:focus, +.k-touchevents .k-ui-namespace input[type=email]:active, +.k-touchevents .k-ui-namespace input[type=url]:focus, +.k-touchevents .k-ui-namespace input[type=url]:active, +.k-touchevents .k-ui-namespace input[type=search]:focus, +.k-touchevents .k-ui-namespace input[type=search]:active, +.k-touchevents .k-ui-namespace input[type=tel]:focus, +.k-touchevents .k-ui-namespace input[type=tel]:active, +.k-touchevents .k-ui-namespace input[type=color]:focus, +.k-touchevents .k-ui-namespace input[type=color]:active, +.k-touchevents .k-ui-namespace .uneditable-input:focus, +.k-touchevents .k-ui-namespace .uneditable-input:active { font-size: 16px !important; /* 6 */ } -[dir="rtl"] .k-ui-namespace select, -[dir="rtl"] .k-ui-namespace textarea, -[dir="rtl"] .k-ui-namespace input[type="text"], -[dir="rtl"] .k-ui-namespace input[type="password"], -[dir="rtl"] .k-ui-namespace input[type="datetime"], -[dir="rtl"] .k-ui-namespace input[type="datetime-local"], -[dir="rtl"] .k-ui-namespace input[type="date"], -[dir="rtl"] .k-ui-namespace input[type="month"], -[dir="rtl"] .k-ui-namespace input[type="time"], -[dir="rtl"] .k-ui-namespace input[type="week"], -[dir="rtl"] .k-ui-namespace input[type="number"], -[dir="rtl"] .k-ui-namespace input[type="email"], -[dir="rtl"] .k-ui-namespace input[type="url"], -[dir="rtl"] .k-ui-namespace input[type="search"], -[dir="rtl"] .k-ui-namespace input[type="tel"], -[dir="rtl"] .k-ui-namespace input[type="color"], -[dir="rtl"] .k-ui-namespace .uneditable-input { +[dir=rtl] .k-ui-namespace select, +[dir=rtl] .k-ui-namespace textarea, +[dir=rtl] .k-ui-namespace input[type=text], +[dir=rtl] .k-ui-namespace input[type=password], +[dir=rtl] .k-ui-namespace input[type=datetime], +[dir=rtl] .k-ui-namespace input[type=datetime-local], +[dir=rtl] .k-ui-namespace input[type=date], +[dir=rtl] .k-ui-namespace input[type=month], +[dir=rtl] .k-ui-namespace input[type=time], +[dir=rtl] .k-ui-namespace input[type=week], +[dir=rtl] .k-ui-namespace input[type=number], +[dir=rtl] .k-ui-namespace input[type=email], +[dir=rtl] .k-ui-namespace input[type=url], +[dir=rtl] .k-ui-namespace input[type=search], +[dir=rtl] .k-ui-namespace input[type=tel], +[dir=rtl] .k-ui-namespace input[type=color], +[dir=rtl] .k-ui-namespace .uneditable-input { text-align: right; } @@ -4096,7 +3912,6 @@ body.k-is-resizing { height: auto; /* 7 */ } - .k-ui-namespace label { display: inline-block; vertical-align: middle; @@ -4105,21 +3920,17 @@ body.k-is-resizing { margin-bottom: 4px; font-weight: 700; } - .k-ui-namespace label:last-child { margin-bottom: 0; } - .k-ui-namespace label + small { display: inline-block; vertical-align: middle; margin-bottom: 4px; } - .k-ui-namespace label + small:last-child { margin-bottom: 0; } - .k-ui-namespace legend { width: 100%; padding: 0; @@ -4137,26 +3948,21 @@ body.k-is-resizing { margin-bottom: 16px; /* 1 */ } - .k-ui-namespace legend:last-child { margin-bottom: 0; } - .k-ui-namespace legend:first-child { padding-top: 0; /* 2 */ } - .k-ui-namespace p { margin-top: 0; /* 1 */ margin-bottom: 16px; } - .k-ui-namespace p:last-child { margin-bottom: 0; } - .k-ui-namespace ul, .k-ui-namespace ol { margin-top: 0; @@ -4165,14 +3971,12 @@ body.k-is-resizing { margin-left: 0; padding-left: 1.5em; } - .k-ui-namespace ul:last-child, .k-ui-namespace ol:last-child { margin-bottom: 0; } - -[dir="rtl"] .k-ui-namespace ul, -[dir="rtl"] .k-ui-namespace ol { +[dir=rtl] .k-ui-namespace ul, +[dir=rtl] .k-ui-namespace ol { padding-left: 0; padding-right: 1.5em; } @@ -4182,82 +3986,68 @@ body.k-is-resizing { overflow: hidden; padding: 12px 40px 12px 12px; line-height: 20px; - -ms-flex: 0 0 auto; - flex: 0 0 auto; + flex: 0 0 auto; margin-bottom: 16px; } - .k-ui-namespace .k-alert:last-child { margin-bottom: 0; } - -[dir="rtl"] .k-ui-namespace .k-alert { +[dir=rtl] .k-ui-namespace .k-alert { padding: 12px 12px 12px 40px; } .k-ui-namespace .k-alert a { color: inherit; } - .k-ui-namespace .k-alert--overflow { overflow-y: auto; overflow-x: hidden; max-height: 200px; /** - * Add vh max-height unit for dynamic sizing - */ + * Add vh max-height unit for dynamic sizing + */ } - @supports (max-height: 100vh) { .k-ui-namespace .k-alert--overflow { max-height: 25vh; } } - .k-ui-namespace .k-alert--fixed { position: fixed; z-index: 9999; top: 0; left: 50%; - transform: translateX(-50%); + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } - .k-ui-namespace .k-alert--success { background-color: #27ae60; color: white; } - .k-ui-namespace .k-alert--success .alert-link { - color: #e6e5e5; + color: #e6e6e6; } - .k-ui-namespace .k-alert--info { background-color: #3498db; color: white; } - .k-ui-namespace .k-alert--info .alert-link { - color: #e6e5e5; + color: #e6e6e6; } - .k-ui-namespace .k-alert--warning { background-color: #e67e22; color: white; } - .k-ui-namespace .k-alert--warning .alert-link { - color: #e6e5e5; + color: #e6e6e6; } - .k-ui-namespace .k-alert--danger { background-color: #c0392b; color: white; } - .k-ui-namespace .k-alert--danger .alert-link { - color: #e6e5e5; + color: #e6e6e6; } - .k-ui-namespace .k-alert__close { margin: 0; padding: 0; @@ -4274,7 +4064,6 @@ body.k-is-resizing { color: inherit; font-size: 16px; } - .k-ui-namespace .k-alert__close:after { display: block; position: absolute; @@ -4282,10 +4071,10 @@ body.k-is-resizing { line-height: 1; top: 50%; left: 50%; - transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } - -[dir="rtl"] .k-ui-namespace .k-alert__close { +[dir=rtl] .k-ui-namespace .k-alert__close { right: auto; left: 2px; } @@ -4296,49 +4085,47 @@ body.k-is-resizing { /* 1 */ background: #333333; color: #FFFFFF; - -ms-flex: 0 0 auto; - flex: 0 0 auto; + flex: 0 0 auto; /* 3 */ /** - * List - * - * 1. Reset unordered list styling - * 2. Flexing items to get overflow ellipsis - */ - /** - * Styling list items - * - * 1. Set z-index to 0 so the :after pseudo element will be on top - * 2. Make room for the pseudo element separator - * 3. Make each item at least one breadcrumb size wide + including padding for pseudo element - * 4. Hide by default so we can show only a few on mobile / flexbox - * 5. Hide overflowing content - * 6. Proper spacing for non-flexbox use - */ - /** - * Links - * - * 1. Full background hover - */ - /** - * Home and active elements - * - * 1. Always display these items - * 2. No flexing for these items so they are fully readable - */ - /** - * One but last item - * - * Show this item on mobile to get a sense of where you are - * - * 1. Set 'missing' content - * 2. Reset to default content on wider screens - */ - /** - * Active item - */ + * List + * + * 1. Reset unordered list styling + * 2. Flexing items to get overflow ellipsis + */ + /** + * Styling list items + * + * 1. Set z-index to 0 so the :after pseudo element will be on top + * 2. Make room for the pseudo element separator + * 3. Make each item at least one breadcrumb size wide + including padding for pseudo element + * 4. Hide by default so we can show only a few on mobile / flexbox + * 5. Hide overflowing content + * 6. Proper spacing for non-flexbox use + */ + /** + * Links + * + * 1. Full background hover + */ + /** + * Home and active elements + * + * 1. Always display these items + * 2. No flexing for these items so they are fully readable + */ + /** + * One but last item + * + * Show this item on mobile to get a sense of where you are + * + * 1. Set 'missing' content + * 2. Reset to default content on wider screens + */ + /** + * Active item + */ } - .k-is-resizing .k-ui-namespace .k-breadcrumb { overflow: hidden; /* 2 */ @@ -4351,11 +4138,9 @@ body.k-is-resizing { border: none; background: transparent; /* 1 */ - display: -ms-flexbox; display: flex; /* 2 */ } - .k-ui-namespace .k-breadcrumb li { position: relative; /* 1 */ @@ -4371,28 +4156,26 @@ body.k-is-resizing { /* 5 */ vertical-align: middle; /* 6 */ - -ms-flex: 0 1 auto; - flex: 0 1 auto; + flex: 0 1 auto; /** - * Display on larger screens - */ + * Display on larger screens + */ /** - * List item separator - */ + * List item separator + */ position: relative; /** - * No separator on first item - */ + * No separator on first item + */ /** - * Hover - * - * 1. Reset flexbox so the whole item is visible - * No :focus since