cziermann
/
ziermach-blog
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

optimize performence

master
Christian Ziermann 4 years ago
parent
971f24cb14
commit
ed0c8592f0
4 changed files with 104 additions and 99 deletions
Split View Show Diff Stats
  1. +5
    -5
      angular.json
  2. +95
    -93
      src/assets/css/nucleo-icons.css
  3. +1
    -1
      src/index.html
  4. +3
    -0
      tsconfig.json

+ 5
- 5
angular.json View File

@@ -23,13 +23,13 @@
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"src/assets/sass/paper-kit.scss",
"src/assets/css/demo.css",
"src/assets/css/nucleo-icons.css"
],
"scripts": [
"node_modules/@fortawesome/fontawesome-free/js/all.js"
"node_modules/@fortawesome/fontawesome-free/js/all.min.js",
]
},
"configurations": {
@@ -37,7 +37,7 @@
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"extractCss": false,
"namedChunks": false,
"aot": true,
"extractLicenses": false,
@@ -77,11 +77,11 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/@fortawesome/fontawesome-free/js/all.js"
"node_modules/@fortawesome/fontawesome-free/js/all.min.js"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"src/assets/sass/paper-kit.scss",
"src/assets/css/demo.css",
"src/assets/css/nucleo-icons.css"

+ 95
- 93
src/assets/css/nucleo-icons.css View File

@@ -5,158 +5,161 @@ License - nucleoapp.com/license/

-------------------------------- */
@font-face {
font-family: 'nucleo-icons';
src: url('../fonts/nucleo-icons.eot');
src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-family: "nucleo-icons";
src: url("../fonts/nucleo-icons.eot");
src: url("../fonts/nucleo-icons.eot") format("embedded-opentype"),
url("../fonts/nucleo-icons.woff2") format("woff2"),
url("../fonts/nucleo-icons.woff") format("woff"),
url("../fonts/nucleo-icons.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/*------------------------
base class definition
-------------------------*/
.nc-icon {
display: inline-block;
font: normal normal normal 14px/1 'nucleo-icons';
font-size: inherit;
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font: normal normal normal 14px/1 "nucleo-icons";
font-size: inherit;
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*------------------------
change icon size
-------------------------*/
.nc-icon.lg {
font-size: 1.33333333em;
vertical-align: -16%;
font-size: 1.33333333em;
vertical-align: -16%;
}
.nc-icon.x2 {
font-size: 2em;
font-size: 2em;
}
.nc-icon.x3 {
font-size: 3em;
font-size: 3em;
}
/*----------------------------------
add a square/circle background
-----------------------------------*/
.nc-icon.square,
.nc-icon.circle {
padding: 0.33333333em;
vertical-align: -16%;
background-color: #eee;
padding: 0.33333333em;
vertical-align: -16%;
background-color: #eee;
}
.nc-icon.circle {
border-radius: 50%;
border-radius: 50%;
}
/*------------------------
list icons
-------------------------*/
.nc-icon-ul {
padding-left: 0;
margin-left: 2.14285714em;
list-style-type: none;
padding-left: 0;
margin-left: 2.14285714em;
list-style-type: none;
}
.nc-icon-ul > li {
position: relative;
position: relative;
}
.nc-icon-ul > li > .nc-icon {
position: absolute;
left: -1.57142857em;
top: 0.14285714em;
text-align: center;
position: absolute;
left: -1.57142857em;
top: 0.14285714em;
text-align: center;
}
.nc-icon-ul > li > .nc-icon.lg {
top: 0;
left: -1.35714286em;
top: 0;
left: -1.35714286em;
}
.nc-icon-ul > li > .nc-icon.circle,
.nc-icon-ul > li > .nc-icon.square {
top: -0.19047619em;
left: -1.9047619em;
top: -0.19047619em;
left: -1.9047619em;
}
/*------------------------
spinning icons
-------------------------*/
.nc-icon.spin {
-webkit-animation: nc-icon-spin 2s infinite linear;
-moz-animation: nc-icon-spin 2s infinite linear;
animation: nc-icon-spin 2s infinite linear;
-webkit-animation: nc-icon-spin 2s infinite linear;
-moz-animation: nc-icon-spin 2s infinite linear;
animation: nc-icon-spin 2s infinite linear;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*------------------------
rotated/flipped icons
-------------------------*/
.nc-icon.rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.nc-icon.rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.nc-icon.rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.nc-icon.flip-y {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.nc-icon.flip-x {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
/*------------------------
font icons
@@ -562,5 +565,4 @@ License - nucleoapp.com/license/
content: "\ea64";
}


/* all icon font classes list here */

+ 1
- 1
src/index.html View File

@@ -31,7 +31,7 @@
<meta name="theme-color" content="#1976d2">
</head>
<body>
<app-root></app-root>
<app-root ngPreserveWhitespaces></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

+ 3
- 0
tsconfig.json View File

@@ -13,5 +13,8 @@
"typeRoots": ["node_modules/@types"],
"lib": ["es2016", "dom"],
"module": "es2015"
},
"angularCompilerOptions": {
"preserveWhitespaces": false
}
}

Write Preview
Loading…
Cancel
Save