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

added table scss

pull/3729/head
Daniel 2021-05-20 05:26:31 +05:30
parent a9c982327f
commit 01e5b1ce2c
11 changed files with 922 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
src/index3.html Normal file
View File

@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": ".",
"title": "AdminLTE 4 | Dashboard 3"
})
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body class="layout-fixed">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "dashboard",
"page": "index3",
"path": "."
})
<!-- Main content -->
<div class="content-wrapper">
@@include('./dashboard/_content-header.html', {
"header_name": "Dashboard v2"
})
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header border-0">
<h3 class="card-title">Products</h3>
<div class="card-tools">
<a href="#" class="btn btn-tool btn-sm">
<i class="fas fa-download"></i>
</a>
<a href="#" class="btn btn-tool btn-sm">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped align-middle">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Sales</th>
<th>More</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="./assets/img/AdminLTELogo.png" alt="Product 1" class="img-circle img-size-32 me-2">
Some Product
</td>
<td>$13 USD</td>
<td>
<small class="text-success me-1">
<i class="fas fa-arrow-up"></i>
12%
</small>
12,000 Sold
</td>
<td>
<a href="#" class="text-muted">
<i class="fas fa-search"></i>
</a>
</td>
</tr>
<tr>
<td>
<img src="./assets/img/AdminLTELogo.png" alt="Product 1" class="img-circle img-size-32 me-2">
Another Product
</td>
<td>$29 USD</td>
<td>
<small class="text-warning me-1">
<i class="fas fa-arrow-down"></i>
0.5%
</small>
123,234 Sold
</td>
<td>
<a href="#" class="text-muted">
<i class="fas fa-search"></i>
</a>
</td>
</tr>
<tr>
<td>
<img src="./assets/img/AdminLTELogo.png" alt="Product 1" class="img-circle img-size-32 me-2">
Amazing Product
</td>
<td>$1,230 USD</td>
<td>
<small class="text-danger me-1">
<i class="fas fa-arrow-down"></i>
3%
</small>
198 Sold
</td>
<td>
<a href="#" class="text-muted">
<i class="fas fa-search"></i>
</a>
</td>
</tr>
<tr>
<td>
<img src="./assets/img/AdminLTELogo.png" alt="Product 1" class="img-circle img-size-32 me-2">
Perfect Item
<span class="badge bg-danger">NEW</span>
</td>
<td>$199 USD</td>
<td>
<small class="text-success me-1">
<i class="fas fa-arrow-up"></i>
63%
</small>
87 Sold
</td>
<td>
<a href="#" class="text-muted">
<i class="fas fa-search"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header border-0">
<h3 class="card-title">Online Store Overview</h3>
<div class="card-tools">
<a href="#" class="btn btn-sm btn-tool">
<i class="fas fa-download"></i>
</a>
<a href="#" class="btn btn-sm btn-tool">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center border-bottom mb-3">
<p class="text-success text-xl">
<i class="ion ion-ios-refresh-empty"></i>
</p>
<p class="d-flex flex-column text-end">
<span class="fw-bold">
<i class="ion ion-android-arrow-up text-success"></i> 12%
</span>
<span class="text-muted">CONVERSION RATE</span>
</p>
</div>
<!-- /.d-flex -->
<div class="d-flex justify-content-between align-items-center border-bottom mb-3">
<p class="text-warning text-xl">
<i class="ion ion-ios-cart-outline"></i>
</p>
<p class="d-flex flex-column text-end">
<span class="fw-bold">
<i class="ion ion-android-arrow-up text-warning"></i> 0.8%
</span>
<span class="text-muted">SALES RATE</span>
</p>
</div>
<!-- /.d-flex -->
<div class="d-flex justify-content-between align-items-center mb-0">
<p class="text-danger text-xl">
<i class="ion ion-ios-people-outline"></i>
</p>
<p class="d-flex flex-column text-end">
<span class="fw-bold">
<i class="ion ion-android-arrow-down text-danger"></i> 1%
</span>
<span class="text-muted">REGISTRATION RATE</span>
</p>
</div>
<!-- /.d-flex -->
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
</div>
<!-- /.content-wrapper -->
@@include('./dashboard/_footer.html', {
"path": "."
})
</div>
<!-- ./wrapper -->
@@include('./_scripts.html', {
"path": "."
})
</body>
</html>

10
src/partials/_head.html
View File

@ -1,12 +1,12 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The page supports both dark and light color schemes, and the page author prefers / default is light. -->
<!-- If add @@path/css/dark/adminlte-dark.css then the page supports both dark and light color schemes, and the page author prefers / default is light. -->
<meta name="color-scheme" content="light dark">
<title>@@title</title>
<!-- For dark mode use dist/css/alt/adminlte.pcs.css, remove dist/css/adminlte.css -->
<!-- <link rel="stylesheet" href="dist/css/dark/adminlte-dark.css"> -->
<!-- For RTL verison -->
<!-- <link rel="stylesheet" href="dist/css/rtl/adminlte.rtl.css"> -->
<!-- For dark mode use @@path/css/dark/adminlte-dark.css, remove dist/css/adminlte.css -->
<!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark.css"> -->
<!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
<!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css"> -->
<link rel="stylesheet" href="@@path/css/adminlte.css">
<link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">

8
src/partials/dashboard/_sidenav.html
View File

@ -37,6 +37,14 @@
</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/index3.html" class="nav-link @@if (context.page === 'index3') {active}">
<i class="nav-icon far fa-circle"></i>
<p>
Dashboard v3
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">

41
src/scss/_custom-variables.scss
View File

@ -12,6 +12,11 @@ $font-size-root: 1rem !default;
$transition-speed: .3s !default;
$transition-fn: ease-in-out !default;
// TEXT
// --------------------------------------------------------
$font-size-xs: ($font-size-base * .75) !default;
$font-size-xl: ($font-size-base * 2) !default;
// Sidebar
// --------------------------------------------------------
$sidebar-width: 250px !default;
@ -144,6 +149,11 @@ $card-nav-link-padding-sm-y: .4rem !default;
$card-nav-link-padding-sm-x: .8rem !default;
$card-img-size: $img-size-sm !default;
// Tables
// --------------------------------------------------------
$table-cell-padding-y-lg: .75rem !default;
$table-cell-padding-x-lg: .75rem !default;
// Z-INDEX
// --------------------------------------------------------
$zindex-main-header: $zindex-fixed + 4 !default;
@ -161,5 +171,36 @@ $zindex-preloader: $zindex-toasts + 2 !default;
$main-bg: #f4f6f9 !default;
$main-color: $black !default;
// BUTTON
// --------------------------------------------------------
$button-default-background-color: $gray-100 !default;
$button-default-color: #444 !default;
$button-default-border-color: #ddd !default;
$button-padding-y-xs: .125rem !default;
$button-padding-x-xs: .25rem !default;
$button-line-height-xs: $line-height-sm !default;
$button-font-size-xs: ($font-size-base * .75) !default;
$button-border-radius-xs: .15rem !default;
// RIBBON
// --------------------------------------------------------
$ribbon-border-size: 3px !default;
$ribbon-line-height: 100% !default;
$ribbon-padding: .375rem 0 !default;
$ribbon-font-size: .8rem !default;
$ribbon-width: 90px !default;
$ribbon-wrapper-size: 70px !default;
$ribbon-top: 10px !default;
$ribbon-right: -2px !default;
$ribbon-lg-wrapper-size: 120px !default;
$ribbon-lg-width: 160px !default;
$ribbon-lg-top: 26px !default;
$ribbon-lg-right: 0 !default;
$ribbon-xl-wrapper-size: 180px !default;
$ribbon-xl-width: 240px !default;
$ribbon-xl-top: 47px !default;
$ribbon-xl-right: 4px !default;
// Dark mode
$enable-dark-mode: false !default;

483
src/scss/_miscellaneous.scss
View File

@ -1,3 +1,486 @@
//
// Misc: Miscellaneous
//
.border-transparent {
border-color: transparent !important;
}
// Description Blocks
.description-block {
display: block;
margin: 10px 0;
text-align: center;
&.margin-bottom {
margin-bottom: 25px;
}
> .description-header {
font-size: 16px;
font-weight: 600;
margin: 0;
padding: 0;
}
> .description-text {
text-transform: uppercase;
}
// Description Block Extension
.description-icon {
font-size: 16px;
}
}
// List utility classes
.list-group-unbordered {
> .list-group-item {
border-left: 0;
border-radius: 0;
border-right: 0;
padding-left: 0;
padding-right: 0;
}
}
.list-header {
color: $gray-600;
font-size: 15px;
font-weight: 700;
padding: 10px 4px;
}
.list-seperator {
background-color: $card-border-color;
height: 1px;
margin: 15px 0 9px;
}
.list-link {
> a {
color: $gray-600;
padding: 4px;
&:hover {
color: $gray-900;
}
}
}
// User block
.user-block {
float: left;
img {
float: left;
height: 40px;
width: 40px;
}
.username,
.description,
.comment {
display: block;
margin-left: 50px;
}
.username {
font-size: 16px;
font-weight: 600;
margin-top: -1px;
}
.description {
color: $gray-600;
font-size: 13px;
margin-top: -3px;
}
&.user-block-sm {
img {
width: $img-size-sm;
height: $img-size-sm;
}
.username,
.description,
.comment {
margin-left: 40px;
}
.username {
font-size: 14px;
}
}
}
// Image sizes
.img-sm,
.img-md,
.img-lg {
float: left;
}
.img-sm {
height: $img-size-sm;
width: $img-size-sm;
+ .img-push {
margin-left: $img-size-sm + $img-size-push;
}
}
.img-md {
width: $img-size-md;
height: $img-size-md;
+ .img-push {
margin-left: $img-size-md + $img-size-push;
}
}
.img-lg {
width: $img-size-lg;
height: $img-size-lg;
+ .img-push {
margin-left: $img-size-lg + $img-size-push;
}
}
// Image bordered
.img-bordered {
border: 3px solid $gray-500;
padding: 3px;
}
.img-bordered-sm {
border: 2px solid $gray-500;
padding: 2px;
}
// Rounded and Circle Images
.img-rounded {
@include border-radius($border-radius);
}
.img-circle {
@include border-radius(50%);
}
// Image sizes
.img-size-64,
.img-size-50,
.img-size-32 {
height: auto;
}
.img-size-64 {
width: 64px;
}
.img-size-50 {
width: 50px;
}
.img-size-32 {
width: 32px;
}
// Block sizes
.size-32,
.size-40,
.size-50 {
display: block;
text-align: center;
}
.size-32 {
height: 32px;
line-height: 32px;
width: 32px;
}
.size-40 {
height: 40px;
line-height: 40px;
width: 40px;
}
.size-50 {
height: 50px;
line-height: 50px;
width: 50px;
}
// General attachemnt block
.attachment-block {
background-color: $gray-100;
border: 1px solid $card-border-color;
margin-bottom: 10px;
padding: 5px;
.attachment-img {
float: left;
height: auto;
max-height: 100px;
max-width: 100px;
}
.attachment-pushed {
margin-left: 110px;
}
.attachment-heading {
margin: 0;
}
.attachment-text {
color: $gray-700;
}
}
// Overlays for Card, InfoBox & SmallBox
.card,
.overlay-wrapper,
.info-box,
.small-box {
// Box overlay for LOADING STATE effect
> .overlay,
> .loading-img {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.overlay {
@include border-radius($border-radius);
align-items: center;
background-color: rgba($white, .7);
display: flex;
justify-content: center;
z-index: 50;
> .fa,
> .fas,
> .far,
> .fab,
> .fal,
> .fad,
> .svg-inline--fa,
> .ion {
color: $gray-800;
}
&.dark {
background-color: rgba($black, .5);
> .fa,
> .fas,
> .far,
> .fab,
> .fal,
> .fad,
> .svg-inline--fa,
> .ion {
color: $gray-400;
}
}
}
}
.tab-pane {
// Box overlay for LOADING STATE effect on Tab Panels
> .overlay-wrapper {
position: relative;
> .overlay {
border-top-left-radius: 0;
border-top-right-radius: 0;
flex-direction: column;
margin-top: -$card-spacer-x;
margin-left: -$card-spacer-x;
height: add(100%, (2 * $card-spacer-x));
width: add(100%, (2 * $card-spacer-x));
&.dark {
color: $white;
}
}
}
}
// Ribbon
.ribbon-wrapper {
height: $ribbon-wrapper-size;
overflow: hidden;
position: absolute;
right: -2px;
top: -2px;
width: $ribbon-wrapper-size;
z-index: 10;
&.ribbon-lg {
height: $ribbon-lg-wrapper-size;
width: $ribbon-lg-wrapper-size;
.ribbon {
right: $ribbon-lg-right;
top: $ribbon-lg-top;
width: $ribbon-lg-width;
}
}
&.ribbon-xl {
height: $ribbon-xl-wrapper-size;
width: $ribbon-xl-wrapper-size;
.ribbon {
right: $ribbon-xl-right;
top: $ribbon-xl-top;
width: $ribbon-xl-width;
}
}
.ribbon {
box-shadow: 0 0 $ribbon-border-size rgba($black, .3);
font-size: $ribbon-font-size;
line-height: $ribbon-line-height;
padding: $ribbon-padding;
position: relative;
right: $ribbon-right;
text-align: center;
text-shadow: 0 -1px 0 rgba($black, .4);
text-transform: uppercase;
top: $ribbon-top;
transform: rotate(45deg);
width: $ribbon-width;
&::before,
&::after {
border-left: $ribbon-border-size solid transparent;
border-right: $ribbon-border-size solid transparent;
border-top: $ribbon-border-size solid #9e9e9e;
bottom: -$ribbon-border-size;
content: "";
position: absolute;
}
&::before {
left: 0;
}
&::after {
right: 0;
}
}
}
// Scroll To Top
.back-to-top {
bottom: 1.25rem;
position: fixed;
right: 1.25rem;
z-index: $zindex-control-sidebar + 1;
&:focus {
box-shadow: none;
}
}
// Pre
pre {
padding: .75rem;
}
// Blockquotes styles
blockquote {
background-color: $white;
border-left: .7rem solid $primary;
margin: 1.5em .7rem;
padding: .5em .7rem;
.box & {
background-color: $gray-200;
}
p:last-child {
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $primary;
font-size: 1.25rem;
font-weight: 600;
}
@each $color, $value in $theme-colors {
&.quote-#{$color} {
border-color: $value;
h1,
h2,
h3,
h4,
h5,
h6 {
color: $value;
}
}
}
@each $color, $value in $colors {
&.quote-#{$color} {
border-color: $value;
h1,
h2,
h3,
h4,
h5,
h6 {
color: $value;
}
}
}
}
// Tab Custom Content
.tab-custom-content {
border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
margin-top: .5rem;
padding-top: .5rem;
}
.nav + .tab-custom-content {
border-top: none;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
margin-top: 0;
margin-bottom: .5rem;
padding-bottom: .5rem;
}
// Badge BTN Style
.badge-btn {
border-radius: $button-border-radius-xs;
font-size: $button-font-size-xs;
font-weight: 400;
padding: $button-padding-y-xs * 2 $button-padding-x-xs * 2;
}
.badge-btn.badge-pill {
padding: .375rem .6rem;
}
.resize-animation-stopper * {
animation: none !important;
transition: none !important;

125
src/scss/_table.scss Normal file
View File

@ -0,0 +1,125 @@
//
// Component: Table
//
.table {
&:not(.table-dark) {
color: inherit;
}
// fixed table head
&.table-head-fixed {
thead tr:nth-child(1) th {
background-color: $white;
border-bottom: 0;
box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color;
position: sticky;
top: 0;
z-index: 10;
}
// TODO: add $table-dark
// &.table-dark {
// thead tr {
// &:nth-child(1) th {
// background-color: $table-dark-bg;
// box-shadow: inset 0 1px 0 $table-dark-border-color, inset 0 -1px 0 $table-dark-border-color;
// }
// }
// }
}
// no border
&.no-border {
&,
td,
th {
border: 0;
}
}
// .text-center in tables
&.text-center {
&,
td,
th {
text-align: center;
}
}
&.table-valign-middle {
thead > tr > th,
thead > tr > td,
tbody > tr > th,
tbody > tr > td {
vertical-align: middle;
}
}
.card-body.p-0 & {
thead > tr > th,
thead > tr > td,
tfoot > tr > th,
tfoot > tr > td,
tbody > tr > th,
tbody > tr > td {
&:first-of-type {
padding-left: map-get($spacers, 4);
}
&:last-of-type {
padding-right: map-get($spacers, 4);
}
}
}
}
// Expandable Table
.table-hover tbody tr.expandable-body:hover {
background-color: inherit !important;
}
[data-widget="expandable-table"] {
cursor: pointer;
i.expandable-table-caret {
transition: transform $transition-speed linear;
}
&[aria-expanded="true"] {
td i.expandable-table-caret {
// stylelint-disable selector-max-attribute
&[class*="right"] {
transform: rotate(90deg);
}
&[class*="left"] {
transform: rotate(-90deg);
}
// stylelint-enable selector-max-attribute
}
}
}
.expandable-body {
> td {
padding: 0 !important;
width: 100%;
> div,
> p {
padding: $table-cell-padding-y-lg;
}
}
.table {
width: subtract(100%, $table-cell-padding-y-lg);
margin: 0 0 0 $table-cell-padding-y-lg;
tr:first-child {
td,
th {
border-top: none;
}
}
}
}

39
src/scss/_text.scss Normal file
View File

@ -0,0 +1,39 @@
//
// Component: Text
//
// text modification
.text-bold {
&,
&.table td,
&.table th {
font-weight: 700;
}
}
.text-xs {
font-size: $font-size-xs !important;
}
.text-sm {
font-size: $font-size-sm !important;
}
.text-md {
font-size: $font-size-base !important;
}
.text-lg {
font-size: $font-size-lg !important;
}
.text-xl {
font-size: $font-size-xl !important;
}
// text color variations
@each $name, $color in $colors {
.text-#{$name} {
color: #{$color} !important;
}
}

2
src/scss/adminlte.scss
View File

@ -29,4 +29,4 @@
@import "parts/core";
@import "parts/components";
@import "parts/extra-components";
@import "miscellaneous";
@import "parts/miscellaneous";

6
src/scss/mixins/_miscellaneous.scss
View File

@ -16,9 +16,9 @@
// #{$property}: calc(#{$expression});
// }
// @mixin rotate($value) {
// transform: rotate($value);
// }
@mixin rotate($value) {
transform: rotate($value);
}
// @mixin animation($animation) {
// animation: $animation;

1
src/scss/parts/_components.scss
View File

@ -3,3 +3,4 @@
//
@import "../cards";
@import "../table";

6
src/scss/parts/_miscellaneous.scss Normal file
View File

@ -0,0 +1,6 @@
//
// Part: Miscellaneous
//
@import "../miscellaneous";
@import "../text";