github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

add small-box

pull/3698/head
Daniel 2021-05-15 01:09:28 +05:30
parent 160009f70b
commit 96ee34f877
4 changed files with 187 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -11,6 +11,7 @@
<!-- <link rel="stylesheet" href="dist/css/alt/adminlte.pcs.css"> --> <!-- <link rel="stylesheet" href="dist/css/alt/adminlte.pcs.css"> -->
<link rel="stylesheet" href="dist/css/adminlte.css"> <link rel="stylesheet" href="dist/css/adminlte.css">
<link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head> </head>
<body class="layout-fixed"> <body class="layout-fixed">
@ -142,14 +143,14 @@
<div class="row"> <div class="row">
<div class="col-lg-3 col-6"> <div class="col-lg-3 col-6">
<!-- small box --> <!-- small box -->
<div class="small-box bg-info"> <div class="small-box bg-info rounded-3 shadow-sm">
<div class="inner"> <div class="inner">
<h3>150</h3> <h3>150</h3>
<p>New Orders</p> <p>New Orders</p>
</div> </div>
<div class="icon"> <div class="icon">
<i class="ion ion-bag"></i> <i class="inner-icon ion ion-bag"></i>
</div> </div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div> </div>
@ -157,14 +158,14 @@
<!-- ./col --> <!-- ./col -->
<div class="col-lg-3 col-6"> <div class="col-lg-3 col-6">
<!-- small box --> <!-- small box -->
<div class="small-box bg-success"> <div class="small-box bg-success rounded-3 shadow-sm">
<div class="inner"> <div class="inner">
<h3>53<sup style="font-size: 20px">%</sup></h3> <h3>53<sup class="fs-5">%</sup></h3>
<p>Bounce Rate</p> <p>Bounce Rate</p>
</div> </div>
<div class="icon"> <div class="icon">
<i class="ion ion-stats-bars"></i> <i class="inner-icon ion ion-stats-bars"></i>
</div> </div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div> </div>
@ -172,14 +173,14 @@
<!-- ./col --> <!-- ./col -->
<div class="col-lg-3 col-6"> <div class="col-lg-3 col-6">
<!-- small box --> <!-- small box -->
<div class="small-box bg-warning"> <div class="small-box bg-warning rounded-3 shadow-sm">
<div class="inner"> <div class="inner">
<h3>44</h3> <h3>44</h3>
<p>User Registrations</p> <p>User Registrations</p>
</div> </div>
<div class="icon"> <div class="icon">
<i class="ion ion-person-add"></i> <i class="inner-icon ion ion-person-add"></i>
</div> </div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div> </div>
@ -187,14 +188,14 @@
<!-- ./col --> <!-- ./col -->
<div class="col-lg-3 col-6"> <div class="col-lg-3 col-6">
<!-- small box --> <!-- small box -->
<div class="small-box bg-danger"> <div class="small-box bg-danger rounded-3 shadow-sm">
<div class="inner"> <div class="inner">
<h3>65</h3> <h3>65</h3>
<p>Unique Visitors</p> <p>Unique Visitors</p>
</div> </div>
<div class="icon"> <div class="icon">
<i class="ion ion-pie-graph"></i> <i class="inner-icon ion ion-pie-graph"></i>
</div> </div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div> </div>

241
package-lock.json generated
View File

@ -1499,10 +1499,25 @@
"dev": true "dev": true
}, },
"contains-path": { "contains-path": {
"version": "0.1.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz", "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-1.0.0.tgz",
"integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=", "integrity": "sha1-NFizMhhWA+ju0Y9RjUoQiIo6vJE=",
"dev": true "dev": true,
"requires": {
"normalize-path": "^2.1.1",
"path-starts-with": "^1.0.0"
},
"dependencies": {
"normalize-path": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
"integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
"dev": true,
"requires": {
"remove-trailing-separator": "^1.0.1"
}
}
}
}, },
"convert-source-map": { "convert-source-map": {
"version": "1.7.0", "version": "1.7.0",
@ -1942,9 +1957,9 @@
} }
}, },
"esbuild": { "esbuild": {
"version": "0.11.20", "version": "0.11.21",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.11.20.tgz", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.11.21.tgz",
"integrity": "sha512-QOZrVpN/Yz74xfat0H6euSgn3RnwLevY1mJTEXneukz1ln9qB+ieaerRMzSeETpz/UJWsBMzRVR/andBht5WKw==", "integrity": "sha512-FqpYdJqiTeLDbj3vqxc/fG8UmHIEvQrDaUxSw1oJf4giLd/tnMDUUlXellCjOab7qGKQ5hUFD5eQgmO+tkZeow==",
"dev": true "dev": true
}, },
"escalade": { "escalade": {
@ -2119,50 +2134,47 @@
} }
}, },
"eslint-module-utils": { "eslint-module-utils": {
"version": "2.6.0", "version": "2.6.1",
"resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz", "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.1.tgz",
"integrity": "sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==", "integrity": "sha512-ZXI9B8cxAJIH4nfkhTwcRTEAnrVfobYqwjWy/QMCZ8rHkZHFjf9yO4BzpiF9kCSfNlMG54eKigISHpX0+AaT4A==",
"dev": true, "dev": true,
"requires": { "requires": {
"debug": "^2.6.9", "debug": "^3.2.7",
"pkg-dir": "^2.0.0" "pkg-dir": "^2.0.0"
}, },
"dependencies": { "dependencies": {
"debug": { "debug": {
"version": "2.6.9", "version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"ms": "2.0.0" "ms": "^2.1.1"
} }
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
} }
} }
}, },
"eslint-plugin-import": { "eslint-plugin-import": {
"version": "2.22.1", "version": "2.23.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.23.0.tgz",
"integrity": "sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==", "integrity": "sha512-W5v1f7Cbam6BwbSSKtN6+yoUAms07ozbqAEhLOtf5erEqRv7w67PeZuAuBThaUkzdq2GfBx/5GBvxF+NWJshrQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"array-includes": "^3.1.1", "array-includes": "^3.1.3",
"array.prototype.flat": "^1.2.3", "array.prototype.flat": "^1.2.4",
"contains-path": "^0.1.0", "contains-path": "^1.0.0",
"debug": "^2.6.9", "debug": "^2.6.9",
"doctrine": "1.5.0", "doctrine": "^2.1.0",
"eslint-import-resolver-node": "^0.3.4", "eslint-import-resolver-node": "^0.3.4",
"eslint-module-utils": "^2.6.0", "eslint-module-utils": "^2.6.1",
"find-up": "^2.0.0",
"has": "^1.0.3", "has": "^1.0.3",
"is-core-module": "^2.4.0",
"minimatch": "^3.0.4", "minimatch": "^3.0.4",
"object.values": "^1.1.1", "object.values": "^1.1.3",
"read-pkg-up": "^2.0.0", "pkg-up": "^2.0.0",
"resolve": "^1.17.0", "read-pkg-up": "^3.0.0",
"resolve": "^1.20.0",
"tsconfig-paths": "^3.9.0" "tsconfig-paths": "^3.9.0"
}, },
"dependencies": { "dependencies": {
@ -2176,13 +2188,12 @@
} }
}, },
"doctrine": { "doctrine": {
"version": "1.5.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
"integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=", "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
"dev": true, "dev": true,
"requires": { "requires": {
"esutils": "^2.0.2", "esutils": "^2.0.2"
"isarray": "^1.0.0"
} }
}, },
"find-up": { "find-up": {
@ -2194,11 +2205,14 @@
"locate-path": "^2.0.0" "locate-path": "^2.0.0"
} }
}, },
"isarray": { "is-core-module": {
"version": "1.0.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
"dev": true "dev": true,
"requires": {
"has": "^1.0.3"
}
}, },
"locate-path": { "locate-path": {
"version": "2.0.0", "version": "2.0.0",
@ -2247,39 +2261,39 @@
"dev": true "dev": true
}, },
"path-type": { "path-type": {
"version": "2.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz", "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
"integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=", "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
"dev": true, "dev": true,
"requires": { "requires": {
"pify": "^2.0.0" "pify": "^3.0.0"
} }
}, },
"pify": { "pify": {
"version": "2.3.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
"dev": true "dev": true
}, },
"read-pkg": { "read-pkg": {
"version": "2.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
"integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=", "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
"dev": true, "dev": true,
"requires": { "requires": {
"load-json-file": "^2.0.0", "load-json-file": "^4.0.0",
"normalize-package-data": "^2.3.2", "normalize-package-data": "^2.3.2",
"path-type": "^2.0.0" "path-type": "^3.0.0"
} }
}, },
"read-pkg-up": { "read-pkg-up": {
"version": "2.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz", "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz",
"integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=", "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
"dev": true, "dev": true,
"requires": { "requires": {
"find-up": "^2.0.0", "find-up": "^2.0.0",
"read-pkg": "^2.0.0" "read-pkg": "^3.0.0"
} }
} }
} }
@ -3439,30 +3453,31 @@
"dev": true "dev": true
}, },
"load-json-file": { "load-json-file": {
"version": "2.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
"integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
"dev": true, "dev": true,
"requires": { "requires": {
"graceful-fs": "^4.1.2", "graceful-fs": "^4.1.2",
"parse-json": "^2.2.0", "parse-json": "^4.0.0",
"pify": "^2.0.0", "pify": "^3.0.0",
"strip-bom": "^3.0.0" "strip-bom": "^3.0.0"
}, },
"dependencies": { "dependencies": {
"parse-json": { "parse-json": {
"version": "2.2.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
"dev": true, "dev": true,
"requires": { "requires": {
"error-ex": "^1.2.0" "error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1"
} }
}, },
"pify": { "pify": {
"version": "2.3.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
"dev": true "dev": true
} }
} }
@ -4421,6 +4436,26 @@
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
"dev": true "dev": true
}, },
"path-starts-with": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/path-starts-with/-/path-starts-with-1.0.0.tgz",
"integrity": "sha1-soJDAV6LE43lcmgqxS2kLmRq2E4=",
"dev": true,
"requires": {
"normalize-path": "^2.1.1"
},
"dependencies": {
"normalize-path": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
"integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
"dev": true,
"requires": {
"remove-trailing-separator": "^1.0.1"
}
}
}
},
"path-type": { "path-type": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@ -4505,6 +4540,66 @@
} }
} }
}, },
"pkg-up": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
"integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
"dev": true,
"requires": {
"find-up": "^2.1.0"
},
"dependencies": {
"find-up": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
"integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
"dev": true,
"requires": {
"locate-path": "^2.0.0"
}
},
"locate-path": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
"integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
"dev": true,
"requires": {
"p-locate": "^2.0.0",
"path-exists": "^3.0.0"
}
},
"p-limit": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
"integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
"dev": true,
"requires": {
"p-try": "^1.0.0"
}
},
"p-locate": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
"integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
"dev": true,
"requires": {
"p-limit": "^1.1.0"
}
},
"p-try": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
"integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
"dev": true
},
"path-exists": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
"dev": true
}
}
},
"pluralize": { "pluralize": {
"version": "8.0.0", "version": "8.0.0",
"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz", "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
@ -5372,6 +5467,12 @@
"mdast-util-to-markdown": "^0.6.0" "mdast-util-to-markdown": "^0.6.0"
} }
}, },
"remove-trailing-separator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
"integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
"dev": true
},
"repeat-string": { "repeat-string": {
"version": "1.6.1", "version": "1.6.1",
"resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",

4
package.json
View File

@ -75,11 +75,11 @@
"clean-css-cli": "^5.3.0", "clean-css-cli": "^5.3.0",
"concurrently": "^6.1.0", "concurrently": "^6.1.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"esbuild": "^0.11.20", "esbuild": "^0.11.21",
"eslint": "^7.26.0", "eslint": "^7.26.0",
"eslint-config-xo": "^0.36.0", "eslint-config-xo": "^0.36.0",
"eslint-config-xo-typescript": "^0.41.1", "eslint-config-xo-typescript": "^0.41.1",
"eslint-plugin-import": "^2.22.1", "eslint-plugin-import": "^2.23.0",
"eslint-plugin-unicorn": "^32.0.1", "eslint-plugin-unicorn": "^32.0.1",
"lockfile-lint": "^4.6.2", "lockfile-lint": "^4.6.2",
"nodemon": "^2.0.7", "nodemon": "^2.0.7",

22
scss/_small-box.scss
View File

@ -3,12 +3,10 @@
// //
.small-box { .small-box {
@include border-radius($border-radius);
@include box-shadow($card-shadow);
display: block; display: block;
margin-bottom: 20px; margin-bottom: 1.25rem;
position: relative; position: relative;
color: $light;
// content wrapper // content wrapper
> .inner { > .inner {
@ -103,13 +101,7 @@
top: 15px; top: 15px;
transition: transform $transition-speed linear; transition: transform $transition-speed linear;
&.fa, &.inner-icon {
&.fas,
&.far,
&.fab,
&.fal,
&.fad,
&.ion {
font-size: 70px; font-size: 70px;
top: 20px; top: 20px;
} }
@ -132,13 +124,7 @@
.icon { .icon {
> i { > i {
&, &,
&.fa, &.inner-icon {
&.fas,
&.far,
&.fab,
&.fal,
&.fad,
&.ion {
transform: scale(1.1); transform: scale(1.1);
} }
} }