file icon font is added
This commit is contained in:
parent
bba64af2b8
commit
89ab43892d
|
|
@ -1,6 +1,9 @@
|
|||
<div class="bubble-main">
|
||||
<!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
|
||||
<div class="file-img" [ngClass]="fileInfo.FileExt"></div>
|
||||
<!-- <div class="file-img" [ngClass]="fileInfo.FileExt"></div> -->
|
||||
<div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.FileExt]">
|
||||
<div class="ico"></div>
|
||||
</div>
|
||||
<ul class="file-info">
|
||||
<li class="file-name">
|
||||
{{ fileInfo.FileName }}
|
||||
|
|
|
|||
|
|
@ -15,3 +15,5 @@
|
|||
@import 'partials/presence.scss';
|
||||
@import 'partials/list-item';
|
||||
@import 'partials/dialogs';
|
||||
|
||||
@import 'file-icon/icons';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
//
|
||||
// Import icons
|
||||
//
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)
|
||||
format('woff2');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@function colorEncode($color) {
|
||||
@if (
|
||||
str-index(ie-hex-str($color), '#') ==
|
||||
1 and
|
||||
str-length(ie-hex-str($color)) ==
|
||||
9 and
|
||||
type-of($color) ==
|
||||
'color'
|
||||
) {
|
||||
@return '%23' + str-slice(ie-hex-str($color), 4, 9);
|
||||
}
|
||||
|
||||
@return $color;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
//
|
||||
// Colors (used when another color isn't specified)
|
||||
//
|
||||
$icon-colours: #b1375e, #db4f42, #f29b00, #bfcb3e, #8db157, #50abb5, #5277de,
|
||||
#6963c5;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
//
|
||||
// Icons (the corrispong ascii)
|
||||
//
|
||||
|
||||
$settings: '\E8B8';
|
||||
$locked: '\E88D';
|
||||
$flag: '\E3A0';
|
||||
$work: '\E8F9';
|
||||
$build: '\E869';
|
||||
$malware: '\E868';
|
||||
$map: '\E8B4';
|
||||
$coffee: '\EB44';
|
||||
$apk: '\E859';
|
||||
$usb: '\E1E0';
|
||||
$cloud: '\E2BD';
|
||||
$attachment: '\E2BC';
|
||||
$world: '\E80B';
|
||||
|
||||
$zip: '\E3E7';
|
||||
|
||||
$music: '\E3A1';
|
||||
$mic: '\E029';
|
||||
$radio: '\E03E';
|
||||
$audio: '\E050';
|
||||
$lp: '\E019';
|
||||
|
||||
$photo: '\E3B0';
|
||||
$picture: '\E3B7';
|
||||
$pict: '\E251';
|
||||
|
||||
$play: '\E037';
|
||||
$movie: '\E02C';
|
||||
$cam: '\E04B';
|
||||
|
||||
$text: '\E262';
|
||||
$stylez: '\E91D';
|
||||
$app: '\E051';
|
||||
$code: '\E86F';
|
||||
|
||||
$calendar: '\E8DF';
|
||||
$epub: '\E54B';
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
// HARDCODED styles
|
||||
// This part serves for the demo and can be safely canceled
|
||||
// However, if you need a particular icon you can write the code like in the examples below
|
||||
//
|
||||
|
||||
.mime-icon {
|
||||
.ico.ico-magenta:after {
|
||||
@include do-icon(#d9006c);
|
||||
}
|
||||
.ico.ico-yellow:after {
|
||||
@include do-icon(#f9ca15);
|
||||
}
|
||||
.ico.ico-blue:after {
|
||||
@include do-icon(#0d75dd);
|
||||
}
|
||||
|
||||
&.abc .ico:after {
|
||||
@include do-icon(desaturate(hsla(15, 90%, 55%, 1), 15%), '', 'ABC');
|
||||
}
|
||||
&.def .ico:after {
|
||||
@include do-icon(desaturate(hsla(80, 75%, 47%, 1), 15%), '', 'DEF');
|
||||
}
|
||||
&.ghi .ico:after {
|
||||
@include do-icon(desaturate(hsla(270, 60%, 55%, 1), 15%), '', 'GHI');
|
||||
}
|
||||
|
||||
&.light {
|
||||
&.ico-mp3 .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#05ad9d, 15%), 'MP3', #888, '');
|
||||
}
|
||||
&.ico-pcm .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#8bc34a, 15%), 'PCM', #888, '');
|
||||
}
|
||||
&.ico-ogg .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#cddc39, 15%), 'OGG', #888, '');
|
||||
}
|
||||
&.ico-wav .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#ffc107, 15%), 'WAV', #888, '');
|
||||
}
|
||||
&.ico-aac .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#f44336, 15%), 'AAC', #888, '');
|
||||
}
|
||||
&.ico-aiff .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#e91e63, 15%), 'AIFF', #888, '');
|
||||
}
|
||||
&.ico-wma .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#9c27b0, 15%), 'WMA', #888, '');
|
||||
}
|
||||
&.ico-html .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#3f51b5, 15%), 'HTML', #888, '');
|
||||
}
|
||||
&.ico-js .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#9c27b0, 15%), 'JS', #888, '');
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
&.ico-csv .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#05ad9d, 15%), 'CSV', #ddd, '');
|
||||
}
|
||||
&.ico-txt .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#8bc34a, 15%), 'TXT', #ddd, '');
|
||||
}
|
||||
&.ico-rtf .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#cddc39, 15%), 'RTF', #ddd, '');
|
||||
}
|
||||
&.ico-doc .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#ffc107, 15%), 'DOC', #ddd, '');
|
||||
}
|
||||
&.ico-docx .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#f44336, 15%), 'DOCX', #ddd, '');
|
||||
}
|
||||
&.ico-flac .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#e91e63, 15%), 'FLAC', #ddd, '');
|
||||
}
|
||||
&.ico-js .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#9c27b0, 15%), 'JS', #ddd, '');
|
||||
}
|
||||
&.ico-php .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#3f51b5, 15%), 'PHP', #ddd, '');
|
||||
}
|
||||
}
|
||||
|
||||
&.double {
|
||||
&.ico-avi .ico {
|
||||
&:before {
|
||||
color: #f44336 !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #f44336, 'AVI', #f44336, '');
|
||||
}
|
||||
}
|
||||
&.ico-mp4 .ico {
|
||||
&:before {
|
||||
color: #8bc34a !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #8bc34a, 'MP4', #8bc34a, '');
|
||||
}
|
||||
}
|
||||
&.ico-mkv .ico {
|
||||
&:before {
|
||||
color: #bdcc2b !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #bdcc2b, 'MKV', #bdcc2b, '');
|
||||
}
|
||||
}
|
||||
&.ico-mpeg .ico {
|
||||
&:before {
|
||||
color: #ffc107 !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #ffc107, 'MPEG', #ffc107, '');
|
||||
}
|
||||
}
|
||||
&.ico-mov .ico {
|
||||
&:before {
|
||||
color: #05ad9d !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #05ad9d, 'MOV', #05ad9d, '');
|
||||
}
|
||||
}
|
||||
&.ico-flv .ico {
|
||||
&:before {
|
||||
color: #e91e63 !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #e91e63, 'FLV', #e91e63, '');
|
||||
}
|
||||
}
|
||||
&.ico-swf .ico {
|
||||
&:before {
|
||||
color: #9c27b0 !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #9c27b0, 'SWF', #9c27b0, '');
|
||||
}
|
||||
}
|
||||
&.ico-wmv .ico {
|
||||
&:before {
|
||||
color: #8bc34a !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #8bc34a, 'WMV', #8bc34a, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
// CONFIGURATION
|
||||
$icon-container-size: 70px; // the size of the icons
|
||||
$icon-edge-color: ''; // the default edge color of the icon
|
||||
$font-size: 38; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg
|
||||
$font-family: 'Myriad, Tahoma-Bold, sans-serif'; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg
|
||||
|
||||
// ATTENTION write hex in extended notation
|
||||
$shape-color: #f1f2f2; // the color of the shape inside the icon (if any)
|
||||
$shape-color-positive: #666666; // the color of the shape when the icon have a positive background (es. white)
|
||||
$dark-color: #3a3b3c; // background color of the icons in the dark theme (or the ribbon color in the "double" $style theme )
|
||||
$icon-shadow: ''; // or "drop-shadow( 0 2px 2px rgba(0, 0, 0, 0.25) );" without quotes
|
||||
$font-color: $shape-color; // default
|
||||
|
||||
// CHOOSE YOUR THEME
|
||||
//
|
||||
//
|
||||
$style: ''; // icon theme -> possible values: default || dark || light || double
|
||||
|
||||
// Import hex color conversion function
|
||||
@import 'functions';
|
||||
|
||||
// Import icons
|
||||
@import 'fonts';
|
||||
|
||||
// Colors (used when another color isn't specified)
|
||||
@import 'generator-colors';
|
||||
|
||||
// Icons (the corrispong ascii)
|
||||
@import 'generator-vars';
|
||||
|
||||
// DO-ICON MIXIN
|
||||
@import 'mixin';
|
||||
|
||||
// HARDCODED styles
|
||||
// This part serves for the demo and can be safely canceled
|
||||
// However, if you need a particular icon you can write the code like in the examples below
|
||||
//
|
||||
@import 'hardcoded';
|
||||
|
||||
//
|
||||
// LOOP CONFIG
|
||||
// The loop will generate icons as in the configuration below
|
||||
//
|
||||
$icon-list: ('3dm', '', $world), ('3dmf', '', $world), ('7z', '', $zip),
|
||||
('a', '', $zip), ('aab', '', $app), ('aac', '', $mic), ('aam', '', $app),
|
||||
('aas', '', $app), ('abc', '', $text), ('acgi', '', $text), ('afl', '', $play),
|
||||
('ai', '', $app), ('aif', '', $music), ('aifc', '', $radio), ('aiff', '', $lp),
|
||||
('aim', '', $app), ('aip', '', $text), ('ani', '', $app), ('aos', '', $app),
|
||||
('aps', '', $app), ('arc', '', $app), ('arj', '', $app), ('art', '', $photo),
|
||||
('asf', '', $movie), ('asm', '', $text), ('asp', '', $code), ('asx', '', $app),
|
||||
('au', '', $mic), ('avi', '', $app), ('avs', '', $movie), ('bcpio', '', $app),
|
||||
('bin', '', $app), ('bm', '', $picture), ('bmp', '', $pict), ('boo', '', $app),
|
||||
('book', '', $app), ('boz', '', $app), ('bsh', '', $app), ('bz', '', $zip),
|
||||
('bz2', '', $app), ('c', '', $code), ('cat', '', $app), ('cc', '', $code),
|
||||
('ccad', '', $app), ('cco', '', $app), ('cdf', '', $app), ('cer', '', $app),
|
||||
('cha', '', $app), ('chat', '', $app), ('class', '', $app), ('com', '', $app),
|
||||
('conf', '', $text), ('cpio', '', $app), ('cpp', '', $text), ('cpt', '', $app),
|
||||
('crl', '', $app), ('crt', '', $app), ('csh', '', $app), ('css', '', $app),
|
||||
('csv', '', $text), ('cxx', '', $text), ('dcr', '', $app), ('deepv', '', $app),
|
||||
('def', '', $text), ('der', '', $app), ('dif', '', $cam), ('dir', '', $app),
|
||||
('dl', '', $play), ('doc', '', $app), ('docx', '', $text), ('dot', '', $app),
|
||||
('dp', '', $app), ('drw', '', $app), ('dump', '', $app), ('dv', '', $cam),
|
||||
('dvi', '', $app), ('dwf', '', $picture), ('dwg', '', $app), ('dxf', '', $app),
|
||||
('dxr', '', $app), ('el', '', $text), ('elc', '', $app), ('env', '', $app),
|
||||
('eps', '', $app), ('es', '', $app), ('etx', '', $text), ('evy', '', $app),
|
||||
('exe', '', $app), ('f', '', $text), ('f77', '', $text), ('f90', '', $text),
|
||||
('fdf', '', $app), ('fif', '', $app), ('flac', '', $lp), ('fli', '', $play),
|
||||
('flo', '', $photo), ('flv', '', $malware), ('flx', '', $text),
|
||||
('fmf', '', $cam), ('for', '', $text), ('fpx', '', $picture),
|
||||
('frl', '', $app), ('funk', '', $audio), ('g', '', $text), ('g3', '', $pict),
|
||||
('gif', '', $photo), ('gl', '', $play), ('gsd', '', $lp), ('gsm', '', $music),
|
||||
('gsp', '', $app), ('gss', '', $app), ('gtar', '', $app), ('gz', '', $app),
|
||||
('gzip', '', $app), ('h', '', $text), ('hdf', '', $app), ('help', '', $app),
|
||||
('hgl', '', $app), ('hh', '', $text), ('hlb', '', $text), ('hlp', '', $app),
|
||||
('hpg', '', $app), ('hpgl', '', $app), ('hqx', '', $app), ('hta', '', $app),
|
||||
('htc', '', $text), ('htm', '', $code), ('html', '', $code),
|
||||
('htmls', '', $code), ('htt', '', $code), ('htx', '', $code),
|
||||
('ice', '', $text), ('ico', '', $picture), ('idc', '', $text),
|
||||
('ief', '', $pict), ('iefs', '', $photo), ('iges', '', $app),
|
||||
('igs', '', $app), ('ima', '', $app), ('imap', '', $app), ('inf', '', $app),
|
||||
('ins', '', $app), ('ip', '', $app), ('isu', '', $cam), ('it', '', $mic),
|
||||
('iv', '', $app), ('ivr', '', $flag), ('ivy', '', $app), ('jam', '', $radio),
|
||||
('jav', '', $code), ('java', '', $code), ('jcm', '', $app),
|
||||
('jfif', '', $picture), ('jfif-tbnl', '', $pict), ('jpe', '', $photo),
|
||||
('jpeg', '', $picture), ('jpg', '', $pict), ('jps', '', $photo),
|
||||
('js', '', $malware), ('jut', '', $picture), ('kar', '', $audio),
|
||||
('ksh', '', $app), ('la', '', $lp), ('lam', '', $mic), ('latex', '', $app),
|
||||
('lha', '', $app), ('lhx', '', $app), ('list', '', $text), ('lma', '', $radio),
|
||||
('log', '', $text), ('lsp', '', $app), ('lst', '', $text), ('lsx', '', $text),
|
||||
('ltx', '', $app), ('lzh', '', $app), ('lzx', '', $app), ('m', '', $text),
|
||||
('m1v', '', $play), ('m2a', '', $lp), ('m2v', '', $movie), ('m3u', '', $music),
|
||||
('m4a', '', $audio), ('man', '', $app), ('map', '', $app), ('mar', '', $text),
|
||||
('mbd', '', $app), ('mcd', '', $app), ('mcf', '', $pict), ('mcp', '', $app),
|
||||
('me', '', $app), ('mht', '', $work), ('mhtml', '', $work), ('mid', '', $app),
|
||||
('midi', '', $app), ('mif', '', $app), ('mime', '', $work),
|
||||
('mjf', '', $radio), ('mjpg', '', $cam), ('mkv', '', $play), ('mm', '', $app),
|
||||
('mme', '', $app), ('mod', '', $audio), ('moov', '', $play),
|
||||
('mov', '', $movie), ('movie', '', $cam), ('mp2', '', $music),
|
||||
('mp3', '', $lp), ('mp4', '', $movie), ('mpa', '', $lp), ('mpc', '', $app),
|
||||
('mpe', '', $play), ('mpeg', '', $movie), ('mpg', '', $music),
|
||||
('mpga', '', $mic), ('mpp', '', $app), ('mpt', '', $app), ('mpv', '', $app),
|
||||
('mpx', '', $app), ('mrc', '', $app), ('ms', '', $app), ('mv', '', $play),
|
||||
('my', '', $radio), ('mzz', '', $app), ('nap', '', $photo),
|
||||
('naplps', '', $picture), ('nc', '', $app), ('ncm', '', $app),
|
||||
('nif', '', $pict), ('niff', '', $photo), ('nix', '', $app), ('nsc', '', $app),
|
||||
('nvd', '', $app), ('o', '', $app), ('oda', '', $app), ('ogg', '', $audio),
|
||||
('omc', '', $app), ('omcd', '', $app), ('omcr', '', $app), ('p', '', $text),
|
||||
('p10', '', $app), ('p12', '', $app), ('p7a', '', $app), ('p7c', '', $app),
|
||||
('p7m', '', $app), ('p7r', '', $app), ('p7s', '', $app), ('part', '', $app),
|
||||
('pas', '', $text), ('pbm', '', $picture), ('pcl', '', $app),
|
||||
('pcm', '', $radio), ('pct', '', $pict), ('pcx', '', $photo),
|
||||
('pdb', '', $coffee), ('pdf', '', $app), ('pfunk', '', $audio),
|
||||
('pgm', '', $picture), ('php', '', $code), ('pic', '', $pict),
|
||||
('pict', '', $photo), ('pkg', '', $app), ('pko', '', $app), ('pl', '', $code),
|
||||
('plx', '', $app), ('pm', '', $picture), ('pm4', '', $app), ('pm5', '', $app),
|
||||
('png', '', $pict), ('pnm', '', $app), ('pot', '', $app),
|
||||
('pov', '', $settings), ('ppa', '', $app), ('ppm', '', $photo),
|
||||
('pps', '', $app), ('ppt', '', $app), ('pptx', '', $app), ('ppz', '', $app),
|
||||
('pre', '', $app), ('prt', '', $app), ('ps', '', $app), ('psd', '', $app),
|
||||
('pvu', '', $lp), ('pwz', '', $app), ('py', '', $code), ('pyc', '', $app),
|
||||
('qcp', '', $music), ('qd3', '', $world), ('qd3d', '', $world),
|
||||
('qif', '', $picture), ('qt', '', $movie), ('qtc', '', $cam),
|
||||
('qti', '', $pict), ('qtif', '', $photo), ('ram', '', $lp), ('rar', '', $zip),
|
||||
('ras', '', $app), ('rast', '', $picture), ('rexx', '', $text),
|
||||
('rf', '', $pict), ('rgb', '', $photo), ('rm', '', $app), ('rmi', '', $mic),
|
||||
('rmm', '', $radio), ('rmp', '', $audio), ('rng', '', $app), ('rnx', '', $app),
|
||||
('roff', '', $app), ('rp', '', $picture), ('rpm', '', $music),
|
||||
('rt', '', $text), ('rtf', '', $app), ('rtx', '', $app), ('rv', '', $play),
|
||||
('s', '', $text), ('s3m', '', $mic), ('saveme', '', $app), ('sbk', '', $app),
|
||||
('scm', '', $app), ('sdml', '', $text), ('sdp', '', $app), ('sdr', '', $app),
|
||||
('sea', '', $app), ('set', '', $app), ('sgm', '', $text), ('sgml', '', $text),
|
||||
('sh', '', $app), ('shar', '', $app), ('shtml', '', $code),
|
||||
('sid', '', $radio), ('sit', '', $app), ('skd', '', $app), ('skm', '', $app),
|
||||
('skp', '', $app), ('skt', '', $app), ('sl', '', $app), ('smi', '', $app),
|
||||
('smil', '', $app), ('snd', '', $audio), ('sol', '', $app), ('spc', '', $app),
|
||||
('spl', '', $app), ('spr', '', $app), ('sprite', '', $app), ('src', '', $app),
|
||||
('ssi', '', $text), ('ssm', '', $app), ('sst', '', $app), ('step', '', $app),
|
||||
('stl', '', $app), ('stp', '', $app), ('sv4cpio', '', $app),
|
||||
('sv4crc', '', $app), ('svf', '', $pict), ('svr', '', $app), ('swf', '', $app),
|
||||
('t', '', $app), ('talk', '', $text), ('tar', '', $app), ('tbk', '', $app),
|
||||
('tcl', '', $app), ('tcsh', '', $text), ('tex', '', $app), ('texi', '', $app),
|
||||
('texinfo', '', $app), ('tgz', '', $app), ('tif', '', $photo),
|
||||
('tiff', '', $picture), ('tr', '', $app), ('tsi', '', $music),
|
||||
('tsp', '', $app), ('tsv', '', $text), ('turbot', '', $pict),
|
||||
('txt', '', $text), ('uil', '', $text), ('uni', '', $text),
|
||||
('unis', '', $text), ('unv', '', $app), ('uri', '', $text),
|
||||
('uris', '', $text), ('ustar', '', $app), ('uu', '', $app), ('uue', '', $text),
|
||||
('vcd', '', $app), ('vcs', '', $text), ('vda', '', $app), ('vdo', '', $cam),
|
||||
('vew', '', $app), ('viv', '', $play), ('vivo', '', $cam), ('vmd', '', $app),
|
||||
('vmf', '', $app), ('voc', '', $radio), ('vos', '', $movie), ('vox', '', $lp),
|
||||
('vqe', '', $music), ('vqf', '', $mic), ('vql', '', $radio),
|
||||
('vrml', '', $app), ('vrt', '', $world), ('vsd', '', $app), ('vst', '', $app),
|
||||
('vsw', '', $app), ('wav', '', $audio), ('wb1', '', $app),
|
||||
('wbmp', '', $photo), ('web', '', $app), ('wiz', '', $app), ('wk1', '', $app),
|
||||
('wma', '', $music), ('wmf', '', $app), ('wml', '', $app), ('wmlc', '', $app),
|
||||
('wmls', '', $app), ('wmlsc', '', $app), ('wmv', '', $play),
|
||||
('word', '', $app), ('wp', '', $app), ('wp5', '', $app), ('wp6', '', $app),
|
||||
('wpd', '', $app), ('wq1', '', $app), ('wri', '', $app), ('wrl', '', $app),
|
||||
('wrz', '', $app), ('wsc', '', $app), ('wsrc', '', $app), ('wtk', '', $app),
|
||||
('x-png', '', $picture), ('xbm', '', $pict), ('xdr', '', $cam),
|
||||
('xgz', '', $app), ('xif', '', $photo), ('xl', '', $app), ('xla', '', $app),
|
||||
('xlb', '', $app), ('xlc', '', $app), ('xld', '', $app), ('xlk', '', $app),
|
||||
('xll', '', $app), ('xlm', '', $app), ('xls', '', $app), ('xlt', '', $app),
|
||||
('xlv', '', $app), ('xlw', '', $app), ('xm', '', $lp), ('xml', '', $app),
|
||||
('xmz', '', $text), ('xpix', '', $app), ('xpm', '', $picture),
|
||||
('xsr', '', $play), ('xwd', '', $pict), ('xyz', '', $app), ('z', '', $zip),
|
||||
('zip', '', $zip), ('zoo', '', $app), ('zsh', '', $text);
|
||||
|
||||
////// basic style
|
||||
//////
|
||||
|
||||
.mime-icon {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
.ico {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: $icon-container-size / 2.7;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
z-index: 9;
|
||||
content: '';
|
||||
font-family: 'Material Icons';
|
||||
font-size: $icon-container-size / 4.2;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: $icon-container-size;
|
||||
height: $icon-container-size;
|
||||
display: inline-block;
|
||||
content: '';
|
||||
|
||||
background-size: 80%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@include do-icon();
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
.ico:before {
|
||||
color: $shape-color-positive !important;
|
||||
}
|
||||
.ico:after {
|
||||
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
.ico:before {
|
||||
color: #f1f2f2 !important;
|
||||
}
|
||||
.ico:after {
|
||||
filter: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.double {
|
||||
.ico:after {
|
||||
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
}
|
||||
|
||||
i.material-icons {
|
||||
position: absolute;
|
||||
top: 33%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 28px;
|
||||
color: $shape-color;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
////// "Each" n°1 icon with Google font icon
|
||||
//////
|
||||
|
||||
@import 'loop';
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
////// "Each" loop with font icon
|
||||
//////
|
||||
//////
|
||||
$colors-number: length($icon-colours);
|
||||
$actual-icon-color: 1;
|
||||
|
||||
@each $filetype, $icon-primary-color, $icon in $icon-list {
|
||||
@if (type-of($icon-primary-color) != 'color' and ($icon-primary-color)) {
|
||||
// if background isn't a color or is null
|
||||
|
||||
@if ($style == 'dark') {
|
||||
$icon-edge-color: nth(
|
||||
$icon-colours,
|
||||
$actual-icon-color
|
||||
); // the color is a color from the $icon-colours array
|
||||
$icon-primary-color: $dark-color;
|
||||
} @else if ($style == 'light') {
|
||||
$icon-edge-color: nth($icon-colours, $actual-icon-color);
|
||||
$icon-primary-color: #f1f2f2;
|
||||
} @else if ($style == 'double') {
|
||||
$icon-primary-color: $dark-color;
|
||||
$icon-edge-color: nth($icon-colours, $actual-icon-color);
|
||||
} @else {
|
||||
$icon-primary-color: nth($icon-colours, $actual-icon-color);
|
||||
$icon-edge-color: '';
|
||||
}
|
||||
|
||||
@if ($actual-icon-color < $colors-number) {
|
||||
// Prepare the next color then increase the index counter
|
||||
$actual-icon-color: $actual-icon-color + 1;
|
||||
} @else {
|
||||
$actual-icon-color: 1;
|
||||
}
|
||||
} @else {
|
||||
// else background is a color or isn't null
|
||||
|
||||
@if ($style == 'dark') {
|
||||
$icon-edge-color: $icon-primary-color;
|
||||
$icon-primary-color: $dark-color;
|
||||
} @else if ($style == 'light') {
|
||||
$icon-edge-color: $icon-primary-color;
|
||||
$icon-primary-color: #f1f2f2;
|
||||
} @else if ($style == 'double') {
|
||||
$icon-edge-color: $icon-primary-color;
|
||||
$icon-primary-color: $dark-color;
|
||||
} @else {
|
||||
$icon-primary-color: $icon-primary-color;
|
||||
$icon-edge-color: '';
|
||||
}
|
||||
}
|
||||
|
||||
@if ($style == 'light') {
|
||||
$font-color: $shape-color-positive;
|
||||
$icon-shadow: 'drop-shadow( 0 2px 2px rgba(0, 0, 0, 0.25) );';
|
||||
} @else if ($style == 'double') {
|
||||
$font-color: $icon-edge-color;
|
||||
$icon-shadow: 'drop-shadow( 0 2px 2px rgba(0, 0, 0, 0.25) );';
|
||||
} @else {
|
||||
$font-color: $shape-color;
|
||||
$icon-shadow: inherit;
|
||||
}
|
||||
|
||||
// APPLY STYLE
|
||||
.mime-icon.ico-#{$filetype} .ico:before {
|
||||
content: $icon;
|
||||
color: $font-color;
|
||||
}
|
||||
.mime-icon.ico-#{$filetype} .ico:after {
|
||||
@include do-icon(
|
||||
$icon-primary-color,
|
||||
$icon-edge-color,
|
||||
str-slice(to-upper-case($filetype), 0, 5),
|
||||
$font-color,
|
||||
$icon
|
||||
);
|
||||
filter: #{$icon-shadow};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
////// DO-ICON MIXIN USAGE
|
||||
/////
|
||||
///// -> do-icon($background-color, $edge-color, $text, $text-color, $icon, $shape-color);
|
||||
///// +> @include do-icon(#009688, lighten(#009688, 20%), "", "");
|
||||
///
|
||||
// $background-color: the background of the document image (A color is expected - REQUIRED)
|
||||
// $edge-color: the color of corner edge
|
||||
// $text: the type of mime type
|
||||
// $text-color: the color of the text containing file extension (A color is expected)
|
||||
// $icon: inject an icon inside the document model
|
||||
|
||||
// IF WOU WANT CHANGE THE DEFAULT ICON
|
||||
// #{$background-color} -> the icon main color
|
||||
// #{$edge-color} -> the icon secondary color
|
||||
// #{$font-size} -> the size of the file extension text (exe, jpg, gif, etc)
|
||||
// #{$icon} -> the ascii code of the icon font
|
||||
// #{$text} -> the file extension variable
|
||||
|
||||
@mixin do-icon(
|
||||
$background-color: #888,
|
||||
$edge-color: null,
|
||||
$text: null,
|
||||
$text-color: #f1f2f2,
|
||||
$icon: null
|
||||
) {
|
||||
@if (type-of($edge-color) != 'color') {
|
||||
$edge-color: lighten($background-color, 15%);
|
||||
}
|
||||
@if (type-of($text-color) != 'color') {
|
||||
$text-color: '#F1F2F2';
|
||||
}
|
||||
@if (type-of($text) != 'string') and ($text) {
|
||||
$text: '@#!';
|
||||
}
|
||||
|
||||
$background-color: colorEncode($background-color);
|
||||
$text-color: colorEncode($text-color);
|
||||
$edge-color: colorEncode($edge-color);
|
||||
|
||||
$ico: '<svg xmlns="http://www.w3.org/2000/svg" class="icon-model" viewBox="0 0 200 200">#{$icon} <path d="M171 192.4V58.2l-58.4 0V0H36.5C32.4 0 29 3.4 29 7.6h0v184.9h0c0 4.2 3.4 7.6 7.6 7.6h126.9C167.6 200 171 196.6 171 192.4z" fill="#{$background-color}"/><text class="icon-text" transform="translate(100 171)" width="120" height="50" font-family="#{$font-family}" font-size="#{$font-size}" style="fill:#{$text-color};font-weight:bold;text-anchor:middle;text-shadow:0">#{$text}</text><polygon points="112.6 0 171 58.3 112.6 58.3" fill="#{$edge-color}"/><polygon points="170.9 116.5 112.6 58.3 170.9 58.3" style="fill:%23010202;opacity:0.1"/></svg>';
|
||||
|
||||
background-image: url('data:image/svg+xml;utf8,#{$ico}');
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user