css: refactoring & fixing - day 1
This commit is contained in:
Jean-Baptiste Pasquier
3
src/styles/components/icons/_index.scss
Normal file
3
src/styles/components/icons/_index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import 'custom-icons';
|
||||
@import 'icons';
|
||||
@import 'material-design-icons';
|
||||
115
src/styles/components/icons/custom-icons.scss
Normal file
115
src/styles/components/icons/custom-icons.scss
Normal file
@ -0,0 +1,115 @@
|
||||
/* Custom icons */
|
||||
|
||||
$ci-filename: "custom-icons";
|
||||
$ci-font-name: "custom-icons";
|
||||
$ci-font-family: "custom-icons";
|
||||
$ci-font-weight: "regular";
|
||||
$ci-font-path: "../fonts" !default;
|
||||
$ci-css-prefix: ci !default;
|
||||
$ci-version: "tlnzh2" !default;
|
||||
|
||||
@font-face {
|
||||
font-family: '#{$ci-font-name}';
|
||||
src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}');
|
||||
src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}#iefix') format('embedded-opentype'),
|
||||
url('#{$ci-font-path}/#{$ci-filename}.ttf?#{$ci-version}') format('truetype'),
|
||||
url('#{$ci-font-path}/#{$ci-filename}.woff?#{$ci-version}') format('woff'),
|
||||
url('#{$ci-font-path}/#{$ci-filename}.svg?#{$ci-version}##{$ci-filename}') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
$ci-icons: (
|
||||
awareness: '\e900',
|
||||
businessman: '\e901',
|
||||
information: '\e902',
|
||||
list-1: '\e903',
|
||||
sale: '\e904',
|
||||
armor: '\e905',
|
||||
chat: '\e906',
|
||||
list: '\e907',
|
||||
network: '\e908',
|
||||
offer: '\e909',
|
||||
reaction: '\e90a',
|
||||
add: '\e90b',
|
||||
appointment: '\e90c',
|
||||
desk: '\e90d',
|
||||
file: '\e90e',
|
||||
premium: '\e90f',
|
||||
team: '\e910',
|
||||
beer: '\e911',
|
||||
networking: '\e912',
|
||||
receipt: '\e913',
|
||||
robot: '\e914',
|
||||
team-1: '\e915',
|
||||
croupier: '\e916',
|
||||
learning: '\e917',
|
||||
review: '\e918',
|
||||
surf: '\e919',
|
||||
document: '\e91a',
|
||||
code: '\e91b',
|
||||
hat: '\e91c',
|
||||
beer1: '\e91d',
|
||||
alien: '\e91e',
|
||||
drawing: '\e91f',
|
||||
feedback: '\e920',
|
||||
globe: '\e921'
|
||||
);
|
||||
|
||||
%ci,
|
||||
[class^='ci-']::before,
|
||||
[class*='ci-']::before {
|
||||
display: inline-block;
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: '#{$ci-font-name}' !important;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
speak: none;
|
||||
text-align: center;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* Better Font Rendering */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@function char($character-code) {
|
||||
@if function-exists("selector-append") {
|
||||
@return unquote("\"\\#{$character-code}\"");
|
||||
}
|
||||
|
||||
@if "\\#{'x'}" == "\\x" {
|
||||
@return str-slice("\x", 1, 1) + $character-code;
|
||||
}
|
||||
@else {
|
||||
@return #{"\"\\"}#{$character-code + "\""};
|
||||
}
|
||||
}
|
||||
|
||||
@function ci($name) {
|
||||
@if map-has-key($ci-icons, $name) == false {
|
||||
@warn "Icon #{$name} not found.";
|
||||
@return "";
|
||||
}
|
||||
@return char(map-get($ci-icons, $name));
|
||||
}
|
||||
|
||||
@each $key, $value in $ci-icons {
|
||||
.#{$ci-css-prefix}-#{$key}:before {
|
||||
content: char($value);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ci($value) {
|
||||
&:before {
|
||||
@extend %ci;
|
||||
@extend .#{$ci-css-prefix}-#{$value};
|
||||
}
|
||||
}
|
||||
267
src/styles/components/icons/icons.scss
Normal file
267
src/styles/components/icons/icons.scss
Normal file
@ -0,0 +1,267 @@
|
||||
@font-face {
|
||||
font-family: 'simple-line-icons';
|
||||
src: url('../fonts/simple-line-icons.eot?23594131');
|
||||
src: url('../fonts/simple-line-icons.eot?23594131#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/simple-line-icons.woff2?23594131') format('woff2'),
|
||||
url('../fonts/simple-line-icons.woff?23594131') format('woff'),
|
||||
url('../fonts/simple-line-icons.ttf?23594131') format('truetype'),
|
||||
url('../fonts/simple-line-icons.svg?23594131#simple-line-icons')
|
||||
format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
|
||||
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
|
||||
/*
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: 'simple-line-icons';
|
||||
src: url('../font/simple-line-icons.svg?23594131#simple-line-icons') format('svg');
|
||||
}
|
||||
}
|
||||
*/
|
||||
%icon,
|
||||
[class^='icon-']:before,
|
||||
[class*=' icon-']:before {
|
||||
font-family: 'simple-line-icons';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: 0.2em;
|
||||
text-align: center;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: 0.2em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
// text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
|
||||
}
|
||||
|
||||
$icons: (
|
||||
user-female: '\e000',
|
||||
people: '\e001',
|
||||
user-follow: '\e002',
|
||||
user-following: '\e003',
|
||||
user-unfollow: '\e004',
|
||||
user: '\e005',
|
||||
trophy: '\e006',
|
||||
speedometer: '\e007',
|
||||
social-youtube: '\e008',
|
||||
social-twitter: '\e009',
|
||||
social-tumblr: '\e00a',
|
||||
social-facebook: '\e00b',
|
||||
social-dropbox: '\e00c',
|
||||
social-dribbble: '\e00d',
|
||||
shield: '\e00e',
|
||||
screen-tablet: '\e00f',
|
||||
screen-smartphone: '\e010',
|
||||
screen-desktop: '\e011',
|
||||
plane: '\e012',
|
||||
notebook: '\e013',
|
||||
mustache: '\e014',
|
||||
mouse: '\e015',
|
||||
magnet: '\e016',
|
||||
magic-wand: '\e017',
|
||||
hourglass: '\e018',
|
||||
graduation: '\e019',
|
||||
ghost: '\e01a',
|
||||
game-controller: '\e01b',
|
||||
fire: '\e01c',
|
||||
eyeglass: '\e01d',
|
||||
envelope-open: '\e01e',
|
||||
envelope-letter: '\e01f',
|
||||
energy: '\e020',
|
||||
emotsmile: '\e021',
|
||||
disc: '\e022',
|
||||
cursor-move: '\e023',
|
||||
crop: '\e024',
|
||||
credit-card: '\e025',
|
||||
chemistry: '\e026',
|
||||
bell: '\e027',
|
||||
badge: '\e028',
|
||||
anchor: '\e029',
|
||||
wallet: '\e02a',
|
||||
vector: '\e02b',
|
||||
speech: '\e02c',
|
||||
puzzle: '\e02d',
|
||||
printer: '\e02e',
|
||||
present: '\e02f',
|
||||
playlist: '\e030',
|
||||
pin: '\e031',
|
||||
picture: '\e032',
|
||||
map: '\e033',
|
||||
layers: '\e034',
|
||||
handbag: '\e035',
|
||||
globe-alt: '\e036',
|
||||
globe: '\e037',
|
||||
frame: '\e038',
|
||||
folder-alt: '\e039',
|
||||
film: '\e03a',
|
||||
feed: '\e03b',
|
||||
earphones-alt: '\e03c',
|
||||
earphones: '\e03d',
|
||||
drop: '\e03e',
|
||||
drawar: '\e03f',
|
||||
docs: '\e040',
|
||||
directions: '\e041',
|
||||
direction: '\e042',
|
||||
diamond: '\e043',
|
||||
cup: '\e044',
|
||||
compass: '\e045',
|
||||
call-out: '\e046',
|
||||
call-in: '\e047',
|
||||
call-end: '\e048',
|
||||
calculator: '\e049',
|
||||
bubbles: '\e04a',
|
||||
briefcase: '\e04b',
|
||||
book-open: '\e04c',
|
||||
basket-loaded: '\e04d',
|
||||
basket: '\e04e',
|
||||
bag: '\e04f',
|
||||
action-undo: '\e050',
|
||||
action-redo: '\e051',
|
||||
wrench: '\e052',
|
||||
umbrella: '\e053',
|
||||
trash: '\e054',
|
||||
tag: '\e055',
|
||||
support: '\e056',
|
||||
size-fullscreen: '\e057',
|
||||
size-actual: '\e058',
|
||||
shuffle: '\e059',
|
||||
share-alt: '\e05a',
|
||||
share: '\e05b',
|
||||
rocket: '\e05c',
|
||||
question: '\e05d',
|
||||
pie-chart: '\e05e',
|
||||
pencil: '\e05f',
|
||||
note: '\e060',
|
||||
music-tone-alt: '\e061',
|
||||
music-tone: '\e062',
|
||||
microphone: '\e063',
|
||||
loop: '\e064',
|
||||
logout: '\e065',
|
||||
login: '\e066',
|
||||
list: '\e067',
|
||||
like: '\e068',
|
||||
home: '\e069',
|
||||
grid: '\e06a',
|
||||
graph: '\e06b',
|
||||
equalizer: '\e06c',
|
||||
dislike: '\e06d',
|
||||
cursor: '\e06e',
|
||||
control-start: '\e06f',
|
||||
control-rewind: '\e070',
|
||||
control-play: '\e071',
|
||||
control-pause: '\e072',
|
||||
control-forward: '\e073',
|
||||
control-end: '\e074',
|
||||
calender: '\e075',
|
||||
bulb: '\e076',
|
||||
chart: '\e077',
|
||||
arrow-up-circle: '\e078',
|
||||
arrow-right-circle: '\e079',
|
||||
arrow-left-circle: '\e07a',
|
||||
arrow-down-circle: '\e07b',
|
||||
ban: '\e07c',
|
||||
bubble: '\e07d',
|
||||
camrecorder: '\e07e',
|
||||
camera: '\e07f',
|
||||
check: '\e080',
|
||||
clock: '\e081',
|
||||
close: '\e082',
|
||||
cloud-download: '\e083',
|
||||
cloud-upload: '\e084',
|
||||
doc: '\e085',
|
||||
envelope: '\e086',
|
||||
eye: '\e087',
|
||||
flag: '\e088',
|
||||
folder: '\e089',
|
||||
heart: '\e08a',
|
||||
info: '\e08b',
|
||||
key: '\e08c',
|
||||
link: '\e08d',
|
||||
lock: '\e08e',
|
||||
lock-open: '\e08f',
|
||||
magnifier: '\e090',
|
||||
magnifier-add: '\e091',
|
||||
magnifier-remove: '\e092',
|
||||
paper-clip: '\e093',
|
||||
paper-plane: '\e094',
|
||||
plus: '\e095',
|
||||
location-pin: '\e096',
|
||||
power: '\e097',
|
||||
refresh: '\e098',
|
||||
reload: '\e099',
|
||||
settings: '\e09a',
|
||||
star: '\e09b',
|
||||
symble-female: '\e09c',
|
||||
symbol-male: '\e09d',
|
||||
target: '\e09e',
|
||||
volume-1: '\e09f',
|
||||
volume-2: '\e0a0',
|
||||
volume-off: '\e0a1',
|
||||
phone: '\e600',
|
||||
menu: '\e601',
|
||||
options-vertical: '\e602',
|
||||
options: '\e603',
|
||||
arrow-down: '\e604',
|
||||
arrow-left: '\e605',
|
||||
arrow-right: '\e606',
|
||||
arrow-up: '\e607',
|
||||
paypal: '\e608',
|
||||
social-instagram: '\e609',
|
||||
social-linkedin: '\e60a',
|
||||
social-pintarest: '\e60b',
|
||||
social-github: '\e60c',
|
||||
social-google: '\e60d',
|
||||
social-reddit: '\e60e',
|
||||
social-skype: '\e60f',
|
||||
social-behance: '\e610',
|
||||
social-foursqare: '\e611',
|
||||
social-soundcloud: '\e612',
|
||||
social-spotify: '\e613',
|
||||
social-stumbleupon: '\e614',
|
||||
minus: '\e615',
|
||||
organization: '\e616',
|
||||
exclamation: '\e617',
|
||||
social-vkontakte: '\e618',
|
||||
event: '\e619',
|
||||
social-steam: '\e620',
|
||||
idea:'\e076'
|
||||
);
|
||||
|
||||
|
||||
@each $name, $code in $icons {
|
||||
.icon-#{$name} {
|
||||
&:before {
|
||||
content: $code;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin icon($code) {
|
||||
&:before {
|
||||
@extend %icon;
|
||||
@extend .icon-#{$code};
|
||||
}
|
||||
}
|
||||
91
src/styles/components/icons/material-design-icons.scss
Normal file
91
src/styles/components/icons/material-design-icons.scss
Normal file
@ -0,0 +1,91 @@
|
||||
/* MaterialDesignIcons.com */
|
||||
|
||||
$mdi-filename: "material-design-icons";
|
||||
$mdi-font-name: "material-design-icons";
|
||||
$mdi-font-family: "material-design-icons";
|
||||
$mdi-font-weight: "regular";
|
||||
$mdi-font-path: "../fonts" !default;
|
||||
$mdi-css-prefix: mdi !default;
|
||||
$mdi-version: "3.3.92" !default;
|
||||
|
||||
@font-face {
|
||||
font-family: '#{$mdi-font-name}';
|
||||
src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?v=#{$mdi-version}');
|
||||
src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
|
||||
url('#{$mdi-font-path}/#{$mdi-filename}.woff2?v=#{$mdi-version}') format('woff2'),
|
||||
url('#{$mdi-font-path}/#{$mdi-filename}.woff?v=#{$mdi-version}') format('woff'),
|
||||
url('#{$mdi-font-path}/#{$mdi-filename}.ttf?v=#{$mdi-version}') format('truetype'),
|
||||
url('#{$mdi-font-path}/#{$mdi-filename}.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
$mdi-icons: (
|
||||
account-outline: '\F013',
|
||||
atom: '\F767',
|
||||
cellphone-iphone: '\F120',
|
||||
check: '\F12C',
|
||||
email-outline: '\F1F0',
|
||||
link-variant: '\F339'
|
||||
);
|
||||
|
||||
%mdi,
|
||||
[class^='mdi-']::before,
|
||||
[class*='mdi-']::before {
|
||||
display: inline-block;
|
||||
font-family: '#{$mdi-font-name}' !important;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 0.5em;
|
||||
margin-left: -0.15em;
|
||||
text-align: center;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@function char($character-code) {
|
||||
@if function-exists("selector-append") {
|
||||
@return unquote("\"\\#{$character-code}\"");
|
||||
}
|
||||
|
||||
@if "\\#{'x'}" == "\\x" {
|
||||
@return str-slice("\x", 1, 1) + $character-code;
|
||||
}
|
||||
@else {
|
||||
@return #{"\"\\"}#{$character-code + "\""};
|
||||
}
|
||||
}
|
||||
|
||||
@function mdi($name) {
|
||||
@if map-has-key($mdi-icons, $name) == false {
|
||||
@warn "Icon #{$name} not found.";
|
||||
@return "";
|
||||
}
|
||||
@return char(map-get($mdi-icons, $name));
|
||||
}
|
||||
|
||||
@each $key, $value in $mdi-icons {
|
||||
.#{$mdi-css-prefix}-#{$key}:before {
|
||||
content: char($value);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdi($value) {
|
||||
&:before {
|
||||
@extend %mdi;
|
||||
@extend .#{$mdi-css-prefix}-#{$value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.#{$mdi-css-prefix}-blank:before {
|
||||
content: "\F68C";
|
||||
visibility: hidden;
|
||||
}
|
||||
Reference in New Issue
Block a user