icon-alert.svg+ +
++ +Icon with additional attribute. It can be treated like any other dom element ++
++ +Manual svg string +This format is only used in the iconpicker.html ++
++@example + **/ + +(function () { + "use strict"; + + function UmbIconDirective($http, $sce, iconHelper) { + + var directive = { + replace: true, + transclude: true, + templateUrl: "views/components/umb-icon.html", + scope: { + icon: "@", + svgString: "=?" + }, + + link: function (scope) { + if (scope.svgString === undefined) { + var icon = scope.icon.split(" ")[0]; // Ensure that only the first part of the icon is used as sometimes the color is added too, e.g. see umbeditorheader.directive scope.openIconPicker + + _requestIcon(icon); + } + scope.$watch("icon", function (newValue, oldValue) { + if (newValue && oldValue) { + var newicon = newValue.split(" ")[0]; + var oldicon = oldValue.split(" ")[0]; + + if (newicon !== oldicon) { + _requestIcon(newicon); + } + } + }); + + function _requestIcon(icon) { + iconHelper.getIcon(icon) + .then(icon => { + if (icon !== null && icon.svgString !== undefined) { + scope.svgString = icon.svgString; + } + }); + } + } + + }; + + return directive; + } + + angular.module("umbraco.directives").directive("umbIcon", UmbIconDirective); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/common/mocks/umbraco.servervariables.js b/src/Umbraco.Web.UI.Client/src/common/mocks/umbraco.servervariables.js index da6f78a6a5..868bc4c6d5 100644 --- a/src/Umbraco.Web.UI.Client/src/common/mocks/umbraco.servervariables.js +++ b/src/Umbraco.Web.UI.Client/src/common/mocks/umbraco.servervariables.js @@ -19,7 +19,8 @@ Umbraco.Sys.ServerVariables = { "dashboardApiBaseUrl": "/umbraco/UmbracoApi/Dashboard/", "updateCheckApiBaseUrl": "/umbraco/Api/UpdateCheck/", "relationApiBaseUrl": "/umbraco/UmbracoApi/Relation/", - "rteApiBaseUrl": "/umbraco/UmbracoApi/RichTextPreValue/" + "rteApiBaseUrl": "/umbraco/UmbracoApi/RichTextPreValue/", + "iconApiBaseUrl": "/umbraco/UmbracoApi/Icon/" }, umbracoSettings: { "umbracoPath": "/umbraco", diff --git a/src/Umbraco.Web.UI.Client/src/common/services/iconhelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/iconhelper.service.js index 0fa2d0df1a..0d0135fff8 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/iconhelper.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/iconhelper.service.js @@ -3,7 +3,7 @@ * @name umbraco.services.iconHelper * @description A helper service for dealing with icons, mostly dealing with legacy tree icons **/ -function iconHelper($q, $timeout) { +function iconHelper($http, $q, $sce, $timeout, umbRequestHelper) { var converter = [ { oldIcon: ".sprNew", newIcon: "add" }, @@ -85,11 +85,15 @@ function iconHelper($q, $timeout) { { oldIcon: ".sprTreeDeveloperPython", newIcon: "icon-linux" } ]; + var collectedIcons; + var imageConverter = [ {oldImage: "contour.png", newIcon: "icon-umb-contour"} ]; - var collectedIcons; + var iconCache = []; + var liveRequests = []; + var allIconsRequested = false; return { @@ -154,9 +158,110 @@ function iconHelper($q, $timeout) { return false; }, - /** Return a list of icons, optionally filter them */ + /** Converts the icon from legacy to a new one if an old one is detected */ + convertFromLegacyIcon: function (icon) { + if (this.isLegacyIcon(icon)) { + //its legacy so convert it if we can + var found = _.find(converter, function (item) { + return item.oldIcon.toLowerCase() === icon.toLowerCase(); + }); + return (found ? found.newIcon : icon); + } + return icon; + }, + + convertFromLegacyImage: function (icon) { + var found = _.find(imageConverter, function (item) { + return item.oldImage.toLowerCase() === icon.toLowerCase(); + }); + return (found ? found.newIcon : undefined); + }, + + /** If we detect that the tree node has legacy icons that can be converted, this will convert them */ + convertFromLegacyTreeNodeIcon: function (treeNode) { + if (this.isLegacyTreeNodeIcon(treeNode)) { + return this.convertFromLegacyIcon(treeNode.icon); + } + return treeNode.icon; + }, + + /** Gets a single IconModel */ + getIcon: function(iconName) { + return $q((resolve, reject) => { + var icon = this._getIconFromCache(iconName); + + if(icon !== undefined) { + resolve(icon); + } else { + var iconRequestPath = Umbraco.Sys.ServerVariables.umbracoUrls.iconApiBaseUrl + 'GetIcon?iconName=' + iconName; + + // If the current icon is being requested, wait a bit so that we don't have to make another http request and can instead get the icon from the cache. + // This is a bit rough and ready and could probably be improved used an event based system + if(liveRequests.indexOf(iconRequestPath) >= 0) { + setTimeout(() => { + resolve(this.getIcon(iconName)); + }, 10); + } else { + liveRequests.push(iconRequestPath); + // TODO - fix bug where Umbraco.Sys.ServerVariables.umbracoUrls.iconApiBaseUrl is undefinied when help icon + umbRequestHelper.resourcePromise( + $http.get(iconRequestPath) + ,'Failed to retrieve icon: ' + iconName) + .then(icon => { + if(icon) { + var trustedIcon = { + name: icon.Name, + svgString: $sce.trustAsHtml(icon.SvgString) + }; + this._cacheIcon(trustedIcon); + + liveRequests = _.filter(liveRequests, iconRequestPath); + + resolve(trustedIcon); + } + }) + .catch(err => { + console.warn(err); + }); + }; + + } + }); + }, + + /** Gets all the available icons in the backoffice icon folder and returns them as an array of IconModels */ + getAllIcons: function() { + return $q((resolve, reject) => { + if(allIconsRequested === false) { + allIconsRequested = true; + + umbRequestHelper.resourcePromise( + $http.get(Umbraco.Sys.ServerVariables.umbracoUrls.iconApiBaseUrl + 'GetAllIcons') + ,'Failed to retrieve icons') + .then(icons => { + icons.forEach(icon => { + var trustedIcon = { + name: icon.Name, + svgString: $sce.trustAsHtml(icon.SvgString) + }; + + this._cacheIcon(trustedIcon); + }); + + resolve(iconCache); + }) + .catch(err => { + console.warn(err); + });; + } else { + resolve(iconCache); + } + }); + }, + + /** LEGACY - Return a list of icons from icon fonts, optionally filter them */ /** It fetches them directly from the active stylesheets in the browser */ - getIcons: function(){ + getLegacyIcons: function(){ var deferred = $q.defer(); $timeout(function(){ if(collectedIcons){ @@ -188,8 +293,13 @@ function iconHelper($q, $timeout) { s = s.substring(0, hasPseudo); } - if(collectedIcons.indexOf(s) < 0){ - collectedIcons.push(s); + var icon = { + name: s, + svgString: undefined + }; + + if(collectedIcons.indexOf(icon) < 0 && s !== "icon-chevron-up" && s !== "icon-chevron-down"){ + collectedIcons.push(icon); } } } @@ -198,35 +308,20 @@ function iconHelper($q, $timeout) { deferred.resolve(collectedIcons); } }, 100); - + return deferred.promise; }, - /** Converts the icon from legacy to a new one if an old one is detected */ - convertFromLegacyIcon: function (icon) { - if (this.isLegacyIcon(icon)) { - //its legacy so convert it if we can - var found = _.find(converter, function (item) { - return item.oldIcon.toLowerCase() === icon.toLowerCase(); - }); - return (found ? found.newIcon : icon); - } - return icon; + /** A simple cache to ensure that the icon is only requested from the server if is isn't already in memory */ + _cacheIcon: function(icon) { + if(_.find(iconCache, {name: icon.name}) === undefined) { + iconCache = _.union(iconCache, [icon]); + } }, - convertFromLegacyImage: function (icon) { - var found = _.find(imageConverter, function (item) { - return item.oldImage.toLowerCase() === icon.toLowerCase(); - }); - return (found ? found.newIcon : undefined); - }, - - /** If we detect that the tree node has legacy icons that can be converted, this will convert them */ - convertFromLegacyTreeNodeIcon: function (treeNode) { - if (this.isLegacyTreeNodeIcon(treeNode)) { - return this.convertFromLegacyIcon(treeNode.icon); - } - return treeNode.icon; + /** Returns the cached icon or undefined */ + _getIconFromCache: function(iconName) { + return _.find(iconCache, {name: iconName}); } }; } diff --git a/src/Umbraco.Web.UI.Client/src/less/colors.less b/src/Umbraco.Web.UI.Client/src/less/colors.less index 4cb70cdf5e..ba4909c997 100644 --- a/src/Umbraco.Web.UI.Client/src/less/colors.less +++ b/src/Umbraco.Web.UI.Client/src/less/colors.less @@ -24,7 +24,7 @@ /* Colors based on https://zavoloklom.github.io/material-design-color-palette/colors.html */ .btn-color-black {background-color: @black;} -.color-black i { color: @black;} +.color-black, .color-black i { color: @black !important;} .btn-color-blue-grey {background-color: @blueGrey;} .color-blue-grey, .color-blue-grey i { color: @blueGrey !important;} @@ -78,4 +78,4 @@ .color-deep-purple, .color-deep-purple i { color: @deepPurpleIcon !important; } .btn-color-indigo{background-color: @indigoIcon;} -.color-indigo, .color-indigo i { color: @indigoIcon !important; } \ No newline at end of file +.color-indigo, .color-indigo i { color: @indigoIcon !important; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less index 12a2ecd9db..cf40fdd6f3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less @@ -167,6 +167,160 @@ a.umb-editor-header__close-split-view:hover { } } +/* variant switcher */ +.umb-variant-switcher__toggle { + position: relative; + display: flex; + align-items: center; + padding: 0 10px; + margin: 1px 1px; + right: 0; + height: 30px; + text-decoration: none !important; + font-size: 13px; + color: @ui-action-discreet-type; + background: transparent; + border: none; + + max-width: 50%; + white-space: nowrap; + + user-select: none; + + span { + text-overflow: ellipsis; + overflow: hidden; + } +} + +button.umb-variant-switcher__toggle { + transition: color 0.2s ease-in-out; + &:hover { + //background-color: @gray-10; + color: @ui-action-discreet-type-hover; + .umb-variant-switcher__expand { + color: @ui-action-discreet-type-hover; + } + } + + &.--error { + &::before { + content: '!'; + position: absolute; + top: -8px; + right: -10px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + border-radius: 10px; + text-align: center; + font-weight: bold; + background-color: @errorBackground; + color: @errorText; + } + } +} + +.umb-variant-switcher__expand { + color: @ui-action-discreet-type; + margin-left: 5px; + margin-right: -5px; + transition: color 0.2s ease-in-out; +} + +.umb-variant-switcher__item { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid @gray-9; + position: relative; +} + +.umb-variant-switcher__item:last-child { + border-bottom: none; +} + +.umb-variant-switcher__item.--current { + color: @ui-light-active-type; +} +.umb-variant-switcher__item.--current .umb-variant-switcher__name-wrapper { + border-left: 4px solid @ui-active; +} + +.umb-variant-switcher__item:hover { + outline: none; +} + +.umb-variant-switcher__item.--not-allowed:not(.--current) .umb-variant-switcher__name-wrapper:hover { + //background-color: @white !important; + cursor: default; +} + +.umb-variant-switcher__item:hover .umb-variant-switcher__split-view { + display: block; + cursor: pointer; +} + +.umb-variant-switcher__item.--error { + .umb-variant-switcher__name { + color: @red; + &::after { + content: '!'; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: 5px; + top: -3px; + width: 14px; + height: 14px; + border-radius: 7px; + font-size: 8px; + text-align: center; + font-weight: bold; + background-color: @errorBackground; + color: @errorText; + } + } +} + +.umb-variant-switcher__name-wrapper { + font-size: 14px; + flex: 1; + cursor: pointer; + padding-top: 6px !important; + padding-bottom: 6px !important; + background-color: transparent; + border: none; + border-left: 2px solid transparent; +} + +.umb-variant-switcher__name { + display: block; +} + +.umb-variant-switcher__state { + font-size: 13px; + color: @gray-4; +} + +.umb-variant-switcher__split-view { + font-size: 13px; + display: none; + padding: 16px 20px; + position: absolute; + right: 0; + top: 0; + bottom: 0; + background-color: @white; + + &:hover { + background-color: @ui-option-hover; + color: @ui-option-type-hover; + } +} // container diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less index 4a483ce3f0..97caf66497 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less @@ -17,8 +17,9 @@ .umb-tree-item__arrow { position: relative; margin-left: -16px; - width: 16px; - height: 16px; + margin-right: 4px; + width: 12px; + height: 12px; visibility: hidden; text-decoration: none; font-size: 12px; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less index 9740cb59f3..59d81eb3ea 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less @@ -15,6 +15,16 @@ text-decoration: none; } + .umb-tree-item__arrow { + visibility: hidden; + text-decoration: none; + font-size: 12px; + transition: color 120ms; + + &:hover { + color: @ui-option-type-hover; + } + } i.noSpr { display: inline-block; margin-top: 1px; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less index 98b2b1d72d..62f64c1c37 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less @@ -26,6 +26,11 @@ padding: 15px 0; text-decoration: none; border-radius: 3px; + background: none; + background: none; + border: none; + cursor: pointer; + color: currentColor; } .umb-iconpicker-item button:hover, @@ -41,6 +46,13 @@ box-sizing: border-box; } +.umb-iconpicker-svg svg { + display: block; + width: 30px; + height: 30px; + fill: currentColor; +} + .umb-iconpicker-item button:active { background: @gray-10; } @@ -49,7 +61,6 @@ font-size: 30px; } - // Color swatch .button { border: none; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less index 8beff55b7c..56fa905310 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less @@ -78,19 +78,22 @@ padding-right: 160px; } - .icon-rate { + .save-search, + .filter-search { position: absolute; top: 0; - line-height: 32px; + display: flex; + align-items: center;; + height: 32px; + } + + .save-search { right: 140px; color: @yellow-d1; cursor: pointer; } - .icon-wrong { - position: absolute; - top: 0; - line-height: 32px; + .filter-search { right: 120px; color: @gray-7; cursor: pointer; diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less index bf98d1f2e9..ed5a2c0622 100644 --- a/src/Umbraco.Web.UI.Client/src/less/forms.less +++ b/src/Umbraco.Web.UI.Client/src/less/forms.less @@ -68,8 +68,9 @@ label.control-label, .control-label { .form-search .icon, .form-search .icon-search { position: absolute; z-index: 1; - top: 6px; + top: 50%; left: 6px; + transform: translateY(-50%); color: @gray-8; } diff --git a/src/Umbraco.Web.UI.Client/src/less/helveticons.less b/src/Umbraco.Web.UI.Client/src/less/helveticons.less index 82663270e9..2a311b2c15 100644 --- a/src/Umbraco.Web.UI.Client/src/less/helveticons.less +++ b/src/Umbraco.Web.UI.Client/src/less/helveticons.less @@ -8,35 +8,51 @@ font-style: normal; } -[class^="icon-"], -[class*=" icon-"] { +span[class^="icon-"], +span[class*=" icon-"] { + display: inline-block; + width: 1em; + height: 1em; + *margin-right: .3em; + + svg { + width: 100%; + height: 100%; + fill: currentColor; + } + + &.large{ + width: 32px; + height: 32px; + } + &.medium{ + width: 24px; + height: 24px; + } + &.small{ + width: 14px; + height: 14px; + } +} + +i[class^="icon-"], +i[class*=" icon-"], +button.icon-trash { font-family: icomoon; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; - *margin-right: .3em; } -[class^="icon-"]:before, -[class*=" icon-"]:before { - text-decoration: inherit; - display: inline-block; - speak: none; +i[class^="icon-"]:before, +i[class*=" icon-"]:before, +button.icon-trash { + text-decoration: inherit; + display: inline-block; + speak: none; } -/* -[class^="icon-"]:before, [class*=" icon-"]:before { - font-family: 'icomoon'; - speak: none; - font-weight: normal; - font-style: normal; - display: inline-block; - text-decoration: inherit; - font-size: 14px; - -webkit-font-smoothing: antialiased; -}*/ - i.large{ font-size: 32px; } @@ -47,1834 +63,1838 @@ i.small{ font-size: 14px; } -.icon-zoom-out:before { +i.icon-zoom-out:before { content: "\e000"; } -.icon-truck:before { +i.icon-truck:before { content: "\e001"; } -.icon-zoom-in:before { +i.icon-zoom-in:before { content: "\e002"; } -.icon-zip:before { +i.icon-zip:before { content: "\e003"; } -.icon-axis-rotation:before { +i.icon-axis-rotation:before { content: "\e004"; } -.icon-yen-bag:before { +i.icon-yen-bag:before { content: "\e005"; } -.icon-axis-rotation-2:before { +i.icon-axis-rotation-2:before { content: "\e006"; } -.icon-axis-rotation-3:before { +i.icon-axis-rotation-3:before { content: "\e007"; } -.icon-wrench:before { +i.icon-wrench:before { content: "\e008"; } -.icon-wine-glass:before { +i.icon-wine-glass:before { content: "\e009"; } -.icon-wrong:before { +i.icon-wrong:before { content: "\e00a"; } -.icon-windows:before { +i.icon-windows:before { content: "\e00b"; } -.icon-window-sizes:before { +i.icon-window-sizes:before { content: "\e00c"; } -.icon-window-popin:before { +i.icon-window-popin:before { content: "\e00d"; } -.icon-wifi:before { +i.icon-wifi:before { content: "\e00e"; } -.icon-width:before { +i.icon-width:before { content: "\e00f"; } -.icon-weight:before { +i.icon-weight:before { content: "\e010"; } -.icon-war:before { +i.icon-war:before { content: "\e011"; } -.icon-wand:before { +i.icon-wand:before { content: "\e012"; } -.icon-wallet:before { +i.icon-wallet:before { content: "\e013"; } -.icon-wall-plug:before { +i.icon-wall-plug:before { content: "\e014"; } -.icon-voice:before { +i.icon-voice:before { content: "\e016"; } -.icon-video:before { +i.icon-video:before { content: "\e017"; } -.icon-vcard:before { +i.icon-vcard:before { content: "\e018"; } -.icon-utilities:before { +i.icon-utilities:before { content: "\e019"; } -.icon-users:before { +i.icon-users:before { content: "\e01a"; } -.icon-users-alt:before { +i.icon-users-alt:before { content: "\e01b"; } -.icon-user:before { +i.icon-user:before { content: "\e01c"; } -.icon-user-glasses:before { +i.icon-user-glasses:before { content: "\e01d"; } -.icon-user-females:before { +i.icon-user-females:before { content: "\e01e"; } -.icon-user-females-alt:before { +i.icon-user-females-alt:before { content: "\e01f"; } -.icon-user-female:before { +i.icon-user-female:before { content: "\e020"; } -.icon-usb:before { +i.icon-usb:before { content: "\e021"; } -.icon-usb-connector:before { +i.icon-usb-connector:before { content: "\e022"; } -.icon-unlocked:before { +i.icon-unlocked:before { content: "\e023"; } -.icon-universal:before { +i.icon-universal:before { content: "\e024"; } -.icon-undo:before { +i.icon-undo:before { content: "\e025"; } -.icon-umbrella:before { +i.icon-umbrella:before { content: "\e026"; } -.icon-umb-deploy:before { +i.icon-umb-deploy:before { content: "\e027"; } -.icon-umb-contour:before, .traycontour:before, { +i.icon-umb-contour:before, .traycontour:before { content: "\e028"; } -.icon-umb-settings:before, .traysettings:before, { +i.icon-umb-settings:before, .traysettings:before { content: "\e029"; } -.icon-umb-users:before, .trayuser:before, .trayusers:before{ +i.icon-umb-users:before, .trayuser:before, .trayusers:before{ content: "\e02a"; } -.icon-umb-media:before, .traymedia:before, { +i.icon-umb-media:before, .traymedia:before { content: "\e02b"; } -.icon-umb-content:before, .traycontent:before{ +i.icon-umb-content:before, .traycontent:before{ content: "\e02c"; } -.icon-umb-developer:before, .traydeveloper:before, { +i.icon-umb-developer:before, .traydeveloper:before { content: "\e02d"; } -.icon-umb-members:before, .traymember:before { +i.icon-umb-members:before, .traymember:before { content: "\e015"; } -.icon-umb-translation:before, .traytranslation:before { +i.icon-umb-translation:before, .traytranslation:before { content: "\e1fd"; } -.icon-tv:before { +i.icon-tv:before { content: "\e02e"; } -.icon-tv-old:before { +i.icon-tv-old:before { content: "\e02f"; } -.icon-trophy:before { +i.icon-trophy:before { content: "\e030"; } -.icon-tree:before { +i.icon-tree:before { content: "\e031"; } -.icon-trash:before { +i.icon-trash:before, +button.icon-trash:before { content: "\e032"; } -.icon-trash-alt:before { +i.icon-trash-alt:before, +button.icon-trash-alt:before { content: "\e033"; } -.icon-trash-alt-2:before { +i.icon-trash-alt-2:before, +button.icon-trash-alt-2:before { content: "\e034"; } -.icon-train:before { +i.icon-train:before { content: "\e035"; } -.icon-trafic:before, -.icon-traffic:before { +i.icon-trafic:before, +i.icon-traffic:before { content: "\e036"; } -.icon-traffic-alt:before { +i.icon-traffic-alt:before { content: "\e037"; } -.icon-top:before { +i.icon-top:before { content: "\e038"; } -.icon-tools:before { +i.icon-tools:before { content: "\e039"; } -.icon-timer:before { +i.icon-timer:before { content: "\e03a"; } -.icon-time:before { +i.icon-time:before { content: "\e03b"; } -.icon-t-shirt:before { +i.icon-t-shirt:before { content: "\e03c"; } -.icon-tab-key:before { +i.icon-tab-key:before { content: "\e03d"; } -.icon-tab:before { +i.icon-tab:before { content: "\e03e"; } -.icon-tactics:before { +i.icon-tactics:before { content: "\e03f"; } -.icon-tag:before { +i.icon-tag:before { content: "\e040"; } -.icon-tags:before { +i.icon-tags:before { content: "\e041"; } -.icon-takeaway-cup:before { +i.icon-takeaway-cup:before { content: "\e042"; } -.icon-target:before { +i.icon-target:before { content: "\e043"; } -.icon-temperature-alt:before, -.icon-temperatrure-alt:before { +i.icon-temperature-alt:before, +i.icon-temperatrure-alt:before { content: "\e044"; } -.icon-temperature:before { +i.icon-temperature:before { content: "\e045"; } -.icon-terminal:before { +i.icon-terminal:before { content: "\e046"; } -.icon-theater:before { +i.icon-theater:before { content: "\e047"; } -.icon-thief:before, -.icon-theif:before { +i.icon-thief:before, +i.icon-theif:before { content: "\e048"; } -.icon-thought-bubble:before { +i.icon-thought-bubble:before { content: "\e049"; } -.icon-thumb-down:before { +i.icon-thumb-down:before { content: "\e04a"; } -.icon-thumb-up:before { +i.icon-thumb-up:before { content: "\e04b"; } -.icon-thumbnail-list:before { +i.icon-thumbnail-list:before { content: "\e04c"; } -.icon-thumbnails-small:before { +i.icon-thumbnails-small:before { content: "\e04d"; } -.icon-thumbnails:before { +i.icon-thumbnails:before { content: "\e04e"; } -.icon-ticket:before { +i.icon-ticket:before { content: "\e04f"; } -.icon-sync:before { +i.icon-sync:before { content: "\e050"; } -.icon-sweatshirt:before { +i.icon-sweatshirt:before { content: "\e051"; } -.icon-sunny:before { +i.icon-sunny:before { content: "\e052"; } -.icon-stream:before { +i.icon-stream:before { content: "\e053"; } -.icon-store:before { +i.icon-store:before { content: "\e054"; } -.icon-stop:before { +i.icon-stop:before { content: "\e055"; } -.icon-stop-hand:before { +i.icon-stop-hand:before { content: "\e056"; } -.icon-stop-alt:before { +i.icon-stop-alt:before { content: "\e057"; } -.icon-stamp:before { +i.icon-stamp:before { content: "\e058"; } -.icon-stacked-disks:before { +i.icon-stacked-disks:before { content: "\e059"; } -.icon-ssd:before { +i.icon-ssd:before { content: "\e05a"; } -.icon-squiggly-line:before { +i.icon-squiggly-line:before { content: "\e05b"; } -.icon-sprout:before { +i.icon-sprout:before { content: "\e05c"; } -.icon-split:before { +i.icon-split:before { content: "\e05d"; } -.icon-split-alt:before { +i.icon-split-alt:before { content: "\e05e"; } -.icon-speed-gauge:before { +i.icon-speed-gauge:before { content: "\e05f"; } -.icon-speaker:before { +i.icon-speaker:before { content: "\e060"; } -.icon-sound:before { +i.icon-sound:before { content: "\e061"; } -.icon-spades:before { +i.icon-spades:before { content: "\e062"; } -.icon-sound-waves:before { +i.icon-sound-waves:before { content: "\e063"; } -.icon-shipping-box:before { +i.icon-shipping-box:before { content: "\e064"; } -.icon-shipping:before { +i.icon-shipping:before { content: "\e065"; } -.icon-shoe:before { +i.icon-shoe:before { content: "\e066"; } -.icon-shopping-basket-alt-2:before { +i.icon-shopping-basket-alt-2:before { content: "\e067"; } -.icon-shopping-basket:before { +i.icon-shopping-basket:before { content: "\e068"; } -.icon-shopping-basket-alt:before { +i.icon-shopping-basket-alt:before { content: "\e069"; } -.icon-shorts:before { +i.icon-shorts:before { content: "\e06a"; } -.icon-shuffle:before { +i.icon-shuffle:before { content: "\e06b"; } -.icon-science:before, -.icon-sience:before { +i.icon-science:before, +i.icon-sience:before { content: "\e06c"; } -.icon-simcard:before { +i.icon-simcard:before { content: "\e06d"; } -.icon-single-note:before { +i.icon-single-note:before { content: "\e06e"; } -.icon-sitemap:before { +i.icon-sitemap:before { content: "\e06f"; } -.icon-sleep:before { +i.icon-sleep:before { content: "\e070"; } -.icon-slideshow:before { +i.icon-slideshow:before { content: "\e071"; } -.icon-smiley-inverted:before { +i.icon-smiley-inverted:before { content: "\e072"; } -.icon-smiley:before { +i.icon-smiley:before { content: "\e073"; } -.icon-snow:before { +i.icon-snow:before { content: "\e074"; } -.icon-sound-low:before { +i.icon-sound-low:before { content: "\e075"; } -.icon-sound-medium:before { +i.icon-sound-medium:before { content: "\e076"; } -.icon-sound-off:before { +i.icon-sound-off:before { content: "\e077"; } -.icon-shift:before { +i.icon-shift:before { content: "\e078"; } -.icon-shield:before { +i.icon-shield:before { content: "\e079"; } -.icon-sharing-iphone:before { +i.icon-sharing-iphone:before { content: "\e07a"; } -.icon-share:before { +i.icon-share:before { content: "\e07b"; } -.icon-share-alt:before { +i.icon-share-alt:before { content: "\e07c"; } -.icon-share-alt-2:before { +i.icon-share-alt-2:before { content: "\e07d"; } -.icon-settings:before { +i.icon-settings:before, +button.icon-settings:before { content: "\e07e"; } -.icon-settings-alt:before { +i.icon-settings-alt:before { content: "\e07f"; } -.icon-settings-alt-2:before { +i.icon-settings-alt-2:before { content: "\e080"; } -.icon-server:before { +i.icon-server:before { content: "\e081"; } -.icon-server-alt:before { +i.icon-server-alt:before { content: "\e082"; } -.icon-sensor:before { +i.icon-sensor:before { content: "\e083"; } -.icon-security-camera:before { +i.icon-security-camera:before { content: "\e084"; } -.icon-search:before { +i.icon-search:before { content: "\e085"; } -.icon-scull:before { +i.icon-scull:before { content: "\e086"; } -.icon-script:before { +i.icon-script:before { content: "\e087"; } -.icon-script-alt:before { +i.icon-script-alt:before { content: "\e088"; } -.icon-screensharing:before { +i.icon-screensharing:before { content: "\e089"; } -.icon-school:before { +i.icon-school:before { content: "\e08a"; } -.icon-scan:before { +i.icon-scan:before { content: "\e08b"; } -.icon-refresh:before { +i.icon-refresh:before { content: "\e08c"; } -.icon-remote:before { +i.icon-remote:before { content: "\e08d"; } -.icon-remove:before { +i.icon-remove:before { content: "\e08e"; } -.icon-repeat-one:before { +i.icon-repeat-one:before { content: "\e08f"; } -.icon-repeat:before { +i.icon-repeat:before { content: "\e090"; } -.icon-resize:before { +i.icon-resize:before { content: "\e091"; } -.icon-reply-arrow:before { +i.icon-reply-arrow:before { content: "\e092"; } -.icon-return-to-top:before { +i.icon-return-to-top:before { content: "\e093"; } -.icon-right-double-arrow:before { +i.icon-right-double-arrow:before { content: "\e094"; } -.icon-road:before { +i.icon-road:before { content: "\e095"; } -.icon-roadsign:before { +i.icon-roadsign:before { content: "\e096"; } -.icon-rocket:before { +i.icon-rocket:before { content: "\e097"; } -.icon-rss:before { +i.icon-rss:before { content: "\e098"; } -.icon-ruler-alt:before { +i.icon-ruler-alt:before { content: "\e099"; } -.icon-ruler:before { +i.icon-ruler:before { content: "\e09a"; } -.icon-sandbox-toys:before { +i.icon-sandbox-toys:before { content: "\e09b"; } -.icon-satellite-dish:before { +i.icon-satellite-dish:before { content: "\e09c"; } -.icon-save:before { +i.icon-save:before { content: "\e09d"; } -.icon-safedial:before { +i.icon-safedial:before { content: "\e09e"; } -.icon-safe:before { +i.icon-safe:before { content: "\e09f"; } -.icon-redo:before { +i.icon-redo:before { content: "\e0a0"; } -.icon-printer-alt:before { +i.icon-printer-alt:before { content: "\e0a1"; } -.icon-planet:before { +i.icon-planet:before { content: "\e0a2"; } -.icon-paste-in:before { +i.icon-paste-in:before { content: "\e0a3"; } -.icon-os-x:before { +i.icon-os-x:before { content: "\e0a4"; } -.icon-navigation-left:before { +i.icon-navigation-left:before { content: "\e0a5"; } -.icon-message:before { +i.icon-message:before { content: "\e0a6"; } -.icon-lock:before { +i.icon-lock:before { content: "\e0a7"; } -.icon-layers-alt:before { +i.icon-layers-alt:before { content: "\e0a8"; } -.icon-record:before { +i.icon-record:before { content: "\e0a9"; } -.icon-print:before { +i.icon-print:before { content: "\e0aa"; } -.icon-plane:before { +i.icon-plane:before { content: "\e0ab"; } -.icon-partly-cloudy:before { +i.icon-partly-cloudy:before { content: "\e0ac"; } -.icon-ordered-list:before { +i.icon-ordered-list:before { content: "\e0ad"; } -.icon-navigation-last:before { +i.icon-navigation-last:before { content: "\e0ae"; } -.icon-message-unopened:before { +i.icon-message-unopened:before { content: "\e0af"; } -.icon-location-nearby:before { +i.icon-location-nearby:before { content: "\e0b0"; } -.icon-laptop:before { +i.icon-laptop:before { content: "\e0b1"; } -.icon-reception:before { +i.icon-reception:before { content: "\e0b2"; } -.icon-price-yen:before { +i.icon-price-yen:before { content: "\e0b3"; } -.icon-piracy:before { +i.icon-piracy:before { content: "\e0b4"; } -.icon-parental-control:before { +i.icon-parental-control:before { content: "\e0b5"; } -.icon-operator:before { +i.icon-operator:before { content: "\e0b6"; } -.icon-navigation-horizontal:before { +i.icon-navigation-horizontal:before { content: "\e0b7"; } -.icon-message-open:before { +i.icon-message-open:before { content: "\e0b8"; } -.icon-lab:before { +i.icon-lab:before { content: "\e0b9"; } -.icon-location-near-me:before { +i.icon-location-near-me:before { content: "\e0ba"; } -.icon-receipt-yen:before { +i.icon-receipt-yen:before { content: "\e0bb"; } -.icon-price-pound:before { +i.icon-price-pound:before { content: "\e0bc"; } -.icon-pin-location:before { +i.icon-pin-location:before { content: "\e0bd"; } -.icon-parachute-drop:before { +i.icon-parachute-drop:before { content: "\e0be"; } -.icon-old-phone:before { +i.icon-old-phone:before { content: "\e0bf"; } -.icon-merge:before { +i.icon-merge:before { content: "\e0c0"; } -.icon-navigation-first:before { +i.icon-navigation-first:before { content: "\e0c1"; } -.icon-locate:before { +i.icon-locate:before { content: "\e0c2"; } -.icon-keyhole:before { +i.icon-keyhole:before { content: "\e0c3"; } -.icon-receipt-pound:before { +i.icon-receipt-pound:before { content: "\e0c4"; } -.icon-price-euro:before { +i.icon-price-euro:before { content: "\e0c5"; } -.icon-piggy-bank:before { +i.icon-piggy-bank:before { content: "\e0c6"; } -.icon-paper-plane:before { +i.icon-paper-plane:before { content: "\e0c7"; } -.icon-old-key:before { +i.icon-old-key:before { content: "\e0c8"; } -.icon-navigation-down:before { +i.icon-navigation-down:before { content: "\e0c9"; } -.icon-megaphone:before { +i.icon-megaphone:before { content: "\e0ca"; } -.icon-loading:before { +i.icon-loading:before { content: "\e0cb"; } -.icon-keychain:before { +i.icon-keychain:before { content: "\e0cc"; } -.icon-receipt-euro:before { +i.icon-receipt-euro:before { content: "\e0cd"; } -.icon-price-dollar:before { +i.icon-price-dollar:before { content: "\e0ce"; } -.icon-pie-chart:before { +i.icon-pie-chart:before { content: "\e0cf"; } -.icon-paper-plane-alt:before { +i.icon-paper-plane-alt:before { content: "\e0d0"; } -.icon-notepad:before { +i.icon-notepad:before { content: "\e0d1"; } -.icon-navigation-bottom:before { +i.icon-navigation-bottom:before { content: "\e0d2"; } -.icon-meeting:before { +i.icon-meeting:before { content: "\e0d3"; } -.icon-keyboard:before { +i.icon-keyboard:before { content: "\e0d4"; } -.icon-load:before { +i.icon-load:before { content: "\e0d5"; } -.icon-receipt-dollar:before { +i.icon-receipt-dollar:before { content: "\e0d6"; } -.icon-previous:before { +i.icon-previous:before { content: "\e0d7"; } -.icon-pictures:before { +i.icon-pictures:before { content: "\e0d8"; } -.icon-notepad-alt:before { +i.icon-notepad-alt:before { content: "\e0d9"; } -.icon-paper-bag:before { +i.icon-paper-bag:before { content: "\e0da"; } -.icon-name-badge:before { +i.icon-badge:before { content: "\e0db"; } -.icon-medicine:before { +i.icon-medicine:before { content: "\e0dc"; } -.icon-list:before { +i.icon-list:before { content: "\e0dd"; } -.icon-key:before { +i.icon-key:before { content: "\e0de"; } -.icon-receipt-alt:before { +i.icon-receipt-alt:before { content: "\e0df"; } -.icon-previous-media:before { +i.icon-previous-media:before { content: "\e0e0"; } -.icon-pictures-alt:before { +i.icon-pictures-alt:before { content: "\e0e1"; } -.icon-pants:before { +i.icon-pants:before { content: "\e0e2"; } -.icon-nodes:before { +i.icon-nodes:before { content: "\e0e3"; } -.icon-music:before { +i.icon-music:before { content: "\e0e4"; } -.icon-readonly:before { +i.icon-readonly:before { content: "\e0e5"; } -.icon-presentation:before { +i.icon-presentation:before { content: "\e0e6"; } -.icon-pictures-alt-2:before { +i.icon-pictures-alt-2:before { content: "\e0e7"; } -.icon-panel-close:before, -.icon-pannel-close:before { +i.icon-panel-close:before, +i.icon-pannel-close:before { content: "\e0e8"; } -.icon-next:before { +i.icon-next:before { content: "\e0e9"; } -.icon-multiple-windows:before { +i.icon-multiple-windows:before { content: "\e0ea"; } -.icon-medical-emergency:before { +i.icon-medical-emergency:before { content: "\e0eb"; } -.icon-medal:before { +i.icon-medal:before { content: "\e0ec"; } -.icon-link:before { +i.icon-link:before { content: "\e0ed"; } -.icon-linux-tux:before { +i.icon-linux-tux:before { content: "\e0ee"; } -.icon-junk:before { +i.icon-junk:before { content: "\e0ef"; } -.icon-item-arrangement:before { +i.icon-item-arrangement:before { content: "\e0f0"; } -.icon-iphone:before { +i.icon-iphone:before { content: "\e0f1"; } -.icon-lightning:before { +i.icon-lightning:before { content: "\e0f2"; } -.icon-map:before { +i.icon-map:before { content: "\e0f3"; } -.icon-multiple-credit-cards:before { +i.icon-multiple-credit-cards:before { content: "\e0f4"; } -.icon-next-media:before { +i.icon-next-media:before { content: "\e0f5"; } -.icon-panel-show:before { +i.icon-panel-show:before { content: "\e0f6"; } -.icon-picture:before { +i.icon-picture:before { content: "\e0f7"; } -.icon-power:before { +i.icon-power:before { content: "\e0f8"; } -.icon-re-post:before { +i.icon-re-post:before { content: "\e0f9"; } -.icon-rate:before { +i.icon-rate:before { content: "\e0fa"; } -.icon-rain:before { +i.icon-rain:before { content: "\e0fb"; } -.icon-radio:before { +i.icon-radio:before { content: "\e0fc"; } -.icon-radio-receiver:before { +i.icon-radio-receiver:before { content: "\e0fd"; } -.icon-radio-alt:before { +i.icon-radio-alt:before { content: "\e0fe"; } -.icon-quote:before { +i.icon-quote:before { content: "\e0ff"; } -.icon-qr-code:before { +i.icon-qr-code:before { content: "\e100"; } -.icon-pushpin:before { +i.icon-pushpin:before { content: "\e101"; } -.icon-pulse:before { +i.icon-pulse:before { content: "\e102"; } -.icon-projector:before { +i.icon-projector:before { content: "\e103"; } -.icon-play:before { +i.icon-play:before { content: "\e104"; } -.icon-playing-cards:before { +i.icon-playing-cards:before { content: "\e105"; } -.icon-playlist:before { +i.icon-playlist:before { content: "\e106"; } -.icon-plugin:before { +i.icon-plugin:before { content: "\e107"; } -.icon-podcast:before { +i.icon-podcast:before { content: "\e108"; } -.icon-poker-chip:before { +i.icon-poker-chip:before { content: "\e109"; } -.icon-poll:before { +i.icon-poll:before { content: "\e10a"; } -.icon-post-it:before { +i.icon-post-it:before { content: "\e10b"; } -.icon-pound-bag:before { +i.icon-pound-bag:before { content: "\e10c"; } -.icon-power-outlet:before { +i.icon-power-outlet:before { content: "\e10d"; } -.icon-photo-album:before { +i.icon-photo-album:before { content: "\e10e"; } -.icon-phone:before { +i.icon-phone:before { content: "\e10f"; } -.icon-phone-ring:before { +i.icon-phone-ring:before { content: "\e110"; } -.icon-people:before { +i.icon-people:before { content: "\e111"; } -.icon-people-female:before { +i.icon-people-female:before { content: "\e112"; } -.icon-people-alt:before { +i.icon-people-alt:before { content: "\e113"; } -.icon-people-alt-2:before { +i.icon-people-alt-2:before { content: "\e114"; } -.icon-pc:before { +i.icon-pc:before { content: "\e115"; } -.icon-pause:before { +i.icon-pause:before { content: "\e116"; } -.icon-path:before { +i.icon-path:before { content: "\e117"; } -.icon-out:before { +i.icon-out:before { content: "\e118"; } -.icon-outbox:before { +i.icon-outbox:before { content: "\e119"; } -.icon-outdent:before { +i.icon-outdent:before { content: "\e11a"; } -.icon-page-add:before { +i.icon-page-add:before { content: "\e11b"; } -.icon-page-down:before { +i.icon-page-down:before { content: "\e11c"; } -.icon-page-remove:before { +i.icon-page-remove:before { content: "\e11d"; } -.icon-page-restricted:before { +i.icon-page-restricted:before { content: "\e11e"; } -.icon-page-up:before { +i.icon-page-up:before { content: "\e11f"; } -.icon-paint-roller:before { +i.icon-paint-roller:before { content: "\e120"; } -.icon-palette:before { +i.icon-palette:before { content: "\e121"; } -.icon-newspaper:before { +i.icon-newspaper:before { content: "\e122"; } -.icon-newspaper-alt:before { +i.icon-newspaper-alt:before { content: "\e123"; } -.icon-network-alt:before { +i.icon-network-alt:before { content: "\e124"; } -.icon-navigational-arrow:before { +i.icon-navigational-arrow:before { content: "\e125"; } -.icon-navigation:before { +i.icon-navigation:before { content: "\e126"; } -.icon-navigation-vertical:before { +i.icon-navigation-vertical:before { content: "\e127"; } -.icon-navigation-up:before { +i.icon-navigation-up:before { content: "\e128"; } -.icon-navigation-top:before { +i.icon-navigation-top:before { content: "\e129"; } -.icon-navigation-road:before { +i.icon-navigation-road:before { content: "\e12a"; } -.icon-navigation-right:before { +i.icon-navigation-right:before { content: "\e12b"; } -.icon-microscope:before { +i.icon-microscope:before { content: "\e12c"; } -.icon-mindmap:before { +i.icon-mindmap:before { content: "\e12d"; } -.icon-molecular-network:before { +i.icon-molecular-network:before { content: "\e12e"; } -.icon-molecular:before { +i.icon-molecular:before { content: "\e12f"; } -.icon-mountain:before { +i.icon-mountain:before { content: "\e130"; } -.icon-mouse-cursor:before { +i.icon-mouse-cursor:before { content: "\e131"; } -.icon-mouse:before { +i.icon-mouse:before { content: "\e132"; } -.icon-movie-alt:before { +i.icon-movie-alt:before { content: "\e133"; } -.icon-map-marker:before { +i.icon-map-marker:before { content: "\e134"; } -.icon-movie:before { +i.icon-movie:before { content: "\e135"; } -.icon-map-location:before { +i.icon-map-location:before { content: "\e136"; } -.icon-map-alt:before { +i.icon-map-alt:before { content: "\e137"; } -.icon-male-symbol:before { +i.icon-male-symbol:before { content: "\e138"; } -.icon-male-and-female:before { +i.icon-male-and-female:before { content: "\e139"; } -.icon-mailbox:before { +i.icon-mailbox:before { content: "\e13a"; } -.icon-magnet:before { +i.icon-magnet:before { content: "\e13b"; } -.icon-loupe:before { +i.icon-loupe:before { content: "\e13c"; } -.icon-mobile:before { +i.icon-mobile:before { content: "\e13d"; } -.icon-logout:before { +i.icon-logout:before { content: "\e13e"; } -.icon-log-out:before { +i.icon-log-out:before { content: "\e13f"; } -.icon-layers:before { +i.icon-layers:before { content: "\e140"; } -.icon-left-double-arrow:before { +i.icon-left-double-arrow:before { content: "\e141"; } -.icon-layout:before { +i.icon-layout:before { content: "\e142"; } -.icon-legal:before { +i.icon-legal:before { content: "\e143"; } -.icon-lense:before { +i.icon-lense:before { content: "\e144"; } -.icon-library:before { +i.icon-library:before { content: "\e145"; } -.icon-light-down:before { +i.icon-light-down:before { content: "\e146"; } -.icon-light-up:before { +i.icon-light-up:before { content: "\e147"; } -.icon-lightbulb-active:before { +i.icon-lightbulb-active:before { content: "\e148"; } -.icon-lightbulb:before { +i.icon-lightbulb:before { content: "\e149"; } -.icon-ipad:before { +i.icon-ipad:before { content: "\e14a"; } -.icon-invoice:before { +i.icon-invoice:before { content: "\e14b"; } -.icon-info:before { +i.icon-info:before { content: "\e14c"; } -.icon-infinity:before { +i.icon-infinity:before { content: "\e14d"; } -.icon-indent:before { +i.icon-indent:before { content: "\e14e"; } -.icon-inbox:before { +i.icon-inbox:before { content: "\e14f"; } -.icon-inbox-full:before { +i.icon-inbox-full:before { content: "\e150"; } -.icon-inactive-line:before { +i.icon-inactive-line:before { content: "\e151"; } -.icon-imac:before { +i.icon-imac:before { content: "\e152"; } -.icon-hourglass:before { +i.icon-hourglass:before { content: "\e153"; } -.icon-home:before { +i.icon-home:before { content: "\e154"; } -.icon-grid:before { +i.icon-grid:before { content: "\e155"; } -.icon-food:before { +i.icon-food:before { content: "\e156"; } -.icon-favorite:before { +i.icon-favorite:before { content: "\e157"; } -.icon-door-open-alt:before { +i.icon-door-open-alt:before { content: "\e158"; } -.icon-diagnostics:before { +i.icon-diagnostics:before { content: "\e159"; } -.icon-contrast:before { +i.icon-contrast:before { content: "\e15a"; } -.icon-coins-dollar-alt:before { +i.icon-coins-dollar-alt:before { content: "\e15b"; } -.icon-circle-dotted-active:before { +i.icon-circle-dotted-active:before { content: "\e15c"; } -.icon-cinema:before { +i.icon-cinema:before { content: "\e15d"; } -.icon-chip:before { +i.icon-chip:before { content: "\e15e"; } -.icon-chip-alt:before { +i.icon-chip-alt:before { content: "\e15f"; } -.icon-chess:before { +i.icon-chess:before { content: "\e160"; } -.icon-checkbox:before { +i.icon-checkbox:before { content: "\e161"; } -.icon-checkbox-empty:before { +i.icon-checkbox-empty:before { content: "\e162"; } -.icon-checkbox-dotted:before { +i.icon-checkbox-dotted:before { content: "\e163"; } -.icon-checkbox-dotted-active:before { +i.icon-checkbox-dotted-active:before { content: "\e164"; } -.icon-check:before { +i.icon-check:before { content: "\e165"; } -.icon-chat:before { +i.icon-chat:before { content: "\e166"; } -.icon-chat-active:before { +i.icon-chat-active:before { content: "\e167"; } -.icon-chart:before { +i.icon-chart:before { content: "\e168"; } -.icon-chart-curve:before { +i.icon-chart-curve:before { content: "\e169"; } -.icon-certificate:before { +i.icon-certificate:before { content: "\e16a"; } -.icon-categories:before { +i.icon-categories:before { content: "\e16b"; } -.icon-cash-register:before { +i.icon-cash-register:before { content: "\e16c"; } -.icon-car:before { +i.icon-car:before { content: "\e16d"; } -.icon-caps-lock:before { +i.icon-caps-lock:before { content: "\e16e"; } -.icon-candy:before { +i.icon-candy:before { content: "\e16f"; } -.icon-circle-dotted:before { +i.icon-circle-dotted:before { content: "\e170"; } -.icon-circuits:before { +i.icon-circuits:before { content: "\e171"; } -.icon-circus:before { +i.icon-circus:before { content: "\e172"; } -.icon-client:before { +i.icon-client:before { content: "\e173"; } -.icon-clothes-hanger:before { +i.icon-clothes-hanger:before { content: "\e174"; } -.icon-cloud-drive:before { +i.icon-cloud-drive:before { content: "\e175"; } -.icon-cloud-upload:before { +i.icon-cloud-upload:before { content: "\e176"; } -.icon-cloud:before { +i.icon-cloud:before { content: "\e177"; } -.icon-cloudy:before { +i.icon-cloudy:before { content: "\e178"; } -.icon-clubs:before { +i.icon-clubs:before { content: "\e179"; } -.icon-cocktail:before { +i.icon-cocktail:before { content: "\e17a"; } -.icon-code:before { +i.icon-code:before { content: "\e17b"; } -.icon-coffee:before { +i.icon-coffee:before { content: "\e17c"; } -.icon-coin-dollar:before { +i.icon-coin-dollar:before { content: "\e17d"; } -.icon-coin-pound:before { +i.icon-coin-pound:before { content: "\e17e"; } -.icon-coin-yen:before { +i.icon-coin-yen:before { content: "\e17f"; } -.icon-coin:before { +i.icon-coin:before { content: "\e180"; } -.icon-coins-alt:before { +i.icon-coins-alt:before { content: "\e181"; } -.icon-console:before { +i.icon-console:before { content: "\e182"; } -.icon-connection:before { +i.icon-connection:before { content: "\e183"; } -.icon-compress:before { +i.icon-compress:before { content: "\e184"; } -.icon-company:before { +i.icon-company:before { content: "\e185"; } -.icon-command:before { +i.icon-command:before { content: "\e186"; } -.icon-coin-euro:before { +i.icon-coin-euro:before { content: "\e187"; } -.icon-combination-lock:before { +i.icon-combination-lock:before { content: "\e188"; } -.icon-combination-lock-open:before { +i.icon-combination-lock-open:before { content: "\e189"; } -.icon-comb:before { +i.icon-comb:before { content: "\e18a"; } -.icon-columns:before { +i.icon-columns:before { content: "\e18b"; } -.icon-colorpicker:before { +i.icon-colorpicker:before { content: "\e18c"; } -.icon-color-bucket:before { +i.icon-color-bucket:before { content: "\e18d"; } -.icon-coins:before { +i.icon-coins:before { content: "\e18e"; } -.icon-coins-yen:before { +i.icon-coins-yen:before { content: "\e18f"; } -.icon-coins-yen-alt:before { +i.icon-coins-yen-alt:before { content: "\e190"; } -.icon-coins-pound:before { +i.icon-coins-pound:before { content: "\e191"; } -.icon-coins-pound-alt:before { +i.icon-coins-pound-alt:before { content: "\e192"; } -.icon-coins-euro:before { +i.icon-coins-euro:before { content: "\e193"; } -.icon-coins-euro-alt:before { +i.icon-coins-euro-alt:before { content: "\e194"; } -.icon-coins-dollar:before { +i.icon-coins-dollar:before { content: "\e195"; } -.icon-conversation-alt:before { +i.icon-conversation-alt:before { content: "\e196"; } -.icon-conversation:before { +i.icon-conversation:before { content: "\e197"; } -.icon-coverflow:before { +i.icon-coverflow:before { content: "\e198"; } -.icon-credit-card-alt:before { +i.icon-credit-card-alt:before { content: "\e199"; } -.icon-credit-card:before { +i.icon-credit-card:before { content: "\e19a"; } -.icon-crop:before { +i.icon-crop:before { content: "\e19b"; } -.icon-crosshair:before { +i.icon-crosshair:before { content: "\e19c"; } -.icon-crown-alt:before { +i.icon-crown-alt:before { content: "\e19d"; } -.icon-crown:before { +i.icon-crown:before { content: "\e19e"; } -.icon-cupcake:before { +i.icon-cupcake:before { content: "\e19f"; } -.icon-curve:before { +i.icon-curve:before { content: "\e1a0"; } -.icon-cut:before { +i.icon-cut:before { content: "\e1a1"; } -.icon-dashboard:before { +i.icon-dashboard:before { content: "\e1a2"; } -.icon-defrag:before { +i.icon-defrag:before { content: "\e1a3"; } -.icon-delete:before { +i.icon-delete:before { content: "\e1a4"; } -.icon-delete-key:before { +i.icon-delete-key:before { content: "\e1a5"; } -.icon-departure:before { +i.icon-departure:before { content: "\e1a6"; } -.icon-desk:before { +i.icon-desk:before { content: "\e1a7"; } -.icon-desktop:before { +i.icon-desktop:before { content: "\e1a8"; } -.icon-donate:before { +i.icon-donate:before { content: "\e1a9"; } -.icon-dollar-bag:before { +i.icon-dollar-bag:before { content: "\e1aa"; } -.icon-documents:before { +i.icon-documents:before { content: "\e1ab"; } -.icon-document:before { +i.icon-document:before { content: "\e1ac"; } -.icon-document-dashed-line:before { +i.icon-document-dashed-line:before { content: "\e1ad"; } -.icon-dock-connector:before { +i.icon-dock-connector:before { content: "\e1ae"; } -.icon-dna:before { +i.icon-dna:before { content: "\e1af"; } -.icon-display:before { +i.icon-display:before { content: "\e1b0"; } -.icon-disk-image:before { +i.icon-disk-image:before { content: "\e1b1"; } -.icon-disc:before { +i.icon-disc:before { content: "\e1b2"; } -.icon-directions:before { +i.icon-directions:before { content: "\e1b3"; } -.icon-directions-alt:before { +i.icon-directions-alt:before { content: "\e1b4"; } -.icon-diploma:before { +i.icon-diploma:before { content: "\e1b5"; } -.icon-diploma-alt:before { +i.icon-diploma-alt:before { content: "\e1b6"; } -.icon-dice:before { +i.icon-dice:before { content: "\e1b7"; } -.icon-diamonds:before { +i.icon-diamonds:before { content: "\e1b8"; } -.icon-diamond:before { +i.icon-diamond:before { content: "\e1b9"; } -.icon-diagonal-arrow:before { +i.icon-diagonal-arrow:before { content: "\e1ba"; } -.icon-diagonal-arrow-alt:before { +i.icon-diagonal-arrow-alt:before { content: "\e1bb"; } -.icon-door-open:before { +i.icon-door-open:before { content: "\e1bc"; } -.icon-download-alt:before { +i.icon-download-alt:before { content: "\e1bd"; } -.icon-download:before { +i.icon-download:before { content: "\e1be"; } -.icon-drop:before { +i.icon-drop:before { content: "\e1bf"; } -.icon-eco:before { +i.icon-eco:before { content: "\e1c0"; } -.icon-economy:before { +i.icon-economy:before { content: "\e1c1"; } -.icon-edit:before { +i.icon-edit:before { content: "\e1c2"; } -.icon-eject:before { +i.icon-eject:before { content: "\e1c3"; } -.icon-employee:before { +i.icon-employee:before { content: "\e1c4"; } -.icon-energy-saving-bulb:before { +i.icon-energy-saving-bulb:before { content: "\e1c5"; } -.icon-enter:before { +i.icon-enter:before { content: "\e1c6"; } -.icon-equalizer:before { +i.icon-equalizer:before { content: "\e1c7"; } -.icon-escape:before { +i.icon-escape:before { content: "\e1c8"; } -.icon-ethernet:before { +i.icon-ethernet:before { content: "\e1c9"; } -.icon-euro-bag:before { +i.icon-euro-bag:before { content: "\e1ca"; } -.icon-exit-fullscreen:before { +i.icon-exit-fullscreen:before { content: "\e1cb"; } -.icon-eye:before { +i.icon-eye:before { content: "\e1cc"; } -.icon-facebook-like:before { +i.icon-facebook-like:before { content: "\e1cd"; } -.icon-factory:before { +i.icon-factory:before { content: "\e1ce"; } -.icon-font:before { +i.icon-font:before { content: "\e1cf"; } -.icon-folders:before { +i.icon-folders:before { content: "\e1d0"; } -.icon-folder:before, .icon-folder-close:before { +i.icon-folder:before, i.icon-folder-close:before { content: "\e1d1"; } -.icon-folder-outline:before { +i.icon-folder-outline:before { content: "\e1d2"; } -.icon-folder-open:before { +i.icon-folder-open:before { content: "\e1d3"; } -.icon-flowerpot:before { +i.icon-flowerpot:before { content: "\e1d4"; } -.icon-flashlight:before { +i.icon-flashlight:before { content: "\e1d5"; } -.icon-flash:before { +i.icon-flash:before { content: "\e1d6"; } -.icon-flag:before { +i.icon-flag:before { content: "\e1d7"; } -.icon-flag-alt:before { +i.icon-flag-alt:before { content: "\e1d8"; } -.icon-firewire:before { +i.icon-firewire:before { content: "\e1d9"; } -.icon-firewall:before { +i.icon-firewall:before { content: "\e1da"; } -.icon-fire:before { +i.icon-fire:before { content: "\e1db"; } -.icon-fingerprint:before { +i.icon-fingerprint:before { content: "\e1dc"; } -.icon-filter:before { +i.icon-filter:before { content: "\e1dd"; } -.icon-filter-arrows:before { +i.icon-filter-arrows:before { content: "\e1de"; } -.icon-files:before { +i.icon-files:before { content: "\e1df"; } -.icon-file-cabinet:before { +i.icon-file-cabinet:before { content: "\e1e0"; } -.icon-female-symbol:before { +i.icon-female-symbol:before { content: "\e1e1"; } -.icon-footprints:before { +i.icon-footprints:before { content: "\e1e2"; } -.icon-hammer:before { +i.icon-hammer:before { content: "\e1e3"; } -.icon-hand-active-alt:before { +i.icon-hand-active-alt:before { content: "\e1e4"; } -.icon-forking:before { +i.icon-forking:before { content: "\e1e5"; } -.icon-hand-active:before { +i.icon-hand-active:before { content: "\e1e6"; } -.icon-hand-pointer-alt:before { +i.icon-hand-pointer-alt:before { content: "\e1e7"; } -.icon-hand-pointer:before { +i.icon-hand-pointer:before { content: "\e1e8"; } -.icon-handprint:before { +i.icon-handprint:before { content: "\e1e9"; } -.icon-handshake:before { +i.icon-handshake:before { content: "\e1ea"; } -.icon-handtool:before { +i.icon-handtool:before { content: "\e1eb"; } -.icon-hard-drive:before { +i.icon-hard-drive:before { content: "\e1ec"; } -.icon-help:before { +i.icon-help:before { content: "\e1ed"; } -.icon-graduate:before { +i.icon-graduate:before { content: "\e1ee"; } -.icon-gps:before { +i.icon-gps:before { content: "\e1ef"; } -.icon-help-alt:before { +i.icon-help-alt:before { content: "\e1f0"; } -.icon-height:before { +i.icon-height:before { content: "\e1f1"; } -.icon-globe:before { +i.icon-globe:before { content: "\e1f2"; } -.icon-hearts:before { +i.icon-hearts:before { content: "\e1f3"; } -.icon-globe-inverted-europe-africa:before { +i.icon-globe-inverted-europe-africa:before { content: "\e1f4"; } -.icon-headset:before { +i.icon-headset:before { content: "\e1f5"; } -.icon-globe-inverted-asia:before { +i.icon-globe-inverted-asia:before { content: "\e1f6"; } -.icon-headphones:before { +i.icon-headphones:before { content: "\e1f7"; } -.icon-globe-inverted-america:before { +i.icon-globe-inverted-america:before { content: "\e1f8"; } -.icon-hd:before { +i.icon-hd:before { content: "\e1f9"; } -.icon-globe-europe-africa:before, -.icon-globe-europe---africa:before { +i.icon-globe-europe-africa:before, +i.icon-globe-europe---africa:before { content: "\e1fa"; } -.icon-hat:before { +i.icon-hat:before { content: "\e1fb"; } -.icon-globe-asia:before { +i.icon-globe-asia:before { content: "\e1fc"; } -.icon-globe-alt:before { +i.icon-globe-alt:before { content: "\e1fd"; } -.icon-hard-drive-alt:before { +i.icon-hard-drive-alt:before { content: "\e1fe"; } -.icon-glasses:before { +i.icon-glasses:before { content: "\e1ff"; } -.icon-gift:before { +i.icon-gift:before { content: "\e200"; } -.icon-handtool-alt:before { +i.icon-handtool-alt:before { content: "\e201"; } -.icon-geometry:before { +i.icon-geometry:before { content: "\e202"; } -.icon-game:before { +i.icon-game:before { content: "\e203"; } -.icon-fullscreen:before { +i.icon-fullscreen:before { content: "\e204"; } -.icon-fullscreen-alt:before { +i.icon-fullscreen-alt:before { content: "\e205"; } -.icon-frame:before { +i.icon-frame:before { content: "\e206"; } -.icon-frame-alt:before { +i.icon-frame-alt:before { content: "\e207"; } -.icon-camera-roll:before { +i.icon-camera-roll:before { content: "\e208"; } -.icon-bookmark:before { +i.icon-bookmark:before { content: "\e209"; } -.icon-bill:before { +i.icon-bill:before { content: "\e20a"; } -.icon-baby-stroller:before { +i.icon-baby-stroller:before { content: "\e20b"; } -.icon-alarm-clock:before { +i.icon-alarm-clock:before { content: "\e20c"; } -.icon-addressbook:before, -.icon-adressbook:before { +i.icon-addressbook:before, +i.icon-adressbook:before { content: "\e20d"; } -.icon-add:before { +i.icon-add:before { content: "\e20e"; } -.icon-activity:before { +i.icon-activity:before { content: "\e20f"; } -.icon-untitled:before { +i.icon-untitled:before { content: "\e210"; } -.icon-glasses:before { +i.icon-glasses:before { content: "\e211"; } -.icon-camcorder:before { +i.icon-camcorder:before { content: "\e212"; } -.icon-calendar:before { +i.icon-calendar:before { content: "\e213"; } -.icon-calendar-alt:before { +i.icon-calendar-alt:before { content: "\e214"; } -.icon-calculator:before { +i.icon-calculator:before { content: "\e215"; } -.icon-bus:before { +i.icon-bus:before { content: "\e216"; } -.icon-burn:before { +i.icon-burn:before { content: "\e217"; } -.icon-bulleted-list:before { +i.icon-bulleted-list:before { content: "\e218"; } -.icon-bug:before { +i.icon-bug:before { content: "\e219"; } -.icon-brush:before { +i.icon-brush:before { content: "\e21a"; } -.icon-brush-alt:before { +i.icon-brush-alt:before { content: "\e21b"; } -.icon-brush-alt-2:before { +i.icon-brush-alt-2:before { content: "\e21c"; } -.icon-browser-window:before { +i.icon-browser-window:before { content: "\e21d"; } -.icon-briefcase:before { +i.icon-briefcase:before { content: "\e21e"; } -.icon-brick:before { +i.icon-brick:before { content: "\e21f"; } -.icon-brackets:before { +i.icon-brackets:before { content: "\e220"; } -.icon-box:before { +i.icon-box:before { content: "\e221"; } -.icon-box-open:before { +i.icon-box-open:before { content: "\e222"; } -.icon-box-alt:before { +i.icon-box-alt:before { content: "\e223"; } -.icon-books:before { +i.icon-books:before { content: "\e224"; } -.icon-billboard:before { +i.icon-billboard:before { content: "\e225"; } -.icon-bills-dollar:before { +i.icon-bills-dollar:before { content: "\e226"; } -.icon-bills-euro:before { +i.icon-bills-euro:before { content: "\e227"; } -.icon-bills-pound:before { +i.icon-bills-pound:before { content: "\e228"; } -.icon-bills-yen:before { +i.icon-bills-yen:before { content: "\e229"; } -.icon-bills:before { +i.icon-bills:before { content: "\e22a"; } -.icon-binarycode:before { +i.icon-binarycode:before { content: "\e22b"; } -.icon-binoculars:before { +i.icon-binoculars:before { content: "\e22c"; } -.icon-bird:before { +i.icon-bird:before { content: "\e22d"; } -.icon-birthday-cake:before { +i.icon-birthday-cake:before { content: "\e22e"; } -.icon-blueprint:before { +i.icon-blueprint:before { content: "\e22f"; } -.icon-block:before { +i.icon-block:before { content: "\e230"; } -.icon-bluetooth:before { +i.icon-bluetooth:before { content: "\e231"; } -.icon-boat-shipping:before { +i.icon-boat-shipping:before { content: "\e232"; } -.icon-bomb:before { +i.icon-bomb:before { content: "\e233"; } -.icon-book-alt-2:before { +i.icon-book-alt-2:before { content: "\e234"; } -.icon-bones:before { +i.icon-bones:before { content: "\e235"; } -.icon-book-alt:before { +i.icon-book-alt:before { content: "\e236"; } -.icon-book:before { +i.icon-book:before { content: "\e237"; } -.icon-bill-yen:before { +i.icon-bill-yen:before { content: "\e238"; } -.icon-award:before { +i.icon-award:before { content: "\e239"; } -.icon-bill-pound:before { +i.icon-bill-pound:before { content: "\e23a"; } -.icon-autofill:before { +i.icon-autofill:before { content: "\e23b"; } -.icon-bill-euro:before { +i.icon-bill-euro:before { content: "\e23c"; } -.icon-auction-hammer:before { +i.icon-auction-hammer:before { content: "\e23d"; } -.icon-bill-dollar:before { +i.icon-bill-dollar:before { content: "\e23e"; } -.icon-attachment:before { +i.icon-attachment:before { content: "\e23f"; } -.icon-bell:before { +i.icon-bell:before { content: "\e240"; } -.icon-article:before { +i.icon-article:before { content: "\e241"; } -.icon-bell-off:before { +i.icon-bell-off:before { content: "\e242"; } -.icon-art-easel:before { +i.icon-art-easel:before { content: "\e243"; } -.icon-beer-glass:before { +i.icon-beer-glass:before { content: "\e244"; } -.icon-arrow-up:before { +i.icon-arrow-up:before { content: "\e245"; } -.icon-battery-low:before { +i.icon-battery-low:before { content: "\e246"; } -.icon-arrow-right:before { +i.icon-arrow-right:before { content: "\e247"; } -.icon-battery-full:before { +i.icon-battery-full:before { content: "\e248"; } -.icon-arrow-left:before { +i.icon-arrow-left:before { content: "\e249"; } -.icon-bars:before { +i.icon-bars:before { content: "\e24a"; } -.icon-arrow-down:before { +i.icon-arrow-down:before { content: "\e24b"; } -.icon-barcode:before { +i.icon-barcode:before { content: "\e24c"; } -.icon-arrivals:before { +i.icon-arrivals:before { content: "\e24d"; } -.icon-bar-chart:before { +i.icon-bar-chart:before { content: "\e24e"; } -.icon-application-window:before { +i.icon-application-window:before { content: "\e24f"; } -.icon-band-aid:before { +i.icon-band-aid:before { content: "\e250"; } -.icon-application-window-alt:before { +i.icon-application-window-alt:before { content: "\e251"; } -.icon-ball:before { +i.icon-ball:before { content: "\e252"; } -.icon-application-error:before { +i.icon-application-error:before { content: "\e253"; } -.icon-badge-restricted:before { +i.icon-badge-restricted:before { content: "\e254"; } -.icon-app:before { +i.icon-app:before { content: "\e255"; } -.icon-badge-remove:before { +i.icon-badge-remove:before { content: "\e256"; } -.icon-anchor:before { +i.icon-anchor:before { content: "\e257"; } -.icon-badge-count:before { +i.icon-badge-count:before { content: "\e258"; } -.icon-alt:before { +i.icon-alt:before { content: "\e259"; } -.icon-badge-add:before { +i.icon-badge-add:before { content: "\e25a"; } -.icon-alert:before { +i.icon-alert:before { content: "\e25b"; } -.icon-backspace:before { +i.icon-backspace:before { content: "\e25c"; } -.icon-alert-alt:before { +i.icon-alert-alt:before { content: "\e25d"; } -.icon-section:before { +i.icon-section:before { content: "\e24f"; } diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less index fe8af6dbc4..9d0ed002bb 100644 --- a/src/Umbraco.Web.UI.Client/src/less/listview.less +++ b/src/Umbraco.Web.UI.Client/src/less/listview.less @@ -32,7 +32,10 @@ position: absolute; padding: 5px 8px; pointer-events: none; - top: 2px; + + &i { + top: 2px; + } } input[type="text"] { diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less index 40c70f5331..71dbf92a96 100644 --- a/src/Umbraco.Web.UI.Client/src/less/panel.less +++ b/src/Umbraco.Web.UI.Client/src/less/panel.less @@ -48,6 +48,10 @@ .form-search { flex: 1; + .icon-search { + top: 16px; + } + &__toggle { margin: 10px 0; display: flex; @@ -392,6 +396,7 @@ font-size: 30px; color: @gray-7; transition: opacity 120ms; + line-height: 1; } .umb-panel-header-icon-text { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html index aa6126e73e..6b924d0aef 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html @@ -18,16 +18,16 @@+ +