mirror of https://github.com/ColorlibHQ/AdminLTE
added table scss
parent
a9c982327f
commit
01e5b1ce2c
|
@ -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>
|
|
@ -1,12 +1,12 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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">
|
<meta name="color-scheme" content="light dark">
|
||||||
<title>@@title</title>
|
<title>@@title</title>
|
||||||
<!-- For dark mode use dist/css/alt/adminlte.pcs.css, remove dist/css/adminlte.css -->
|
<!-- For dark mode use @@path/css/dark/adminlte-dark.css, remove dist/css/adminlte.css -->
|
||||||
<!-- <link rel="stylesheet" href="dist/css/dark/adminlte-dark.css"> -->
|
<!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark.css"> -->
|
||||||
<!-- For RTL verison -->
|
<!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
|
||||||
<!-- <link rel="stylesheet" href="dist/css/rtl/adminlte.rtl.css"> -->
|
<!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css"> -->
|
||||||
<link rel="stylesheet" href="@@path/css/adminlte.css">
|
<link rel="stylesheet" href="@@path/css/adminlte.css">
|
||||||
<link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
<link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||||
|
|
|
@ -37,6 +37,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">
|
<li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">
|
||||||
|
|
|
@ -12,6 +12,11 @@ $font-size-root: 1rem !default;
|
||||||
$transition-speed: .3s !default;
|
$transition-speed: .3s !default;
|
||||||
$transition-fn: ease-in-out !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
|
||||||
// --------------------------------------------------------
|
// --------------------------------------------------------
|
||||||
$sidebar-width: 250px !default;
|
$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-nav-link-padding-sm-x: .8rem !default;
|
||||||
$card-img-size: $img-size-sm !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
|
// Z-INDEX
|
||||||
// --------------------------------------------------------
|
// --------------------------------------------------------
|
||||||
$zindex-main-header: $zindex-fixed + 4 !default;
|
$zindex-main-header: $zindex-fixed + 4 !default;
|
||||||
|
@ -161,5 +171,36 @@ $zindex-preloader: $zindex-toasts + 2 !default;
|
||||||
$main-bg: #f4f6f9 !default;
|
$main-bg: #f4f6f9 !default;
|
||||||
$main-color: $black !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
|
// Dark mode
|
||||||
$enable-dark-mode: false !default;
|
$enable-dark-mode: false !default;
|
||||||
|
|
|
@ -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 * {
|
.resize-animation-stopper * {
|
||||||
animation: none !important;
|
animation: none !important;
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -29,4 +29,4 @@
|
||||||
@import "parts/core";
|
@import "parts/core";
|
||||||
@import "parts/components";
|
@import "parts/components";
|
||||||
@import "parts/extra-components";
|
@import "parts/extra-components";
|
||||||
@import "miscellaneous";
|
@import "parts/miscellaneous";
|
||||||
|
|
|
@ -16,9 +16,9 @@
|
||||||
// #{$property}: calc(#{$expression});
|
// #{$property}: calc(#{$expression});
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// @mixin rotate($value) {
|
@mixin rotate($value) {
|
||||||
// transform: rotate($value);
|
transform: rotate($value);
|
||||||
// }
|
}
|
||||||
|
|
||||||
// @mixin animation($animation) {
|
// @mixin animation($animation) {
|
||||||
// animation: $animation;
|
// animation: $animation;
|
||||||
|
|
|
@ -3,3 +3,4 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
@import "../cards";
|
@import "../cards";
|
||||||
|
@import "../table";
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
//
|
||||||
|
// Part: Miscellaneous
|
||||||
|
//
|
||||||
|
|
||||||
|
@import "../miscellaneous";
|
||||||
|
@import "../text";
|
Loading…
Reference in New Issue