devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
341 lines (312 loc) • 7.73 kB
text/less
/**
* DevExtreme (widgets/base/icons.less)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
.dx-icon-sizing(@icon_size, @container_size: @icon_size, @borders_size: 0) {
@icon_paddings_dirty: @container_size - @icon_size;
@icon_paddings: @icon_paddings_dirty - @borders_size;
@icon_padding: floor(@icon_paddings/2);
// Geometry
width: @container_size;
height: @container_size;
// Icon as background sizing
background-position: @icon_padding @icon_padding;
background-size: @icon_size @icon_size;
// Icon as img src sizing
padding: @icon_padding;
// Icon as font
font-size: @icon_size;
text-align: center;
line-height: @container_size - @icon_paddings_dirty;
}
.dx-icon-font-centered-sizing(@icon_size) {
font-size: @icon_size;
text-align: center;
line-height: @icon_size;
&:before {
position: absolute;
display: block;
width: @icon_size;
top: 50%;
margin-top: -@icon_size/2;
left: 50%;
margin-left: -@icon_size/2;
}
}
.dx-icon-margin(@size) {
margin-right: @size;
margin-left: 0;
.dx-rtl&,
.dx-rtl & {
margin-left: @size;
margin-right: 0;
}
&.dx-icon-right {
margin-left: @size;
margin-right: 0;
.dx-rtl&,
.dx-rtl & {
margin-right: @size;
margin-left: 0;
}
}
}
.dx-font-icon(@glyph) {
font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword
&:before {
content: @glyph;
}
}
// stylelint-disable property-no-unknown
@icons: {
add: "\f00b";
airplane: "\f000";
bookmark: "\f017";
box: "\f018";
car: "\f01b";
card: "\f019";
cart: "\f01a";
chart: "\f01c";
check: "\f005";
clear: "\f008";
clock: "\f01d";
close: "\f00a";
coffee: "\f02a";
comment: "\f01e";
doc: "\f021";
file: "\f021";
download: "\f022";
dragvertical: "\f038";
edit: "\f023";
email: "\f024";
event: "\f026";
favorites: "\f025";
find: "\f027";
filter: "\f050";
folder: "\f028";
activefolder: "\f028";
food: "\f029";
gift: "\f02b";
globe: "\f02c";
group: "\f02e";
help: "\f02f";
home: "\f030";
image: "\f031";
info: "\f032";
key: "\f033";
like: "\f034";
map: "\f035";
menu: "\f00c";
message: "\f024";
money: "\f036";
music: "\f037";
overflow: "\f00d";
percent: "\f039";
photo: "\f03a";
plus: "\f00b";
minus: "\f074";
preferences: "\f03b";
product: "\f03c";
pulldown: "\f062";
refresh: "\f03d";
remove: "\f00a";
revert: "\f04c";
runner: "\f040";
save: "\f041";
search: "\f027";
tags: "\f009";
tel: "\f003";
tips: "\f004";
todo: "\f005";
toolbox: "\f007";
trash: "\f03e";
user: "\f02d";
upload: "\f006";
floppy: "\f073";
arrowleft: "\f011";
arrowdown: "\f015";
arrowright: "\f00e";
arrowup: "\f013";
spinleft: "\f04f";
spinprev: "\f04f";
spinright: "\f04e";
spinnext: "\f04e";
spindown: "\f001";
spinup: "\f002";
chevronleft: "\f012";
chevronprev: "\f012";
back: "\f012";
chevronright: "\f010";
chevronnext: "\f010";
chevrondown: "\f016";
chevronup: "\f014";
chevrondoubleleft: "\f042";
chevrondoubleright: "\f03f";
equal: "\f044";
notequal: "\f045";
less: "\f046";
greater: "\f047";
lessorequal: "\f048";
greaterorequal: "\f049";
isblank: "\f075";
isnotblank: "\f076";
sortup: "\f051";
sortdown: "\f052";
sortuptext: "\f053";
sortdowntext: "\f054";
sorted: "\f055";
expand: "\f04a";
collapse: "\f04b";
columnfield: "\f057";
rowfield: "\f058";
datafield: "\f101";
fields: "\f059";
fieldchooser: "\f05a";
columnchooser: "\f04d";
pin: "\f05b";
unpin: "\f05c";
pinleft: "\f05d";
pinright: "\f05e";
contains: "\f063";
startswith: "\f064";
endswith: "\f065";
doesnotcontain: "\f066";
range: "\f06a";
export: "\f05f";
exportxlsx: "\f060";
exportpdf: "\f061";
exportselected: "\f06d";
warning: "\f06b";
more: "\f06c";
square: "\f067";
clearsquare: "\f068";
repeat: "\f069";
selectall: "\f070";
unselectall: "\f071";
print: "\f072";
bold: "\f077";
italic: "\f078";
underline: "\f079";
strike: "\f07a";
indent: "\f07b";
increaselinespacing: "\f07b";
font: "\f11b"; // stylelint-disable-line font-family-no-missing-generic-family-keyword
fontsize: "\f07c";
shrinkfont: "\f07d";
growfont: "\f07e";
color: "\f07f";
background: "\f080";
fill: "\f10d";
palette: "\f120";
superscript: "\f081";
subscript: "\f082";
header: "\f083";
blockquote: "\f084";
formula: "\f056";
codeblock: "\f085";
orderedlist: "\f086";
bulletlist: "\f087";
increaseindent: "\f088";
decreaseindent: "\f089";
decreaselinespacing: "\f106";
alignleft: "\f08a";
alignright: "\f08b";
aligncenter: "\f08c";
alignjustify: "\f08d";
link: "\f08e";
video: "\f08f";
mention: "\f090";
variable: "\f091";
clearformat: "\f092";
fullscreen: "\f11a";
hierarchy: "\f124";
docfile: "\f111";
docxfile: "\f110";
pdffile: "\f118";
pptfile: "\f114";
pptxfile: "\f115";
rtffile: "\f112";
txtfile: "\f113";
xlsfile: "\f116";
xlsxfile: "\f117";
copy: "\f107";
cut: "\f10a";
paste: "\f108";
share: "\f11f";
inactivefolder: "\f105";
newfolder: "\f123";
movetofolder: "\f121";
parentfolder: "\f122";
rename: "\f109";
detailslayout: "\f10b";
contentlayout: "\f11e";
smalliconslayout: "\f119";
mediumiconslayout: "\f10c";
undo: "\f04c";
redo: "\f093";
hidepanel: "\f11c";
showpanel: "\f11d";
}
// stylelint-enable
.dx-icon(@name) {
.dx-font-icon(@icons[$@name]);
}
.dx-font-icons-list() {
each(@icons, {
.dx-icon-@{key} {
.dx-icon(@key);
}
});
}
.dx-font-icons(@font-file: "dxicons", @font-name: "DevExtreme Generic Icons", @font-name-safari: "devextreme_generic_icons") {
@font-face {
font-family: 'DXIcons';
src:
local("@{font-name}"),
local("@{font-name-safari}"),
url(~"icons/@{font-file}.woff2") format('woff2'),
url(~"icons/@{font-file}.woff") format('woff'),
url(~"icons/@{font-file}.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
.dx-icon {
display: inline-block;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dx-font-icons-list();
}
.dx-rtl {
.dx-icon-spinnext:before {
content: "\f04f"; //.dx-icon-spinleft
}
.dx-icon-spinprev:before {
content: "\f04e"; //.dx-icon-spinright
}
.dx-icon-chevronnext:before {
content: "\f012"; //.dx-icon-chevronleft
}
.dx-icon-chevronprev:before,
.dx-icon-back:before {
content: "\f010"; //.dx-icon-chevronright
}
.dx-icon-undo:before {
content: "\f093"; // redo icon
}
.dx-icon-redo:before {
content: "\f04c"; // undo icon
}
.dx-icon-hidepanel:before {
content: "\f11d"; // showpanel icon
}
.dx-icon-showpanel:before {
content: "\f11c"; // hidepanel icon
}
}